Refactor monitoring resources and enhance dashboard filters#3754
Refactor monitoring resources and enhance dashboard filters#3754Darkace01 wants to merge 4 commits intoDokploy:canaryfrom
Conversation
…it tests Extract monitoring resources mapping into monitoring-resources.ts and replace inline mapping in monitoring.tsx with the new helper. Add unit tests monitoring-resources.test.ts to cover null input and mapping of applications, compose entries, and database services.
|
Too many files changed for review. ( |
There was a problem hiding this comment.
Pull request overview
This PR refactors monitoring resources by extracting resource mapping logic into a reusable utility function with unit tests, and enhances the monitoring dashboard with project and resource filtering capabilities. It also updates the development container configuration.
Changes:
- Extracted resource mapping logic from the monitoring component into a separate utility function with comprehensive unit tests
- Added project and resource filter dropdowns to the monitoring dashboard for improved navigation
- Updated devcontainer configuration to include Python 3.11
Reviewed changes
Copilot reviewed 3 out of 1083 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx | Adds project and resource filtering UI, integrates container monitoring, and implements resource selection logic |
| apps/dokploy/test/monitoring-resources.test.ts | Adds unit tests for the monitoring resources utility function |
| .devcontainer/devcontainer.json | Adds Python 3.11 feature to the development container |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const resources = useMemo<MonitoringResource[]>(() => { | ||
| if (!projects) { | ||
| return []; | ||
| } | ||
|
|
||
| const allResources = projects.flatMap((project) => { | ||
| const projectId = project.projectId; | ||
| const projectName = project.name; | ||
|
|
||
| return project.environments.flatMap((environment) => [ | ||
| ...environment.applications.map((app) => ({ | ||
| key: `application-${app.applicationId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: app.appName, | ||
| label: app.name, | ||
| type: "Application", | ||
| serverId: app.serverId, | ||
| })), | ||
| ...environment.compose.map((service) => ({ | ||
| key: `compose-${service.composeId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "Compose", | ||
| serverId: service.serverId, | ||
| })), | ||
| ...environment.postgres.map((service) => ({ | ||
| key: `postgres-${service.postgresId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "Postgres", | ||
| serverId: service.serverId, | ||
| })), | ||
| ...environment.redis.map((service) => ({ | ||
| key: `redis-${service.redisId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "Redis", | ||
| serverId: service.serverId, | ||
| })), | ||
| ...environment.mysql.map((service) => ({ | ||
| key: `mysql-${service.mysqlId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "MySQL", | ||
| serverId: service.serverId, | ||
| })), | ||
| ...environment.mongo.map((service) => ({ | ||
| key: `mongo-${service.mongoId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "MongoDB", | ||
| serverId: service.serverId, | ||
| })), | ||
| ...environment.mariadb.map((service) => ({ | ||
| key: `mariadb-${service.mariadbId}`, | ||
| projectId, | ||
| projectName, | ||
| appName: service.appName, | ||
| label: service.name, | ||
| type: "MariaDB", | ||
| serverId: service.serverId, | ||
| })), | ||
| ]); | ||
| }); | ||
|
|
||
| return allResources.filter( | ||
| (resource) => | ||
| Boolean(resource.appName) && | ||
| (!serverId || resource.serverId === serverId), | ||
| ); | ||
| }, [projects, serverId]); |
There was a problem hiding this comment.
This resource mapping logic duplicates the implementation being tested in the new utility file. The PR description mentions extracting this logic into a separate file, but the component still contains the inline implementation instead of using the extracted utility function. Consider replacing this useMemo block with a call to buildMonitoringResources.
|
|
||
| expect(appResource?.label).toBe("App A"); |
There was a problem hiding this comment.
This assertion is duplicated on line 55 and adds no additional value. Remove this redundant test assertion.
| expect(appResource?.label).toBe("App A"); |
| }, | ||
| "ghcr.io/devcontainers/features/python:1": { "version": "3.11" } |
There was a problem hiding this comment.
The PR description does not explain why Python 3.11 is being added to the development container. This addition appears unrelated to the monitoring refactoring work and lacks justification in the PR context.
| }, | |
| "ghcr.io/devcontainers/features/python:1": { "version": "3.11" } | |
| } |
What is this PR about?
This PR refactors the monitoring resources by extracting the mapping logic into a separate file and adds unit tests for various scenarios. It also sets up the initial development container and enhances the monitoring dashboard with project and resource filters for improved usability.
Checklist
Before submitting this PR, please make sure that:
canarybranch.Issues related (if applicable)
closes #123
Screenshots (if applicable)