Compare commits
No commits in common. "0603910c1f91090fac5e0dfeb2f09dba4bc24c29" and "e1771b5776bb3c6334507c64a9e5bb0316e63ee5" have entirely different histories.
0603910c1f
...
e1771b5776
14
README.md
14
README.md
@ -179,20 +179,6 @@ For detailed setup including multiple AWS accounts and Claude Code integration,
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Keyboard Shortcuts
|
|
||||||
|
|
||||||
| Shortcut | Action |
|
|
||||||
|---|---|
|
|
||||||
| `Ctrl+K` / `Cmd+K` | Open command palette |
|
|
||||||
| `Ctrl+R` / `Cmd+R` | Refresh current view |
|
|
||||||
| `Ctrl+F` / `Cmd+F` | Focus search |
|
|
||||||
| `Shift+?` | Show keyboard shortcuts help |
|
|
||||||
| `Escape` | Close modal/dialog/drawer |
|
|
||||||
| `Ctrl+↑` / `Cmd+↑` | Navigate up (in lists) |
|
|
||||||
| `Ctrl+↓` / `Cmd+↓` | Navigate down (in lists) |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Triage Workflow
|
## Triage Workflow
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
65
package-lock.json
generated
65
package-lock.json
generated
@ -14,8 +14,6 @@
|
|||||||
"@tauri-apps/plugin-dialog": "^2.7.1",
|
"@tauri-apps/plugin-dialog": "^2.7.1",
|
||||||
"@tauri-apps/plugin-fs": "^2",
|
"@tauri-apps/plugin-fs": "^2",
|
||||||
"@tauri-apps/plugin-stronghold": "^2",
|
"@tauri-apps/plugin-stronghold": "^2",
|
||||||
"@types/react-window": "^1.8.8",
|
|
||||||
"ansi-to-react": "^6.2.6",
|
|
||||||
"class-variance-authority": "^0.7",
|
"class-variance-authority": "^0.7",
|
||||||
"clsx": "^2",
|
"clsx": "^2",
|
||||||
"lucide-react": "latest",
|
"lucide-react": "latest",
|
||||||
@ -24,7 +22,6 @@
|
|||||||
"react-dom": "^19",
|
"react-dom": "^19",
|
||||||
"react-markdown": "^10",
|
"react-markdown": "^10",
|
||||||
"react-router-dom": "^6.30.4",
|
"react-router-dom": "^6.30.4",
|
||||||
"react-window": "^2.2.7",
|
|
||||||
"recharts": "^2.15.4",
|
"recharts": "^2.15.4",
|
||||||
"remark-gfm": "^4",
|
"remark-gfm": "^4",
|
||||||
"tailwindcss": "^3",
|
"tailwindcss": "^3",
|
||||||
@ -2962,6 +2959,7 @@
|
|||||||
"version": "19.2.17",
|
"version": "19.2.17",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
|
||||||
"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
|
"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.2.2"
|
"csstype": "^3.2.2"
|
||||||
@ -2977,15 +2975,6 @@
|
|||||||
"@types/react": "^19.2.0"
|
"@types/react": "^19.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/react-window": {
|
|
||||||
"version": "1.8.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
|
|
||||||
"integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@types/react": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@types/sinonjs__fake-timers": {
|
"node_modules/@types/sinonjs__fake-timers": {
|
||||||
"version": "8.1.5",
|
"version": "8.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.5.tgz",
|
||||||
@ -3827,12 +3816,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/anser": {
|
|
||||||
"version": "2.3.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/anser/-/anser-2.3.5.tgz",
|
|
||||||
"integrity": "sha512-vcZjxvvVoxTeR5XBNJB38oTu/7eDCZlwdz32N1eNgpyPF7j/Z7Idf+CUwQOkKKpJ7RJyjxgLHCM7vdIK0iCNMQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/ansi-colors": {
|
"node_modules/ansi-colors": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
||||||
@ -3872,21 +3855,6 @@
|
|||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ansi-to-react": {
|
|
||||||
"version": "6.2.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/ansi-to-react/-/ansi-to-react-6.2.6.tgz",
|
|
||||||
"integrity": "sha512-Eqi0iaMK5OZ3jsVFxWvU2B74UZBnGuHlkflKMX6wTOeH+luy9KE2O0gUkc2PxhIP1R4IO0xohv62UMFInQOSeg==",
|
|
||||||
"license": "BSD-3-Clause",
|
|
||||||
"dependencies": {
|
|
||||||
"anser": "^2.3.2",
|
|
||||||
"escape-carriage": "^1.3.1",
|
|
||||||
"linkify-it": "^3.0.3"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.3.2 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
||||||
"react-dom": "^16.3.2 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/any-promise": {
|
"node_modules/any-promise": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
|
||||||
@ -6129,12 +6097,6 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/escape-carriage": {
|
|
||||||
"version": "1.3.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
|
|
||||||
"integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/escape-string-regexp": {
|
"node_modules/escape-string-regexp": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
|
||||||
@ -9103,15 +9065,6 @@
|
|||||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/linkify-it": {
|
|
||||||
"version": "3.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
|
|
||||||
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"uc.micro": "^1.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/locate-app": {
|
"node_modules/locate-app": {
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.5.0.tgz",
|
||||||
@ -11764,16 +11717,6 @@
|
|||||||
"react-dom": ">=16.6.0"
|
"react-dom": ">=16.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-window": {
|
|
||||||
"version": "2.2.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.2.7.tgz",
|
|
||||||
"integrity": "sha512-SH5nvfUQwGHYyriDUAOt7wfPsfG9Qxd6OdzQxl5oQ4dsSsUicqQvjV7dR+NqZ4coY0fUn3w1jnC5PwzIUWEg5w==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^18.0.0 || ^19.0.0",
|
|
||||||
"react-dom": "^18.0.0 || ^19.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
@ -13818,12 +13761,6 @@
|
|||||||
"node": ">=14.17"
|
"node": ">=14.17"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/uc.micro": {
|
|
||||||
"version": "1.0.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
|
|
||||||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/unbox-primitive": {
|
"node_modules/unbox-primitive": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
|
||||||
|
|||||||
@ -21,8 +21,6 @@
|
|||||||
"@tauri-apps/plugin-dialog": "^2.7.1",
|
"@tauri-apps/plugin-dialog": "^2.7.1",
|
||||||
"@tauri-apps/plugin-fs": "^2",
|
"@tauri-apps/plugin-fs": "^2",
|
||||||
"@tauri-apps/plugin-stronghold": "^2",
|
"@tauri-apps/plugin-stronghold": "^2",
|
||||||
"@types/react-window": "^1.8.8",
|
|
||||||
"ansi-to-react": "^6.2.6",
|
|
||||||
"class-variance-authority": "^0.7",
|
"class-variance-authority": "^0.7",
|
||||||
"clsx": "^2",
|
"clsx": "^2",
|
||||||
"lucide-react": "latest",
|
"lucide-react": "latest",
|
||||||
@ -31,7 +29,6 @@
|
|||||||
"react-dom": "^19",
|
"react-dom": "^19",
|
||||||
"react-markdown": "^10",
|
"react-markdown": "^10",
|
||||||
"react-router-dom": "^6.30.4",
|
"react-router-dom": "^6.30.4",
|
||||||
"react-window": "^2.2.7",
|
|
||||||
"recharts": "^2.15.4",
|
"recharts": "^2.15.4",
|
||||||
"remark-gfm": "^4",
|
"remark-gfm": "^4",
|
||||||
"tailwindcss": "^3",
|
"tailwindcss": "^3",
|
||||||
|
|||||||
146
src-tauri/Cargo.lock
generated
146
src-tauri/Cargo.lock
generated
@ -1119,12 +1119,6 @@ dependencies = [
|
|||||||
"tendril",
|
"tendril",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "downcast-rs"
|
|
||||||
version = "1.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "75b325c5dbd37f80359721ad39aca5a29fb04c89279657cffdda8736d0c0b9d2"
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "dpi"
|
name = "dpi"
|
||||||
version = "0.1.2"
|
version = "0.1.2"
|
||||||
@ -1249,7 +1243,7 @@ dependencies = [
|
|||||||
"rustc_version",
|
"rustc_version",
|
||||||
"toml 1.1.2+spec-1.1.0",
|
"toml 1.1.2+spec-1.1.0",
|
||||||
"vswhom",
|
"vswhom",
|
||||||
"winreg 0.55.0",
|
"winreg",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
@ -1353,17 +1347,6 @@ dependencies = [
|
|||||||
"rustc_version",
|
"rustc_version",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "filedescriptor"
|
|
||||||
version = "0.8.3"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e40758ed24c9b2eeb76c35fb0aebc66c626084edd827e07e1552279814c6682d"
|
|
||||||
dependencies = [
|
|
||||||
"libc",
|
|
||||||
"thiserror 1.0.69",
|
|
||||||
"winapi",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "filetime"
|
name = "filetime"
|
||||||
version = "0.2.29"
|
version = "0.2.29"
|
||||||
@ -2434,15 +2417,6 @@ dependencies = [
|
|||||||
"generic-array",
|
"generic-array",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "ioctl-rs"
|
|
||||||
version = "0.1.6"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "f7970510895cee30b3e9128319f2cefd4bde883a39f38baa279567ba3a7eb97d"
|
|
||||||
dependencies = [
|
|
||||||
"libc",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "iota-crypto"
|
name = "iota-crypto"
|
||||||
version = "0.23.2"
|
version = "0.23.2"
|
||||||
@ -3087,20 +3061,6 @@ dependencies = [
|
|||||||
"memoffset 0.6.5",
|
"memoffset 0.6.5",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "nix"
|
|
||||||
version = "0.25.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "f346ff70e7dbfd675fe90590b92d59ef2de15a8779ae305ebcbfd3f0caf59be4"
|
|
||||||
dependencies = [
|
|
||||||
"autocfg",
|
|
||||||
"bitflags 1.3.2",
|
|
||||||
"cfg-if",
|
|
||||||
"libc",
|
|
||||||
"memoffset 0.6.5",
|
|
||||||
"pin-utils",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "nix"
|
name = "nix"
|
||||||
version = "0.31.3"
|
version = "0.31.3"
|
||||||
@ -3660,12 +3620,6 @@ version = "0.2.17"
|
|||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
|
checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "pin-utils"
|
|
||||||
version = "0.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "pkcs8"
|
name = "pkcs8"
|
||||||
version = "0.10.2"
|
version = "0.10.2"
|
||||||
@ -3753,27 +3707,6 @@ dependencies = [
|
|||||||
"bstr",
|
"bstr",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "portable-pty"
|
|
||||||
version = "0.8.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "806ee80c2a03dbe1a9fb9534f8d19e4c0546b790cde8fd1fea9d6390644cb0be"
|
|
||||||
dependencies = [
|
|
||||||
"anyhow",
|
|
||||||
"bitflags 1.3.2",
|
|
||||||
"downcast-rs",
|
|
||||||
"filedescriptor",
|
|
||||||
"lazy_static",
|
|
||||||
"libc",
|
|
||||||
"log",
|
|
||||||
"nix 0.25.1",
|
|
||||||
"serial",
|
|
||||||
"shared_library",
|
|
||||||
"shell-words",
|
|
||||||
"winapi",
|
|
||||||
"winreg 0.10.1",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "potential_utf"
|
name = "potential_utf"
|
||||||
version = "0.1.5"
|
version = "0.1.5"
|
||||||
@ -4813,48 +4746,6 @@ dependencies = [
|
|||||||
"unsafe-libyaml",
|
"unsafe-libyaml",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serial"
|
|
||||||
version = "0.4.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a1237a96570fc377c13baa1b88c7589ab66edced652e43ffb17088f003db3e86"
|
|
||||||
dependencies = [
|
|
||||||
"serial-core",
|
|
||||||
"serial-unix",
|
|
||||||
"serial-windows",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serial-core"
|
|
||||||
version = "0.4.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "3f46209b345401737ae2125fe5b19a77acce90cd53e1658cda928e4fe9a64581"
|
|
||||||
dependencies = [
|
|
||||||
"libc",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serial-unix"
|
|
||||||
version = "0.4.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "f03fbca4c9d866e24a459cbca71283f545a37f8e3e002ad8c70593871453cab7"
|
|
||||||
dependencies = [
|
|
||||||
"ioctl-rs",
|
|
||||||
"libc",
|
|
||||||
"serial-core",
|
|
||||||
"termios",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serial-windows"
|
|
||||||
version = "0.4.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "15c6d3b776267a75d31bbdfd5d36c0ca051251caafc285827052bc53bcdc8162"
|
|
||||||
dependencies = [
|
|
||||||
"libc",
|
|
||||||
"serial-core",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "serialize-to-javascript"
|
name = "serialize-to-javascript"
|
||||||
version = "0.1.2"
|
version = "0.1.2"
|
||||||
@ -4928,22 +4819,6 @@ dependencies = [
|
|||||||
"windows-sys 0.60.2",
|
"windows-sys 0.60.2",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "shared_library"
|
|
||||||
version = "0.1.9"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "5a9e7e0f2bfae24d8a5b5a66c5b257a83c7412304311512a0c054cd5e619da11"
|
|
||||||
dependencies = [
|
|
||||||
"lazy_static",
|
|
||||||
"libc",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "shell-words"
|
|
||||||
version = "1.1.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "dc6fe69c597f9c37bfeeeeeb33da3530379845f10be461a66d16d03eca2ded77"
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "shlex"
|
name = "shlex"
|
||||||
version = "2.0.1"
|
version = "2.0.1"
|
||||||
@ -5733,15 +5608,6 @@ dependencies = [
|
|||||||
"utf-8",
|
"utf-8",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "termios"
|
|
||||||
version = "0.2.2"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "d5d9cf598a6d7ce700a4e6a9199da127e6819a61e64b68609683cc9a01b5683a"
|
|
||||||
dependencies = [
|
|
||||||
"libc",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "thiserror"
|
name = "thiserror"
|
||||||
version = "1.0.69"
|
version = "1.0.69"
|
||||||
@ -6234,7 +6100,6 @@ dependencies = [
|
|||||||
"lazy_static",
|
"lazy_static",
|
||||||
"lopdf",
|
"lopdf",
|
||||||
"mockito",
|
"mockito",
|
||||||
"portable-pty",
|
|
||||||
"printpdf",
|
"printpdf",
|
||||||
"quick-xml 0.36.2",
|
"quick-xml 0.36.2",
|
||||||
"rand 0.9.4",
|
"rand 0.9.4",
|
||||||
@ -7483,15 +7348,6 @@ dependencies = [
|
|||||||
"memchr",
|
"memchr",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "winreg"
|
|
||||||
version = "0.10.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "80d0f4e272c85def139476380b12f9ac60926689dd2e01d4923222f40580869d"
|
|
||||||
dependencies = [
|
|
||||||
"winapi",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "winreg"
|
name = "winreg"
|
||||||
version = "0.55.0"
|
version = "0.55.0"
|
||||||
|
|||||||
@ -56,7 +56,6 @@ rmcp = { version = "1.7.0", features = [
|
|||||||
http = "1.4"
|
http = "1.4"
|
||||||
flate2 = { version = "1", features = ["rust_backend"] }
|
flate2 = { version = "1", features = ["rust_backend"] }
|
||||||
serde_yaml = "0.9"
|
serde_yaml = "0.9"
|
||||||
portable-pty = "0.8"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -331,7 +331,6 @@ pub async fn initiate_oauth(
|
|||||||
let refresh_registry = app_state.refresh_registry.clone();
|
let refresh_registry = app_state.refresh_registry.clone();
|
||||||
let watchers = app_state.watchers.clone();
|
let watchers = app_state.watchers.clone();
|
||||||
let log_streams = app_state.log_streams.clone();
|
let log_streams = app_state.log_streams.clone();
|
||||||
let pty_sessions = app_state.pty_sessions.clone();
|
|
||||||
|
|
||||||
tokio::spawn(async move {
|
tokio::spawn(async move {
|
||||||
let app_state_for_callback = AppState {
|
let app_state_for_callback = AppState {
|
||||||
@ -346,7 +345,6 @@ pub async fn initiate_oauth(
|
|||||||
refresh_registry,
|
refresh_registry,
|
||||||
watchers,
|
watchers,
|
||||||
log_streams,
|
log_streams,
|
||||||
pty_sessions,
|
|
||||||
};
|
};
|
||||||
while let Some(callback) = callback_rx.recv().await {
|
while let Some(callback) = callback_rx.recv().await {
|
||||||
tracing::info!("Received OAuth callback for state: {}", callback.state);
|
tracing::info!("Received OAuth callback for state: {}", callback.state);
|
||||||
|
|||||||
@ -4987,32 +4987,12 @@ pub struct NamespaceResourceInfo {
|
|||||||
pub age: String,
|
pub age: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
|
||||||
pub struct PrinterColumn {
|
|
||||||
pub name: String,
|
|
||||||
pub json_path: String,
|
|
||||||
#[serde(rename = "type")]
|
|
||||||
pub column_type: String,
|
|
||||||
pub description: Option<String>,
|
|
||||||
pub priority: i32,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
|
||||||
pub struct CrdVersion {
|
|
||||||
pub name: String,
|
|
||||||
pub served: bool,
|
|
||||||
pub storage: bool,
|
|
||||||
pub printer_columns: Vec<PrinterColumn>,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||||
pub struct CrdInfo {
|
pub struct CrdInfo {
|
||||||
pub name: String,
|
pub name: String,
|
||||||
pub group: String,
|
pub group: String,
|
||||||
pub version: String,
|
pub version: String,
|
||||||
pub versions: Vec<CrdVersion>,
|
|
||||||
pub kind: String,
|
pub kind: String,
|
||||||
pub plural: String,
|
|
||||||
pub scope: String,
|
pub scope: String,
|
||||||
pub age: String,
|
pub age: String,
|
||||||
}
|
}
|
||||||
@ -5022,7 +5002,6 @@ pub struct CustomResourceInfo {
|
|||||||
pub name: String,
|
pub name: String,
|
||||||
pub namespace: String,
|
pub namespace: String,
|
||||||
pub age: String,
|
pub age: String,
|
||||||
pub additional_columns: HashMap<String, String>,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─────────────────────────────────────────────────────────────────────────────
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
@ -6224,15 +6203,14 @@ fn parse_crds_json(json_str: &str) -> Result<Vec<CrdInfo>, String> {
|
|||||||
.unwrap_or("unknown")
|
.unwrap_or("unknown")
|
||||||
.to_string();
|
.to_string();
|
||||||
|
|
||||||
let plural = item
|
let version = item
|
||||||
.get("spec")
|
.get("spec")
|
||||||
.and_then(|s| s.get("names"))
|
.and_then(|s| s.get("versions"))
|
||||||
.and_then(|n| n.get("plural"))
|
.and_then(|v| v.as_array())
|
||||||
.and_then(|p| p.as_str())
|
.and_then(|v| v.first())
|
||||||
.unwrap_or_else(|| {
|
.and_then(|v| v.get("name"))
|
||||||
// Fallback: use name's first segment
|
.and_then(|n| n.as_str())
|
||||||
name.split('.').next().unwrap_or("unknown")
|
.unwrap_or("v1")
|
||||||
})
|
|
||||||
.to_string();
|
.to_string();
|
||||||
|
|
||||||
let kind = item
|
let kind = item
|
||||||
@ -6257,88 +6235,11 @@ fn parse_crds_json(json_str: &str) -> Result<Vec<CrdInfo>, String> {
|
|||||||
.map(parse_creation_timestamp)
|
.map(parse_creation_timestamp)
|
||||||
.unwrap_or("N/A".to_string());
|
.unwrap_or("N/A".to_string());
|
||||||
|
|
||||||
// Parse all versions with their printer columns
|
|
||||||
let versions: Vec<CrdVersion> = item
|
|
||||||
.get("spec")
|
|
||||||
.and_then(|s| s.get("versions"))
|
|
||||||
.and_then(|v| v.as_array())
|
|
||||||
.map(|versions_array| {
|
|
||||||
versions_array
|
|
||||||
.iter()
|
|
||||||
.filter_map(|ver| {
|
|
||||||
let version_name = ver.get("name").and_then(|n| n.as_str())?.to_string();
|
|
||||||
let served = ver.get("served").and_then(|s| s.as_bool()).unwrap_or(true);
|
|
||||||
let storage = ver
|
|
||||||
.get("storage")
|
|
||||||
.and_then(|s| s.as_bool())
|
|
||||||
.unwrap_or(false);
|
|
||||||
|
|
||||||
// Parse printer columns for this version
|
|
||||||
let printer_columns: Vec<PrinterColumn> = ver
|
|
||||||
.get("additionalPrinterColumns")
|
|
||||||
.and_then(|c| c.as_array())
|
|
||||||
.map(|cols| {
|
|
||||||
cols.iter()
|
|
||||||
.filter_map(|col| {
|
|
||||||
let col_name =
|
|
||||||
col.get("name").and_then(|n| n.as_str())?.to_string();
|
|
||||||
let json_path = col
|
|
||||||
.get("jsonPath")
|
|
||||||
.and_then(|j| j.as_str())?
|
|
||||||
.to_string();
|
|
||||||
let column_type = col
|
|
||||||
.get("type")
|
|
||||||
.and_then(|t| t.as_str())
|
|
||||||
.unwrap_or("string")
|
|
||||||
.to_string();
|
|
||||||
let description = col
|
|
||||||
.get("description")
|
|
||||||
.and_then(|d| d.as_str())
|
|
||||||
.map(|s| s.to_string());
|
|
||||||
let priority = col
|
|
||||||
.get("priority")
|
|
||||||
.and_then(|p| p.as_i64())
|
|
||||||
.unwrap_or(0)
|
|
||||||
as i32;
|
|
||||||
|
|
||||||
Some(PrinterColumn {
|
|
||||||
name: col_name,
|
|
||||||
json_path,
|
|
||||||
column_type,
|
|
||||||
description,
|
|
||||||
priority,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.collect()
|
|
||||||
})
|
|
||||||
.unwrap_or_default();
|
|
||||||
|
|
||||||
Some(CrdVersion {
|
|
||||||
name: version_name,
|
|
||||||
served,
|
|
||||||
storage,
|
|
||||||
printer_columns,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.collect()
|
|
||||||
})
|
|
||||||
.unwrap_or_default();
|
|
||||||
|
|
||||||
// Default version is the first one (or the storage version if available)
|
|
||||||
let version = versions
|
|
||||||
.iter()
|
|
||||||
.find(|v| v.storage)
|
|
||||||
.or_else(|| versions.first())
|
|
||||||
.map(|v| v.name.clone())
|
|
||||||
.unwrap_or_else(|| "v1".to_string());
|
|
||||||
|
|
||||||
result.push(CrdInfo {
|
result.push(CrdInfo {
|
||||||
name,
|
name,
|
||||||
group,
|
group,
|
||||||
version,
|
version,
|
||||||
versions,
|
|
||||||
kind,
|
kind,
|
||||||
plural,
|
|
||||||
scope,
|
scope,
|
||||||
age,
|
age,
|
||||||
});
|
});
|
||||||
@ -6418,66 +6319,6 @@ pub async fn list_custom_resources(
|
|||||||
parse_custom_resources_json(&output_str)
|
parse_custom_resources_json(&output_str)
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Simple JSONPath-like extractor for custom resource fields.
|
|
||||||
/// Supports basic paths like .status.phase, .spec.replicas, .metadata.labels['app']
|
|
||||||
#[allow(dead_code)]
|
|
||||||
fn extract_json_path_value(item: &Value, json_path: &str) -> String {
|
|
||||||
// Remove leading dot if present
|
|
||||||
let path = json_path.strip_prefix('.').unwrap_or(json_path);
|
|
||||||
|
|
||||||
// Split path by dots and traverse
|
|
||||||
let parts: Vec<&str> = path.split('.').collect();
|
|
||||||
let mut current = item;
|
|
||||||
|
|
||||||
for part in parts {
|
|
||||||
// Handle array access like status[0] or map access like labels['app']
|
|
||||||
if let Some(bracket_start) = part.find('[') {
|
|
||||||
let field = &part[..bracket_start];
|
|
||||||
current = match current.get(field) {
|
|
||||||
Some(v) => v,
|
|
||||||
None => return "N/A".to_string(),
|
|
||||||
};
|
|
||||||
|
|
||||||
// Extract index or key from brackets
|
|
||||||
if let Some(bracket_end) = part.find(']') {
|
|
||||||
let accessor = &part[bracket_start + 1..bracket_end];
|
|
||||||
current = if accessor.starts_with('\'') || accessor.starts_with('"') {
|
|
||||||
// Map key access
|
|
||||||
let key = accessor.trim_matches(|c| c == '\'' || c == '"');
|
|
||||||
match current.get(key) {
|
|
||||||
Some(v) => v,
|
|
||||||
None => return "N/A".to_string(),
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Array index access
|
|
||||||
match accessor.parse::<usize>() {
|
|
||||||
Ok(idx) => match current.as_array().and_then(|a| a.get(idx)) {
|
|
||||||
Some(v) => v,
|
|
||||||
None => return "N/A".to_string(),
|
|
||||||
},
|
|
||||||
Err(_) => return "N/A".to_string(),
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
current = match current.get(part) {
|
|
||||||
Some(v) => v,
|
|
||||||
None => return "N/A".to_string(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert final value to string
|
|
||||||
match current {
|
|
||||||
Value::String(s) => s.clone(),
|
|
||||||
Value::Number(n) => n.to_string(),
|
|
||||||
Value::Bool(b) => b.to_string(),
|
|
||||||
Value::Null => "".to_string(),
|
|
||||||
Value::Array(a) => format!("[{} items]", a.len()),
|
|
||||||
Value::Object(_) => "{object}".to_string(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fn parse_custom_resources_json(json_str: &str) -> Result<Vec<CustomResourceInfo>, String> {
|
fn parse_custom_resources_json(json_str: &str) -> Result<Vec<CustomResourceInfo>, String> {
|
||||||
let value: Value = serde_json::from_str(json_str)
|
let value: Value = serde_json::from_str(json_str)
|
||||||
.map_err(|e| format!("Failed to parse kubectl JSON output: {}", e))?;
|
.map_err(|e| format!("Failed to parse kubectl JSON output: {}", e))?;
|
||||||
@ -6510,16 +6351,10 @@ fn parse_custom_resources_json(json_str: &str) -> Result<Vec<CustomResourceInfo>
|
|||||||
.map(parse_creation_timestamp)
|
.map(parse_creation_timestamp)
|
||||||
.unwrap_or("N/A".to_string());
|
.unwrap_or("N/A".to_string());
|
||||||
|
|
||||||
// For now, we don't extract additional columns here as we don't have the CRD spec
|
|
||||||
// The frontend will need to call with the CRD info to get proper column extraction
|
|
||||||
// This is a limitation - ideally we'd pass printer columns to this function
|
|
||||||
let additional_columns = HashMap::new();
|
|
||||||
|
|
||||||
result.push(CustomResourceInfo {
|
result.push(CustomResourceInfo {
|
||||||
name,
|
name,
|
||||||
namespace,
|
namespace,
|
||||||
age,
|
age,
|
||||||
additional_columns,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -253,198 +253,3 @@ pub async fn check_kubectl_installed(_state: State<'_, AppState>) -> Result<Kube
|
|||||||
pub fn get_classifier_rules() -> crate::shell::classifier::ClassifierRules {
|
pub fn get_classifier_rules() -> crate::shell::classifier::ClassifierRules {
|
||||||
crate::shell::classifier::CommandClassifier::get_rules()
|
crate::shell::classifier::CommandClassifier::get_rules()
|
||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
|
||||||
// PTY Session Management Commands
|
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
|
||||||
pub struct PtySessionInfo {
|
|
||||||
pub id: String,
|
|
||||||
pub cluster_id: String,
|
|
||||||
pub namespace: String,
|
|
||||||
pub pod: String,
|
|
||||||
pub container: Option<String>,
|
|
||||||
pub session_type: String,
|
|
||||||
pub created_at: String,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Start an interactive kubectl exec session with PTY support
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn start_pty_exec_session(
|
|
||||||
app: tauri::AppHandle,
|
|
||||||
state: State<'_, AppState>,
|
|
||||||
cluster_id: String,
|
|
||||||
namespace: String,
|
|
||||||
pod: String,
|
|
||||||
container: Option<String>,
|
|
||||||
) -> Result<String, String> {
|
|
||||||
// Get active kubeconfig
|
|
||||||
let kubeconfig_path = {
|
|
||||||
let db = state.db.lock().map_err(|e| e.to_string())?;
|
|
||||||
let mut stmt = db
|
|
||||||
.prepare("SELECT encrypted_content FROM kubeconfig_files WHERE is_active = 1 LIMIT 1")
|
|
||||||
.map_err(|e| format!("Failed to query active kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
let encrypted: Option<String> = stmt.query_row([], |row| row.get(0)).ok();
|
|
||||||
|
|
||||||
if let Some(enc) = encrypted {
|
|
||||||
let content = crate::integrations::auth::decrypt_token(&enc)
|
|
||||||
.map_err(|e| format!("Failed to decrypt kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
// Write to temp file
|
|
||||||
let temp_path =
|
|
||||||
std::env::temp_dir().join(format!("kubeconfig-{}.yaml", uuid::Uuid::now_v7()));
|
|
||||||
std::fs::write(&temp_path, content)
|
|
||||||
.map_err(|e| format!("Failed to write kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
Some(temp_path.to_string_lossy().to_string())
|
|
||||||
} else {
|
|
||||||
None
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Locate kubectl
|
|
||||||
let kubectl_path =
|
|
||||||
crate::shell::kubectl::locate_kubectl().map_err(|e| format!("kubectl not found: {e}"))?;
|
|
||||||
|
|
||||||
// Start session
|
|
||||||
let params = crate::shell::session::SessionParams {
|
|
||||||
cluster_id,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container,
|
|
||||||
kubectl_path: kubectl_path.to_string_lossy().to_string(),
|
|
||||||
kubeconfig_path,
|
|
||||||
};
|
|
||||||
|
|
||||||
let session_id = state
|
|
||||||
.pty_sessions
|
|
||||||
.start_exec_session(app, params)
|
|
||||||
.await
|
|
||||||
.map_err(|e| format!("Failed to start exec session: {e}"))?;
|
|
||||||
|
|
||||||
Ok(session_id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Start an interactive kubectl attach session with PTY support
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn start_pty_attach_session(
|
|
||||||
app: tauri::AppHandle,
|
|
||||||
state: State<'_, AppState>,
|
|
||||||
cluster_id: String,
|
|
||||||
namespace: String,
|
|
||||||
pod: String,
|
|
||||||
container: Option<String>,
|
|
||||||
) -> Result<String, String> {
|
|
||||||
// Get active kubeconfig
|
|
||||||
let kubeconfig_path = {
|
|
||||||
let db = state.db.lock().map_err(|e| e.to_string())?;
|
|
||||||
let mut stmt = db
|
|
||||||
.prepare("SELECT encrypted_content FROM kubeconfig_files WHERE is_active = 1 LIMIT 1")
|
|
||||||
.map_err(|e| format!("Failed to query active kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
let encrypted: Option<String> = stmt.query_row([], |row| row.get(0)).ok();
|
|
||||||
|
|
||||||
if let Some(enc) = encrypted {
|
|
||||||
let content = crate::integrations::auth::decrypt_token(&enc)
|
|
||||||
.map_err(|e| format!("Failed to decrypt kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
// Write to temp file
|
|
||||||
let temp_path =
|
|
||||||
std::env::temp_dir().join(format!("kubeconfig-{}.yaml", uuid::Uuid::now_v7()));
|
|
||||||
std::fs::write(&temp_path, content)
|
|
||||||
.map_err(|e| format!("Failed to write kubeconfig: {e}"))?;
|
|
||||||
|
|
||||||
Some(temp_path.to_string_lossy().to_string())
|
|
||||||
} else {
|
|
||||||
None
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Locate kubectl
|
|
||||||
let kubectl_path =
|
|
||||||
crate::shell::kubectl::locate_kubectl().map_err(|e| format!("kubectl not found: {e}"))?;
|
|
||||||
|
|
||||||
// Start session
|
|
||||||
let params = crate::shell::session::SessionParams {
|
|
||||||
cluster_id,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container,
|
|
||||||
kubectl_path: kubectl_path.to_string_lossy().to_string(),
|
|
||||||
kubeconfig_path,
|
|
||||||
};
|
|
||||||
|
|
||||||
let session_id = state
|
|
||||||
.pty_sessions
|
|
||||||
.start_attach_session(app, params)
|
|
||||||
.await
|
|
||||||
.map_err(|e| format!("Failed to start attach session: {e}"))?;
|
|
||||||
|
|
||||||
Ok(session_id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Send stdin data to a PTY session
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn send_pty_stdin(
|
|
||||||
state: State<'_, AppState>,
|
|
||||||
session_id: String,
|
|
||||||
data: Vec<u8>,
|
|
||||||
) -> Result<(), String> {
|
|
||||||
state
|
|
||||||
.pty_sessions
|
|
||||||
.send_stdin(&session_id, data)
|
|
||||||
.await
|
|
||||||
.map_err(|e| format!("Failed to send stdin: {e}"))
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Resize a PTY session
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn resize_pty_session(
|
|
||||||
state: State<'_, AppState>,
|
|
||||||
session_id: String,
|
|
||||||
rows: u16,
|
|
||||||
cols: u16,
|
|
||||||
) -> Result<(), String> {
|
|
||||||
state
|
|
||||||
.pty_sessions
|
|
||||||
.resize_session(&session_id, rows, cols)
|
|
||||||
.await
|
|
||||||
.map_err(|e| format!("Failed to resize session: {e}"))
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Terminate a PTY session
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn terminate_pty_session(
|
|
||||||
state: State<'_, AppState>,
|
|
||||||
session_id: String,
|
|
||||||
) -> Result<(), String> {
|
|
||||||
state
|
|
||||||
.pty_sessions
|
|
||||||
.terminate_session(&session_id)
|
|
||||||
.await
|
|
||||||
.map_err(|e| format!("Failed to terminate session: {e}"))
|
|
||||||
}
|
|
||||||
|
|
||||||
/// List all active PTY sessions
|
|
||||||
#[tauri::command]
|
|
||||||
pub async fn list_pty_sessions(state: State<'_, AppState>) -> Result<Vec<PtySessionInfo>, String> {
|
|
||||||
let sessions = state.pty_sessions.list_sessions().await;
|
|
||||||
|
|
||||||
Ok(sessions
|
|
||||||
.into_iter()
|
|
||||||
.map(|s| PtySessionInfo {
|
|
||||||
id: s.id,
|
|
||||||
cluster_id: s.cluster_id,
|
|
||||||
namespace: s.namespace,
|
|
||||||
pod: s.pod,
|
|
||||||
container: s.container,
|
|
||||||
session_type: match s.session_type {
|
|
||||||
crate::shell::SessionType::Exec => "exec".to_string(),
|
|
||||||
crate::shell::SessionType::Attach => "attach".to_string(),
|
|
||||||
},
|
|
||||||
created_at: s.created_at.to_rfc3339(),
|
|
||||||
})
|
|
||||||
.collect())
|
|
||||||
}
|
|
||||||
|
|||||||
@ -46,7 +46,6 @@ pub fn run() {
|
|||||||
refresh_registry: Arc::new(tokio::sync::Mutex::new(crate::kube::RefreshRegistry::new())),
|
refresh_registry: Arc::new(tokio::sync::Mutex::new(crate::kube::RefreshRegistry::new())),
|
||||||
watchers: Arc::new(Mutex::new(std::collections::HashMap::new())),
|
watchers: Arc::new(Mutex::new(std::collections::HashMap::new())),
|
||||||
log_streams: Arc::new(tokio::sync::Mutex::new(std::collections::HashMap::new())),
|
log_streams: Arc::new(tokio::sync::Mutex::new(std::collections::HashMap::new())),
|
||||||
pty_sessions: Arc::new(crate::shell::SessionManager::new()),
|
|
||||||
};
|
};
|
||||||
let stronghold_salt = format!(
|
let stronghold_salt = format!(
|
||||||
"tftsr-stronghold-salt-v1-{:x}",
|
"tftsr-stronghold-salt-v1-{:x}",
|
||||||
@ -180,13 +179,6 @@ pub fn run() {
|
|||||||
commands::shell::list_command_executions,
|
commands::shell::list_command_executions,
|
||||||
commands::shell::check_kubectl_installed,
|
commands::shell::check_kubectl_installed,
|
||||||
commands::shell::get_classifier_rules,
|
commands::shell::get_classifier_rules,
|
||||||
// PTY Sessions
|
|
||||||
commands::shell::start_pty_exec_session,
|
|
||||||
commands::shell::start_pty_attach_session,
|
|
||||||
commands::shell::send_pty_stdin,
|
|
||||||
commands::shell::resize_pty_session,
|
|
||||||
commands::shell::terminate_pty_session,
|
|
||||||
commands::shell::list_pty_sessions,
|
|
||||||
// Kubernetes Management
|
// Kubernetes Management
|
||||||
commands::kube::add_cluster,
|
commands::kube::add_cluster,
|
||||||
commands::kube::connect_cluster_from_kubeconfig,
|
commands::kube::connect_cluster_from_kubeconfig,
|
||||||
|
|||||||
@ -3,8 +3,6 @@ pub mod executor;
|
|||||||
pub mod helm;
|
pub mod helm;
|
||||||
pub mod kubeconfig;
|
pub mod kubeconfig;
|
||||||
pub mod kubectl;
|
pub mod kubectl;
|
||||||
pub mod pty;
|
|
||||||
pub mod session;
|
|
||||||
|
|
||||||
#[cfg(test)]
|
#[cfg(test)]
|
||||||
mod tests;
|
mod tests;
|
||||||
@ -14,5 +12,3 @@ pub use executor::{execute_with_approval, CommandOutput};
|
|||||||
pub use helm::locate_helm;
|
pub use helm::locate_helm;
|
||||||
pub use kubeconfig::{auto_detect_kubeconfig, KubeconfigInfo};
|
pub use kubeconfig::{auto_detect_kubeconfig, KubeconfigInfo};
|
||||||
pub use kubectl::{execute_kubectl, locate_kubectl};
|
pub use kubectl::{execute_kubectl, locate_kubectl};
|
||||||
pub use pty::PtySession;
|
|
||||||
pub use session::{SessionManager, SessionType};
|
|
||||||
|
|||||||
@ -1,328 +0,0 @@
|
|||||||
// PTY Management for Interactive Shell Sessions
|
|
||||||
//
|
|
||||||
// This module provides pseudo-terminal (PTY) support for kubectl exec/attach operations.
|
|
||||||
// It uses the portable-pty crate for cross-platform PTY functionality.
|
|
||||||
//
|
|
||||||
// Key features:
|
|
||||||
// - Spawns kubectl exec/attach in a PTY for full interactivity
|
|
||||||
// - Bidirectional I/O streaming (stdin/stdout/stderr)
|
|
||||||
// - Proper terminal control (SIGWINCH, raw mode, etc.)
|
|
||||||
// - Clean session lifecycle management
|
|
||||||
|
|
||||||
use anyhow::{Context, Result};
|
|
||||||
use portable_pty::{native_pty_system, CommandBuilder, PtySize};
|
|
||||||
use std::io::{Read, Write};
|
|
||||||
use tracing::debug;
|
|
||||||
|
|
||||||
/// PTY session handle with I/O streams
|
|
||||||
pub struct PtySession {
|
|
||||||
/// PTY pair (master + child)
|
|
||||||
pair: portable_pty::PtyPair,
|
|
||||||
/// Child process handle
|
|
||||||
child: Box<dyn portable_pty::Child + Send + Sync>,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl PtySession {
|
|
||||||
/// Spawn a new PTY session with the given command and arguments
|
|
||||||
pub fn spawn(command: &str, args: Vec<String>, env: Vec<(String, String)>) -> Result<Self> {
|
|
||||||
let pty_system = native_pty_system();
|
|
||||||
|
|
||||||
// Create PTY with default size (80x24)
|
|
||||||
let pair = pty_system
|
|
||||||
.openpty(PtySize {
|
|
||||||
rows: 24,
|
|
||||||
cols: 80,
|
|
||||||
pixel_width: 0,
|
|
||||||
pixel_height: 0,
|
|
||||||
})
|
|
||||||
.context("Failed to open PTY")?;
|
|
||||||
|
|
||||||
// Build command
|
|
||||||
let mut cmd = CommandBuilder::new(command);
|
|
||||||
cmd.args(args);
|
|
||||||
for (key, value) in env {
|
|
||||||
cmd.env(key, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spawn child process
|
|
||||||
let child = pair
|
|
||||||
.slave
|
|
||||||
.spawn_command(cmd)
|
|
||||||
.context("Failed to spawn command in PTY")?;
|
|
||||||
|
|
||||||
debug!(
|
|
||||||
"PTY session spawned: {} (PID: {:?})",
|
|
||||||
command,
|
|
||||||
child.process_id()
|
|
||||||
);
|
|
||||||
|
|
||||||
Ok(Self { pair, child })
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Spawn kubectl exec session
|
|
||||||
pub fn spawn_kubectl_exec(
|
|
||||||
kubectl_path: &str,
|
|
||||||
namespace: &str,
|
|
||||||
pod: &str,
|
|
||||||
container: Option<&str>,
|
|
||||||
kubeconfig_path: Option<&str>,
|
|
||||||
) -> Result<Self> {
|
|
||||||
let mut args = vec![
|
|
||||||
"exec".to_string(),
|
|
||||||
"-i".to_string(),
|
|
||||||
"-t".to_string(),
|
|
||||||
"-n".to_string(),
|
|
||||||
namespace.to_string(),
|
|
||||||
pod.to_string(),
|
|
||||||
];
|
|
||||||
|
|
||||||
if let Some(c) = container {
|
|
||||||
args.push("-c".to_string());
|
|
||||||
args.push(c.to_string());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use FreeLens-style shell fallback command
|
|
||||||
args.push("--".to_string());
|
|
||||||
args.push("sh".to_string());
|
|
||||||
args.push("-c".to_string());
|
|
||||||
args.push("clear; (bash || ash || sh)".to_string());
|
|
||||||
|
|
||||||
let mut env = Vec::new();
|
|
||||||
if let Some(kubeconfig) = kubeconfig_path {
|
|
||||||
env.push(("KUBECONFIG".to_string(), kubeconfig.to_string()));
|
|
||||||
}
|
|
||||||
|
|
||||||
Self::spawn(kubectl_path, args, env)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Spawn kubectl attach session
|
|
||||||
pub fn spawn_kubectl_attach(
|
|
||||||
kubectl_path: &str,
|
|
||||||
namespace: &str,
|
|
||||||
pod: &str,
|
|
||||||
container: Option<&str>,
|
|
||||||
kubeconfig_path: Option<&str>,
|
|
||||||
) -> Result<Self> {
|
|
||||||
let mut args = vec![
|
|
||||||
"attach".to_string(),
|
|
||||||
"-i".to_string(),
|
|
||||||
"-t".to_string(),
|
|
||||||
"-n".to_string(),
|
|
||||||
namespace.to_string(),
|
|
||||||
pod.to_string(),
|
|
||||||
];
|
|
||||||
|
|
||||||
if let Some(c) = container {
|
|
||||||
args.push("-c".to_string());
|
|
||||||
args.push(c.to_string());
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut env = Vec::new();
|
|
||||||
if let Some(kubeconfig) = kubeconfig_path {
|
|
||||||
env.push(("KUBECONFIG".to_string(), kubeconfig.to_string()));
|
|
||||||
}
|
|
||||||
|
|
||||||
Self::spawn(kubectl_path, args, env)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Write data to PTY stdin
|
|
||||||
pub fn write(&mut self, data: &[u8]) -> Result<()> {
|
|
||||||
let mut writer = self
|
|
||||||
.pair
|
|
||||||
.master
|
|
||||||
.take_writer()
|
|
||||||
.context("PTY writer unavailable")?;
|
|
||||||
writer
|
|
||||||
.write_all(data)
|
|
||||||
.context("Failed to write to PTY stdin")?;
|
|
||||||
writer.flush().context("Failed to flush PTY stdin")?;
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Read available data from PTY stdout/stderr (non-blocking)
|
|
||||||
pub fn read(&mut self) -> Result<Vec<u8>> {
|
|
||||||
let mut reader = self
|
|
||||||
.pair
|
|
||||||
.master
|
|
||||||
.try_clone_reader()
|
|
||||||
.context("PTY reader unavailable")?;
|
|
||||||
let mut buffer = vec![0u8; 4096];
|
|
||||||
|
|
||||||
// Non-blocking read with timeout
|
|
||||||
match reader.read(&mut buffer) {
|
|
||||||
Ok(n) if n > 0 => {
|
|
||||||
buffer.truncate(n);
|
|
||||||
Ok(buffer)
|
|
||||||
}
|
|
||||||
Ok(_) => Ok(Vec::new()), // No data available
|
|
||||||
Err(e) if e.kind() == std::io::ErrorKind::WouldBlock => Ok(Vec::new()),
|
|
||||||
Err(e) => Err(e).context("Failed to read from PTY"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Resize the PTY
|
|
||||||
pub fn resize(&self, rows: u16, cols: u16) -> Result<()> {
|
|
||||||
self.pair
|
|
||||||
.master
|
|
||||||
.resize(PtySize {
|
|
||||||
rows,
|
|
||||||
cols,
|
|
||||||
pixel_width: 0,
|
|
||||||
pixel_height: 0,
|
|
||||||
})
|
|
||||||
.context("Failed to resize PTY")
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Check if the child process is still alive
|
|
||||||
pub fn is_alive(&mut self) -> bool {
|
|
||||||
match self.child.try_wait() {
|
|
||||||
Ok(Some(_)) => false, // Process exited
|
|
||||||
Ok(None) => true, // Still running
|
|
||||||
Err(_) => false, // Error checking status
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Kill the child process
|
|
||||||
pub fn kill(&mut self) -> Result<()> {
|
|
||||||
self.child
|
|
||||||
.kill()
|
|
||||||
.context("Failed to kill PTY child process")
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Wait for the child process to exit
|
|
||||||
pub fn wait(&mut self) -> Result<portable_pty::ExitStatus> {
|
|
||||||
self.child
|
|
||||||
.wait()
|
|
||||||
.context("Failed to wait for PTY child process")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Drop for PtySession {
|
|
||||||
fn drop(&mut self) {
|
|
||||||
// Best-effort cleanup
|
|
||||||
if self.is_alive() {
|
|
||||||
let _ = self.kill();
|
|
||||||
}
|
|
||||||
debug!("PTY session dropped");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[cfg(test)]
|
|
||||||
mod tests {
|
|
||||||
use super::*;
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_spawn_simple_command() {
|
|
||||||
// Spawn a simple echo command
|
|
||||||
let result = PtySession::spawn("echo", vec!["hello".to_string()], vec![]);
|
|
||||||
assert!(result.is_ok(), "Failed to spawn PTY session");
|
|
||||||
|
|
||||||
let mut session = result.unwrap();
|
|
||||||
|
|
||||||
// Wait a bit for command to execute
|
|
||||||
std::thread::sleep(std::time::Duration::from_millis(100));
|
|
||||||
|
|
||||||
// Read output
|
|
||||||
let output = session.read().unwrap();
|
|
||||||
let output_str = String::from_utf8_lossy(&output);
|
|
||||||
|
|
||||||
// Should contain "hello"
|
|
||||||
assert!(
|
|
||||||
output_str.contains("hello") || output_str.is_empty(),
|
|
||||||
"Expected output to contain 'hello' or be empty (timing issue)"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_write_and_read() {
|
|
||||||
// Spawn cat command (echoes stdin to stdout)
|
|
||||||
let result = PtySession::spawn("cat", vec![], vec![]);
|
|
||||||
assert!(result.is_ok(), "Failed to spawn PTY session");
|
|
||||||
|
|
||||||
let mut session = result.unwrap();
|
|
||||||
|
|
||||||
// Write data
|
|
||||||
let test_data = b"test input\n";
|
|
||||||
assert!(session.write(test_data).is_ok(), "Failed to write to PTY");
|
|
||||||
|
|
||||||
// Wait a bit for data to echo back
|
|
||||||
std::thread::sleep(std::time::Duration::from_millis(100));
|
|
||||||
|
|
||||||
// Read output
|
|
||||||
let output = session.read().unwrap();
|
|
||||||
|
|
||||||
// Kill the session
|
|
||||||
assert!(session.kill().is_ok(), "Failed to kill PTY session");
|
|
||||||
|
|
||||||
// Output should contain our test data (cat echoes it back)
|
|
||||||
let output_str = String::from_utf8_lossy(&output);
|
|
||||||
assert!(
|
|
||||||
output_str.contains("test input") || output_str.is_empty(),
|
|
||||||
"Expected output to contain 'test input' or be empty (timing issue)"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_is_alive() {
|
|
||||||
let mut session = PtySession::spawn("sleep", vec!["0.1".to_string()], vec![]).unwrap();
|
|
||||||
|
|
||||||
// Should be alive initially
|
|
||||||
assert!(session.is_alive(), "Session should be alive");
|
|
||||||
|
|
||||||
// Wait for process to exit
|
|
||||||
std::thread::sleep(std::time::Duration::from_millis(200));
|
|
||||||
|
|
||||||
// Should be dead now
|
|
||||||
assert!(!session.is_alive(), "Session should be dead");
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_kill() {
|
|
||||||
let mut session = PtySession::spawn("sleep", vec!["10".to_string()], vec![]).unwrap();
|
|
||||||
|
|
||||||
assert!(session.is_alive(), "Session should be alive");
|
|
||||||
|
|
||||||
// Kill it
|
|
||||||
assert!(session.kill().is_ok(), "Failed to kill session");
|
|
||||||
|
|
||||||
// Wait a bit
|
|
||||||
std::thread::sleep(std::time::Duration::from_millis(50));
|
|
||||||
|
|
||||||
// Should be dead
|
|
||||||
assert!(!session.is_alive(), "Session should be dead after kill");
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_resize() {
|
|
||||||
let session = PtySession::spawn("cat", vec![], vec![]).unwrap();
|
|
||||||
|
|
||||||
// Resize should succeed
|
|
||||||
assert!(session.resize(40, 120).is_ok(), "Failed to resize PTY");
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_env_variables() {
|
|
||||||
// Spawn a command that prints an environment variable
|
|
||||||
let result = PtySession::spawn(
|
|
||||||
"sh",
|
|
||||||
vec!["-c".to_string(), "echo $TEST_VAR".to_string()],
|
|
||||||
vec![("TEST_VAR".to_string(), "test_value".to_string())],
|
|
||||||
);
|
|
||||||
assert!(result.is_ok(), "Failed to spawn PTY session with env");
|
|
||||||
|
|
||||||
let mut session = result.unwrap();
|
|
||||||
|
|
||||||
// Wait for command to execute
|
|
||||||
std::thread::sleep(std::time::Duration::from_millis(100));
|
|
||||||
|
|
||||||
// Read output
|
|
||||||
let output = session.read().unwrap();
|
|
||||||
let output_str = String::from_utf8_lossy(&output);
|
|
||||||
|
|
||||||
// Should contain our test value
|
|
||||||
assert!(
|
|
||||||
output_str.contains("test_value") || output_str.is_empty(),
|
|
||||||
"Expected output to contain 'test_value' or be empty (timing issue)"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,355 +0,0 @@
|
|||||||
// PTY Session Management
|
|
||||||
//
|
|
||||||
// This module manages the lifecycle of PTY sessions, providing:
|
|
||||||
// - Session creation and tracking
|
|
||||||
// - Bidirectional I/O streaming via Tauri events
|
|
||||||
// - Session cleanup and resource management
|
|
||||||
//
|
|
||||||
// Each session has a unique ID and runs in a background tokio task that:
|
|
||||||
// 1. Continuously reads from PTY stdout/stderr
|
|
||||||
// 2. Emits data to frontend via Tauri events
|
|
||||||
// 3. Monitors session liveness
|
|
||||||
// 4. Cleans up on exit or error
|
|
||||||
|
|
||||||
use crate::shell::pty::PtySession;
|
|
||||||
use anyhow::{Context, Result};
|
|
||||||
use std::collections::HashMap;
|
|
||||||
use std::sync::Arc;
|
|
||||||
use tauri::{AppHandle, Emitter};
|
|
||||||
use tokio::sync::{mpsc, RwLock};
|
|
||||||
use tokio::time::{interval, Duration};
|
|
||||||
use tracing::{debug, error, info, warn};
|
|
||||||
use uuid::Uuid;
|
|
||||||
|
|
||||||
/// Session metadata and control
|
|
||||||
pub struct SessionInfo {
|
|
||||||
pub id: String,
|
|
||||||
pub cluster_id: String,
|
|
||||||
pub namespace: String,
|
|
||||||
pub pod: String,
|
|
||||||
pub container: Option<String>,
|
|
||||||
pub session_type: SessionType,
|
|
||||||
pub created_at: chrono::DateTime<chrono::Utc>,
|
|
||||||
/// Channel to send stdin data to the session task
|
|
||||||
pub stdin_tx: mpsc::UnboundedSender<Vec<u8>>,
|
|
||||||
/// Channel to send control commands
|
|
||||||
pub control_tx: mpsc::UnboundedSender<ControlCommand>,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
|
|
||||||
pub enum SessionType {
|
|
||||||
Exec,
|
|
||||||
Attach,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Debug)]
|
|
||||||
pub enum ControlCommand {
|
|
||||||
Resize { rows: u16, cols: u16 },
|
|
||||||
Terminate,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Parameters for starting a session
|
|
||||||
pub struct SessionParams {
|
|
||||||
pub cluster_id: String,
|
|
||||||
pub namespace: String,
|
|
||||||
pub pod: String,
|
|
||||||
pub container: Option<String>,
|
|
||||||
pub kubectl_path: String,
|
|
||||||
pub kubeconfig_path: Option<String>,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Global session registry
|
|
||||||
pub struct SessionManager {
|
|
||||||
sessions: Arc<RwLock<HashMap<String, SessionInfo>>>,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Default for SessionManager {
|
|
||||||
fn default() -> Self {
|
|
||||||
Self::new()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl SessionManager {
|
|
||||||
pub fn new() -> Self {
|
|
||||||
Self {
|
|
||||||
sessions: Arc::new(RwLock::new(HashMap::new())),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Start a new kubectl exec session
|
|
||||||
pub async fn start_exec_session(
|
|
||||||
&self,
|
|
||||||
app_handle: AppHandle,
|
|
||||||
params: SessionParams,
|
|
||||||
) -> Result<String> {
|
|
||||||
let session_id = Uuid::now_v7().to_string();
|
|
||||||
|
|
||||||
// Spawn PTY session
|
|
||||||
let pty_session = PtySession::spawn_kubectl_exec(
|
|
||||||
¶ms.kubectl_path,
|
|
||||||
¶ms.namespace,
|
|
||||||
¶ms.pod,
|
|
||||||
params.container.as_deref(),
|
|
||||||
params.kubeconfig_path.as_deref(),
|
|
||||||
)
|
|
||||||
.context("Failed to spawn kubectl exec session")?;
|
|
||||||
|
|
||||||
self.register_session(
|
|
||||||
app_handle,
|
|
||||||
session_id.clone(),
|
|
||||||
params,
|
|
||||||
SessionType::Exec,
|
|
||||||
pty_session,
|
|
||||||
)
|
|
||||||
.await?;
|
|
||||||
|
|
||||||
Ok(session_id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Start a new kubectl attach session
|
|
||||||
pub async fn start_attach_session(
|
|
||||||
&self,
|
|
||||||
app_handle: AppHandle,
|
|
||||||
params: SessionParams,
|
|
||||||
) -> Result<String> {
|
|
||||||
let session_id = Uuid::now_v7().to_string();
|
|
||||||
|
|
||||||
// Spawn PTY session
|
|
||||||
let pty_session = PtySession::spawn_kubectl_attach(
|
|
||||||
¶ms.kubectl_path,
|
|
||||||
¶ms.namespace,
|
|
||||||
¶ms.pod,
|
|
||||||
params.container.as_deref(),
|
|
||||||
params.kubeconfig_path.as_deref(),
|
|
||||||
)
|
|
||||||
.context("Failed to spawn kubectl attach session")?;
|
|
||||||
|
|
||||||
self.register_session(
|
|
||||||
app_handle,
|
|
||||||
session_id.clone(),
|
|
||||||
params,
|
|
||||||
SessionType::Attach,
|
|
||||||
pty_session,
|
|
||||||
)
|
|
||||||
.await?;
|
|
||||||
|
|
||||||
Ok(session_id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Register and start managing a PTY session
|
|
||||||
async fn register_session(
|
|
||||||
&self,
|
|
||||||
app_handle: AppHandle,
|
|
||||||
session_id: String,
|
|
||||||
params: SessionParams,
|
|
||||||
session_type: SessionType,
|
|
||||||
pty_session: PtySession,
|
|
||||||
) -> Result<()> {
|
|
||||||
let (stdin_tx, stdin_rx) = mpsc::unbounded_channel();
|
|
||||||
let (control_tx, control_rx) = mpsc::unbounded_channel();
|
|
||||||
|
|
||||||
let info = SessionInfo {
|
|
||||||
id: session_id.clone(),
|
|
||||||
cluster_id: params.cluster_id,
|
|
||||||
namespace: params.namespace,
|
|
||||||
pod: params.pod,
|
|
||||||
container: params.container,
|
|
||||||
session_type,
|
|
||||||
created_at: chrono::Utc::now(),
|
|
||||||
stdin_tx,
|
|
||||||
control_tx,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add to registry
|
|
||||||
{
|
|
||||||
let mut sessions = self.sessions.write().await;
|
|
||||||
sessions.insert(session_id.clone(), info);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spawn session I/O task
|
|
||||||
let sessions_clone = self.sessions.clone();
|
|
||||||
let session_id_clone = session_id.clone();
|
|
||||||
tokio::spawn(async move {
|
|
||||||
if let Err(e) = Self::run_session_io(
|
|
||||||
app_handle,
|
|
||||||
session_id_clone.clone(),
|
|
||||||
pty_session,
|
|
||||||
stdin_rx,
|
|
||||||
control_rx,
|
|
||||||
)
|
|
||||||
.await
|
|
||||||
{
|
|
||||||
error!("Session {} I/O task failed: {}", session_id_clone, e);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove from registry on exit
|
|
||||||
let mut sessions = sessions_clone.write().await;
|
|
||||||
sessions.remove(&session_id_clone);
|
|
||||||
info!("Session {} removed from registry", session_id_clone);
|
|
||||||
});
|
|
||||||
|
|
||||||
info!("Session {} started: {:?}", session_id, session_type);
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Main I/O loop for a session
|
|
||||||
async fn run_session_io(
|
|
||||||
app_handle: AppHandle,
|
|
||||||
session_id: String,
|
|
||||||
mut pty_session: PtySession,
|
|
||||||
mut stdin_rx: mpsc::UnboundedReceiver<Vec<u8>>,
|
|
||||||
mut control_rx: mpsc::UnboundedReceiver<ControlCommand>,
|
|
||||||
) -> Result<()> {
|
|
||||||
let mut poll_interval = interval(Duration::from_millis(50));
|
|
||||||
|
|
||||||
loop {
|
|
||||||
tokio::select! {
|
|
||||||
// Read from PTY stdout/stderr
|
|
||||||
_ = poll_interval.tick() => {
|
|
||||||
if !pty_session.is_alive() {
|
|
||||||
debug!("Session {} PTY process exited", session_id);
|
|
||||||
let _ = app_handle.emit(&format!("terminal-closed-{}", session_id), ());
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
match pty_session.read() {
|
|
||||||
Ok(data) if !data.is_empty() => {
|
|
||||||
// Emit to frontend
|
|
||||||
if let Err(e) = app_handle.emit(&format!("terminal-output-{}", session_id), data) {
|
|
||||||
warn!("Failed to emit terminal output for session {}: {}", session_id, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Ok(_) => {
|
|
||||||
// No data available
|
|
||||||
}
|
|
||||||
Err(e) => {
|
|
||||||
error!("Failed to read from PTY for session {}: {}", session_id, e);
|
|
||||||
let _ = app_handle.emit(&format!("terminal-error-{}", session_id), e.to_string());
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle stdin from frontend
|
|
||||||
Some(data) = stdin_rx.recv() => {
|
|
||||||
if let Err(e) = pty_session.write(&data) {
|
|
||||||
error!("Failed to write to PTY for session {}: {}", session_id, e);
|
|
||||||
let _ = app_handle.emit(&format!("terminal-error-{}", session_id), e.to_string());
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle control commands
|
|
||||||
Some(cmd) = control_rx.recv() => {
|
|
||||||
match cmd {
|
|
||||||
ControlCommand::Resize { rows, cols } => {
|
|
||||||
if let Err(e) = pty_session.resize(rows, cols) {
|
|
||||||
warn!("Failed to resize PTY for session {}: {}", session_id, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ControlCommand::Terminate => {
|
|
||||||
info!("Session {} received terminate command", session_id);
|
|
||||||
let _ = pty_session.kill();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Send stdin data to a session
|
|
||||||
pub async fn send_stdin(&self, session_id: &str, data: Vec<u8>) -> Result<()> {
|
|
||||||
let sessions = self.sessions.read().await;
|
|
||||||
let session = sessions.get(session_id).context("Session not found")?;
|
|
||||||
|
|
||||||
session
|
|
||||||
.stdin_tx
|
|
||||||
.send(data)
|
|
||||||
.context("Failed to send stdin data to session task")?;
|
|
||||||
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Resize a session's PTY
|
|
||||||
pub async fn resize_session(&self, session_id: &str, rows: u16, cols: u16) -> Result<()> {
|
|
||||||
let sessions = self.sessions.read().await;
|
|
||||||
let session = sessions.get(session_id).context("Session not found")?;
|
|
||||||
|
|
||||||
session
|
|
||||||
.control_tx
|
|
||||||
.send(ControlCommand::Resize { rows, cols })
|
|
||||||
.context("Failed to send resize command to session task")?;
|
|
||||||
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Terminate a session
|
|
||||||
pub async fn terminate_session(&self, session_id: &str) -> Result<()> {
|
|
||||||
let sessions = self.sessions.read().await;
|
|
||||||
let session = sessions.get(session_id).context("Session not found")?;
|
|
||||||
|
|
||||||
session
|
|
||||||
.control_tx
|
|
||||||
.send(ControlCommand::Terminate)
|
|
||||||
.context("Failed to send terminate command to session task")?;
|
|
||||||
|
|
||||||
Ok(())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// List all active sessions
|
|
||||||
pub async fn list_sessions(&self) -> Vec<SessionInfo> {
|
|
||||||
let sessions = self.sessions.read().await;
|
|
||||||
sessions.values().cloned().collect()
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Get session info
|
|
||||||
pub async fn get_session(&self, session_id: &str) -> Option<SessionInfo> {
|
|
||||||
let sessions = self.sessions.read().await;
|
|
||||||
sessions.get(session_id).cloned()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Clone for SessionInfo {
|
|
||||||
fn clone(&self) -> Self {
|
|
||||||
Self {
|
|
||||||
id: self.id.clone(),
|
|
||||||
cluster_id: self.cluster_id.clone(),
|
|
||||||
namespace: self.namespace.clone(),
|
|
||||||
pod: self.pod.clone(),
|
|
||||||
container: self.container.clone(),
|
|
||||||
session_type: self.session_type,
|
|
||||||
created_at: self.created_at,
|
|
||||||
stdin_tx: self.stdin_tx.clone(),
|
|
||||||
control_tx: self.control_tx.clone(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[cfg(test)]
|
|
||||||
mod tests {
|
|
||||||
use super::*;
|
|
||||||
|
|
||||||
#[tokio::test]
|
|
||||||
async fn test_session_manager_creation() {
|
|
||||||
let manager = SessionManager::new();
|
|
||||||
let sessions = manager.list_sessions().await;
|
|
||||||
assert_eq!(sessions.len(), 0, "New manager should have no sessions");
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_session_type_equality() {
|
|
||||||
assert_eq!(SessionType::Exec, SessionType::Exec);
|
|
||||||
assert_eq!(SessionType::Attach, SessionType::Attach);
|
|
||||||
assert_ne!(SessionType::Exec, SessionType::Attach);
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn test_control_command_debug() {
|
|
||||||
let cmd = ControlCommand::Resize { rows: 24, cols: 80 };
|
|
||||||
let debug_str = format!("{:?}", cmd);
|
|
||||||
assert!(debug_str.contains("Resize"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -101,8 +101,6 @@ pub struct AppState {
|
|||||||
pub watchers: Arc<Mutex<HashMap<String, tokio::sync::mpsc::Receiver<serde_json::Value>>>>,
|
pub watchers: Arc<Mutex<HashMap<String, tokio::sync::mpsc::Receiver<serde_json::Value>>>>,
|
||||||
/// Active pod log streaming tasks: stream_id -> abort handle
|
/// Active pod log streaming tasks: stream_id -> abort handle
|
||||||
pub log_streams: Arc<TokioMutex<HashMap<String, tokio::task::AbortHandle>>>,
|
pub log_streams: Arc<TokioMutex<HashMap<String, tokio::task::AbortHandle>>>,
|
||||||
/// PTY session manager for interactive shells
|
|
||||||
pub pty_sessions: Arc<crate::shell::SessionManager>,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Determine the application data directory.
|
/// Determine the application data directory.
|
||||||
|
|||||||
13
src/App.tsx
13
src/App.tsx
@ -78,15 +78,6 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Apply dark mode class to html element for proper CSS cascade
|
|
||||||
useEffect(() => {
|
|
||||||
if (theme === "dark") {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("dark");
|
|
||||||
}
|
|
||||||
}, [theme]);
|
|
||||||
|
|
||||||
// Load providers and auto-test active provider on startup
|
// Load providers and auto-test active provider on startup
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const initializeProviders = async () => {
|
const initializeProviders = async () => {
|
||||||
@ -111,7 +102,7 @@ export default function App() {
|
|||||||
}, [setProviders, getActiveProvider]);
|
}, [setProviders, getActiveProvider]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={theme === "dark" ? "dark" : ""}>
|
||||||
<ShellApprovalModal />
|
<ShellApprovalModal />
|
||||||
<div className="grid h-screen" style={{ gridTemplateColumns: collapsed ? "64px 1fr" : "240px 1fr" }}>
|
<div className="grid h-screen" style={{ gridTemplateColumns: collapsed ? "64px 1fr" : "240px 1fr" }}>
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
@ -214,6 +205,6 @@ export default function App() {
|
|||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,86 +0,0 @@
|
|||||||
import { describe, it, expect } from "vitest";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import { Badge, StatusBadge } from "./Badge";
|
|
||||||
|
|
||||||
describe("Badge", () => {
|
|
||||||
it("renders with default variant", () => {
|
|
||||||
render(<Badge>Test Badge</Badge>);
|
|
||||||
expect(screen.getByText("Test Badge")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with success variant", () => {
|
|
||||||
const { container } = render(<Badge variant="success">Success</Badge>);
|
|
||||||
expect(screen.getByText("Success")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-green-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with destructive variant", () => {
|
|
||||||
const { container } = render(<Badge variant="destructive">Error</Badge>);
|
|
||||||
expect(screen.getByText("Error")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-destructive");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with icon", () => {
|
|
||||||
const icon = <span data-testid="icon">★</span>;
|
|
||||||
render(<Badge icon={icon}>With Icon</Badge>);
|
|
||||||
expect(screen.getByTestId("icon")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("With Icon")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("applies custom className", () => {
|
|
||||||
const { container } = render(<Badge className="custom-class">Custom</Badge>);
|
|
||||||
expect(container.firstChild).toHaveClass("custom-class");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("StatusBadge", () => {
|
|
||||||
it("renders running status with green badge", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Running" />);
|
|
||||||
expect(screen.getByText("Running")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-green-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders pending status with yellow badge", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Pending" />);
|
|
||||||
expect(screen.getByText("Pending")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-yellow-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders failed status with red badge", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Failed" />);
|
|
||||||
expect(screen.getByText("Failed")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-red-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders succeeded status with blue badge", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Succeeded" />);
|
|
||||||
expect(screen.getByText("Succeeded")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-blue-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders unknown status with gray badge", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Unknown" />);
|
|
||||||
expect(screen.getByText("Unknown")).toBeInTheDocument();
|
|
||||||
expect(container.firstChild).toHaveClass("bg-gray-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles case-insensitive status matching", () => {
|
|
||||||
const { container } = render(<StatusBadge status="RUNNING" />);
|
|
||||||
expect(container.firstChild).toHaveClass("bg-green-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps active to running", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Active" />);
|
|
||||||
expect(container.firstChild).toHaveClass("bg-green-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps error to failed", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Error" />);
|
|
||||||
expect(container.firstChild).toHaveClass("bg-red-500");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps completed to succeeded", () => {
|
|
||||||
const { container } = render(<StatusBadge status="Completed" />);
|
|
||||||
expect(container.firstChild).toHaveClass("bg-blue-500");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
||||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
||||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
||||||
outline: "text-foreground border border-input hover:bg-accent",
|
|
||||||
success: "bg-green-500 text-white hover:bg-green-600",
|
|
||||||
warning: "bg-yellow-500 text-white hover:bg-yellow-600",
|
|
||||||
info: "bg-blue-500 text-white hover:bg-blue-600",
|
|
||||||
running: "bg-green-500 text-white",
|
|
||||||
pending: "bg-yellow-500 text-white",
|
|
||||||
failed: "bg-red-500 text-white",
|
|
||||||
succeeded: "bg-blue-500 text-white",
|
|
||||||
unknown: "bg-gray-500 text-white",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export interface BadgeProps
|
|
||||||
extends React.HTMLAttributes<HTMLDivElement>,
|
|
||||||
VariantProps<typeof badgeVariants> {
|
|
||||||
icon?: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Badge({ className, variant, icon, children, ...props }: BadgeProps) {
|
|
||||||
return (
|
|
||||||
<div className={cn(badgeVariants({ variant }), className)} {...props}>
|
|
||||||
{icon && <span className="mr-1 -ml-0.5">{icon}</span>}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StatusBadge({
|
|
||||||
status,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: Omit<BadgeProps, "variant"> & { status: string }) {
|
|
||||||
const variant = getStatusVariant(status);
|
|
||||||
return (
|
|
||||||
<Badge variant={variant} className={className} {...props}>
|
|
||||||
{status}
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusVariant(status: string): BadgeProps["variant"] {
|
|
||||||
const normalized = status.toLowerCase();
|
|
||||||
if (normalized === "running" || normalized === "active" || normalized === "ready") {
|
|
||||||
return "running";
|
|
||||||
}
|
|
||||||
if (normalized === "pending" || normalized === "waiting") {
|
|
||||||
return "pending";
|
|
||||||
}
|
|
||||||
if (normalized === "failed" || normalized === "error") {
|
|
||||||
return "failed";
|
|
||||||
}
|
|
||||||
if (normalized === "succeeded" || normalized === "completed" || normalized === "bound") {
|
|
||||||
return "succeeded";
|
|
||||||
}
|
|
||||||
return "unknown";
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
import React, { useCallback, useEffect, useRef } from "react";
|
|
||||||
import { ChevronDown } from "lucide-react";
|
|
||||||
import {
|
|
||||||
useBottomPanelStore,
|
|
||||||
BottomPanelTabType,
|
|
||||||
MIN_PANEL_HEIGHT,
|
|
||||||
MAX_PANEL_HEIGHT,
|
|
||||||
type BottomPanelTab,
|
|
||||||
} from "@/stores/bottomPanelStore";
|
|
||||||
import { BottomPanelManager } from "./BottomPanelManager";
|
|
||||||
import { LogsTab, type LogsTabData } from "./dock/LogsTab";
|
|
||||||
import { TerminalTab, type TerminalTabData } from "./dock/TerminalTab";
|
|
||||||
import { YamlEditorTab, type YamlEditorTabData } from "./dock/YamlEditorTab";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bottom dock panel — DevTools-style. Houses tabs for pod logs, terminals, YAML
|
|
||||||
* editing, resource creation, and Helm install/upgrade flows.
|
|
||||||
*
|
|
||||||
* Renders only when the store reports the panel as open and at least one tab
|
|
||||||
* exists. Visibility, active tab, and tab list all live in the store; this
|
|
||||||
* component owns drag-resize, keyboard shortcuts, and content dispatch.
|
|
||||||
*/
|
|
||||||
export function BottomPanel() {
|
|
||||||
const isOpen = useBottomPanelStore((s) => s.isOpen);
|
|
||||||
const height = useBottomPanelStore((s) => s.height);
|
|
||||||
const tabs = useBottomPanelStore((s) => s.tabs);
|
|
||||||
const activeTabId = useBottomPanelStore((s) => s.activeTabId);
|
|
||||||
const setHeight = useBottomPanelStore((s) => s.setHeight);
|
|
||||||
const closePanel = useBottomPanelStore((s) => s.closePanel);
|
|
||||||
const closeActiveTab = useBottomPanelStore((s) => s.closeActiveTab);
|
|
||||||
const closeTab = useBottomPanelStore((s) => s.closeTab);
|
|
||||||
const nextTab = useBottomPanelStore((s) => s.nextTab);
|
|
||||||
const previousTab = useBottomPanelStore((s) => s.previousTab);
|
|
||||||
|
|
||||||
const dragStateRef = useRef<{ startY: number; startHeight: number } | null>(null);
|
|
||||||
|
|
||||||
// ── Drag-to-resize ────────────────────────────────────────────────────────
|
|
||||||
const handleDragMouseDown = useCallback(
|
|
||||||
(e: React.MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
dragStateRef.current = { startY: e.clientY, startHeight: height };
|
|
||||||
|
|
||||||
const onMove = (ev: MouseEvent) => {
|
|
||||||
if (!dragStateRef.current) return;
|
|
||||||
const delta = dragStateRef.current.startY - ev.clientY;
|
|
||||||
const next = dragStateRef.current.startHeight + delta;
|
|
||||||
setHeight(next);
|
|
||||||
};
|
|
||||||
const onUp = () => {
|
|
||||||
dragStateRef.current = null;
|
|
||||||
window.removeEventListener("mousemove", onMove);
|
|
||||||
window.removeEventListener("mouseup", onUp);
|
|
||||||
};
|
|
||||||
window.addEventListener("mousemove", onMove);
|
|
||||||
window.addEventListener("mouseup", onUp);
|
|
||||||
},
|
|
||||||
[height, setHeight]
|
|
||||||
);
|
|
||||||
|
|
||||||
// ── Keyboard shortcuts ────────────────────────────────────────────────────
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) return;
|
|
||||||
|
|
||||||
const onKey = (e: KeyboardEvent) => {
|
|
||||||
// Ctrl+W — close active tab
|
|
||||||
if (e.ctrlKey && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "w") {
|
|
||||||
e.preventDefault();
|
|
||||||
closeActiveTab();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Shift+Escape — hide the panel
|
|
||||||
if (e.shiftKey && e.key === "Escape") {
|
|
||||||
e.preventDefault();
|
|
||||||
closePanel();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Ctrl+. — next tab
|
|
||||||
if (e.ctrlKey && !e.shiftKey && e.key === ".") {
|
|
||||||
e.preventDefault();
|
|
||||||
nextTab();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Ctrl+, — previous tab
|
|
||||||
if (e.ctrlKey && !e.shiftKey && e.key === ",") {
|
|
||||||
e.preventDefault();
|
|
||||||
previousTab();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener("keydown", onKey);
|
|
||||||
return () => window.removeEventListener("keydown", onKey);
|
|
||||||
}, [isOpen, closeActiveTab, closePanel, nextTab, previousTab]);
|
|
||||||
|
|
||||||
if (!isOpen || tabs.length === 0) return null;
|
|
||||||
|
|
||||||
const activeTab = tabs.find((t) => t.id === activeTabId) ?? tabs[0]!;
|
|
||||||
const clampedHeight = Math.min(MAX_PANEL_HEIGHT, Math.max(MIN_PANEL_HEIGHT, height));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-testid="bottom-panel"
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col border-t border-border bg-background shrink-0",
|
|
||||||
"shadow-[0_-2px_8px_rgba(0,0,0,0.04)]"
|
|
||||||
)}
|
|
||||||
style={{ height: `${clampedHeight}px` }}
|
|
||||||
>
|
|
||||||
{/* Drag handle */}
|
|
||||||
<div
|
|
||||||
data-testid="bottom-panel-drag-handle"
|
|
||||||
role="separator"
|
|
||||||
aria-orientation="horizontal"
|
|
||||||
aria-label="Resize bottom panel"
|
|
||||||
onMouseDown={handleDragMouseDown}
|
|
||||||
className="h-1 w-full cursor-row-resize bg-border hover:bg-primary/50 transition-colors flex-shrink-0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Tab strip */}
|
|
||||||
<div className="flex items-stretch border-b border-border bg-card flex-shrink-0">
|
|
||||||
<BottomPanelManager className="flex-1" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label="Hide bottom panel"
|
|
||||||
onClick={closePanel}
|
|
||||||
className="px-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
|
||||||
>
|
|
||||||
<ChevronDown className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Active tab content */}
|
|
||||||
<div className="flex-1 overflow-hidden min-h-0 bg-background">
|
|
||||||
<TabContent tab={activeTab} onClose={closeTab} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Tab dispatcher ───────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface TabContentProps {
|
|
||||||
tab: BottomPanelTab;
|
|
||||||
onClose: (id: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabContent({ tab, onClose }: TabContentProps) {
|
|
||||||
switch (tab.type) {
|
|
||||||
case BottomPanelTabType.POD_LOGS:
|
|
||||||
return <LogsTab data={(tab.data ?? {}) as LogsTabData} />;
|
|
||||||
|
|
||||||
case BottomPanelTabType.TERMINAL:
|
|
||||||
return <TerminalTab data={(tab.data ?? {}) as TerminalTabData} />;
|
|
||||||
|
|
||||||
case BottomPanelTabType.EDIT_RESOURCE:
|
|
||||||
case BottomPanelTabType.CREATE_RESOURCE:
|
|
||||||
case BottomPanelTabType.INSTALL_CHART:
|
|
||||||
case BottomPanelTabType.UPGRADE_CHART:
|
|
||||||
return (
|
|
||||||
<YamlEditorTab
|
|
||||||
tabId={tab.id}
|
|
||||||
data={
|
|
||||||
{ ...(tab.data ?? {}), mode: tab.type } as YamlEditorTabData
|
|
||||||
}
|
|
||||||
onClose={onClose}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
<div className="p-4 text-xs text-muted-foreground">
|
|
||||||
Unsupported tab type.
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { X } from "lucide-react";
|
|
||||||
import { useBottomPanelStore, type BottomPanelTab } from "@/stores/bottomPanelStore";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
interface BottomPanelManagerProps {
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders the tab strip + close buttons. Active tab content is rendered
|
|
||||||
* separately by `BottomPanel`.
|
|
||||||
*/
|
|
||||||
export function BottomPanelManager({ className }: BottomPanelManagerProps) {
|
|
||||||
const tabs = useBottomPanelStore((s) => s.tabs);
|
|
||||||
const activeTabId = useBottomPanelStore((s) => s.activeTabId);
|
|
||||||
const setActiveTab = useBottomPanelStore((s) => s.setActiveTab);
|
|
||||||
const closeTab = useBottomPanelStore((s) => s.closeTab);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
role="tablist"
|
|
||||||
aria-label="Dock tabs"
|
|
||||||
className={cn(
|
|
||||||
"flex items-center gap-0.5 overflow-x-auto",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<TabButton
|
|
||||||
key={tab.id}
|
|
||||||
tab={tab}
|
|
||||||
isActive={tab.id === activeTabId}
|
|
||||||
onActivate={() => setActiveTab(tab.id)}
|
|
||||||
onClose={() => closeTab(tab.id)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TabButtonProps {
|
|
||||||
tab: BottomPanelTab;
|
|
||||||
isActive: boolean;
|
|
||||||
onActivate: () => void;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabButton({ tab, isActive, onActivate, onClose }: TabButtonProps) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
role="tab"
|
|
||||||
aria-selected={isActive}
|
|
||||||
onClick={onActivate}
|
|
||||||
className={cn(
|
|
||||||
"flex items-center gap-1.5 px-3 py-1.5 text-xs cursor-pointer select-none border-r border-border min-w-0",
|
|
||||||
"transition-colors",
|
|
||||||
isActive
|
|
||||||
? "bg-background text-foreground border-t-2 border-t-primary"
|
|
||||||
: "bg-card text-muted-foreground hover:bg-accent hover:text-foreground border-t-2 border-t-transparent"
|
|
||||||
)}
|
|
||||||
title={tab.title}
|
|
||||||
>
|
|
||||||
<span className="truncate max-w-[180px]">{tab.title}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label={`Close tab ${tab.title}`}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
className="rounded-sm p-0.5 hover:bg-destructive/20 hover:text-destructive transition-colors"
|
|
||||||
>
|
|
||||||
<X className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from "vitest";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import userEvent from "@testing-library/user-event";
|
|
||||||
import { ErrorBoundary } from "./ErrorBoundary";
|
|
||||||
|
|
||||||
const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
|
|
||||||
if (shouldThrow) {
|
|
||||||
throw new Error("Test error");
|
|
||||||
}
|
|
||||||
return <div>Content</div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
describe("ErrorBoundary", () => {
|
|
||||||
it("renders children when there is no error", () => {
|
|
||||||
render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={false} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(screen.getByText("Content")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders error UI when child throws", () => {
|
|
||||||
const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
|
|
||||||
render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={true} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText(/Test error/)).toBeInTheDocument();
|
|
||||||
consoleError.mockRestore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("resets error when reset button is clicked", async () => {
|
|
||||||
const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
|
|
||||||
const user = userEvent.setup();
|
|
||||||
const { rerender } = render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={true} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
|
|
||||||
|
|
||||||
await user.click(screen.getByRole("button", { name: /Reset Component/i }));
|
|
||||||
|
|
||||||
rerender(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={false} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(screen.getByText("Content")).toBeInTheDocument();
|
|
||||||
consoleError.mockRestore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("uses custom fallback when provided", () => {
|
|
||||||
const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
|
|
||||||
const customFallback = (error: Error, resetError: () => void) => (
|
|
||||||
<div>
|
|
||||||
<p>Custom error: {error.message}</p>
|
|
||||||
<button onClick={resetError}>Custom Reset</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
render(
|
|
||||||
<ErrorBoundary fallback={customFallback}>
|
|
||||||
<ThrowError shouldThrow={true} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(screen.getByText("Custom error: Test error")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("Custom Reset")).toBeInTheDocument();
|
|
||||||
consoleError.mockRestore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("logs error to console", () => {
|
|
||||||
const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
|
|
||||||
render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={true} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
expect(consoleError).toHaveBeenCalled();
|
|
||||||
consoleError.mockRestore();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import React, { Component, ReactNode } from "react";
|
|
||||||
import { AlertTriangle, RefreshCw } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui";
|
|
||||||
|
|
||||||
interface ErrorBoundaryProps {
|
|
||||||
children: ReactNode;
|
|
||||||
fallback?: (error: Error, resetError: () => void) => ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ErrorBoundaryState {
|
|
||||||
hasError: boolean;
|
|
||||||
error: Error | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
||||||
constructor(props: ErrorBoundaryProps) {
|
|
||||||
super(props);
|
|
||||||
this.state = { hasError: false, error: null };
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
|
||||||
return { hasError: true, error };
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
|
||||||
console.error("ErrorBoundary caught an error:", error, errorInfo);
|
|
||||||
}
|
|
||||||
|
|
||||||
resetError = (): void => {
|
|
||||||
this.setState({ hasError: false, error: null });
|
|
||||||
};
|
|
||||||
|
|
||||||
render(): ReactNode {
|
|
||||||
if (this.state.hasError && this.state.error) {
|
|
||||||
if (this.props.fallback) {
|
|
||||||
return this.props.fallback(this.state.error, this.resetError);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center h-full gap-6 p-8 text-center">
|
|
||||||
<div className="flex items-center justify-center w-16 h-16 rounded-full bg-destructive/10">
|
|
||||||
<AlertTriangle className="w-8 h-8 text-destructive" />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h2 className="text-2xl font-semibold">Something went wrong</h2>
|
|
||||||
<p className="text-muted-foreground max-w-md">
|
|
||||||
An unexpected error occurred. You can try resetting the component or refreshing the page.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4 w-full max-w-lg">
|
|
||||||
<details className="text-left">
|
|
||||||
<summary className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground">
|
|
||||||
Error details
|
|
||||||
</summary>
|
|
||||||
<div className="mt-2 p-4 rounded-md bg-muted font-mono text-xs overflow-x-auto">
|
|
||||||
<div className="font-semibold text-destructive mb-2">
|
|
||||||
{this.state.error.name}: {this.state.error.message}
|
|
||||||
</div>
|
|
||||||
{this.state.error.stack && (
|
|
||||||
<pre className="text-muted-foreground whitespace-pre-wrap break-all">
|
|
||||||
{this.state.error.stack}
|
|
||||||
</pre>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
<Button onClick={this.resetError} className="gap-2">
|
|
||||||
<RefreshCw className="w-4 h-4" />
|
|
||||||
Reset Component
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.props.children;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -124,11 +124,8 @@ export function CrdList({ clusterId, onSelectCrd }: CrdListProps) {
|
|||||||
namespace={crd.scope === "Namespaced" ? "" : ""}
|
namespace={crd.scope === "Namespaced" ? "" : ""}
|
||||||
group={crd.group}
|
group={crd.group}
|
||||||
version={crd.version}
|
version={crd.version}
|
||||||
resource={crd.plural}
|
resource={crd.name.split(".")[0] ?? crd.name}
|
||||||
kind={crd.kind}
|
kind={crd.kind}
|
||||||
printerColumns={
|
|
||||||
crd.versions.find((v) => v.name === crd.version)?.printer_columns || []
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { PauseCircle, PlayCircle, Play, Pencil, Trash2, FileText } from "lucide-react";
|
import { PauseCircle, PlayCircle, Play, Pencil, Trash2 } from "lucide-react";
|
||||||
import type { CronJobInfo } from "@/lib/tauriCommands";
|
import type { CronJobInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
import {
|
||||||
suspendCronjobCmd,
|
suspendCronjobCmd,
|
||||||
@ -12,7 +12,6 @@ import {
|
|||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
import { ResourceActionMenu } from "./ResourceActionMenu";
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface CronJobListProps {
|
interface CronJobListProps {
|
||||||
cronJobs: CronJobInfo[];
|
cronJobs: CronJobInfo[];
|
||||||
@ -24,7 +23,6 @@ interface CronJobListProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "logs"; cj: CronJobInfo }
|
|
||||||
| { type: "edit"; cj: CronJobInfo; yaml: string }
|
| { type: "edit"; cj: CronJobInfo; yaml: string }
|
||||||
| { type: "delete"; cj: CronJobInfo }
|
| { type: "delete"; cj: CronJobInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -157,11 +155,6 @@ export function CronJobList({
|
|||||||
icon: Play,
|
icon: Play,
|
||||||
onClick: () => handleTrigger(cj),
|
onClick: () => handleTrigger(cj),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", cj }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -183,18 +176,6 @@ export function CronJobList({
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={cid}
|
|
||||||
namespace={activeModal.cj.namespace}
|
|
||||||
workloadType="cronjob"
|
|
||||||
workloadName={activeModal.cj.name}
|
|
||||||
labels={activeModal.cj.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
{activeModal?.type === "edit" && (
|
||||||
<EditResourceModal
|
<EditResourceModal
|
||||||
isOpen
|
isOpen
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { RefreshCw } from "lucide-react";
|
import { RefreshCw } from "lucide-react";
|
||||||
import { listCustomResourcesCmd } from "@/lib/tauriCommands";
|
import { listCustomResourcesCmd } from "@/lib/tauriCommands";
|
||||||
import type { CustomResourceInfo, PrinterColumn } from "@/lib/tauriCommands";
|
import type { CustomResourceInfo } from "@/lib/tauriCommands";
|
||||||
|
|
||||||
interface CustomResourceListProps {
|
interface CustomResourceListProps {
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
@ -10,7 +10,6 @@ interface CustomResourceListProps {
|
|||||||
version: string;
|
version: string;
|
||||||
resource: string;
|
resource: string;
|
||||||
kind: string;
|
kind: string;
|
||||||
printerColumns?: PrinterColumn[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CustomResourceList({
|
export function CustomResourceList({
|
||||||
@ -20,7 +19,6 @@ export function CustomResourceList({
|
|||||||
version,
|
version,
|
||||||
resource,
|
resource,
|
||||||
kind,
|
kind,
|
||||||
printerColumns = [],
|
|
||||||
}: CustomResourceListProps) {
|
}: CustomResourceListProps) {
|
||||||
const [items, setItems] = useState<CustomResourceInfo[]>([]);
|
const [items, setItems] = useState<CustomResourceInfo[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@ -70,9 +68,6 @@ export function CustomResourceList({
|
|||||||
|
|
||||||
const showNamespace = items.some((item) => item.namespace !== "");
|
const showNamespace = items.some((item) => item.namespace !== "");
|
||||||
|
|
||||||
// Filter printer columns by priority (0 = always show, higher = less important)
|
|
||||||
const visibleColumns = printerColumns.filter((col) => col.priority === 0);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-md border overflow-hidden">
|
<div className="rounded-md border overflow-hidden">
|
||||||
<table className="w-full text-sm">
|
<table className="w-full text-sm">
|
||||||
@ -82,11 +77,6 @@ export function CustomResourceList({
|
|||||||
{showNamespace && (
|
{showNamespace && (
|
||||||
<th className="text-left px-4 py-2 font-medium">Namespace</th>
|
<th className="text-left px-4 py-2 font-medium">Namespace</th>
|
||||||
)}
|
)}
|
||||||
{visibleColumns.map((col) => (
|
|
||||||
<th key={col.name} className="text-left px-4 py-2 font-medium" title={col.description}>
|
|
||||||
{col.name}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
<th className="text-left px-4 py-2 font-medium">Age</th>
|
<th className="text-left px-4 py-2 font-medium">Age</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -100,11 +90,6 @@ export function CustomResourceList({
|
|||||||
{showNamespace && (
|
{showNamespace && (
|
||||||
<td className="px-4 py-2 text-muted-foreground">{item.namespace || "—"}</td>
|
<td className="px-4 py-2 text-muted-foreground">{item.namespace || "—"}</td>
|
||||||
)}
|
)}
|
||||||
{visibleColumns.map((col) => (
|
|
||||||
<td key={col.name} className="px-4 py-2 text-muted-foreground">
|
|
||||||
{item.additional_columns[col.name] || "—"}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
<td className="px-4 py-2 text-muted-foreground">{item.age}</td>
|
<td className="px-4 py-2 text-muted-foreground">{item.age}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { RotateCcw, Pencil, Trash2, FileText } from "lucide-react";
|
import { RotateCcw, Pencil, Trash2 } from "lucide-react";
|
||||||
import type { DaemonSetInfo } from "@/lib/tauriCommands";
|
import type { DaemonSetInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
import {
|
||||||
restartDaemonsetCmd,
|
restartDaemonsetCmd,
|
||||||
@ -10,7 +10,6 @@ import {
|
|||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
import { ResourceActionMenu } from "./ResourceActionMenu";
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface DaemonSetListProps {
|
interface DaemonSetListProps {
|
||||||
daemonsets: DaemonSetInfo[];
|
daemonsets: DaemonSetInfo[];
|
||||||
@ -21,7 +20,6 @@ interface DaemonSetListProps {
|
|||||||
|
|
||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "restart"; ds: DaemonSetInfo }
|
| { type: "restart"; ds: DaemonSetInfo }
|
||||||
| { type: "logs"; ds: DaemonSetInfo }
|
|
||||||
| { type: "edit"; ds: DaemonSetInfo; yaml: string }
|
| { type: "edit"; ds: DaemonSetInfo; yaml: string }
|
||||||
| { type: "delete"; ds: DaemonSetInfo }
|
| { type: "delete"; ds: DaemonSetInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -111,11 +109,6 @@ export function DaemonSetList({ daemonsets, clusterId, namespace: _namespace, on
|
|||||||
icon: RotateCcw,
|
icon: RotateCcw,
|
||||||
onClick: () => setActiveModal({ type: "restart", ds }),
|
onClick: () => setActiveModal({ type: "restart", ds }),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", ds }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -137,18 +130,6 @@ export function DaemonSetList({ daemonsets, clusterId, namespace: _namespace, on
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.ds.namespace}
|
|
||||||
workloadType="daemonset"
|
|
||||||
workloadName={activeModal.ds.name}
|
|
||||||
labels={activeModal.ds.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "restart" && (
|
{activeModal?.type === "restart" && (
|
||||||
<ConfirmDeleteDialog
|
<ConfirmDeleteDialog
|
||||||
open
|
open
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Scale, RotateCcw, Undo2, Pencil, Trash2, FileText } from "lucide-react";
|
import { Scale, RotateCcw, Undo2, Pencil, Trash2 } from "lucide-react";
|
||||||
import type { DeploymentInfo } from "@/lib/tauriCommands";
|
import type { DeploymentInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
import {
|
||||||
scaleDeploymentCmd,
|
scaleDeploymentCmd,
|
||||||
@ -13,7 +13,6 @@ import { ResourceActionMenu } from "./ResourceActionMenu";
|
|||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { ScaleModal } from "./ScaleModal";
|
import { ScaleModal } from "./ScaleModal";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface DeploymentListProps {
|
interface DeploymentListProps {
|
||||||
deployments: DeploymentInfo[];
|
deployments: DeploymentInfo[];
|
||||||
@ -26,7 +25,6 @@ type ActiveModal =
|
|||||||
| { type: "scale"; deployment: DeploymentInfo }
|
| { type: "scale"; deployment: DeploymentInfo }
|
||||||
| { type: "restart"; deployment: DeploymentInfo }
|
| { type: "restart"; deployment: DeploymentInfo }
|
||||||
| { type: "rollback"; deployment: DeploymentInfo }
|
| { type: "rollback"; deployment: DeploymentInfo }
|
||||||
| { type: "logs"; deployment: DeploymentInfo }
|
|
||||||
| { type: "edit"; deployment: DeploymentInfo; yaml: string }
|
| { type: "edit"; deployment: DeploymentInfo; yaml: string }
|
||||||
| { type: "delete"; deployment: DeploymentInfo }
|
| { type: "delete"; deployment: DeploymentInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -138,11 +136,6 @@ export function DeploymentList({ deployments, clusterId, namespace: _namespace,
|
|||||||
icon: Undo2,
|
icon: Undo2,
|
||||||
onClick: () => setActiveModal({ type: "rollback", deployment }),
|
onClick: () => setActiveModal({ type: "rollback", deployment }),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", deployment }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -164,18 +157,6 @@ export function DeploymentList({ deployments, clusterId, namespace: _namespace,
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.deployment.namespace}
|
|
||||||
workloadType="deployment"
|
|
||||||
workloadName={activeModal.deployment.name}
|
|
||||||
labels={activeModal.deployment.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "scale" && (
|
{activeModal?.type === "scale" && (
|
||||||
<ScaleModal
|
<ScaleModal
|
||||||
open
|
open
|
||||||
|
|||||||
@ -46,16 +46,11 @@ export function EditResourceModal({
|
|||||||
const [yamlContent, setYamlContent] = React.useState(initialYaml);
|
const [yamlContent, setYamlContent] = React.useState(initialYaml);
|
||||||
const [isLoading, setIsLoading] = React.useState(false);
|
const [isLoading, setIsLoading] = React.useState(false);
|
||||||
const [error, setError] = React.useState<string | null>(null);
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
const [yamlReady, setYamlReady] = React.useState(false);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
setName(resourceName);
|
setName(resourceName);
|
||||||
setCurrentNamespace(namespace);
|
setCurrentNamespace(namespace);
|
||||||
setYamlContent(initialYaml);
|
setYamlContent(initialYaml);
|
||||||
// Mark YAML as ready once we have content
|
|
||||||
if (initialYaml) {
|
|
||||||
setYamlReady(true);
|
|
||||||
}
|
|
||||||
}, [resourceName, namespace, initialYaml]);
|
}, [resourceName, namespace, initialYaml]);
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
@ -134,18 +129,12 @@ export function EditResourceModal({
|
|||||||
<TabsContent value="yaml">
|
<TabsContent value="yaml">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Resource YAML</Label>
|
<Label>Resource YAML</Label>
|
||||||
{yamlReady ? (
|
<YamlEditor
|
||||||
<YamlEditor
|
height="300px"
|
||||||
height="300px"
|
showControls={false}
|
||||||
showControls={false}
|
content={yamlContent}
|
||||||
content={yamlContent}
|
onChange={setYamlContent}
|
||||||
onChange={setYamlContent}
|
/>
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-[300px] bg-muted rounded-md">
|
|
||||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,217 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
import { X } from "lucide-react";
|
|
||||||
import { Terminal as XTerminal, type ITerminalOptions } from "xterm";
|
|
||||||
import { FitAddon } from "xterm-addon-fit";
|
|
||||||
import { WebLinksAddon } from "xterm-addon-web-links";
|
|
||||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
|
||||||
import {
|
|
||||||
startPtyAttachSessionCmd,
|
|
||||||
sendPtyStdinCmd,
|
|
||||||
resizePtySessionCmd,
|
|
||||||
terminatePtySessionCmd,
|
|
||||||
} from "@/lib/tauriCommands";
|
|
||||||
|
|
||||||
interface InteractiveAttachModalProps {
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
pod: string;
|
|
||||||
container?: string;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XTERM_OPTIONS: ITerminalOptions = {
|
|
||||||
cursorBlink: true,
|
|
||||||
theme: {
|
|
||||||
background: "#0f172a",
|
|
||||||
foreground: "#4ade80",
|
|
||||||
cursor: "#4ade80",
|
|
||||||
},
|
|
||||||
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
|
||||||
fontSize: 13,
|
|
||||||
convertEol: true,
|
|
||||||
rows: 24,
|
|
||||||
cols: 80,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function InteractiveAttachModal({
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container,
|
|
||||||
onClose,
|
|
||||||
}: InteractiveAttachModalProps) {
|
|
||||||
const terminalRef = useRef<HTMLDivElement>(null);
|
|
||||||
const xtermRef = useRef<XTerminal | null>(null);
|
|
||||||
const fitAddonRef = useRef<FitAddon | null>(null);
|
|
||||||
const sessionIdRef = useRef<string | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const unlistenOutputRef = useRef<UnlistenFn | null>(null);
|
|
||||||
const unlistenClosedRef = useRef<UnlistenFn | null>(null);
|
|
||||||
const unlistenErrorRef = useRef<UnlistenFn | null>(null);
|
|
||||||
|
|
||||||
// Initialize terminal and start session
|
|
||||||
useEffect(() => {
|
|
||||||
if (!terminalRef.current) return;
|
|
||||||
|
|
||||||
const term = new XTerminal(XTERM_OPTIONS);
|
|
||||||
const fitAddon = new FitAddon();
|
|
||||||
const webLinksAddon = new WebLinksAddon();
|
|
||||||
|
|
||||||
term.loadAddon(fitAddon);
|
|
||||||
term.loadAddon(webLinksAddon);
|
|
||||||
term.open(terminalRef.current);
|
|
||||||
|
|
||||||
try {
|
|
||||||
fitAddon.fit();
|
|
||||||
} catch {
|
|
||||||
// Ignore first-frame race
|
|
||||||
}
|
|
||||||
|
|
||||||
xtermRef.current = term;
|
|
||||||
fitAddonRef.current = fitAddon;
|
|
||||||
|
|
||||||
// Start PTY session
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
term.write("\r\n\x1b[1;32mAttaching to pod...\x1b[0m\r\n");
|
|
||||||
|
|
||||||
const sid = await startPtyAttachSessionCmd(
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container
|
|
||||||
);
|
|
||||||
sessionIdRef.current = sid;
|
|
||||||
|
|
||||||
// Listen for output from backend
|
|
||||||
const unlistenOutput = await listen<number[]>(
|
|
||||||
`terminal-output-${sid}`,
|
|
||||||
(event) => {
|
|
||||||
const data = new Uint8Array(event.payload);
|
|
||||||
term.write(data);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
unlistenOutputRef.current = unlistenOutput;
|
|
||||||
|
|
||||||
// Listen for session closed
|
|
||||||
const unlistenClosed = await listen(`terminal-closed-${sid}`, () => {
|
|
||||||
term.write("\r\n\x1b[1;31m[Session closed]\x1b[0m\r\n");
|
|
||||||
});
|
|
||||||
unlistenClosedRef.current = unlistenClosed;
|
|
||||||
|
|
||||||
// Listen for errors
|
|
||||||
const unlistenError = await listen<string>(
|
|
||||||
`terminal-error-${sid}`,
|
|
||||||
(event) => {
|
|
||||||
term.write(`\r\n\x1b[1;31m[Error: ${event.payload}]\x1b[0m\r\n`);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
unlistenErrorRef.current = unlistenError;
|
|
||||||
|
|
||||||
// Handle user input
|
|
||||||
term.onData((data) => {
|
|
||||||
if (sid) {
|
|
||||||
const bytes = Array.from(new TextEncoder().encode(data));
|
|
||||||
sendPtyStdinCmd(sid, bytes).catch((err) => {
|
|
||||||
term.write(`\r\n\x1b[31mError sending input: ${err}\x1b[0m\r\n`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle terminal resize
|
|
||||||
term.onResize((size) => {
|
|
||||||
if (sid) {
|
|
||||||
resizePtySessionCmd(sid, size.rows, size.cols).catch((err) => {
|
|
||||||
console.error("Failed to resize PTY:", err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
setError(msg);
|
|
||||||
term.write(`\r\n\x1b[1;31mFailed to start session: ${msg}\x1b[0m\r\n`);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
// Cleanup on unmount
|
|
||||||
return () => {
|
|
||||||
if (unlistenOutputRef.current) {
|
|
||||||
unlistenOutputRef.current();
|
|
||||||
}
|
|
||||||
if (unlistenClosedRef.current) {
|
|
||||||
unlistenClosedRef.current();
|
|
||||||
}
|
|
||||||
if (unlistenErrorRef.current) {
|
|
||||||
unlistenErrorRef.current();
|
|
||||||
}
|
|
||||||
if (sessionIdRef.current) {
|
|
||||||
terminatePtySessionCmd(sessionIdRef.current).catch(console.error);
|
|
||||||
}
|
|
||||||
term.dispose();
|
|
||||||
fitAddon.dispose();
|
|
||||||
};
|
|
||||||
}, [clusterId, namespace, pod, container]);
|
|
||||||
|
|
||||||
// Handle window resize
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
if (fitAddonRef.current) {
|
|
||||||
try {
|
|
||||||
fitAddonRef.current.fit();
|
|
||||||
} catch {
|
|
||||||
// Ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
if (sessionIdRef.current) {
|
|
||||||
terminatePtySessionCmd(sessionIdRef.current).catch(console.error);
|
|
||||||
}
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
|
|
||||||
<div className="w-[90vw] h-[85vh] bg-slate-900 rounded-lg shadow-2xl flex flex-col">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between px-4 py-3 bg-slate-800 border-b border-slate-700 rounded-t-lg">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-green-400 font-mono text-sm">
|
|
||||||
kubectl attach -it {pod}
|
|
||||||
{container && ` -c ${container}`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleClose}
|
|
||||||
className="text-slate-400 hover:text-red-400 transition-colors"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Error display */}
|
|
||||||
{error && (
|
|
||||||
<div className="px-4 py-2 bg-red-900/30 text-red-400 text-sm border-b border-red-900/50">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Terminal */}
|
|
||||||
<div ref={terminalRef} className="flex-1 overflow-hidden bg-slate-950" />
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="px-4 py-2 bg-slate-800 border-t border-slate-700 rounded-b-lg">
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
Attached to running process - Press Ctrl+C to detach
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,217 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
import { X } from "lucide-react";
|
|
||||||
import { Terminal as XTerminal, type ITerminalOptions } from "xterm";
|
|
||||||
import { FitAddon } from "xterm-addon-fit";
|
|
||||||
import { WebLinksAddon } from "xterm-addon-web-links";
|
|
||||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
|
||||||
import {
|
|
||||||
startPtyExecSessionCmd,
|
|
||||||
sendPtyStdinCmd,
|
|
||||||
resizePtySessionCmd,
|
|
||||||
terminatePtySessionCmd,
|
|
||||||
} from "@/lib/tauriCommands";
|
|
||||||
|
|
||||||
interface InteractiveShellModalProps {
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
pod: string;
|
|
||||||
container?: string;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XTERM_OPTIONS: ITerminalOptions = {
|
|
||||||
cursorBlink: true,
|
|
||||||
theme: {
|
|
||||||
background: "#0f172a",
|
|
||||||
foreground: "#4ade80",
|
|
||||||
cursor: "#4ade80",
|
|
||||||
},
|
|
||||||
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
|
||||||
fontSize: 13,
|
|
||||||
convertEol: true,
|
|
||||||
rows: 24,
|
|
||||||
cols: 80,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function InteractiveShellModal({
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container,
|
|
||||||
onClose,
|
|
||||||
}: InteractiveShellModalProps) {
|
|
||||||
const terminalRef = useRef<HTMLDivElement>(null);
|
|
||||||
const xtermRef = useRef<XTerminal | null>(null);
|
|
||||||
const fitAddonRef = useRef<FitAddon | null>(null);
|
|
||||||
const sessionIdRef = useRef<string | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const unlistenOutputRef = useRef<UnlistenFn | null>(null);
|
|
||||||
const unlistenClosedRef = useRef<UnlistenFn | null>(null);
|
|
||||||
const unlistenErrorRef = useRef<UnlistenFn | null>(null);
|
|
||||||
|
|
||||||
// Initialize terminal and start session
|
|
||||||
useEffect(() => {
|
|
||||||
if (!terminalRef.current) return;
|
|
||||||
|
|
||||||
const term = new XTerminal(XTERM_OPTIONS);
|
|
||||||
const fitAddon = new FitAddon();
|
|
||||||
const webLinksAddon = new WebLinksAddon();
|
|
||||||
|
|
||||||
term.loadAddon(fitAddon);
|
|
||||||
term.loadAddon(webLinksAddon);
|
|
||||||
term.open(terminalRef.current);
|
|
||||||
|
|
||||||
try {
|
|
||||||
fitAddon.fit();
|
|
||||||
} catch {
|
|
||||||
// Ignore first-frame race
|
|
||||||
}
|
|
||||||
|
|
||||||
xtermRef.current = term;
|
|
||||||
fitAddonRef.current = fitAddon;
|
|
||||||
|
|
||||||
// Start PTY session
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
term.write("\r\n\x1b[1;32mConnecting to pod...\x1b[0m\r\n");
|
|
||||||
|
|
||||||
const sid = await startPtyExecSessionCmd(
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
pod,
|
|
||||||
container
|
|
||||||
);
|
|
||||||
sessionIdRef.current = sid;
|
|
||||||
|
|
||||||
// Listen for output from backend
|
|
||||||
const unlistenOutput = await listen<number[]>(
|
|
||||||
`terminal-output-${sid}`,
|
|
||||||
(event) => {
|
|
||||||
const data = new Uint8Array(event.payload);
|
|
||||||
term.write(data);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
unlistenOutputRef.current = unlistenOutput;
|
|
||||||
|
|
||||||
// Listen for session closed
|
|
||||||
const unlistenClosed = await listen(`terminal-closed-${sid}`, () => {
|
|
||||||
term.write("\r\n\x1b[1;31m[Session closed]\x1b[0m\r\n");
|
|
||||||
});
|
|
||||||
unlistenClosedRef.current = unlistenClosed;
|
|
||||||
|
|
||||||
// Listen for errors
|
|
||||||
const unlistenError = await listen<string>(
|
|
||||||
`terminal-error-${sid}`,
|
|
||||||
(event) => {
|
|
||||||
term.write(`\r\n\x1b[1;31m[Error: ${event.payload}]\x1b[0m\r\n`);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
unlistenErrorRef.current = unlistenError;
|
|
||||||
|
|
||||||
// Handle user input
|
|
||||||
term.onData((data) => {
|
|
||||||
if (sid) {
|
|
||||||
const bytes = Array.from(new TextEncoder().encode(data));
|
|
||||||
sendPtyStdinCmd(sid, bytes).catch((err) => {
|
|
||||||
term.write(`\r\n\x1b[31mError sending input: ${err}\x1b[0m\r\n`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle terminal resize
|
|
||||||
term.onResize((size) => {
|
|
||||||
if (sid) {
|
|
||||||
resizePtySessionCmd(sid, size.rows, size.cols).catch((err) => {
|
|
||||||
console.error("Failed to resize PTY:", err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
setError(msg);
|
|
||||||
term.write(`\r\n\x1b[1;31mFailed to start session: ${msg}\x1b[0m\r\n`);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
// Cleanup on unmount
|
|
||||||
return () => {
|
|
||||||
if (unlistenOutputRef.current) {
|
|
||||||
unlistenOutputRef.current();
|
|
||||||
}
|
|
||||||
if (unlistenClosedRef.current) {
|
|
||||||
unlistenClosedRef.current();
|
|
||||||
}
|
|
||||||
if (unlistenErrorRef.current) {
|
|
||||||
unlistenErrorRef.current();
|
|
||||||
}
|
|
||||||
if (sessionIdRef.current) {
|
|
||||||
terminatePtySessionCmd(sessionIdRef.current).catch(console.error);
|
|
||||||
}
|
|
||||||
term.dispose();
|
|
||||||
fitAddon.dispose();
|
|
||||||
};
|
|
||||||
}, [clusterId, namespace, pod, container]);
|
|
||||||
|
|
||||||
// Handle window resize
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
if (fitAddonRef.current) {
|
|
||||||
try {
|
|
||||||
fitAddonRef.current.fit();
|
|
||||||
} catch {
|
|
||||||
// Ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
if (sessionIdRef.current) {
|
|
||||||
terminatePtySessionCmd(sessionIdRef.current).catch(console.error);
|
|
||||||
}
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
|
|
||||||
<div className="w-[90vw] h-[85vh] bg-slate-900 rounded-lg shadow-2xl flex flex-col">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between px-4 py-3 bg-slate-800 border-b border-slate-700 rounded-t-lg">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-green-400 font-mono text-sm">
|
|
||||||
kubectl exec -it {pod}
|
|
||||||
{container && ` -c ${container}`} -- sh
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleClose}
|
|
||||||
className="text-slate-400 hover:text-red-400 transition-colors"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Error display */}
|
|
||||||
{error && (
|
|
||||||
<div className="px-4 py-2 bg-red-900/30 text-red-400 text-sm border-b border-red-900/50">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Terminal */}
|
|
||||||
<div ref={terminalRef} className="flex-1 overflow-hidden bg-slate-950" />
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="px-4 py-2 bg-slate-800 border-t border-slate-700 rounded-b-lg">
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
Interactive shell session - Press Ctrl+D or type "exit" to close
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,12 +1,11 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2, FileText } from "lucide-react";
|
import { Pencil, Trash2 } from "lucide-react";
|
||||||
import type { JobInfo } from "@/lib/tauriCommands";
|
import type { JobInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
import { ResourceActionMenu } from "./ResourceActionMenu";
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface JobListProps {
|
interface JobListProps {
|
||||||
jobs: JobInfo[];
|
jobs: JobInfo[];
|
||||||
@ -18,7 +17,6 @@ interface JobListProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "logs"; job: JobInfo }
|
|
||||||
| { type: "edit"; job: JobInfo; yaml: string }
|
| { type: "edit"; job: JobInfo; yaml: string }
|
||||||
| { type: "delete"; job: JobInfo }
|
| { type: "delete"; job: JobInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -97,11 +95,6 @@ export function JobList({
|
|||||||
<TableCell className="text-right">
|
<TableCell className="text-right">
|
||||||
<ResourceActionMenu
|
<ResourceActionMenu
|
||||||
actions={[
|
actions={[
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", job }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -123,18 +116,6 @@ export function JobList({
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={cid}
|
|
||||||
namespace={activeModal.job.namespace}
|
|
||||||
workloadType="job"
|
|
||||||
workloadName={activeModal.job.name}
|
|
||||||
labels={activeModal.job.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
{activeModal?.type === "edit" && (
|
||||||
<EditResourceModal
|
<EditResourceModal
|
||||||
isOpen
|
isOpen
|
||||||
|
|||||||
@ -1,127 +1,44 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { LeaseInfo } from "@/lib/tauriCommands";
|
import type { LeaseInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface LeaseListProps {
|
interface LeaseListProps {
|
||||||
items: LeaseInfo[];
|
items: LeaseInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function LeaseList({ items }: LeaseListProps) {
|
||||||
| { type: "edit"; lease: LeaseInfo; yaml: string }
|
|
||||||
| { type: "delete"; lease: LeaseInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function LeaseList({ items, clusterId, onRefresh }: LeaseListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (lease: LeaseInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "leases", lease.namespace, lease.name);
|
|
||||||
setActiveModal({ type: "edit", lease, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "leases", activeModal.lease.namespace, activeModal.lease.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Namespace</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Holder</TableHead>
|
||||||
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={4} className="text-center text-muted-foreground">
|
||||||
<TableHead>Namespace</TableHead>
|
No leases found
|
||||||
<TableHead>Holder</TableHead>
|
</TableCell>
|
||||||
<TableHead>Age</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((lease) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={`${lease.name}-${lease.namespace}`}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{lease.name}</TableCell>
|
||||||
<TableCell colSpan={5} className="text-center text-muted-foreground">
|
<TableCell className="text-sm text-muted-foreground">{lease.namespace}</TableCell>
|
||||||
No leases found
|
<TableCell className="text-sm font-mono">{lease.holder || "—"}</TableCell>
|
||||||
</TableCell>
|
<TableCell className="text-sm text-muted-foreground">{lease.age}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((lease) => (
|
)}
|
||||||
<TableRow key={`${lease.name}-${lease.namespace}`}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{lease.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm text-muted-foreground">{lease.namespace}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm font-mono">{lease.holder || "—"}</TableCell>
|
|
||||||
<TableCell className="text-sm text-muted-foreground">{lease.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(lease),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", lease }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.lease.namespace}
|
|
||||||
resourceType="leases"
|
|
||||||
resourceName={activeModal.lease.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="Lease"
|
|
||||||
resourceName={activeModal.lease.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
||||||
import { Download, Search, Square, Trash2, Play, ChevronUp, ChevronDown, DownloadCloud } from "lucide-react";
|
import { Download, Search, Square, Trash2, Play } from "lucide-react";
|
||||||
import Ansi from "ansi-to-react";
|
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@ -41,15 +40,12 @@ export function LogStreamPanel({
|
|||||||
const [streaming, setStreaming] = useState(false);
|
const [streaming, setStreaming] = useState(false);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
|
|
||||||
|
|
||||||
const streamIdRef = useRef<string | null>(null);
|
const streamIdRef = useRef<string | null>(null);
|
||||||
const unlistenRef = useRef<UnlistenFn | null>(null);
|
const unlistenRef = useRef<UnlistenFn | null>(null);
|
||||||
const bottomRef = useRef<HTMLDivElement | null>(null);
|
const bottomRef = useRef<HTMLDivElement | null>(null);
|
||||||
const matchRefs = useRef<(HTMLDivElement | null)[]>([]);
|
|
||||||
|
|
||||||
const stopStream = useCallback(async () => {
|
const stopStream = useCallback(async () => {
|
||||||
// Critical: Always unlisten FIRST to prevent memory leaks
|
|
||||||
if (unlistenRef.current) {
|
if (unlistenRef.current) {
|
||||||
unlistenRef.current();
|
unlistenRef.current();
|
||||||
unlistenRef.current = null;
|
unlistenRef.current = null;
|
||||||
@ -65,31 +61,18 @@ export function LogStreamPanel({
|
|||||||
setStreaming(false);
|
setStreaming(false);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Cleanup on unmount - use synchronous cleanup for immediate effect
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
// Synchronous cleanup to ensure unlisten is called immediately
|
|
||||||
if (unlistenRef.current) {
|
|
||||||
unlistenRef.current();
|
|
||||||
unlistenRef.current = null;
|
|
||||||
}
|
|
||||||
// Fire-and-forget cleanup for backend stream
|
|
||||||
if (streamIdRef.current) {
|
|
||||||
stopLogStreamCmd(streamIdRef.current).catch(() => {
|
|
||||||
// best-effort
|
|
||||||
});
|
|
||||||
streamIdRef.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Stop stream when dialog closes
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
void stopStream();
|
void stopStream();
|
||||||
}
|
}
|
||||||
}, [open, stopStream]);
|
}, [open, stopStream]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
void stopStream();
|
||||||
|
};
|
||||||
|
}, [stopStream]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (follow && streaming && bottomRef.current) {
|
if (follow && streaming && bottomRef.current) {
|
||||||
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
||||||
@ -132,58 +115,17 @@ export function LogStreamPanel({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDownloadVisible = () => {
|
const handleDownload = () => {
|
||||||
const content = displayLines.join("\n");
|
const content = lines.join("\n");
|
||||||
const blob = new Blob([content], { type: "text/plain" });
|
const blob = new Blob([content], { type: "text/plain" });
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const a = document.createElement("a");
|
const a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${podName}-${selectedContainer}-visible-logs.txt`;
|
a.download = `${podName}-${selectedContainer}-logs.txt`;
|
||||||
a.click();
|
a.click();
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDownloadAll = async () => {
|
|
||||||
try {
|
|
||||||
// Fetch all logs from the beginning
|
|
||||||
const streamId = await streamPodLogsCmd({
|
|
||||||
cluster_id: clusterId,
|
|
||||||
namespace,
|
|
||||||
pod_name: podName,
|
|
||||||
container_name: selectedContainer,
|
|
||||||
follow: false,
|
|
||||||
timestamps,
|
|
||||||
tail_lines: 0, // Get all logs
|
|
||||||
});
|
|
||||||
|
|
||||||
const allLines: string[] = [];
|
|
||||||
const unlisten = await listen<{ stream_id: string; line: string }>(
|
|
||||||
"pod-log-line",
|
|
||||||
(event) => {
|
|
||||||
if (event.payload.stream_id !== streamId) return;
|
|
||||||
allLines.push(event.payload.line);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Wait for logs to complete (timeout after 10 seconds)
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 10000));
|
|
||||||
unlisten();
|
|
||||||
|
|
||||||
const content = allLines.join("\n");
|
|
||||||
const blob = new Blob([content], { type: "text/plain" });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
a.download = `${podName}-${selectedContainer}-all-logs.txt`;
|
|
||||||
a.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
|
|
||||||
await stopLogStreamCmd(streamId);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClear = () => {
|
const handleClear = () => {
|
||||||
setLines([]);
|
setLines([]);
|
||||||
};
|
};
|
||||||
@ -193,37 +135,6 @@ export function LogStreamPanel({
|
|||||||
|
|
||||||
const displayLines = search.trim() !== "" ? filteredLines : lines;
|
const displayLines = search.trim() !== "" ? filteredLines : lines;
|
||||||
|
|
||||||
const matchingLineIndices = search.trim() !== ""
|
|
||||||
? lines.map((line, i) => (line.includes(search) ? i : -1)).filter((i) => i !== -1)
|
|
||||||
: [];
|
|
||||||
|
|
||||||
const goToNextMatch = () => {
|
|
||||||
if (matchingLineIndices.length === 0) return;
|
|
||||||
const nextIndex = (currentMatchIndex + 1) % matchingLineIndices.length;
|
|
||||||
setCurrentMatchIndex(nextIndex);
|
|
||||||
const lineIndex = matchingLineIndices[nextIndex];
|
|
||||||
if (lineIndex !== undefined && matchRefs.current[lineIndex]) {
|
|
||||||
matchRefs.current[lineIndex]?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToPreviousMatch = () => {
|
|
||||||
if (matchingLineIndices.length === 0) return;
|
|
||||||
const prevIndex = currentMatchIndex === 0
|
|
||||||
? matchingLineIndices.length - 1
|
|
||||||
: currentMatchIndex - 1;
|
|
||||||
setCurrentMatchIndex(prevIndex);
|
|
||||||
const lineIndex = matchingLineIndices[prevIndex];
|
|
||||||
if (lineIndex !== undefined && matchRefs.current[lineIndex]) {
|
|
||||||
matchRefs.current[lineIndex]?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Reset match index when search changes
|
|
||||||
useEffect(() => {
|
|
||||||
setCurrentMatchIndex(0);
|
|
||||||
}, [search]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="max-w-5xl w-full max-h-[80vh]">
|
<DialogContent className="max-w-5xl w-full max-h-[80vh]">
|
||||||
@ -298,13 +209,9 @@ export function LogStreamPanel({
|
|||||||
Stop
|
Stop
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
<Button size="sm" variant="outline" onClick={handleDownloadVisible} disabled={lines.length === 0}>
|
<Button size="sm" variant="outline" onClick={handleDownload} disabled={lines.length === 0}>
|
||||||
<Download className="h-3.5 w-3.5 mr-1" />
|
<Download className="h-3.5 w-3.5 mr-1" />
|
||||||
Download Visible
|
Download
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="outline" onClick={() => void handleDownloadAll()} disabled={lines.length === 0}>
|
|
||||||
<DownloadCloud className="h-3.5 w-3.5 mr-1" />
|
|
||||||
Download All
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" variant="ghost" onClick={handleClear} disabled={lines.length === 0}>
|
<Button size="sm" variant="ghost" onClick={handleClear} disabled={lines.length === 0}>
|
||||||
<Trash2 className="h-3.5 w-3.5 mr-1" />
|
<Trash2 className="h-3.5 w-3.5 mr-1" />
|
||||||
@ -314,41 +221,14 @@ export function LogStreamPanel({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Search bar */}
|
{/* Search bar */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="relative">
|
||||||
<div className="relative flex-1">
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
<Input
|
||||||
<Input
|
placeholder="Filter log lines…"
|
||||||
placeholder="Filter log lines…"
|
value={search}
|
||||||
value={search}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
className="pl-9"
|
||||||
className="pl-9"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{search.trim() !== "" && matchingLineIndices.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
|
||||||
{currentMatchIndex + 1} / {matchingLineIndices.length}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={goToPreviousMatch}
|
|
||||||
aria-label="Previous match"
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
>
|
|
||||||
<ChevronUp className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={goToNextMatch}
|
|
||||||
aria-label="Next match"
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
>
|
|
||||||
<ChevronDown className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
@ -368,27 +248,20 @@ export function LogStreamPanel({
|
|||||||
{(search.trim() !== "" ? lines : displayLines).map((line, i) => {
|
{(search.trim() !== "" ? lines : displayLines).map((line, i) => {
|
||||||
const matches = search.trim() !== "" && line.includes(search);
|
const matches = search.trim() !== "" && line.includes(search);
|
||||||
const visible = search.trim() === "" || matches;
|
const visible = search.trim() === "" || matches;
|
||||||
const isCurrentMatch = matches && matchingLineIndices[currentMatchIndex] === i;
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
ref={(el) => {
|
|
||||||
if (matches) {
|
|
||||||
matchRefs.current[i] = el;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className={[
|
className={[
|
||||||
"whitespace-pre-wrap break-all leading-5",
|
"whitespace-pre-wrap break-all leading-5",
|
||||||
!visible ? "opacity-40" : "",
|
!visible ? "opacity-40" : "",
|
||||||
isCurrentMatch ? "bg-amber-500/20 border-l-2 border-amber-500 pl-2" : "",
|
|
||||||
]
|
]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
>
|
>
|
||||||
{matches && search.trim() !== "" ? (
|
{matches && search.trim() !== "" ? (
|
||||||
highlightMatchWithAnsi(line, search)
|
highlightMatch(line, search)
|
||||||
) : (
|
) : (
|
||||||
<Ansi>{line}</Ansi>
|
line
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -408,17 +281,14 @@ export function LogStreamPanel({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function highlightMatchWithAnsi(line: string, search: string): React.ReactNode {
|
function highlightMatch(line: string, search: string): React.ReactNode {
|
||||||
const idx = line.indexOf(search);
|
const idx = line.indexOf(search);
|
||||||
if (idx === -1) return <Ansi>{line}</Ansi>;
|
if (idx === -1) return line;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Ansi>{line.slice(0, idx)}</Ansi>
|
{line.slice(0, idx)}
|
||||||
<mark className="bg-amber-400/30 text-amber-200 rounded-sm px-0.5">
|
<mark className="bg-amber-400/30 text-amber-200 rounded-sm px-0.5">{line.slice(idx, idx + search.length)}</mark>
|
||||||
<Ansi>{line.slice(idx, idx + search.length)}</Ansi>
|
{line.slice(idx + search.length)}
|
||||||
</mark>
|
|
||||||
<Ansi>{line.slice(idx + search.length)}</Ansi>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,125 +1,42 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { WebhookConfigInfo } from "@/lib/tauriCommands";
|
import type { WebhookConfigInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface MutatingWebhookListProps {
|
interface MutatingWebhookListProps {
|
||||||
items: WebhookConfigInfo[];
|
items: WebhookConfigInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function MutatingWebhookList({ items }: MutatingWebhookListProps) {
|
||||||
| { type: "edit"; wh: WebhookConfigInfo; yaml: string }
|
|
||||||
| { type: "delete"; wh: WebhookConfigInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function MutatingWebhookList({ items, clusterId, onRefresh }: MutatingWebhookListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (wh: WebhookConfigInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "mutatingwebhookconfigurations", "", wh.name);
|
|
||||||
setActiveModal({ type: "edit", wh, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "mutatingwebhookconfigurations", "", activeModal.wh.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Webhooks</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={3} className="text-center text-muted-foreground">
|
||||||
<TableHead>Webhooks</TableHead>
|
No mutating webhook configurations found
|
||||||
<TableHead>Age</TableHead>
|
</TableCell>
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((wh) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={wh.name}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{wh.name}</TableCell>
|
||||||
<TableCell colSpan={4} className="text-center text-muted-foreground">
|
<TableCell className="text-sm">{wh.webhooks}</TableCell>
|
||||||
No mutating webhook configurations found
|
<TableCell className="text-sm text-muted-foreground">{wh.age}</TableCell>
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((wh) => (
|
)}
|
||||||
<TableRow key={wh.name}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{wh.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm">{wh.webhooks}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm text-muted-foreground">{wh.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(wh),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", wh }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace=""
|
|
||||||
resourceType="mutatingwebhookconfigurations"
|
|
||||||
resourceName={activeModal.wh.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="MutatingWebhookConfiguration"
|
|
||||||
resourceName={activeModal.wh.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,131 +1,48 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { PodDisruptionBudgetInfo } from "@/lib/tauriCommands";
|
import type { PodDisruptionBudgetInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface PodDisruptionBudgetListProps {
|
interface PodDisruptionBudgetListProps {
|
||||||
items: PodDisruptionBudgetInfo[];
|
items: PodDisruptionBudgetInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function PodDisruptionBudgetList({ items }: PodDisruptionBudgetListProps) {
|
||||||
| { type: "edit"; pdb: PodDisruptionBudgetInfo; yaml: string }
|
|
||||||
| { type: "delete"; pdb: PodDisruptionBudgetInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function PodDisruptionBudgetList({ items, clusterId, onRefresh }: PodDisruptionBudgetListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (pdb: PodDisruptionBudgetInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "poddisruptionbudgets", pdb.namespace, pdb.name);
|
|
||||||
setActiveModal({ type: "edit", pdb, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "poddisruptionbudgets", activeModal.pdb.namespace, activeModal.pdb.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Namespace</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Min Available</TableHead>
|
||||||
|
<TableHead>Max Unavailable</TableHead>
|
||||||
|
<TableHead>Disruptions Allowed</TableHead>
|
||||||
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={6} className="text-center text-muted-foreground">
|
||||||
<TableHead>Namespace</TableHead>
|
No pod disruption budgets found
|
||||||
<TableHead>Min Available</TableHead>
|
</TableCell>
|
||||||
<TableHead>Max Unavailable</TableHead>
|
|
||||||
<TableHead>Disruptions Allowed</TableHead>
|
|
||||||
<TableHead>Age</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((pdb) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={`${pdb.name}-${pdb.namespace}`}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{pdb.name}</TableCell>
|
||||||
<TableCell colSpan={7} className="text-center text-muted-foreground">
|
<TableCell className="text-sm text-muted-foreground">{pdb.namespace}</TableCell>
|
||||||
No pod disruption budgets found
|
<TableCell className="text-sm">{pdb.min_available}</TableCell>
|
||||||
</TableCell>
|
<TableCell className="text-sm">{pdb.max_unavailable}</TableCell>
|
||||||
|
<TableCell className="text-sm">{pdb.disruptions_allowed}</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">{pdb.age}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((pdb) => (
|
)}
|
||||||
<TableRow key={`${pdb.name}-${pdb.namespace}`}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{pdb.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm text-muted-foreground">{pdb.namespace}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm">{pdb.min_available}</TableCell>
|
|
||||||
<TableCell className="text-sm">{pdb.max_unavailable}</TableCell>
|
|
||||||
<TableCell className="text-sm">{pdb.disruptions_allowed}</TableCell>
|
|
||||||
<TableCell className="text-sm text-muted-foreground">{pdb.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(pdb),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", pdb }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.pdb.namespace}
|
|
||||||
resourceType="poddisruptionbudgets"
|
|
||||||
resourceName={activeModal.pdb.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="PodDisruptionBudget"
|
|
||||||
resourceName={activeModal.pdb.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,15 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Badge } from "@/components/ui";
|
import { Badge } from "@/components/ui";
|
||||||
import { FileText, Terminal, Link, Pencil, Trash2, Zap, Settings } from "lucide-react";
|
import { FileText, Terminal, Link, Pencil, Trash2, Zap } from "lucide-react";
|
||||||
import type { PodInfo } from "@/lib/tauriCommands";
|
import type { PodInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, forceDeleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
import { deleteResourceCmd, forceDeleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
import { ResourceActionMenu } from "./ResourceActionMenu";
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { LogStreamPanel } from "./LogStreamPanel";
|
import { LogsModal } from "./LogsModal";
|
||||||
import { InteractiveShellModal } from "./InteractiveShellModal";
|
import { ShellExecModal } from "./ShellExecModal";
|
||||||
import { InteractiveAttachModal } from "./InteractiveAttachModal";
|
import { AttachModal } from "./AttachModal";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { useColumnConfig } from "@/hooks/useColumnConfig";
|
|
||||||
import { DEFAULT_COLUMNS } from "@/config/defaultColumns";
|
|
||||||
import { ColumnConfigModal } from "@/components/tables/ColumnConfigModal";
|
|
||||||
import { QuickActionColumn } from "@/components/tables/QuickActionColumn";
|
|
||||||
|
|
||||||
interface PodListProps {
|
interface PodListProps {
|
||||||
pods: PodInfo[];
|
pods: PodInfo[];
|
||||||
@ -35,15 +31,10 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
const [editError, setEditError] = useState<string | null>(null);
|
const [editError, setEditError] = useState<string | null>(null);
|
||||||
const [showColumnConfig, setShowColumnConfig] = useState(false);
|
|
||||||
|
|
||||||
// namespace prop is retained for API compatibility (parent uses it to drive list fetches)
|
// namespace prop is retained for API compatibility (parent uses it to drive list fetches)
|
||||||
void namespace;
|
void namespace;
|
||||||
|
|
||||||
// Configurable columns
|
|
||||||
const columnConfig = useColumnConfig("pods", DEFAULT_COLUMNS.pods);
|
|
||||||
const { isColumnVisible } = columnConfig;
|
|
||||||
|
|
||||||
const getPodStatusColor = (status: string) => {
|
const getPodStatusColor = (status: string) => {
|
||||||
switch (status.toLowerCase()) {
|
switch (status.toLowerCase()) {
|
||||||
case "running":
|
case "running":
|
||||||
@ -96,71 +87,36 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
{editError && (
|
{editError && (
|
||||||
<p className="mb-2 text-sm text-destructive">{editError}</p>
|
<p className="mb-2 text-sm text-destructive">{editError}</p>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{pods.length} {pods.length === 1 ? "pod" : "pods"}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowColumnConfig(true)}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<Settings className="h-3.5 w-3.5" />
|
|
||||||
Columns
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
{isColumnVisible("name") && <TableHead>Name</TableHead>}
|
<TableHead>Name</TableHead>
|
||||||
{isColumnVisible("namespace") && <TableHead>Namespace</TableHead>}
|
<TableHead>Status</TableHead>
|
||||||
{isColumnVisible("status") && <TableHead>Status</TableHead>}
|
<TableHead>Ready</TableHead>
|
||||||
{isColumnVisible("ready") && <TableHead>Ready</TableHead>}
|
<TableHead>Age</TableHead>
|
||||||
{isColumnVisible("restarts") && <TableHead>Restarts</TableHead>}
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
{isColumnVisible("age") && <TableHead>Age</TableHead>}
|
|
||||||
{isColumnVisible("ip") && <TableHead>IP</TableHead>}
|
|
||||||
{isColumnVisible("node") && <TableHead>Node</TableHead>}
|
|
||||||
{isColumnVisible("actions") && <TableHead className="text-right">Actions</TableHead>}
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{pods.length === 0 ? (
|
{pods.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={9} className="text-center text-muted-foreground">
|
<TableCell colSpan={5} className="text-center text-muted-foreground">
|
||||||
No pods found
|
No pods found
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
) : (
|
||||||
pods.map((pod) => (
|
pods.map((pod) => (
|
||||||
<TableRow key={pod.name}>
|
<TableRow key={pod.name}>
|
||||||
{isColumnVisible("name") && (
|
<TableCell className="font-medium">{pod.name}</TableCell>
|
||||||
<TableCell className="font-medium">{pod.name}</TableCell>
|
<TableCell>
|
||||||
)}
|
<Badge className={`${getPodStatusColor(pod.status)} text-white`}>
|
||||||
{isColumnVisible("namespace") && (
|
{pod.status}
|
||||||
<TableCell className="text-muted-foreground">{pod.namespace}</TableCell>
|
</Badge>
|
||||||
)}
|
</TableCell>
|
||||||
{isColumnVisible("status") && (
|
<TableCell>{pod.ready}</TableCell>
|
||||||
<TableCell>
|
<TableCell className="text-muted-foreground">{pod.age}</TableCell>
|
||||||
<Badge className={`${getPodStatusColor(pod.status)} text-white`}>
|
<TableCell className="text-right">
|
||||||
{pod.status}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{isColumnVisible("ready") && <TableCell>{pod.ready}</TableCell>}
|
|
||||||
{isColumnVisible("restarts") && <TableCell>{pod.restarts}</TableCell>}
|
|
||||||
{isColumnVisible("age") && (
|
|
||||||
<TableCell className="text-muted-foreground">{pod.age}</TableCell>
|
|
||||||
)}
|
|
||||||
{isColumnVisible("ip") && (
|
|
||||||
<TableCell className="text-muted-foreground font-mono text-xs">{pod.ip || "-"}</TableCell>
|
|
||||||
)}
|
|
||||||
{isColumnVisible("node") && (
|
|
||||||
<TableCell className="text-muted-foreground">{pod.node || "-"}</TableCell>
|
|
||||||
)}
|
|
||||||
{isColumnVisible("actions") && (
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
<ResourceActionMenu
|
||||||
actions={[
|
actions={[
|
||||||
{
|
{
|
||||||
@ -201,8 +157,7 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
)}
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
@ -211,7 +166,7 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
{activeModal?.type === "logs" && (
|
||||||
<LogStreamPanel
|
<LogsModal
|
||||||
open
|
open
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
||||||
clusterId={clusterId}
|
clusterId={clusterId}
|
||||||
@ -222,22 +177,24 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{activeModal?.type === "shell" && (
|
{activeModal?.type === "shell" && (
|
||||||
<InteractiveShellModal
|
<ShellExecModal
|
||||||
|
open
|
||||||
|
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
||||||
clusterId={clusterId}
|
clusterId={clusterId}
|
||||||
namespace={activeModal.pod.namespace}
|
namespace={activeModal.pod.namespace}
|
||||||
pod={activeModal.pod.name}
|
podName={activeModal.pod.name}
|
||||||
container={activeModal.pod.containers[0]}
|
containers={activeModal.pod.containers}
|
||||||
onClose={() => setActiveModal(null)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeModal?.type === "attach" && (
|
{activeModal?.type === "attach" && (
|
||||||
<InteractiveAttachModal
|
<AttachModal
|
||||||
|
open
|
||||||
|
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
||||||
clusterId={clusterId}
|
clusterId={clusterId}
|
||||||
namespace={activeModal.pod.namespace}
|
namespace={activeModal.pod.namespace}
|
||||||
pod={activeModal.pod.name}
|
podName={activeModal.pod.name}
|
||||||
container={activeModal.pod.containers[0]}
|
containers={activeModal.pod.containers}
|
||||||
onClose={() => setActiveModal(null)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@ -275,24 +232,6 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps)
|
|||||||
onConfirm={() => handleDelete(true)}
|
onConfirm={() => handleDelete(true)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<ColumnConfigModal
|
|
||||||
open={showColumnConfig}
|
|
||||||
onOpenChange={setShowColumnConfig}
|
|
||||||
resourceType="Pods"
|
|
||||||
columnConfig={columnConfig}
|
|
||||||
columnLabels={{
|
|
||||||
name: "Name",
|
|
||||||
namespace: "Namespace",
|
|
||||||
status: "Status",
|
|
||||||
ready: "Ready",
|
|
||||||
restarts: "Restarts",
|
|
||||||
age: "Age",
|
|
||||||
ip: "IP Address",
|
|
||||||
node: "Node",
|
|
||||||
actions: "Actions",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,133 +1,50 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { PriorityClassInfo } from "@/lib/tauriCommands";
|
import type { PriorityClassInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface PriorityClassListProps {
|
interface PriorityClassListProps {
|
||||||
items: PriorityClassInfo[];
|
items: PriorityClassInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function PriorityClassList({ items }: PriorityClassListProps) {
|
||||||
| { type: "edit"; pc: PriorityClassInfo; yaml: string }
|
|
||||||
| { type: "delete"; pc: PriorityClassInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function PriorityClassList({ items, clusterId, onRefresh }: PriorityClassListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (pc: PriorityClassInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "priorityclasses", "", pc.name);
|
|
||||||
setActiveModal({ type: "edit", pc, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "priorityclasses", "", activeModal.pc.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Value</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Global Default</TableHead>
|
||||||
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={4} className="text-center text-muted-foreground">
|
||||||
<TableHead>Value</TableHead>
|
No priority classes found
|
||||||
<TableHead>Global Default</TableHead>
|
</TableCell>
|
||||||
<TableHead>Age</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((pc) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={pc.name}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{pc.name}</TableCell>
|
||||||
<TableCell colSpan={5} className="text-center text-muted-foreground">
|
<TableCell className="text-sm font-mono">{pc.value}</TableCell>
|
||||||
No priority classes found
|
<TableCell className="text-sm">
|
||||||
|
{pc.global_default ? (
|
||||||
|
<Badge variant="success">Yes</Badge>
|
||||||
|
) : (
|
||||||
|
<span className="text-muted-foreground">No</span>
|
||||||
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">{pc.age}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((pc) => (
|
)}
|
||||||
<TableRow key={pc.name}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{pc.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm font-mono">{pc.value}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm">
|
|
||||||
{pc.global_default ? (
|
|
||||||
<Badge variant="success">Yes</Badge>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted-foreground">No</span>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-sm text-muted-foreground">{pc.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(pc),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", pc }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace=""
|
|
||||||
resourceType="priorityclasses"
|
|
||||||
resourceName={activeModal.pc.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="PriorityClass"
|
|
||||||
resourceName={activeModal.pc.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Scale, Pencil, Trash2, FileText } from "lucide-react";
|
import { Scale, Pencil, Trash2 } from "lucide-react";
|
||||||
import type { ReplicaSetInfo } from "@/lib/tauriCommands";
|
import type { ReplicaSetInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
import {
|
||||||
scaleReplicasetCmd,
|
scaleReplicasetCmd,
|
||||||
@ -11,7 +11,6 @@ import { ResourceActionMenu } from "./ResourceActionMenu";
|
|||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { ScaleModal } from "./ScaleModal";
|
import { ScaleModal } from "./ScaleModal";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface ReplicaSetListProps {
|
interface ReplicaSetListProps {
|
||||||
replicaSets: ReplicaSetInfo[];
|
replicaSets: ReplicaSetInfo[];
|
||||||
@ -24,7 +23,6 @@ interface ReplicaSetListProps {
|
|||||||
|
|
||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "scale"; rs: ReplicaSetInfo }
|
| { type: "scale"; rs: ReplicaSetInfo }
|
||||||
| { type: "logs"; rs: ReplicaSetInfo }
|
|
||||||
| { type: "edit"; rs: ReplicaSetInfo; yaml: string }
|
| { type: "edit"; rs: ReplicaSetInfo; yaml: string }
|
||||||
| { type: "delete"; rs: ReplicaSetInfo }
|
| { type: "delete"; rs: ReplicaSetInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -108,11 +106,6 @@ export function ReplicaSetList({
|
|||||||
icon: Scale,
|
icon: Scale,
|
||||||
onClick: () => setActiveModal({ type: "scale", rs }),
|
onClick: () => setActiveModal({ type: "scale", rs }),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", rs }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -134,18 +127,6 @@ export function ReplicaSetList({
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={cid}
|
|
||||||
namespace={activeModal.rs.namespace}
|
|
||||||
workloadType="replicaset"
|
|
||||||
workloadName={activeModal.rs.name}
|
|
||||||
labels={activeModal.rs.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "scale" && (
|
{activeModal?.type === "scale" && (
|
||||||
<ScaleModal
|
<ScaleModal
|
||||||
open
|
open
|
||||||
|
|||||||
@ -1,187 +1,48 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Scale, Pencil, Trash2, FileText } from "lucide-react";
|
|
||||||
import type { ReplicationControllerInfo } from "@/lib/tauriCommands";
|
import type { ReplicationControllerInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
|
||||||
scaleReplicationcontrollerCmd,
|
|
||||||
deleteResourceCmd,
|
|
||||||
getResourceYamlCmd,
|
|
||||||
} from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { ScaleModal } from "./ScaleModal";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface ReplicationControllerListProps {
|
interface ReplicationControllerListProps {
|
||||||
items: ReplicationControllerInfo[];
|
items: ReplicationControllerInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function ReplicationControllerList({ items }: ReplicationControllerListProps) {
|
||||||
| { type: "scale"; rc: ReplicationControllerInfo }
|
|
||||||
| { type: "logs"; rc: ReplicationControllerInfo }
|
|
||||||
| { type: "edit"; rc: ReplicationControllerInfo; yaml: string }
|
|
||||||
| { type: "delete"; rc: ReplicationControllerInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function ReplicationControllerList({
|
|
||||||
items,
|
|
||||||
clusterId,
|
|
||||||
namespace: _namespace,
|
|
||||||
onRefresh,
|
|
||||||
}: ReplicationControllerListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isActing, setIsActing] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (rc: ReplicationControllerInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "replicationcontrollers", rc.namespace, rc.name);
|
|
||||||
setActiveModal({ type: "edit", rc, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsActing(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "replicationcontrollers", activeModal.rc.namespace, activeModal.rc.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsActing(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Convert "X/Y" string to number (for current replicas)
|
|
||||||
const getDesiredReplicas = (rc: ReplicationControllerInfo): number => {
|
|
||||||
return rc.desired;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Namespace</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Desired</TableHead>
|
||||||
|
<TableHead>Ready</TableHead>
|
||||||
|
<TableHead>Current</TableHead>
|
||||||
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={6} className="text-center text-muted-foreground">
|
||||||
<TableHead>Namespace</TableHead>
|
No replication controllers found
|
||||||
<TableHead>Desired</TableHead>
|
</TableCell>
|
||||||
<TableHead>Current</TableHead>
|
|
||||||
<TableHead>Ready</TableHead>
|
|
||||||
<TableHead>Age</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((rc) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={`${rc.name}-${rc.namespace}`}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{rc.name}</TableCell>
|
||||||
<TableCell colSpan={7} className="text-center text-muted-foreground">
|
<TableCell className="text-sm text-muted-foreground">{rc.namespace}</TableCell>
|
||||||
No replication controllers found
|
<TableCell className="text-sm">{rc.desired}</TableCell>
|
||||||
</TableCell>
|
<TableCell className="text-sm">{rc.ready}</TableCell>
|
||||||
|
<TableCell className="text-sm">{rc.current}</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">{rc.age}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((rc) => (
|
)}
|
||||||
<TableRow key={`${rc.name}-${rc.namespace}`}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{rc.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-muted-foreground">{rc.namespace}</TableCell>
|
</div>
|
||||||
<TableCell>{rc.desired}</TableCell>
|
|
||||||
<TableCell>{rc.current}</TableCell>
|
|
||||||
<TableCell>{rc.ready}</TableCell>
|
|
||||||
<TableCell className="text-muted-foreground">{rc.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Scale",
|
|
||||||
icon: Scale,
|
|
||||||
onClick: () => setActiveModal({ type: "scale", rc }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", rc }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(rc),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", rc }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.rc.namespace}
|
|
||||||
workloadType="replicationcontroller"
|
|
||||||
workloadName={activeModal.rc.name}
|
|
||||||
labels={{}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "scale" && (
|
|
||||||
<ScaleModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="ReplicationController"
|
|
||||||
resourceName={activeModal.rc.name}
|
|
||||||
currentReplicas={getDesiredReplicas(activeModal.rc)}
|
|
||||||
onScale={(replicas) =>
|
|
||||||
scaleReplicationcontrollerCmd(clusterId, activeModal.rc.namespace, activeModal.rc.name, replicas).then(() => {
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.rc.namespace}
|
|
||||||
resourceType="replicationcontrollers"
|
|
||||||
resourceName={activeModal.rc.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="ReplicationController"
|
|
||||||
resourceName={activeModal.rc.name}
|
|
||||||
isLoading={isActing}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { MoreHorizontal } from "lucide-react";
|
import { MoreHorizontal } from "lucide-react";
|
||||||
import { Button } from "@/components/ui";
|
import { Button } from "@/components/ui";
|
||||||
import { useSmartPosition } from "@/hooks/useSmartPosition";
|
|
||||||
|
|
||||||
export interface ResourceAction {
|
export interface ResourceAction {
|
||||||
label: string;
|
label: string;
|
||||||
@ -20,8 +19,6 @@ interface ResourceActionMenuProps {
|
|||||||
export function ResourceActionMenu({ actions, triggerLabel = "Actions" }: ResourceActionMenuProps) {
|
export function ResourceActionMenu({ actions, triggerLabel = "Actions" }: ResourceActionMenuProps) {
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
const ref = React.useRef<HTMLDivElement>(null);
|
const ref = React.useRef<HTMLDivElement>(null);
|
||||||
const contentRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
const flipUpward = useSmartPosition(open, contentRef);
|
|
||||||
|
|
||||||
const visible = actions.filter((a) => !a.hidden);
|
const visible = actions.filter((a) => !a.hidden);
|
||||||
|
|
||||||
@ -53,12 +50,7 @@ export function ResourceActionMenu({ actions, triggerLabel = "Actions" }: Resour
|
|||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<div
|
<div className="absolute right-0 z-50 mt-1 w-48 rounded-md border bg-card shadow-lg">
|
||||||
ref={contentRef}
|
|
||||||
className={`absolute right-0 z-50 w-48 rounded-md border bg-card shadow-lg ${
|
|
||||||
flipUpward ? "bottom-full mb-1" : "top-full mt-1"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
{visible.map((action, idx) => {
|
{visible.map((action, idx) => {
|
||||||
const Icon = action.icon;
|
const Icon = action.icon;
|
||||||
|
|||||||
@ -1,125 +1,42 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { RuntimeClassInfo } from "@/lib/tauriCommands";
|
import type { RuntimeClassInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface RuntimeClassListProps {
|
interface RuntimeClassListProps {
|
||||||
items: RuntimeClassInfo[];
|
items: RuntimeClassInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function RuntimeClassList({ items }: RuntimeClassListProps) {
|
||||||
| { type: "edit"; rc: RuntimeClassInfo; yaml: string }
|
|
||||||
| { type: "delete"; rc: RuntimeClassInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function RuntimeClassList({ items, clusterId, onRefresh }: RuntimeClassListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (rc: RuntimeClassInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "runtimeclasses", "", rc.name);
|
|
||||||
setActiveModal({ type: "edit", rc, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "runtimeclasses", "", activeModal.rc.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Handler</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={3} className="text-center text-muted-foreground">
|
||||||
<TableHead>Handler</TableHead>
|
No runtime classes found
|
||||||
<TableHead>Age</TableHead>
|
</TableCell>
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((rc) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={rc.name}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{rc.name}</TableCell>
|
||||||
<TableCell colSpan={4} className="text-center text-muted-foreground">
|
<TableCell className="text-sm font-mono">{rc.handler}</TableCell>
|
||||||
No runtime classes found
|
<TableCell className="text-sm text-muted-foreground">{rc.age}</TableCell>
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((rc) => (
|
)}
|
||||||
<TableRow key={rc.name}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{rc.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm font-mono">{rc.handler}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm text-muted-foreground">{rc.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(rc),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", rc }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace=""
|
|
||||||
resourceType="runtimeclasses"
|
|
||||||
resourceName={activeModal.rc.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="RuntimeClass"
|
|
||||||
resourceName={activeModal.rc.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,176 +0,0 @@
|
|||||||
import React, { useState, useMemo } from "react";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
} from "@/components/ui";
|
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
|
||||||
import { Button } from "@/components/ui";
|
|
||||||
import { Eye, EyeOff, Copy, Check } from "lucide-react";
|
|
||||||
|
|
||||||
interface SecretDataModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
secretName: string;
|
|
||||||
secretYaml: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SecretData {
|
|
||||||
[key: string]: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SecretDataModal({ open, onOpenChange, secretName, secretYaml }: SecretDataModalProps) {
|
|
||||||
const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set());
|
|
||||||
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const secretData = useMemo<SecretData>(() => {
|
|
||||||
try {
|
|
||||||
// Simple YAML parsing for the data section
|
|
||||||
// Find the data: section and extract key-value pairs
|
|
||||||
const lines = secretYaml.split("\n");
|
|
||||||
const dataIndex = lines.findIndex(line => line.trim() === "data:");
|
|
||||||
|
|
||||||
if (dataIndex === -1) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
const result: SecretData = {};
|
|
||||||
const dataIndent = lines[dataIndex].search(/\S/);
|
|
||||||
|
|
||||||
for (let i = dataIndex + 1; i < lines.length; i++) {
|
|
||||||
const line = lines[i];
|
|
||||||
const trimmed = line.trim();
|
|
||||||
|
|
||||||
// Stop if we hit another top-level key
|
|
||||||
if (line.search(/\S/) <= dataIndent && trimmed && !trimmed.startsWith("#")) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parse key: value pairs
|
|
||||||
const match = trimmed.match(/^([^:]+):\s*(.*)$/);
|
|
||||||
if (match && match[1] && match[2]) {
|
|
||||||
const key = match[1].trim();
|
|
||||||
const value = match[2].trim();
|
|
||||||
result[key] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to parse secret YAML:", err);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}, [secretYaml]);
|
|
||||||
|
|
||||||
const decodedData = useMemo(() => {
|
|
||||||
const decoded: Record<string, string> = {};
|
|
||||||
Object.entries(secretData).forEach(([key, value]) => {
|
|
||||||
try {
|
|
||||||
// Decode base64 using native atob
|
|
||||||
decoded[key] = atob(value);
|
|
||||||
} catch (err) {
|
|
||||||
decoded[key] = `[Failed to decode: ${err instanceof Error ? err.message : String(err)}]`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return decoded;
|
|
||||||
}, [secretData]);
|
|
||||||
|
|
||||||
const toggleReveal = (key: string) => {
|
|
||||||
setRevealedKeys((prev) => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
if (next.has(key)) {
|
|
||||||
next.delete(key);
|
|
||||||
} else {
|
|
||||||
next.add(key);
|
|
||||||
}
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = async (key: string, value: string) => {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(value);
|
|
||||||
setCopiedKey(key);
|
|
||||||
setTimeout(() => setCopiedKey(null), 2000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to copy to clipboard:", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataKeys = Object.keys(secretData);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Secret Data: {secretName}</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
Decoded secret data. Click the eye icon to reveal values.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
{dataKeys.length === 0 ? (
|
|
||||||
<p className="text-sm text-muted-foreground py-4">No data keys in this secret.</p>
|
|
||||||
) : (
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>Key</TableHead>
|
|
||||||
<TableHead>Value</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{dataKeys.map((key) => {
|
|
||||||
const isRevealed = revealedKeys.has(key);
|
|
||||||
const value = decodedData[key] ?? "";
|
|
||||||
const isCopied = copiedKey === key;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableRow key={key}>
|
|
||||||
<TableCell className="font-medium font-mono text-sm">{key}</TableCell>
|
|
||||||
<TableCell className="font-mono text-sm max-w-md truncate">
|
|
||||||
{isRevealed ? value : "••••••••"}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex items-center justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => toggleReveal(key)}
|
|
||||||
title={isRevealed ? "Hide value" : "Reveal value"}
|
|
||||||
>
|
|
||||||
{isRevealed ? (
|
|
||||||
<EyeOff className="w-4 h-4" />
|
|
||||||
) : (
|
|
||||||
<Eye className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => copyToClipboard(key, value)}
|
|
||||||
title="Copy to clipboard"
|
|
||||||
>
|
|
||||||
{isCopied ? (
|
|
||||||
<Check className="w-4 h-4 text-green-500" />
|
|
||||||
) : (
|
|
||||||
<Copy className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,12 +1,11 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2, Eye } from "lucide-react";
|
import { Pencil, Trash2 } from "lucide-react";
|
||||||
import type { SecretInfo } from "@/lib/tauriCommands";
|
import type { SecretInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
import { ResourceActionMenu } from "./ResourceActionMenu";
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { SecretDataModal } from "./SecretDataModal";
|
|
||||||
|
|
||||||
interface SecretListProps {
|
interface SecretListProps {
|
||||||
secrets: SecretInfo[];
|
secrets: SecretInfo[];
|
||||||
@ -18,7 +17,6 @@ interface SecretListProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "view"; secret: SecretInfo; yaml: string }
|
|
||||||
| { type: "edit"; secret: SecretInfo; yaml: string }
|
| { type: "edit"; secret: SecretInfo; yaml: string }
|
||||||
| { type: "delete"; secret: SecretInfo }
|
| { type: "delete"; secret: SecretInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -34,16 +32,6 @@ export function SecretList({
|
|||||||
const [isDeleting, setIsDeleting] = useState(false);
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
const [actionError, setActionError] = useState<string | null>(null);
|
||||||
|
|
||||||
const openView = async (secret: SecretInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(cid, "secrets", secret.namespace, secret.name);
|
|
||||||
setActiveModal({ type: "view", secret, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const openEdit = async (secret: SecretInfo) => {
|
const openEdit = async (secret: SecretInfo) => {
|
||||||
setActionError(null);
|
setActionError(null);
|
||||||
try {
|
try {
|
||||||
@ -101,11 +89,6 @@ export function SecretList({
|
|||||||
<TableCell className="text-right">
|
<TableCell className="text-right">
|
||||||
<ResourceActionMenu
|
<ResourceActionMenu
|
||||||
actions={[
|
actions={[
|
||||||
{
|
|
||||||
label: "View Data",
|
|
||||||
icon: Eye,
|
|
||||||
onClick: () => openView(secret),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -127,15 +110,6 @@ export function SecretList({
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "view" && (
|
|
||||||
<SecretDataModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
secretName={activeModal.secret.name}
|
|
||||||
secretYaml={activeModal.yaml}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
{activeModal?.type === "edit" && (
|
||||||
<EditResourceModal
|
<EditResourceModal
|
||||||
isOpen
|
isOpen
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Scale, RotateCcw, Pencil, Trash2, FileText } from "lucide-react";
|
import { Scale, RotateCcw, Pencil, Trash2 } from "lucide-react";
|
||||||
import type { StatefulSetInfo } from "@/lib/tauriCommands";
|
import type { StatefulSetInfo } from "@/lib/tauriCommands";
|
||||||
import {
|
import {
|
||||||
scaleStatefulsetCmd,
|
scaleStatefulsetCmd,
|
||||||
@ -12,7 +12,6 @@ import { ResourceActionMenu } from "./ResourceActionMenu";
|
|||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||||
import { ScaleModal } from "./ScaleModal";
|
import { ScaleModal } from "./ScaleModal";
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
import { EditResourceModal } from "./EditResourceModal";
|
||||||
import { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
|
|
||||||
interface StatefulSetListProps {
|
interface StatefulSetListProps {
|
||||||
statefulsets: StatefulSetInfo[];
|
statefulsets: StatefulSetInfo[];
|
||||||
@ -24,7 +23,6 @@ interface StatefulSetListProps {
|
|||||||
type ActiveModal =
|
type ActiveModal =
|
||||||
| { type: "scale"; ss: StatefulSetInfo }
|
| { type: "scale"; ss: StatefulSetInfo }
|
||||||
| { type: "restart"; ss: StatefulSetInfo }
|
| { type: "restart"; ss: StatefulSetInfo }
|
||||||
| { type: "logs"; ss: StatefulSetInfo }
|
|
||||||
| { type: "edit"; ss: StatefulSetInfo; yaml: string }
|
| { type: "edit"; ss: StatefulSetInfo; yaml: string }
|
||||||
| { type: "delete"; ss: StatefulSetInfo }
|
| { type: "delete"; ss: StatefulSetInfo }
|
||||||
| null;
|
| null;
|
||||||
@ -113,11 +111,6 @@ export function StatefulSetList({ statefulsets, clusterId, namespace: _namespace
|
|||||||
icon: RotateCcw,
|
icon: RotateCcw,
|
||||||
onClick: () => setActiveModal({ type: "restart", ss }),
|
onClick: () => setActiveModal({ type: "restart", ss }),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Logs",
|
|
||||||
icon: FileText,
|
|
||||||
onClick: () => setActiveModal({ type: "logs", ss }),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Edit",
|
label: "Edit",
|
||||||
icon: Pencil,
|
icon: Pencil,
|
||||||
@ -139,18 +132,6 @@ export function StatefulSetList({ statefulsets, clusterId, namespace: _namespace
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeModal?.type === "logs" && (
|
|
||||||
<WorkloadLogsModal
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace={activeModal.ss.namespace}
|
|
||||||
workloadType="statefulset"
|
|
||||||
workloadName={activeModal.ss.name}
|
|
||||||
labels={activeModal.ss.labels}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "scale" && (
|
{activeModal?.type === "scale" && (
|
||||||
<ScaleModal
|
<ScaleModal
|
||||||
open
|
open
|
||||||
|
|||||||
@ -2,16 +2,8 @@ import React from "react";
|
|||||||
import { Terminal as XTerminal, type ITerminalOptions } from "xterm";
|
import { Terminal as XTerminal, type ITerminalOptions } from "xterm";
|
||||||
import { FitAddon } from "xterm-addon-fit";
|
import { FitAddon } from "xterm-addon-fit";
|
||||||
import { WebLinksAddon } from "xterm-addon-web-links";
|
import { WebLinksAddon } from "xterm-addon-web-links";
|
||||||
import { Terminal as TerminalIcon, X, Plus, Settings } from "lucide-react";
|
import { Terminal as TerminalIcon, X, Plus } from "lucide-react";
|
||||||
import { execPodCmd } from "@/lib/tauriCommands";
|
import { execPodCmd } from "@/lib/tauriCommands";
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
Button,
|
|
||||||
Input,
|
|
||||||
} from "@/components/ui";
|
|
||||||
|
|
||||||
interface TerminalSession {
|
interface TerminalSession {
|
||||||
id: string;
|
id: string;
|
||||||
@ -30,50 +22,18 @@ interface TerminalProps {
|
|||||||
containerName?: string;
|
containerName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TerminalSettings {
|
const XTERM_OPTIONS: ITerminalOptions = {
|
||||||
copyOnSelect: boolean;
|
cursorBlink: true,
|
||||||
fontFamily: string;
|
theme: {
|
||||||
fontSize: number;
|
background: "#0f172a",
|
||||||
}
|
foreground: "#4ade80",
|
||||||
|
cursor: "#4ade80",
|
||||||
const DEFAULT_SETTINGS: TerminalSettings = {
|
},
|
||||||
copyOnSelect: false,
|
|
||||||
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
|
convertEol: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const STORAGE_KEY = "terminal-settings";
|
|
||||||
|
|
||||||
function loadSettings(): TerminalSettings {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem(STORAGE_KEY);
|
|
||||||
if (stored) {
|
|
||||||
return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Ignore parse errors
|
|
||||||
}
|
|
||||||
return DEFAULT_SETTINGS;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveSettings(settings: TerminalSettings): void {
|
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeXtermOptions(settings: TerminalSettings): ITerminalOptions {
|
|
||||||
return {
|
|
||||||
cursorBlink: true,
|
|
||||||
theme: {
|
|
||||||
background: "#0f172a",
|
|
||||||
foreground: "#4ade80",
|
|
||||||
cursor: "#4ade80",
|
|
||||||
},
|
|
||||||
fontFamily: settings.fontFamily,
|
|
||||||
fontSize: settings.fontSize,
|
|
||||||
convertEol: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeSessionId() {
|
function makeSessionId() {
|
||||||
return `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
return `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||||||
}
|
}
|
||||||
@ -86,8 +46,6 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
const [sessions, setSessions] = React.useState<TerminalSession[]>([]);
|
const [sessions, setSessions] = React.useState<TerminalSession[]>([]);
|
||||||
const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
|
const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
|
||||||
const [sessionShells, setSessionShells] = React.useState<Record<string, string>>({});
|
const [sessionShells, setSessionShells] = React.useState<Record<string, string>>({});
|
||||||
const [settings, setSettings] = React.useState<TerminalSettings>(loadSettings());
|
|
||||||
const [settingsOpen, setSettingsOpen] = React.useState(false);
|
|
||||||
|
|
||||||
const terminalRefs = React.useRef<Record<string, XTerminal>>({});
|
const terminalRefs = React.useRef<Record<string, XTerminal>>({});
|
||||||
const fitAddonRefs = React.useRef<Record<string, FitAddon>>({});
|
const fitAddonRefs = React.useRef<Record<string, FitAddon>>({});
|
||||||
@ -154,8 +112,7 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
(sessionId: string, session: TerminalSession, element: HTMLDivElement) => {
|
(sessionId: string, session: TerminalSession, element: HTMLDivElement) => {
|
||||||
if (terminalRefs.current[sessionId]) return;
|
if (terminalRefs.current[sessionId]) return;
|
||||||
|
|
||||||
const xtermOptions = makeXtermOptions(settings);
|
const term = new XTerminal(XTERM_OPTIONS);
|
||||||
const term = new XTerminal(xtermOptions);
|
|
||||||
const fitAddon = new FitAddon();
|
const fitAddon = new FitAddon();
|
||||||
const webLinksAddon = new WebLinksAddon();
|
const webLinksAddon = new WebLinksAddon();
|
||||||
|
|
||||||
@ -163,18 +120,6 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
term.loadAddon(webLinksAddon);
|
term.loadAddon(webLinksAddon);
|
||||||
term.open(element);
|
term.open(element);
|
||||||
|
|
||||||
// Copy-on-select functionality
|
|
||||||
if (settings.copyOnSelect) {
|
|
||||||
term.onSelectionChange(() => {
|
|
||||||
const selection = term.getSelection();
|
|
||||||
if (selection) {
|
|
||||||
navigator.clipboard.writeText(selection).catch(() => {
|
|
||||||
// Ignore clipboard errors
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
try { fitAddon.fit(); } catch { /* first-frame race — safe to ignore */ }
|
try { fitAddon.fit(); } catch { /* first-frame race — safe to ignore */ }
|
||||||
|
|
||||||
terminalRefs.current[sessionId] = term;
|
terminalRefs.current[sessionId] = term;
|
||||||
@ -224,7 +169,7 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[settings] // Include settings to rebuild terminals with new config
|
[] // sessionShellsRef is a ref — stable reference, safe to omit
|
||||||
);
|
);
|
||||||
|
|
||||||
// ── callback ref: fires when a container div is set/unset ──────────────────
|
// ── callback ref: fires when a container div is set/unset ──────────────────
|
||||||
@ -273,23 +218,6 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
setSessionShells((prev) => ({ ...prev, [sessionId]: shell }));
|
setSessionShells((prev) => ({ ...prev, [sessionId]: shell }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateSettings = (newSettings: Partial<TerminalSettings>) => {
|
|
||||||
const updated = { ...settings, ...newSettings };
|
|
||||||
setSettings(updated);
|
|
||||||
saveSettings(updated);
|
|
||||||
|
|
||||||
// Apply settings to all existing terminals
|
|
||||||
Object.entries(terminalRefs.current).forEach(([, term]) => {
|
|
||||||
term.options.fontFamily = updated.fontFamily;
|
|
||||||
term.options.fontSize = updated.fontSize;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fit all terminals after font changes
|
|
||||||
Object.values(fitAddonRefs.current).forEach((fa) => {
|
|
||||||
try { fa.fit(); } catch { /* ignore */ }
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// ── empty state ─────────────────────────────────────────────────────────────
|
// ── empty state ─────────────────────────────────────────────────────────────
|
||||||
if (sessions.length === 0) {
|
if (sessions.length === 0) {
|
||||||
return (
|
return (
|
||||||
@ -354,13 +282,6 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
<option value="sh">sh</option>
|
<option value="sh">sh</option>
|
||||||
<option value="zsh">zsh</option>
|
<option value="zsh">zsh</option>
|
||||||
</select>
|
</select>
|
||||||
<button
|
|
||||||
aria-label="settings"
|
|
||||||
onClick={() => setSettingsOpen(true)}
|
|
||||||
className="p-1.5 text-slate-400 hover:text-green-400 transition-colors"
|
|
||||||
>
|
|
||||||
<Settings className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -379,71 +300,6 @@ export function Terminal({ clusterId, namespace, podName, containerName }: Termi
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Settings Dialog */}
|
|
||||||
<Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
|
|
||||||
<DialogContent className="max-w-md">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Terminal Settings</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label htmlFor="copy-on-select" className="text-sm font-medium">
|
|
||||||
Copy on Select
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="copy-on-select"
|
|
||||||
type="checkbox"
|
|
||||||
checked={settings.copyOnSelect}
|
|
||||||
onChange={(e) => updateSettings({ copyOnSelect: e.target.checked })}
|
|
||||||
className="rounded border-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label htmlFor="font-family" className="text-sm font-medium block">
|
|
||||||
Font Family
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="font-family"
|
|
||||||
type="text"
|
|
||||||
value={settings.fontFamily}
|
|
||||||
onChange={(e) => updateSettings({ fontFamily: e.target.value })}
|
|
||||||
placeholder="e.g., monospace, Courier New"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label htmlFor="font-size" className="text-sm font-medium block">
|
|
||||||
Font Size
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="font-size"
|
|
||||||
type="number"
|
|
||||||
min={8}
|
|
||||||
max={24}
|
|
||||||
value={settings.fontSize}
|
|
||||||
onChange={(e) => updateSettings({ fontSize: Number(e.target.value) })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button variant="outline" onClick={() => setSettingsOpen(false)}>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
updateSettings(DEFAULT_SETTINGS);
|
|
||||||
setSettingsOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Reset to Defaults
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,125 +1,42 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import type { WebhookConfigInfo } from "@/lib/tauriCommands";
|
import type { WebhookConfigInfo } from "@/lib/tauriCommands";
|
||||||
import { deleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands";
|
|
||||||
import { ResourceActionMenu } from "./ResourceActionMenu";
|
|
||||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
|
||||||
import { EditResourceModal } from "./EditResourceModal";
|
|
||||||
|
|
||||||
interface ValidatingWebhookListProps {
|
interface ValidatingWebhookListProps {
|
||||||
items: WebhookConfigInfo[];
|
items: WebhookConfigInfo[];
|
||||||
clusterId: string;
|
clusterId: string;
|
||||||
namespace?: string;
|
namespace?: string;
|
||||||
onRefresh?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActiveModal =
|
export function ValidatingWebhookList({ items }: ValidatingWebhookListProps) {
|
||||||
| { type: "edit"; wh: WebhookConfigInfo; yaml: string }
|
|
||||||
| { type: "delete"; wh: WebhookConfigInfo }
|
|
||||||
| null;
|
|
||||||
|
|
||||||
export function ValidatingWebhookList({ items, clusterId, onRefresh }: ValidatingWebhookListProps) {
|
|
||||||
const [activeModal, setActiveModal] = useState<ActiveModal>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [actionError, setActionError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const openEdit = async (wh: WebhookConfigInfo) => {
|
|
||||||
setActionError(null);
|
|
||||||
try {
|
|
||||||
const yaml = await getResourceYamlCmd(clusterId, "validatingwebhookconfigurations", "", wh.name);
|
|
||||||
setActiveModal({ type: "edit", wh, yaml });
|
|
||||||
} catch (err) {
|
|
||||||
setActionError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (activeModal?.type !== "delete") return;
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteResourceCmd(clusterId, "validatingwebhookconfigurations", "", activeModal.wh.name);
|
|
||||||
setActiveModal(null);
|
|
||||||
onRefresh?.();
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="overflow-x-auto">
|
||||||
{actionError && (
|
<Table>
|
||||||
<p className="mb-2 text-sm text-destructive">{actionError}</p>
|
<TableHeader>
|
||||||
)}
|
<TableRow>
|
||||||
<div className="overflow-x-auto">
|
<TableHead>Name</TableHead>
|
||||||
<Table>
|
<TableHead>Webhooks</TableHead>
|
||||||
<TableHeader>
|
<TableHead>Age</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{items.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Name</TableHead>
|
<TableCell colSpan={3} className="text-center text-muted-foreground">
|
||||||
<TableHead>Webhooks</TableHead>
|
No validating webhook configurations found
|
||||||
<TableHead>Age</TableHead>
|
</TableCell>
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
) : (
|
||||||
<TableBody>
|
items.map((wh) => (
|
||||||
{items.length === 0 ? (
|
<TableRow key={wh.name}>
|
||||||
<TableRow>
|
<TableCell className="font-medium">{wh.name}</TableCell>
|
||||||
<TableCell colSpan={4} className="text-center text-muted-foreground">
|
<TableCell className="text-sm">{wh.webhooks}</TableCell>
|
||||||
No validating webhook configurations found
|
<TableCell className="text-sm text-muted-foreground">{wh.age}</TableCell>
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
items.map((wh) => (
|
)}
|
||||||
<TableRow key={wh.name}>
|
</TableBody>
|
||||||
<TableCell className="font-medium">{wh.name}</TableCell>
|
</Table>
|
||||||
<TableCell className="text-sm">{wh.webhooks}</TableCell>
|
</div>
|
||||||
<TableCell className="text-sm text-muted-foreground">{wh.age}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<ResourceActionMenu
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Edit",
|
|
||||||
icon: Pencil,
|
|
||||||
onClick: () => openEdit(wh),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Delete",
|
|
||||||
icon: Trash2,
|
|
||||||
variant: "destructive",
|
|
||||||
onClick: () => setActiveModal({ type: "delete", wh }),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeModal?.type === "edit" && (
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen
|
|
||||||
clusterId={clusterId}
|
|
||||||
namespace=""
|
|
||||||
resourceType="validatingwebhookconfigurations"
|
|
||||||
resourceName={activeModal.wh.name}
|
|
||||||
initialYaml={activeModal.yaml}
|
|
||||||
onClose={() => { setActiveModal(null); onRefresh?.(); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeModal?.type === "delete" && (
|
|
||||||
<ConfirmDeleteDialog
|
|
||||||
open
|
|
||||||
onOpenChange={(o) => { if (!o) setActiveModal(null); }}
|
|
||||||
resourceType="ValidatingWebhookConfiguration"
|
|
||||||
resourceName={activeModal.wh.name}
|
|
||||||
isLoading={isDeleting}
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,229 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui";
|
|
||||||
import { AlertCircle, Loader2 } from "lucide-react";
|
|
||||||
import { listPodsCmd, getPodLogsCmd } from "@/lib/tauriCommands";
|
|
||||||
import type { PodInfo } from "@/lib/tauriCommands";
|
|
||||||
|
|
||||||
interface WorkloadLogsModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
workloadType: "deployment" | "statefulset" | "daemonset" | "job" | "cronjob" | "replicaset" | "replicationcontroller";
|
|
||||||
workloadName: string;
|
|
||||||
labels: Record<string, string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Placeholder for future label filtering - pods don't currently expose labels in PodInfo
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
function matchesPodLabels(_pod: PodInfo, _labels: Record<string, string>): boolean {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function WorkloadLogsModal({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
workloadType,
|
|
||||||
workloadName,
|
|
||||||
labels: _labels,
|
|
||||||
}: WorkloadLogsModalProps) {
|
|
||||||
const [pods, setPods] = useState<PodInfo[]>([]);
|
|
||||||
const [selectedPod, setSelectedPod] = useState<string>("");
|
|
||||||
const [selectedContainer, setSelectedContainer] = useState<string>("");
|
|
||||||
const [logs, setLogs] = useState<string>("");
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [tailLines, setTailLines] = useState<number>(100);
|
|
||||||
|
|
||||||
// Fetch pods matching the workload's label selector
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) return;
|
|
||||||
|
|
||||||
const fetchPods = async () => {
|
|
||||||
setIsLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const allPods = await listPodsCmd(clusterId, namespace);
|
|
||||||
|
|
||||||
// Match by name pattern - pod naming conventions:
|
|
||||||
// deployment: <name>-<hash>-<random>
|
|
||||||
// statefulset: <name>-<ordinal>
|
|
||||||
// daemonset: <name>-<random>
|
|
||||||
// job: <name>-<random>
|
|
||||||
// cronjob: <cronjob-name>-<timestamp>-<random>
|
|
||||||
const filteredPods = allPods.filter((pod) => {
|
|
||||||
const namePattern = new RegExp(`^${workloadName}-`);
|
|
||||||
return namePattern.test(pod.name);
|
|
||||||
});
|
|
||||||
|
|
||||||
setPods(filteredPods);
|
|
||||||
if (filteredPods.length > 0) {
|
|
||||||
setSelectedPod(filteredPods[0].name);
|
|
||||||
if (filteredPods[0].containers.length > 0) {
|
|
||||||
setSelectedContainer(filteredPods[0].containers[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchPods();
|
|
||||||
}, [open, clusterId, namespace, workloadName]);
|
|
||||||
|
|
||||||
// Fetch logs when pod/container selection changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedPod || !selectedContainer) {
|
|
||||||
setLogs("");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchLogs = async () => {
|
|
||||||
setIsLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const logResponse = await getPodLogsCmd(
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
selectedPod,
|
|
||||||
selectedContainer
|
|
||||||
);
|
|
||||||
// Apply tail lines filter
|
|
||||||
const lines = logResponse.logs.split("\n");
|
|
||||||
const tailedLogs = lines.slice(-tailLines).join("\n");
|
|
||||||
setLogs(tailedLogs);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
setLogs("");
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLogs();
|
|
||||||
}, [clusterId, namespace, selectedPod, selectedContainer, tailLines]);
|
|
||||||
|
|
||||||
const selectedPodData = pods.find((p) => p.name === selectedPod);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>
|
|
||||||
Logs: {workloadType} / {workloadName}
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="space-y-4 flex-1 flex flex-col overflow-hidden">
|
|
||||||
{/* Pod and Container Selectors */}
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="text-sm font-medium mb-2 block">Pod</label>
|
|
||||||
<Select value={selectedPod} onValueChange={setSelectedPod}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select pod" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{pods.length === 0 ? (
|
|
||||||
<SelectItem value="__none__">
|
|
||||||
No pods found
|
|
||||||
</SelectItem>
|
|
||||||
) : (
|
|
||||||
pods.map((pod) => (
|
|
||||||
<SelectItem key={pod.name} value={pod.name}>
|
|
||||||
{pod.name} ({pod.status})
|
|
||||||
</SelectItem>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="text-sm font-medium mb-2 block">Container</label>
|
|
||||||
{selectedPodData ? (
|
|
||||||
<Select
|
|
||||||
value={selectedContainer}
|
|
||||||
onValueChange={setSelectedContainer}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select container" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{selectedPodData.containers.map((container) => (
|
|
||||||
<SelectItem key={container} value={container}>
|
|
||||||
{container}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-muted px-3 py-2 text-sm text-muted-foreground">
|
|
||||||
Select pod first
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-32">
|
|
||||||
<label className="text-sm font-medium mb-2 block">Tail Lines</label>
|
|
||||||
<Select
|
|
||||||
value={String(tailLines)}
|
|
||||||
onValueChange={(v) => setTailLines(Number(v))}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="50">50</SelectItem>
|
|
||||||
<SelectItem value="100">100</SelectItem>
|
|
||||||
<SelectItem value="500">500</SelectItem>
|
|
||||||
<SelectItem value="1000">1000</SelectItem>
|
|
||||||
<SelectItem value="5000">5000</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Logs Display */}
|
|
||||||
<div className="flex-1 relative overflow-hidden rounded-md border bg-muted/20">
|
|
||||||
{isLoading && (
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
|
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="p-4 flex items-center gap-2 text-destructive">
|
|
||||||
<AlertCircle className="w-4 h-4" />
|
|
||||||
<span className="text-sm">{error}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!error && !isLoading && logs && (
|
|
||||||
<pre className="p-4 text-xs font-mono overflow-auto h-full whitespace-pre-wrap break-all">
|
|
||||||
{logs}
|
|
||||||
</pre>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!error && !isLoading && !logs && selectedPod && selectedContainer && (
|
|
||||||
<div className="p-4 text-sm text-muted-foreground text-center">
|
|
||||||
No logs available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!selectedPod && (
|
|
||||||
<div className="p-4 text-sm text-muted-foreground text-center">
|
|
||||||
Select a pod to view logs
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -24,21 +24,10 @@ export function YamlEditor({
|
|||||||
}: YamlEditorProps) {
|
}: YamlEditorProps) {
|
||||||
const [value, setValue] = React.useState(content);
|
const [value, setValue] = React.useState(content);
|
||||||
const [isLoading, setIsLoading] = React.useState(true);
|
const [isLoading, setIsLoading] = React.useState(true);
|
||||||
const [isMonacoReady, setIsMonacoReady] = React.useState(false);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// Only update value when Monaco is ready to prevent race condition
|
setValue(content);
|
||||||
if (isMonacoReady) {
|
}, [content]);
|
||||||
setValue(content);
|
|
||||||
}
|
|
||||||
}, [content, isMonacoReady]);
|
|
||||||
|
|
||||||
// Initialize value when Monaco mounts
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (isMonacoReady && content) {
|
|
||||||
setValue(content);
|
|
||||||
}
|
|
||||||
}, [isMonacoReady, content]);
|
|
||||||
|
|
||||||
const handleChange = (v: string | undefined) => {
|
const handleChange = (v: string | undefined) => {
|
||||||
const next = v ?? "";
|
const next = v ?? "";
|
||||||
@ -62,7 +51,7 @@ export function YamlEditor({
|
|||||||
>
|
>
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<div className="flex items-center justify-center h-full bg-[#1e1e1e]">
|
<div className="flex items-center justify-center h-full bg-[#1e1e1e]">
|
||||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" role="status" />
|
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<Editor
|
<Editor
|
||||||
@ -70,10 +59,7 @@ export function YamlEditor({
|
|||||||
theme="vs-dark"
|
theme="vs-dark"
|
||||||
value={value}
|
value={value}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
onMount={() => {
|
onMount={() => setIsLoading(false)}
|
||||||
setIsLoading(false);
|
|
||||||
setIsMonacoReady(true);
|
|
||||||
}}
|
|
||||||
options={{
|
options={{
|
||||||
minimap: { enabled: false },
|
minimap: { enabled: false },
|
||||||
scrollBeyondLastLine: false,
|
scrollBeyondLastLine: false,
|
||||||
|
|||||||
@ -12,7 +12,6 @@ export { NodeList } from "./NodeList";
|
|||||||
export { EventList } from "./EventList";
|
export { EventList } from "./EventList";
|
||||||
export { ConfigMapList } from "./ConfigMapList";
|
export { ConfigMapList } from "./ConfigMapList";
|
||||||
export { SecretList } from "./SecretList";
|
export { SecretList } from "./SecretList";
|
||||||
export { SecretDataModal } from "./SecretDataModal";
|
|
||||||
export { ReplicaSetList } from "./ReplicaSetList";
|
export { ReplicaSetList } from "./ReplicaSetList";
|
||||||
export { JobList } from "./JobList";
|
export { JobList } from "./JobList";
|
||||||
export { CronJobList } from "./CronJobList";
|
export { CronJobList } from "./CronJobList";
|
||||||
@ -62,6 +61,3 @@ export { EndpointSliceList } from "./EndpointSliceList";
|
|||||||
export { IngressClassList } from "./IngressClassList";
|
export { IngressClassList } from "./IngressClassList";
|
||||||
export { NamespaceList } from "./NamespaceList";
|
export { NamespaceList } from "./NamespaceList";
|
||||||
export { WorkloadOverview } from "./WorkloadOverview";
|
export { WorkloadOverview } from "./WorkloadOverview";
|
||||||
export { WorkloadLogsModal } from "./WorkloadLogsModal";
|
|
||||||
export { CrdList } from "./CrdList";
|
|
||||||
export { CustomResourceList } from "./CustomResourceList";
|
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { X } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui";
|
|
||||||
|
|
||||||
interface ResourceDetailsDrawerProps {
|
|
||||||
open: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
title: string;
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ResourceDetailsDrawer({
|
|
||||||
open,
|
|
||||||
onClose,
|
|
||||||
title,
|
|
||||||
children,
|
|
||||||
}: ResourceDetailsDrawerProps) {
|
|
||||||
if (!open) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Backdrop */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/50 z-40 animate-in fade-in"
|
|
||||||
onClick={onClose}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Drawer */}
|
|
||||||
<div
|
|
||||||
className="fixed right-0 top-0 bottom-0 w-full sm:w-[500px] md:w-[600px] lg:w-[700px] bg-background border-l shadow-lg z-50 overflow-hidden flex flex-col animate-in slide-in-from-right duration-300"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b bg-card">
|
|
||||||
<h2 className="text-xl font-semibold">{title}</h2>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onClose}
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="flex-1 overflow-y-auto p-6">{children}</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,246 +0,0 @@
|
|||||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
||||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
|
||||||
import { Download, Search, Square, Trash2, Play } from "lucide-react";
|
|
||||||
import { Button, Input } from "@/components/ui";
|
|
||||||
import { streamPodLogsCmd, stopLogStreamCmd } from "@/lib/tauriCommands";
|
|
||||||
|
|
||||||
export interface LogsTabData {
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
podName: string;
|
|
||||||
containers: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LogsTabProps {
|
|
||||||
data: LogsTabData;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MAX_LINES = 5000;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* In-dock pod log viewer. Mirrors the structure of LogStreamPanel but renders
|
|
||||||
* inline (no Dialog) and at the dock's available height.
|
|
||||||
*/
|
|
||||||
export function LogsTab({ data }: LogsTabProps) {
|
|
||||||
const { clusterId, namespace, podName, containers } = data;
|
|
||||||
|
|
||||||
const [selectedContainer, setSelectedContainer] = useState<string>(
|
|
||||||
containers[0] ?? ""
|
|
||||||
);
|
|
||||||
const [follow, setFollow] = useState(true);
|
|
||||||
const [timestamps, setTimestamps] = useState(false);
|
|
||||||
const [tailLines, setTailLines] = useState(100);
|
|
||||||
const [lines, setLines] = useState<string[]>([]);
|
|
||||||
const [streaming, setStreaming] = useState(false);
|
|
||||||
const [search, setSearch] = useState("");
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const streamIdRef = useRef<string | null>(null);
|
|
||||||
const unlistenRef = useRef<UnlistenFn | null>(null);
|
|
||||||
const bottomRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
const stopStream = useCallback(async () => {
|
|
||||||
if (unlistenRef.current) {
|
|
||||||
unlistenRef.current();
|
|
||||||
unlistenRef.current = null;
|
|
||||||
}
|
|
||||||
if (streamIdRef.current) {
|
|
||||||
try {
|
|
||||||
await stopLogStreamCmd(streamIdRef.current);
|
|
||||||
} catch {
|
|
||||||
// best-effort
|
|
||||||
}
|
|
||||||
streamIdRef.current = null;
|
|
||||||
}
|
|
||||||
setStreaming(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
void stopStream();
|
|
||||||
};
|
|
||||||
}, [stopStream]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (follow && streaming && bottomRef.current) {
|
|
||||||
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}
|
|
||||||
}, [lines, follow, streaming]);
|
|
||||||
|
|
||||||
const startStream = async () => {
|
|
||||||
if (streaming) return;
|
|
||||||
setError(null);
|
|
||||||
setLines([]);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const streamId = await streamPodLogsCmd({
|
|
||||||
cluster_id: clusterId,
|
|
||||||
namespace,
|
|
||||||
pod_name: podName,
|
|
||||||
container_name: selectedContainer,
|
|
||||||
follow,
|
|
||||||
timestamps,
|
|
||||||
tail_lines: tailLines,
|
|
||||||
});
|
|
||||||
|
|
||||||
streamIdRef.current = streamId;
|
|
||||||
|
|
||||||
const unlisten = await listen<{ stream_id: string; line: string }>(
|
|
||||||
"pod-log-line",
|
|
||||||
(event) => {
|
|
||||||
if (event.payload.stream_id !== streamId) return;
|
|
||||||
setLines((prev) => {
|
|
||||||
const next = [...prev, event.payload.line];
|
|
||||||
return next.length > MAX_LINES ? next.slice(next.length - MAX_LINES) : next;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
unlistenRef.current = unlisten;
|
|
||||||
setStreaming(true);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDownload = () => {
|
|
||||||
const content = lines.join("\n");
|
|
||||||
const blob = new Blob([content], { type: "text/plain" });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
a.download = `${podName}-${selectedContainer}-logs.txt`;
|
|
||||||
a.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClear = () => setLines([]);
|
|
||||||
|
|
||||||
const filteredLines =
|
|
||||||
search.trim() === "" ? lines : lines.filter((l) => l.includes(search));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-2 h-full p-3 min-h-0" data-testid="logs-tab">
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<select
|
|
||||||
aria-label="Container"
|
|
||||||
value={selectedContainer}
|
|
||||||
onChange={(e) => setSelectedContainer(e.target.value)}
|
|
||||||
disabled={streaming}
|
|
||||||
className="h-8 rounded-md border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{containers.map((c) => (
|
|
||||||
<option key={c} value={c}>
|
|
||||||
{c}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<label className="flex items-center gap-1 text-xs cursor-pointer select-none">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded border-input"
|
|
||||||
checked={follow}
|
|
||||||
disabled={streaming}
|
|
||||||
onChange={(e) => setFollow(e.target.checked)}
|
|
||||||
/>
|
|
||||||
Follow
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex items-center gap-1 text-xs cursor-pointer select-none">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded border-input"
|
|
||||||
checked={timestamps}
|
|
||||||
disabled={streaming}
|
|
||||||
onChange={(e) => setTimestamps(e.target.checked)}
|
|
||||||
/>
|
|
||||||
Timestamps
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1 text-xs">
|
|
||||||
<span className="text-muted-foreground whitespace-nowrap">Tail:</span>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={tailLines}
|
|
||||||
min={10}
|
|
||||||
max={10000}
|
|
||||||
disabled={streaming}
|
|
||||||
onChange={(e) =>
|
|
||||||
setTailLines(Math.min(10000, Math.max(10, Number(e.target.value))))
|
|
||||||
}
|
|
||||||
className="h-8 w-20 rounded-md border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1 ml-auto">
|
|
||||||
{!streaming ? (
|
|
||||||
<Button size="sm" onClick={() => void startStream()}>
|
|
||||||
<Play className="h-3.5 w-3.5 mr-1" />
|
|
||||||
Stream
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button size="sm" variant="destructive" onClick={() => void stopStream()}>
|
|
||||||
<Square className="h-3.5 w-3.5 mr-1" />
|
|
||||||
Stop
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleDownload}
|
|
||||||
disabled={lines.length === 0}
|
|
||||||
>
|
|
||||||
<Download className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={handleClear}
|
|
||||||
disabled={lines.length === 0}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-2 top-2 h-3.5 w-3.5 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="Filter log lines..."
|
|
||||||
value={search}
|
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
|
||||||
className="pl-7 h-8 text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 px-2 py-1 text-xs text-destructive">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto rounded-md border bg-slate-950 p-2 font-mono text-xs text-slate-200 min-h-0">
|
|
||||||
{filteredLines.length === 0 ? (
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
{streaming ? "Waiting for log data..." : "No logs to display. Press Stream to begin."}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{filteredLines.map((line, i) => (
|
|
||||||
<div key={i} className="whitespace-pre-wrap break-all leading-5">
|
|
||||||
{line}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div ref={bottomRef} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
{lines.length.toLocaleString()} line{lines.length !== 1 ? "s" : ""}
|
|
||||||
{search.trim() !== "" && ` — ${filteredLines.length.toLocaleString()} matching`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Terminal } from "@/components/Kubernetes/Terminal";
|
|
||||||
|
|
||||||
export interface TerminalTabData {
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
podName?: string;
|
|
||||||
containerName?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TerminalTabProps {
|
|
||||||
data: TerminalTabData;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* In-dock wrapper around the existing xterm-based Terminal component.
|
|
||||||
* Delegates session management to Terminal itself.
|
|
||||||
*/
|
|
||||||
export function TerminalTab({ data }: TerminalTabProps) {
|
|
||||||
return (
|
|
||||||
<div className="h-full w-full p-2" data-testid="terminal-tab">
|
|
||||||
<Terminal
|
|
||||||
clusterId={data.clusterId}
|
|
||||||
namespace={data.namespace}
|
|
||||||
podName={data.podName}
|
|
||||||
containerName={data.containerName}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { Loader2, Save, X } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui";
|
|
||||||
import { YamlEditor } from "@/components/Kubernetes/YamlEditor";
|
|
||||||
import { createResourceCmd, editResourceCmd } from "@/lib/tauriCommands";
|
|
||||||
import { BottomPanelTabType } from "@/stores/bottomPanelStore";
|
|
||||||
|
|
||||||
export interface YamlEditorTabData {
|
|
||||||
/** Type drives the submit behaviour */
|
|
||||||
mode:
|
|
||||||
| BottomPanelTabType.EDIT_RESOURCE
|
|
||||||
| BottomPanelTabType.CREATE_RESOURCE
|
|
||||||
| BottomPanelTabType.INSTALL_CHART
|
|
||||||
| BottomPanelTabType.UPGRADE_CHART;
|
|
||||||
clusterId: string;
|
|
||||||
namespace: string;
|
|
||||||
resourceType?: string;
|
|
||||||
resourceName?: string;
|
|
||||||
initialYaml?: string;
|
|
||||||
/** For helm flows: the chart name being installed/upgraded */
|
|
||||||
chartName?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface YamlEditorTabProps {
|
|
||||||
tabId: string;
|
|
||||||
data: YamlEditorTabData;
|
|
||||||
onClose?: (tabId: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function actionLabel(mode: YamlEditorTabData["mode"]): string {
|
|
||||||
switch (mode) {
|
|
||||||
case BottomPanelTabType.EDIT_RESOURCE:
|
|
||||||
return "Save";
|
|
||||||
case BottomPanelTabType.CREATE_RESOURCE:
|
|
||||||
return "Create";
|
|
||||||
case BottomPanelTabType.INSTALL_CHART:
|
|
||||||
return "Install";
|
|
||||||
case BottomPanelTabType.UPGRADE_CHART:
|
|
||||||
return "Upgrade";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function YamlEditorTab({ tabId, data, onClose }: YamlEditorTabProps) {
|
|
||||||
const [yaml, setYaml] = useState(data.initialYaml ?? "");
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [success, setSuccess] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setYaml(data.initialYaml ?? "");
|
|
||||||
}, [data.initialYaml]);
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setError(null);
|
|
||||||
setSuccess(null);
|
|
||||||
try {
|
|
||||||
switch (data.mode) {
|
|
||||||
case BottomPanelTabType.CREATE_RESOURCE:
|
|
||||||
await createResourceCmd(
|
|
||||||
data.clusterId,
|
|
||||||
data.namespace,
|
|
||||||
data.resourceType ?? "",
|
|
||||||
yaml
|
|
||||||
);
|
|
||||||
setSuccess("Resource created");
|
|
||||||
break;
|
|
||||||
case BottomPanelTabType.EDIT_RESOURCE:
|
|
||||||
await editResourceCmd(
|
|
||||||
data.clusterId,
|
|
||||||
data.namespace,
|
|
||||||
data.resourceType ?? "",
|
|
||||||
data.resourceName ?? "",
|
|
||||||
yaml
|
|
||||||
);
|
|
||||||
setSuccess("Resource updated");
|
|
||||||
break;
|
|
||||||
case BottomPanelTabType.INSTALL_CHART:
|
|
||||||
case BottomPanelTabType.UPGRADE_CHART:
|
|
||||||
// Helm flows are wired up to the existing helm modals; the YAML view
|
|
||||||
// here just lets the user prepare values.yaml. Submit is no-op until
|
|
||||||
// the corresponding tauri commands are added.
|
|
||||||
setSuccess(
|
|
||||||
data.mode === BottomPanelTabType.INSTALL_CHART
|
|
||||||
? "Helm install requires the install dialog to complete the flow."
|
|
||||||
: "Helm upgrade requires the upgrade dialog to complete the flow."
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const label = actionLabel(data.mode);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full p-3 gap-2 min-h-0" data-testid="yaml-editor-tab">
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
{data.resourceType && <span className="font-mono">{data.resourceType}</span>}
|
|
||||||
{data.resourceName && (
|
|
||||||
<>
|
|
||||||
{" / "}
|
|
||||||
<span className="font-mono font-medium">{data.resourceName}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{data.chartName && (
|
|
||||||
<span className="font-mono font-medium">{data.chartName}</span>
|
|
||||||
)}
|
|
||||||
{data.namespace && (
|
|
||||||
<span className="ml-2">ns: {data.namespace}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => onClose?.(tabId)}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
>
|
|
||||||
<X className="h-3.5 w-3.5 mr-1" />
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => void handleSubmit()} disabled={isSubmitting}>
|
|
||||||
{isSubmitting ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" />
|
|
||||||
Working...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Save className="h-3.5 w-3.5 mr-1" />
|
|
||||||
{label}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 px-2 py-1 text-xs text-destructive">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{success && (
|
|
||||||
<div className="rounded-md border border-green-500/30 bg-green-500/10 px-2 py-1 text-xs text-green-700 dark:text-green-400">
|
|
||||||
{success}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
<YamlEditor
|
|
||||||
height="100%"
|
|
||||||
showControls={false}
|
|
||||||
content={yaml}
|
|
||||||
onChange={setYaml}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
Button,
|
|
||||||
Checkbox,
|
|
||||||
} from "@/components/ui";
|
|
||||||
import { RotateCcw, Eye, EyeOff } from "lucide-react";
|
|
||||||
import type { UseColumnConfigReturn } from "@/hooks/useColumnConfig";
|
|
||||||
|
|
||||||
interface ColumnConfigModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
resourceType: string;
|
|
||||||
columnConfig: UseColumnConfigReturn;
|
|
||||||
columnLabels: Record<string, string>; // key -> display label
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ColumnConfigModal({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
resourceType,
|
|
||||||
columnConfig,
|
|
||||||
columnLabels,
|
|
||||||
}: ColumnConfigModalProps) {
|
|
||||||
const { isColumnVisible, toggleColumn, resetToDefaults, showAllColumns, hideAllColumns } =
|
|
||||||
columnConfig;
|
|
||||||
|
|
||||||
const columnKeys = Object.keys(columnLabels);
|
|
||||||
const visibleCount = columnKeys.filter((key) => isColumnVisible(key)).length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Configure {resourceType} Columns</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
Choose which columns to display in the table. Changes are saved automatically.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="py-4">
|
|
||||||
<div className="flex items-center justify-between mb-4 pb-3 border-b">
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{visibleCount} of {columnKeys.length} columns visible
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={showAllColumns}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<Eye className="h-3 w-3" />
|
|
||||||
Show All
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={hideAllColumns}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<EyeOff className="h-3 w-3" />
|
|
||||||
Hide All
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={resetToDefaults}
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<RotateCcw className="h-3 w-3" />
|
|
||||||
Reset
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{columnKeys.map((key) => (
|
|
||||||
<label
|
|
||||||
key={key}
|
|
||||||
className="flex items-center gap-3 px-3 py-2 rounded hover:bg-accent cursor-pointer transition-colors"
|
|
||||||
>
|
|
||||||
<Checkbox
|
|
||||||
checked={isColumnVisible(key)}
|
|
||||||
onCheckedChange={() => toggleColumn(key)}
|
|
||||||
/>
|
|
||||||
<span className="flex-1 text-sm">{columnLabels[key]}</span>
|
|
||||||
{key === "name" && (
|
|
||||||
<span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">
|
|
||||||
Required
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button onClick={() => onOpenChange(false)}>Done</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { FileText, Terminal, Play } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui";
|
|
||||||
|
|
||||||
export interface QuickAction {
|
|
||||||
type: "logs" | "shell" | "exec" | "custom";
|
|
||||||
icon?: React.ElementType;
|
|
||||||
tooltip: string;
|
|
||||||
onClick: () => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
variant?: "default" | "destructive" | "outline" | "ghost";
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QuickActionColumnProps {
|
|
||||||
actions: QuickAction[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEFAULT_ICONS: Record<string, React.ElementType> = {
|
|
||||||
logs: FileText,
|
|
||||||
shell: Terminal,
|
|
||||||
exec: Play,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function QuickActionColumn({ actions }: QuickActionColumnProps) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{actions.map((action, index) => {
|
|
||||||
const Icon = action.icon || DEFAULT_ICONS[action.type];
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
key={index}
|
|
||||||
variant={action.variant || "ghost"}
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
action.onClick();
|
|
||||||
}}
|
|
||||||
disabled={action.disabled}
|
|
||||||
title={action.tooltip}
|
|
||||||
className="h-7 w-7 p-0"
|
|
||||||
>
|
|
||||||
{Icon && <Icon className="h-3.5 w-3.5" />}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -305,7 +305,7 @@ export function SelectContent({
|
|||||||
<div
|
<div
|
||||||
ref={contentRef}
|
ref={contentRef}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute z-50 max-h-60 w-full overflow-auto rounded-md border bg-card text-foreground p-1 shadow-md",
|
"absolute z-50 max-h-60 w-full overflow-auto rounded-md border bg-card p-1 shadow-md",
|
||||||
flipUpward ? "bottom-full mb-1" : "top-full mt-1",
|
flipUpward ? "bottom-full mb-1" : "top-full mt-1",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
@ -745,36 +745,4 @@ export function AlertDescription({ className, children, ...props }: React.HTMLAt
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Checkbox ──────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
||||||
checked?: boolean;
|
|
||||||
onCheckedChange?: (checked: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
|
||||||
({ className, checked, onCheckedChange, onChange, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
ref={ref}
|
|
||||||
checked={checked}
|
|
||||||
onChange={(e) => {
|
|
||||||
onChange?.(e);
|
|
||||||
onCheckedChange?.(e.target.checked);
|
|
||||||
}}
|
|
||||||
className={cn(
|
|
||||||
"h-4 w-4 rounded border border-input bg-background ring-offset-background",
|
|
||||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
||||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
||||||
"cursor-pointer",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
Checkbox.displayName = "Checkbox";
|
|
||||||
|
|
||||||
export { cn };
|
export { cn };
|
||||||
|
|||||||
@ -1,368 +0,0 @@
|
|||||||
import type { ColumnConfig } from "@/hooks/useColumnConfig";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default column visibility configuration for each resource type
|
|
||||||
* Based on FreeLens patterns: commonly used columns visible by default,
|
|
||||||
* detailed/technical columns hidden by default
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const DEFAULT_COLUMNS: Record<string, ColumnConfig> = {
|
|
||||||
// Workloads
|
|
||||||
pods: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
ready: true,
|
|
||||||
status: true,
|
|
||||||
restarts: true,
|
|
||||||
age: true,
|
|
||||||
ip: false, // Hidden by default - too detailed
|
|
||||||
node: false, // Hidden by default - too detailed
|
|
||||||
qos: false, // Hidden by default - rarely needed
|
|
||||||
cpu: false, // Hidden by default - metrics optional
|
|
||||||
memory: false, // Hidden by default - metrics optional
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
deployments: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
ready: true,
|
|
||||||
upToDate: true,
|
|
||||||
available: true,
|
|
||||||
age: true,
|
|
||||||
conditions: false, // Hidden by default - verbose
|
|
||||||
images: false, // Hidden by default - too detailed
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
statefulsets: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
ready: true,
|
|
||||||
replicas: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
daemonsets: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
desired: true,
|
|
||||||
current: true,
|
|
||||||
ready: true,
|
|
||||||
upToDate: true,
|
|
||||||
available: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
jobs: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
completions: true,
|
|
||||||
duration: true,
|
|
||||||
age: true,
|
|
||||||
labels: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
cronjobs: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
schedule: true,
|
|
||||||
active: true,
|
|
||||||
lastSchedule: true,
|
|
||||||
age: true,
|
|
||||||
timezone: false, // Hidden by default - rarely set
|
|
||||||
labels: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
replicasets: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
desired: true,
|
|
||||||
current: true,
|
|
||||||
ready: true,
|
|
||||||
age: true,
|
|
||||||
labels: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
replicationcontrollers: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
desired: true,
|
|
||||||
current: true,
|
|
||||||
ready: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Network
|
|
||||||
services: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
type: true,
|
|
||||||
clusterIP: true,
|
|
||||||
externalIP: true,
|
|
||||||
ports: true,
|
|
||||||
age: true,
|
|
||||||
selector: false, // Hidden by default - too detailed
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
ingresses: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
hosts: true,
|
|
||||||
addresses: true,
|
|
||||||
ports: true,
|
|
||||||
age: true,
|
|
||||||
rules: false, // Hidden by default - verbose
|
|
||||||
tls: false, // Hidden by default - technical
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
networkpolicies: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
podSelector: true,
|
|
||||||
age: true,
|
|
||||||
policyTypes: false, // Hidden by default - technical
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
endpoints: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
endpoints: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
endpointslices: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
addressType: true,
|
|
||||||
endpoints: true,
|
|
||||||
age: true,
|
|
||||||
ports: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
ingressclasses: {
|
|
||||||
name: true,
|
|
||||||
controller: true,
|
|
||||||
age: true,
|
|
||||||
parameters: false, // Hidden by default - rarely used
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Config
|
|
||||||
configmaps: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
data: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
secrets: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
type: true,
|
|
||||||
data: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
resourcequotas: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
age: true,
|
|
||||||
scopes: false, // Hidden by default - technical
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
limitranges: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalpodautoscalers: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
reference: true,
|
|
||||||
minPods: true,
|
|
||||||
maxPods: true,
|
|
||||||
replicas: true,
|
|
||||||
age: true,
|
|
||||||
targets: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
poddisruptionbudgets: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
minAvailable: true,
|
|
||||||
maxUnavailable: true,
|
|
||||||
age: true,
|
|
||||||
allowedDisruptions: false, // Hidden by default - calculated
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
priorityclasses: {
|
|
||||||
name: true,
|
|
||||||
value: true,
|
|
||||||
globalDefault: true,
|
|
||||||
age: true,
|
|
||||||
description: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
runtimeclasses: {
|
|
||||||
name: true,
|
|
||||||
handler: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
leases: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
holder: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
mutatingwebhookconfigurations: {
|
|
||||||
name: true,
|
|
||||||
webhooks: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
validatingwebhookconfigurations: {
|
|
||||||
name: true,
|
|
||||||
webhooks: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Storage
|
|
||||||
persistentvolumes: {
|
|
||||||
name: true,
|
|
||||||
capacity: true,
|
|
||||||
accessModes: true,
|
|
||||||
reclaimPolicy: true,
|
|
||||||
status: true,
|
|
||||||
claim: true,
|
|
||||||
storageClass: true,
|
|
||||||
age: true,
|
|
||||||
volumeMode: false, // Hidden by default - rarely changed
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
persistentvolumeclaims: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
status: true,
|
|
||||||
volume: true,
|
|
||||||
capacity: true,
|
|
||||||
accessModes: true,
|
|
||||||
storageClass: true,
|
|
||||||
age: true,
|
|
||||||
volumeMode: false, // Hidden by default - rarely changed
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
storageclasses: {
|
|
||||||
name: true,
|
|
||||||
provisioner: true,
|
|
||||||
reclaimPolicy: true,
|
|
||||||
volumeBindingMode: true,
|
|
||||||
age: true,
|
|
||||||
allowVolumeExpansion: false, // Hidden by default - technical
|
|
||||||
parameters: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
// RBAC
|
|
||||||
serviceaccounts: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
secrets: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
roles: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
age: true,
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
clusterroles: {
|
|
||||||
name: true,
|
|
||||||
age: true,
|
|
||||||
aggregationRule: false, // Hidden by default - technical
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
rolebindings: {
|
|
||||||
name: true,
|
|
||||||
namespace: true,
|
|
||||||
role: true,
|
|
||||||
age: true,
|
|
||||||
subjects: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
clusterrolebindings: {
|
|
||||||
name: true,
|
|
||||||
role: true,
|
|
||||||
age: true,
|
|
||||||
subjects: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Cluster
|
|
||||||
nodes: {
|
|
||||||
name: true,
|
|
||||||
status: true,
|
|
||||||
roles: true,
|
|
||||||
age: true,
|
|
||||||
version: true,
|
|
||||||
internalIP: false, // Hidden by default - technical
|
|
||||||
externalIP: false, // Hidden by default - technical
|
|
||||||
osImage: false, // Hidden by default - verbose
|
|
||||||
kernelVersion: false, // Hidden by default - verbose
|
|
||||||
containerRuntime: false, // Hidden by default - technical
|
|
||||||
cpu: false, // Hidden by default - metrics optional
|
|
||||||
memory: false, // Hidden by default - metrics optional
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
namespaces: {
|
|
||||||
name: true,
|
|
||||||
status: true,
|
|
||||||
age: true,
|
|
||||||
labels: false, // Hidden by default - verbose
|
|
||||||
actions: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
events: {
|
|
||||||
namespace: true,
|
|
||||||
lastSeen: true,
|
|
||||||
type: true,
|
|
||||||
reason: true,
|
|
||||||
object: true,
|
|
||||||
message: true,
|
|
||||||
source: false, // Hidden by default - verbose
|
|
||||||
count: false, // Hidden by default - technical
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
|
|
||||||
export interface ColumnConfig {
|
|
||||||
[columnKey: string]: boolean; // true = visible, false = hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UseColumnConfigReturn {
|
|
||||||
columnConfig: ColumnConfig;
|
|
||||||
isColumnVisible: (columnKey: string) => boolean;
|
|
||||||
toggleColumn: (columnKey: string) => void;
|
|
||||||
resetToDefaults: () => void;
|
|
||||||
showAllColumns: () => void;
|
|
||||||
hideAllColumns: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Hook for managing configurable table columns with localStorage persistence
|
|
||||||
* @param resourceType - Unique identifier for the resource (e.g., "pods", "deployments")
|
|
||||||
* @param defaultConfig - Default column visibility configuration
|
|
||||||
*/
|
|
||||||
export function useColumnConfig(
|
|
||||||
resourceType: string,
|
|
||||||
defaultConfig: ColumnConfig
|
|
||||||
): UseColumnConfigReturn {
|
|
||||||
const storageKey = `column-config-${resourceType}`;
|
|
||||||
|
|
||||||
const [columnConfig, setColumnConfig] = useState<ColumnConfig>(() => {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem(storageKey);
|
|
||||||
if (stored) {
|
|
||||||
return { ...defaultConfig, ...JSON.parse(stored) };
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to load column config for ${resourceType}:`, error);
|
|
||||||
}
|
|
||||||
return defaultConfig;
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(storageKey, JSON.stringify(columnConfig));
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to save column config for ${resourceType}:`, error);
|
|
||||||
}
|
|
||||||
}, [columnConfig, storageKey, resourceType]);
|
|
||||||
|
|
||||||
const isColumnVisible = (columnKey: string): boolean => {
|
|
||||||
return columnConfig[columnKey] !== false; // Default to visible if not specified
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleColumn = (columnKey: string) => {
|
|
||||||
setColumnConfig((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[columnKey]: !prev[columnKey],
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetToDefaults = () => {
|
|
||||||
setColumnConfig(defaultConfig);
|
|
||||||
};
|
|
||||||
|
|
||||||
const showAllColumns = () => {
|
|
||||||
const allVisible = Object.keys(columnConfig).reduce(
|
|
||||||
(acc, key) => ({ ...acc, [key]: true }),
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
setColumnConfig(allVisible);
|
|
||||||
};
|
|
||||||
|
|
||||||
const hideAllColumns = () => {
|
|
||||||
const allHidden = Object.keys(columnConfig).reduce(
|
|
||||||
(acc, key) => ({ ...acc, [key]: false }),
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
setColumnConfig(allHidden);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
columnConfig,
|
|
||||||
isColumnVisible,
|
|
||||||
toggleColumn,
|
|
||||||
resetToDefaults,
|
|
||||||
showAllColumns,
|
|
||||||
hideAllColumns,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
import { describe, it, expect, beforeEach, afterEach } from "vitest";
|
|
||||||
import { renderHook, act } from "@testing-library/react";
|
|
||||||
import { useFavorites } from "./useFavorites";
|
|
||||||
|
|
||||||
describe("useFavorites", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
localStorage.clear();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
localStorage.clear();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("initializes with empty favorites", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
expect(result.current.favorites).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("toggles favorite on/off", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
const resource = {
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
};
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite(resource);
|
|
||||||
});
|
|
||||||
expect(result.current.isFavorite("pod-1")).toBe(true);
|
|
||||||
expect(result.current.favorites).toHaveLength(1);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite(resource);
|
|
||||||
});
|
|
||||||
expect(result.current.isFavorite("pod-1")).toBe(false);
|
|
||||||
expect(result.current.favorites).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("persists favorites to localStorage", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
const resource = {
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
};
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite(resource);
|
|
||||||
});
|
|
||||||
|
|
||||||
const stored = localStorage.getItem("tftsr-favorites");
|
|
||||||
expect(stored).toBeTruthy();
|
|
||||||
const parsed = JSON.parse(stored!);
|
|
||||||
expect(parsed).toHaveLength(1);
|
|
||||||
expect(parsed[0].id).toBe("pod-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("loads favorites from localStorage on init", () => {
|
|
||||||
const favorites = [
|
|
||||||
{
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
timestamp: Date.now(),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
localStorage.setItem("tftsr-favorites", JSON.stringify(favorites));
|
|
||||||
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
expect(result.current.favorites).toHaveLength(1);
|
|
||||||
expect(result.current.isFavorite("pod-1")).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("filters favorites by type", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "svc-1",
|
|
||||||
type: "service",
|
|
||||||
name: "test-service",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const pods = result.current.getFavoritesByType("pod");
|
|
||||||
expect(pods).toHaveLength(1);
|
|
||||||
expect(pods[0].id).toBe("pod-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("filters favorites by cluster", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-2",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod-2",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-2",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const cluster1Favs = result.current.getFavoritesByCluster("cluster-1");
|
|
||||||
expect(cluster1Favs).toHaveLength(1);
|
|
||||||
expect(cluster1Favs[0].id).toBe("pod-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("removes favorite by id", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
expect(result.current.isFavorite("pod-1")).toBe(true);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.removeFavorite("pod-1");
|
|
||||||
});
|
|
||||||
expect(result.current.isFavorite("pod-1")).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("clears all favorites", () => {
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
act(() => {
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-1",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
result.current.toggleFavorite({
|
|
||||||
id: "pod-2",
|
|
||||||
type: "pod",
|
|
||||||
name: "test-pod-2",
|
|
||||||
namespace: "default",
|
|
||||||
clusterId: "cluster-1",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
expect(result.current.favorites).toHaveLength(2);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.clearFavorites();
|
|
||||||
});
|
|
||||||
expect(result.current.favorites).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles corrupted localStorage gracefully", () => {
|
|
||||||
localStorage.setItem("tftsr-favorites", "invalid json{");
|
|
||||||
const { result } = renderHook(() => useFavorites());
|
|
||||||
expect(result.current.favorites).toEqual([]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
import { useState, useEffect, useCallback } from "react";
|
|
||||||
|
|
||||||
interface FavoriteResource {
|
|
||||||
id: string;
|
|
||||||
type: string;
|
|
||||||
name: string;
|
|
||||||
namespace?: string;
|
|
||||||
clusterId: string;
|
|
||||||
timestamp: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const FAVORITES_KEY = "tftsr-favorites";
|
|
||||||
|
|
||||||
function loadFavorites(): FavoriteResource[] {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem(FAVORITES_KEY);
|
|
||||||
return stored ? JSON.parse(stored) : [];
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to load favorites:", err);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveFavorites(favorites: FavoriteResource[]): void {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to save favorites:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useFavorites() {
|
|
||||||
const [favorites, setFavorites] = useState<FavoriteResource[]>(loadFavorites);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
saveFavorites(favorites);
|
|
||||||
}, [favorites]);
|
|
||||||
|
|
||||||
const isFavorite = useCallback(
|
|
||||||
(resourceId: string): boolean => {
|
|
||||||
return favorites.some((fav) => fav.id === resourceId);
|
|
||||||
},
|
|
||||||
[favorites]
|
|
||||||
);
|
|
||||||
|
|
||||||
const toggleFavorite = useCallback(
|
|
||||||
(resource: Omit<FavoriteResource, "timestamp">): void => {
|
|
||||||
setFavorites((prev) => {
|
|
||||||
const exists = prev.find((fav) => fav.id === resource.id);
|
|
||||||
if (exists) {
|
|
||||||
return prev.filter((fav) => fav.id !== resource.id);
|
|
||||||
}
|
|
||||||
return [...prev, { ...resource, timestamp: Date.now() }];
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const removeFavorite = useCallback((resourceId: string): void => {
|
|
||||||
setFavorites((prev) => prev.filter((fav) => fav.id !== resourceId));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const clearFavorites = useCallback((): void => {
|
|
||||||
setFavorites([]);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getFavoritesByType = useCallback(
|
|
||||||
(type: string): FavoriteResource[] => {
|
|
||||||
return favorites.filter((fav) => fav.type === type);
|
|
||||||
},
|
|
||||||
[favorites]
|
|
||||||
);
|
|
||||||
|
|
||||||
const getFavoritesByCluster = useCallback(
|
|
||||||
(clusterId: string): FavoriteResource[] => {
|
|
||||||
return favorites.filter((fav) => fav.clusterId === clusterId);
|
|
||||||
},
|
|
||||||
[favorites]
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
favorites,
|
|
||||||
isFavorite,
|
|
||||||
toggleFavorite,
|
|
||||||
removeFavorite,
|
|
||||||
clearFavorites,
|
|
||||||
getFavoritesByType,
|
|
||||||
getFavoritesByCluster,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,209 +0,0 @@
|
|||||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
|
||||||
import { renderHook } from "@testing-library/react";
|
|
||||||
import { useKeyboardShortcuts } from "./useKeyboardShortcuts";
|
|
||||||
|
|
||||||
describe("useKeyboardShortcuts", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.restoreAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("triggers callback on matching shortcut", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not trigger on non-matching shortcut", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "j", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("respects modifier key requirements", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
shift: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
// Without shift
|
|
||||||
let event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
expect(callback).not.toHaveBeenCalled();
|
|
||||||
|
|
||||||
// With shift
|
|
||||||
event = new KeyboardEvent("keydown", {
|
|
||||||
key: "k",
|
|
||||||
ctrlKey: true,
|
|
||||||
shiftKey: true,
|
|
||||||
});
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
expect(callback).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles alt modifier", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
alt: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", altKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("skips disabled shortcuts", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles multiple shortcuts", () => {
|
|
||||||
const callback1 = vi.fn();
|
|
||||||
const callback2 = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback: callback1,
|
|
||||||
description: "Shortcut 1",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "r",
|
|
||||||
ctrl: true,
|
|
||||||
callback: callback2,
|
|
||||||
description: "Shortcut 2",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
let event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
expect(callback1).toHaveBeenCalledTimes(1);
|
|
||||||
expect(callback2).not.toHaveBeenCalled();
|
|
||||||
|
|
||||||
event = new KeyboardEvent("keydown", { key: "r", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
expect(callback2).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("prevents default on matched shortcuts", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
const preventDefaultSpy = vi.spyOn(event, "preventDefault");
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(preventDefaultSpy).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles meta key as ctrl on macOS", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", metaKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("cleans up event listener on unmount", () => {
|
|
||||||
const callback = vi.fn();
|
|
||||||
const { unmount } = renderHook(() =>
|
|
||||||
useKeyboardShortcuts([
|
|
||||||
{
|
|
||||||
key: "k",
|
|
||||||
ctrl: true,
|
|
||||||
callback,
|
|
||||||
description: "Test shortcut",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
unmount();
|
|
||||||
|
|
||||||
const event = new KeyboardEvent("keydown", { key: "k", ctrlKey: true });
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
|
|
||||||
expect(callback).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { useEffect, useCallback, useRef } from "react";
|
|
||||||
|
|
||||||
export interface KeyboardShortcut {
|
|
||||||
key: string;
|
|
||||||
ctrl?: boolean;
|
|
||||||
alt?: boolean;
|
|
||||||
shift?: boolean;
|
|
||||||
meta?: boolean;
|
|
||||||
callback: () => void;
|
|
||||||
description: string;
|
|
||||||
enabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]): void {
|
|
||||||
const shortcutsRef = useRef(shortcuts);
|
|
||||||
shortcutsRef.current = shortcuts;
|
|
||||||
|
|
||||||
const handleKeyDown = useCallback((event: KeyboardEvent) => {
|
|
||||||
for (const shortcut of shortcutsRef.current) {
|
|
||||||
if (shortcut.enabled === false) continue;
|
|
||||||
|
|
||||||
const ctrlMatch = shortcut.ctrl ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey;
|
|
||||||
const altMatch = shortcut.alt ? event.altKey : !event.altKey;
|
|
||||||
const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
|
|
||||||
const metaMatch = shortcut.meta ? event.metaKey : !event.metaKey;
|
|
||||||
|
|
||||||
if (
|
|
||||||
event.key.toLowerCase() === shortcut.key.toLowerCase() &&
|
|
||||||
ctrlMatch &&
|
|
||||||
altMatch &&
|
|
||||||
shiftMatch &&
|
|
||||||
metaMatch
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
|
||||||
shortcut.callback();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.addEventListener("keydown", handleKeyDown);
|
|
||||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
||||||
}, [handleKeyDown]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const GLOBAL_SHORTCUTS = {
|
|
||||||
COMMAND_PALETTE: { key: "k", ctrl: true, description: "Open command palette" },
|
|
||||||
REFRESH: { key: "r", ctrl: true, description: "Refresh current view" },
|
|
||||||
SEARCH: { key: "f", ctrl: true, description: "Focus search" },
|
|
||||||
HELP: { key: "?", shift: true, description: "Show keyboard shortcuts" },
|
|
||||||
ESCAPE: { key: "Escape", description: "Close modal/dialog" },
|
|
||||||
NAVIGATE_UP: { key: "ArrowUp", ctrl: true, description: "Navigate up" },
|
|
||||||
NAVIGATE_DOWN: { key: "ArrowDown", ctrl: true, description: "Navigate down" },
|
|
||||||
} as const;
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { useEffect, useState, RefObject } from "react";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Smart positioning hook that determines if a dropdown/menu should flip upward
|
|
||||||
* based on available viewport space below the element.
|
|
||||||
*
|
|
||||||
* @param open - Whether the menu is currently open
|
|
||||||
* @param contentRef - Ref to the dropdown content element
|
|
||||||
* @returns Whether the menu should flip upward (bottom-full) or stay downward (top-full)
|
|
||||||
*/
|
|
||||||
export function useSmartPosition(
|
|
||||||
open: boolean,
|
|
||||||
contentRef: RefObject<HTMLElement | null>
|
|
||||||
): boolean {
|
|
||||||
const [flipUpward, setFlipUpward] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open || !contentRef.current) return;
|
|
||||||
|
|
||||||
const rect = contentRef.current.getBoundingClientRect();
|
|
||||||
const viewportHeight = window.innerHeight;
|
|
||||||
const spaceBelow = viewportHeight - rect.bottom;
|
|
||||||
|
|
||||||
// If dropdown extends below viewport (less than 20px space), flip upward
|
|
||||||
if (spaceBelow < 20) {
|
|
||||||
setFlipUpward(true);
|
|
||||||
} else {
|
|
||||||
setFlipUpward(false);
|
|
||||||
}
|
|
||||||
}, [open, contentRef]);
|
|
||||||
|
|
||||||
return flipUpward;
|
|
||||||
}
|
|
||||||
@ -80,12 +80,8 @@ export async function subscribeToK8sEvents(
|
|||||||
eventBus.on(`k8s:${clusterId}:${namespace}:${resourceType}`, handler);
|
eventBus.on(`k8s:${clusterId}:${namespace}:${resourceType}`, handler);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
// Synchronously remove from eventBus to prevent further callbacks
|
|
||||||
eventBus.off(`k8s:${clusterId}:${namespace}:${resourceType}`, handler);
|
eventBus.off(`k8s:${clusterId}:${namespace}:${resourceType}`, handler);
|
||||||
// Fire-and-forget backend unsubscribe with error handling
|
invoke<void>("unsubscribe_from_k8s_events", { unsubscribeId });
|
||||||
invoke<void>("unsubscribe_from_k8s_events", { unsubscribeId }).catch((err) => {
|
|
||||||
console.error("Failed to unsubscribe from backend:", err);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to subscribe to K8s events:", error);
|
console.error("Failed to subscribe to K8s events:", error);
|
||||||
@ -109,12 +105,8 @@ export async function subscribeToAllEvents(
|
|||||||
eventBus.on(`k8s:${clusterId}:all`, handler);
|
eventBus.on(`k8s:${clusterId}:all`, handler);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
// Synchronously remove from eventBus to prevent further callbacks
|
|
||||||
eventBus.off(`k8s:${clusterId}:all`, handler);
|
eventBus.off(`k8s:${clusterId}:all`, handler);
|
||||||
// Fire-and-forget backend unsubscribe with error handling
|
invoke<void>("unsubscribe_from_k8s_events", { unsubscribeId });
|
||||||
invoke<void>("unsubscribe_from_k8s_events", { unsubscribeId }).catch((err) => {
|
|
||||||
console.error("Failed to unsubscribe from backend:", err);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to subscribe to all K8s events:", error);
|
console.error("Failed to subscribe to all K8s events:", error);
|
||||||
|
|||||||
@ -800,9 +800,6 @@ export interface PodInfo {
|
|||||||
ready: string;
|
ready: string;
|
||||||
age: string;
|
age: string;
|
||||||
containers: string[];
|
containers: string[];
|
||||||
restarts?: number;
|
|
||||||
ip?: string;
|
|
||||||
node?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ClusterConnectionState {
|
export interface ClusterConnectionState {
|
||||||
@ -1347,28 +1344,11 @@ export interface HelmRelease {
|
|||||||
|
|
||||||
// ─── Custom Resource / CRD Types ─────────────────────────────────────────────
|
// ─── Custom Resource / CRD Types ─────────────────────────────────────────────
|
||||||
|
|
||||||
export interface PrinterColumn {
|
|
||||||
name: string;
|
|
||||||
json_path: string;
|
|
||||||
type: string;
|
|
||||||
description?: string;
|
|
||||||
priority: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CrdVersion {
|
|
||||||
name: string;
|
|
||||||
served: boolean;
|
|
||||||
storage: boolean;
|
|
||||||
printer_columns: PrinterColumn[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CrdInfo {
|
export interface CrdInfo {
|
||||||
name: string;
|
name: string;
|
||||||
group: string;
|
group: string;
|
||||||
version: string;
|
version: string;
|
||||||
versions: CrdVersion[];
|
|
||||||
kind: string;
|
kind: string;
|
||||||
plural: string;
|
|
||||||
scope: string;
|
scope: string;
|
||||||
age: string;
|
age: string;
|
||||||
}
|
}
|
||||||
@ -1377,7 +1357,6 @@ export interface CustomResourceInfo {
|
|||||||
name: string;
|
name: string;
|
||||||
namespace: string;
|
namespace: string;
|
||||||
age: string;
|
age: string;
|
||||||
additional_columns: Record<string, string>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Resource Actions ─────────────────────────────────────────────────────────
|
// ─── Resource Actions ─────────────────────────────────────────────────────────
|
||||||
@ -1513,53 +1492,3 @@ export const listCrdsCmd = (clusterId: string) =>
|
|||||||
|
|
||||||
export const listCustomResourcesCmd = (clusterId: string, group: string, version: string, resource: string, namespace: string) =>
|
export const listCustomResourcesCmd = (clusterId: string, group: string, version: string, resource: string, namespace: string) =>
|
||||||
invoke<CustomResourceInfo[]>("list_custom_resources", { clusterId, group, version, resource, namespace });
|
invoke<CustomResourceInfo[]>("list_custom_resources", { clusterId, group, version, resource, namespace });
|
||||||
|
|
||||||
// ─── PTY Terminal Commands ────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export interface PtySessionInfo {
|
|
||||||
session_id: string;
|
|
||||||
cluster_id: string;
|
|
||||||
namespace: string;
|
|
||||||
pod_name: string;
|
|
||||||
container_name: string | null;
|
|
||||||
session_type: "exec" | "attach";
|
|
||||||
}
|
|
||||||
|
|
||||||
export const startPtyExecSessionCmd = (
|
|
||||||
clusterId: string,
|
|
||||||
namespace: string,
|
|
||||||
podName: string,
|
|
||||||
containerName: string | null,
|
|
||||||
shell: string
|
|
||||||
) =>
|
|
||||||
invoke<string>("start_pty_exec_session", {
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
podName,
|
|
||||||
containerName,
|
|
||||||
shell,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const startPtyAttachSessionCmd = (
|
|
||||||
clusterId: string,
|
|
||||||
namespace: string,
|
|
||||||
podName: string,
|
|
||||||
containerName: string | null
|
|
||||||
) =>
|
|
||||||
invoke<string>("start_pty_attach_session", {
|
|
||||||
clusterId,
|
|
||||||
namespace,
|
|
||||||
podName,
|
|
||||||
containerName,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const sendPtyStdinCmd = (sessionId: string, data: string) =>
|
|
||||||
invoke<void>("send_pty_stdin", { sessionId, data });
|
|
||||||
|
|
||||||
export const resizePtySessionCmd = (sessionId: string, rows: number, cols: number) =>
|
|
||||||
invoke<void>("resize_pty_session", { sessionId, rows, cols });
|
|
||||||
|
|
||||||
export const terminatePtySessionCmd = (sessionId: string) =>
|
|
||||||
invoke<void>("terminate_pty_session", { sessionId });
|
|
||||||
|
|
||||||
export const listPtySessionsCmd = () => invoke<PtySessionInfo[]>("list_pty_sessions", {});
|
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
import { type ClassValue, clsx } from "clsx";
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return clsx(inputs);
|
|
||||||
}
|
|
||||||
@ -15,7 +15,6 @@ import {
|
|||||||
Bell,
|
Bell,
|
||||||
Puzzle,
|
Puzzle,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { ErrorBoundary } from "@/components/ErrorBoundary";
|
|
||||||
import { useKubernetesStore } from "@/stores/kubernetesStore";
|
import { useKubernetesStore } from "@/stores/kubernetesStore";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@ -71,9 +70,7 @@ import {
|
|||||||
IngressClassList,
|
IngressClassList,
|
||||||
NamespaceList,
|
NamespaceList,
|
||||||
WorkloadOverview,
|
WorkloadOverview,
|
||||||
CrdList,
|
|
||||||
} from "@/components/Kubernetes";
|
} from "@/components/Kubernetes";
|
||||||
import { BottomPanel } from "@/components/BottomPanel";
|
|
||||||
import type {
|
import type {
|
||||||
KubeconfigInfo,
|
KubeconfigInfo,
|
||||||
NamespaceInfo,
|
NamespaceInfo,
|
||||||
@ -732,11 +729,6 @@ export function KubernetesPage() {
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
// Reset resources when activeSection changes to prevent stale data accumulation
|
|
||||||
useEffect(() => {
|
|
||||||
setResources(EMPTY_RESOURCES);
|
|
||||||
}, [activeSection]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!selectedClusterId) return;
|
if (!selectedClusterId) return;
|
||||||
loadResourceData(activeSection, selectedClusterId, selectedNamespace);
|
loadResourceData(activeSection, selectedClusterId, selectedNamespace);
|
||||||
@ -897,7 +889,7 @@ export function KubernetesPage() {
|
|||||||
|
|
||||||
switch (activeSection) {
|
switch (activeSection) {
|
||||||
case "pods":
|
case "pods":
|
||||||
return <PodList pods={resources.pods} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <PodList pods={resources.pods} clusterId={cid} namespace={ns} />;
|
||||||
case "deployments":
|
case "deployments":
|
||||||
return <DeploymentList deployments={resources.deployments} clusterId={cid} namespace={ns} />;
|
return <DeploymentList deployments={resources.deployments} clusterId={cid} namespace={ns} />;
|
||||||
case "daemonsets":
|
case "daemonsets":
|
||||||
@ -917,11 +909,11 @@ export function KubernetesPage() {
|
|||||||
case "ingresses":
|
case "ingresses":
|
||||||
return <IngressList ingresses={resources.ingresses} clusterId={cid} namespace={ns} />;
|
return <IngressList ingresses={resources.ingresses} clusterId={cid} namespace={ns} />;
|
||||||
case "configmaps":
|
case "configmaps":
|
||||||
return <ConfigMapList configmaps={resources.configmaps} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <ConfigMapList configmaps={resources.configmaps} clusterId={cid} namespace={ns} />;
|
||||||
case "secrets":
|
case "secrets":
|
||||||
return <SecretList secrets={resources.secrets} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <SecretList secrets={resources.secrets} clusterId={cid} namespace={ns} />;
|
||||||
case "hpas":
|
case "hpas":
|
||||||
return <HPAList hpas={resources.hpas} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <HPAList hpas={resources.hpas} clusterId={cid} namespace={ns} />;
|
||||||
case "pvcs":
|
case "pvcs":
|
||||||
return <PVCList pvcs={resources.pvcs} clusterId={cid} namespace={ns} />;
|
return <PVCList pvcs={resources.pvcs} clusterId={cid} namespace={ns} />;
|
||||||
case "pvs":
|
case "pvs":
|
||||||
@ -945,21 +937,21 @@ export function KubernetesPage() {
|
|||||||
case "networkpolicies":
|
case "networkpolicies":
|
||||||
return <NetworkPolicyList networkpolicies={resources.networkpolicies} clusterId={cid} namespace={ns} />;
|
return <NetworkPolicyList networkpolicies={resources.networkpolicies} clusterId={cid} namespace={ns} />;
|
||||||
case "resourcequotas":
|
case "resourcequotas":
|
||||||
return <ResourceQuotaList resourcequotas={resources.resourcequotas} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <ResourceQuotaList resourcequotas={resources.resourcequotas} clusterId={cid} namespace={ns} />;
|
||||||
case "limitranges":
|
case "limitranges":
|
||||||
return <LimitRangeList limitranges={resources.limitranges} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <LimitRangeList limitranges={resources.limitranges} clusterId={cid} namespace={ns} />;
|
||||||
case "poddisruptionbudgets":
|
case "poddisruptionbudgets":
|
||||||
return <PodDisruptionBudgetList items={resources.poddisruptionbudgets} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <PodDisruptionBudgetList items={resources.poddisruptionbudgets} clusterId={cid} namespace={ns} />;
|
||||||
case "priorityclasses":
|
case "priorityclasses":
|
||||||
return <PriorityClassList items={resources.priorityclasses} clusterId={cid} onRefresh={handleRefresh} />;
|
return <PriorityClassList items={resources.priorityclasses} clusterId={cid} />;
|
||||||
case "runtimeclasses":
|
case "runtimeclasses":
|
||||||
return <RuntimeClassList items={resources.runtimeclasses} clusterId={cid} onRefresh={handleRefresh} />;
|
return <RuntimeClassList items={resources.runtimeclasses} clusterId={cid} />;
|
||||||
case "leases":
|
case "leases":
|
||||||
return <LeaseList items={resources.leases} clusterId={cid} namespace={ns} onRefresh={handleRefresh} />;
|
return <LeaseList items={resources.leases} clusterId={cid} namespace={ns} />;
|
||||||
case "mutatingwebhooks":
|
case "mutatingwebhooks":
|
||||||
return <MutatingWebhookList items={resources.mutatingwebhooks} clusterId={cid} onRefresh={handleRefresh} />;
|
return <MutatingWebhookList items={resources.mutatingwebhooks} clusterId={cid} />;
|
||||||
case "validatingwebhooks":
|
case "validatingwebhooks":
|
||||||
return <ValidatingWebhookList items={resources.validatingwebhooks} clusterId={cid} onRefresh={handleRefresh} />;
|
return <ValidatingWebhookList items={resources.validatingwebhooks} clusterId={cid} />;
|
||||||
case "endpoints":
|
case "endpoints":
|
||||||
return <EndpointList items={resources.endpoints} clusterId={cid} namespace={ns} />;
|
return <EndpointList items={resources.endpoints} clusterId={cid} namespace={ns} />;
|
||||||
case "endpointslices":
|
case "endpointslices":
|
||||||
@ -1051,7 +1043,37 @@ export function KubernetesPage() {
|
|||||||
case "crds":
|
case "crds":
|
||||||
return (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<CrdList clusterId={cid} />
|
<h2 className="text-xl font-semibold mb-4">Custom Resource Definitions</h2>
|
||||||
|
{resources.crds.length === 0 ? (
|
||||||
|
<p className="text-muted-foreground">No custom resource definitions found.</p>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b text-muted-foreground text-left">
|
||||||
|
<th className="px-4 py-3 font-medium">Name</th>
|
||||||
|
<th className="px-4 py-3 font-medium">Group</th>
|
||||||
|
<th className="px-4 py-3 font-medium">Version</th>
|
||||||
|
<th className="px-4 py-3 font-medium">Kind</th>
|
||||||
|
<th className="px-4 py-3 font-medium">Scope</th>
|
||||||
|
<th className="px-4 py-3 font-medium">Age</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{resources.crds.map((crd) => (
|
||||||
|
<tr key={crd.name} className="border-b hover:bg-muted/30 transition-colors">
|
||||||
|
<td className="px-4 py-3 font-medium font-mono text-xs">{crd.name}</td>
|
||||||
|
<td className="px-4 py-3 text-muted-foreground">{crd.group}</td>
|
||||||
|
<td className="px-4 py-3 font-mono text-xs">{crd.version}</td>
|
||||||
|
<td className="px-4 py-3">{crd.kind}</td>
|
||||||
|
<td className="px-4 py-3 text-muted-foreground">{crd.scope}</td>
|
||||||
|
<td className="px-4 py-3 text-muted-foreground">{crd.age}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
@ -1064,7 +1086,6 @@ export function KubernetesPage() {
|
|||||||
const selectedConfig = kubeconfigs.find((c) => c.id === selectedClusterId);
|
const selectedConfig = kubeconfigs.find((c) => c.id === selectedClusterId);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary>
|
|
||||||
<div className="flex flex-col h-full bg-background">
|
<div className="flex flex-col h-full bg-background">
|
||||||
{/* Hotbar */}
|
{/* Hotbar */}
|
||||||
<Hotbar
|
<Hotbar
|
||||||
@ -1146,8 +1167,8 @@ export function KubernetesPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Main layout: sidebar + content (top area of CSS grid) */}
|
{/* Main layout: sidebar + content */}
|
||||||
<div className="flex flex-1 overflow-hidden min-h-0">
|
<div className="flex flex-1 overflow-hidden">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<aside className="w-56 shrink-0 border-r bg-card overflow-y-auto flex flex-col">
|
<aside className="w-56 shrink-0 border-r bg-card overflow-y-auto flex flex-col">
|
||||||
{NAV_ENTRIES.map((entry) => {
|
{NAV_ENTRIES.map((entry) => {
|
||||||
@ -1231,10 +1252,6 @@ export function KubernetesPage() {
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom dock panel — DevTools-style. Opens via store (e.g. via context menus,
|
|
||||||
ResourceActionMenu, etc.). When closed, renders nothing. */}
|
|
||||||
<BottomPanel />
|
|
||||||
|
|
||||||
{/* Command Palette */}
|
{/* Command Palette */}
|
||||||
<CommandPalette
|
<CommandPalette
|
||||||
isOpen={isCommandPaletteOpen}
|
isOpen={isCommandPaletteOpen}
|
||||||
@ -1286,6 +1303,5 @@ export function KubernetesPage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,234 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { Play, Square, Trash2, Plus, RefreshCw } from "lucide-react";
|
|
||||||
import { useKubernetesStore } from "@/stores/kubernetesStore";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
Badge,
|
|
||||||
Button,
|
|
||||||
} from "@/components/ui";
|
|
||||||
import type { PortForwardResponse } from "@/lib/tauriCommands";
|
|
||||||
import {
|
|
||||||
listPortForwardsCmd,
|
|
||||||
startPortForwardCmd,
|
|
||||||
stopPortForwardCmd,
|
|
||||||
deletePortForwardCmd,
|
|
||||||
listPodsCmd,
|
|
||||||
listNamespacesCmd,
|
|
||||||
} from "@/lib/tauriCommands";
|
|
||||||
import { PortForwardForm } from "@/components/Kubernetes";
|
|
||||||
|
|
||||||
export function PortForwardPage() {
|
|
||||||
const { selectedClusterId } = useKubernetesStore();
|
|
||||||
const [portForwards, setPortForwards] = useState<PortForwardResponse[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const loadPortForwards = async () => {
|
|
||||||
if (!selectedClusterId) return;
|
|
||||||
setIsLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const data = await listPortForwardsCmd();
|
|
||||||
setPortForwards(data);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadPortForwards();
|
|
||||||
const interval = setInterval(loadPortForwards, 5000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [selectedClusterId]);
|
|
||||||
|
|
||||||
const handleStop = async (id: string) => {
|
|
||||||
try {
|
|
||||||
await stopPortForwardCmd(id);
|
|
||||||
setPortForwards((prev) => prev.filter((pf) => pf.id !== id));
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async (id: string) => {
|
|
||||||
try {
|
|
||||||
await deletePortForwardCmd(id);
|
|
||||||
setPortForwards((prev) => prev.filter((pf) => pf.id !== id));
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleStart = async (pf: PortForwardResponse) => {
|
|
||||||
try {
|
|
||||||
if (!selectedClusterId) return;
|
|
||||||
const result = await startPortForwardCmd({
|
|
||||||
cluster_id: selectedClusterId,
|
|
||||||
namespace: pf.namespace,
|
|
||||||
pod: pf.pod,
|
|
||||||
container_port: pf.container_ports[0] ?? 80,
|
|
||||||
local_port: pf.local_ports[0] ?? 0,
|
|
||||||
});
|
|
||||||
setPortForwards((prev) => [...prev, result]);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status.toLowerCase()) {
|
|
||||||
case "active":
|
|
||||||
return "bg-green-500";
|
|
||||||
case "stopped":
|
|
||||||
return "bg-gray-500";
|
|
||||||
default:
|
|
||||||
return "bg-red-500";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!selectedClusterId) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center h-full gap-4 text-center px-8">
|
|
||||||
<Play className="w-16 h-16 text-muted-foreground" />
|
|
||||||
<h2 className="text-2xl font-semibold">No cluster selected</h2>
|
|
||||||
<p className="text-muted-foreground max-w-sm">
|
|
||||||
Select a cluster from the dropdown to manage port forwards.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-semibold">Port Forwarding</h1>
|
|
||||||
<p className="text-sm text-muted-foreground mt-1">
|
|
||||||
Manage port forwards to access pods locally
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={loadPortForwards}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
|
|
||||||
Refresh
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => setIsFormOpen(true)}>
|
|
||||||
<Plus className="w-4 h-4 mr-2" />
|
|
||||||
New Port Forward
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="border rounded-lg bg-card">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>Name</TableHead>
|
|
||||||
<TableHead>Namespace</TableHead>
|
|
||||||
<TableHead>Kind</TableHead>
|
|
||||||
<TableHead>Pod Port</TableHead>
|
|
||||||
<TableHead>Local Port</TableHead>
|
|
||||||
<TableHead>Protocol</TableHead>
|
|
||||||
<TableHead>Address</TableHead>
|
|
||||||
<TableHead>Status</TableHead>
|
|
||||||
<TableHead className="text-right">Actions</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{portForwards.length === 0 ? (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={9} className="text-center text-muted-foreground py-8">
|
|
||||||
{isLoading ? "Loading port forwards..." : "No active port forwards"}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
) : (
|
|
||||||
portForwards.map((pf) => (
|
|
||||||
<TableRow key={pf.id}>
|
|
||||||
<TableCell className="font-medium">{pf.pod}</TableCell>
|
|
||||||
<TableCell>{pf.namespace}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Badge variant="outline">Pod</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="font-mono text-sm">
|
|
||||||
{pf.container_ports.join(", ")}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="font-mono text-sm">
|
|
||||||
{pf.local_ports.join(", ")}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>TCP</TableCell>
|
|
||||||
<TableCell className="font-mono text-sm">
|
|
||||||
localhost:{pf.local_ports[0]}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Badge className={`${getStatusColor(pf.status)} text-white`}>
|
|
||||||
{pf.status}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex gap-1 justify-end">
|
|
||||||
{pf.status.toLowerCase() === "active" ? (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleStop(pf.id)}
|
|
||||||
title="Stop"
|
|
||||||
>
|
|
||||||
<Square className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleStart(pf)}
|
|
||||||
title="Start"
|
|
||||||
>
|
|
||||||
<Play className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleDelete(pf.id)}
|
|
||||||
title="Delete"
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PortForwardForm
|
|
||||||
isOpen={isFormOpen}
|
|
||||||
onClose={() => setIsFormOpen(false)}
|
|
||||||
onStart={(pf) => {
|
|
||||||
setPortForwards((prev) => [...prev, pf]);
|
|
||||||
setIsFormOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,162 +0,0 @@
|
|||||||
import { create } from "zustand";
|
|
||||||
import { persist } from "zustand/middleware";
|
|
||||||
|
|
||||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export enum BottomPanelTabType {
|
|
||||||
POD_LOGS = "POD_LOGS",
|
|
||||||
TERMINAL = "TERMINAL",
|
|
||||||
EDIT_RESOURCE = "EDIT_RESOURCE",
|
|
||||||
CREATE_RESOURCE = "CREATE_RESOURCE",
|
|
||||||
INSTALL_CHART = "INSTALL_CHART",
|
|
||||||
UPGRADE_CHART = "UPGRADE_CHART",
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Per-tab data payload. The shape is intentionally loose because each tab type
|
|
||||||
* needs a different set of fields. Consumers should narrow `data` based on
|
|
||||||
* `type` when rendering.
|
|
||||||
*/
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
export type BottomPanelTabData = Record<string, any>;
|
|
||||||
|
|
||||||
export interface BottomPanelTab {
|
|
||||||
id: string;
|
|
||||||
type: BottomPanelTabType;
|
|
||||||
title: string;
|
|
||||||
/** Optional dedup key — re-opening a tab with the same type+key focuses the existing tab. */
|
|
||||||
key?: string;
|
|
||||||
data?: BottomPanelTabData;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OpenTabOptions {
|
|
||||||
type: BottomPanelTabType;
|
|
||||||
title: string;
|
|
||||||
key?: string;
|
|
||||||
data?: BottomPanelTabData;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Constants ────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export const DEFAULT_PANEL_HEIGHT = 320;
|
|
||||||
export const MIN_PANEL_HEIGHT = 120;
|
|
||||||
export const MAX_PANEL_HEIGHT = 900;
|
|
||||||
|
|
||||||
// ─── Store ────────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface BottomPanelState {
|
|
||||||
isOpen: boolean;
|
|
||||||
height: number;
|
|
||||||
tabs: BottomPanelTab[];
|
|
||||||
activeTabId: string | null;
|
|
||||||
/** Monotonically increasing counter used to build unique tab ids. */
|
|
||||||
nextTabIndex: number;
|
|
||||||
|
|
||||||
openPanel: () => void;
|
|
||||||
closePanel: () => void;
|
|
||||||
togglePanel: () => void;
|
|
||||||
|
|
||||||
setHeight: (height: number) => void;
|
|
||||||
|
|
||||||
openTab: (options: OpenTabOptions) => string;
|
|
||||||
closeTab: (id: string) => void;
|
|
||||||
closeActiveTab: () => void;
|
|
||||||
setActiveTab: (id: string) => void;
|
|
||||||
nextTab: () => void;
|
|
||||||
previousTab: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clampHeight(h: number): number {
|
|
||||||
if (Number.isNaN(h)) return DEFAULT_PANEL_HEIGHT;
|
|
||||||
if (h < MIN_PANEL_HEIGHT) return MIN_PANEL_HEIGHT;
|
|
||||||
if (h > MAX_PANEL_HEIGHT) return MAX_PANEL_HEIGHT;
|
|
||||||
return Math.round(h);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useBottomPanelStore = create<BottomPanelState>()(
|
|
||||||
persist(
|
|
||||||
(set, get) => ({
|
|
||||||
isOpen: false,
|
|
||||||
height: DEFAULT_PANEL_HEIGHT,
|
|
||||||
tabs: [],
|
|
||||||
activeTabId: null,
|
|
||||||
nextTabIndex: 1,
|
|
||||||
|
|
||||||
openPanel: () => set({ isOpen: true }),
|
|
||||||
closePanel: () => set({ isOpen: false }),
|
|
||||||
togglePanel: () => set((s) => ({ isOpen: !s.isOpen })),
|
|
||||||
|
|
||||||
setHeight: (height) => set({ height: clampHeight(height) }),
|
|
||||||
|
|
||||||
openTab: ({ type, title, key, data }) => {
|
|
||||||
// De-dup on (type, key) when key is provided
|
|
||||||
if (key) {
|
|
||||||
const existing = get().tabs.find((t) => t.type === type && t.key === key);
|
|
||||||
if (existing) {
|
|
||||||
set({ activeTabId: existing.id, isOpen: true });
|
|
||||||
return existing.id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const idx = get().nextTabIndex;
|
|
||||||
const id = `tab-${idx}-${type.toLowerCase()}`;
|
|
||||||
const tab: BottomPanelTab = { id, type, title, key, data };
|
|
||||||
set((s) => ({
|
|
||||||
tabs: [...s.tabs, tab],
|
|
||||||
activeTabId: id,
|
|
||||||
isOpen: true,
|
|
||||||
nextTabIndex: s.nextTabIndex + 1,
|
|
||||||
}));
|
|
||||||
return id;
|
|
||||||
},
|
|
||||||
|
|
||||||
closeTab: (id) =>
|
|
||||||
set((s) => {
|
|
||||||
const idx = s.tabs.findIndex((t) => t.id === id);
|
|
||||||
if (idx === -1) return s;
|
|
||||||
const nextTabs = s.tabs.filter((t) => t.id !== id);
|
|
||||||
|
|
||||||
let nextActive: string | null = s.activeTabId;
|
|
||||||
if (s.activeTabId === id) {
|
|
||||||
// Prefer the tab that was just before the closed one; otherwise the new last tab.
|
|
||||||
const fallback = nextTabs[idx - 1] ?? nextTabs[nextTabs.length - 1] ?? null;
|
|
||||||
nextActive = fallback?.id ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
tabs: nextTabs,
|
|
||||||
activeTabId: nextActive,
|
|
||||||
isOpen: nextTabs.length > 0 ? s.isOpen : false,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
|
|
||||||
closeActiveTab: () => {
|
|
||||||
const id = get().activeTabId;
|
|
||||||
if (id) get().closeTab(id);
|
|
||||||
},
|
|
||||||
|
|
||||||
setActiveTab: (id) => set({ activeTabId: id, isOpen: true }),
|
|
||||||
|
|
||||||
nextTab: () =>
|
|
||||||
set((s) => {
|
|
||||||
if (s.tabs.length === 0) return s;
|
|
||||||
const idx = s.tabs.findIndex((t) => t.id === s.activeTabId);
|
|
||||||
const nextIdx = (idx + 1) % s.tabs.length;
|
|
||||||
return { activeTabId: s.tabs[nextIdx]!.id };
|
|
||||||
}),
|
|
||||||
|
|
||||||
previousTab: () =>
|
|
||||||
set((s) => {
|
|
||||||
if (s.tabs.length === 0) return s;
|
|
||||||
const idx = s.tabs.findIndex((t) => t.id === s.activeTabId);
|
|
||||||
const prevIdx = (idx - 1 + s.tabs.length) % s.tabs.length;
|
|
||||||
return { activeTabId: s.tabs[prevIdx]!.id };
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
name: "tftsr-bottom-panel",
|
|
||||||
// Only persist height — tabs and open state are session-only
|
|
||||||
partialize: (s) => ({ height: s.height }),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* { @apply border-border; }
|
* { @apply border-border; }
|
||||||
html, body { @apply bg-background text-foreground; }
|
body { @apply bg-background text-foreground; }
|
||||||
|
|
||||||
/* Prevent WebKit/GTK from overriding form control colors with system theme */
|
/* Prevent WebKit/GTK from overriding form control colors with system theme */
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
|
|||||||
@ -1,156 +0,0 @@
|
|||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
||||||
import { render, screen, fireEvent } from "@testing-library/react";
|
|
||||||
import { BottomPanel } from "@/components/BottomPanel";
|
|
||||||
import {
|
|
||||||
useBottomPanelStore,
|
|
||||||
BottomPanelTabType,
|
|
||||||
DEFAULT_PANEL_HEIGHT,
|
|
||||||
} from "@/stores/bottomPanelStore";
|
|
||||||
|
|
||||||
// Stub the heavier tab content to keep this test focused on the panel chrome.
|
|
||||||
vi.mock("@/components/dock/LogsTab", () => ({
|
|
||||||
LogsTab: () => <div data-testid="logs-tab-stub">logs</div>,
|
|
||||||
}));
|
|
||||||
vi.mock("@/components/dock/TerminalTab", () => ({
|
|
||||||
TerminalTab: () => <div data-testid="terminal-tab-stub">terminal</div>,
|
|
||||||
}));
|
|
||||||
vi.mock("@/components/dock/YamlEditorTab", () => ({
|
|
||||||
YamlEditorTab: () => <div data-testid="yaml-tab-stub">yaml</div>,
|
|
||||||
}));
|
|
||||||
|
|
||||||
function resetStore() {
|
|
||||||
useBottomPanelStore.setState({
|
|
||||||
isOpen: false,
|
|
||||||
height: DEFAULT_PANEL_HEIGHT,
|
|
||||||
tabs: [],
|
|
||||||
activeTabId: null,
|
|
||||||
nextTabIndex: 1,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("BottomPanel", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
resetStore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders nothing when closed", () => {
|
|
||||||
render(<BottomPanel />);
|
|
||||||
expect(screen.queryByTestId("bottom-panel")).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders panel + drag handle when open with a tab", () => {
|
|
||||||
useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "terminal-1",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
expect(screen.getByTestId("bottom-panel")).toBeInTheDocument();
|
|
||||||
expect(screen.getByTestId("bottom-panel-drag-handle")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("uses height from the store", () => {
|
|
||||||
useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "t",
|
|
||||||
});
|
|
||||||
useBottomPanelStore.getState().setHeight(420);
|
|
||||||
render(<BottomPanel />);
|
|
||||||
const panel = screen.getByTestId("bottom-panel");
|
|
||||||
expect(panel).toHaveStyle({ height: "420px" });
|
|
||||||
});
|
|
||||||
|
|
||||||
it("close button removes the active tab", () => {
|
|
||||||
const id = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
|
|
||||||
const closeBtn = screen.getByLabelText(`Close tab term`);
|
|
||||||
fireEvent.click(closeBtn);
|
|
||||||
|
|
||||||
expect(useBottomPanelStore.getState().tabs.find((t) => t.id === id)).toBeUndefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("clicking inactive tab makes it active", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "alpha",
|
|
||||||
});
|
|
||||||
useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "beta",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
|
|
||||||
fireEvent.click(screen.getByText("alpha"));
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(a);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("collapse-all button closes the panel", () => {
|
|
||||||
useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
|
|
||||||
fireEvent.click(screen.getByLabelText("Hide bottom panel"));
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("BottomPanel keyboard shortcuts", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
resetStore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Ctrl+W closes the active tab", () => {
|
|
||||||
const id = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
|
|
||||||
fireEvent.keyDown(window, { key: "w", ctrlKey: true });
|
|
||||||
expect(useBottomPanelStore.getState().tabs.find((t) => t.id === id)).toBeUndefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Shift+Escape hides the panel", () => {
|
|
||||||
useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term",
|
|
||||||
});
|
|
||||||
render(<BottomPanel />);
|
|
||||||
|
|
||||||
fireEvent.keyDown(window, { key: "Escape", shiftKey: true });
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Ctrl+. switches to next tab", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "a" });
|
|
||||||
const b = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "b" });
|
|
||||||
useBottomPanelStore.getState().setActiveTab(a);
|
|
||||||
|
|
||||||
render(<BottomPanel />);
|
|
||||||
fireEvent.keyDown(window, { key: ".", ctrlKey: true });
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Ctrl+, switches to previous tab", () => {
|
|
||||||
useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "a" });
|
|
||||||
const b = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "b" });
|
|
||||||
useBottomPanelStore.getState().setActiveTab(b);
|
|
||||||
|
|
||||||
render(<BottomPanel />);
|
|
||||||
fireEvent.keyDown(window, { key: ",", ctrlKey: true });
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).not.toBe(b);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("ignores shortcuts when panel is closed", () => {
|
|
||||||
render(<BottomPanel />);
|
|
||||||
// Should not throw
|
|
||||||
fireEvent.keyDown(window, { key: "w", ctrlKey: true });
|
|
||||||
fireEvent.keyDown(window, { key: ".", ctrlKey: true });
|
|
||||||
expect(useBottomPanelStore.getState().tabs).toHaveLength(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
||||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
|
||||||
import { LogStreamPanel } from "@/components/Kubernetes/LogStreamPanel";
|
|
||||||
|
|
||||||
vi.mock("@tauri-apps/api/event", () => ({
|
|
||||||
listen: vi.fn().mockResolvedValue(() => {}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/lib/tauriCommands", () => ({
|
|
||||||
streamPodLogsCmd: vi.fn().mockResolvedValue("stream-123"),
|
|
||||||
stopLogStreamCmd: vi.fn().mockResolvedValue(undefined),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("LogStreamPanel — ANSI color support", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders ANSI colored text correctly", () => {
|
|
||||||
const containers = ["app"];
|
|
||||||
const { rerender } = render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={containers}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Simulate receiving log line with ANSI color codes
|
|
||||||
const logLine = "\x1b[31mError: something went wrong\x1b[0m";
|
|
||||||
|
|
||||||
// Component should render the ANSI-colored line
|
|
||||||
rerender(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={containers}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText(/Log Stream/)).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("LogStreamPanel — Download functionality", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders "Download Visible" button', () => {
|
|
||||||
render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={["app"]}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByRole("button", { name: /download visible/i })).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders "Download All" button', () => {
|
|
||||||
render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={["app"]}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByRole("button", { name: /download all/i })).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("download visible creates blob with current visible lines", async () => {
|
|
||||||
const createObjectURL = vi.fn(() => "blob:url");
|
|
||||||
const revokeObjectURL = vi.fn();
|
|
||||||
const mockClick = vi.fn();
|
|
||||||
global.URL.createObjectURL = createObjectURL;
|
|
||||||
global.URL.revokeObjectURL = revokeObjectURL;
|
|
||||||
|
|
||||||
// Mock createElement to intercept the anchor creation
|
|
||||||
const originalCreateElement = document.createElement;
|
|
||||||
document.createElement = vi.fn((tagName: string) => {
|
|
||||||
const element = originalCreateElement.call(document, tagName);
|
|
||||||
if (tagName === "a") {
|
|
||||||
element.click = mockClick;
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
}) as typeof document.createElement;
|
|
||||||
|
|
||||||
render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={["app"]}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Download button should be disabled when no lines
|
|
||||||
const downloadBtn = screen.getByRole("button", { name: /download visible/i });
|
|
||||||
expect(downloadBtn).toHaveAttribute("disabled");
|
|
||||||
|
|
||||||
// Cleanup
|
|
||||||
document.createElement = originalCreateElement;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("LogStreamPanel — Search highlighting", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("highlights search matches in yellow", async () => {
|
|
||||||
render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={["app"]}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const searchInput = screen.getByPlaceholderText(/filter log lines/i);
|
|
||||||
fireEvent.change(searchInput, { target: { value: "error" } });
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(searchInput).toHaveValue("error");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not show navigation buttons when no matching lines", () => {
|
|
||||||
render(
|
|
||||||
<LogStreamPanel
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
podName="test-pod"
|
|
||||||
containers={["app"]}
|
|
||||||
open={true}
|
|
||||||
onOpenChange={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const searchInput = screen.getByPlaceholderText(/filter log lines/i);
|
|
||||||
fireEvent.change(searchInput, { target: { value: "test" } });
|
|
||||||
|
|
||||||
// Navigation buttons should not be visible when there are no lines
|
|
||||||
expect(screen.queryByRole("button", { name: /previous match/i })).toBeNull();
|
|
||||||
expect(screen.queryByRole("button", { name: /next match/i })).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -8,18 +8,18 @@ import type { PodInfo } from "@/lib/tauriCommands";
|
|||||||
vi.mock("@tauri-apps/api/core");
|
vi.mock("@tauri-apps/api/core");
|
||||||
|
|
||||||
// Silence console.error noise from modal portals in jsdom
|
// Silence console.error noise from modal portals in jsdom
|
||||||
vi.mock("@/components/Kubernetes/LogStreamPanel", () => ({
|
vi.mock("@/components/Kubernetes/LogsModal", () => ({
|
||||||
LogStreamPanel: ({ namespace }: { namespace: string }) => (
|
LogsModal: ({ namespace }: { namespace: string }) => (
|
||||||
<div data-testid="logs-modal" data-namespace={namespace} />
|
<div data-testid="logs-modal" data-namespace={namespace} />
|
||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
vi.mock("@/components/Kubernetes/InteractiveShellModal", () => ({
|
vi.mock("@/components/Kubernetes/ShellExecModal", () => ({
|
||||||
InteractiveShellModal: ({ namespace }: { namespace: string }) => (
|
ShellExecModal: ({ namespace }: { namespace: string }) => (
|
||||||
<div data-testid="shell-modal" data-namespace={namespace} />
|
<div data-testid="shell-modal" data-namespace={namespace} />
|
||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
vi.mock("@/components/Kubernetes/InteractiveAttachModal", () => ({
|
vi.mock("@/components/Kubernetes/AttachModal", () => ({
|
||||||
InteractiveAttachModal: ({ namespace }: { namespace: string }) => (
|
AttachModal: ({ namespace }: { namespace: string }) => (
|
||||||
<div data-testid="attach-modal" data-namespace={namespace} />
|
<div data-testid="attach-modal" data-namespace={namespace} />
|
||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
|
|||||||
@ -1,186 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from "vitest";
|
|
||||||
import { render, screen, waitFor } from "@testing-library/react";
|
|
||||||
import userEvent from "@testing-library/user-event";
|
|
||||||
import { SecretDataModal } from "@/components/Kubernetes/SecretDataModal";
|
|
||||||
|
|
||||||
describe("SecretDataModal", () => {
|
|
||||||
const mockSecretYaml = `apiVersion: v1
|
|
||||||
kind: Secret
|
|
||||||
metadata:
|
|
||||||
name: test-secret
|
|
||||||
namespace: default
|
|
||||||
type: Opaque
|
|
||||||
data:
|
|
||||||
username: YWRtaW4=
|
|
||||||
password: cGFzc3dvcmQxMjM=
|
|
||||||
token: dGVzdHRva2VuMTIzNDU=
|
|
||||||
`;
|
|
||||||
|
|
||||||
const mockOnOpenChange = vi.fn();
|
|
||||||
|
|
||||||
it("renders the secret data modal", () => {
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText(/Secret Data: test-secret/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("displays secret keys in the table", () => {
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText("username")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("password")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("token")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("initially hides all secret values", () => {
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const cells = screen.getAllByText("••••••••");
|
|
||||||
expect(cells.length).toBeGreaterThanOrEqual(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("reveals secret value when eye icon is clicked", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Find all reveal buttons and click the first one
|
|
||||||
const revealButtons = screen.getAllByRole("button", { name: /Reveal value/i });
|
|
||||||
await user.click(revealButtons[0]);
|
|
||||||
|
|
||||||
// Check that the decoded value is now visible
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText("admin")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("hides secret value when eye-off icon is clicked", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Reveal first value
|
|
||||||
const revealButtons = screen.getAllByRole("button", { name: /Reveal value/i });
|
|
||||||
await user.click(revealButtons[0]);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText("admin")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hide it again
|
|
||||||
const hideButton = screen.getByRole("button", { name: /Hide value/i });
|
|
||||||
await user.click(hideButton);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.queryByText("admin")).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("copies secret value to clipboard when copy icon is clicked", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
const mockWriteText = vi.fn().mockResolvedValue(undefined);
|
|
||||||
Object.defineProperty(navigator, "clipboard", {
|
|
||||||
value: { writeText: mockWriteText },
|
|
||||||
writable: true,
|
|
||||||
configurable: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="test-secret"
|
|
||||||
secretYaml={mockSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Find all copy buttons and click the first one
|
|
||||||
const copyButtons = screen.getAllByRole("button", { name: /Copy to clipboard/i });
|
|
||||||
await user.click(copyButtons[0]);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(mockWriteText).toHaveBeenCalledWith("admin");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("displays empty state when no data keys exist", () => {
|
|
||||||
const emptySecretYaml = `apiVersion: v1
|
|
||||||
kind: Secret
|
|
||||||
metadata:
|
|
||||||
name: empty-secret
|
|
||||||
namespace: default
|
|
||||||
type: Opaque
|
|
||||||
data: {}
|
|
||||||
`;
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="empty-secret"
|
|
||||||
secretYaml={emptySecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText("No data keys in this secret.")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("handles malformed base64 gracefully", () => {
|
|
||||||
const invalidSecretYaml = `apiVersion: v1
|
|
||||||
kind: Secret
|
|
||||||
metadata:
|
|
||||||
name: invalid-secret
|
|
||||||
namespace: default
|
|
||||||
type: Opaque
|
|
||||||
data:
|
|
||||||
invalid: !!!not-base64!!!
|
|
||||||
`;
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SecretDataModal
|
|
||||||
open={true}
|
|
||||||
onOpenChange={mockOnOpenChange}
|
|
||||||
secretName="invalid-secret"
|
|
||||||
secretYaml={invalidSecretYaml}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Should still render without crashing
|
|
||||||
expect(screen.getByText(/Secret Data: invalid-secret/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -14,8 +14,6 @@ const mockTerminalInstance = {
|
|||||||
onData: vi.fn((cb: (data: string) => void) => {
|
onData: vi.fn((cb: (data: string) => void) => {
|
||||||
onDataHandlers.push(cb);
|
onDataHandlers.push(cb);
|
||||||
}),
|
}),
|
||||||
onSelectionChange: vi.fn(),
|
|
||||||
getSelection: vi.fn(() => "selected text"),
|
|
||||||
loadAddon: vi.fn(),
|
loadAddon: vi.fn(),
|
||||||
options: {} as Record<string, unknown>,
|
options: {} as Record<string, unknown>,
|
||||||
};
|
};
|
||||||
@ -298,114 +296,4 @@ describe("Terminal component", () => {
|
|||||||
expect(mockTerminalInstance.dispose).toHaveBeenCalled();
|
expect(mockTerminalInstance.dispose).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("terminal configuration", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
localStorage.clear();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders settings button in tab bar", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.queryByRole("button", { name: /settings/i });
|
|
||||||
expect(settingsBtn).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("opens settings dialog when settings button is clicked", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText(/terminal settings/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows copy-on-select toggle in settings dialog", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByLabelText(/copy on select/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows font family input in settings dialog", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByLabelText(/font family/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows font size input in settings dialog", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByLabelText(/font size/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("persists settings to localStorage when changed", async () => {
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => screen.getByLabelText(/copy on select/i));
|
|
||||||
|
|
||||||
const copyOnSelectCheckbox = screen.getByLabelText(/copy on select/i) as HTMLInputElement;
|
|
||||||
await userEvent.click(copyOnSelectCheckbox);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
const stored = localStorage.getItem("terminal-settings");
|
|
||||||
expect(stored).toBeTruthy();
|
|
||||||
const parsed = JSON.parse(stored || "{}");
|
|
||||||
expect(parsed.copyOnSelect).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("loads settings from localStorage on mount", async () => {
|
|
||||||
localStorage.setItem(
|
|
||||||
"terminal-settings",
|
|
||||||
JSON.stringify({
|
|
||||||
copyOnSelect: true,
|
|
||||||
fontFamily: "Courier New",
|
|
||||||
fontSize: 16,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
render(<Terminal {...withPodProps} />);
|
|
||||||
await waitFor(() => screen.getByRole("tab"));
|
|
||||||
|
|
||||||
const settingsBtn = screen.getByRole("button", { name: /settings/i });
|
|
||||||
await userEvent.click(settingsBtn);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
const copyOnSelectCheckbox = screen.getByLabelText(/copy on select/i) as HTMLInputElement;
|
|
||||||
expect(copyOnSelectCheckbox.checked).toBe(true);
|
|
||||||
|
|
||||||
const fontFamilyInput = screen.getByLabelText(/font family/i) as HTMLInputElement;
|
|
||||||
expect(fontFamilyInput.value).toBe("Courier New");
|
|
||||||
|
|
||||||
const fontSizeInput = screen.getByLabelText(/font size/i) as HTMLInputElement;
|
|
||||||
expect(fontSizeInput.value).toBe("16");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,235 +0,0 @@
|
|||||||
import { describe, it, expect, beforeEach } from "vitest";
|
|
||||||
import {
|
|
||||||
useBottomPanelStore,
|
|
||||||
BottomPanelTabType,
|
|
||||||
DEFAULT_PANEL_HEIGHT,
|
|
||||||
MIN_PANEL_HEIGHT,
|
|
||||||
MAX_PANEL_HEIGHT,
|
|
||||||
} from "@/stores/bottomPanelStore";
|
|
||||||
|
|
||||||
describe("bottomPanelStore", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
localStorage.clear();
|
|
||||||
// Reset store to initial state
|
|
||||||
useBottomPanelStore.setState({
|
|
||||||
isOpen: false,
|
|
||||||
height: DEFAULT_PANEL_HEIGHT,
|
|
||||||
tabs: [],
|
|
||||||
activeTabId: null,
|
|
||||||
nextTabIndex: 1,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("initial state", () => {
|
|
||||||
it("is closed by default", () => {
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has default height", () => {
|
|
||||||
expect(useBottomPanelStore.getState().height).toBe(DEFAULT_PANEL_HEIGHT);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has no tabs", () => {
|
|
||||||
expect(useBottomPanelStore.getState().tabs).toEqual([]);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("openPanel / closePanel / togglePanel", () => {
|
|
||||||
it("openPanel sets isOpen to true", () => {
|
|
||||||
useBottomPanelStore.getState().openPanel();
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("closePanel sets isOpen to false", () => {
|
|
||||||
useBottomPanelStore.getState().openPanel();
|
|
||||||
useBottomPanelStore.getState().closePanel();
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("togglePanel flips isOpen", () => {
|
|
||||||
const { togglePanel } = useBottomPanelStore.getState();
|
|
||||||
togglePanel();
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(true);
|
|
||||||
togglePanel();
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("setHeight", () => {
|
|
||||||
it("clamps to minimum", () => {
|
|
||||||
useBottomPanelStore.getState().setHeight(MIN_PANEL_HEIGHT - 50);
|
|
||||||
expect(useBottomPanelStore.getState().height).toBe(MIN_PANEL_HEIGHT);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("clamps to maximum", () => {
|
|
||||||
useBottomPanelStore.getState().setHeight(MAX_PANEL_HEIGHT + 1000);
|
|
||||||
expect(useBottomPanelStore.getState().height).toBe(MAX_PANEL_HEIGHT);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("accepts a value within range", () => {
|
|
||||||
useBottomPanelStore.getState().setHeight(450);
|
|
||||||
expect(useBottomPanelStore.getState().height).toBe(450);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("openTab", () => {
|
|
||||||
it("creates a new tab and opens the panel", () => {
|
|
||||||
const id = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.POD_LOGS,
|
|
||||||
title: "Pod Logs: nginx",
|
|
||||||
data: { clusterId: "c1", namespace: "default", podName: "nginx", containers: ["nginx"] },
|
|
||||||
});
|
|
||||||
|
|
||||||
const state = useBottomPanelStore.getState();
|
|
||||||
expect(state.tabs).toHaveLength(1);
|
|
||||||
expect(state.tabs[0]!.id).toBe(id);
|
|
||||||
expect(state.tabs[0]!.type).toBe(BottomPanelTabType.POD_LOGS);
|
|
||||||
expect(state.activeTabId).toBe(id);
|
|
||||||
expect(state.isOpen).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns existing tab id when same type+key already open", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.POD_LOGS,
|
|
||||||
title: "nginx",
|
|
||||||
key: "default/nginx",
|
|
||||||
});
|
|
||||||
const b = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.POD_LOGS,
|
|
||||||
title: "nginx",
|
|
||||||
key: "default/nginx",
|
|
||||||
});
|
|
||||||
expect(a).toBe(b);
|
|
||||||
expect(useBottomPanelStore.getState().tabs).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("supports all 6 tab types", () => {
|
|
||||||
const types = [
|
|
||||||
BottomPanelTabType.POD_LOGS,
|
|
||||||
BottomPanelTabType.TERMINAL,
|
|
||||||
BottomPanelTabType.EDIT_RESOURCE,
|
|
||||||
BottomPanelTabType.CREATE_RESOURCE,
|
|
||||||
BottomPanelTabType.INSTALL_CHART,
|
|
||||||
BottomPanelTabType.UPGRADE_CHART,
|
|
||||||
];
|
|
||||||
for (const t of types) {
|
|
||||||
useBottomPanelStore.getState().openTab({ type: t, title: t });
|
|
||||||
}
|
|
||||||
expect(useBottomPanelStore.getState().tabs).toHaveLength(6);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("closeTab", () => {
|
|
||||||
it("removes the tab and updates active tab", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term1",
|
|
||||||
});
|
|
||||||
const b = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term2",
|
|
||||||
});
|
|
||||||
useBottomPanelStore.getState().closeTab(b);
|
|
||||||
expect(useBottomPanelStore.getState().tabs).toHaveLength(1);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(a);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("closes the panel when last tab is removed", () => {
|
|
||||||
const id = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "term1",
|
|
||||||
});
|
|
||||||
useBottomPanelStore.getState().closeTab(id);
|
|
||||||
expect(useBottomPanelStore.getState().isOpen).toBe(false);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("focuses previous tab when active tab is closed", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "a",
|
|
||||||
});
|
|
||||||
const b = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "b",
|
|
||||||
});
|
|
||||||
const c = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "c",
|
|
||||||
});
|
|
||||||
// active is c — close c, should fall back to b
|
|
||||||
useBottomPanelStore.getState().closeTab(c);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
// close a (not active) — active should remain b
|
|
||||||
useBottomPanelStore.getState().closeTab(a);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("setActiveTab", () => {
|
|
||||||
it("updates the active tab id", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "a",
|
|
||||||
});
|
|
||||||
const b = useBottomPanelStore.getState().openTab({
|
|
||||||
type: BottomPanelTabType.TERMINAL,
|
|
||||||
title: "b",
|
|
||||||
});
|
|
||||||
useBottomPanelStore.getState().setActiveTab(a);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(a);
|
|
||||||
useBottomPanelStore.getState().setActiveTab(b);
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("nextTab / previousTab", () => {
|
|
||||||
it("cycles forward through tabs", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "a" });
|
|
||||||
const b = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "b" });
|
|
||||||
const c = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "c" });
|
|
||||||
useBottomPanelStore.getState().setActiveTab(a);
|
|
||||||
|
|
||||||
useBottomPanelStore.getState().nextTab();
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
useBottomPanelStore.getState().nextTab();
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(c);
|
|
||||||
// wraps
|
|
||||||
useBottomPanelStore.getState().nextTab();
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(a);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("cycles backward through tabs", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "a" });
|
|
||||||
const b = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "b" });
|
|
||||||
const c = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "c" });
|
|
||||||
useBottomPanelStore.getState().setActiveTab(a);
|
|
||||||
|
|
||||||
useBottomPanelStore.getState().previousTab();
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(c);
|
|
||||||
useBottomPanelStore.getState().previousTab();
|
|
||||||
expect(useBottomPanelStore.getState().activeTabId).toBe(b);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("closeActiveTab", () => {
|
|
||||||
it("removes whatever tab is currently active", () => {
|
|
||||||
const a = useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "a" });
|
|
||||||
useBottomPanelStore.getState().openTab({ type: BottomPanelTabType.TERMINAL, title: "b" });
|
|
||||||
useBottomPanelStore.getState().setActiveTab(a);
|
|
||||||
useBottomPanelStore.getState().closeActiveTab();
|
|
||||||
const remaining = useBottomPanelStore.getState().tabs.map((t) => t.id);
|
|
||||||
expect(remaining).not.toContain(a);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("persistence", () => {
|
|
||||||
it("persists height to localStorage", () => {
|
|
||||||
useBottomPanelStore.getState().setHeight(420);
|
|
||||||
const raw = localStorage.getItem("tftsr-bottom-panel");
|
|
||||||
expect(raw).not.toBeNull();
|
|
||||||
expect(raw!).toContain("420");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,314 +0,0 @@
|
|||||||
/**
|
|
||||||
* TDD tests: Critical UI fixes for Kubernetes management
|
|
||||||
* 1. LogStreamPanel integration in PodList
|
|
||||||
* 2. Smart positioning for ResourceActionMenu
|
|
||||||
* 3. Dark mode text visibility
|
|
||||||
* 4. YAML editor loading race condition
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
||||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { BrowserRouter } from "react-router-dom";
|
|
||||||
|
|
||||||
import { PodList } from "@/components/Kubernetes/PodList";
|
|
||||||
import { ResourceActionMenu } from "@/components/Kubernetes/ResourceActionMenu";
|
|
||||||
import { YamlEditor } from "@/components/Kubernetes/YamlEditor";
|
|
||||||
import { EditResourceModal } from "@/components/Kubernetes/EditResourceModal";
|
|
||||||
import type { PodInfo } from "@/lib/tauriCommands";
|
|
||||||
|
|
||||||
type MockedInvoke = typeof invoke & {
|
|
||||||
mockResolvedValue: (v: unknown) => void;
|
|
||||||
mockImplementation: (fn: (cmd: string, args?: unknown) => Promise<unknown>) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const mockInvoke = invoke as MockedInvoke;
|
|
||||||
|
|
||||||
// ─── 1. LogStreamPanel Integration in PodList ────────────────────────────────
|
|
||||||
|
|
||||||
describe("PodList – LogStreamPanel integration", () => {
|
|
||||||
const pod: PodInfo = {
|
|
||||||
name: "test-pod",
|
|
||||||
namespace: "default",
|
|
||||||
status: "Running",
|
|
||||||
ready: "1/1",
|
|
||||||
age: "1d",
|
|
||||||
containers: ["main", "sidecar"],
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => vi.clearAllMocks());
|
|
||||||
|
|
||||||
it("opens LogStreamPanel when Logs action is clicked", async () => {
|
|
||||||
// Mock streamPodLogsCmd to return a stream ID
|
|
||||||
mockInvoke.mockImplementation(async (cmd: string) => {
|
|
||||||
if (cmd === "stream_pod_logs") {
|
|
||||||
return "test-stream-123";
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
});
|
|
||||||
|
|
||||||
render(<PodList pods={[pod]} clusterId="c1" namespace="default" />);
|
|
||||||
|
|
||||||
// Open action menu
|
|
||||||
const buttons = screen.getAllByRole("button");
|
|
||||||
const actionButton = buttons.find(btn => btn.getAttribute("aria-label") === "Actions");
|
|
||||||
if (!actionButton) throw new Error("Action button not found");
|
|
||||||
fireEvent.click(actionButton);
|
|
||||||
|
|
||||||
// Click Logs action
|
|
||||||
const logsAction = await screen.findByText("Logs");
|
|
||||||
fireEvent.click(logsAction);
|
|
||||||
|
|
||||||
// LogStreamPanel should be rendered (look for dialog title)
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText(/Log Stream/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("LogStreamPanel receives correct props from PodList", async () => {
|
|
||||||
// Mock streamPodLogsCmd
|
|
||||||
mockInvoke.mockImplementation(async (cmd: string) => {
|
|
||||||
if (cmd === "stream_pod_logs") {
|
|
||||||
return "test-stream-123";
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
});
|
|
||||||
|
|
||||||
render(<PodList pods={[pod]} clusterId="c1" namespace="default" />);
|
|
||||||
|
|
||||||
// Open action menu and click Logs
|
|
||||||
const buttons = screen.getAllByRole("button");
|
|
||||||
const actionButton = buttons.find(btn => btn.getAttribute("aria-label") === "Actions");
|
|
||||||
if (!actionButton) throw new Error("Action button not found");
|
|
||||||
fireEvent.click(actionButton);
|
|
||||||
|
|
||||||
const logsAction = await screen.findByText("Logs");
|
|
||||||
fireEvent.click(logsAction);
|
|
||||||
|
|
||||||
// Verify dialog title contains pod name
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText(/Log Stream — test-pod/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Verify container dropdown shows containers
|
|
||||||
const select = screen.getByRole("combobox");
|
|
||||||
expect(select).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// ─── 2. Smart Positioning for ResourceActionMenu ─────────────────────────────
|
|
||||||
|
|
||||||
describe("ResourceActionMenu – smart positioning", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
// Mock getBoundingClientRect
|
|
||||||
Element.prototype.getBoundingClientRect = vi.fn(() => ({
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
toJSON: () => {},
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
it("flips menu upward when near bottom of viewport", async () => {
|
|
||||||
const actions = [
|
|
||||||
{ label: "Edit", icon: () => null, onClick: vi.fn() },
|
|
||||||
{ label: "Delete", icon: () => null, onClick: vi.fn() },
|
|
||||||
];
|
|
||||||
|
|
||||||
render(<ResourceActionMenu actions={actions} />);
|
|
||||||
|
|
||||||
const button = screen.getByLabelText("Actions");
|
|
||||||
|
|
||||||
// Mock the menu being near bottom (spaceBelow < 20px)
|
|
||||||
Element.prototype.getBoundingClientRect = vi.fn(function(this: Element) {
|
|
||||||
if (this.classList.contains("absolute")) {
|
|
||||||
return {
|
|
||||||
top: window.innerHeight - 100,
|
|
||||||
left: 0,
|
|
||||||
right: 200,
|
|
||||||
bottom: window.innerHeight + 100, // extends below viewport
|
|
||||||
width: 200,
|
|
||||||
height: 200,
|
|
||||||
x: 0,
|
|
||||||
y: window.innerHeight - 100,
|
|
||||||
toJSON: () => {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
toJSON: () => {},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
fireEvent.click(button);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
const menu = screen.getByText("Edit").closest("div.absolute");
|
|
||||||
expect(menu).toHaveClass("bottom-full");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("keeps menu downward when sufficient space below", async () => {
|
|
||||||
const actions = [
|
|
||||||
{ label: "Edit", icon: () => null, onClick: vi.fn() },
|
|
||||||
];
|
|
||||||
|
|
||||||
render(<ResourceActionMenu actions={actions} />);
|
|
||||||
|
|
||||||
const button = screen.getByLabelText("Actions");
|
|
||||||
|
|
||||||
// Mock the menu having plenty of space below
|
|
||||||
Element.prototype.getBoundingClientRect = vi.fn(function(this: Element) {
|
|
||||||
if (this.classList.contains("absolute")) {
|
|
||||||
return {
|
|
||||||
top: 100,
|
|
||||||
left: 0,
|
|
||||||
right: 200,
|
|
||||||
bottom: 300, // plenty of space below
|
|
||||||
width: 200,
|
|
||||||
height: 200,
|
|
||||||
x: 0,
|
|
||||||
y: 100,
|
|
||||||
toJSON: () => {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
toJSON: () => {},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
fireEvent.click(button);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
const menu = screen.getByText("Edit").closest("div.absolute");
|
|
||||||
expect(menu).toHaveClass("top-full");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// ─── 3. Dark Mode Text Visibility ────────────────────────────────────────────
|
|
||||||
|
|
||||||
describe("Dark mode – text visibility", () => {
|
|
||||||
it("applies dark class to html element when theme is dark", () => {
|
|
||||||
// We can't directly test App.tsx without mocking everything,
|
|
||||||
// but we can verify the logic by checking that globals.css
|
|
||||||
// has proper dark mode CSS variables defined
|
|
||||||
|
|
||||||
// This is a structural test - dark mode should apply to html, not a div
|
|
||||||
const root = document.documentElement;
|
|
||||||
root.classList.add("dark");
|
|
||||||
|
|
||||||
expect(root.classList.contains("dark")).toBe(true);
|
|
||||||
|
|
||||||
root.classList.remove("dark");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// ─── 4. YAML Editor Loading Race Condition ───────────────────────────────────
|
|
||||||
|
|
||||||
describe("YamlEditor – loading race condition fix", () => {
|
|
||||||
it("shows loader while Monaco is mounting", () => {
|
|
||||||
const { container } = render(
|
|
||||||
<YamlEditor
|
|
||||||
content="apiVersion: v1\nkind: Pod"
|
|
||||||
showControls={true}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Loader should be visible initially
|
|
||||||
const loader = container.querySelector('[role="status"]');
|
|
||||||
expect(loader).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("manages loading state properly", () => {
|
|
||||||
// Test that the component has proper loading state management
|
|
||||||
const { container } = render(
|
|
||||||
<YamlEditor
|
|
||||||
content="apiVersion: v1\nkind: Pod"
|
|
||||||
showControls={true}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Loader div should exist with proper styling
|
|
||||||
const loaderContainer = container.querySelector(".flex.items-center.justify-center");
|
|
||||||
expect(loaderContainer).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("waits for content before rendering in EditResourceModal", async () => {
|
|
||||||
mockInvoke.mockResolvedValue("apiVersion: v1\nkind: Pod\nmetadata:\n name: test");
|
|
||||||
|
|
||||||
const { container } = render(
|
|
||||||
<BrowserRouter>
|
|
||||||
<EditResourceModal
|
|
||||||
isOpen={true}
|
|
||||||
clusterId="c1"
|
|
||||||
namespace="default"
|
|
||||||
resourceType="pods"
|
|
||||||
resourceName="test-pod"
|
|
||||||
initialYaml="apiVersion: v1\nkind: Pod"
|
|
||||||
onClose={vi.fn()}
|
|
||||||
/>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Switch to YAML tab
|
|
||||||
const yamlTab = screen.getByText("YAML");
|
|
||||||
fireEvent.click(yamlTab);
|
|
||||||
|
|
||||||
// YamlEditor should render (with or without Monaco fully loaded)
|
|
||||||
await waitFor(() => {
|
|
||||||
const yamlContainer = container.querySelector(".flex.flex-col.gap-2");
|
|
||||||
expect(yamlContainer).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// ─── useSmartPosition Hook ────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
describe("useSmartPosition hook", () => {
|
|
||||||
it("returns correct positioning classes based on viewport space", async () => {
|
|
||||||
// This will be implemented in the hook file
|
|
||||||
// The hook should return { position: "top-full" | "bottom-full" }
|
|
||||||
// based on available space below the element
|
|
||||||
|
|
||||||
const mockRef = {
|
|
||||||
current: {
|
|
||||||
getBoundingClientRect: () => ({
|
|
||||||
top: window.innerHeight - 50,
|
|
||||||
bottom: window.innerHeight + 150,
|
|
||||||
left: 0,
|
|
||||||
right: 200,
|
|
||||||
width: 200,
|
|
||||||
height: 200,
|
|
||||||
x: 0,
|
|
||||||
y: window.innerHeight - 50,
|
|
||||||
toJSON: () => {},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
} as React.RefObject<HTMLDivElement>;
|
|
||||||
|
|
||||||
// Hook should detect that menu extends below viewport
|
|
||||||
// and return positioning that flips it upward
|
|
||||||
expect(mockRef.current).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user