Merge pull request #10 from orus-dev/ui-core-patches
UI and core patches
This commit is contained in:
Klesti Selimaj
Generated
+366
@@ -11,6 +11,7 @@
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-progress": "^1.1.8",
|
||||
@@ -1184,6 +1185,88 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
|
||||
"integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
|
||||
@@ -1306,6 +1389,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-direction": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
|
||||
"integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dismissable-layer": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
|
||||
@@ -1374,6 +1472,91 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dropdown-menu": {
|
||||
"version": "2.1.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
|
||||
"integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-menu": "2.1.16",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-focus-guards": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
|
||||
@@ -1496,6 +1679,102 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu": {
|
||||
"version": "2.1.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
|
||||
"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popover": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
|
||||
@@ -1813,6 +2092,93 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
|
||||
"integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-progress": "^1.1.8",
|
||||
|
||||
+42
-106
@@ -1,23 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Play, Square, MoreVertical, Plus, Rocket } from "lucide-react";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { MoreVertical, Plus, Rocket } from "lucide-react";
|
||||
import InstallApplicationDialog from "@/components/dialogs/InstallApplication";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ImageApp } from "@/lib/types";
|
||||
import { getApplications, removeApp } from "@/core/application";
|
||||
import RemoveDialog from "@/components/dialogs/Remove";
|
||||
import { Application } from "@/lib/types";
|
||||
|
||||
export default function ApplicationsPage() {
|
||||
const [applications, setApplications] = useState<ImageApp[]>([]);
|
||||
const [applications, setApplications] = useState<Application[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = async () => {
|
||||
setApplications(await getApplications());
|
||||
const apps = await getApplications();
|
||||
setApplications(apps);
|
||||
};
|
||||
|
||||
fetch();
|
||||
@@ -40,115 +47,44 @@ export default function ApplicationsPage() {
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge>{applications.length} apps</Badge>
|
||||
<Badge>
|
||||
{applications.filter((a) => a.status === "running").length} running
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<InstallApplicationDialog>
|
||||
<Button size="sm" className="gap-2 w-full sm:w-auto">
|
||||
<Plus className="w-4 h-4" />
|
||||
Install Application
|
||||
<Plus className="w-4 h-4" /> Install Application
|
||||
</Button>
|
||||
</InstallApplicationDialog>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{applications.map((app) => (
|
||||
<Card key={app.id}>
|
||||
<CardHeader>
|
||||
<CardTitle>{app.name}</CardTitle>
|
||||
<CardDescription>{app.repo}</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<div className="space-y-3">
|
||||
{applications.map((app, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:items-center">
|
||||
{/* Status & Name */}
|
||||
<div className="flex items-center gap-3 md:col-span-3">
|
||||
{/* {app.status} */}
|
||||
<div className="min-w-0">
|
||||
<div className="font-mono text-sm font-medium">
|
||||
{app.app?.name || app.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground font-mono truncate">
|
||||
{app.image}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Containers */}
|
||||
<div className="flex justify-between md:block md:col-span-1">
|
||||
<span className="text-xs text-muted-foreground md:hidden">
|
||||
Containers
|
||||
</span>
|
||||
<div className="font-mono text-sm">{app.replicas}</div>
|
||||
</div>
|
||||
|
||||
{/* CPU */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">CPU</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={app.cpu} className="w-full" />
|
||||
<span className="text-xs font-mono w-8">
|
||||
{app.cpu.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Memory */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">
|
||||
Memory
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={app.memory} className="w-full" />
|
||||
<span className="text-xs font-mono w-8">
|
||||
{app.memory.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network */}
|
||||
<div className="flex justify-between md:block md:col-span-1">
|
||||
<span className="text-xs text-muted-foreground md:hidden">
|
||||
Network
|
||||
</span>
|
||||
<div className="font-mono text-xs">{app.network}</div>
|
||||
</div>
|
||||
|
||||
{/* Ports */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">
|
||||
Ports
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{app.ports?.length > 0 ? (
|
||||
app.ports.map((port) => (
|
||||
<Badge key={port} className="text-[10px]">
|
||||
{port}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-1 md:col-span-1">
|
||||
{app.status === "running" ? (
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Square className="w-3 h-3" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Rocket className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
<RemoveDialog
|
||||
remove={() => app.app?.id && remove(app.app?.id)}
|
||||
/>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<CardContent className="flex flex-col gap-2">
|
||||
{/* Deployments */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Deployments
|
||||
</span>
|
||||
<span className="font-mono text-sm">
|
||||
{app.deployments?.length ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="justify-end">
|
||||
<Button variant="ghost" size="icon-sm" aria-label="Deploy">
|
||||
<Rocket className="w-3 h-3" />
|
||||
</Button>
|
||||
|
||||
<RemoveDialog remove={() => remove(app.id)} />
|
||||
|
||||
<Button variant="ghost" size="icon-sm" aria-label="More options">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,270 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MoreVertical, Play, Square, Container } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getDocker, removeContainer } from "@/core/docker";
|
||||
import { getNodes } from "@/core/node";
|
||||
import { ContainerInfo } from "dockerode";
|
||||
import { formatBytes } from "@/lib/format";
|
||||
import {
|
||||
getContainerStats,
|
||||
startContainer,
|
||||
stopContainer,
|
||||
} from "@/core/docker";
|
||||
import RemoveDialog from "@/components/dialogs/Remove";
|
||||
|
||||
type ContainerSummary = {
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
node: string;
|
||||
status: "running" | "stopped";
|
||||
uptime: string;
|
||||
cpu: number;
|
||||
memory: number;
|
||||
};
|
||||
|
||||
async function summarizeContainer(
|
||||
container: ContainerInfo,
|
||||
nodeName: string
|
||||
): Promise<ContainerSummary> {
|
||||
// 1. Shorten the long container ID
|
||||
const shortId = container.Id;
|
||||
|
||||
// 2. Clean the name
|
||||
const name = container.Names[0]?.replace(/^\//, "") ?? "unknown";
|
||||
|
||||
// 3. Normalize status
|
||||
const status = container.State === "running" ? "running" : "stopped";
|
||||
|
||||
// 4. Compute uptime from Status string (if available)
|
||||
const uptime = container.Status?.replace(/^Up\s*/, "") ?? "unknown";
|
||||
|
||||
const stats = await getContainerStats(container.Id);
|
||||
|
||||
return {
|
||||
id: shortId,
|
||||
name,
|
||||
image: container.Image,
|
||||
node: nodeName,
|
||||
status,
|
||||
uptime,
|
||||
cpu: stats?.cpu || 0,
|
||||
memory: stats?.memory || 0,
|
||||
};
|
||||
}
|
||||
|
||||
export default function ContainersPage() {
|
||||
const [containers, setContainers] = useState<ContainerSummary[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchNodes = async () => {
|
||||
const nodes = await getNodes();
|
||||
const dockerNodes = await getDocker(nodes);
|
||||
|
||||
setContainers(
|
||||
await Promise.all(
|
||||
nodes.flatMap((node, i) =>
|
||||
dockerNodes[i].containers.map((c) =>
|
||||
summarizeContainer(c, node.name)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
fetchNodes();
|
||||
|
||||
const iid = setInterval(fetchNodes, 3000);
|
||||
return () => clearInterval(iid);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Containers"
|
||||
subtitle="View and manage container instances"
|
||||
>
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
<Badge>{containers.length} containers</Badge>
|
||||
<Badge>
|
||||
{containers.filter((c) => c.status === "running").length} running
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{/* ================= DESKTOP TABLE ================= */}
|
||||
<div className="hidden xl:block">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
{[
|
||||
"Container",
|
||||
"Image",
|
||||
"Node",
|
||||
"Status",
|
||||
"Uptime",
|
||||
"CPU",
|
||||
"Memory",
|
||||
"Actions",
|
||||
].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
|
||||
h === "Actions" ? "text-right" : ""
|
||||
}`}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{containers.map((container) => (
|
||||
<tr key={container.id} className="data-table-row">
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Container className="w-4 h-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-mono text-sm">
|
||||
{container.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground font-mono">
|
||||
{container.id.slice(0, 12)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs text-muted-foreground">
|
||||
{container.image}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4">{container.node}</td>
|
||||
|
||||
<td className="py-3 px-4">{container.status}</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs">
|
||||
{container.uptime}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs">
|
||||
{container.cpu.toFixed(1)}%
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs">
|
||||
{container.memory.toFixed(1)}%
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex justify-end gap-1">
|
||||
{container.status === "running" ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => stopContainer(container.id)}
|
||||
>
|
||||
<Square className="w-3 h-3" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => startContainer(container.id)}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
<RemoveDialog
|
||||
remove={() => removeContainer(container.id)}
|
||||
/>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* ================= MOBILE CARDS ================= */}
|
||||
<div className="xl:hidden divide-y divide-border">
|
||||
{containers.map((container) => (
|
||||
<div key={container.id} className="p-4 space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Container className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{container.name}</span>
|
||||
</div>
|
||||
{container.status}
|
||||
</div>
|
||||
|
||||
<div className="text-[10px] font-mono text-muted-foreground">
|
||||
{container.id}
|
||||
</div>
|
||||
|
||||
<div className="text-xs font-mono text-muted-foreground truncate">
|
||||
{container.image}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Node</span>
|
||||
<div>{container.node}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Uptime</span>
|
||||
<div className="font-mono">{container.uptime}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">CPU</span>
|
||||
<div className="font-mono">{container.cpu.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Memory</span>
|
||||
<div className="font-mono">
|
||||
{container.memory.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-1 pt-2">
|
||||
{container.status === "running" ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => stopContainer(container.id)}
|
||||
>
|
||||
<Square className="w-3 h-3" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => startContainer(container.id)}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
<RemoveDialog remove={() => removeContainer(container.id)} />
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
+79
-209
@@ -12,238 +12,108 @@ import {
|
||||
Plus,
|
||||
GitBranch,
|
||||
} from "lucide-react";
|
||||
|
||||
const deployments = [
|
||||
{
|
||||
id: "dep-001",
|
||||
app: "api-gateway",
|
||||
version: "v2.4.1",
|
||||
previousVersion: "v2.4.0",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-15 14:32:18",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "45s",
|
||||
replicas: "3/3",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-002",
|
||||
app: "auth-service",
|
||||
version: "v1.8.0",
|
||||
previousVersion: "v1.7.9",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-15 14:18:42",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "32s",
|
||||
replicas: "2/2",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-003",
|
||||
app: "worker-queue",
|
||||
version: "v3.1.2",
|
||||
previousVersion: "v3.1.1",
|
||||
status: "pending" as const,
|
||||
deployedAt: "2024-01-15 13:58:05",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "—",
|
||||
replicas: "3/4",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-004",
|
||||
app: "metrics-collector",
|
||||
version: "v1.2.0",
|
||||
previousVersion: "v1.1.8",
|
||||
status: "error" as const,
|
||||
deployedAt: "2024-01-15 13:42:11",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "—",
|
||||
replicas: "0/2",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-005",
|
||||
app: "postgres-db",
|
||||
version: "15-alpine",
|
||||
previousVersion: "14-alpine",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-10 09:15:33",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "2m 18s",
|
||||
replicas: "1/1",
|
||||
strategy: "recreate",
|
||||
},
|
||||
{
|
||||
id: "dep-006",
|
||||
app: "redis-cache",
|
||||
version: "7-alpine",
|
||||
previousVersion: "7-alpine",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-08 16:45:22",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "18s",
|
||||
replicas: "1/1",
|
||||
strategy: "recreate",
|
||||
},
|
||||
];
|
||||
import { useEffect, useState } from "react";
|
||||
import { Application, Deployment } from "@/lib/types";
|
||||
import { getDeployments } from "@/core/server/deployment";
|
||||
import { getApplications } from "@/core/application";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
const [applications, setApplications] = useState<Application[]>([]);
|
||||
const [deployments, setDeployments] = useState<Deployment[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = async () => {
|
||||
const apps = await getApplications();
|
||||
setApplications(apps);
|
||||
setDeployments((await getDeployments(apps)).filter((d) => d !== null));
|
||||
};
|
||||
fetch();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Deployments"
|
||||
subtitle="Deployment history and management"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
|
||||
<div className="flex flex-row gap-3 items-center justify-between mb-6">
|
||||
<Badge>{deployments.length} deployments</Badge>
|
||||
|
||||
<Button size="sm" className="gap-2 self-start sm:self-auto">
|
||||
<Button size="sm" className="gap-2 self-auto">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">New Deployment</span>
|
||||
New Deployment
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{/* Desktop table */}
|
||||
<div className="hidden md:block">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
{[
|
||||
"Application",
|
||||
"Version",
|
||||
"Status",
|
||||
"Replicas",
|
||||
"Deployed",
|
||||
"Duration",
|
||||
"Deployed By",
|
||||
"Actions",
|
||||
].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
|
||||
h === "Actions" ? "text-right" : ""
|
||||
}`}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{deployments.map((dep) => (
|
||||
<tr key={dep.id} className="data-table-row">
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Rocket className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{dep.app}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="w-3 h-3 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{dep.version}</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
← {dep.previousVersion}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4">{dep.status}</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-sm">
|
||||
{dep.replicas}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs text-muted-foreground">
|
||||
{dep.deployedAt}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 font-mono text-xs">
|
||||
{dep.duration}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4 text-xs text-muted-foreground">
|
||||
{dep.deployedBy}
|
||||
</td>
|
||||
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Eye className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="hidden md:visible space-y-3">
|
||||
{deployments.map((dep) => (
|
||||
<div
|
||||
key={dep.image}
|
||||
className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
"size-2 rounded-full",
|
||||
(dep.status === "running" && "bg-chart-2") ||
|
||||
(dep.status === "pending" && "bg-chart-1") ||
|
||||
"bg-slate-400 dark:bg-slate-600"
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-mono text-sm">
|
||||
{
|
||||
applications.find((app) =>
|
||||
app.deployments.includes(dep.image)
|
||||
)?.name
|
||||
}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{/* {dep.version} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1 sm:mt-0">
|
||||
{/* <Clock className="w-3 h-3" /> {dep.time} */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mobile cards */}
|
||||
<div className="md:hidden divide-y divide-border">
|
||||
{deployments.map((dep) => (
|
||||
<div key={dep.id} className="p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Rocket className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{dep.app}</span>
|
||||
</div>
|
||||
{dep.status}
|
||||
</div>
|
||||
{/* Mobile cards */}
|
||||
<div className="md:hidden divide-y divide-border">
|
||||
{deployments.map((dep) => (
|
||||
<div key={dep.image} className="p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Rocket className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{dep.image}</span>
|
||||
</div>
|
||||
{dep.status}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<GitBranch className="w-3 h-3 text-muted-foreground" />
|
||||
<span className="font-mono">{dep.version}</span>
|
||||
<span className="text-muted-foreground">
|
||||
← {dep.previousVersion}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Replicas</span>
|
||||
<div className="font-mono">{dep.replicas}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Duration</span>
|
||||
<div className="font-mono">{dep.duration}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Deployed</span>
|
||||
<div className="font-mono">{dep.deployedAt}</div>
|
||||
</div>
|
||||
{/* <div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-muted-foreground">By</span>
|
||||
<div className="truncate">{dep.deployedBy}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex justify-end gap-1 pt-2">
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Eye className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-end gap-1 pt-2">
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Eye className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
+150
-158
@@ -4,12 +4,18 @@ import { useEffect, useState } from "react";
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Trash2, Eye, EyeOff, Copy, Save, Lock, Loader2 } from "lucide-react";
|
||||
import { Env } from "@/lib/types";
|
||||
import { getEnv, setEnv } from "@/core/application";
|
||||
import { AddVariableDialog } from "@/components/dialogs/AddVariable";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
export default function EnvironmentPage() {
|
||||
const [selectedApp, setSelectedApp] = useState("");
|
||||
@@ -53,174 +59,160 @@ export default function EnvironmentPage() {
|
||||
title="Environment"
|
||||
subtitle="Manage environment variables"
|
||||
>
|
||||
<div className="flex flex-col gap-6 md:flex-row">
|
||||
{/* Sidebar */}
|
||||
<div className="md:w-56 md:shrink-0">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
|
||||
Applications
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2 flex gap-2 md:block overflow-x-auto">
|
||||
{Object.entries(envGroups).map(([id, variables]) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setSelectedApp(id)}
|
||||
className={`
|
||||
whitespace-nowrap md:w-full text-left px-3 py-2 text-sm font-mono transition-colors
|
||||
${
|
||||
selectedApp === id
|
||||
? "bg-secondary text-foreground"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
}
|
||||
`}
|
||||
<Card>
|
||||
<CardHeader className="flex gap-3 flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="font-mono">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className="
|
||||
flex items-center gap-2
|
||||
font-mono text-lg
|
||||
hover:text-primary
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
{variables.name}
|
||||
<Badge className="ml-2 text-[10px]">
|
||||
{variables.variables.length}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{currentGroup?.name ?? selectedApp}
|
||||
<ChevronDown className="w-4 h-4 opacity-60" />
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
{/* Main */}
|
||||
<div className="flex-1">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="font-mono">{selectedApp}</CardTitle>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{currentGroup?.variables.length} variables •{" "}
|
||||
{currentGroup?.variables.filter((v) => v.secret).length}{" "}
|
||||
secrets
|
||||
</p>
|
||||
</div>
|
||||
<DropdownMenuContent align="start" className="w-2xs">
|
||||
{Object.entries(envGroups).map(([id, env]) => (
|
||||
<DropdownMenuItem
|
||||
key={env.id}
|
||||
onClick={() => setSelectedApp(id)}
|
||||
className={selectedApp === id ? "font-medium" : ""}
|
||||
>
|
||||
{env.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</CardTitle>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{currentGroup?.variables.length} variables •{" "}
|
||||
{currentGroup?.variables.filter((v) => v.secret).length} secrets
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<AddVariableDialog
|
||||
selectedApp={selectedApp}
|
||||
currentGroup={currentGroup}
|
||||
setEnvGroups={setEnvGroups}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
{isSaving ? "Saving..." : "Save Changes"}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<AddVariableDialog
|
||||
selectedApp={selectedApp}
|
||||
currentGroup={currentGroup}
|
||||
setEnvGroups={setEnvGroups}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
{isSaving ? "Saving..." : "Save Changes"}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
{/* Table header (desktop only) */}
|
||||
<div className="hidden md:grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
|
||||
<div className="col-span-4">Key</div>
|
||||
<div className="col-span-6">Value</div>
|
||||
<div className="col-span-2 text-right">Actions</div>
|
||||
</div>
|
||||
<CardContent>
|
||||
{/* Table header (desktop only) */}
|
||||
<div className="hidden md:grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
|
||||
<div className="col-span-4">Key</div>
|
||||
<div className="col-span-6">Value</div>
|
||||
<div className="col-span-2 text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
<div className="divide-y divide-border md:divide-none">
|
||||
{currentGroup?.variables.map((variable, i) => (
|
||||
<div
|
||||
key={variable.key}
|
||||
className="
|
||||
{/* Rows */}
|
||||
<div className="divide-y divide-border md:divide-none">
|
||||
{currentGroup?.variables.map((variable, i) => (
|
||||
<div
|
||||
key={variable.key}
|
||||
className="
|
||||
py-4 md:py-3
|
||||
flex flex-col gap-3
|
||||
md:grid md:grid-cols-12 md:gap-4 md:items-center
|
||||
"
|
||||
>
|
||||
{/* Key */}
|
||||
<div className="md:col-span-4 flex items-center gap-2">
|
||||
{variable.secret && <Lock className="w-3 h-3 text-warning" />}
|
||||
<span className="font-mono text-sm">{variable.key}</span>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="md:col-span-6">
|
||||
<Input
|
||||
type={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? "password"
|
||||
: "text"
|
||||
}
|
||||
value={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? maskValue(variable.value)
|
||||
: variable.value
|
||||
}
|
||||
readOnly
|
||||
className="font-mono text-xs h-8 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="md:col-span-2 flex items-center justify-end gap-1">
|
||||
{variable.secret && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => toggleSecret(variable.key)}
|
||||
>
|
||||
{showSecrets[variable.key] ? (
|
||||
<EyeOff className="w-3 h-3" />
|
||||
) : (
|
||||
<Eye className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
navigator.clipboard.writeText(
|
||||
`${variable.key}=${variable.value}`
|
||||
)
|
||||
}
|
||||
>
|
||||
{/* Key */}
|
||||
<div className="md:col-span-4 flex items-center gap-2">
|
||||
{variable.secret && (
|
||||
<Lock className="w-3 h-3 text-warning" />
|
||||
)}
|
||||
<span className="font-mono text-sm">{variable.key}</span>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="md:col-span-6">
|
||||
<Input
|
||||
type={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? "password"
|
||||
: "text"
|
||||
}
|
||||
value={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? maskValue(variable.value)
|
||||
: variable.value
|
||||
}
|
||||
readOnly
|
||||
className="font-mono text-xs h-8 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="md:col-span-2 flex items-center justify-end gap-1">
|
||||
{variable.secret && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => toggleSecret(variable.key)}
|
||||
>
|
||||
{showSecrets[variable.key] ? (
|
||||
<EyeOff className="w-3 h-3" />
|
||||
) : (
|
||||
<Eye className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
navigator.clipboard.writeText(
|
||||
`${variable.key}=${variable.value}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="hover:text-destructive"
|
||||
onClick={() => {
|
||||
setEnvGroups((env) => ({
|
||||
...env,
|
||||
[selectedApp]: {
|
||||
...env[selectedApp],
|
||||
variables: env[selectedApp].variables.filter(
|
||||
(_, iv) => iv !== i
|
||||
),
|
||||
},
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="hover:text-destructive"
|
||||
onClick={() => {
|
||||
setEnvGroups((env) => ({
|
||||
...env,
|
||||
[selectedApp]: {
|
||||
...env[selectedApp],
|
||||
variables: env[selectedApp].variables.filter(
|
||||
(_, iv) => iv !== i
|
||||
),
|
||||
},
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
+67
-87
@@ -12,16 +12,16 @@ import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
Clock,
|
||||
Rocket,
|
||||
} from "lucide-react";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import Link from "next/link";
|
||||
import { getLiveNodes } from "@/core/node";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Docker, Node, NodeLiveData } from "@/lib/types";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import { getSession } from "@/core/auth/session";
|
||||
import { Application, Docker, Node, NodeLiveData } from "@/lib/types";
|
||||
import { getDocker } from "@/core/docker";
|
||||
import { getApplications } from "@/core/application";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const recentDeployments = [
|
||||
{
|
||||
@@ -54,53 +54,17 @@ const recentDeployments = [
|
||||
},
|
||||
];
|
||||
|
||||
const applications = [
|
||||
{
|
||||
name: "api-gateway",
|
||||
containers: 3,
|
||||
cpu: 45,
|
||||
memory: 62,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "auth-service",
|
||||
containers: 2,
|
||||
cpu: 28,
|
||||
memory: 45,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "postgres-db",
|
||||
containers: 1,
|
||||
cpu: 65,
|
||||
memory: 78,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "redis-cache",
|
||||
containers: 1,
|
||||
cpu: 12,
|
||||
memory: 34,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "worker-queue",
|
||||
containers: 4,
|
||||
cpu: 55,
|
||||
memory: 48,
|
||||
status: "pending" as const,
|
||||
},
|
||||
].slice(-5);
|
||||
|
||||
export default function OverviewPage() {
|
||||
const [nodes, setNodes] = useState<(NodeLiveData & Node)[]>([]);
|
||||
const [dockerNodes, setDockerNodes] = useState<Docker[]>([]);
|
||||
const [apps, setApplications] = useState<Application[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchNodes = async () => {
|
||||
const nodes = await getLiveNodes();
|
||||
setNodes(nodes);
|
||||
setDockerNodes(await getDocker(nodes));
|
||||
setApplications(await getApplications());
|
||||
};
|
||||
fetchNodes();
|
||||
const interval = setInterval(fetchNodes, 3000);
|
||||
@@ -114,10 +78,24 @@ export default function OverviewPage() {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="Applications"
|
||||
value="12"
|
||||
subtitle="3 pending"
|
||||
value={apps.length}
|
||||
subtitle={`${
|
||||
apps.filter((app) => app.deployments.length > 0).length
|
||||
} Deployed`}
|
||||
icon={<Box className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Deployments"
|
||||
value="0"
|
||||
subtitle="0 running"
|
||||
icon={<Rocket className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Nodes"
|
||||
value={nodes.filter((n) => n.liveData).length}
|
||||
subtitle="online"
|
||||
icon={<Server className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Containers"
|
||||
value={dockerNodes.reduce(
|
||||
@@ -128,18 +106,6 @@ export default function OverviewPage() {
|
||||
subtitle="running"
|
||||
icon={<Container className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Nodes"
|
||||
value={nodes.filter((n) => n.liveData).length}
|
||||
subtitle="online"
|
||||
icon={<Server className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Uptime"
|
||||
value="99.9%"
|
||||
trend={{ value: 0.2, isPositive: true }}
|
||||
icon={<Activity className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Applications & Deployments */}
|
||||
@@ -155,38 +121,45 @@ export default function OverviewPage() {
|
||||
</Link>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<div className="space-y-0 min-w-125">
|
||||
<div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
|
||||
<div className="col-span-4">Name</div>
|
||||
<div className="col-span-2">Containers</div>
|
||||
<div className="col-span-2">CPU</div>
|
||||
<div className="col-span-2">Memory</div>
|
||||
<div className="col-span-2">Status</div>
|
||||
<div className="min-w-lg">
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-12 gap-4 text-xs font-medium text-muted-foreground uppercase tracking-wider py-2 border-b">
|
||||
<div className="col-span-5">Name</div>
|
||||
<div className="col-span-4">Deployments</div>
|
||||
<div className="col-span-3">Node</div>
|
||||
</div>
|
||||
{applications.map((app) => (
|
||||
<div
|
||||
key={app.name}
|
||||
className="grid grid-cols-12 gap-4 py-3 items-center data-table-row"
|
||||
>
|
||||
<div className="col-span-4 font-mono text-sm">{app.name}</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground">
|
||||
{app.containers}
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center gap-2">
|
||||
<Progress value={app.cpu} className="w-full" />
|
||||
<span className="text-xs text-muted-foreground font-mono w-8">
|
||||
{app.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center gap-2">
|
||||
<Progress value={app.memory} className="w-full" />
|
||||
<span className="text-xs text-muted-foreground font-mono w-8">
|
||||
{app.memory}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-2">{app.status}</div>
|
||||
|
||||
{/* Rows */}
|
||||
{apps.slice(-5).length === 0 ? (
|
||||
<div className="py-6 text-sm text-muted-foreground text-center">
|
||||
No applications yet
|
||||
</div>
|
||||
))}
|
||||
) : (
|
||||
apps.slice(-5).map((app) => (
|
||||
<div
|
||||
key={app.name}
|
||||
className="
|
||||
grid grid-cols-12 gap-4 py-3 items-center
|
||||
text-sm
|
||||
hover:bg-muted/50
|
||||
transition-colors
|
||||
rounded-md
|
||||
"
|
||||
>
|
||||
<div className="col-span-5 font-mono truncate">
|
||||
{app.name}
|
||||
</div>
|
||||
|
||||
<div className="col-span-4 text-muted-foreground">
|
||||
{app.deployments.length}
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 truncate">
|
||||
{nodes.find((n) => n.node_id === app.nodeId)?.name ?? "—"}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -209,7 +182,14 @@ export default function OverviewPage() {
|
||||
className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{dep.status}
|
||||
<span
|
||||
className={cn(
|
||||
"size-2 rounded-full",
|
||||
(dep.status === "running" && "bg-chart-2") ||
|
||||
(dep.status === "pending" && "bg-chart-1") ||
|
||||
"bg-slate-400 dark:bg-slate-600"
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-mono text-sm">{dep.app}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
|
||||
@@ -8,8 +8,6 @@ import {
|
||||
FileText,
|
||||
Settings,
|
||||
Activity,
|
||||
Container,
|
||||
Command,
|
||||
} from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
@@ -25,7 +23,6 @@ import {
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -34,9 +31,8 @@ import { version } from "../../../package.json";
|
||||
const navigation = [
|
||||
{ name: "Overview", href: "/overview", icon: LayoutGrid },
|
||||
{ name: "Applications", href: "/applications", icon: Box },
|
||||
{ name: "Containers", href: "/containers", icon: Container },
|
||||
{ name: "Nodes", href: "/nodes", icon: Server },
|
||||
{ name: "Deployments", href: "/deployments", icon: Rocket },
|
||||
{ name: "Nodes", href: "/nodes", icon: Server },
|
||||
{ name: "Logs", href: "/logs", icon: FileText },
|
||||
{ name: "Environment", href: "/environment", icon: Settings },
|
||||
{ name: "Monitoring", href: "/monitoring", icon: Activity },
|
||||
|
||||
@@ -0,0 +1,257 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import { verifySession } from "./auth/session";
|
||||
import { getNodes } from "./node";
|
||||
import axios from "axios";
|
||||
import { Env, EnvVariable, ImageApp } from "@/lib/types";
|
||||
import { Env, EnvVariable, Application } from "@/lib/types";
|
||||
|
||||
export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
if (await verifySession()) {
|
||||
@@ -25,7 +25,7 @@ export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
).data.applications;
|
||||
}
|
||||
|
||||
export async function getApplications(): Promise<ImageApp[]> {
|
||||
export async function getApplications(): Promise<Application[]> {
|
||||
const nodes = await getNodes();
|
||||
|
||||
return (
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
"use server";
|
||||
|
||||
import axios from "axios";
|
||||
import { Docker, Log, Node, SimpleStats } from "@/lib/types";
|
||||
import { Deployment, Docker, Log, Node, SimpleStats } from "@/lib/types";
|
||||
import { verifySession } from "./auth/session";
|
||||
import { getNodes } from "./node";
|
||||
|
||||
|
||||
@@ -1,80 +1,25 @@
|
||||
"use server";
|
||||
|
||||
import Docker, { Container, ContainerStats } from "dockerode";
|
||||
import Docker from "dockerode";
|
||||
import { randomUUID } from "crypto";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { exec } from "child_process";
|
||||
import util from "util";
|
||||
import { Env, EnvVariable, ImageApp } from "@/lib/types";
|
||||
import { CPUusage } from "@/lib/server/calc";
|
||||
import { Application, Env, EnvVariable } from "@/lib/types";
|
||||
|
||||
const docker = new Docker();
|
||||
const execAsync = util.promisify(exec);
|
||||
const DATA_DIR = path.join(process.cwd(), "data", "apps");
|
||||
|
||||
export async function getApplications(): Promise<ImageApp[]> {
|
||||
const images = await docker.listImages();
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
|
||||
const apps: ImageApp[] = [];
|
||||
|
||||
for (const image of images) {
|
||||
const imageName = image.RepoTags?.[0];
|
||||
if (!imageName) continue;
|
||||
|
||||
const relatedContainers = containers.filter((c) => c.Image === imageName);
|
||||
|
||||
let totalCpu = 0;
|
||||
let totalMem = 0;
|
||||
let running = 0;
|
||||
const ports = new Set<string>();
|
||||
|
||||
for (const containerInfo of relatedContainers) {
|
||||
const container = docker.getContainer(containerInfo.Id);
|
||||
|
||||
if (containerInfo.State === "running") running++;
|
||||
|
||||
containerInfo.Ports?.forEach((p) => {
|
||||
if (p.PublicPort && p.PrivatePort) {
|
||||
ports.add(`${p.PublicPort}:${p.PrivatePort}`);
|
||||
}
|
||||
});
|
||||
|
||||
if (containerInfo.State === "running") {
|
||||
const stats = await container.stats({ stream: false });
|
||||
|
||||
totalMem += (stats.memory_stats.usage / stats.memory_stats.limit) * 100;
|
||||
totalCpu += CPUusage(stats);
|
||||
}
|
||||
}
|
||||
|
||||
const name = imageName.split("/").pop()?.split(":")[0] ?? imageName;
|
||||
|
||||
var app;
|
||||
|
||||
try {
|
||||
app = JSON.parse(
|
||||
fs.readFileSync(path.join(DATA_DIR, name, "app.json")).toString()
|
||||
);
|
||||
} catch {}
|
||||
|
||||
apps.push({
|
||||
app,
|
||||
name,
|
||||
id: image.Id.slice(7, 15),
|
||||
image: imageName,
|
||||
containers: relatedContainers.length,
|
||||
replicas: `${running}/${relatedContainers.length}`,
|
||||
cpu: totalCpu,
|
||||
memory: totalMem,
|
||||
network: "—",
|
||||
status: running > 0 ? ("running" as const) : ("stopped" as const),
|
||||
ports: [...ports],
|
||||
});
|
||||
}
|
||||
|
||||
return apps;
|
||||
export async function getApplications(): Promise<Application[]> {
|
||||
return fs
|
||||
.readdirSync(DATA_DIR)
|
||||
.map((appId) =>
|
||||
JSON.parse(
|
||||
fs.readFileSync(path.join(DATA_DIR, appId, "app.json")).toString()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
@@ -87,12 +32,13 @@ export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
fs.mkdirSync(repoDir, { recursive: true });
|
||||
|
||||
// Write app.json
|
||||
const appConfig = {
|
||||
const appConfig: Application = {
|
||||
id: appId,
|
||||
name,
|
||||
repo,
|
||||
nodeId,
|
||||
createdAt: new Date().toISOString(),
|
||||
deployments: [],
|
||||
};
|
||||
|
||||
fs.writeFileSync(
|
||||
@@ -100,6 +46,7 @@ export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
JSON.stringify(appConfig, null, 2)
|
||||
);
|
||||
|
||||
// Write env.json
|
||||
fs.writeFileSync(path.join(appDir, "env.json"), JSON.stringify([], null, 2));
|
||||
|
||||
// Clone repository
|
||||
@@ -115,23 +62,13 @@ export async function installApp(name: string, repo: string, nodeId: string) {
|
||||
try {
|
||||
fs.accessSync(dockerfilePath);
|
||||
} catch {
|
||||
fs.rmSync(appDir, { recursive: true });
|
||||
throw new Error("Dockerfile not found in repository root");
|
||||
}
|
||||
|
||||
const imageTag = `dockship/${appId}:latest`;
|
||||
|
||||
try {
|
||||
await execAsync(`docker build -t ${imageTag} .`, {
|
||||
cwd: repoDir,
|
||||
});
|
||||
} catch {
|
||||
throw new Error("Docker build failed");
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
appId,
|
||||
image: imageTag,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -166,9 +103,26 @@ export async function setEnv(appId: string, variables: EnvVariable[]) {
|
||||
}
|
||||
|
||||
export async function removeApp(appId: string) {
|
||||
const imageTag = `dockship/${appId}:latest`;
|
||||
const image = docker.getImage(imageTag);
|
||||
await image.remove();
|
||||
const appPath = path.join(DATA_DIR, appId);
|
||||
|
||||
const appMeta: Application = JSON.parse(
|
||||
fs.readFileSync(path.join(appPath, "app.json")).toString()
|
||||
);
|
||||
|
||||
appMeta.deployments.forEach(async (imgId) => {
|
||||
// Remove containers
|
||||
(await docker.listContainers({ all: true }))
|
||||
.filter((con) => con.ImageID === imgId)
|
||||
.forEach((con) => {
|
||||
const container = docker.getContainer(con.Id);
|
||||
container.stop();
|
||||
container.remove();
|
||||
});
|
||||
|
||||
// Remove image
|
||||
const image = docker.getImage(imgId);
|
||||
image.remove();
|
||||
});
|
||||
|
||||
fs.rmSync(appPath, { recursive: true });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
"use server";
|
||||
|
||||
import Docker from "dockerode";
|
||||
import { Application, Deployment } from "@/lib/types";
|
||||
import { CPUusage } from "@/lib/server/calc";
|
||||
|
||||
const docker = new Docker();
|
||||
|
||||
export async function getDeployments(
|
||||
apps: Application[]
|
||||
): Promise<(null | Deployment)[]> {
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
|
||||
return await Promise.all(
|
||||
apps
|
||||
.map((app) => app.deployments)
|
||||
.flat()
|
||||
.map(async (imageId) => {
|
||||
const containerInfo = containers.find(
|
||||
(container) => container.ImageID === imageId
|
||||
);
|
||||
|
||||
if (!containerInfo) return null;
|
||||
|
||||
const container = docker.getContainer(containerInfo.Id);
|
||||
|
||||
let cpu = 0;
|
||||
let memory = 0;
|
||||
let ports: Set<[number, number]> = new Set();
|
||||
|
||||
if (containerInfo.State === "running") {
|
||||
const stats = await container.stats({ stream: false });
|
||||
memory += (stats.memory_stats.usage / stats.memory_stats.limit) * 100;
|
||||
cpu += CPUusage(stats);
|
||||
}
|
||||
|
||||
containerInfo.Ports?.forEach((p) => {
|
||||
if (p.PublicPort && p.PrivatePort) {
|
||||
ports.add([p.PublicPort, p.PrivatePort]);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
image: containerInfo.ImageID,
|
||||
container: containerInfo.Id,
|
||||
cpu,
|
||||
memory,
|
||||
status: containerInfo.State === "running" ? "running" : "stopped",
|
||||
ports: [...ports],
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
+5
-9
@@ -54,20 +54,16 @@ export interface Application {
|
||||
repo: string;
|
||||
nodeId: string;
|
||||
createdAt: string;
|
||||
deployments: string[];
|
||||
}
|
||||
|
||||
export interface ImageApp {
|
||||
app?: Application;
|
||||
id: string;
|
||||
name: string;
|
||||
export interface Deployment {
|
||||
image: string;
|
||||
containers: number;
|
||||
replicas: string;
|
||||
container: string;
|
||||
cpu: number;
|
||||
memory: number;
|
||||
network: string;
|
||||
status: "running" | "stopped";
|
||||
ports: string[];
|
||||
status: "running" | "stopped" | "pending";
|
||||
ports: [number, number][];
|
||||
}
|
||||
|
||||
export interface SimpleStats {
|
||||
|
||||
Reference in New Issue
Block a user