+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 0% | +0/59 | +0% | +0/3 | +0% | +0/3 | +0% | +0/59 | +
| src/components | +
+
+ |
+ 77.89% | +5859/7522 | +62.23% | +206/331 | +34.58% | +46/133 | +77.89% | +5859/7522 | +
| src/components/common | +
+
+ |
+ 100% | +29/29 | +100% | +3/3 | +100% | +2/2 | +100% | +29/29 | +
| src/components/ui | +
+
+ |
+ 93.25% | +5004/5366 | +80.11% | +274/342 | +97.98% | +243/248 | +93.25% | +5004/5366 | +
| src/test/__mocks__ | +
+
+ |
+ 0% | +0/11 | +0% | +0/1 | +0% | +0/1 | +0% | +0/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | + + + + + + + + + + + + + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc. +// SPDX-License-Identifier: Apache-2.0 +import { Dashboard } from "./components/Dashboard"; +import { ThemeProvider } from "./components/ThemeProvider"; + +export default function App() { + return ( + <ThemeProvider> + <div className="min-h-screen bg-background"> + <Dashboard /> + </div> + </ThemeProvider> + ); +} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc. +// SPDX-License-Identifier: Apache-2.0 +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from '/vite.svg' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> + <div> + <a href="https://vite.dev" target="_blank"> + <img src={viteLogo} className="logo" alt="Vite logo" /> + </a> + <a href="https://react.dev" target="_blank"> + <img src={reactLogo} className="logo react" alt="React logo" /> + </a> + </div> + <h1>Vite + React</h1> + <div className="card"> + <button onClick={() => setCount((count) => count + 1)}> + count is {count} + </button> + <p> + Edit <code>src/App.tsx</code> and save to test HMR + </p> + </div> + <p className="read-the-docs"> + Click on the Vite and React logos to learn more + </p> + </> + ) +} + +export default App + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +12x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "./ui/card";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import {
+ Search,
+ MoreHorizontal,
+ Plus,
+ Server,
+ Cpu,
+ MemoryStick,
+ HardDrive,
+} from "lucide-react";
+
+export function Cluster() {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // Mock data
+ const nodes = [
+ {
+ name: "master-node-1",
+ internalIP: "192.168.1.10",
+ os: "Ubuntu 22.04",
+ arch: "amd64",
+ cpuCapacity: "4",
+ memoryCapacity: "8Gi",
+ storage: "50Gi",
+ },
+ {
+ name: "worker-node-1",
+ internalIP: "192.168.1.11",
+ os: "Ubuntu 22.04",
+ arch: "amd64",
+ cpuCapacity: "8",
+ memoryCapacity: "16Gi",
+ storage: "100Gi",
+ },
+ {
+ name: "worker-node-2",
+ internalIP: "192.168.1.12",
+ os: "Ubuntu 22.04",
+ arch: "amd64",
+ cpuCapacity: "8",
+ memoryCapacity: "16Gi",
+ storage: "100Gi",
+ },
+ {
+ name: "worker-node-3",
+ internalIP: "192.168.1.13",
+ os: "Ubuntu 22.04",
+ arch: "arm64",
+ cpuCapacity: "8",
+ memoryCapacity: "16Gi",
+ storage: "100Gi",
+ },
+ ];
+
+
+
+ const filteredNodes = nodes.filter((node) =>
+ node.name.toLowerCase().includes(searchTerm.toLowerCase()),
+ );
+
+ return (
+ <div className="space-y-8">
+ <div className="flex items-center justify-between">
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground text-[20px]">
+ PULLPIRI Nodes
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ Monitor and manage your cluster nodes infrastructure
+ </p>
+ </div>
+ <Button className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-lg hover:shadow-xl transition-all gap-2">
+ <Plus className="w-4 h-4" />
+ Add Node
+ </Button>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <div className="relative flex-1 max-w-md">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="Search nodes..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10 h-12 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all"
+ />
+ </div>
+ <div className="flex items-center gap-3">
+ <Badge className="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-800 px-3 py-1">
+ <Server className="w-3 h-3 mr-1" />
+ {nodes.length} Nodes
+ </Badge>
+ </div>
+ </div>
+
+ {/* Nodes Table */}
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Server className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">
+ Cluster Nodes
+ </CardTitle>
+ <CardDescription>
+ Physical and virtual machines in your cluster
+ </CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">
+ Name
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ OS
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Arch
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Internal IP
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ CPU
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Memory
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Storage
+ </TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredNodes.map((node) => (
+ <TableRow
+ key={node.name}
+ className="border-border/30 hover:bg-muted/30 transition-colors"
+ >
+ <TableCell className="font-medium text-foreground">
+ {node.name}
+ </TableCell>
+ <TableCell className="text-sm">
+ {node.os}
+ </TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {node.arch}
+ </Badge>
+ </TableCell>
+ <TableCell className="font-mono text-sm text-muted-foreground">
+ {node.internalIP}
+ </TableCell>
+ <TableCell>
+ <div className="flex items-center gap-1">
+ <Cpu className="w-3 h-3 text-muted-foreground" />
+ <span className="font-mono text-sm">
+ {node.cpuCapacity}
+ </span>
+ </div>
+ </TableCell>
+ <TableCell>
+ <div className="flex items-center gap-1">
+ <MemoryStick className="w-3 h-3 text-muted-foreground" />
+ <span className="font-mono text-sm">
+ {node.memoryCapacity}
+ </span>
+ </div>
+ </TableCell>
+ <TableCell>
+ <div className="flex items-center gap-1">
+ <HardDrive className="w-3 h-3 text-muted-foreground" />
+ <span className="font-mono text-sm">
+ {node.storage}
+ </span>
+ </div>
+ </TableCell>
+ <TableCell>
+ <Button
+ variant="ghost"
+ size="sm"
+ className="w-8 h-8 hover:bg-muted"
+ >
+ <MoreHorizontal className="h-3 w-3" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +20x +20x +20x +20x +20x +20x +20x +20x +20x +20x +20x +20x +20x +4x +4x +12x +12x +12x +4x +4x +16x +4x +4x +4x +16x +4x +4x +4x +12x +4x +4x +4x +12x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Search, MoreHorizontal, Eye, Download, Database } from "lucide-react";
+
+interface ConfigMapsProps {
+ namespace: string;
+}
+
+export function ConfigMaps({ namespace }: ConfigMapsProps) {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // Mock data
+ const configMaps = [
+ {
+ name: "app-config",
+ keys: "app.properties, database.yaml",
+ age: "2d"
+ },
+ {
+ name: "nginx-config",
+ keys: "nginx.conf, ssl.conf",
+ age: "5d"
+ },
+ {
+ name: "redis-config",
+ keys: "redis.conf",
+ age: "1d"
+ },
+ {
+ name: "monitoring-config",
+ keys: "prometheus.yml, grafana-dashboard.json",
+ age: "7d"
+ }
+ ];
+
+ const secrets = [
+ {
+ name: "database-credentials",
+ type: "Opaque",
+ keys: "username, password",
+ age: "5d"
+ },
+ {
+ name: "tls-certificate",
+ type: "kubernetes.io/tls",
+ keys: "tls.crt, tls.key",
+ age: "30d"
+ },
+ {
+ name: "registry-secret",
+ type: "kubernetes.io/dockerconfigjson",
+ keys: ".dockerconfigjson",
+ age: "10d"
+ },
+ {
+ name: "api-keys",
+ type: "Opaque",
+ keys: "external-api-key, webhook-secret",
+ age: "2d"
+ }
+ ];
+
+ const persistentVolumes = [
+ {
+ name: "postgres-pv",
+ capacity: "10Gi",
+ accessModes: "RWO",
+ reclaimPolicy: "Retain",
+ status: "Bound",
+ claim: "default/postgres-pvc",
+ storageClass: "standard",
+ age: "15d"
+ },
+ {
+ name: "redis-pv",
+ capacity: "5Gi",
+ accessModes: "RWO",
+ reclaimPolicy: "Delete",
+ status: "Bound",
+ claim: "default/redis-pvc",
+ storageClass: "fast-ssd",
+ age: "7d"
+ },
+ {
+ name: "logs-pv",
+ capacity: "50Gi",
+ accessModes: "RWX",
+ reclaimPolicy: "Retain",
+ status: "Available",
+ claim: "N/A",
+ storageClass: "standard",
+ age: "30d"
+ }
+ ];
+
+ const persistentVolumeClaims = [
+ {
+ name: "postgres-pvc",
+ status: "Bound",
+ volume: "postgres-pv",
+ capacity: "10Gi",
+ accessModes: "RWO",
+ storageClass: "standard",
+ age: "15d"
+ },
+ {
+ name: "redis-pvc",
+ status: "Bound",
+ volume: "redis-pv",
+ capacity: "5Gi",
+ accessModes: "RWO",
+ storageClass: "fast-ssd",
+ age: "7d"
+ },
+ {
+ name: "backup-pvc",
+ status: "Pending",
+ volume: "N/A",
+ capacity: "20Gi",
+ accessModes: "RWO",
+ storageClass: "standard",
+ age: "5m"
+ }
+ ];
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case "Bound":
+ return <Badge className="bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-200 hover:bg-green-100 dark:hover:bg-green-950">Bound</Badge>;
+ case "Available":
+ return <Badge className="bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-950">Available</Badge>;
+ case "Pending":
+ return <Badge className="bg-yellow-100 dark:bg-yellow-950 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-100 dark:hover:bg-yellow-950">Pending</Badge>;
+ case "Failed":
+ return <Badge className="bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200 hover:bg-red-100 dark:hover:bg-red-950">Failed</Badge>;
+ default:
+ return <Badge variant="secondary">{status}</Badge>;
+ }
+ };
+
+ const getSecretTypeBadge = (type: string) => {
+ const shortType = type.replace("kubernetes.io/", "");
+ return <Badge variant="outline" className="font-mono text-xs">{shortType}</Badge>;
+ };
+
+ const filteredConfigMaps = configMaps.filter(cm =>
+ cm.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredSecrets = secrets.filter(secret =>
+ secret.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredPVs = persistentVolumes.filter(pv =>
+ pv.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredPVCs = persistentVolumeClaims.filter(pvc =>
+ pvc.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ return (
+ <div className="space-y-6">
+ <div className="flex items-center justify-between">
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground">
+ PULLPIRI Config & Storage
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ Manage configuration, secrets, and storage resources in <span className="font-semibold text-primary">"{namespace}"</span>
+ </p>
+ </div>
+ <Button className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-lg hover:shadow-xl transition-all">
+ Create ConfigMap
+ </Button>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <div className="relative flex-1 max-w-sm">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="Search resources..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10 h-12 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all"
+ />
+ </div>
+ </div>
+
+ <Tabs defaultValue="configmaps" className="space-y-6">
+ <TabsList className="bg-card/80 backdrop-blur-sm border border-border/30 shadow-lg">
+ <TabsTrigger value="configmaps" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">ConfigMaps</TabsTrigger>
+ <TabsTrigger value="secrets" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Secrets</TabsTrigger>
+ <TabsTrigger value="pvs" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Persistent Volumes</TabsTrigger>
+ <TabsTrigger value="pvcs" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Volume Claims</TabsTrigger>
+ </TabsList>
+
+ <TabsContent value="configmaps">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Database className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">ConfigMaps</CardTitle>
+ <CardDescription>Store configuration data as key-value pairs</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Data Keys</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredConfigMaps.map((configMap) => (
+ <TableRow key={configMap.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{configMap.name}</TableCell>
+ <TableCell className="text-sm text-muted-foreground max-w-md truncate" title={configMap.keys}>
+ {configMap.keys}
+ </TableCell>
+ <TableCell className="text-muted-foreground">{configMap.age}</TableCell>
+ <TableCell>
+ <div className="flex items-center gap-2">
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <Eye className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <Download className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </div>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="secrets">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Secrets</CardTitle>
+ <CardDescription>Store sensitive data such as passwords and API keys</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Type</TableHead>
+ <TableHead className="font-semibold text-foreground">Data Keys</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredSecrets.map((secret) => (
+ <TableRow key={secret.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{secret.name}</TableCell>
+ <TableCell>{getSecretTypeBadge(secret.type)}</TableCell>
+ <TableCell className="text-sm text-muted-foreground">{secret.keys}</TableCell>
+ <TableCell className="text-muted-foreground">{secret.age}</TableCell>
+ <TableCell>
+ <div className="flex items-center gap-2">
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <Eye className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </div>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="pvs">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Persistent Volumes</CardTitle>
+ <CardDescription>Cluster-wide storage resources</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Capacity</TableHead>
+ <TableHead className="font-semibold text-foreground">Access Modes</TableHead>
+ <TableHead className="font-semibold text-foreground">Reclaim Policy</TableHead>
+ <TableHead className="font-semibold text-foreground">Status</TableHead>
+ <TableHead className="font-semibold text-foreground">Claim</TableHead>
+ <TableHead className="font-semibold text-foreground">Storage Class</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredPVs.map((pv) => (
+ <TableRow key={pv.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{pv.name}</TableCell>
+ <TableCell className="text-foreground">{pv.capacity}</TableCell>
+ <TableCell>
+ <Badge variant="outline">{pv.accessModes}</Badge>
+ </TableCell>
+ <TableCell className="text-foreground">{pv.reclaimPolicy}</TableCell>
+ <TableCell>{getStatusBadge(pv.status)}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{pv.claim}</TableCell>
+ <TableCell className="text-foreground">{pv.storageClass}</TableCell>
+ <TableCell className="text-muted-foreground">{pv.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="pvcs">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Persistent Volume Claims</CardTitle>
+ <CardDescription>Storage requests by your applications</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Status</TableHead>
+ <TableHead className="font-semibold text-foreground">Volume</TableHead>
+ <TableHead className="font-semibold text-foreground">Capacity</TableHead>
+ <TableHead className="font-semibold text-foreground">Access Modes</TableHead>
+ <TableHead className="font-semibold text-foreground">Storage Class</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredPVCs.map((pvc) => (
+ <TableRow key={pvc.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{pvc.name}</TableCell>
+ <TableCell>{getStatusBadge(pvc.status)}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{pvc.volume}</TableCell>
+ <TableCell className="text-foreground">{pvc.capacity}</TableCell>
+ <TableCell>
+ <Badge variant="outline">{pvc.accessModes}</Badge>
+ </TableCell>
+ <TableCell className="text-foreground">{pvc.storageClass}</TableCell>
+ <TableCell className="text-muted-foreground">{pvc.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + + + + + + + + + + + + + + + + + +4x +4x +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x +4x +4x + + + + + + + + + + + + + + + + + + + + + + + +4x +4x +4x + + + + + + + + +4x +4x +4x + + + + + + +4x +4x +4x + + + + + + + + + + + + + +4x +4x +4x + + + + + + + + + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+//import { Textarea } from "./ui/textarea"; // 2025-09-23 comment out
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { Badge } from "./ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { ScrollArea } from "./ui/scroll-area";
+import { Separator } from "./ui/separator";
+import { Alert, AlertDescription } from "./ui/alert";
+import { Plus, X, Container, Settings, AlertTriangle, CheckCircle, Info, Cpu, MemoryStick } from "lucide-react";
+
+interface CreatePodDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ onCreatePod: (pod: any) => void;
+ onSuccess?: (newPod: any) => void; //2025-09-23 comment out
+}
+
+interface ContainerConfig {
+ name: string;
+ image: string;
+ ports: { containerPort: number; protocol: string }[];
+ env: { name: string; value: string }[];
+ resources: {
+ requests: { cpu: string; memory: string };
+ limits: { cpu: string; memory: string };
+ };
+}
+
+export function CreatePodDialog({ open, onOpenChange, onCreatePod }: CreatePodDialogProps) {
+ const [isCreating, setIsCreating] = useState(false);
+ const [activeTab, setActiveTab] = useState("basic");
+ const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+
+ // Pod configuration state
+ const [podConfig, setPodConfig] = useState({
+ name: "",
+ namespace: "default",
+ labels: {} as Record<string, string>,
+ nodeSelector: {} as Record<string, string>,
+ restartPolicy: "Always",
+ dnsPolicy: "ClusterFirst"
+ });
+
+ // Container configuration state
+ const [containers, setContainers] = useState<ContainerConfig[]>([
+ {
+ name: "",
+ image: "",
+ ports: [],
+ env: [],
+ resources: {
+ requests: { cpu: "100m", memory: "128Mi" },
+ limits: { cpu: "500m", memory: "512Mi" }
+ }
+ }
+ ]);
+
+ // Label management
+ const [newLabel, setNewLabel] = useState({ key: "", value: "" });
+
+ // Environment variable management
+ const [newEnvVar, setNewEnvVar] = useState({ name: "", value: "" });
+
+ // Port management
+ const [newPort, setNewPort] = useState({ containerPort: "", protocol: "TCP" });
+
+ // Validation
+ const validateConfiguration = () => {
+ const errors: Record<string, string> = {};
+
+ if (!podConfig.name.trim()) {
+ errors.podName = "Pod name is required";
+ } else if (!/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/.test(podConfig.name)) {
+ errors.podName = "Pod name must be lowercase alphanumeric with hyphens";
+ }
+
+ containers.forEach((container, index) => {
+ if (!container.name.trim()) {
+ errors[`containerName${index}`] = "Container name is required";
+ }
+ if (!container.image.trim()) {
+ errors[`containerImage${index}`] = "Container image is required";
+ }
+ });
+
+ setValidationErrors(errors);
+ return Object.keys(errors).length === 0;
+ };
+
+ // Handle pod creation
+ const handleCreatePod = async () => {
+ if (!validateConfiguration()) {
+ return;
+ }
+
+ setIsCreating(true);
+
+ try {
+ // Simulate API call
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Create pod object
+ const newPod = {
+ name: podConfig.name,
+ image: containers[0].image,
+ labels: podConfig.labels,
+ node: "worker-node-01", // Mock node assignment
+ status: "Pending",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ age: "0s",
+ ready: "0/1",
+ restarts: 0,
+ ip: "Pending"
+ };
+
+ onCreatePod(newPod);
+ resetForm();
+ onOpenChange(false);
+
+ // Success notification would go here
+ console.log("✅ Pod created successfully:", newPod);
+ } catch (error) {
+ console.error("❌ Failed to create pod:", error);
+ } finally {
+ setIsCreating(false);
+ }
+ };
+
+ // Reset form
+ const resetForm = () => {
+ setPodConfig({
+ name: "",
+ namespace: "default",
+ labels: {},
+ nodeSelector: {},
+ restartPolicy: "Always",
+ dnsPolicy: "ClusterFirst"
+ });
+ setContainers([
+ {
+ name: "",
+ image: "",
+ ports: [],
+ env: [],
+ resources: {
+ requests: { cpu: "100m", memory: "128Mi" },
+ limits: { cpu: "500m", memory: "512Mi" }
+ }
+ }
+ ]);
+ setValidationErrors({});
+ setActiveTab("basic");
+ };
+
+ // Add label
+ const addLabel = () => {
+ if (newLabel.key.trim() && newLabel.value.trim()) {
+ setPodConfig(prev => ({
+ ...prev,
+ labels: { ...prev.labels, [newLabel.key.trim()]: newLabel.value.trim() }
+ }));
+ setNewLabel({ key: "", value: "" });
+ }
+ };
+
+ // Remove label
+ const removeLabel = (key: string) => {
+ setPodConfig(prev => {
+ const newLabels = { ...prev.labels };
+ delete newLabels[key];
+ return { ...prev, labels: newLabels };
+ });
+ };
+
+ // Add environment variable
+ const addEnvVar = (containerIndex: number) => {
+ if (newEnvVar.name.trim() && newEnvVar.value.trim()) {
+ setContainers(prev => prev.map((container, index) => {
+ if (index === containerIndex) {
+ return {
+ ...container,
+ env: [...container.env, { name: newEnvVar.name.trim(), value: newEnvVar.value.trim() }]
+ };
+ }
+ return container;
+ }));
+ setNewEnvVar({ name: "", value: "" });
+ }
+ };
+
+ // Add port
+ const addPort = (containerIndex: number) => {
+ const port = parseInt(newPort.containerPort);
+ if (port && port > 0 && port < 65536) {
+ setContainers(prev => prev.map((container, index) => {
+ if (index === containerIndex) {
+ return {
+ ...container,
+ ports: [...container.ports, { containerPort: port, protocol: newPort.protocol }]
+ };
+ }
+ return container;
+ }));
+ setNewPort({ containerPort: "", protocol: "TCP" });
+ }
+ };
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="w-[85vw] max-w-4xl h-[80vh] max-h-[900px] flex flex-col bg-card/95 backdrop-blur-sm">
+ <DialogHeader className="flex-shrink-0">
+ <div className="flex items-center gap-3">
+ <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+ <Container className="w-5 h-5 text-primary-foreground" />
+ </div>
+ <div>
+ <DialogTitle className="text-foreground">Create New Pod</DialogTitle>
+ <DialogDescription>
+ Configure and deploy a new pod to your Kubernetes cluster
+ </DialogDescription>
+ </div>
+ </div>
+ </DialogHeader>
+
+ <div className="flex-1 min-h-0">
+ <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
+ <TabsList className="bg-muted/50 border border-border/30 self-start">
+ <TabsTrigger value="basic" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">
+ <Container className="w-4 h-4 mr-2" />
+ Basic Info
+ </TabsTrigger>
+ <TabsTrigger value="containers" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">
+ <Settings className="w-4 h-4 mr-2" />
+ Containers
+ </TabsTrigger>
+ </TabsList>
+
+ <div className="flex-1 min-h-0 mt-4">
+ <ScrollArea className="h-full">
+ <TabsContent value="basic" className="space-y-6 mt-0">
+ <Card>
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Info className="w-4 h-4" />
+ Pod Metadata
+ </CardTitle>
+ <CardDescription>Basic information about your pod</CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="grid grid-cols-2 gap-4">
+ <div className="space-y-2">
+ <Label htmlFor="podName">Pod Name *</Label>
+ <Input
+ id="podName"
+ placeholder="my-app-pod"
+ value={podConfig.name}
+ onChange={(e) => setPodConfig(prev => ({ ...prev, name: e.target.value }))}
+ className={validationErrors.podName ? "border-destructive" : ""}
+ />
+ {validationErrors.podName && (
+ <Alert className="border-destructive/50">
+ <AlertTriangle className="h-4 w-4" />
+ <AlertDescription className="text-destructive">
+ {validationErrors.podName}
+ </AlertDescription>
+ </Alert>
+ )}
+ </div>
+ <div className="space-y-2">
+ <Label htmlFor="namespace">Namespace</Label>
+ <Select value={podConfig.namespace} onValueChange={(value) => setPodConfig(prev => ({ ...prev, namespace: value }))}>
+ <SelectTrigger>
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="default">default</SelectItem>
+ <SelectItem value="kube-system">kube-system</SelectItem>
+ <SelectItem value="monitoring">monitoring</SelectItem>
+ <SelectItem value="logging">logging</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+
+ <div className="grid grid-cols-2 gap-4">
+ <div className="space-y-2">
+ <Label>Restart Policy</Label>
+ <Select value={podConfig.restartPolicy} onValueChange={(value) => setPodConfig(prev => ({ ...prev, restartPolicy: value }))}>
+ <SelectTrigger>
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="Always">Always</SelectItem>
+ <SelectItem value="OnFailure">OnFailure</SelectItem>
+ <SelectItem value="Never">Never</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+ <div className="space-y-2">
+ <Label>DNS Policy</Label>
+ <Select value={podConfig.dnsPolicy} onValueChange={(value) => setPodConfig(prev => ({ ...prev, dnsPolicy: value }))}>
+ <SelectTrigger>
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="ClusterFirst">ClusterFirst</SelectItem>
+ <SelectItem value="Default">Default</SelectItem>
+ <SelectItem value="ClusterFirstWithHostNet">ClusterFirstWithHostNet</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+
+ <Separator />
+
+ <div className="space-y-4">
+ <Label>Labels</Label>
+ <div className="flex gap-2">
+ <Input
+ placeholder="Key"
+ value={newLabel.key}
+ onChange={(e) => setNewLabel(prev => ({ ...prev, key: e.target.value }))}
+ className="flex-1"
+ />
+ <Input
+ placeholder="Value"
+ value={newLabel.value}
+ onChange={(e) => setNewLabel(prev => ({ ...prev, value: e.target.value }))}
+ className="flex-1"
+ />
+ <Button onClick={addLabel} variant="outline" size="sm">
+ <Plus className="w-4 h-4" />
+ </Button>
+ </div>
+ <div className="flex gap-2 flex-wrap">
+ {Object.entries(podConfig.labels).map(([key, value]) => (
+ <Badge key={key} variant="secondary" className="gap-1">
+ {key}={value}
+ <button onClick={() => removeLabel(key)} className="ml-1">
+ <X className="w-3 h-3" />
+ </button>
+ </Badge>
+ ))}
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="containers" className="space-y-6 mt-0">
+ {containers.map((container, index) => (
+ <Card key={index}>
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Container className="w-4 h-4" />
+ Container {index + 1}
+ </CardTitle>
+ <CardDescription>Configure container image and settings</CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="grid grid-cols-2 gap-4">
+ <div className="space-y-2">
+ <Label htmlFor={`containerName${index}`}>Container Name *</Label>
+ <Input
+ id={`containerName${index}`}
+ placeholder="nginx"
+ value={container.name}
+ onChange={(e) => setContainers(prev => prev.map((c, i) => i === index ? { ...c, name: e.target.value } : c))}
+ className={validationErrors[`containerName${index}`] ? "border-destructive" : ""}
+ />
+ {validationErrors[`containerName${index}`] && (
+ <p className="text-sm text-destructive">{validationErrors[`containerName${index}`]}</p>
+ )}
+ </div>
+ <div className="space-y-2">
+ <Label htmlFor={`containerImage${index}`}>Container Image *</Label>
+ <Input
+ id={`containerImage${index}`}
+ placeholder="nginx:1.21"
+ value={container.image}
+ onChange={(e) => setContainers(prev => prev.map((c, i) => i === index ? { ...c, image: e.target.value } : c))}
+ className={validationErrors[`containerImage${index}`] ? "border-destructive" : ""}
+ />
+ {validationErrors[`containerImage${index}`] && (
+ <p className="text-sm text-destructive">{validationErrors[`containerImage${index}`]}</p>
+ )}
+ </div>
+ </div>
+
+ <Separator />
+
+ <div className="space-y-4">
+ <Label>Resource Limits</Label>
+ <div className="grid grid-cols-4 gap-4">
+ <div className="space-y-2">
+ <Label className="text-xs text-muted-foreground flex items-center gap-1">
+ <Cpu className="w-3 h-3" />
+ CPU Request
+ </Label>
+ <Input
+ placeholder="100m"
+ value={container.resources.requests.cpu}
+ onChange={(e) => setContainers(prev => prev.map((c, i) =>
+ i === index ? {
+ ...c,
+ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } }
+ } : c
+ ))}
+ />
+ </div>
+ <div className="space-y-2">
+ <Label className="text-xs text-muted-foreground flex items-center gap-1">
+ <MemoryStick className="w-3 h-3" />
+ Memory Request
+ </Label>
+ <Input
+ placeholder="128Mi"
+ value={container.resources.requests.memory}
+ onChange={(e) => setContainers(prev => prev.map((c, i) =>
+ i === index ? {
+ ...c,
+ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } }
+ } : c
+ ))}
+ />
+ </div>
+ <div className="space-y-2">
+ <Label className="text-xs text-muted-foreground flex items-center gap-1">
+ <Cpu className="w-3 h-3" />
+ CPU Limit
+ </Label>
+ <Input
+ placeholder="500m"
+ value={container.resources.limits.cpu}
+ onChange={(e) => setContainers(prev => prev.map((c, i) =>
+ i === index ? {
+ ...c,
+ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } }
+ } : c
+ ))}
+ />
+ </div>
+ <div className="space-y-2">
+ <Label className="text-xs text-muted-foreground flex items-center gap-1">
+ <MemoryStick className="w-3 h-3" />
+ Memory Limit
+ </Label>
+ <Input
+ placeholder="512Mi"
+ value={container.resources.limits.memory}
+ onChange={(e) => setContainers(prev => prev.map((c, i) =>
+ i === index ? {
+ ...c,
+ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } }
+ } : c
+ ))}
+ />
+ </div>
+ </div>
+ </div>
+
+ <Separator />
+
+ <div className="space-y-4">
+ <Label>Ports</Label>
+ <div className="flex gap-2">
+ <Input
+ placeholder="Port"
+ type="number"
+ value={newPort.containerPort}
+ onChange={(e) => setNewPort(prev => ({ ...prev, containerPort: e.target.value }))}
+ className="w-24"
+ />
+ <Select value={newPort.protocol} onValueChange={(value) => setNewPort(prev => ({ ...prev, protocol: value }))}>
+ <SelectTrigger className="w-24">
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="TCP">TCP</SelectItem>
+ <SelectItem value="UDP">UDP</SelectItem>
+ </SelectContent>
+ </Select>
+ <Button onClick={() => addPort(index)} variant="outline" size="sm">
+ <Plus className="w-4 h-4" />
+ </Button>
+ </div>
+ <div className="flex gap-2 flex-wrap">
+ {container.ports.map((port, portIndex) => (
+ <Badge key={portIndex} variant="outline">
+ {port.containerPort}/{port.protocol}
+ </Badge>
+ ))}
+ </div>
+ </div>
+
+ <Separator />
+
+ <div className="space-y-4">
+ <Label>Environment Variables</Label>
+ <div className="flex gap-2">
+ <Input
+ placeholder="Name"
+ value={newEnvVar.name}
+ onChange={(e) => setNewEnvVar(prev => ({ ...prev, name: e.target.value }))}
+ className="flex-1"
+ />
+ <Input
+ placeholder="Value"
+ value={newEnvVar.value}
+ onChange={(e) => setNewEnvVar(prev => ({ ...prev, value: e.target.value }))}
+ className="flex-1"
+ />
+ <Button onClick={() => addEnvVar(index)} variant="outline" size="sm">
+ <Plus className="w-4 h-4" />
+ </Button>
+ </div>
+ <div className="flex gap-2 flex-wrap">
+ {container.env.map((env, envIndex) => (
+ <Badge key={envIndex} variant="secondary">
+ {env.name}={env.value}
+ </Badge>
+ ))}
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+ ))}
+ </TabsContent>
+ </ScrollArea>
+ </div>
+ </Tabs>
+ </div>
+
+ <DialogFooter className="flex-shrink-0 border-t border-border/20 pt-4">
+ <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isCreating}>
+ Cancel
+ </Button>
+ <Button onClick={handleCreatePod} disabled={isCreating} className="min-w-[120px]">
+ {isCreating ? (
+ <>
+ <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+ Creating...
+ </>
+ ) : (
+ <>
+ <CheckCircle className="w-4 h-4 mr-2" />
+ Create Pod
+ </>
+ )}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +2x +2x +2x +2x +2x + + + + + +2x +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +2x +2x +2x +3x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + + +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x + + + + + +3x +3x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x + +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x + +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from "react";
+import { Sidebar } from "./Sidebar";
+import { Header } from "./Header";
+import { Overview } from "./Overview";
+import { Workloads } from "./Workloads";
+import { Services } from "./Services";
+import { Storage } from "./Storage";
+import { Cluster } from "./Cluster";
+import { Scenarios } from "./Scenarios";
+import { PodDetail } from "./PodDetail";
+
+type View =
+ | "overview"
+ | "workloads"
+ | "services"
+ | "storage"
+ | "cluster"
+ | "scenarios"
+ | "pod-detail";
+
+// Pod interface
+interface Pod {
+ name: string;
+ image: string;
+ labels: Record<string, string>;
+ node: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ age: string;
+ ready: string;
+ restarts: number;
+ ip: string;
+}
+
+export function Dashboard() {
+ const [currentView, setCurrentView] = useState<View>("workloads");
+ const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+ const [selectedPodName, setSelectedPodName] = useState<string>("");
+
+ // Move pods state to Dashboard level
+
+ // Lgsi changes: pod data
+ const [podsToUse, setPods] = useState<Pod[]>([]);
+ const [podsFetchSuccess, setPodsFetchSuccess] = useState(false);
+ const [recentEvents, setRecentEvents] = useState<any[]>([]); // Mock recent events
+
+ useEffect(() => {
+ const settingserviceApiUrl = import.meta.env.VITE_SETTING_SERVICE_API_URL;
+ const _timeout = import.meta.env.VITE_SETTING_SERVICE_TIMEOUT || 5000;
+ if (!settingserviceApiUrl) return;
+ const fetchPods = () => {
+ fetch(`${settingserviceApiUrl}/api/v1/metrics`)
+ .then(res => res.json())
+ .then(data => {
+ // Filter for containers only
+ console.log("Fetched metrics data:", data);
+ const containers = Array.isArray(data)
+ ? data.filter(
+ (item: any) =>
+ item.component === "container" &&
+ item.metric_type === "ContainerInfo" &&
+ item.value &&
+ item.value.value
+ )
+ : [];
+ if (containers.length > 0) {
+ // Map API data to Pod[]
+ const mappedPods = containers.map((item: any, idx: number) => {
+ const val = item.value.value;
+ let age = item.timestamp || "";
+ if (val.state && val.state.StartedAt) {
+ const started = new Date(val.state.StartedAt);
+ const now = new Date();
+ const diffMs = now.getTime() - started.getTime();
+ const diffSec = Math.floor(diffMs / 1000);
+ if (diffSec < 60) age = `${diffSec}s`;
+ else if (diffSec < 3600) age = `${Math.floor(diffSec / 60)}m`;
+ else if (diffSec < 86400) age = `${Math.floor(diffSec / 3600)}h`;
+ else age = `${Math.floor(diffSec / 86400)}d`;
+ }
+
+ // Format CPU usage (show as millicores if possible)
+ let cpuUsage = "";
+ if (val.stats?.CpuTotalUsage) {
+ const cpuRaw = Number(val.stats.CpuTotalUsage);
+ if (!isNaN(cpuRaw)) {
+ // Show as millicores (m) if value is large, else as cores
+ cpuUsage = cpuRaw >= 1000000
+ ? `${(cpuRaw / 1000000).toFixed(2)} cores`
+ : `${cpuRaw} m`;
+ }
+ }
+
+ // Format memory usage (show as MB or KB)
+ let memoryUsage = "";
+ if (val.stats?.MemoryUsage) {
+ const memRaw = Number(val.stats.MemoryUsage);
+ if (!isNaN(memRaw)) {
+ if (memRaw > 1024 * 1024) {
+ memoryUsage = `${(memRaw / 1024 / 1024).toFixed(2)} MB`;
+ } else if (memRaw > 1024) {
+ memoryUsage = `${(memRaw / 1024).toFixed(2)} KB`;
+ } else {
+ memoryUsage = `${memRaw} B`;
+ }
+ }
+ }
+
+ return {
+ name: (val.names && val.names[0]) || val.id || `pod-${idx}`,
+ image: val.image || "",
+ labels: item.labels || {},
+ node: (val.state && (val.state.node_name || val.state.hostname)) || (val.config.Hostname) || "",
+ status: (val.state && (val.state.status || val.state.Status)) || "",
+ cpuUsage: val.stats.CpuTotalUsage,
+ memoryUsage,
+ age,
+ ready: "", // Not available in this API, leave blank or compute if possible
+ restarts: 0, // Not available, default to 0
+ ip: item.labels?.ip || "",
+ };
+ });
+ setPods(mappedPods);
+ setPodsFetchSuccess(true);
+ console.log("✅ Pods API (metrics) fetched:", mappedPods);
+ setRecentEvents(prev => {
+ const newEvent = {
+ type: "Fetched",
+ resource: "Pod",
+ name: "Pods fetch success",
+ time: new Date().toLocaleTimeString(),
+ status: "success",
+ };
+
+ // Find the most recent event for this resource
+ const latestSameResourceEvent = prev.find(
+ e => e.resource === newEvent.resource
+ );
+
+ // Only add if the latest event for this resource is not the same type, status, and name
+ if (
+ latestSameResourceEvent &&
+ latestSameResourceEvent.type === newEvent.type &&
+ latestSameResourceEvent.status === newEvent.status &&
+ latestSameResourceEvent.name === newEvent.name
+ ) {
+ return prev;
+ }
+ return [newEvent, ...prev];
+ });
+ } else {
+ setPodsFetchSuccess(false);
+ }
+ })
+ .catch(e => {
+ setPodsFetchSuccess(false);
+ console.error("❌ Pods API (metrics) fetch failed:", e);
+
+ setRecentEvents(prev => {
+ const newEvent = {
+ type: "Fetched",
+ resource: "Pod",
+ name: "Pods fetch failed",
+ time: new Date().toLocaleTimeString(),
+ status: "error",
+ };
+
+ // Find the most recent event for this resource
+ const latestSameResourceEvent = prev.find(
+ e => e.resource === newEvent.resource
+ );
+
+ // Only add if the latest event for this resource is not the same type, status, and name
+ if (
+ latestSameResourceEvent &&
+ latestSameResourceEvent.type === newEvent.type &&
+ latestSameResourceEvent.status === newEvent.status &&
+ latestSameResourceEvent.name === newEvent.name
+ ) {
+ return prev;
+ }
+ return [newEvent, ...prev];
+ });
+
+ });
+ }
+
+ fetchPods();
+ const interval = setInterval(fetchPods, _timeout);
+ return () => clearInterval(interval);
+
+ }, []);
+
+ const pods = podsFetchSuccess ? podsToUse : [];
+
+ // const pods = podsFetchSuccess && podsToUse.length > 0
+ // ? podsToUse
+ // : [
+ // {
+ // name: "frontend-app-7d4b8c9f8d-xyz12",
+ // image: "nginx:1.21",
+ // labels: { app: "frontend", version: "v1.2.0" },
+ // node: "worker-node-1",
+ // status: "Running",
+ // cpuUsage: "45m",
+ // memoryUsage: "128Mi",
+ // age: "2d",
+ // ready: "1/1",
+ // restarts: 0,
+ // ip: "10.244.1.15",
+ // },
+ // {
+ // name: "frontend-app-7d4b8c9f8d-abc34",
+ // image: "nginx:1.21",
+ // labels: { app: "frontend", version: "v1.2.0" },
+ // node: "worker-node-2",
+ // status: "Running",
+ // cpuUsage: "38m",
+ // memoryUsage: "115Mi",
+ // age: "2d",
+ // ready: "1/1",
+ // restarts: 0,
+ // ip: "10.244.2.18",
+ // },
+ // {
+ // name: "backend-api-5f6a7b8c9d-def56",
+ // image: "node:18-alpine",
+ // labels: { app: "backend", tier: "api" },
+ // node: "worker-node-1",
+ // status: "Running",
+ // cpuUsage: "120m",
+ // memoryUsage: "256Mi",
+ // age: "5d",
+ // ready: "1/1",
+ // restarts: 1,
+ // ip: "10.244.1.22",
+ // },
+ // {
+ // name: "redis-cache-8e9f0a1b2c-ghi78",
+ // image: "redis:7-alpine",
+ // labels: { app: "redis", role: "cache" },
+ // node: "worker-node-3",
+ // status: "Running",
+ // cpuUsage: "25m",
+ // memoryUsage: "64Mi",
+ // age: "1d",
+ // ready: "1/1",
+ // restarts: 0,
+ // ip: "10.244.3.9",
+ // },
+ // {
+ // name: "database-migration-1a2b3c4d5e-jkl90",
+ // image: "postgres:14",
+ // labels: { job: "migration", app: "database" },
+ // node: "worker-node-2",
+ // status: "Pending",
+ // cpuUsage: "0m",
+ // memoryUsage: "0Mi",
+ // age: "30m",
+ // ready: "0/1",
+ // restarts: 0,
+ // ip: "N/A",
+ // },
+ // ];
+
+ // Calculate running pods count
+ const runningPodsCount = pods.filter(
+ (pod) => pod.status === "Running"
+ ).length;
+
+ const handleViewChange = (view: View, podName?: string) => {
+ setCurrentView(view);
+ if (podName) {
+ setSelectedPodName(podName);
+ }
+ };
+
+ const renderContent = () => {
+ switch (currentView) {
+ case "overview":
+ return <Overview />;
+ case "workloads":
+ return (
+ <Workloads
+ onPodClick={(podName) => handleViewChange("pod-detail", podName)}
+ pods={pods}
+ setPods={setPods}
+ recentEvents={recentEvents}
+ setRecentEvents={setRecentEvents}
+ />
+ );
+ case "services":
+ return <Services />;
+ case "storage":
+ return <Storage />;
+ case "cluster":
+ return <Cluster />;
+ case "scenarios":
+ return <Scenarios namespace="default" />; //2025-09-23 comment out
+ case "pod-detail":
+ const selectedPod = pods.find((pod) => pod.name === selectedPodName);
+ return (
+ <PodDetail
+ podName={selectedPodName}
+ podData={selectedPod}
+ onBack={() => setCurrentView("workloads")}
+ />
+ );
+ default:
+ return <Overview />;
+ }
+ };
+
+ return (
+ <div className="min-h-screen bg-gradient-to-br from-background via-primary/5 to-chart-1/10 dark:from-background dark:via-background dark:to-chart-1/20 transition-colors duration-300">
+ {/* Desktop Layout: 1024px and up */}
+ <div className="hidden lg:flex h-screen">
+ <Sidebar
+ currentView={currentView === "pod-detail" ? "workloads" : currentView}
+ onViewChange={setCurrentView}
+ collapsed={sidebarCollapsed}
+ onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
+ />
+ <div className="flex-1 flex flex-col min-w-0">
+ <Header podCount={runningPodsCount} pods={pods} />
+ <main className="flex-1 overflow-auto">
+ <div className="h-full p-4 xl:p-6 2xl:p-8">
+ <div className="max-w-none 2xl:max-w-[1600px] mx-auto h-full">
+ {renderContent()}
+ </div>
+ </div>
+ </main>
+ </div>
+ </div>
+
+ {/* Tablet Layout: 768px to 1023px */}
+ <div className="hidden md:flex lg:hidden h-screen">
+ <Sidebar
+ currentView={currentView === "pod-detail" ? "workloads" : currentView}
+ onViewChange={setCurrentView}
+ collapsed={true}
+ onToggle={() => { }}
+ />
+ <div className="flex-1 flex flex-col min-w-0">
+ <Header compact={true} podCount={runningPodsCount} pods={pods} />
+ <main className="flex-1 overflow-auto">
+ <div className="h-full p-4">
+ <div className="max-w-none mx-auto h-full">{renderContent()}</div>
+ </div>
+ </main>
+ </div>
+ </div>
+
+ {/* Mobile Layout: Below 768px */}
+ <div className="flex md:hidden flex-col h-screen">
+ <Header mobile={true} podCount={runningPodsCount} pods={pods} />
+ <div className="flex-1 flex">
+ <Sidebar
+ currentView={
+ currentView === "pod-detail" ? "workloads" : currentView
+ }
+ onViewChange={setCurrentView}
+ mobile={true}
+ />
+ <main className="flex-1 overflow-auto">
+ <div className="h-full p-3">
+ <div className="max-w-none mx-auto h-full">{renderContent()}</div>
+ </div>
+ </main>
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +64x +8x +8x +8x +56x +56x +56x +56x +8x +8x +57x +1x +1x +56x +56x +8x +8x +1x +1x +1x +1x + +1x + +1x + +1x + +1x +1x +8x +8x +1x +1x +8x +8x + + +8x +8x +1x +1x +1x +1x +1x +8x +8x +1x +1x +8x +8x +8x +1x +1x +7x +7x +7x +1x +1x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +49x +49x +49x +49x +49x +49x +7x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +49x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +57x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +1x +1x +1x +1x +1x +1x +1x +1x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState, useRef/*, useEffect */} from "react"; // 2025-09-23 comment out
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import {
+ GitBranch,
+ Box,
+ Package,
+ Activity,
+ ZoomIn,
+ ZoomOut,
+ RotateCcw,
+ //Maximize2, // 2025-09-23 comment out
+ Search,
+} from "lucide-react";
+import { Input } from "./ui/input";
+
+interface Node {
+ id: string;
+ label: string;
+ type: "scenario" | "pod";
+ status: "running" | "stopped" | "starting" | "pending";
+ x: number;
+ y: number;
+ color: string;
+}
+
+interface Edge {
+ from: string;
+ to: string;
+}
+
+interface DependenciesProps {
+ namespace: string;
+}
+
+export function Dependencies({ namespace }: DependenciesProps) {
+ const svgRef = useRef<SVGSVGElement>(null);
+ const [zoom, setZoom] = useState(1);
+ const [panX, setPanX] = useState(0);
+ const [panY, setPanY] = useState(0);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedNode, setSelectedNode] = useState<string | null>(null);
+
+ // Define nodes and edges data
+ const nodes: Node[] = [
+ // Scenarios
+ {
+ id: "ad_driving",
+ label: "AD Driving",
+ type: "scenario",
+ status: "running",
+ x: 200,
+ y: 100,
+ color: "#3b82f6"
+ },
+ {
+ id: "manual_driving",
+ label: "Manual Driving",
+ type: "scenario",
+ status: "stopped",
+ x: 200,
+ y: 300,
+ color: "#6b7280"
+ },
+ {
+ id: "emergency_mode",
+ label: "Emergency Mode",
+ type: "scenario",
+ status: "starting",
+ x: 200,
+ y: 500,
+ color: "#f59e0b"
+ },
+ // Pods
+ {
+ id: "autonomous_algo",
+ label: "자동주행알고리즘",
+ type: "pod",
+ status: "running",
+ x: 500,
+ y: 80,
+ color: "#10b981"
+ },
+ {
+ id: "vehicle_monitor",
+ label: "차량상태모니터링",
+ type: "pod",
+ status: "running",
+ x: 600,
+ y: 250,
+ color: "#10b981"
+ },
+ {
+ id: "driver_assist",
+ label: "운전자보조시스템",
+ type: "pod",
+ status: "stopped",
+ x: 500,
+ y: 320,
+ color: "#6b7280"
+ },
+ {
+ id: "emergency_brake",
+ label: "응급제동시스템",
+ type: "pod",
+ status: "starting",
+ x: 500,
+ y: 480,
+ color: "#f59e0b"
+ },
+ {
+ id: "emergency_comm",
+ label: "비상통신모듈",
+ type: "pod",
+ status: "pending",
+ x: 500,
+ y: 520,
+ color: "#f97316"
+ }
+ ];
+
+ const edges: Edge[] = [
+ // AD Driving connections
+ { from: "ad_driving", to: "autonomous_algo" },
+ { from: "ad_driving", to: "vehicle_monitor" },
+
+ // Manual Driving connections
+ { from: "manual_driving", to: "driver_assist" },
+ { from: "manual_driving", to: "vehicle_monitor" },
+
+ // Emergency Mode connections
+ { from: "emergency_mode", to: "emergency_brake" },
+ { from: "emergency_mode", to: "emergency_comm" },
+ { from: "emergency_mode", to: "vehicle_monitor" }
+ ];
+
+ const filteredNodes = nodes.filter(node =>
+ node.label.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredEdges = edges.filter(edge => {
+ const fromNode = filteredNodes.find(n => n.id === edge.from);
+ const toNode = filteredNodes.find(n => n.id === edge.to);
+ return fromNode && toNode;
+ });
+
+ const getNodeColor = (node: Node) => {
+ if (selectedNode === node.id) {
+ return "#dc2626"; // Red for selected
+ }
+ return node.color;
+ };
+
+ const getStatusBadgeColor = (status: string) => {
+ switch (status) {
+ case "running":
+ return "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800";
+ case "stopped":
+ return "bg-gray-500/10 text-gray-600 border-gray-200 dark:border-gray-700";
+ case "starting":
+ return "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800";
+ case "pending":
+ return "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800";
+ default:
+ return "bg-gray-500/10 text-gray-600 border-gray-200 dark:border-gray-700";
+ }
+ };
+
+ const handleZoomIn = () => {
+ setZoom(prev => Math.min(prev * 1.2, 3));
+ };
+
+ const handleZoomOut = () => {
+ setZoom(prev => Math.max(prev / 1.2, 0.3));
+ };
+
+ const handleReset = () => {
+ setZoom(1);
+ setPanX(0);
+ setPanY(0);
+ setSelectedNode(null);
+ };
+
+ const handleNodeClick = (nodeId: string) => {
+ setSelectedNode(selectedNode === nodeId ? null : nodeId);
+ };
+
+ // Calculate connected nodes for highlighting
+ const getConnectedNodes = (nodeId: string) => {
+ const connected = new Set<string>();
+ edges.forEach(edge => {
+ if (edge.from === nodeId) connected.add(edge.to);
+ if (edge.to === nodeId) connected.add(edge.from);
+ });
+ return connected;
+ };
+
+ const connectedNodes = selectedNode ? getConnectedNodes(selectedNode) : new Set<string>();
+
+ return (
+ <div className="space-y-6">
+ {/* Header */}
+ <div className="flex items-center justify-between">
+ <div>
+ <h1 className="mb-2">Dependencies</h1>
+ <p className="text-muted-foreground">
+ Visual representation of scenario and pod dependencies
+ </p>
+ </div>
+ <div className="flex items-center gap-2">
+ <Badge variant="secondary" className="gap-1">
+ <Package className="w-3 h-3" />
+ Namespace: {namespace}
+ </Badge>
+ </div>
+ </div>
+
+ {/* Controls */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardContent className="p-4">
+ <div className="flex items-center justify-between gap-4">
+ <div className="flex items-center gap-2 flex-1">
+ <Search className="w-4 h-4 text-muted-foreground" />
+ <Input
+ placeholder="Search nodes..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="max-w-xs"
+ />
+ </div>
+
+ <div className="flex items-center gap-1">
+ <Button variant="outline" size="sm" onClick={handleZoomIn}>
+ <ZoomIn className="w-4 h-4" />
+ </Button>
+ <Button variant="outline" size="sm" onClick={handleZoomOut}>
+ <ZoomOut className="w-4 h-4" />
+ </Button>
+ <Button variant="outline" size="sm" onClick={handleReset}>
+ <RotateCcw className="w-4 h-4" />
+ </Button>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Dependency Graph */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <GitBranch className="w-5 h-5 text-primary" />
+ Dependency Graph
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ <div className="relative w-full h-[600px] bg-muted/20 rounded-lg border border-border/30 overflow-hidden">
+ <svg
+ ref={svgRef}
+ width="100%"
+ height="100%"
+ className="cursor-grab active:cursor-grabbing"
+ style={{
+ transform: `translate(${panX}px, ${panY}px) scale(${zoom})`
+ }}
+ >
+ {/* Grid Pattern */}
+ <defs>
+ <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path
+ d="M 20 0 L 0 0 0 20"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="0.5"
+ className="text-border/20"
+ />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#grid)" />
+
+ {/* Edges */}
+ {filteredEdges.map((edge, index) => {
+ const fromNode = filteredNodes.find(n => n.id === edge.from);
+ const toNode = filteredNodes.find(n => n.id === edge.to);
+
+ if (!fromNode || !toNode) return null;
+
+ const isHighlighted = selectedNode &&
+ (edge.from === selectedNode || edge.to === selectedNode);
+
+ return (
+ <line
+ key={index}
+ x1={fromNode.x}
+ y1={fromNode.y}
+ x2={toNode.x}
+ y2={toNode.y}
+ stroke={isHighlighted ? "#dc2626" : "#6b7280"}
+ strokeWidth={isHighlighted ? 3 : 2}
+ strokeOpacity={isHighlighted ? 1 : 0.6}
+ markerEnd="url(#arrowhead)"
+ />
+ );
+ })}
+
+ {/* Arrow marker */}
+ <defs>
+ <marker
+ id="arrowhead"
+ markerWidth="10"
+ markerHeight="7"
+ refX="9"
+ refY="3.5"
+ orient="auto"
+ >
+ <polygon
+ points="0 0, 10 3.5, 0 7"
+ fill="#6b7280"
+ />
+ </marker>
+ </defs>
+
+ {/* Nodes */}
+ {filteredNodes.map((node) => {
+ const isConnected = selectedNode && connectedNodes.has(node.id);
+ const isSelected = selectedNode === node.id;
+ const opacity = selectedNode && !isSelected && !isConnected ? 0.3 : 1;
+
+ return (
+ <g key={node.id} style={{ opacity }}>
+ {/* Node circle */}
+ <circle
+ cx={node.x}
+ cy={node.y}
+ r={node.type === "scenario" ? 20 : 15}
+ fill={getNodeColor(node)}
+ stroke={isSelected ? "#dc2626" : "#ffffff"}
+ strokeWidth={isSelected ? 3 : 2}
+ className="cursor-pointer hover:stroke-primary transition-all duration-200"
+ onClick={() => handleNodeClick(node.id)}
+ />
+
+ {/* Node icon */}
+ {node.type === "scenario" ? (
+ <text
+ x={node.x}
+ y={node.y + 2}
+ textAnchor="middle"
+ fill="white"
+ fontSize="12"
+ className="pointer-events-none select-none"
+ >
+ S
+ </text>
+ ) : (
+ <text
+ x={node.x}
+ y={node.y + 2}
+ textAnchor="middle"
+ fill="white"
+ fontSize="10"
+ className="pointer-events-none select-none"
+ >
+ P
+ </text>
+ )}
+
+ {/* Node label */}
+ <text
+ x={node.x}
+ y={node.y + (node.type === "scenario" ? 35 : 30)}
+ textAnchor="middle"
+ className="fill-foreground text-xs pointer-events-none select-none"
+ style={{ fontSize: '11px' }}
+ >
+ {node.label}
+ </text>
+ </g>
+ );
+ })}
+ </svg>
+
+ {/* Zoom indicator */}
+ <div className="absolute top-4 right-4 bg-card/70 backdrop-blur-sm rounded-lg p-2 border border-border/30">
+ <span className="text-xs text-muted-foreground">
+ Zoom: {Math.round(zoom * 100)}%
+ </span>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Legend and Node Details */}
+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+ {/* Legend */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ Legend
+ </CardTitle>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="space-y-2">
+ <div className="flex items-center gap-3">
+ <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center">
+ <span className="text-white text-xs">S</span>
+ </div>
+ <span className="text-sm">Scenario</span>
+ </div>
+ <div className="flex items-center gap-3">
+ <div className="w-5 h-5 rounded-full bg-chart-1 flex items-center justify-center">
+ <span className="text-white text-xs">P</span>
+ </div>
+ <span className="text-sm">Pod</span>
+ </div>
+ </div>
+
+ <div className="pt-2 border-t border-border/20">
+ <p className="text-xs text-muted-foreground mb-2">Status Colors:</p>
+ <div className="grid grid-cols-2 gap-2 text-xs">
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
+ <span>Running</span>
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-gray-500"></div>
+ <span>Stopped</span>
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+ <span>Starting</span>
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-amber-500"></div>
+ <span>Pending</span>
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Selected Node Details */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Activity className="w-5 h-5 text-primary" />
+ Node Details
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ {selectedNode ? (
+ <div className="space-y-3">
+ {(() => {
+ const node = nodes.find(n => n.id === selectedNode);
+ if (!node) return null;
+
+ return (
+ <>
+ <div className="flex items-center justify-between">
+ <h4 className="font-medium">{node.label}</h4>
+ <Badge
+ variant="outline"
+ className={getStatusBadgeColor(node.status)}
+ >
+ {node.status.charAt(0).toUpperCase() + node.status.slice(1)}
+ </Badge>
+ </div>
+
+ <div className="space-y-2 text-sm">
+ <div>
+ <span className="text-muted-foreground">Type: </span>
+ <span className="capitalize">{node.type}</span>
+ </div>
+
+ <div>
+ <span className="text-muted-foreground">Connected to: </span>
+ <div className="mt-1 flex flex-wrap gap-1">
+ {Array.from(connectedNodes).map(nodeId => {
+ const connectedNode = nodes.find(n => n.id === nodeId);
+ return connectedNode ? (
+ <Badge key={nodeId} variant="secondary" className="text-xs">
+ {connectedNode.label}
+ </Badge>
+ ) : null;
+ })}
+ </div>
+ </div>
+ </div>
+ </>
+ );
+ })()}
+ </div>
+ ) : (
+ <div className="text-center text-muted-foreground py-8">
+ <Box className="w-12 h-12 mx-auto mb-3 opacity-50" />
+ <p>Click on a node to view details</p>
+ </div>
+ )}
+ </CardContent>
+ </Card>
+ </div>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +6x +6x +6x +6x +6x +6x + + + + +6x +6x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +4x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +4x +4x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Switch } from "./ui/switch";
+import { RefreshCw, /*Bell, */User, Search, Command, Sun, Moon } from "lucide-react"; // 2025-09-23 comment out
+import { Input } from "./ui/input";
+import { useTheme } from "./ThemeProvider";
+//import { useClusterHealth } from "./ui/use-cluster-health"; // 2025-09-23 comment out
+
+interface Pod {
+ name: string;
+ image: string;
+ labels: Record<string, string>;
+ node: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ age: string;
+ ready: string;
+ restarts: number;
+ ip: string;
+}
+
+interface HeaderProps {
+ compact?: boolean;
+ mobile?: boolean;
+ podCount?: number;
+ pods: Pod[];
+}
+
+export function Header({ compact = false, mobile = false, podCount/*, pods */}: HeaderProps) { // 2025-09-23 comment out
+ const { theme, toggleTheme } = useTheme();
+ //const clusterHealth = useClusterHealth(pods); // 2025-09-23 comment out
+ const [demoMode, setDemoMode] = useState(false);
+ const [dashboardIP, setDashboardIP] = useState("192.168.1.10");
+
+ const handleDemoToggle = async () => {
+ const newDemoMode = !demoMode;
+ setDemoMode(newDemoMode);
+
+ };
+
+ if (mobile) {
+ return (
+ <header className="h-16 bg-card/60 backdrop-blur-xl border-b border-border shadow-lg px-4 flex items-center justify-between relative">
+ {/* Background gradient */}
+ <div className="absolute inset-0 bg-gradient-to-r from-muted/10 to-muted/20 dark:from-muted/5 dark:to-muted/10"></div>
+
+ <div className="flex items-center gap-2 relative z-10">
+ <Badge className="gap-2 px-2 py-1 bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-800 text-xs">
+ <div className="w-2 h-2 bg-slate-500 rounded-full"></div>
+ {podCount || 0} Pods
+ </Badge>
+ </div>
+
+ <div className="flex items-center gap-2 relative z-10">
+ <Button
+ variant="ghost"
+ size="sm"
+ className="w-8 h-8 rounded-lg bg-card/60 hover:bg-card/80"
+ onClick={toggleTheme}
+ >
+ {theme === 'light' ? (
+ <Moon className="w-3 h-3" />
+ ) : (
+ <Sun className="w-3 h-3" />
+ )}
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 rounded-lg bg-primary hover:bg-primary/80">
+ <User className="w-3 h-3 text-primary-foreground" />
+ </Button>
+ </div>
+ </header>
+ );
+ }
+
+ const headerHeight = mobile ? "h-16" : compact ? "h-16" : "h-20";
+ const paddingX = mobile ? "px-4" : compact ? "px-6" : "px-8";
+
+ return (
+ <header className={`${headerHeight} bg-card/60 backdrop-blur-xl border-b border-border shadow-lg ${paddingX} flex items-center justify-between relative`}>
+ {/* Background gradient */}
+ <div className="absolute inset-0 bg-gradient-to-r from-muted/10 to-muted/20 dark:from-muted/5 dark:to-muted/10"></div>
+
+ <div className="flex items-center gap-3 lg:gap-6 relative z-10 flex-1 min-w-0">
+
+
+ {!compact && (
+ <div className="flex items-center gap-2 lg:gap-3 min-w-0">
+
+ <Badge className="gap-2 px-2 lg:px-3 py-1 lg:py-1.5 bg-orange-500 dark:bg-orange-600 text-white border-orange-600 dark:border-orange-700 hover:bg-orange-600 dark:hover:bg-orange-700 whitespace-nowrap text-xs lg:text-sm hidden sm:flex">
+ <div className="w-2 lg:w-2.5 h-2 lg:h-2.5 bg-white rounded-full"></div>
+ {podCount || 0} Pods Running
+ </Badge>
+ </div>
+ )}
+
+
+
+ {/* Search Bar - Only on larger screens */}
+ {!compact && (
+ <div className="relative ml-2 lg:ml-4 hidden xl:block flex-1 max-w-sm">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+ <Input
+ placeholder="Search resources..."
+ className="w-full pl-10 pr-12 h-8 lg:h-10 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all text-sm"
+ />
+ <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
+ <Command className="w-3 h-3 text-muted-foreground" />
+ <span className="text-xs text-muted-foreground">K</span>
+ </div>
+ </div>
+ )}
+ </div>
+
+ <div className="flex items-center gap-2 lg:gap-4 relative z-10">
+ {/* IP Configuration and Demo Toggle */}
+ {!compact && (
+ <div className="flex items-center gap-3 hidden lg:flex">
+ <div className="flex items-center gap-2">
+ <span className="text-sm font-medium text-foreground whitespace-nowrap">IP Input</span>
+ <div className="relative">
+ <Input
+ placeholder="Dashboard IP..."
+ value={dashboardIP}
+ onChange={(e) => setDashboardIP(e.target.value)}
+ className="w-36 h-9 bg-background border-2 border-primary/20 shadow-lg hover:shadow-xl focus:border-primary focus:shadow-xl transition-all text-sm font-mono font-medium text-[rgba(141,138,138,1)]"
+ />
+ </div>
+ </div>
+ <div className="flex items-center gap-3">
+ <span className="text-sm font-medium text-foreground">Demo</span>
+ <Switch
+ checked={demoMode}
+ onCheckedChange={handleDemoToggle}
+ className="data-[state=checked]:bg-emerald-500 data-[state=unchecked]:bg-muted scale-125"
+ />
+ </div>
+ </div>
+ )}
+
+ <Button
+ variant="ghost"
+ size="sm"
+ className={`${compact ? 'w-8 h-8' : 'w-10 h-10'} rounded-xl bg-card/60 hover:bg-card/80 hover:shadow-md transition-all`}
+ onClick={toggleTheme}
+ >
+ {theme === 'light' ? (
+ <Moon className="w-4 h-4" />
+ ) : (
+ <Sun className="w-4 h-4" />
+ )}
+ </Button>
+ <Button variant="ghost" size="sm" className={`${compact ? 'w-8 h-8' : 'w-10 h-10'} rounded-xl bg-card/60 hover:bg-card/80 hover:shadow-md transition-all hidden sm:flex`}>
+ <RefreshCw className="w-4 h-4" />
+ </Button>
+
+ <Button variant="ghost" size="sm" className={`${compact ? 'w-8 h-8' : 'w-10 h-10'} rounded-xl bg-card/60 hover:bg-card/80 hover:shadow-md transition-all`}>
+ <User className="w-4 h-4 text-primary-foreground" />
+ </Button>
+ </div>
+ </header>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x + + + + + + + + + + + + + + + + + + + + +4x +4x +4x +4x + + + + + + + + + + + + +4x +4x +4x +4x +4x + + + + + +4x +4x +4x + + + + + + + + + + + +4x +4x + + +4x +4x + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState, useEffect, useRef } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { ScrollArea } from "./ui/scroll-area";
+import { /*X, */Download, Pause, Play, RefreshCw } from "lucide-react"; // 2025-09-23 comment out
+
+interface LogsDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ podName: string;
+}
+
+export function LogsDialog({ open, onOpenChange, podName }: LogsDialogProps) {
+ const [logs, setLogs] = useState<string[]>([]);
+ const [isStreaming, setIsStreaming] = useState(true);
+ const [lastUpdate, setLastUpdate] = useState(new Date());
+ const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+ // Mock log data generator
+ const generateMockLog = () => {
+ const logLevels = ['INFO', 'WARN', 'ERROR', 'DEBUG'];
+ const messages = [
+ 'Application started successfully',
+ 'Database connection established',
+ 'Processing incoming request',
+ 'Cache miss for key: user_session_123',
+ 'Memory usage: 245MB/512MB',
+ 'HTTP GET /api/users - 200 OK',
+ 'Scheduled task completed',
+ 'Configuration reloaded',
+ 'Health check passed',
+ 'Background job queued'
+ ];
+
+ const level = logLevels[Math.floor(Math.random() * logLevels.length)];
+ const message = messages[Math.floor(Math.random() * messages.length)];
+ const timestamp = new Date().toISOString();
+
+ return `${timestamp} [${level}] ${message}`;
+ };
+
+ // Simulate log streaming
+ useEffect(() => {
+ if (!open || !isStreaming) return;
+
+ // Add initial logs
+ const initialLogs = Array.from({ length: 15 }, () => generateMockLog());
+ setLogs(initialLogs);
+
+ const interval = setInterval(() => {
+ const newLog = generateMockLog();
+ setLogs(prev => [...prev, newLog].slice(-100)); // Keep only last 100 logs
+ setLastUpdate(new Date());
+ }, 2000);
+
+ return () => clearInterval(interval);
+ }, [open, isStreaming]);
+
+ // Auto-scroll to bottom
+ useEffect(() => {
+ if (scrollAreaRef.current) {
+ const scrollElement = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]');
+ if (scrollElement) {
+ scrollElement.scrollTop = scrollElement.scrollHeight;
+ }
+ }
+ }, [logs]);
+
+ const handleDownloadLogs = () => {
+ const logContent = logs.join('\n');
+ const blob = new Blob([logContent], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `${podName}-logs.txt`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+
+ const toggleStreaming = () => {
+ setIsStreaming(!isStreaming);
+ };
+
+ const refreshLogs = () => {
+ setLogs([]);
+ setIsStreaming(true);
+ };
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="w-[75vw] min-w-[800px] max-w-6xl h-[45vh] min-h-[400px] max-h-[650px] flex flex-col bg-card/95 backdrop-blur-sm">
+ <DialogHeader className="flex-shrink-0">
+ <div className="flex items-center justify-between">
+ <div>
+ <DialogTitle className="text-foreground">Pod Logs</DialogTitle>
+ <DialogDescription>
+ Real-time logs for <span className="font-semibold text-primary">{podName}</span>
+ </DialogDescription>
+ </div>
+ <div className="flex items-center gap-2">
+ <Badge variant={isStreaming ? "default" : "secondary"} className="text-xs">
+ {isStreaming ? (
+ <>
+ <div className="w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></div>
+ Live
+ </>
+ ) : (
+ 'Paused'
+ )}
+ </Badge>
+ <span className="text-xs text-muted-foreground">
+ {lastUpdate.toLocaleTimeString()}
+ </span>
+ </div>
+ </div>
+ </DialogHeader>
+
+ <div className="flex items-center gap-2 py-2 border-b border-border/20">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={toggleStreaming}
+ className="h-8"
+ >
+ {isStreaming ? (
+ <>
+ <Pause className="w-3 h-3 mr-1" />
+ Pause
+ </>
+ ) : (
+ <>
+ <Play className="w-3 h-3 mr-1" />
+ Resume
+ </>
+ )}
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={refreshLogs}
+ className="h-8"
+ >
+ <RefreshCw className="w-3 h-3 mr-1" />
+ Refresh
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleDownloadLogs}
+ className="h-8"
+ >
+ <Download className="w-3 h-3 mr-1" />
+ Download
+ </Button>
+ <div className="flex-1" />
+ <span className="text-xs text-muted-foreground">
+ {logs.length} lines
+ </span>
+ </div>
+
+ <div className="flex-1 min-h-0">
+ <ScrollArea ref={scrollAreaRef} className="h-full w-full">
+ <div className="p-4 font-mono text-sm space-y-1 bg-muted/20 rounded-lg">
+ {logs.length === 0 ? (
+ <div className="text-muted-foreground italic text-center py-8">
+ No logs available
+ </div>
+ ) : (
+ logs.map((log, index) => (
+ <div key={index} className="hover:bg-accent/20 px-2 py-1 rounded text-xs leading-relaxed">
+ <span className="text-muted-foreground select-none mr-2">
+ {String(index + 1).padStart(3, '0')}
+ </span>
+ <span className="whitespace-pre-wrap break-all">{log}</span>
+ </div>
+ ))
+ )}
+ </div>
+ </ScrollArea>
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "./ui/card";
+import { Badge } from "./ui/badge";
+//import { Progress } from "./ui/progress"; // 2025-09-23 comment out
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ //BarChart, // 2025-09-23 comment out
+ //Bar, // 2025-09-23 comment out
+ PieChart,
+ Pie,
+ Cell,
+ //Legend, // 2025-09-23 comment out
+} from "recharts";
+import {
+ Server,
+ Box,
+ Network,
+ Database,
+ //AlertTriangle, // 2025-09-23 comment out
+ //CheckCircle, // 2025-09-23 comment out
+ TrendingUp,
+ Activity,
+ Zap,
+ HardDrive,
+ Cpu,
+ MemoryStick,
+} from "lucide-react";
+
+export function Overview() {
+ // Mock data
+ const clusterStats = {
+ nodes: { total: 3, ready: 3, notReady: 0 },
+ pods: { total: 42, running: 38, pending: 2, failed: 2 },
+ services: { total: 15, active: 15 },
+ deployments: { total: 12, ready: 10, updating: 2 },
+ };
+
+ const cpuUsageData = [
+ { time: "00:00", usage: 45, memory: 55 },
+ { time: "04:00", usage: 52, memory: 48 },
+ { time: "08:00", usage: 68, memory: 72 },
+ { time: "12:00", usage: 75, memory: 81 },
+ { time: "16:00", usage: 62, memory: 69 },
+ { time: "20:00", usage: 58, memory: 63 },
+ ];
+
+ const nodeData = [
+ {
+ name: "node-1",
+ cpu: 45,
+ memory: 67,
+ pods: 14,
+ status: "healthy",
+ },
+ {
+ name: "node-2",
+ cpu: 62,
+ memory: 54,
+ pods: 16,
+ status: "healthy",
+ },
+ {
+ name: "node-3",
+ cpu: 38,
+ memory: 71,
+ pods: 12,
+ status: "healthy",
+ },
+ ];
+
+ const podDistribution = [
+ { name: "Running", value: 38, color: "#10b981" },
+ { name: "Pending", value: 2, color: "#f59e0b" },
+ { name: "Failed", value: 2, color: "#ef4444" },
+ ];
+
+ const StatCard = ({
+ title,
+ value,
+ subtitle,
+ icon: Icon,
+ gradient,
+ trend,
+ }: any) => (
+ <Card className="relative overflow-hidden bg-card/80 backdrop-blur-sm border-border/20 shadow-xl hover:shadow-2xl transition-all duration-300 group">
+ <div
+ className={`absolute inset-0 bg-gradient-to-r ${gradient} opacity-5 group-hover:opacity-10 transition-opacity dark:opacity-10 dark:group-hover:opacity-20`}
+ ></div>
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 relative z-10">
+ <div>
+ <CardTitle className="text-sm font-semibold text-muted-foreground">
+ {title}
+ </CardTitle>
+ <div className="font-bold text-foreground mt-1">
+ {value}
+ </div>
+ </div>
+ <div
+ className={`w-14 h-14 rounded-2xl bg-gradient-to-r ${gradient} flex items-center justify-center shadow-lg`}
+ >
+ <Icon className="h-7 w-7 text-white" />
+ </div>
+ </CardHeader>
+ <CardContent className="relative z-10">
+ <div className="flex items-center gap-2 text-sm">
+ {trend && (
+ <div className="flex items-center gap-1">
+ <TrendingUp className="w-3 h-3 text-emerald-500" />
+ <span className="text-emerald-600 dark:text-emerald-400 font-medium">
+ +12%
+ </span>
+ </div>
+ )}
+ <span className="text-muted-foreground">
+ {subtitle}
+ </span>
+ </div>
+ </CardContent>
+ </Card>
+ );
+
+ return (
+ <div className="space-y-6 lg:space-y-8">
+ <div className="relative">
+ <div className="flex items-center gap-3 lg:gap-4 mb-2">
+ <div className="w-1 h-6 lg:h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="text-xl lg:text-2xl xl:text-3xl font-bold text-foreground">
+ PULLPIRI Cluster Overview
+ </h1>
+ </div>
+ <p className="text-sm lg:text-base text-muted-foreground ml-6 lg:ml-8">
+ Real-time monitoring and analytics for your PULLPIRI cluster • Last updated:{" "}
+ <span className="font-medium">2 minutes ago</span>
+ </p>
+ </div>
+
+ {/* Enhanced Stats Cards */}
+ <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-6">
+ <StatCard
+ title="Nodes"
+ value={clusterStats.nodes.total}
+ subtitle={`${clusterStats.nodes.ready} nodes ready`}
+ icon={Server}
+ gradient="from-slate-600 to-slate-700"
+ trend={true}
+ />
+ <StatCard
+ title="Active Pods"
+ value={clusterStats.pods.total}
+ subtitle={`${clusterStats.pods.running} running, ${clusterStats.pods.pending} pending`}
+ icon={Box}
+ gradient="from-slate-600 to-slate-700"
+ trend={true}
+ />
+ <StatCard
+ title="Services"
+ value={clusterStats.services.total}
+ subtitle="All services active"
+ icon={Network}
+ gradient="from-slate-600 to-slate-700"
+ trend={false}
+ />
+ <StatCard
+ title="Deployments"
+ value={clusterStats.deployments.total}
+ subtitle={`${clusterStats.deployments.ready} ready, ${clusterStats.deployments.updating} updating`}
+ icon={Database}
+ gradient="from-slate-600 to-slate-700"
+ trend={true}
+ />
+ </div>
+
+ {/* Enhanced Charts Section */}
+ <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 lg:gap-6">
+ <Card className="xl:col-span-2 bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader className="pb-4 lg:pb-6">
+ <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Activity className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-base lg:text-lg text-foreground">
+ Cluster Resource Usage Trends
+ </CardTitle>
+ <CardDescription className="text-sm">
+ Average CPU and Memory usage across all
+ nodes over the last 24 hours
+ </CardDescription>
+ </div>
+ </div>
+ {/* Chart Legend */}
+ <div className="flex flex-wrap items-center gap-4 lg:gap-6">
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-slate-600"></div>
+ <div className="flex items-center gap-1">
+ <Cpu className="w-4 h-4 text-slate-600 dark:text-slate-400" />
+ <span className="text-xs lg:text-sm font-medium text-foreground">
+ Cluster CPU
+ </span>
+ </div>
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="w-3 h-3 rounded-full bg-slate-500"></div>
+ <div className="flex items-center gap-1">
+ <MemoryStick className="w-4 h-4 text-slate-600 dark:text-slate-400" />
+ <span className="text-xs lg:text-sm font-medium text-foreground">
+ Cluster Memory
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="h-64 lg:h-80">
+ <ResponsiveContainer width="100%" height="100%">
+ <LineChart data={cpuUsageData}>
+ <CartesianGrid
+ strokeDasharray="3 3"
+ stroke="hsl(var(--border))"
+ />
+ <XAxis
+ dataKey="time"
+ stroke="hsl(var(--muted-foreground))"
+ fontSize={12}
+ />
+ <YAxis
+ stroke="hsl(var(--muted-foreground))"
+ label={{
+ value: "Usage (%)",
+ angle: -90,
+ position: "insideLeft",
+ }}
+ fontSize={12}
+ />
+ <Tooltip
+ contentStyle={{
+ backgroundColor: "hsl(var(--card))",
+ border: "1px solid hsl(var(--border))",
+ borderRadius: "12px",
+ boxShadow:
+ "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+ color: "hsl(var(--foreground))",
+ fontSize: "12px",
+ }}
+ labelFormatter={(label) => `Time: ${label}`}
+ formatter={(value, name) => [
+ `${value}%`,
+ name === "usage"
+ ? "Cluster CPU Usage"
+ : "Cluster Memory Usage",
+ ]}
+ />
+ <Line
+ type="monotone"
+ dataKey="usage"
+ stroke="#475569"
+ strokeWidth={2}
+ dot={{
+ fill: "#475569",
+ strokeWidth: 1,
+ r: 3,
+ }}
+ name="Cluster CPU Usage"
+ activeDot={{
+ r: 4,
+ stroke: "#475569",
+ strokeWidth: 2,
+ fill: "#ffffff",
+ }}
+ />
+ <Line
+ type="monotone"
+ dataKey="memory"
+ stroke="#64748b"
+ strokeWidth={2}
+ dot={{
+ fill: "#64748b",
+ strokeWidth: 1,
+ r: 3,
+ }}
+ name="Cluster Memory Usage"
+ activeDot={{
+ r: 4,
+ stroke: "#64748b",
+ strokeWidth: 2,
+ fill: "#ffffff",
+ }}
+ />
+ </LineChart>
+ </ResponsiveContainer>
+ </div>
+
+ {/* Additional Info Cards Below Chart */}
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-3 lg:gap-4 mt-4 lg:mt-6">
+ <div className="bg-slate-50 dark:bg-slate-950/30 p-3 lg:p-4 rounded-xl border border-slate-200 dark:border-slate-800">
+ <div className="flex items-center gap-2 lg:gap-3">
+ <div className="w-6 lg:w-8 h-6 lg:h-8 bg-slate-600 rounded-lg flex items-center justify-center">
+ <Cpu className="w-3 lg:w-4 h-3 lg:h-4 text-white" />
+ </div>
+ <div>
+ <p className="text-xs lg:text-sm font-medium text-slate-700 dark:text-slate-300">
+ Cluster CPU Usage
+ </p>
+ <p className="text-sm lg:text-base font-bold text-slate-800 dark:text-slate-200">
+ 58%
+ </p>
+ <p className="text-xs text-slate-600 dark:text-slate-400">
+ Average across all nodes
+ </p>
+ </div>
+ </div>
+ </div>
+ <div className="bg-slate-50 dark:bg-slate-950/30 p-3 lg:p-4 rounded-xl border border-slate-200 dark:border-slate-800">
+ <div className="flex items-center gap-2 lg:gap-3">
+ <div className="w-6 lg:w-8 h-6 lg:h-8 bg-slate-600 rounded-lg flex items-center justify-center">
+ <MemoryStick className="w-3 lg:w-4 h-3 lg:h-4 text-white" />
+ </div>
+ <div>
+ <p className="text-xs lg:text-sm font-medium text-slate-700 dark:text-slate-300">
+ Cluster Memory Usage
+ </p>
+ <p className="text-sm lg:text-base font-bold text-slate-800 dark:text-slate-200">
+ 63%
+ </p>
+ <p className="text-xs text-slate-600 dark:text-slate-400">
+ Average across all nodes
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Box className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-base lg:text-lg text-foreground">
+ Pod Distribution
+ </CardTitle>
+ <CardDescription className="text-sm">
+ Current pod status breakdown
+ </CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="h-48 lg:h-64">
+ <ResponsiveContainer width="100%" height="100%">
+ <PieChart>
+ <Pie
+ data={podDistribution}
+ cx="50%"
+ cy="50%"
+ innerRadius={40}
+ outerRadius={70}
+ paddingAngle={5}
+ dataKey="value"
+ >
+ {podDistribution.map((entry, index) => (
+ <Cell
+ key={`cell-${index}`}
+ fill={entry.color}
+ />
+ ))}
+ </Pie>
+ <Tooltip
+ contentStyle={{
+ backgroundColor: "hsl(var(--card))",
+ border: "1px solid hsl(var(--border))",
+ borderRadius: "8px",
+ color: "hsl(var(--foreground))",
+ fontSize: "12px",
+ }}
+ />
+ </PieChart>
+ </ResponsiveContainer>
+ </div>
+ <div className="space-y-2 mt-4">
+ {podDistribution.map((item, index) => (
+ <div
+ key={index}
+ className="flex items-center justify-between"
+ >
+ <div className="flex items-center gap-2">
+ <div
+ className="w-3 h-3 rounded-full"
+ style={{ backgroundColor: item.color }}
+ ></div>
+ <span className="text-xs lg:text-sm font-medium text-foreground">
+ {item.name}
+ </span>
+ </div>
+ <span className="text-xs lg:text-sm font-bold text-foreground">
+ {item.value}
+ </span>
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+
+ {/* Enhanced Node Status */}
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Server className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-base lg:text-lg text-foreground">
+ Node Performance
+ </CardTitle>
+ <CardDescription className="text-sm">
+ Real-time resource utilization across cluster
+ nodes
+ </CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-4 lg:space-y-6">
+ {nodeData.map((node/*, index*/) => ( // 2025-09-23 comment out
+ <div
+ key={node.name}
+ className="p-4 lg:p-6 bg-gradient-to-r from-accent/50 to-muted/50 rounded-2xl border border-border/30"
+ >
+ <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
+ <div className="flex items-center gap-3">
+ <div className="w-10 lg:w-12 h-10 lg:h-12 bg-primary rounded-xl flex items-center justify-center">
+ <HardDrive className="w-5 lg:w-6 h-5 lg:h-6 text-primary-foreground" />
+ </div>
+ <div>
+ <h3 className="text-sm lg:text-base font-bold text-foreground">
+ {node.name}
+ </h3>
+ <div className="flex items-center gap-2">
+ <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
+ <span className="text-xs lg:text-sm text-muted-foreground">
+ Healthy • {node.pods} pods
+ </span>
+ </div>
+ </div>
+ </div>
+ <Badge className="bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800 self-start sm:self-auto">
+ <Zap className="w-3 h-3 mr-1" />
+ Active
+ </Badge>
+ </div>
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+ <div>
+ <div className="flex justify-between items-center text-xs lg:text-sm mb-2">
+ <div className="flex items-center gap-2">
+ <Cpu className="w-3 lg:w-4 h-3 lg:h-4 text-slate-600 dark:text-slate-400" />
+ <span className="font-medium text-foreground">
+ CPU Usage
+ </span>
+ </div>
+ <span className="font-bold text-foreground">
+ {node.cpu}%
+ </span>
+ </div>
+ <div className="h-2 lg:h-3 bg-muted rounded-full overflow-hidden">
+ <div
+ className="h-full bg-slate-600 rounded-full transition-all duration-300"
+ style={{ width: `${node.cpu}%` }}
+ />
+ </div>
+ </div>
+ <div>
+ <div className="flex justify-between items-center text-xs lg:text-sm mb-2">
+ <div className="flex items-center gap-2">
+ <MemoryStick className="w-3 lg:w-4 h-3 lg:h-4 text-slate-600 dark:text-slate-400" />
+ <span className="font-medium text-foreground">
+ Memory Usage
+ </span>
+ </div>
+ <span className="font-bold text-foreground">
+ {node.memory}%
+ </span>
+ </div>
+ <div className="h-2 lg:h-3 bg-muted rounded-full overflow-hidden">
+ <div
+ className="h-full bg-slate-500 rounded-full transition-all duration-300"
+ style={{ width: `${node.memory}%` }}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x + +1x +1x + + + + +1x + + + + + +1x + + + + +1x +1x +1x +1x +1x +1x + + + + +1x + + + + +1x + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+//import { useState } from "react"; // 2025-09-23 comment out
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+// import { Separator } from "./ui/separator"; // 2025-09-23 comment out
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { ScrollArea } from "./ui/scroll-area";
+import {
+ ArrowLeft,
+ Box,
+ Copy,
+ Download,
+ //Play, // 2025-09-23 comment out
+ //Square, // 2025-09-23 comment out
+ RotateCcw,
+ Terminal,
+ FileText,
+ Activity,
+ Server,
+ Cpu,
+ MemoryStick,
+ //Network, // 2025-09-23 comment out
+ AlertCircle,
+} from "lucide-react";
+
+interface PodDetailProps {
+ podName: string;
+ podData?: {
+ name: string;
+ image: string;
+ labels: Record<string, string>;
+ node: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ age: string;
+ ready: string;
+ restarts: number;
+ ip: string;
+ };
+ onBack: () => void;
+}
+
+export function PodDetail({ podName, podData, onBack }: PodDetailProps) {
+ // Use actual pod data if available, otherwise fall back to mock data
+ const podInfo = podData ? {
+ name: podData.name,
+ namespace: "default",
+ status: podData.status,
+ restarts: podData.restarts,
+ age: podData.age,
+ node: podData.node,
+ ip: podData.ip,
+ image: podData.image,
+ cpuUsage: podData.cpuUsage,
+ memoryUsage: podData.memoryUsage,
+ labels: podData.labels,
+ annotations: {
+ "deployment.kubernetes.io/revision": "3",
+ "kubectl.kubernetes.io/last-applied-configuration": "...",
+ "prometheus.io/scrape": "true",
+ "prometheus.io/port": "8080"
+ }
+ } : {
+ // Fallback to mock data if podData is not available
+ name: podName,
+ namespace: "default",
+ status: "Running",
+ restarts: podName.includes("backend") ? 1 : 0,
+ age: podName.includes("frontend") ? "2d" : podName.includes("backend") ? "5d" : podName.includes("redis") ? "1d" : "30m",
+ node: podName.includes("xyz12") ? "worker-node-1" : podName.includes("abc34") ? "worker-node-2" : podName.includes("def56") ? "worker-node-1" : podName.includes("ghi78") ? "worker-node-3" : "worker-node-2",
+ ip: podName.includes("xyz12") ? "10.244.1.15" : podName.includes("abc34") ? "10.244.2.18" : podName.includes("def56") ? "10.244.1.22" : podName.includes("ghi78") ? "10.244.3.9" : "N/A",
+ image: podName.includes("frontend") ? "nginx:1.21" : podName.includes("backend") ? "node:18-alpine" : podName.includes("redis") ? "redis:7-alpine" : "postgres:14",
+ cpuUsage: podName.includes("backend") ? "120m" : podName.includes("frontend") ? "45m" : podName.includes("redis") ? "25m" : "0m",
+ memoryUsage: podName.includes("backend") ? "256Mi" : podName.includes("frontend") ? "128Mi" : podName.includes("redis") ? "64Mi" : "0Mi",
+ labels: podName.includes("frontend")
+ ? { app: "frontend", version: "v1.2.0", tier: "web" }
+ : podName.includes("backend")
+ ? { app: "backend", tier: "api", version: "v1.0.0" }
+ : podName.includes("redis")
+ ? { app: "redis", role: "cache", version: "v7.0" }
+ : { job: "migration", app: "database" },
+ annotations: {
+ "deployment.kubernetes.io/revision": "3",
+ "kubectl.kubernetes.io/last-applied-configuration": "...",
+ "prometheus.io/scrape": "true",
+ "prometheus.io/port": "8080"
+ }
+ };
+
+ const containers = [
+ {
+ name: podName.includes("frontend") ? "nginx" : podName.includes("backend") ? "api-server" : podName.includes("redis") ? "redis" : "postgres",
+ image: podInfo.image,
+ ready: podInfo.status === "Running",
+ restartCount: podInfo.restarts,
+ state: podInfo.status === "Running" ? "Running" : "Pending",
+ started: podInfo.age,
+ ports: podName.includes("frontend")
+ ? [{ containerPort: 80, protocol: "TCP" }, { containerPort: 443, protocol: "TCP" }]
+ : podName.includes("backend")
+ ? [{ containerPort: 8080, protocol: "TCP" }, { containerPort: 9090, protocol: "TCP" }]
+ : podName.includes("redis")
+ ? [{ containerPort: 6379, protocol: "TCP" }]
+ : [{ containerPort: 5432, protocol: "TCP" }],
+ env: podName.includes("frontend")
+ ? [
+ { name: "NGINX_PORT", value: "80" },
+ { name: "NGINX_HOST", value: "localhost" }
+ ]
+ : podName.includes("backend")
+ ? [
+ { name: "NODE_ENV", value: "production" },
+ { name: "PORT", value: "8080" },
+ { name: "DATABASE_URL", value: "postgresql://..." }
+ ]
+ : podName.includes("redis")
+ ? [
+ { name: "REDIS_PASSWORD", value: "***" },
+ { name: "REDIS_PORT", value: "6379" }
+ ]
+ : [
+ { name: "POSTGRES_DB", value: "myapp" },
+ { name: "POSTGRES_USER", value: "user" },
+ { name: "POSTGRES_PASSWORD", value: "***" }
+ ],
+ volumeMounts: podName.includes("frontend")
+ ? [
+ { name: "nginx-config", mountPath: "/etc/nginx/conf.d", readOnly: true },
+ { name: "static-content", mountPath: "/usr/share/nginx/html", readOnly: false }
+ ]
+ : podName.includes("backend")
+ ? [
+ { name: "app-config", mountPath: "/app/config", readOnly: true },
+ { name: "logs", mountPath: "/app/logs", readOnly: false }
+ ]
+ : podName.includes("redis")
+ ? [
+ { name: "redis-data", mountPath: "/data", readOnly: false },
+ { name: "redis-config", mountPath: "/etc/redis", readOnly: true }
+ ]
+ : [
+ { name: "postgres-data", mountPath: "/var/lib/postgresql/data", readOnly: false },
+ { name: "postgres-config", mountPath: "/etc/postgresql", readOnly: true }
+ ],
+ resources: {
+ requests: {
+ cpu: podName.includes("backend") ? "200m" : podName.includes("frontend") ? "100m" : podName.includes("redis") ? "50m" : "100m",
+ memory: podName.includes("backend") ? "256Mi" : podName.includes("frontend") ? "128Mi" : podName.includes("redis") ? "64Mi" : "256Mi"
+ },
+ limits: {
+ cpu: podName.includes("backend") ? "500m" : podName.includes("frontend") ? "200m" : podName.includes("redis") ? "100m" : "500m",
+ memory: podName.includes("backend") ? "512Mi" : podName.includes("frontend") ? "256Mi" : podName.includes("redis") ? "128Mi" : "512Mi"
+ }
+ }
+ }
+ ];
+
+
+
+ const logs = [
+ "2024-01-15T10:31:02.123Z [INFO] Application starting...",
+ "2024-01-15T10:31:02.456Z [INFO] Loading configuration from /etc/config",
+ "2024-01-15T10:31:02.789Z [INFO] Database connection established",
+ "2024-01-15T10:31:03.012Z [INFO] HTTP server listening on port 8080",
+ "2024-01-15T10:31:03.345Z [INFO] Health check endpoint ready",
+ "2024-01-15T10:31:03.678Z [INFO] Application ready to serve requests",
+ "2024-01-15T10:31:04.901Z [INFO] Processing request GET /api/health",
+ "2024-01-15T10:31:05.234Z [INFO] Request completed in 12ms",
+ "2024-01-15T10:31:10.567Z [INFO] Processing request GET /api/status",
+ "2024-01-15T10:31:10.890Z [INFO] Request completed in 8ms"
+ ];
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case "Running":
+ return (
+ <Badge className="bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800">
+ <div className="w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></div>
+ Running
+ </Badge>
+ );
+ case "Pending":
+ return (
+ <Badge className="bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-200 border-amber-200 dark:border-amber-800">
+ <div className="w-2 h-2 bg-amber-500 rounded-full mr-1"></div>
+ Pending
+ </Badge>
+ );
+ case "Failed":
+ return (
+ <Badge className="bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200 border-red-200 dark:border-red-800">
+ <AlertCircle className="w-3 h-3 mr-1" />
+ Failed
+ </Badge>
+ );
+ default:
+ return <Badge variant="secondary">{status}</Badge>;
+ }
+ };
+
+
+
+ return (
+ <div className="space-y-8">
+ <div className="flex items-center justify-between">
+ <div className="flex items-center gap-4">
+ <Button
+ variant="outline"
+ size="default"
+ onClick={onBack}
+ className="px-5 py-3 bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 border-slate-300 dark:border-slate-500 hover:border-slate-400 dark:hover:border-slate-400 hover:shadow-lg transition-all duration-200 gap-2 shadow-md cursor-pointer hover:scale-105 active:scale-95 font-medium text-slate-800 dark:text-slate-100"
+ >
+ <ArrowLeft className="w-5 h-5" />
+ <span>Back to Workloads</span>
+ </Button>
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground">
+ Pod Details
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ Detailed view and management of pod <span className="font-semibold text-primary">{podName}</span>
+ </p>
+ </div>
+ </div>
+ <div className="flex items-center gap-2">
+ <Button variant="outline" size="sm" className="gap-2">
+ <Terminal className="w-4 h-4" />
+ Exec
+ </Button>
+ <Button variant="outline" size="sm" className="gap-2">
+ <Download className="w-4 h-4" />
+ Download Logs
+ </Button>
+ <Button variant="outline" size="sm" className="gap-2">
+ <RotateCcw className="w-4 h-4" />
+ Restart
+ </Button>
+ </div>
+ </div>
+
+ {/* Pod Overview Cards */}
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader className="pb-3">
+ <div className="flex items-center justify-between">
+ <CardTitle className="text-sm">Status</CardTitle>
+ <Activity className="w-4 h-4 text-muted-foreground" />
+ </div>
+ </CardHeader>
+ <CardContent className="pt-0">
+ {getStatusBadge(podInfo.status)}
+ <p className="text-xs text-muted-foreground mt-2">
+ {podInfo.restarts} restarts
+ </p>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader className="pb-3">
+ <div className="flex items-center justify-between">
+ <CardTitle className="text-sm">Node</CardTitle>
+ <Server className="w-4 h-4 text-muted-foreground" />
+ </div>
+ </CardHeader>
+ <CardContent className="pt-0">
+ <p className="font-mono text-sm">{podInfo.node}</p>
+ <p className="text-xs text-muted-foreground mt-1">
+ IP: {podInfo.ip}
+ </p>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader className="pb-3">
+ <div className="flex items-center justify-between">
+ <CardTitle className="text-sm">CPU Usage</CardTitle>
+ <Cpu className="w-4 h-4 text-muted-foreground" />
+ </div>
+ </CardHeader>
+ <CardContent className="pt-0">
+ <p className="font-mono text-lg font-semibold">{podInfo.cpuUsage}</p>
+ <p className="text-xs text-muted-foreground">
+ Current usage
+ </p>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader className="pb-3">
+ <div className="flex items-center justify-between">
+ <CardTitle className="text-sm">Memory Usage</CardTitle>
+ <MemoryStick className="w-4 h-4 text-muted-foreground" />
+ </div>
+ </CardHeader>
+ <CardContent className="pt-0">
+ <p className="font-mono text-lg font-semibold">{podInfo.memoryUsage}</p>
+ <p className="text-xs text-muted-foreground">
+ Current usage
+ </p>
+ </CardContent>
+ </Card>
+ </div>
+
+ {/* Overview Section */}
+ <div>
+ <div className="flex items-center gap-3 mb-6">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Activity className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <h2 className="text-foreground">Overview</h2>
+ <p className="text-muted-foreground text-sm">Basic information and pod metadata</p>
+ </div>
+ </div>
+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Basic Information</CardTitle>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="grid grid-cols-3 gap-4 text-sm">
+ <div>
+ <p className="text-muted-foreground">Name</p>
+ <p className="font-mono">{podInfo.name}</p>
+ </div>
+ <div>
+ <p className="text-muted-foreground">Image</p>
+ <p className="font-mono">{podInfo.image}</p>
+ </div>
+ <div>
+ <p className="text-muted-foreground">Age</p>
+ <p className="font-mono">{podInfo.age}</p>
+ </div>
+ <div>
+ <p className="text-muted-foreground">Node</p>
+ <p className="font-mono">{podInfo.node}</p>
+ </div>
+ <div>
+ <p className="text-muted-foreground">Pod IP</p>
+ <p className="font-mono">{podInfo.ip}</p>
+ </div>
+ <div>
+ <p className="text-muted-foreground">Restarts</p>
+ <p className="font-mono">{podInfo.restarts}</p>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Labels</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <div className="flex flex-wrap gap-2">
+ {Object.entries(podInfo.labels).map(([key, value]) => (
+ <Badge key={key} variant="secondary" className="text-xs">
+ {key}={value}
+ </Badge>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl lg:col-span-2">
+ <CardHeader>
+ <CardTitle className="text-foreground">Annotations</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-2">
+ {Object.entries(podInfo.annotations).map(([key, value]) => (
+ <div key={key} className="flex items-center justify-between py-2 border-b border-border/20 last:border-0">
+ <span className="text-sm font-mono text-muted-foreground">{key}</span>
+ <span className="text-sm font-mono max-w-md truncate" title={value}>{value}</span>
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ </div>
+
+ {/* Containers Section */}
+ <div>
+ <div className="flex items-center gap-3 mb-6">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Box className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <h2 className="text-foreground">Containers</h2>
+ <p className="text-muted-foreground text-sm">Container instances running in this pod</p>
+ </div>
+ </div>
+ <div className="space-y-6">
+ {containers.map((container/*, index*/) => ( // 2025-09-23 comment out
+ <Card key={container.name} className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Box className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div className="flex-1">
+ <CardTitle className="text-foreground flex items-center gap-3">
+ {container.name}
+ <Badge className={container.ready
+ ? "bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200"
+ : "bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200"
+ }>
+ {container.state}
+ </Badge>
+ </CardTitle>
+ <CardDescription className="font-mono text-sm">
+ {container.image}
+ </CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent className="space-y-6">
+ {/* Basic Container Info */}
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-muted/20 rounded-lg">
+ <div>
+ <p className="text-xs text-muted-foreground">Status</p>
+ <p className="font-mono text-sm">{container.ready ? "Ready" : "Not Ready"}</p>
+ </div>
+ <div>
+ <p className="text-xs text-muted-foreground">Restarts</p>
+ <p className="font-mono text-sm">{container.restartCount}</p>
+ </div>
+ <div>
+ <p className="text-xs text-muted-foreground">Started</p>
+ <p className="font-mono text-sm">{container.started}</p>
+ </div>
+ <div>
+ <p className="text-xs text-muted-foreground">State</p>
+ <p className="font-mono text-sm">{container.state}</p>
+ </div>
+ </div>
+
+ {/* Container Details Tabs */}
+ <Tabs defaultValue="ports" className="w-full">
+ <TabsList className="grid w-full grid-cols-4">
+ <TabsTrigger value="ports">Ports</TabsTrigger>
+ <TabsTrigger value="env">Environment</TabsTrigger>
+ <TabsTrigger value="volumes">Volumes</TabsTrigger>
+ <TabsTrigger value="resources">Resources</TabsTrigger>
+ </TabsList>
+
+ <TabsContent value="ports" className="mt-4">
+ <div className="space-y-3">
+ <h4 className="font-medium text-foreground">Port Configuration</h4>
+ <div className="overflow-hidden rounded-lg border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/50">
+ <TableRow>
+ <TableHead>Container Port</TableHead>
+ <TableHead>Protocol</TableHead>
+ <TableHead>Name</TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {container.ports.map((port, portIndex) => (
+ <TableRow key={portIndex}>
+ <TableCell className="font-mono">{port.containerPort}</TableCell>
+ <TableCell>
+ <Badge variant="outline">{port.protocol}</Badge>
+ </TableCell>
+ <TableCell className="text-muted-foreground">
+ {port.containerPort === 80 ? "http" :
+ port.containerPort === 443 ? "https" :
+ port.containerPort === 8080 ? "api" :
+ port.containerPort === 9090 ? "metrics" :
+ port.containerPort === 6379 ? "redis" :
+ port.containerPort === 5432 ? "postgres" : "-"}
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ </TabsContent>
+
+ <TabsContent value="env" className="mt-4">
+ <div className="space-y-3">
+ <h4 className="font-medium text-foreground">Environment Variables</h4>
+ <div className="overflow-hidden rounded-lg border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/50">
+ <TableRow>
+ <TableHead>Name</TableHead>
+ <TableHead>Value</TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {container.env.map((env, envIndex) => (
+ <TableRow key={envIndex}>
+ <TableCell className="font-mono text-sm">{env.name}</TableCell>
+ <TableCell className="font-mono text-sm">
+ {env.value.includes("***") ? (
+ <span className="text-muted-foreground italic">***hidden***</span>
+ ) : (
+ env.value
+ )}
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ </TabsContent>
+
+ <TabsContent value="volumes" className="mt-4">
+ <div className="space-y-3">
+ <h4 className="font-medium text-foreground">Volume Mounts</h4>
+ <div className="overflow-hidden rounded-lg border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/50">
+ <TableRow>
+ <TableHead>Name</TableHead>
+ <TableHead>Mount Path</TableHead>
+ <TableHead>Read Only</TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {container.volumeMounts.map((mount, mountIndex) => (
+ <TableRow key={mountIndex}>
+ <TableCell className="font-mono text-sm">{mount.name}</TableCell>
+ <TableCell className="font-mono text-sm">{mount.mountPath}</TableCell>
+ <TableCell>
+ <Badge variant={mount.readOnly ? "secondary" : "outline"}>
+ {mount.readOnly ? "Read Only" : "Read/Write"}
+ </Badge>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ </TabsContent>
+
+ <TabsContent value="resources" className="mt-4">
+ <div className="space-y-4">
+ <h4 className="font-medium text-foreground">Resource Configuration</h4>
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div className="p-4 bg-muted/20 rounded-lg">
+ <h5 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
+ <Cpu className="w-4 h-4" />
+ CPU Resources
+ </h5>
+ <div className="space-y-2">
+ <div className="flex justify-between">
+ <span className="text-xs text-muted-foreground">Request:</span>
+ <span className="font-mono text-sm">{container.resources.requests.cpu}</span>
+ </div>
+ <div className="flex justify-between">
+ <span className="text-xs text-muted-foreground">Limit:</span>
+ <span className="font-mono text-sm">{container.resources.limits.cpu}</span>
+ </div>
+ </div>
+ </div>
+ <div className="p-4 bg-muted/20 rounded-lg">
+ <h5 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
+ <MemoryStick className="w-4 h-4" />
+ Memory Resources
+ </h5>
+ <div className="space-y-2">
+ <div className="flex justify-between">
+ <span className="text-xs text-muted-foreground">Request:</span>
+ <span className="font-mono text-sm">{container.resources.requests.memory}</span>
+ </div>
+ <div className="flex justify-between">
+ <span className="text-xs text-muted-foreground">Limit:</span>
+ <span className="font-mono text-sm">{container.resources.limits.memory}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </TabsContent>
+ </Tabs>
+ </CardContent>
+ </Card>
+ ))}
+ </div>
+ </div>
+
+
+
+ {/* Logs Section */}
+ <div>
+ <div className="flex items-center justify-between mb-6">
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <FileText className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <h2 className="text-foreground">Container Logs</h2>
+ <p className="text-muted-foreground text-sm">Recent log output from the pod containers</p>
+ </div>
+ </div>
+ <div className="flex items-center gap-2">
+ <Button variant="outline" size="sm" className="gap-2">
+ <Copy className="w-4 h-4" />
+ Copy
+ </Button>
+ <Button variant="outline" size="sm" className="gap-2">
+ <Download className="w-4 h-4" />
+ Download
+ </Button>
+ </div>
+ </div>
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardContent className="pt-6">
+ <ScrollArea className="h-96 w-full rounded-xl border border-border/30 bg-muted/20 p-4">
+ <div className="space-y-1 font-mono text-sm">
+ {logs.map((log, index) => (
+ <div key={index} className="text-muted-foreground hover:text-foreground transition-colors">
+ {log}
+ </div>
+ ))}
+ </div>
+ </ScrollArea>
+ </CardContent>
+ </Card>
+ </div>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 +638 +639 +640 +641 +642 +643 +644 +645 +646 +647 +648 +649 +650 +651 +652 +653 +654 +655 +656 +657 +658 +659 +660 +661 +662 +663 +664 +665 +666 +667 +668 +669 +670 +671 +672 +673 +674 +675 +676 +677 +678 +679 +680 +681 +682 +683 +684 +685 +686 +687 +688 +689 +690 +691 +692 +693 +694 +695 +696 +697 +698 +699 +700 +701 +702 +703 +704 +705 +706 +707 +708 +709 +710 +711 +712 +713 +714 +715 +716 +717 +718 +719 +720 +721 +722 +723 +724 +725 +726 +727 +728 +729 +730 +731 +732 +733 +734 +735 +736 +737 +738 +739 +740 +741 +742 +743 +744 +745 +746 +747 +748 +749 +750 +751 +752 +753 +754 +755 +756 +757 +758 +759 +760 +761 +762 +763 +764 +765 +766 +767 +768 +769 +770 +771 +772 +773 +774 +775 +776 +777 +778 +779 +780 +781 +782 +783 +784 +785 +786 +787 +788 +789 +790 +791 +792 +793 +794 +795 +796 +797 +798 +799 +800 +801 +802 +803 +804 +805 +806 +807 +808 +809 +810 +811 +812 +813 +814 +815 +816 +817 +818 +819 +820 +821 +822 +823 +824 +825 +826 +827 +828 +829 +830 +831 +832 +833 +834 +835 +836 +837 +838 +839 +840 +841 +842 +843 +844 +845 +846 +847 +848 +849 +850 +851 +852 +853 +854 +855 +856 +857 +858 +859 +860 +861 +862 +863 +864 +865 +866 +867 +868 +869 +870 +871 +872 +873 +874 +875 +876 +877 +878 +879 +880 +881 +882 +883 +884 +885 +886 +887 +888 +889 +890 +891 +892 +893 +894 +895 +896 +897 +898 +899 +900 +901 +902 +903 +904 +905 +906 +907 +908 +909 +910 +911 +912 +913 +914 +915 +916 +917 +918 +919 +920 +921 +922 +923 +924 +925 +926 +927 +928 +929 +930 +931 +932 +933 +934 +935 +936 +937 +938 +939 +940 +941 +942 +943 +944 +945 +946 +947 +948 +949 +950 +951 +952 +953 +954 +955 +956 +957 +958 +959 +960 +961 +962 +963 +964 +965 +966 +967 +968 +969 +970 +971 +972 +973 +974 +975 +976 +977 +978 +979 +980 +981 +982 +983 +984 +985 +986 +987 +988 +989 +990 +991 +992 +993 +994 +995 +996 +997 +998 +999 +1000 +1001 +1002 +1003 +1004 +1005 +1006 +1007 +1008 +1009 +1010 +1011 +1012 +1013 +1014 +1015 +1016 +1017 +1018 +1019 +1020 +1021 +1022 +1023 +1024 +1025 +1026 +1027 +1028 +1029 +1030 +1031 +1032 +1033 +1034 +1035 +1036 +1037 +1038 +1039 +1040 +1041 +1042 +1043 +1044 +1045 +1046 +1047 +1048 +1049 +1050 +1051 +1052 +1053 +1054 +1055 +1056 +1057 +1058 +1059 +1060 +1061 +1062 +1063 +1064 +1065 +1066 +1067 +1068 +1069 +1070 +1071 +1072 +1073 +1074 +1075 +1076 +1077 +1078 +1079 +1080 +1081 +1082 +1083 +1084 +1085 +1086 +1087 +1088 +1089 +1090 +1091 +1092 +1093 +1094 +1095 +1096 +1097 +1098 +1099 +1100 +1101 +1102 +1103 +1104 +1105 +1106 +1107 +1108 +1109 +1110 +1111 +1112 +1113 +1114 +1115 +1116 +1117 +1118 +1119 +1120 +1121 +1122 +1123 +1124 +1125 +1126 +1127 +1128 +1129 +1130 +1131 +1132 +1133 +1134 +1135 +1136 +1137 +1138 +1139 +1140 +1141 +1142 +1143 +1144 +1145 +1146 +1147 +1148 +1149 +1150 +1151 +1152 +1153 +1154 +1155 +1156 +1157 +1158 +1159 +1160 +1161 +1162 +1163 +1164 +1165 +1166 +1167 +1168 +1169 +1170 +1171 +1172 +1173 +1174 +1175 +1176 +1177 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +2x +2x +2x +22x +22x +12x +22x +4x +22x +4x +22x +2x +22x + +22x +22x +2x +2x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +2x +2x +2x +16x +2x +2x +2x +7x +7x +7x +7x +2x +2x +2x +2x +2x +2x +2x +2x +2x + + +2x +2x + + +2x +2x + + + + + +2x +2x + + +2x +2x +2x + + + + + + + + + + + + + + + + + + +2x +2x + +2x +2x +2x +2x + + + + + + + + + +2x +2x +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +2x +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + + + + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +2x +2x +2x +16x +16x +16x +16x + +16x +16x +16x +16x + + + + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +6x +10x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +6x +10x +4x +6x +4x +2x +16x +16x +16x +16x +16x +16x +16x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useRef } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Input } from "./ui/input";
+import {
+ GitBranch,
+ Box,
+ // ArrowRight, // 2025-09-23 comment out
+ Package,
+ Activity,
+ Cpu,
+ MemoryStick,
+ Clock,
+ Play,
+ Pause,
+ Settings,
+ Share2,
+ ZoomIn,
+ ZoomOut,
+ RotateCcw,
+ Search,
+} from "lucide-react";
+
+interface Pod {
+ name: string;
+ image: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ node: string;
+}
+
+interface Package {
+ name: string;
+ pods: Pod[];
+}
+
+interface Scenario {
+ id: string;
+ name: string;
+ description: string;
+ status: "running" | "stopped" | "starting";
+ package: Package;
+ lastRun: string;
+}
+
+interface ScenariosProps {
+ namespace: string;
+}
+
+interface Node {
+ id: string;
+ label: string;
+ type: "scenario" | "pod";
+ status: "running" | "stopped" | "starting" | "pending";
+ x: number;
+ y: number;
+ color: string;
+}
+
+interface Edge {
+ from: string;
+ to: string;
+}
+
+export function Scenarios({ namespace }: ScenariosProps) {
+ const svgRef = useRef<SVGSVGElement>(null);
+ const [zoom, setZoom] = useState(1);
+ const [panX, setPanX] = useState(0);
+ const [panY, setPanY] = useState(0);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedNode, setSelectedNode] = useState<string | null>(null);
+ const [hoveredEdge, setHoveredEdge] = useState<string | null>(null);
+ const [connections, setConnections] = useState<Edge[]>([]);
+
+ // Mock scenario data with state management
+ const [scenarios, setScenarios] = useState<Scenario[]>([
+ {
+ id: "ad_driving",
+ name: "AD Driving",
+ description:
+ "Autonomous driving scenario with full self-driving capabilities",
+ status: "running",
+ lastRun: "2 minutes ago",
+ package: {
+ name: "ad_driving_package",
+ pods: [
+ {
+ name: "자동주행알고리즘",
+ image: "ai/autonomous-driving:v2.1",
+ status: "Running",
+ cpuUsage: "850m",
+ memoryUsage: "2.1Gi",
+ node: "gpu-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Running",
+ cpuUsage: "120m",
+ memoryUsage: "256Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ {
+ id: "manual_driving",
+ name: "Manual Driving",
+ description: "Manual driving scenario with driver assistance systems",
+ status: "stopped",
+ lastRun: "1 hour ago",
+ package: {
+ name: "ma_driving_package",
+ pods: [
+ {
+ name: "운전자보조시스템",
+ image: "adas/driver-assist:v1.8",
+ status: "Stopped",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ node: "worker-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Running",
+ cpuUsage: "115m",
+ memoryUsage: "240Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ {
+ id: "emergency_mode",
+ name: "Emergency Mode",
+ description: "Emergency response scenario for critical situations",
+ status: "starting",
+ lastRun: "Never",
+ package: {
+ name: "emergency_package",
+ pods: [
+ {
+ name: "응급제동시스템",
+ image: "safety/emergency-brake:v2.0",
+ status: "Starting",
+ cpuUsage: "200m",
+ memoryUsage: "512Mi",
+ node: "safety-node-1",
+ },
+ {
+ name: "비상통신모듈",
+ image: "comm/emergency-comm:v1.2",
+ status: "Pending",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ node: "comm-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Running",
+ cpuUsage: "140m",
+ memoryUsage: "280Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ ]);
+
+ // Dependencies data for the graph view
+ const nodes: Node[] = [
+ // Scenarios
+ {
+ id: "ad_driving",
+ label: "AD Driving",
+ type: "scenario",
+ status: "running",
+ x: 200,
+ y: 100,
+ color: "#3b82f6",
+ },
+ {
+ id: "manual_driving",
+ label: "Manual Driving",
+ type: "scenario",
+ status: "stopped",
+ x: 200,
+ y: 300,
+ color: "#3b82f6",
+ },
+ {
+ id: "emergency_mode",
+ label: "Emergency Mode",
+ type: "scenario",
+ status: "starting",
+ x: 200,
+ y: 500,
+ color: "#3b82f6",
+ },
+ // Pods
+ {
+ id: "autonomous_algo",
+ label: "자동주행알고리즘",
+ type: "pod",
+ status: "running",
+ x: 500,
+ y: 80,
+ color: "#10b981",
+ },
+ {
+ id: "vehicle_monitor",
+ label: "차량상태모니터링",
+ type: "pod",
+ status: "running",
+ x: 600,
+ y: 250,
+ color: "#10b981",
+ },
+ {
+ id: "driver_assist",
+ label: "운전자보조시스템",
+ type: "pod",
+ status: "stopped",
+ x: 500,
+ y: 320,
+ color: "#10b981",
+ },
+ {
+ id: "emergency_brake",
+ label: "응급제동시스템",
+ type: "pod",
+ status: "starting",
+ x: 500,
+ y: 480,
+ color: "#10b981",
+ },
+ {
+ id: "emergency_comm",
+ label: "비상통신모듈",
+ type: "pod",
+ status: "pending",
+ x: 500,
+ y: 520,
+ color: "#10b981",
+ },
+ ];
+
+ const edges: Edge[] = [
+ // AD Driving connections
+ { from: "ad_driving", to: "autonomous_algo" },
+ { from: "ad_driving", to: "vehicle_monitor" },
+
+ // Manual Driving connections
+ { from: "manual_driving", to: "driver_assist" },
+ { from: "manual_driving", to: "vehicle_monitor" },
+
+ // Emergency Mode connections
+ { from: "emergency_mode", to: "emergency_brake" },
+ { from: "emergency_mode", to: "emergency_comm" },
+ { from: "emergency_mode", to: "vehicle_monitor" },
+ ];
+
+ // Initialize connections state
+ React.useEffect(() => {
+ setConnections(edges);
+ }, []);
+
+ const getStatusColor = (status: string) => {
+ switch (status.toLowerCase()) {
+ case "running":
+ return "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800";
+ case "stopped":
+ return "bg-gray-500/10 text-gray-600 border-gray-200 dark:border-gray-700";
+ case "starting":
+ return "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800";
+ case "pending":
+ return "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800";
+ default:
+ return "bg-gray-500/10 text-gray-600 border-gray-200 dark:border-gray-700";
+ }
+ };
+
+ const getScenarioStatusIcon = (status: string) => {
+ switch (status) {
+ case "running":
+ return <Play className="w-4 h-4" />;
+ case "stopped":
+ return <Pause className="w-4 h-4" />;
+ case "starting":
+ return <Activity className="w-4 h-4 animate-pulse" />;
+ default:
+ return <Settings className="w-4 h-4" />;
+ }
+ };
+
+ // Dependencies helper functions
+ const filteredNodes = nodes.filter((node) =>
+ node.label.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredEdges = connections.filter((edge) => {
+ const fromNode = filteredNodes.find((n) => n.id === edge.from);
+ const toNode = filteredNodes.find((n) => n.id === edge.to);
+ return fromNode && toNode;
+ });
+
+ /*const getNodeColor = (node: Node) => { // 2025-09-23 comment out
+ if (selectedNode === node.id) {
+ return "#dc2626"; // Red for selected
+ }
+ return node.color;
+ }; */
+
+ const handleZoomIn = () => {
+ setZoom((prev) => Math.min(prev * 1.2, 3));
+ };
+
+ const handleZoomOut = () => {
+ setZoom((prev) => Math.max(prev / 1.2, 0.3));
+ };
+
+ const handleReset = () => {
+ setZoom(1);
+ setPanX(0);
+ setPanY(0);
+ setSelectedNode(null);
+ };
+
+ const handleNodeClick = (nodeId: string) => {
+ setSelectedNode(selectedNode === nodeId ? null : nodeId);
+ };
+
+ // Calculate ONLY directly connected nodes for highlighting - Corrected logic
+ const getConnectedNodes = (nodeId: string) => {
+ const connected = new Set<string>();
+
+ console.log(`🔍 Finding connections for node: ${nodeId}`);
+
+ // Only add nodes that have DIRECT connections to the selected node
+ connections.forEach((edge) => {
+ if (edge.from === nodeId) {
+ connected.add(edge.to);
+ console.log(` ➡️ Found outgoing connection: ${nodeId} → ${edge.to}`);
+ } else if (edge.to === nodeId) {
+ connected.add(edge.from);
+ console.log(` ⬅️ Found incoming connection: ${edge.from} → ${nodeId}`);
+ }
+ });
+
+ console.log(` 📊 Connected nodes for ${nodeId}:`, Array.from(connected));
+ return connected;
+ };
+
+ const connectedNodes = selectedNode
+ ? getConnectedNodes(selectedNode)
+ : new Set<string>();
+
+ // Map node IDs to pod names
+ const getNodeIdToPodNameMap = () => {
+ const map: Record<string, string> = {
+ autonomous_algo: "자동주행알고리즘",
+ vehicle_monitor: "차량상태모니터링",
+ driver_assist: "운전자보조시스템",
+ emergency_brake: "응급제동시스템",
+ emergency_comm: "비상통신모듈",
+ };
+ return map;
+ };
+
+ // Handle edge removal
+ const handleRemoveEdge = (fromId: string, toId: string) => {
+ console.log("🔥 Removing edge:", fromId, "->", toId);
+
+ // Update connections state
+ setConnections((prev) => {
+ const newConnections = prev.filter(
+ (edge) => !(edge.from === fromId && edge.to === toId)
+ );
+ console.log("📊 Updated connections:", newConnections.length);
+ return newConnections;
+ });
+
+ // Get the actual pod name from node ID
+ const nodeIdToPodName = getNodeIdToPodNameMap();
+ const podName = nodeIdToPodName[toId] || toId;
+
+ // Update scenarios state - remove pod from scenario package
+ setScenarios((prev) => {
+ const updatedScenarios = prev.map((scenario) => {
+ // If this scenario is the source (fromId), remove the target pod (toId)
+ if (scenario.id === fromId) {
+ const updatedPods = scenario.package.pods.filter(
+ (pod) => pod.name !== podName
+ );
+ console.log(
+ `🎯 Scenario ${fromId}: removed pod ${podName} (node: ${toId}), ${scenario.package.pods.length} -> ${updatedPods.length} pods`
+ );
+
+ return {
+ ...scenario,
+ package: {
+ ...scenario.package,
+ pods: updatedPods,
+ },
+ };
+ }
+ return scenario;
+ });
+
+ console.log(
+ "📋 Updated scenarios:",
+ updatedScenarios.map((s) => `${s.name}: ${s.package.pods.length} pods`)
+ );
+ return updatedScenarios;
+ });
+ };
+
+ // Reset connections and restore original scenario data
+ const handleResetConnections = () => {
+ setConnections(edges);
+
+ // Restore original scenario data
+ setScenarios([
+ {
+ id: "ad_driving",
+ name: "AD Driving",
+ description:
+ "Autonomous driving scenario with full self-driving capabilities",
+ status: "running",
+ lastRun: "2 minutes ago",
+ package: {
+ name: "ad_driving_package",
+ pods: [
+ {
+ name: "자동주행알고리즘",
+ image: "ai/autonomous-driving:v2.1",
+ status: "Running",
+ cpuUsage: "850m",
+ memoryUsage: "2.1Gi",
+ node: "gpu-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Running",
+ cpuUsage: "120m",
+ memoryUsage: "256Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ {
+ id: "manual_driving",
+ name: "Manual Driving",
+ description: "Manual driving scenario with driver assistance systems",
+ status: "stopped",
+ lastRun: "1 hour ago",
+ package: {
+ name: "ma_driving_package",
+ pods: [
+ {
+ name: "운전자보조시스템",
+ image: "adas/driver-assist:v1.8",
+ status: "Stopped",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ node: "worker-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Stopped",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ {
+ id: "emergency_mode",
+ name: "Emergency Mode",
+ description: "Emergency response scenario for critical situations",
+ status: "starting",
+ lastRun: "Never",
+ package: {
+ name: "emergency_package",
+ pods: [
+ {
+ name: "응급제동시스템",
+ image: "safety/emergency-brake:v2.0",
+ status: "Starting",
+ cpuUsage: "200m",
+ memoryUsage: "512Mi",
+ node: "safety-node-1",
+ },
+ {
+ name: "비상통신모듈",
+ image: "comm/emergency-comm:v1.2",
+ status: "Pending",
+ cpuUsage: "0m",
+ memoryUsage: "0Mi",
+ node: "comm-node-1",
+ },
+ {
+ name: "차량상태모니터링",
+ image: "monitoring/vehicle-state:v1.5",
+ status: "Running",
+ cpuUsage: "140m",
+ memoryUsage: "280Mi",
+ node: "worker-node-2",
+ },
+ ],
+ },
+ },
+ ]);
+ };
+
+ // Get edge ID for hovering
+ const getEdgeId = (edge: Edge) => `${edge.from}-${edge.to}`;
+
+ return (
+ <div className="space-y-6">
+ {/* Header */}
+ <div className="flex items-center justify-between">
+ <div>
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground text-[20px]">
+ PULLPIRI Scenarios
+ </h1>
+ </div>
+ <p className="text-muted-foreground">
+ Manage and monitor scenario-based pod deployments and dependencies
+ </p>
+ </div>
+ <div className="flex items-center gap-2">
+ <Badge variant="secondary" className="gap-1">
+ <Package className="w-3 h-3" />
+ Namespace: {namespace}
+ </Badge>
+ </div>
+ </div>
+
+ {/* Enhanced Tabs for Scenarios and Dependencies */}
+ <Card className="bg-card/30 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardContent className="p-1">
+ <Tabs defaultValue="scenarios" className="w-full">
+ <TabsList className="grid w-full grid-cols-2 h-14 p-1 bg-secondary rounded-lg border border-border shadow-sm">
+ <TabsTrigger
+ value="scenarios"
+ className="flex items-center justify-center gap-3 h-12 px-6 text-base font-medium data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-lg transition-all duration-200 rounded-md"
+ >
+ <GitBranch className="w-5 h-5" />
+ Scenarios
+ </TabsTrigger>
+ <TabsTrigger
+ value="dependencies"
+ className="flex items-center justify-center gap-3 h-12 px-6 text-base font-medium data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-lg transition-all duration-200 rounded-md"
+ >
+ <Share2 className="w-5 h-5" />
+ Dependencies
+ </TabsTrigger>
+ </TabsList>
+
+ {/* Scenarios Tab */}
+ <TabsContent value="scenarios" className="space-y-6 mt-6">
+ {/* Scenarios Grid */}
+ <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
+ {scenarios.map((scenario) => (
+ <Card
+ key={scenario.id}
+ className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg"
+ >
+ <CardHeader className="pb-4">
+ <div className="flex items-start justify-between">
+ <div className="space-y-2">
+ <CardTitle className="flex items-center gap-2">
+ <GitBranch className="w-5 h-5 text-primary" />
+ {scenario.name}
+ </CardTitle>
+ <p className="text-sm text-muted-foreground">
+ {scenario.description}
+ </p>
+ </div>
+ <Badge
+ variant="outline"
+ className={`gap-1 ${getStatusColor(scenario.status)}`}
+ >
+ {getScenarioStatusIcon(scenario.status)}
+ {scenario.status.charAt(0).toUpperCase() +
+ scenario.status.slice(1)}
+ </Badge>
+ </div>
+
+ <div className="flex items-center gap-4 text-xs text-muted-foreground">
+ <span className="flex items-center gap-1">
+ <Clock className="w-3 h-3" />
+ Last run: {scenario.lastRun}
+ </span>
+ </div>
+ </CardHeader>
+
+ <CardContent className="space-y-4">
+ {/* Package Section */}
+ <div className="p-3 bg-muted/30 rounded-lg border border-border/30">
+ <div className="flex items-center gap-2 mb-3">
+ <Package className="w-4 h-4 text-primary" />
+ <span className="font-medium text-sm">
+ {scenario.package.name}
+ </span>
+ </div>
+
+ {/* Pods Flow */}
+ <div className="space-y-3">
+ {scenario.package.pods.map((pod, index) => (
+ <div
+ key={`${scenario.id}-${pod.name}`}
+ className="relative"
+ >
+ {/* Connection Line */}
+ {index > 0 && (
+ <div className="absolute -top-6 left-4 w-0.5 h-6 bg-border/50"></div>
+ )}
+
+ {/* Pod Card */}
+ <div className="bg-card/70 backdrop-blur-sm rounded-lg p-3 border border-border/40 shadow-sm">
+ <div className="flex items-start justify-between mb-2">
+ <div className="flex items-center gap-2">
+ <Box className="w-4 h-4 text-chart-1" />
+ <span className="font-medium text-sm">
+ {pod.name}
+ </span>
+ </div>
+ <Badge
+ variant="outline"
+ className={`text-xs ${getStatusColor(
+ pod.status
+ )}`}
+ >
+ {pod.status}
+ </Badge>
+ </div>
+
+ <div className="space-y-1 text-xs text-muted-foreground">
+ <div className="flex items-center gap-2">
+ <span className="font-mono text-xs">
+ {pod.image}
+ </span>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <span className="flex items-center gap-1">
+ <Cpu className="w-3 h-3" />
+ {pod.cpuUsage}
+ </span>
+ <span className="flex items-center gap-1">
+ <MemoryStick className="w-3 h-3" />
+ {pod.memoryUsage}
+ </span>
+ </div>
+
+ <div className="text-xs">
+ Node: {pod.node}
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+ ))}
+ </div>
+
+ {/* Shared Pods Analysis */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <GitBranch className="w-5 h-5 text-primary" />
+ Pod Sharing Analysis
+ </CardTitle>
+ <p className="text-sm text-muted-foreground">
+ Analysis of pods shared across multiple scenarios
+ </p>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-4">
+ {/* Shared Pod: 차량상태모니터링 */}
+ <div className="p-4 bg-muted/20 rounded-lg border border-border/30">
+ <div className="flex items-center justify-between mb-3">
+ <div className="flex items-center gap-2">
+ <Box className="w-4 h-4 text-chart-2" />
+ <span className="font-medium">차량상태모니터링</span>
+ <Badge variant="secondary" className="text-xs">
+ Shared Pod
+ </Badge>
+ </div>
+ <Badge
+ variant="outline"
+ className={getStatusColor("running")}
+ >
+ <Activity className="w-3 h-3 mr-1" />
+ Running
+ </Badge>
+ </div>
+
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+ <div className="text-sm">
+ <span className="text-muted-foreground">
+ Used in scenarios:
+ </span>
+ <div className="mt-1 space-y-1">
+ <Badge variant="outline" className="text-xs">
+ AD Driving
+ </Badge>
+ <Badge variant="outline" className="text-xs">
+ Manual Driving
+ </Badge>
+ <Badge variant="outline" className="text-xs">
+ Emergency Mode
+ </Badge>
+ </div>
+ </div>
+
+ <div className="text-sm">
+ <span className="text-muted-foreground">
+ Resource Usage:
+ </span>
+ <div className="mt-1 space-y-1 text-xs">
+ <div>CPU: 115-140m (variable)</div>
+ <div>Memory: 240-280Mi (variable)</div>
+ </div>
+ </div>
+
+ <div className="text-sm">
+ <span className="text-muted-foreground">
+ Deployment:
+ </span>
+ <div className="mt-1 space-y-1 text-xs">
+ <div>Node: worker-node-2</div>
+ <div>Image: monitoring/vehicle-state:v1.5</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ {/* Dependencies Tab */}
+ <TabsContent value="dependencies" className="space-y-6 mt-6">
+ {/* Controls */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardContent className="p-4">
+ <div className="flex items-center justify-between gap-4">
+ <div className="flex items-center gap-2 flex-1">
+ <Search className="w-4 h-4 text-muted-foreground" />
+ <Input
+ placeholder="Search nodes..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="max-w-xs"
+ />
+ </div>
+
+ <div className="flex items-center gap-1">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleZoomIn}
+ >
+ <ZoomIn className="w-4 h-4" />
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleZoomOut}
+ >
+ <ZoomOut className="w-4 h-4" />
+ </Button>
+ <Button variant="outline" size="sm" onClick={handleReset}>
+ <RotateCcw className="w-4 h-4" />
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleResetConnections}
+ >
+ Reset Connections
+ </Button>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Dependency Graph */}
+ <Card className="bg-card/50 backdrop-blur-sm border-border/50 shadow-lg">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Share2 className="w-5 h-5 text-primary" />
+ Dependency Graph
+ </CardTitle>
+ <p className="text-sm text-muted-foreground">
+ Visual representation of scenario and pod dependencies
+ </p>
+ </CardHeader>
+ <CardContent>
+ <div className="relative w-full h-[700px] bg-gradient-to-br from-muted/10 to-muted/30 rounded-lg border border-border/30 overflow-hidden">
+ <svg
+ ref={svgRef}
+ width="100%"
+ height="100%"
+ className="cursor-grab active:cursor-grabbing"
+ style={{
+ transform: `translate(${panX}px, ${panY}px) scale(${zoom})`,
+ }}
+ >
+ {/* Enhanced Grid Pattern */}
+ <defs>
+ <pattern
+ id="grid"
+ width="30"
+ height="30"
+ patternUnits="userSpaceOnUse"
+ >
+ <path
+ d="M 30 0 L 0 0 0 30"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="0.5"
+ className="text-border/10"
+ />
+ </pattern>
+
+ {/* Node Gradients */}
+ <linearGradient
+ id="scenarioGradient"
+ x1="0%"
+ y1="0%"
+ x2="100%"
+ y2="100%"
+ >
+ <stop offset="0%" stopColor="#60a5fa" />
+ <stop offset="100%" stopColor="#3b82f6" />
+ </linearGradient>
+
+ <linearGradient
+ id="podGradient"
+ x1="0%"
+ y1="0%"
+ x2="100%"
+ y2="100%"
+ >
+ <stop offset="0%" stopColor="#34d399" />
+ <stop offset="100%" stopColor="#10b981" />
+ </linearGradient>
+
+ {/* Shadow Filter */}
+ <filter
+ id="shadow"
+ x="-50%"
+ y="-50%"
+ width="200%"
+ height="200%"
+ >
+ <feDropShadow
+ dx="2"
+ dy="4"
+ stdDeviation="4"
+ floodOpacity="0.2"
+ />
+ </filter>
+
+ {/* Arrow marker */}
+ <marker
+ id="arrowhead"
+ markerWidth="12"
+ markerHeight="8"
+ refX="10"
+ refY="4"
+ orient="auto"
+ >
+ <polygon points="0 0, 12 4, 0 8" fill="#6b7280" />
+ </marker>
+
+ {/* Highlighted arrow marker */}
+ <marker
+ id="arrowhead-highlight"
+ markerWidth="12"
+ markerHeight="8"
+ refX="10"
+ refY="4"
+ orient="auto"
+ >
+ <polygon points="0 0, 12 4, 0 8" fill="#dc2626" />
+ </marker>
+ </defs>
+
+ <rect width="100%" height="100%" fill="url(#grid)" />
+
+ {/* Render edges with enhanced interactivity */}
+ {filteredEdges.map((edge) => {
+ const fromNode = filteredNodes.find(
+ (n) => n.id === edge.from
+ );
+ const toNode = filteredNodes.find(
+ (n) => n.id === edge.to
+ );
+
+ if (!fromNode || !toNode) return null;
+
+ const edgeId = getEdgeId(edge);
+ // Only highlight edges that are directly connected to the selected node
+ const isHighlighted =
+ selectedNode &&
+ ((selectedNode === edge.from &&
+ connectedNodes.has(edge.to)) ||
+ (selectedNode === edge.to &&
+ connectedNodes.has(edge.from)));
+ const isHovered = hoveredEdge === edgeId;
+
+ // Calculate arrow position
+ const dx = toNode.x - fromNode.x;
+ const dy = toNode.y - fromNode.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+ const nodeRadius = toNode.type === "scenario" ? 25 : 20;
+ const arrowX = toNode.x - (dx / distance) * nodeRadius;
+ const arrowY = toNode.y - (dy / distance) * nodeRadius;
+
+ return (
+ <g key={edgeId}>
+ {/* Main edge line */}
+ <line
+ x1={fromNode.x}
+ y1={fromNode.y}
+ x2={arrowX}
+ y2={arrowY}
+ stroke={
+ isHighlighted || isHovered
+ ? "#dc2626"
+ : "#6b7280"
+ }
+ strokeWidth={isHighlighted || isHovered ? 3 : 2}
+ markerEnd={
+ isHighlighted || isHovered
+ ? "url(#arrowhead-highlight)"
+ : "url(#arrowhead)"
+ }
+ className="transition-all duration-200 cursor-pointer"
+ onMouseEnter={() => setHoveredEdge(edgeId)}
+ onMouseLeave={() => setHoveredEdge(null)}
+ onClick={() =>
+ handleRemoveEdge(edge.from, edge.to)
+ }
+ />
+
+ {/* Invisible wider line for easier clicking */}
+ <line
+ x1={fromNode.x}
+ y1={fromNode.y}
+ x2={arrowX}
+ y2={arrowY}
+ stroke="transparent"
+ strokeWidth="12"
+ className="cursor-pointer"
+ onMouseEnter={() => setHoveredEdge(edgeId)}
+ onMouseLeave={() => setHoveredEdge(null)}
+ onClick={() =>
+ handleRemoveEdge(edge.from, edge.to)
+ }
+ />
+
+ {/* Delete indicator */}
+ {isHovered && (
+ <g>
+ <circle
+ cx={(fromNode.x + toNode.x) / 2}
+ cy={(fromNode.y + toNode.y) / 2}
+ r="8"
+ fill="#dc2626"
+ className="animate-pulse cursor-pointer"
+ onClick={() =>
+ handleRemoveEdge(edge.from, edge.to)
+ }
+ />
+ <text
+ x={(fromNode.x + toNode.x) / 2}
+ y={(fromNode.y + toNode.y) / 2}
+ textAnchor="middle"
+ dy="0.3em"
+ fontSize="10"
+ fill="white"
+ className="cursor-pointer font-medium"
+ onClick={() =>
+ handleRemoveEdge(edge.from, edge.to)
+ }
+ >
+ ×
+ </text>
+ </g>
+ )}
+ </g>
+ );
+ })}
+
+ {/* Render nodes with enhanced styling */}
+ {filteredNodes.map((node) => {
+ const isSelected = selectedNode === node.id;
+ const isConnected =
+ selectedNode &&
+ selectedNode !== node.id &&
+ connectedNodes.has(node.id);
+ const shouldHighlight = isSelected || isConnected;
+
+ // Debug logging
+ if (selectedNode) {
+ console.log(
+ `Node ${node.id}: selected=${isSelected}, connected=${isConnected}, shouldHighlight=${shouldHighlight}`
+ );
+ }
+
+ return (
+ <g key={node.id}>
+ {/* Node glow effect */}
+ {shouldHighlight && (
+ <circle
+ cx={node.x}
+ cy={node.y}
+ r={node.type === "scenario" ? 35 : 30}
+ fill={
+ node.type === "scenario"
+ ? "#3b82f6"
+ : "#10b981"
+ }
+ fillOpacity="0.2"
+ className="animate-pulse"
+ />
+ )}
+
+ {/* Main node circle */}
+ <circle
+ cx={node.x}
+ cy={node.y}
+ r={node.type === "scenario" ? 25 : 20}
+ fill={
+ node.type === "scenario"
+ ? "url(#scenarioGradient)"
+ : "url(#podGradient)"
+ }
+ stroke={shouldHighlight ? "#dc2626" : "#ffffff"}
+ strokeWidth={shouldHighlight ? 3 : 2}
+ filter="url(#shadow)"
+ className="cursor-pointer transition-all duration-200 hover:opacity-80"
+ onClick={() => handleNodeClick(node.id)}
+ />
+
+ {/* Node icon */}
+ <text
+ x={node.x}
+ y={node.y}
+ textAnchor="middle"
+ dy="0.3em"
+ fontSize="12"
+ fill="white"
+ className="cursor-pointer font-medium pointer-events-none"
+ >
+ {node.type === "scenario" ? "S" : "P"}
+ </text>
+
+ {/* Node label */}
+ <text
+ x={node.x}
+ y={node.y + (node.type === "scenario" ? 40 : 35)}
+ textAnchor="middle"
+ className="text-xs fill-current text-foreground font-medium cursor-pointer"
+ onClick={() => handleNodeClick(node.id)}
+ >
+ {node.label}
+ </text>
+
+ {/* Status indicator */}
+ <circle
+ cx={node.x + (node.type === "scenario" ? 18 : 15)}
+ cy={node.y - (node.type === "scenario" ? 18 : 15)}
+ r="4"
+ fill={
+ node.status === "running"
+ ? "#10b981"
+ : node.status === "stopped"
+ ? "#6b7280"
+ : node.status === "starting"
+ ? "#3b82f6"
+ : "#f59e0b"
+ }
+ stroke="#ffffff"
+ strokeWidth="1"
+ />
+ </g>
+ );
+ })}
+
+ {/* Legend - moved to bottom right to avoid overlap */}
+ <g transform="translate(680, 550)">
+ <rect
+ x="0"
+ y="0"
+ width="180"
+ height="80"
+ fill="rgba(255, 255, 255, 0.9)"
+ stroke="#e5e7eb"
+ strokeWidth="1"
+ rx="4"
+ className="dark:fill-gray-800/90 dark:stroke-gray-600"
+ />
+ <text
+ x="10"
+ y="20"
+ className="text-xs fill-current text-foreground font-medium"
+ >
+ Legend
+ </text>
+ <circle
+ cx="20"
+ cy="35"
+ r="8"
+ fill="url(#scenarioGradient)"
+ />
+ <text
+ x="35"
+ y="39"
+ className="text-xs fill-current text-foreground"
+ >
+ Scenarios
+ </text>
+ <circle
+ cx="20"
+ cy="55"
+ r="6"
+ fill="url(#podGradient)"
+ />
+ <text
+ x="35"
+ y="59"
+ className="text-xs fill-current text-foreground"
+ >
+ Pods/Workloads
+ </text>
+ <text
+ x="10"
+ y="75"
+ className="text-xs fill-current text-muted-foreground"
+ >
+ Click to select, hover edges to delete
+ </text>
+ </g>
+ </svg>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </CardContent>
+ </Card>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Search, MoreHorizontal, ExternalLink, Copy } from "lucide-react";
+
+export function Services() {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // Mock data
+ const services = [
+ {
+ name: "frontend-service",
+ type: "ClusterIP",
+ clusterIP: "10.96.0.15",
+ externalIP: "N/A",
+ ports: "80/TCP",
+ age: "2d",
+ selector: "app=frontend"
+ },
+ {
+ name: "backend-service",
+ type: "ClusterIP",
+ clusterIP: "10.96.1.22",
+ externalIP: "N/A",
+ ports: "8080/TCP",
+ age: "5d",
+ selector: "app=backend"
+ },
+ {
+ name: "redis-service",
+ type: "ClusterIP",
+ clusterIP: "10.96.2.8",
+ externalIP: "N/A",
+ ports: "6379/TCP",
+ age: "1d",
+ selector: "app=redis"
+ },
+ {
+ name: "nginx-ingress",
+ type: "LoadBalancer",
+ clusterIP: "10.96.3.45",
+ externalIP: "203.0.113.15",
+ ports: "80:30080/TCP,443:30443/TCP",
+ age: "7d",
+ selector: "app=nginx-ingress"
+ }
+ ];
+
+ const ingresses = [
+ {
+ name: "frontend-ingress",
+ className: "nginx",
+ hosts: "frontend.example.com",
+ address: "203.0.113.15",
+ ports: "80, 443",
+ age: "2d"
+ },
+ {
+ name: "api-ingress",
+ className: "nginx",
+ hosts: "api.example.com",
+ address: "203.0.113.15",
+ ports: "80, 443",
+ age: "5d"
+ },
+ {
+ name: "monitoring-ingress",
+ className: "nginx",
+ hosts: "monitoring.example.com",
+ address: "203.0.113.15",
+ ports: "80, 443",
+ age: "7d"
+ }
+ ];
+
+ const endpoints = [
+ {
+ name: "frontend-service",
+ endpoints: "10.244.1.15:80,10.244.2.18:80,10.244.3.12:80",
+ age: "2d"
+ },
+ {
+ name: "backend-service",
+ endpoints: "10.244.1.22:8080,10.244.2.31:8080",
+ age: "5d"
+ },
+ {
+ name: "redis-service",
+ endpoints: "10.244.3.9:6379",
+ age: "1d"
+ }
+ ];
+
+ const getServiceTypeBadge = (type: string) => {
+ switch (type) {
+ case "ClusterIP":
+ return <Badge variant="secondary">ClusterIP</Badge>;
+ case "NodePort":
+ return <Badge className="bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-950">NodePort</Badge>;
+ case "LoadBalancer":
+ return <Badge className="bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-200 hover:bg-green-100 dark:hover:bg-green-950">LoadBalancer</Badge>;
+ case "ExternalName":
+ return <Badge className="bg-purple-100 dark:bg-purple-950 text-purple-800 dark:text-purple-200 hover:bg-purple-100 dark:hover:bg-purple-950">ExternalName</Badge>;
+ default:
+ return <Badge variant="secondary">{type}</Badge>;
+ }
+ };
+
+ const filteredServices = services.filter(service =>
+ service.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredIngresses = ingresses.filter(ingress =>
+ ingress.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredEndpoints = endpoints.filter(endpoint =>
+ endpoint.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ return (
+ <div className="space-y-6">
+ <div className="flex items-center justify-between">
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground text-[20px]">
+ PULLPIRI Services & Networking
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ Manage services, ingresses, and network policies in your cluster
+ </p>
+ </div>
+ <Button className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-lg hover:shadow-xl transition-all">
+ Create Service
+ </Button>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <div className="relative flex-1 max-w-sm">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="Search services..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10 h-12 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all"
+ />
+ </div>
+ </div>
+
+ <Tabs defaultValue="services" className="space-y-6">
+ <TabsList className="bg-card/80 backdrop-blur-sm border border-border/30 shadow-lg">
+ <TabsTrigger value="services" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Services</TabsTrigger>
+ <TabsTrigger value="ingresses" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Ingresses</TabsTrigger>
+ <TabsTrigger value="endpoints" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Endpoints</TabsTrigger>
+ <TabsTrigger value="networkpolicies" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">Network Policies</TabsTrigger>
+ </TabsList>
+
+ <TabsContent value="services">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <div className="w-4 h-4 bg-primary-foreground rounded-full" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Services</CardTitle>
+ <CardDescription>Kubernetes services expose your applications</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Type</TableHead>
+ <TableHead className="font-semibold text-foreground">Cluster-IP</TableHead>
+ <TableHead className="font-semibold text-foreground">External-IP</TableHead>
+ <TableHead className="font-semibold text-foreground">Ports</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground">Selector</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredServices.map((service) => (
+ <TableRow key={service.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{service.name}</TableCell>
+ <TableCell>{getServiceTypeBadge(service.type)}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{service.clusterIP}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{service.externalIP}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{service.ports}</TableCell>
+ <TableCell className="text-muted-foreground">{service.age}</TableCell>
+ <TableCell className="text-sm text-muted-foreground">{service.selector}</TableCell>
+ <TableCell>
+ <div className="flex items-center gap-2">
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <Copy className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </div>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="ingresses">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <ExternalLink className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Ingresses</CardTitle>
+ <CardDescription>HTTP and HTTPS routing to your services</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Class</TableHead>
+ <TableHead className="font-semibold text-foreground">Hosts</TableHead>
+ <TableHead className="font-semibold text-foreground">Address</TableHead>
+ <TableHead className="font-semibold text-foreground">Ports</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredIngresses.map((ingress) => (
+ <TableRow key={ingress.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{ingress.name}</TableCell>
+ <TableCell>
+ <Badge variant="outline">{ingress.className}</Badge>
+ </TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{ingress.hosts}</TableCell>
+ <TableCell className="font-mono text-sm text-foreground">{ingress.address}</TableCell>
+ <TableCell className="text-foreground">{ingress.ports}</TableCell>
+ <TableCell className="text-muted-foreground">{ingress.age}</TableCell>
+ <TableCell>
+ <div className="flex items-center gap-2">
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <ExternalLink className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </div>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="endpoints">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Endpoints</CardTitle>
+ <CardDescription>Network endpoints for your services</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Endpoints</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredEndpoints.map((endpoint) => (
+ <TableRow key={endpoint.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{endpoint.name}</TableCell>
+ <TableCell className="font-mono text-sm max-w-md truncate text-foreground" title={endpoint.endpoints}>
+ {endpoint.endpoints}
+ </TableCell>
+ <TableCell className="text-muted-foreground">{endpoint.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-4 w-4" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="networkpolicies">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="text-foreground">Network Policies</CardTitle>
+ <CardDescription>Configure network access rules for your pods</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="text-center py-16">
+ <div className="w-16 h-16 bg-gradient-to-r from-muted to-muted/80 rounded-2xl flex items-center justify-center mx-auto mb-4">
+ <div className="w-8 h-8 text-muted-foreground" />
+ </div>
+ <h3 className="font-semibold text-foreground mb-2">Network Policies View</h3>
+ <p className="text-muted-foreground">Implementation coming soon</p>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +1x +4x +5x +5x +5x +5x +5x +5x +5x +1x +4x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +3x +3x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +3x +3x + + +3x +3x +3x +3x +3x +3x +3x +3x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +2x +13x +15x +15x +15x +15x +15x +15x +15x +2x +13x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { Button } from "./ui/button";
+import { Separator } from "./ui/separator";
+import {
+ Box,
+ Network,
+ Database,
+ Server,
+ ChevronLeft,
+ ChevronRight,
+ //Menu, // 2025-09-23 comment out
+ Hexagon,
+ Shield,
+ GitBranch,
+} from "lucide-react";
+import React from "react";
+import pullpiriLogo from "../assets/pullpiriLogo.png";
+
+interface SidebarProps {
+ currentView: string;
+ onViewChange: (
+ view: "workloads" | "services" | "storage" | "cluster" | "scenarios"
+ ) => void;
+ collapsed?: boolean;
+ onToggle?: () => void;
+ mobile?: boolean;
+}
+
+export function Sidebar({
+ currentView,
+ onViewChange,
+ collapsed = false,
+ onToggle,
+ mobile = false,
+}: SidebarProps) {
+ const menuItems = [
+ { id: "workloads", label: "Workloads", icon: Box },
+ { id: "services", label: "Services", icon: Network },
+ { id: "storage", label: "Storage", icon: Database },
+ { id: "cluster", label: "Nodes", icon: Server },
+ { id: "scenarios", label: "Scenarios", icon: GitBranch },
+ ];
+
+ // Mobile sidebar (bottom navigation style)
+ if (mobile) {
+ return (
+ <div className="w-16 bg-card/70 backdrop-blur-xl border-r border-border shadow-2xl flex flex-col relative transition-colors duration-300">
+ <div className="absolute inset-0 bg-gradient-to-b from-muted/20 to-muted/40 dark:from-muted/10 dark:to-muted/20"></div>
+ <nav className="flex-1 p-2 space-y-2 relative z-10 flex flex-col items-center justify-center">
+ {menuItems.map((item) => {
+ const Icon = item.icon;
+ const isActive = currentView === item.id;
+ return (
+ <Button
+ key={item.id}
+ variant="ghost"
+ className={`w-12 h-12 p-0 rounded-xl transition-all duration-300 ${
+ isActive
+ ? "bg-primary/10 shadow-lg text-foreground border border-border/30"
+ : "hover:bg-muted/40 hover:shadow-md text-muted-foreground hover:text-foreground"
+ }`}
+ onClick={() => onViewChange(item.id as any)}
+ title={item.label}
+ >
+ <div
+ className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+ isActive
+ ? "bg-primary text-primary-foreground"
+ : "text-muted-foreground group-hover:text-foreground"
+ } transition-all duration-300`}
+ >
+ <Icon className="w-4 h-4" />
+ </div>
+ </Button>
+ );
+ })}
+ </nav>
+ </div>
+ );
+ }
+
+ // Desktop/Tablet sidebar
+ const sidebarWidth = collapsed ? "w-16" : "w-72";
+
+ return (
+ <div
+ className={`${sidebarWidth} bg-card/70 backdrop-blur-xl border-r border-border shadow-2xl flex flex-col relative transition-all duration-300`}
+ >
+ {/* Background Pattern */}
+ <div className="absolute inset-0 bg-gradient-to-b from-muted/20 to-muted/40 dark:from-muted/10 dark:to-muted/20"></div>
+ <div className="absolute inset-0 opacity-5 dark:opacity-10">
+ <div className="absolute top-8 left-8 w-2 h-2 bg-primary/20 rounded-full"></div>
+ <div className="absolute top-16 right-12 w-1 h-1 bg-primary/20 rounded-full"></div>
+ <div className="absolute top-32 left-16 w-1.5 h-1.5 bg-primary/20 rounded-full"></div>
+ <div className="absolute bottom-32 right-8 w-2 h-2 bg-primary/20 rounded-full"></div>
+ <div className="absolute bottom-16 left-12 w-1 h-1 bg-primary/20 rounded-full"></div>
+ </div>
+
+ <div className="relative z-10 p-4 lg:p-8">
+ <div className="flex items-center justify-between">
+ <Button
+ variant="ghost"
+ className={`flex items-center gap-3 ${
+ collapsed ? "justify-center p-2" : "p-2"
+ } hover:bg-muted/20 rounded-xl transition-all duration-300`}
+ onClick={() => onViewChange("workloads")}
+ title="Go to Workloads"
+ >
+ <div className="w-18 h-18 rounded-2xl flex items-center justify-center shadow-lg overflow-hidden bg-white/10 backdrop-blur-sm">
+ {/* fallback prop remove, error handling directly */}
+ {(() => {
+ const [imgError, setImgError] = React.useState(false);
+ return imgError ? (
+ <Hexagon className="w-10 h-10 text-primary" />
+ ) : (
+ <img
+ src={pullpiriLogo}
+ alt="PULLPIRI Logo"
+ className="w-full h-full object-contain p-1"
+ onError={() => setImgError(true)}
+ />
+ );
+ })()}
+ </div>
+ {!collapsed && (
+ <div className="text-left">
+ <h2 className="font-bold text-foreground">PULLPIRI</h2>
+ <p className="text-sm text-muted-foreground font-medium">
+ Control Center
+ </p>
+ </div>
+ )}
+ </Button>
+ {onToggle && !mobile && (
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={onToggle}
+ className="w-8 h-8 rounded-lg hidden lg:flex"
+ >
+ {collapsed ? (
+ <ChevronRight className="w-4 h-4" />
+ ) : (
+ <ChevronLeft className="w-4 h-4" />
+ )}
+ </Button>
+ )}
+ </div>
+ </div>
+
+ <Separator className="bg-border/30" />
+
+ <nav
+ className={`flex-1 p-3 lg:p-6 space-y-2 lg:space-y-3 relative z-10 ${
+ collapsed ? "px-2" : ""
+ }`}
+ >
+ {menuItems.map((item) => {
+ const Icon = item.icon;
+ const isActive = currentView === item.id;
+ return (
+ <Button
+ key={item.id}
+ variant="ghost"
+ className={`w-full ${
+ collapsed ? "h-12 justify-center" : "justify-start h-12 lg:h-14"
+ } gap-4 text-left transition-all duration-300 relative group ${
+ isActive
+ ? "bg-primary/10 shadow-lg scale-105 text-foreground border border-border/30"
+ : "hover:bg-muted/40 hover:shadow-md hover:scale-[1.02] text-muted-foreground hover:text-foreground"
+ }`}
+ onClick={() => onViewChange(item.id as any)}
+ title={collapsed ? item.label : undefined}
+ >
+ <div
+ className={`w-8 lg:w-10 h-8 lg:h-10 rounded-xl flex items-center justify-center ${
+ isActive
+ ? "bg-primary text-primary-foreground shadow-md"
+ : "bg-muted/60 text-muted-foreground group-hover:bg-primary/10 group-hover:text-foreground"
+ } transition-all duration-300`}
+ >
+ <Icon className="w-4 lg:w-5 h-4 lg:h-5" />
+ </div>
+ {!collapsed && (
+ <span className="font-medium text-sm lg:text-base">
+ {item.label}
+ </span>
+ )}
+ {isActive && !collapsed && (
+ <div className="absolute right-3 w-2 h-2 rounded-full bg-primary"></div>
+ )}
+ </Button>
+ );
+ })}
+ </nav>
+
+ {!collapsed && (
+ <div className="p-3 lg:p-6 border-t border-border/20 relative z-10">
+ <div className="bg-card/50 backdrop-blur-sm rounded-2xl p-3 lg:p-4 border border-border/30">
+ <div className="flex items-center gap-2 lg:gap-3 text-xs lg:text-sm">
+ <div className="w-6 lg:w-8 h-6 lg:h-8 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center">
+ <Shield className="w-3 lg:w-4 h-3 lg:h-4 text-white" />
+ </div>
+ <div>
+ <p className="font-semibold text-foreground text-xs lg:text-sm">
+ Production Cluster
+ </p>
+ <div className="flex items-center gap-1">
+ <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
+ <span className="text-xs text-muted-foreground">
+ All systems operational
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Search, MoreHorizontal, Plus, Database, HardDrive, /*Archive, */Settings } from "lucide-react"; // 2025-09-23 comment out
+
+export function Storage() {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // Mock data
+ const persistentVolumes = [
+ {
+ name: "pv-database-01",
+ capacity: "100Gi",
+ accessModes: ["ReadWriteOnce"],
+ reclaimPolicy: "Retain",
+ status: "Bound",
+ claim: "default/postgres-data",
+ storageClass: "ssd",
+ age: "15d"
+ },
+ {
+ name: "pv-logs-01",
+ capacity: "50Gi",
+ accessModes: ["ReadWriteMany"],
+ reclaimPolicy: "Delete",
+ status: "Available",
+ claim: "-",
+ storageClass: "standard",
+ age: "3d"
+ },
+ {
+ name: "pv-cache-01",
+ capacity: "20Gi",
+ accessModes: ["ReadWriteOnce"],
+ reclaimPolicy: "Delete",
+ status: "Bound",
+ claim: "default/redis-cache",
+ storageClass: "fast-ssd",
+ age: "7d"
+ }
+ ];
+
+ const persistentVolumeClaims = [
+ {
+ name: "postgres-data",
+ namespace: "default",
+ status: "Bound",
+ volume: "pv-database-01",
+ capacity: "100Gi",
+ accessModes: ["ReadWriteOnce"],
+ storageClass: "ssd",
+ age: "15d"
+ },
+ {
+ name: "redis-cache",
+ namespace: "default",
+ status: "Bound",
+ volume: "pv-cache-01",
+ capacity: "20Gi",
+ accessModes: ["ReadWriteOnce"],
+ storageClass: "fast-ssd",
+ age: "7d"
+ },
+ {
+ name: "app-logs",
+ namespace: "default",
+ status: "Pending",
+ volume: "-",
+ capacity: "10Gi",
+ accessModes: ["ReadWriteMany"],
+ storageClass: "standard",
+ age: "2h"
+ }
+ ];
+
+ const storageClasses = [
+ {
+ name: "standard",
+ provisioner: "kubernetes.io/aws-ebs",
+ reclaimPolicy: "Delete",
+ volumeBindingMode: "Immediate",
+ allowVolumeExpansion: true,
+ age: "30d"
+ },
+ {
+ name: "ssd",
+ provisioner: "kubernetes.io/aws-ebs",
+ reclaimPolicy: "Retain",
+ volumeBindingMode: "Immediate",
+ allowVolumeExpansion: true,
+ age: "30d"
+ },
+ {
+ name: "fast-ssd",
+ provisioner: "kubernetes.io/aws-ebs",
+ reclaimPolicy: "Delete",
+ volumeBindingMode: "WaitForFirstConsumer",
+ allowVolumeExpansion: false,
+ age: "30d"
+ }
+ ];
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case "Bound":
+ return (
+ <Badge className="bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800">
+ <div className="w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></div>
+ Bound
+ </Badge>
+ );
+ case "Available":
+ return (
+ <Badge className="bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800">
+ <div className="w-2 h-2 bg-blue-500 rounded-full mr-1"></div>
+ Available
+ </Badge>
+ );
+ case "Pending":
+ return (
+ <Badge className="bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-200 border-amber-200 dark:border-amber-800">
+ <div className="w-2 h-2 bg-amber-500 rounded-full mr-1"></div>
+ Pending
+ </Badge>
+ );
+ default:
+ return <Badge variant="secondary">{status}</Badge>;
+ }
+ };
+
+ const filteredPVs = persistentVolumes.filter(pv =>
+ pv.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredPVCs = persistentVolumeClaims.filter(pvc =>
+ pvc.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const filteredSCs = storageClasses.filter(sc =>
+ sc.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ return (
+ <div className="space-y-8">
+ <div className="flex items-center justify-between">
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground text-[20px]">
+ PULLPIRI Storage
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ Manage persistent volumes, claims, and storage classes in your cluster
+ </p>
+ </div>
+ <Button className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-lg hover:shadow-xl transition-all gap-2">
+ <Plus className="w-4 h-4" />
+ Create PVC
+ </Button>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <div className="relative flex-1 max-w-md">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="Search storage resources..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10 h-12 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all"
+ />
+ </div>
+ <div className="flex items-center gap-3">
+ <Badge className="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-800 px-3 py-1">
+ <Database className="w-3 h-3 mr-1" />
+ {persistentVolumes.length} PVs
+ </Badge>
+ <Badge className="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-800 px-3 py-1">
+ <HardDrive className="w-3 h-3 mr-1" />
+ {persistentVolumeClaims.length} PVCs
+ </Badge>
+ </div>
+ </div>
+
+ <Tabs defaultValue="pvcs" className="space-y-6">
+ <TabsList className="bg-card/80 backdrop-blur-sm border border-border/30 shadow-lg">
+ <TabsTrigger value="pvcs" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">
+ Persistent Volume Claims
+ </TabsTrigger>
+ <TabsTrigger value="pvs" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">
+ Persistent Volumes
+ </TabsTrigger>
+ <TabsTrigger value="storage-classes" className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground">
+ Storage Classes
+ </TabsTrigger>
+ </TabsList>
+
+ <TabsContent value="pvcs">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <HardDrive className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Persistent Volume Claims</CardTitle>
+ <CardDescription>Storage requests from your applications</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Namespace</TableHead>
+ <TableHead className="font-semibold text-foreground">Status</TableHead>
+ <TableHead className="font-semibold text-foreground">Volume</TableHead>
+ <TableHead className="font-semibold text-foreground">Capacity</TableHead>
+ <TableHead className="font-semibold text-foreground">Access Modes</TableHead>
+ <TableHead className="font-semibold text-foreground">Storage Class</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredPVCs.map((pvc) => (
+ <TableRow key={pvc.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{pvc.name}</TableCell>
+ <TableCell className="text-muted-foreground">{pvc.namespace}</TableCell>
+ <TableCell>{getStatusBadge(pvc.status)}</TableCell>
+ <TableCell className="font-mono text-sm">
+ {pvc.volume !== "-" ? (
+ <Badge variant="outline" className="text-xs">
+ {pvc.volume}
+ </Badge>
+ ) : (
+ <span className="text-muted-foreground">-</span>
+ )}
+ </TableCell>
+ <TableCell className="font-mono text-sm">{pvc.capacity}</TableCell>
+ <TableCell>
+ <div className="flex gap-1 flex-wrap">
+ {pvc.accessModes.map((mode) => (
+ <Badge key={mode} variant="secondary" className="text-xs">
+ {mode}
+ </Badge>
+ ))}
+ </div>
+ </TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {pvc.storageClass}
+ </Badge>
+ </TableCell>
+ <TableCell className="text-muted-foreground">{pvc.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-3 w-3" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="pvs">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Database className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Persistent Volumes</CardTitle>
+ <CardDescription>Cluster-wide storage resources</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Capacity</TableHead>
+ <TableHead className="font-semibold text-foreground">Access Modes</TableHead>
+ <TableHead className="font-semibold text-foreground">Reclaim Policy</TableHead>
+ <TableHead className="font-semibold text-foreground">Status</TableHead>
+ <TableHead className="font-semibold text-foreground">Claim</TableHead>
+ <TableHead className="font-semibold text-foreground">Storage Class</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredPVs.map((pv) => (
+ <TableRow key={pv.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{pv.name}</TableCell>
+ <TableCell className="font-mono text-sm">{pv.capacity}</TableCell>
+ <TableCell>
+ <div className="flex gap-1 flex-wrap">
+ {pv.accessModes.map((mode) => (
+ <Badge key={mode} variant="secondary" className="text-xs">
+ {mode}
+ </Badge>
+ ))}
+ </div>
+ </TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {pv.reclaimPolicy}
+ </Badge>
+ </TableCell>
+ <TableCell>{getStatusBadge(pv.status)}</TableCell>
+ <TableCell className="font-mono text-sm">
+ {pv.claim !== "-" ? (
+ <Badge variant="outline" className="text-xs">
+ {pv.claim}
+ </Badge>
+ ) : (
+ <span className="text-muted-foreground">-</span>
+ )}
+ </TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {pv.storageClass}
+ </Badge>
+ </TableCell>
+ <TableCell className="text-muted-foreground">{pv.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-3 w-3" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+
+ <TabsContent value="storage-classes">
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Settings className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Storage Classes</CardTitle>
+ <CardDescription>Define storage provisioning parameters</CardDescription>
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="overflow-hidden rounded-xl border border-border/30">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">Name</TableHead>
+ <TableHead className="font-semibold text-foreground">Provisioner</TableHead>
+ <TableHead className="font-semibold text-foreground">Reclaim Policy</TableHead>
+ <TableHead className="font-semibold text-foreground">Volume Binding Mode</TableHead>
+ <TableHead className="font-semibold text-foreground">Allow Volume Expansion</TableHead>
+ <TableHead className="font-semibold text-foreground">Age</TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {filteredSCs.map((sc) => (
+ <TableRow key={sc.name} className="border-border/30 hover:bg-muted/30 transition-colors">
+ <TableCell className="font-medium text-foreground">{sc.name}</TableCell>
+ <TableCell className="font-mono text-sm text-muted-foreground">{sc.provisioner}</TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {sc.reclaimPolicy}
+ </Badge>
+ </TableCell>
+ <TableCell>
+ <Badge variant="secondary" className="text-xs">
+ {sc.volumeBindingMode}
+ </Badge>
+ </TableCell>
+ <TableCell>
+ <Badge className={sc.allowVolumeExpansion
+ ? "bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200"
+ : "bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200"
+ }>
+ {sc.allowVolumeExpansion ? "Yes" : "No"}
+ </Badge>
+ </TableCell>
+ <TableCell className="text-muted-foreground">{sc.age}</TableCell>
+ <TableCell>
+ <Button variant="ghost" size="sm" className="w-8 h-8 hover:bg-muted">
+ <MoreHorizontal className="h-3 w-3" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + + + + + + + + + + + + + + +4x +4x +4x +4x +4x + + +4x +4x +4x +4x +4x + + +4x +4x +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x +4x + + + + + + + + + + + + + + + + + + + + +4x +4x + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState, useEffect, useRef } from "react";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { X, Minimize2, /*Square,*/ Settings } from "lucide-react"; // 2025-09-23 comment out
+
+interface TerminalViewProps {
+ isVisible: boolean;
+ onClose: () => void;
+ podName: string;
+}
+
+interface CommandHistory {
+ command: string;
+ output: string[];
+ timestamp: Date;
+}
+
+export function TerminalView({ isVisible, onClose, podName }: TerminalViewProps) {
+ const [currentCommand, setCurrentCommand] = useState("");
+ const [commandHistory, setCommandHistory] = useState<CommandHistory[]>([]);
+ const [historyIndex, setHistoryIndex] = useState(-1);
+ const [isConnected, setIsConnected] = useState(false);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const terminalRef = useRef<HTMLDivElement>(null);
+
+ // Mock command responses
+ const mockResponses: Record<string, string[]> = {
+ 'ls': ['app.js', 'package.json', 'node_modules', 'logs', 'config'],
+ 'ls -la': [
+ 'total 48',
+ 'drwxr-xr-x 1 root root 4096 Jan 1 12:00 .',
+ 'drwxr-xr-x 1 root root 4096 Jan 1 12:00 ..',
+ '-rw-r--r-- 1 root root 1234 Jan 1 12:00 app.js',
+ '-rw-r--r-- 1 root root 567 Jan 1 12:00 package.json',
+ 'drwxr-xr-x 1 root root 4096 Jan 1 12:00 node_modules'
+ ],
+ 'pwd': ['/app'],
+ 'whoami': ['root'],
+ 'ps aux': [
+ 'USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND',
+ 'root 1 0.1 1.2 34567 8901 ? Ss 12:00 0:01 node app.js',
+ 'root 15 0.0 0.1 4567 890 pts/0 R+ 12:15 0:00 ps aux'
+ ],
+ 'top': ['Tasks: 2 total, 1 running, 1 sleeping, 0 stopped, 0 zombie', 'CPU usage: 12.5%', 'Memory usage: 245MB/512MB'],
+ 'df -h': [
+ 'Filesystem Size Used Avail Use% Mounted on',
+ '/dev/sda1 10G 2.1G 7.4G 22% /',
+ 'tmpfs 256M 0 256M 0% /tmp'
+ ],
+ 'cat /etc/os-release': [
+ 'NAME="Alpine Linux"',
+ 'ID=alpine',
+ 'VERSION_ID=3.18.0',
+ 'PRETTY_NAME="Alpine Linux v3.18"'
+ ],
+ 'echo $PATH': ['/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin'],
+ 'help': [
+ 'Available commands:',
+ ' ls, ls -la - List directory contents',
+ ' pwd - Print working directory',
+ ' whoami - Print current user',
+ ' ps aux - List running processes',
+ ' top - Show system resources',
+ ' df -h - Show disk usage',
+ ' cat <file> - Display file contents',
+ ' echo <text> - Display text',
+ ' clear - Clear terminal',
+ ' exit - Close terminal'
+ ]
+ };
+
+ // Simulate connection
+ useEffect(() => {
+ if (isVisible) {
+ setIsConnected(false);
+ const timer = setTimeout(() => {
+ setIsConnected(true);
+ setCommandHistory([{
+ command: '',
+ output: [
+ `Connected to ${podName}`,
+ 'Alpine Linux 3.18.0',
+ 'Welcome to the pod terminal!',
+ 'Type "help" for available commands.',
+ ''
+ ],
+ timestamp: new Date()
+ }]);
+ }, 1500);
+ return () => clearTimeout(timer);
+ }
+ }, [isVisible, podName]);
+
+ // Focus input when terminal becomes visible
+ useEffect(() => {
+ if (isVisible && isConnected && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [isVisible, isConnected]);
+
+ // Auto-scroll to bottom
+ useEffect(() => {
+ if (terminalRef.current) {
+ terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+ }
+ }, [commandHistory]);
+
+ const executeCommand = (cmd: string) => {
+ const trimmedCmd = cmd.trim();
+
+ if (!trimmedCmd) return;
+
+ if (trimmedCmd === 'clear') {
+ setCommandHistory([]);
+ return;
+ }
+
+ if (trimmedCmd === 'exit') {
+ onClose();
+ return;
+ }
+
+ let output: string[] = [];
+
+ if (mockResponses[trimmedCmd]) {
+ output = mockResponses[trimmedCmd];
+ } else if (trimmedCmd.startsWith('echo ')) {
+ output = [trimmedCmd.slice(5)];
+ } else if (trimmedCmd.startsWith('cat ')) {
+ const filename = trimmedCmd.slice(4);
+ if (filename === 'app.js') {
+ output = [
+ 'const express = require("express");',
+ 'const app = express();',
+ '',
+ 'app.get("/", (req, res) => {',
+ ' res.json({ status: "healthy" });',
+ '});',
+ '',
+ 'app.listen(3000, () => {',
+ ' console.log("Server running on port 3000");',
+ '});'
+ ];
+ } else {
+ output = [`cat: ${filename}: No such file or directory`];
+ }
+ } else {
+ output = [`bash: ${trimmedCmd}: command not found`];
+ }
+
+ const newEntry: CommandHistory = {
+ command: trimmedCmd,
+ output,
+ timestamp: new Date()
+ };
+
+ setCommandHistory(prev => [...prev, newEntry]);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ executeCommand(currentCommand);
+ setCurrentCommand("");
+ setHistoryIndex(-1);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ const commands = commandHistory.filter(h => h.command).map(h => h.command);
+ if (commands.length > 0) {
+ const newIndex = historyIndex === -1 ? commands.length - 1 : Math.max(0, historyIndex - 1);
+ setHistoryIndex(newIndex);
+ setCurrentCommand(commands[newIndex]);
+ }
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ const commands = commandHistory.filter(h => h.command).map(h => h.command);
+ if (historyIndex >= 0) {
+ const newIndex = historyIndex + 1;
+ if (newIndex >= commands.length) {
+ setHistoryIndex(-1);
+ setCurrentCommand("");
+ } else {
+ setHistoryIndex(newIndex);
+ setCurrentCommand(commands[newIndex]);
+ }
+ }
+ }
+ };
+
+ if (!isVisible) return null;
+
+ return (
+ <div className="fixed inset-0 z-50 bg-background">
+ {/* Terminal Header */}
+ <div className="h-12 bg-card border-b border-border flex items-center justify-between px-4">
+ <div className="flex items-center gap-3">
+ <div className="flex items-center gap-1">
+ <div className="w-3 h-3 rounded-full bg-red-500"></div>
+ <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+ <div className="w-3 h-3 rounded-full bg-green-500"></div>
+ </div>
+ <div className="flex items-center gap-2">
+ <span className="font-semibold">Terminal</span>
+ <Badge variant="outline" className="text-xs">
+ {podName}
+ </Badge>
+ </div>
+ </div>
+
+ <div className="flex items-center gap-2">
+ <Badge variant={isConnected ? "default" : "secondary"} className="text-xs">
+ {isConnected ? (
+ <>
+ <div className="w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></div>
+ Connected
+ </>
+ ) : (
+ 'Connecting...'
+ )}
+ </Badge>
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+ <Settings className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+ <Minimize2 className="h-4 w-4" />
+ </Button>
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={onClose}>
+ <X className="h-4 w-4" />
+ </Button>
+ </div>
+ </div>
+
+ {/* Terminal Content */}
+ <div className="h-[calc(100vh-48px)] bg-slate-900 text-green-400 overflow-hidden">
+ <div
+ ref={terminalRef}
+ className="h-full overflow-y-auto p-4 font-mono text-sm leading-relaxed"
+ >
+ {!isConnected ? (
+ <div className="flex items-center gap-2">
+ <div className="animate-spin w-4 h-4 border-2 border-green-400 border-t-transparent rounded-full"></div>
+ <span>Connecting to {podName}...</span>
+ </div>
+ ) : (
+ <>
+ {/* Command History */}
+ {commandHistory.map((entry, index) => (
+ <div key={index} className="mb-2">
+ {entry.command && (
+ <div className="flex items-center gap-2">
+ <span className="text-yellow-400">root@{podName.split('-')[0]}:</span>
+ <span className="text-blue-400">/app$</span>
+ <span className="text-green-400">{entry.command}</span>
+ </div>
+ )}
+ {entry.output.map((line, lineIndex) => (
+ <div key={lineIndex} className="text-gray-300 whitespace-pre-wrap">
+ {line}
+ </div>
+ ))}
+ </div>
+ ))}
+
+ {/* Current Input Line */}
+ <div className="flex items-center gap-2">
+ <span className="text-yellow-400">root@{podName.split('-')[0]}:</span>
+ <span className="text-blue-400">/app$</span>
+ <input
+ ref={inputRef}
+ type="text"
+ value={currentCommand}
+ onChange={(e) => setCurrentCommand(e.target.value)}
+ onKeyDown={handleKeyDown}
+ className="flex-1 bg-transparent border-none outline-none text-green-400 font-mono"
+ placeholder=""
+ autoComplete="off"
+ spellCheck={false}
+ />
+ <span className="animate-pulse text-green-400">|</span>
+ </div>
+ </>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +2x +3x + + +3x +3x +3x +3x +3x +3x + +3x +3x +3x +3x +3x +3x +3x + + +3x +3x +3x +3x +3x +3x +3x +1x +1x +4x +4x + + +4x +4x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+ theme: Theme;
+ toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState<Theme>('light');
+
+ useEffect(() => {
+ // Check for saved theme preference or default to light mode
+ const savedTheme = localStorage.getItem('theme') as Theme | null;
+ if (savedTheme) {
+ setTheme(savedTheme);
+ } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ setTheme('dark');
+ }
+ }, []);
+
+ useEffect(() => {
+ // Apply theme to document
+ const root = document.documentElement;
+ if (theme === 'dark') {
+ root.classList.add('dark');
+ } else {
+ root.classList.remove('dark');
+ }
+ localStorage.setItem('theme', theme);
+ }, [theme]);
+
+ const toggleTheme = () => {
+ setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+ };
+
+ return (
+ <ThemeContext.Provider value={{ theme, toggleTheme }}>
+ {children}
+ </ThemeContext.Provider>
+ );
+}
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 +638 +639 +640 +641 +642 +643 +644 +645 +646 +647 +648 +649 +650 +651 +652 +653 +654 +655 +656 +657 +658 +659 +660 +661 +662 +663 +664 +665 +666 +667 +668 +669 +670 +671 +672 +673 +674 +675 +676 +677 +678 +679 +680 +681 +682 +683 +684 +685 +686 +687 +688 +689 +690 +691 +692 +693 +694 +695 +696 +697 +698 +699 +700 +701 +702 +703 +704 +705 +706 +707 +708 +709 +710 +711 +712 +713 +714 +715 +716 +717 +718 +719 +720 +721 +722 +723 +724 +725 +726 +727 +728 +729 +730 +731 +732 +733 +734 +735 +736 +737 +738 +739 +740 +741 +742 +743 +744 +745 +746 +747 +748 +749 +750 +751 +752 +753 +754 +755 +756 +757 +758 +759 +760 +761 +762 +763 +764 +765 +766 +767 +768 +769 +770 +771 +772 +773 +774 +775 +776 +777 +778 +779 +780 +781 +782 +783 +784 +785 +786 +787 +788 +789 +790 +791 +792 +793 +794 +795 +796 +797 +798 +799 +800 +801 +802 +803 +804 +805 +806 +807 +808 +809 +810 +811 +812 +813 +814 +815 +816 +817 +818 +819 +820 +821 +822 +823 +824 +825 +826 +827 +828 +829 +830 +831 +832 +833 +834 +835 +836 +837 +838 +839 +840 +841 +842 +843 +844 +845 +846 +847 +848 +849 +850 +851 +852 +853 +854 +855 +856 +857 +858 +859 +860 +861 +862 +863 +864 +865 +866 +867 +868 +869 +870 +871 +872 +873 +874 +875 +876 +877 +878 +879 +880 +881 +882 +883 +884 +885 +886 +887 +888 +889 +890 +891 +892 +893 +894 +895 +896 +897 +898 +899 +900 +901 +902 +903 +904 +905 +906 +907 +908 +909 +910 +911 +912 +913 +914 +915 +916 +917 +918 +919 +920 +921 +922 +923 +924 +925 +926 +927 +928 +929 +930 +931 +932 +933 +934 +935 +936 +937 +938 +939 +940 +941 +942 +943 +944 +945 +946 +947 +948 +949 +950 +951 +952 +953 +954 +955 +956 +957 +958 +959 +960 +961 +962 +963 +964 +965 +966 +967 +968 +969 +970 +971 +972 +973 +974 +975 +976 +977 +978 +979 +980 +981 +982 +983 +984 +985 +986 +987 +988 +989 +990 +991 +992 +993 +994 +995 +996 +997 +998 +999 +1000 +1001 +1002 +1003 +1004 +1005 +1006 +1007 +1008 +1009 +1010 +1011 +1012 +1013 +1014 +1015 +1016 +1017 +1018 +1019 +1020 +1021 +1022 +1023 +1024 +1025 +1026 +1027 +1028 +1029 +1030 +1031 +1032 +1033 +1034 +1035 +1036 +1037 +1038 +1039 +1040 +1041 +1042 +1043 +1044 +1045 +1046 +1047 +1048 +1049 +1050 +1051 +1052 +1053 +1054 +1055 +1056 +1057 +1058 +1059 +1060 +1061 +1062 +1063 +1064 +1065 +1066 +1067 +1068 +1069 +1070 +1071 +1072 +1073 +1074 +1075 +1076 +1077 +1078 +1079 +1080 +1081 +1082 +1083 +1084 +1085 +1086 +1087 +1088 +1089 +1090 +1091 +1092 +1093 +1094 +1095 +1096 +1097 +1098 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +7x +7x +7x + + + +7x +7x +7x +7x +7x +7x +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +7x +7x +7x +7x +7x +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + + + +13x +13x +13x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +13x +13x +13x +3x +3x +13x +13x +13x +1x +1x +1x + + + +1x + + + +1x + + + +1x +1x +1x +1x +1x +1x +13x +13x +13x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +13x +13x +13x +13x +13x +13x +13x +13x + + + + + + + + + + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + + + + + + + + + + + + + + + + + + + + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +13x +13x +13x +17x +17x +17x +17x +17x +17x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + +13x +13x +13x +13x +13x +13x +13x +13x +1x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x + + + +13x +13x +13x +13x +13x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x + + + +2x +2x +2x +2x +2x +2x +2x + + + +2x +2x +2x +2x +2x +2x +2x + + + +2x +2x +2x +2x +2x +2x +2x +2x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +13x +13x +13x +13x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "./ui/alert-dialog";
+import { Progress } from "./ui/progress";
+import { Search, MoreHorizontal, /*Play, Pause, RotateCcw, */Plus, Box, Activity, AlertCircle, Cpu, MemoryStick, FileText, Terminal, Edit, Trash2, Server, Network, TrendingUp, Zap, Clock/*, Users, ChevronDown*/ } from "lucide-react";
+import { LogsDialog } from "./LogsDialog";
+import { TerminalView } from "./TerminalView";
+import { YamlEditor } from "./YamlEditor";
+import { CreatePodDialog } from "./CreatePodDialog";
+import { PieChart, Pie, Cell, ResponsiveContainer, /*BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend, LineChart, Line, Area, AreaChart,*/ Tooltip } from 'recharts';
+
+// Pod interface
+interface Pod {
+ name: string;
+ image: string;
+ labels: Record<string, string>;
+ node: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ age: string;
+ ready: string;
+ restarts: number;
+ ip: string;
+}
+
+interface WorkloadsProps {
+ onPodClick?: (podName: string) => void;
+ pods: Pod[];
+ setPods: React.Dispatch<React.SetStateAction<Pod[]>>;
+ recentEvents: any[];
+ setRecentEvents: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+export function Workloads({ onPodClick, pods, setPods, recentEvents, setRecentEvents }: WorkloadsProps) {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedNode, setSelectedNode] = useState<string>("all");
+ const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
+ const [menuPosition, setMenuPosition] = useState<{
+ top: number;
+ right: number;
+ } | null>(null);
+
+
+ // LGSI changes:
+ const [nodesDataToUse, setNodesDataToUse] = useState<any[]>([]); // Replace mock with fetched data
+ const [nodesFetchSuccess, setNodesFetchSuccess] = useState(false);
+
+ useEffect(() => {
+ const settingserviceApiUrl = import.meta.env.VITE_SETTING_SERVICE_API_URL;
+ const _timeout = import.meta.env.VITE_SETTING_SERVICE_TIMEOUT || 5000;
+ if (!settingserviceApiUrl) {
+ console.error("VITE_SETTING_SERVICE_API_URL is not defined");
+ return;
+ }
+
+ // Fetch function
+ const fetchNodes = () => {
+ fetch(`${settingserviceApiUrl}/api/v1/metrics/nodes`)
+ .then(res => res.json())
+ .then(data => {
+ if (Array.isArray(data) && data.length > 0) {
+ setNodesDataToUse(data);
+ setNodesFetchSuccess(true);
+ console.log("✅ Nodes API fetched:", data);
+
+ setRecentEvents(prev => {
+ const newEvent = {
+ type: "Fetched",
+ resource: "Node",
+ name: "Nodes fetch success",
+ time: new Date().toLocaleTimeString(),
+ status: "success",
+ };
+
+ // Find the most recent event for this resource
+ const latestSameResourceEvent = prev.find(
+ e => e.resource === newEvent.resource
+ );
+
+ // Only add if the latest event for this resource is not the same type, status, and name
+ if (
+ latestSameResourceEvent &&
+ latestSameResourceEvent.type === newEvent.type &&
+ latestSameResourceEvent.status === newEvent.status &&
+ latestSameResourceEvent.name === newEvent.name
+ ) {
+ return prev;
+ }
+ return [newEvent, ...prev];
+ });
+ } else {
+ setNodesFetchSuccess(false);
+ setNodesDataToUse([]);
+ }
+ })
+ .catch(e => {
+ setNodesFetchSuccess(false);
+ setNodesDataToUse([]);
+ console.error("❌ Nodes API fetch failed:", e);
+
+ setRecentEvents(prev => {
+ const newEvent = {
+ type: "Fetched",
+ resource: "Node",
+ name: "Nodes fetch failed",
+ time: new Date().toLocaleTimeString(),
+ status: "error",
+ };
+
+ // Find the most recent event for this resource
+ const latestSameResourceEvent = prev.find(
+ e => e.resource === newEvent.resource
+ );
+
+ // Only add if the latest event for this resource is not the same type, status, and name
+ if (
+ latestSameResourceEvent &&
+ latestSameResourceEvent.type === newEvent.type &&
+ latestSameResourceEvent.status === newEvent.status &&
+ latestSameResourceEvent.name === newEvent.name
+ ) {
+ return prev;
+ }
+ return [newEvent, ...prev];
+ });
+ });
+ };
+
+ // Initial fetch
+ fetchNodes();
+
+ // Set up interval
+ const intervalId = setInterval(fetchNodes, _timeout);
+
+ // Cleanup on unmount
+ return () => clearInterval(intervalId);
+ }, []);
+
+ // Dialog states
+ const [logsDialog, setLogsDialog] = useState<{
+ open: boolean;
+ podName: string;
+ }>({
+ open: false,
+ podName: "",
+ });
+ const [terminalView, setTerminalView] = useState<{
+ open: boolean;
+ podName: string;
+ }>({
+ open: false,
+ podName: "",
+ });
+ const [yamlEditor, setYamlEditor] = useState<{
+ open: boolean;
+ podName: string;
+ }>({
+ open: false,
+ podName: "",
+ });
+
+ // Delete confirmation dialog state
+ const [deleteDialog, setDeleteDialog] = useState<{
+ open: boolean;
+ podName: string;
+ }>({
+ open: false,
+ podName: "",
+ });
+
+ // Create Pod dialog state
+ const [createPodDialog, setCreatePodDialog] = useState(false);
+
+ // CreatePodDialog용 임시 핸들러
+ const handleCreatePod = (pod: any) => {
+ setPods((prevPods: any[]) => [...prevPods, pod]);
+ setCreatePodDialog(false);
+ };
+
+ // Toggle menu for specific pod
+ const toggleMenu = (podName: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ console.log("🔍 Debug: Menu toggle clicked for pod:", podName);
+
+ const rect = e.currentTarget.getBoundingClientRect();
+ setMenuPosition({
+ top: rect.bottom + window.scrollY,
+ right: window.innerWidth - rect.right,
+ });
+
+ setOpenMenus((prev) => ({
+ ...prev,
+ [podName]: !prev[podName],
+ }));
+ };
+
+ // Close all menus
+ const closeAllMenus = () => {
+ setOpenMenus({});
+ };
+
+ // Handle pod actions
+ const handlePodAction = (action: string, podName: string) => {
+ console.log(`🔧 Pod Action Triggered: ${action} for ${podName}`);
+ switch (action) {
+ case "logs":
+ console.log(`Opening logs for ${podName}`);
+ setLogsDialog({ open: true, podName });
+ break;
+ case "exec":
+ console.log(`Executing shell for ${podName}`);
+ setTerminalView({ open: true, podName });
+ break;
+ case "edit":
+ console.log(`Editing ${podName}`);
+ setYamlEditor({ open: true, podName });
+ break;
+ case "delete":
+ console.log(`Requesting delete confirmation for ${podName}`);
+ setDeleteDialog({ open: true, podName });
+ break;
+ }
+ };
+
+ // Handle actual pod deletion
+ const handleConfirmDelete = () => {
+ const podName = deleteDialog.podName;
+ console.log(`✅ Deleting ${podName}`);
+
+ // Actually delete the pod from the list
+ setPods((prevPods) => prevPods.filter((pod) => pod.name !== podName));
+
+ // Close the dialog
+ setDeleteDialog({ open: false, podName: "" });
+
+ console.log(`✅ Pod "${podName}" deleted successfully!`);
+ };
+
+ // Calculate cluster metrics
+ /*const runningPods = pods.filter((pod) => pod.status === "Running").length; //2025-09-23 comment out
+ const pendingPods = pods.filter((pod) => pod.status === "Pending").length;
+ const failedPods = pods.filter((pod) => pod.status === "Failed").length;
+*/
+ // Nodes data with more detailed information
+ const nodesData = nodesFetchSuccess
+ ? nodesDataToUse.map((node: any) => ({
+ name: node.node_name,
+ pods: pods.filter((pod) => pod.node === node.node_name).length,
+ status: "Ready",
+ cpu: `${(node.cpu_usage / 100 * node.cpu_count).toFixed(1)}/${node.cpu_count}`,
+ memory: `${(node.used_memory / 1024 / 1024 / 1024).toFixed(1)}/${(node.total_memory / 1024 / 1024 / 1024).toFixed(1)}`,
+ cpuUsage: Number(node.cpu_usage.toFixed(1)),
+ memoryUsage: Number(node.mem_usage.toFixed(1)),
+ storageUsage: 0, // If you have storage info, fill here
+ }))
+ : [];
+
+ // Mock Data
+ // {
+ // name: "worker-node-1",
+ // pods: pods.filter((pod) => pod.node === "worker-node-1").length,
+ // status: "Ready",
+ // cpu: "2.4/4",
+ // memory: "3.2/8",
+ // cpuUsage: 60,
+ // memoryUsage: 40,
+ // storageUsage: 35,
+ // },
+ // {
+ // name: "worker-node-2",
+ // pods: pods.filter((pod) => pod.node === "worker-node-2").length,
+ // status: "Ready",
+ // cpu: "1.8/4",
+ // memory: "2.1/8",
+ // cpuUsage: 45,
+ // memoryUsage: 26,
+ // storageUsage: 50,
+ // },
+ // {
+ // name: "worker-node-3",
+ // pods: pods.filter((pod) => pod.node === "worker-node-3").length,
+ // status: "Ready",
+ // cpu: "0.8/4",
+ // memory: "1.5/8",
+ // cpuUsage: 20,
+ // memoryUsage: 19,
+ // storageUsage: 60,
+ // },
+
+ // Get unique node names from pods
+ const availableNodes = Array.from(new Set(nodesData.map((node) => node.name)));
+
+ // Get current node data based on selection
+ const currentNodeData =
+ selectedNode === "all"
+ ? null
+ : nodesData.find((node) => node.name === selectedNode);
+
+ // Calculate node-specific or cluster-wide metrics
+ const currentPods =
+ selectedNode === "all"
+ ? pods
+ : pods.filter((pod) => pod.node === selectedNode);
+ const nodeRunningPods = currentPods.filter(
+ (pod) => pod.status === "Running"
+ ).length;
+ const nodePendingPods = currentPods.filter(
+ (pod) => pod.status === "Pending"
+ ).length;
+ const nodeFailedPods = currentPods.filter(
+ (pod) => pod.status === "Failed"
+ ).length;
+
+ // Calculate cluster health based on actual data
+ /* const totalPods = pods.length; //2025-09-23 comment out
+ const runningPodPercentage =
+ totalPods > 0 ? (runningPods / totalPods) * 100 : 100;
+ const healthyNodeCount = nodesData.filter(
+ (node) => node.status === "Ready"
+ ).length;
+ const totalNodeCount = nodesData.length;
+ const nodeHealthPercentage =
+ totalNodeCount > 0 ? (healthyNodeCount / totalNodeCount) * 100 : 100;
+ */
+ // Determine cluster health status
+ /*const getClusterHealth = () => { //2025-09-23 comment out
+ // Critical: Failed pods > 20% or any nodes down
+ if (failedPods > totalPods * 0.2 || nodeHealthPercentage < 100) {
+ return {
+ status: "Critical",
+ color: "text-red-600 dark:text-red-400",
+ bgColor: "bg-red-500",
+ dotColor: "bg-red-500",
+ borderColor: "border-red-200/20 dark:border-red-800/20",
+ bgGradient: "from-red-500/10 to-red-600/10"
+ };
+ }
+ // Warning: Pending pods > 10% or running pods < 90%
+ else if (pendingPods > totalPods * 0.1 || runningPodPercentage < 90) {
+ return {
+ status: "Warning",
+ color: "text-amber-600 dark:text-amber-400",
+ bgColor: "bg-amber-500",
+ dotColor: "bg-amber-500",
+ borderColor: "border-amber-200/20 dark:border-amber-800/20",
+ bgGradient: "from-amber-500/10 to-amber-600/10"
+ };
+ }
+ // Healthy: All systems operational
+ else {
+ return {
+ status: "Healthy",
+ color: "text-emerald-600 dark:text-emerald-400",
+ bgColor: "bg-emerald-500",
+ dotColor: "bg-emerald-500",
+ borderColor: "border-emerald-200/20 dark:border-emerald-800/20",
+ bgGradient: "from-emerald-500/10 to-emerald-600/10"
+ };
+ }
+ };
+*/
+ // Use the shared cluster health hook
+ // const clusterHealth = useClusterHealth(pods); // 2025-09-23 comment out
+
+ // Pod status data for chart - node-specific or cluster-wide
+ const podStatusData = [
+ { name: "Running", value: nodeRunningPods, color: "#10b981" },
+ { name: "Pending", value: nodePendingPods, color: "#f59e0b" },
+ { name: "Failed", value: nodeFailedPods, color: "#ef4444" },
+ ].filter((item) => item.value > 0);
+
+ // Resource usage data - node-specific or cluster average
+ const resourceData = currentNodeData
+ ? [
+ {
+ name: "CPU Usage",
+ value: currentNodeData.cpuUsage,
+ max: 100,
+ color: "#3b82f6",
+ },
+ {
+ name: "Memory Usage",
+ value: currentNodeData.memoryUsage,
+ max: 100,
+ color: "#8b5cf6",
+ },
+ {
+ name: "Storage Usage",
+ value: currentNodeData.storageUsage,
+ max: 100,
+ color: "#06b6d4",
+ },
+ ]
+ : [
+ {
+ name: "CPU Usage",
+ value: Math.round(
+ nodesData.reduce((acc, node) => acc + node.cpuUsage, 0) /
+ nodesData.length
+ ),
+ max: 100,
+ color: "#3b82f6",
+ },
+ {
+ name: "Memory Usage",
+ value: Math.round(
+ nodesData.reduce((acc, node) => acc + node.memoryUsage, 0) /
+ nodesData.length
+ ),
+ max: 100,
+ color: "#8b5cf6",
+ },
+ {
+ name: "Storage Usage",
+ value: Math.round(
+ nodesData.reduce((acc, node) => acc + node.storageUsage, 0) /
+ nodesData.length
+ ),
+ max: 100,
+ color: "#06b6d4",
+ },
+ ];
+
+ // Recent events
+ // const recentEvents = [
+ // {
+ // type: "Created",
+ // resource: "Pod",
+ // name: "frontend-app-7d4b8c9f8d-xyz12",
+ // time: "2m ago",
+ // status: "success",
+ // },
+ // {
+ // type: "Scheduled",
+ // resource: "Pod",
+ // name: "backend-api-5f6a7b8c9d-def56",
+ // time: "5m ago",
+ // status: "success",
+ // },
+ // {
+ // type: "Failed",
+ // resource: "Pod",
+ // name: "database-migration-1a2b3c4d5e-jkl90",
+ // time: "30m ago",
+ // status: "error",
+ // },
+ // ];
+
+ // Helper function to get status badge
+ const getStatusBadge = (status: string) => {
+ const statusConfig = {
+ Running: {
+ variant: "default" as const,
+ className:
+ "bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800",
+ },
+ Pending: {
+ variant: "secondary" as const,
+ className:
+ "bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-200 border-amber-200 dark:border-amber-800",
+ },
+ Failed: {
+ variant: "destructive" as const,
+ className:
+ "bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200 border-red-200 dark:border-red-800",
+ },
+ Succeeded: {
+ variant: "default" as const,
+ className:
+ "bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800",
+ },
+ };
+
+ const config =
+ statusConfig[status as keyof typeof statusConfig] ||
+ statusConfig["Pending"];
+
+ return (
+ <Badge variant={config.variant} className={config.className}>
+ {status}
+ </Badge>
+ );
+ };
+
+ // Filter pods by selected node and search term
+ const filteredPods = pods.filter((pod) => {
+ const matchesSearch = pod.name
+ .toLowerCase()
+ .includes(searchTerm.toLowerCase());
+ const matchesNode = selectedNode === "all" || pod.node === selectedNode;
+ return matchesSearch && matchesNode;
+ });
+
+ return (
+ <div className="space-y-8" onClick={closeAllMenus}>
+ <div className="flex items-center justify-between">
+ <div className="relative">
+ <div className="flex items-center gap-4 mb-2">
+ <div className="w-1 h-8 bg-gradient-to-b from-primary to-primary/80 rounded-full"></div>
+ <h1 className="font-bold text-foreground text-[20px]">
+ PULLPIRI Workloads
+ </h1>
+ </div>
+ <p className="text-muted-foreground ml-8">
+ {selectedNode === "all"
+ ? "Manage and monitor pod workloads across all nodes"
+ : `Workloads on ${selectedNode}`}
+ </p>
+ </div>
+ <div className="flex items-center gap-4">
+ <div className="flex items-center gap-3">
+ <div className="flex items-center gap-2">
+ <Server className="w-5 h-5 text-primary" />
+ <span className="text-sm font-medium text-foreground">
+ Filter by Node:
+ </span>
+ </div>
+ <div className="flex items-center gap-2 p-1 bg-muted/30 rounded-lg border border-border/20">
+ <Button
+ variant={selectedNode === "all" ? "default" : "ghost"}
+ size="sm"
+ onClick={() => setSelectedNode("all")}
+ className={`h-8 px-3 text-xs font-medium transition-all ${selectedNode === "all"
+ ? "bg-primary text-primary-foreground shadow-sm"
+ : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+ }`}
+ >
+ <Network className="w-3 h-3 mr-1" />
+ All Nodes
+ </Button>
+ {availableNodes.map((nodeName) => (
+ <Button
+ key={nodeName}
+ variant={selectedNode === nodeName ? "default" : "ghost"}
+ size="sm"
+ onClick={() => setSelectedNode(nodeName)}
+ className={`h-8 px-3 text-xs font-medium transition-all ${selectedNode === nodeName
+ ? "bg-primary text-primary-foreground shadow-sm"
+ : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+ }`}
+ >
+ <Server className="w-3 h-3 mr-1" />
+ {nodeName}
+ </Button>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* Cluster Overview Dashboard */}
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+ {/* Total Pods */}
+ <Card className="bg-gradient-to-r from-blue-500/10 to-blue-600/10 backdrop-blur-sm border-blue-200/20 dark:border-blue-800/20 shadow-lg">
+ <CardContent className="p-6">
+ <div className="flex items-center gap-3">
+ <div className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center shadow-lg">
+ <Box className="w-6 h-6 text-white" />
+ </div>
+ <div>
+ <p className="text-sm text-muted-foreground">
+ {selectedNode === "all"
+ ? "Total Pods"
+ : `Pods on ${selectedNode}`}
+ </p>
+ <div className="flex items-center gap-2">
+ <span className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+ {currentPods.length}
+ </span>
+ <Badge className="bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-200 text-xs">
+ {nodeRunningPods} Running
+ </Badge>
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Nodes */}
+ <Card className="bg-gradient-to-r from-purple-500/10 to-purple-600/10 backdrop-blur-sm border-purple-200/20 dark:border-purple-800/20 shadow-lg">
+ <CardContent className="p-6">
+ <div className="flex items-center gap-3">
+ <div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center shadow-lg">
+ <Network className="w-6 h-6 text-white" />
+ </div>
+ <div>
+ <p className="text-sm text-muted-foreground">
+ {selectedNode === "all" ? "Active Nodes" : "Node Status"}
+ </p>
+ <div className="flex items-center gap-2">
+ {selectedNode === "all" ? (
+ <>
+ <span className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+ {nodesData.length}
+ </span>
+ <Badge className="bg-purple-100 dark:bg-purple-950 text-purple-800 dark:text-purple-200 text-xs">
+ All Ready
+ </Badge>
+ </>
+ ) : (
+ <>
+ <span className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+ {currentNodeData?.status}
+ </span>
+ <Badge className="bg-purple-100 dark:bg-purple-950 text-purple-800 dark:text-purple-200 text-xs">
+ {currentNodeData?.pods} Pods
+ </Badge>
+ </>
+ )}
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Resource Usage */}
+ <Card className="bg-gradient-to-r from-orange-500/10 to-orange-600/10 backdrop-blur-sm border-orange-200/20 dark:border-orange-800/20 shadow-lg">
+ <CardContent className="p-6">
+ <div className="flex items-center gap-3">
+ <div className="w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center shadow-lg">
+ <Activity className="w-6 h-6 text-white" />
+ </div>
+ <div className="flex-1">
+ <p className="text-sm text-muted-foreground mb-2">
+ {selectedNode === "all"
+ ? "Avg Resource Usage"
+ : `${selectedNode} Resources`}
+ </p>
+ <div className="space-y-2">
+ <div>
+ <div className="flex justify-between text-xs mb-1">
+ <span>CPU</span>
+ <span className="font-mono">
+ {resourceData[0].value}%
+ </span>
+ </div>
+ <Progress value={resourceData[0].value} className="h-1.5" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+
+ {/* Charts Section */}
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+ {/* Pod Status Distribution */}
+ <Card className="lg:col-span-1 bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Zap className="w-5 h-5 text-chart-1" />
+ Pod Status
+ </CardTitle>
+ <CardDescription>
+ {selectedNode === "all"
+ ? "Current distribution of pod states across cluster"
+ : `Pod states on ${selectedNode}`}
+ </CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="h-48">
+ <ResponsiveContainer width="100%" height="100%">
+ <PieChart>
+ <Pie
+ data={podStatusData}
+ cx="50%"
+ cy="50%"
+ innerRadius={40}
+ outerRadius={80}
+ paddingAngle={5}
+ dataKey="value"
+ >
+ {podStatusData.map((entry, index) => (
+ <Cell key={`cell-${index}`} fill={entry.color} />
+ ))}
+ </Pie>
+ <Tooltip
+ formatter={(value: any, name: any) => [`${value} pods`, name]}
+ labelStyle={{ color: "#000" }}
+ contentStyle={{
+ backgroundColor: "white",
+ border: "1px solid #ccc",
+ borderRadius: "8px",
+ boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+ }}
+ />
+ </PieChart>
+ </ResponsiveContainer>
+ </div>
+ <div className="grid grid-cols-2 gap-2 mt-4">
+ {podStatusData.map((item, index) => (
+ <div key={index} className="flex items-center gap-2">
+ <div
+ className="w-3 h-3 rounded-full"
+ style={{ backgroundColor: item.color }}
+ ></div>
+ <span className="text-sm text-muted-foreground">
+ {item.name}: {item.value}
+ </span>
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Resource Usage */}
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <TrendingUp className="w-5 h-5 text-chart-2" />
+ Resource Usage
+ </CardTitle>
+ <CardDescription>
+ {selectedNode === "all"
+ ? "Average cluster resource utilization"
+ : `Resource utilization on ${selectedNode}`}
+ </CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-4">
+ {resourceData.map((resource, index) => (
+ <div key={index} className="space-y-2">
+ <div className="flex justify-between items-center">
+ <span className="text-sm font-medium">{resource.name}</span>
+ <span className="text-sm text-muted-foreground">
+ {resource.value}%
+ </span>
+ </div>
+ <Progress
+ value={resource.value}
+ className="h-2"
+ style={
+ {
+ "--progress-background": resource.color,
+ } as React.CSSProperties
+ }
+ />
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Recent Events */}
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl">
+ <CardHeader>
+ <CardTitle className="flex items-center gap-2">
+ <Clock className="w-5 h-5 text-chart-3" />
+ Recent Events
+ </CardTitle>
+ <CardDescription>Latest cluster activities</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-3">
+ {recentEvents.slice(0, 3).map((event, index) => (
+ <div
+ key={index}
+ className="flex items-start gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+ >
+ <div
+ className={`w-2 h-2 rounded-full mt-2 ${event.status === "success"
+ ? "bg-emerald-500"
+ : event.status === "error"
+ ? "bg-red-500"
+ : "bg-yellow-500"
+ }`}
+ ></div>
+ <div className="flex-1 min-w-0">
+ <p className="text-sm font-medium truncate">
+ <span className="text-muted-foreground">
+ {event.type}
+ </span>{" "}
+ {event.resource}
+ </p>
+ <p className="text-xs text-muted-foreground truncate">
+ {event.name}
+ </p>
+ <p className="text-xs text-muted-foreground">
+ {event.time}
+ </p>
+ </div>
+ </div>
+ ))}
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+
+ <div className="flex items-center gap-4">
+ <div className="relative flex-1 max-w-md">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="Search workloads..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10 h-12 bg-card/80 backdrop-blur-sm border-border/30 shadow-sm hover:shadow-md transition-all"
+ />
+ </div>
+ <div className="flex items-center gap-3">
+ <Badge className="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-800 px-3 py-1">
+ <Box className="w-3 h-3 mr-1" />
+ {filteredPods.length} Pods
+ {selectedNode !== "all" && (
+ <span className="ml-1 text-xs opacity-70">on {selectedNode}</span>
+ )}
+ </Badge>
+ </div>
+ </div>
+
+ {/* Pods Table */}
+ <Card className="bg-card/80 backdrop-blur-sm border-border/20 shadow-xl overflow-visible">
+ <CardHeader>
+ <div className="flex items-center justify-between">
+ <div className="flex items-center gap-3">
+ <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+ <Box className="w-4 h-4 text-primary-foreground" />
+ </div>
+ <div>
+ <CardTitle className="text-foreground">Pods</CardTitle>
+ <CardDescription>
+ View and manage individual pod instances
+ </CardDescription>
+ </div>
+ </div>
+ <Button
+ className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-lg hover:shadow-xl transition-all gap-2"
+ onClick={() => setCreatePodDialog(true)}
+ >
+ <Plus className="w-4 h-4" />
+ Add Pod
+ </Button>
+ </div>
+ </CardHeader>
+ <CardContent className="overflow-visible">
+ <div className="rounded-xl border border-border/30 overflow-visible">
+ <Table>
+ <TableHeader className="bg-muted/80">
+ <TableRow className="border-border/30">
+ <TableHead className="font-semibold text-foreground">
+ Name
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Image
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Labels
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Node
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Status
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ CPU Usage
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Memory Usage
+ </TableHead>
+ <TableHead className="font-semibold text-foreground">
+ Age
+ </TableHead>
+ <TableHead className="font-semibold text-foreground"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody className="overflow-visible">
+ {filteredPods.map(
+ (pod, idx) => (
+ <TableRow
+ key={`${pod.name}-${pod.ip || idx}`}
+ className="border-border/30 hover:bg-muted/30 transition-colors"
+ >
+ <TableCell className="font-medium text-foreground max-w-xs">
+ <Button
+ variant="ghost"
+ className="h-auto p-0 font-medium text-[rgba(81,127,255,1)] dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline underline-offset-4 cursor-pointer transition-colors"
+ onClick={() => onPodClick?.(pod.name)}
+ >
+ {pod.name}
+ </Button>
+ </TableCell>
+ <TableCell className="font-mono text-sm text-muted-foreground">
+ <Badge variant="outline" className="text-xs">
+ {pod.image}
+ </Badge>
+ </TableCell>
+ <TableCell>
+ <div className="flex gap-1 flex-wrap">
+ {Object.entries(pod.labels).map(([key, value]) => (
+ <Badge
+ key={key}
+ variant="secondary"
+ className="text-xs"
+ >
+ {key}={value}
+ </Badge>
+ ))}
+ </div>
+ </TableCell>
+ <TableCell>
+ <Badge variant="outline" className="text-xs">
+ {pod.node}
+ </Badge>
+ </TableCell>
+ <TableCell>{getStatusBadge(pod.status)}</TableCell>
+ <TableCell>
+ <div className="flex items-center gap-1">
+ <Cpu className="w-3 h-3 text-muted-foreground" />
+ <span className="font-mono text-sm">
+ {pod.cpuUsage}
+ </span>
+ </div>
+ </TableCell>
+ <TableCell>
+ <div className="flex items-center gap-1">
+ <MemoryStick className="w-3 h-3 text-muted-foreground" />
+ <span className="font-mono text-sm">
+ {pod.memoryUsage}
+ </span>
+ </div>
+ </TableCell>
+ <TableCell className="text-muted-foreground">
+ {pod.age}
+ </TableCell>
+ <TableCell className="relative">
+ <Button
+ variant="ghost"
+ size="sm"
+ className="w-8 h-8 hover:bg-muted"
+ onClick={(e) => toggleMenu(pod.name, e)}
+ >
+ <MoreHorizontal className="h-3 w-3" />
+ </Button>
+ </TableCell>
+ </TableRow>
+ )
+ )}
+ </TableBody>
+ </Table>
+ </div>
+ </CardContent>
+ </Card>
+
+ {/* Dialog Components */}
+ <LogsDialog
+ open={logsDialog.open}
+ onOpenChange={(open: any) =>
+ setLogsDialog({ open, podName: logsDialog.podName })
+ }
+ podName={logsDialog.podName}
+ />
+
+ <TerminalView
+ isVisible={terminalView.open}
+ onClose={() => setTerminalView({ open: false, podName: "" })}
+ podName={terminalView.podName}
+ />
+
+ <YamlEditor
+ open={yamlEditor.open}
+ onOpenChange={(open: any) =>
+ setYamlEditor({ open, podName: yamlEditor.podName })
+ }
+ podName={yamlEditor.podName}
+ />
+
+ {/* Delete Confirmation Dialog */}
+ <AlertDialog
+ open={deleteDialog.open}
+ onOpenChange={(open: any) =>
+ setDeleteDialog({ open, podName: deleteDialog.podName })
+ }
+ >
+ <AlertDialogContent className="bg-card/95 backdrop-blur-sm">
+ <AlertDialogHeader>
+ <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+ <AlertCircle className="w-5 h-5" />
+ Delete Pod
+ </AlertDialogTitle>
+ <AlertDialogDescription>
+ Are you sure you want to delete pod{" "}
+ <span className="font-semibold text-foreground">
+ "{deleteDialog.podName}"
+ </span>
+ ?
+ <br />
+ <span className="text-xs text-muted-foreground mt-2 block">
+ This action cannot be undone. The pod will be permanently
+ removed from the cluster.
+ </span>
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <AlertDialogFooter>
+ <AlertDialogCancel
+ onClick={() => setDeleteDialog({ open: false, podName: "" })}
+ >
+ Cancel
+ </AlertDialogCancel>
+ <AlertDialogAction
+ onClick={handleConfirmDelete}
+ className="bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+ >
+ <Trash2 className="w-4 h-4 mr-2" />
+ Delete Pod
+ </AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
+ {/* Create Pod Dialog */}
+ <CreatePodDialog
+ open={createPodDialog}
+ onOpenChange={setCreatePodDialog}
+ onCreatePod={handleCreatePod}
+ onSuccess={(newPod: any) => {
+ setPods((prevPods) => [...prevPods, newPod]);
+ setCreatePodDialog(false);
+ }}
+ />
+
+ {/* Context Menu Portal */}
+ {openMenus &&
+ Object.keys(openMenus).length > 0 &&
+ menuPosition &&
+ createPortal(
+ <>
+ {Object.entries(openMenus).map(
+ ([podName, isOpen]) =>
+ isOpen && (
+ <div
+ key={podName}
+ className="fixed z-50 bg-card/95 backdrop-blur-sm border border-border/50 rounded-lg shadow-xl py-2 min-w-[160px]"
+ style={{
+ top: menuPosition.top,
+ right: menuPosition.right,
+ }}
+ onClick={(e) => e.stopPropagation()}
+ >
+ <button
+ className="w-full px-3 py-2 text-left text-sm hover:bg-muted/50 transition-colors flex items-center gap-2"
+ onClick={() => {
+ handlePodAction("logs", podName);
+ closeAllMenus();
+ }}
+ >
+ <FileText className="w-4 h-4" />
+ View Logs
+ </button>
+ <button
+ className="w-full px-3 py-2 text-left text-sm hover:bg-muted/50 transition-colors flex items-center gap-2"
+ onClick={() => {
+ handlePodAction("exec", podName);
+ closeAllMenus();
+ }}
+ >
+ <Terminal className="w-4 h-4" />
+ Exec Shell
+ </button>
+ <button
+ className="w-full px-3 py-2 text-left text-sm hover:bg-muted/50 transition-colors flex items-center gap-2"
+ onClick={() => {
+ handlePodAction("edit", podName);
+ closeAllMenus();
+ }}
+ >
+ <Edit className="w-4 h-4" />
+ Edit YAML
+ </button>
+ <div className="border-t border-border/50 my-1"></div>
+ <button
+ className="w-full px-3 py-2 text-left text-sm hover:bg-destructive/10 text-destructive transition-colors flex items-center gap-2"
+ onClick={() => {
+ handlePodAction("delete", podName);
+ closeAllMenus();
+ }}
+ >
+ <Trash2 className="w-4 h-4" />
+ Delete Pod
+ </button>
+ </div>
+ )
+ )}
+ </>,
+ document.body
+ )}
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + + +5x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x + + + + + + + +5x +5x + + + + + + + + + + + + + + + + + + +5x +5x + + + + +5x +5x + + + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { Textarea } from "./ui/textarea";
+//import { ScrollArea } from "./ui/scroll-area"; //2025-09-23 comment out
+import { Alert, AlertDescription } from "./ui/alert";
+import { Save, /*X,*/ RotateCcw, Download, AlertTriangle, CheckCircle } from "lucide-react"; //2025-09-23 comment out
+
+interface YamlEditorProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ podName: string;
+}
+
+export function YamlEditor({ open, onOpenChange, podName }: YamlEditorProps) {
+ const [yamlContent, setYamlContent] = useState("");
+ const [originalContent, setOriginalContent] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const [isSaving, setIsSaving] = useState(false);
+ const [hasChanges, setHasChanges] = useState(false);
+ const [validationError, setValidationError] = useState<string | null>(null);
+
+ // Mock YAML content
+ const mockYamlContent = `apiVersion: v1
+kind: Pod
+metadata:
+ name: ${podName}
+ namespace: default
+ labels:
+ app: frontend
+ version: v1.2.0
+ annotations:
+ kubernetes.io/created-by: deployment-controller
+spec:
+ containers:
+ - name: nginx
+ image: nginx:1.21
+ ports:
+ - containerPort: 80
+ protocol: TCP
+ resources:
+ requests:
+ memory: "64Mi"
+ cpu: "50m"
+ limits:
+ memory: "128Mi"
+ cpu: "100m"
+ env:
+ - name: ENV
+ value: "production"
+ - name: LOG_LEVEL
+ value: "info"
+ volumeMounts:
+ - name: config-volume
+ mountPath: /etc/nginx/conf.d
+ livenessProbe:
+ httpGet:
+ path: /health
+ port: 80
+ initialDelaySeconds: 30
+ periodSeconds: 10
+ readinessProbe:
+ httpGet:
+ path: /ready
+ port: 80
+ initialDelaySeconds: 5
+ periodSeconds: 5
+ volumes:
+ - name: config-volume
+ configMap:
+ name: nginx-config
+ restartPolicy: Always
+ dnsPolicy: ClusterFirst
+ nodeSelector:
+ kubernetes.io/os: linux
+status:
+ phase: Running
+ conditions:
+ - type: Initialized
+ status: "True"
+ lastTransitionTime: "2024-01-01T12:00:00Z"
+ - type: Ready
+ status: "True"
+ lastTransitionTime: "2024-01-01T12:00:30Z"
+ - type: ContainersReady
+ status: "True"
+ lastTransitionTime: "2024-01-01T12:00:30Z"
+ - type: PodScheduled
+ status: "True"
+ lastTransitionTime: "2024-01-01T12:00:00Z"
+ hostIP: "10.244.1.1"
+ podIP: "10.244.1.15"
+ startTime: "2024-01-01T12:00:00Z"`;
+
+ // Load YAML when dialog opens
+ useState(() => {
+ if (open && !yamlContent) {
+ setIsLoading(true);
+ // Simulate API call
+ setTimeout(() => {
+ setYamlContent(mockYamlContent);
+ setOriginalContent(mockYamlContent);
+ setIsLoading(false);
+ }, 1000);
+ }
+ });
+
+ // Validate YAML syntax (basic validation)
+ const validateYaml = (content: string): string | null => {
+ try {
+ // Basic YAML structure validation
+ const lines = content.split('\n');
+ //let indentStack: number[] = [0]; //2025-09-23 comment out
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+ if (line.trim() === '' || line.trim().startsWith('#')) continue;
+
+// const indent = line.length - line.trimStart().length; //2025-09-23 comment out
+ const trimmed = line.trim();
+
+ // Check for proper key-value format
+ if (trimmed.includes(':') && !trimmed.startsWith('-')) {
+ const [key] = trimmed.split(':');
+ if (!key.trim()) {
+ return `Line ${i + 1}: Invalid key format`;
+ }
+ }
+
+ // Check for proper list format
+ if (trimmed.startsWith('- ') && trimmed.length < 3) {
+ return `Line ${i + 1}: Empty list item`;
+ }
+ }
+
+ // Check for required fields
+ if (!content.includes('apiVersion:')) {
+ return 'Missing required field: apiVersion';
+ }
+ if (!content.includes('kind:')) {
+ return 'Missing required field: kind';
+ }
+ if (!content.includes('metadata:')) {
+ return 'Missing required field: metadata';
+ }
+
+ return null;
+ } catch (error) {
+ return `Invalid YAML syntax: ${error instanceof Error ? error.message : 'Unknown error'}`;
+ }
+ };
+
+ const handleContentChange = (newContent: string) => {
+ setYamlContent(newContent);
+ setHasChanges(newContent !== originalContent);
+
+ // Validate on change with debounce
+ const error = validateYaml(newContent);
+ setValidationError(error);
+ };
+
+ const handleSave = async () => {
+ const error = validateYaml(yamlContent);
+ if (error) {
+ setValidationError(error);
+ return;
+ }
+
+ setIsSaving(true);
+ // Simulate API call
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ setIsSaving(false);
+ setOriginalContent(yamlContent);
+ setHasChanges(false);
+ setValidationError(null);
+
+ // Show success message (you could use a toast here)
+ alert('Pod configuration updated successfully!');
+ };
+
+ const handleReset = () => {
+ setYamlContent(originalContent);
+ setHasChanges(false);
+ setValidationError(null);
+ };
+
+ const handleDownload = () => {
+ const blob = new Blob([yamlContent], { type: 'text/yaml' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `${podName}.yaml`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+
+ const lineCount = yamlContent.split('\n').length;
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="w-[75vw] min-w-[800px] max-w-6xl h-[45vh] min-h-[400px] max-h-[650px] flex flex-col bg-card/95 backdrop-blur-sm">
+ <DialogHeader className="flex-shrink-0">
+ <div className="flex items-center justify-between">
+ <div>
+ <DialogTitle className="text-foreground">Edit Pod Configuration</DialogTitle>
+ <DialogDescription>
+ Modify YAML configuration for <span className="font-semibold text-primary">{podName}</span>
+ </DialogDescription>
+ </div>
+ <div className="flex items-center gap-2">
+ {hasChanges && (
+ <Badge variant="outline" className="text-xs">
+ <AlertTriangle className="w-3 h-3 mr-1" />
+ Unsaved changes
+ </Badge>
+ )}
+ <Badge variant="secondary" className="text-xs">
+ {lineCount} lines
+ </Badge>
+ </div>
+ </div>
+ </DialogHeader>
+
+ {validationError && (
+ <Alert className="border-destructive/50 text-destructive">
+ <AlertTriangle className="h-4 w-4" />
+ <AlertDescription>
+ {validationError}
+ </AlertDescription>
+ </Alert>
+ )}
+
+ <div className="flex items-center gap-2 py-2 border-b border-border/20">
+ <Button
+ variant="default"
+ size="sm"
+ onClick={handleSave}
+ disabled={!hasChanges || !!validationError || isSaving}
+ className="h-8"
+ >
+ {isSaving ? (
+ <>
+ <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin mr-1" />
+ Saving...
+ </>
+ ) : (
+ <>
+ <Save className="w-3 h-3 mr-1" />
+ Save
+ </>
+ )}
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleReset}
+ disabled={!hasChanges}
+ className="h-8"
+ >
+ <RotateCcw className="w-3 h-3 mr-1" />
+ Reset
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleDownload}
+ className="h-8"
+ >
+ <Download className="w-3 h-3 mr-1" />
+ Download
+ </Button>
+ <div className="flex-1" />
+ {!validationError && yamlContent && (
+ <div className="flex items-center gap-1 text-xs text-emerald-600">
+ <CheckCircle className="w-3 h-3" />
+ Valid YAML
+ </div>
+ )}
+ </div>
+
+ <div className="flex-1 min-h-0">
+ {isLoading ? (
+ <div className="flex items-center justify-center h-full">
+ <div className="flex items-center gap-2 text-muted-foreground">
+ <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+ Loading YAML configuration...
+ </div>
+ </div>
+ ) : (
+ <div className="h-full flex">
+ {/* Line numbers */}
+ <div className="w-12 bg-muted/20 border-r border-border/20 p-2 font-mono text-xs text-muted-foreground text-right">
+ {yamlContent.split('\n').map((_, index) => (
+ <div key={index} className="leading-6">
+ {index + 1}
+ </div>
+ ))}
+ </div>
+
+ {/* Editor */}
+ <div className="flex-1">
+ <Textarea
+ value={yamlContent}
+ onChange={(e) => handleContentChange(e.target.value)}
+ className="h-full w-full border-none resize-none font-mono text-sm leading-6 bg-transparent focus:ring-0"
+ placeholder="Loading..."
+ spellCheck={false}
+ />
+ </div>
+ </div>
+ )}
+ </div>
+
+ <DialogFooter className="flex-shrink-0">
+ <Button variant="outline" onClick={() => onOpenChange(false)}>
+ Cancel
+ </Button>
+ <Button
+ onClick={handleSave}
+ disabled={!hasChanges || !!validationError || isSaving}
+ >
+ {isSaving ? 'Saving...' : 'Apply Changes'}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | 1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +1x +1x +3x +3x +3x +3x +1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+ const [didError, setDidError] = useState(false)
+
+ const handleError = () => {
+ setDidError(true)
+ }
+
+ const { src, alt, style, className, ...rest } = props
+
+ return didError ? (
+ <div
+ className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+ style={style}
+ >
+ <div className="flex items-center justify-center w-full h-full">
+ <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+ </div>
+ </div>
+ ) : (
+ <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ImageWithFallback.tsx | +
+
+ |
+ 100% | +29/29 | +100% | +3/3 | +100% | +2/2 | +100% | +29/29 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Cluster.tsx | +
+
+ |
+ 100% | +227/227 | +100% | +3/3 | +100% | +2/2 | +100% | +227/227 | +
| ConfigMaps.tsx | +
+
+ |
+ 100% | +404/404 | +100% | +8/8 | +100% | +4/4 | +100% | +404/404 | +
| CreatePodDialog.tsx | +
+
+ |
+ 74.6% | +420/563 | +20% | +1/5 | +3.7% | +1/27 | +74.6% | +420/563 | +
| Dashboard.tsx | +
+
+ |
+ 73.74% | +278/377 | +39.13% | +9/23 | +37.5% | +3/8 | +73.74% | +278/377 | +
| Dependencies.tsx | +
+
+ |
+ 98.81% | +500/506 | +85.24% | +52/61 | +90% | +9/10 | +98.81% | +500/506 | +
| Header.tsx | +
+
+ |
+ 97.6% | +163/167 | +90.47% | +19/21 | +33.33% | +1/3 | +97.6% | +163/167 | +
| LogsDialog.tsx | +
+
+ |
+ 71.95% | +136/189 | +37.5% | +3/8 | +20% | +1/5 | +71.95% | +136/189 | +
| Overview.tsx | +
+
+ |
+ 100% | +517/517 | +100% | +1/1 | +50% | +1/2 | +100% | +517/517 | +
| PodDetail.tsx | +
+
+ |
+ 91.52% | +583/637 | +19.04% | +8/42 | +100% | +2/2 | +91.52% | +583/637 | +
| Scenarios.tsx | +
+
+ |
+ 83.09% | +978/1177 | +72.91% | +35/48 | +17.39% | +4/23 | +83.09% | +978/1177 | +
| Services.tsx | +
+
+ |
+ 3.53% | +12/339 | +100% | +0/0 | +0% | +0/1 | +3.53% | +12/339 | +
| Sidebar.tsx | +
+
+ |
+ 99.09% | +220/222 | +96.42% | +27/28 | +20% | +1/5 | +99.09% | +220/222 | +
| Storage.tsx | +
+
+ |
+ 2.83% | +12/423 | +100% | +0/0 | +0% | +0/1 | +2.83% | +12/423 | +
| TerminalView.tsx | +
+
+ |
+ 54.86% | +158/288 | +28.57% | +4/14 | +25% | +1/4 | +54.86% | +158/288 | +
| ThemeProvider.tsx | +
+
+ |
+ 87.27% | +48/55 | +66.66% | +6/9 | +66.66% | +2/3 | +87.27% | +48/55 | +
| Workloads.tsx | +
+
+ |
+ 88.51% | +971/1097 | +57.14% | +28/49 | +52% | +13/25 | +88.51% | +971/1097 | +
| YamlEditor.tsx | +
+
+ |
+ 69.46% | +232/334 | +18.18% | +2/11 | +12.5% | +1/8 | +69.46% | +232/334 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Accordion({
+ ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+ return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+ className,
+ ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+ return (
+ <AccordionPrimitive.Item
+ data-slot="accordion-item"
+ className={cn("border-b last:border-b-0", className)}
+ {...props}
+ />
+ );
+}
+
+function AccordionTrigger({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+ return (
+ <AccordionPrimitive.Header className="flex">
+ <AccordionPrimitive.Trigger
+ data-slot="accordion-trigger"
+ className={cn(
+ "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+ </AccordionPrimitive.Trigger>
+ </AccordionPrimitive.Header>
+ );
+}
+
+function AccordionContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+ return (
+ <AccordionPrimitive.Content
+ data-slot="accordion-content"
+ className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+ {...props}
+ >
+ <div className={cn("pt-0 pb-4", className)}>{children}</div>
+ </AccordionPrimitive.Content>
+ );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +14x +14x +14x +14x +14x +1x +5x +5x +5x +5x +5x +5x +5x +1x +22x +22x +22x +22x +22x +22x +22x +1x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +1x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +1x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+ return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+ return (
+ <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+ );
+}
+
+function AlertDialogPortal({
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+ return (
+ <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+ );
+}
+
+function AlertDialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+ return (
+ <AlertDialogPrimitive.Overlay
+ data-slot="alert-dialog-overlay"
+ className={cn(
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+ return (
+ <AlertDialogPortal>
+ <AlertDialogOverlay />
+ <AlertDialogPrimitive.Content
+ data-slot="alert-dialog-content"
+ className={cn(
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+ className,
+ )}
+ {...props}
+ />
+ </AlertDialogPortal>
+ );
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="alert-dialog-header"
+ className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="alert-dialog-footer"
+ className={cn(
+ "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+ return (
+ <AlertDialogPrimitive.Title
+ data-slot="alert-dialog-title"
+ className={cn("text-lg font-semibold", className)}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+ return (
+ <AlertDialogPrimitive.Description
+ data-slot="alert-dialog-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogAction({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+ return (
+ <AlertDialogPrimitive.Action
+ className={cn(buttonVariants(), className)}
+ {...props}
+ />
+ );
+}
+
+function AlertDialogCancel({
+ className,
+ ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+ return (
+ <AlertDialogPrimitive.Cancel
+ className={cn(buttonVariants({ variant: "outline" }), className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogAction,
+ AlertDialogCancel,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+ return (
+ <div
+ data-slot="alert"
+ role="alert"
+ className={cn(alertVariants({ variant }), className)}
+ {...props}
+ />
+ );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="alert-title"
+ className={cn(
+ "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="alert-description"
+ className={cn(
+ "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+ return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "./utils";
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+ return (
+ <AvatarPrimitive.Root
+ data-slot="avatar"
+ className={cn(
+ "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function AvatarImage({
+ className,
+ ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+ return (
+ <AvatarPrimitive.Image
+ data-slot="avatar-image"
+ className={cn("aspect-square size-full", className)}
+ {...props}
+ />
+ );
+}
+
+function AvatarFallback({
+ className,
+ ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+ return (
+ <AvatarPrimitive.Fallback
+ data-slot="avatar-fallback"
+ className={cn(
+ "bg-muted flex size-full items-center justify-center rounded-full",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +222x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
+
+ return (
+ <Comp
+ data-slot="badge"
+ className={cn(badgeVariants({ variant }), className)}
+ {...props}
+ />
+ );
+}
+
+export { Badge, badgeVariants };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+ return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+ return (
+ <ol
+ data-slot="breadcrumb-list"
+ className={cn(
+ "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+ <li
+ data-slot="breadcrumb-item"
+ className={cn("inline-flex items-center gap-1.5", className)}
+ {...props}
+ />
+ );
+}
+
+function BreadcrumbLink({
+ asChild,
+ className,
+ ...props
+}: React.ComponentProps<"a"> & {
+ asChild?: boolean;
+}) {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+ <Comp
+ data-slot="breadcrumb-link"
+ className={cn("hover:text-foreground transition-colors", className)}
+ {...props}
+ />
+ );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="breadcrumb-page"
+ role="link"
+ aria-disabled="true"
+ aria-current="page"
+ className={cn("text-foreground font-normal", className)}
+ {...props}
+ />
+ );
+}
+
+function BreadcrumbSeparator({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"li">) {
+ return (
+ <li
+ data-slot="breadcrumb-separator"
+ role="presentation"
+ aria-hidden="true"
+ className={cn("[&>svg]:size-3.5", className)}
+ {...props}
+ >
+ {children ?? <ChevronRight />}
+ </li>
+ );
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="breadcrumb-ellipsis"
+ role="presentation"
+ aria-hidden="true"
+ className={cn("flex size-9 items-center justify-center", className)}
+ {...props}
+ >
+ <MoreHorizontal className="size-4" />
+ <span className="sr-only">More</span>
+ </span>
+ );
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +200x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9 rounded-md",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps<typeof buttonVariants> & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ <Comp
+ data-slot="button"
+ className={cn(buttonVariants({ variant, size, className }))}
+ {...props}
+ />
+ );
+}
+
+export { Button, buttonVariants };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+//import { ChevronLeft, ChevronRight } from "lucide-react"; // 2025-09-23 comment out
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
+}: React.ComponentProps<typeof DayPicker>) {
+ return (
+ <DayPicker
+ showOutsideDays={showOutsideDays}
+ className={cn("p-3", className)}
+ classNames={{
+ months: "flex flex-col sm:flex-row gap-2",
+ month: "flex flex-col gap-4",
+ caption: "flex justify-center pt-1 relative items-center w-full",
+ caption_label: "text-sm font-medium",
+ nav: "flex items-center gap-1",
+ nav_button: cn(
+ buttonVariants({ variant: "outline" }),
+ "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+ ),
+ nav_button_previous: "absolute left-1",
+ nav_button_next: "absolute right-1",
+ table: "w-full border-collapse space-x-1",
+ head_row: "flex",
+ head_cell:
+ "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+ row: "flex w-full mt-2",
+ cell: cn(
+ "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+ props.mode === "range"
+ ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+ : "[&:has([aria-selected])]:rounded-md",
+ ),
+ day: cn(
+ buttonVariants({ variant: "ghost" }),
+ "size-8 p-0 font-normal aria-selected:opacity-100",
+ ),
+ day_range_start:
+ "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+ day_range_end:
+ "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+ day_selected:
+ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+ day_today: "bg-accent text-accent-foreground",
+ day_outside:
+ "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+ day_disabled: "text-muted-foreground opacity-50",
+ day_range_middle:
+ "aria-selected:bg-accent aria-selected:text-accent-foreground",
+ day_hidden: "invisible",
+ ...classNames,
+ }}
+ {...props}
+ />
+ );
+}
+
+export { Calendar };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 | 1x +1x +1x +1x +1x +1x +165x +165x +165x +165x +165x +165x +165x +165x +165x +165x +165x +165x +1x +123x +123x +123x +123x +123x +123x +123x +123x +123x +123x +123x +123x +1x +123x +123x +123x +123x +123x +123x +123x +123x +123x +1x +88x +88x +88x +88x +88x +88x +88x +88x +88x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +165x +165x +165x +165x +165x +165x +165x +165x +165x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card"
+ className={cn(
+ "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-header"
+ className={cn(
+ "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <h4
+ data-slot="card-title"
+ className={cn("leading-none", className)}
+ {...props}
+ />
+ );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <p
+ data-slot="card-description"
+ className={cn("text-muted-foreground", className)}
+ {...props}
+ />
+ );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-action"
+ className={cn(
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-content"
+ className={cn("px-6 [&:last-child]:pb-6", className)}
+ {...props}
+ />
+ );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-footer"
+ className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +16x +16x +16x +16x +16x +16x + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + +1x +1x +1x + +1x +1x +1x + +1x +1x +1x +1x + + + + + + + + +1x +1x +1x +1x +1x + +1x +1x +1x +1x + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "./utils";
+import { Button } from "./button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+ carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+ api: ReturnType<typeof useEmblaCarousel>[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext);
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a <Carousel />");
+ }
+
+ return context;
+}
+
+function Carousel({
+ orientation = "horizontal",
+ opts,
+ setApi,
+ plugins,
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+ const [carouselRef, api] = useEmblaCarousel(
+ {
+ ...opts,
+ axis: orientation === "horizontal" ? "x" : "y",
+ },
+ plugins,
+ );
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+ const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+ const onSelect = React.useCallback((api: CarouselApi) => {
+ if (!api) return;
+ setCanScrollPrev(api.canScrollPrev());
+ setCanScrollNext(api.canScrollNext());
+ }, []);
+
+ const scrollPrev = React.useCallback(() => {
+ api?.scrollPrev();
+ }, [api]);
+
+ const scrollNext = React.useCallback(() => {
+ api?.scrollNext();
+ }, [api]);
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent<HTMLDivElement>) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ scrollPrev();
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ scrollNext();
+ }
+ },
+ [scrollPrev, scrollNext],
+ );
+
+ React.useEffect(() => {
+ if (!api || !setApi) return;
+ setApi(api);
+ }, [api, setApi]);
+
+ React.useEffect(() => {
+ if (!api) return;
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
+
+ return () => {
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
+
+ return (
+ <CarouselContext.Provider
+ value={{
+ carouselRef,
+ api: api,
+ opts,
+ orientation:
+ orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+ scrollPrev,
+ scrollNext,
+ canScrollPrev,
+ canScrollNext,
+ }}
+ >
+ <div
+ onKeyDownCapture={handleKeyDown}
+ className={cn("relative", className)}
+ role="region"
+ aria-roledescription="carousel"
+ data-slot="carousel"
+ {...props}
+ >
+ {children}
+ </div>
+ </CarouselContext.Provider>
+ );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+ const { carouselRef, orientation } = useCarousel();
+
+ return (
+ <div
+ ref={carouselRef}
+ className="overflow-hidden"
+ data-slot="carousel-content"
+ >
+ <div
+ className={cn(
+ "flex",
+ orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+ className,
+ )}
+ {...props}
+ />
+ </div>
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+ <div
+ role="group"
+ aria-roledescription="slide"
+ data-slot="carousel-item"
+ className={cn(
+ "min-w-0 shrink-0 grow-0 basis-full",
+ orientation === "horizontal" ? "pl-4" : "pt-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps<typeof Button>) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+ return (
+ <Button
+ data-slot="carousel-previous"
+ variant={variant}
+ size={size}
+ className={cn(
+ "absolute size-8 rounded-full",
+ orientation === "horizontal"
+ ? "top-1/2 -left-12 -translate-y-1/2"
+ : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+ className,
+ )}
+ disabled={!canScrollPrev}
+ onClick={scrollPrev}
+ {...props}
+ >
+ <ArrowLeft />
+ <span className="sr-only">Previous slide</span>
+ </Button>
+ );
+}
+
+function CarouselNext({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps<typeof Button>) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+ <Button
+ data-slot="carousel-next"
+ variant={variant}
+ size={size}
+ className={cn(
+ "absolute size-8 rounded-full",
+ orientation === "horizontal"
+ ? "top-1/2 -right-12 -translate-y-1/2"
+ : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+ className,
+ )}
+ disabled={!canScrollNext}
+ onClick={scrollNext}
+ {...props}
+ >
+ <ArrowRight />
+ <span className="sr-only">Next slide</span>
+ </Button>
+ );
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +8x +8x +8x +8x +8x +8x + + + +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +9x +9x +9x +9x +9x + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +5x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + +5x +5x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record<keyof typeof THEMES, string> }
+ );
+};
+
+type ChartContextProps = {
+ config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+ const context = React.useContext(ChartContext);
+
+ if (!context) {
+ throw new Error("useChart must be used within a <ChartContainer />");
+ }
+
+ return context;
+}
+
+function ChartContainer({
+ id,
+ className,
+ children,
+ config,
+ ...props
+}: React.ComponentProps<"div"> & {
+ config: ChartConfig;
+ children: React.ComponentProps<
+ typeof RechartsPrimitive.ResponsiveContainer
+ >["children"];
+}) {
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+ return (
+ <ChartContext.Provider value={{ config }}>
+ <div
+ data-slot="chart"
+ data-chart={chartId}
+ className={cn(
+ "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+ className,
+ )}
+ {...props}
+ >
+ <ChartStyle id={chartId} config={config} />
+ <RechartsPrimitive.ResponsiveContainer>
+ {children}
+ </RechartsPrimitive.ResponsiveContainer>
+ </div>
+ </ChartContext.Provider>
+ );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color,
+ );
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ return (
+ <style
+ dangerouslySetInnerHTML={{
+ __html: Object.entries(THEMES)
+ .map(
+ ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+ .map(([key, itemConfig]) => {
+ const color =
+ itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+ itemConfig.color;
+ return color ? ` --color-${key}: ${color};` : null;
+ })
+ .join("\n")}
+}
+`,
+ )
+ .join("\n"),
+ }}
+ />
+ );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent(props: any) { //2025-09-23 comment out
+ const {
+ active,
+ className,
+ indicator = "dot",
+ hideLabel = false,
+ hideIndicator = false,
+ label,
+ labelFormatter,
+ labelClassName,
+ formatter,
+ color,
+ nameKey,
+ labelKey,
+ } = props;
+ const payload: any[] = props.payload || [];
+ const { config } = useChart();
+
+ const tooltipLabel = React.useMemo(() => {
+ if (hideLabel || !(payload as any[])?.length) {
+ return null;
+ }
+
+ const [item] = payload as any[];
+ const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const value =
+ !labelKey && typeof label === "string"
+ ? config[label as keyof typeof config]?.label || label
+ : itemConfig?.label;
+
+ if (labelFormatter) {
+ return (
+ <div className={cn("font-medium", labelClassName)}>
+ {labelFormatter(value, payload)}
+ </div>
+ );
+ }
+
+ if (!value) {
+ return null;
+ }
+
+ return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+ }, [
+ label,
+ labelFormatter,
+ payload,
+ hideLabel,
+ labelClassName,
+ config,
+ labelKey,
+ ]);
+
+ if (!active || !payload?.length) {
+ return null;
+ }
+
+ const nestLabel = payload.length === 1 && indicator !== "dot";
+
+ return (
+ <div
+ className={cn(
+ "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+ className,
+ )}
+ >
+ {!nestLabel ? tooltipLabel : null}
+ <div className="grid gap-1.5">
+ {(payload as any[]).map((item: any, index: any) => { //2025-09-23 comment out
+ const key = `${nameKey || item.name || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const indicatorColor = color || item.payload.fill || item.color;
+
+ return (
+ <div
+ key={item.dataKey}
+ className={cn(
+ "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+ indicator === "dot" && "items-center",
+ )}
+ >
+ {formatter && item?.value !== undefined && item.name ? (
+ formatter(item.value, item.name, item, index, item.payload)
+ ) : (
+ <>
+ {itemConfig?.icon ? (
+ <itemConfig.icon />
+ ) : (
+ !hideIndicator && (
+ <div
+ className={cn(
+ "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+ {
+ "h-2.5 w-2.5": indicator === "dot",
+ "w-1": indicator === "line",
+ "w-0 border-[1.5px] border-dashed bg-transparent":
+ indicator === "dashed",
+ "my-0.5": nestLabel && indicator === "dashed",
+ },
+ )}
+ style={
+ {
+ "--color-bg": indicatorColor,
+ "--color-border": indicatorColor,
+ } as React.CSSProperties
+ }
+ />
+ )
+ )}
+ <div
+ className={cn(
+ "flex flex-1 justify-between leading-none",
+ nestLabel ? "items-end" : "items-center",
+ )}
+ >
+ <div className="grid gap-1.5">
+ {nestLabel ? tooltipLabel : null}
+ <span className="text-muted-foreground">
+ {itemConfig?.label || item.name}
+ </span>
+ </div>
+ {item.value && (
+ <span className="text-foreground font-mono font-medium tabular-nums">
+ {item.value.toLocaleString()}
+ </span>
+ )}
+ </div>
+ </>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+ className,
+ hideIcon = false,
+ verticalAlign = "bottom",
+ nameKey,
+ payload,
+}: React.ComponentProps<"div"> & {
+ verticalAlign?: string;
+ hideIcon?: boolean;
+ nameKey?: string;
+ payload?: any[];
+ }) {
+ const { config } = useChart();
+
+ // payload�� �Ķ���Ϳ��� �ƿ��Ƿ� �ߺ� �������� �ʰ�, �Ʒ����� (payload as any[])�� ���
+ if (!(payload as any[])?.length) {
+ return null;
+ }
+
+ return (
+ <div
+ className={cn(
+ "flex items-center justify-center gap-4",
+ verticalAlign === "top" ? "pb-3" : "pt-3",
+ className,
+ )}
+ >
+ {(payload as any[]).map((item: any) => {
+ const key = `${nameKey || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+ return (
+ <div
+ key={item.value}
+ className={cn(
+ "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+ )}
+ >
+ {itemConfig?.icon && !hideIcon ? (
+ <itemConfig.icon />
+ ) : (
+ <div
+ className="h-2 w-2 shrink-0 rounded-[2px]"
+ style={{
+ backgroundColor: item.color,
+ }}
+ />
+ )}
+ {itemConfig?.label}
+ </div>
+ );
+ })}
+ </div>
+ );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+ config: ChartConfig,
+ payload: unknown,
+ key: string,
+) {
+ if (typeof payload !== "object" || payload === null) {
+ return undefined;
+ }
+
+ const payloadPayload =
+ "payload" in payload &&
+ typeof payload.payload === "object" &&
+ payload.payload !== null
+ ? payload.payload
+ : undefined;
+
+ let configLabelKey: string = key;
+
+ if (
+ key in payload &&
+ typeof payload[key as keyof typeof payload] === "string"
+ ) {
+ configLabelKey = payload[key as keyof typeof payload] as string;
+ } else if (
+ payloadPayload &&
+ key in payloadPayload &&
+ typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+ ) {
+ configLabelKey = payloadPayload[
+ key as keyof typeof payloadPayload
+ ] as string;
+ }
+
+ return configLabelKey in config
+ ? config[configLabelKey]
+ : config[key as keyof typeof config];
+}
+
+export {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ ChartLegend,
+ ChartLegendContent,
+ ChartStyle,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+ return (
+ <CheckboxPrimitive.Root
+ data-slot="checkbox"
+ className={cn(
+ "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ {...props}
+ >
+ <CheckboxPrimitive.Indicator
+ data-slot="checkbox-indicator"
+ className="flex items-center justify-center text-current transition-none"
+ >
+ <CheckIcon className="size-3.5" />
+ </CheckboxPrimitive.Indicator>
+ </CheckboxPrimitive.Root>
+ );
+}
+
+export { Checkbox };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+ ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+ return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+ ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+ return (
+ <CollapsiblePrimitive.CollapsibleTrigger
+ data-slot="collapsible-trigger"
+ {...props}
+ />
+ );
+}
+
+function CollapsibleContent({
+ ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+ return (
+ <CollapsiblePrimitive.CollapsibleContent
+ data-slot="collapsible-content"
+ {...props}
+ />
+ );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "./utils";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "./dialog";
+
+function Command({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+ return (
+ <CommandPrimitive
+ data-slot="command"
+ className={cn(
+ "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CommandDialog({
+ title = "Command Palette",
+ description = "Search for a command to run...",
+ children,
+ ...props
+}: React.ComponentProps<typeof Dialog> & {
+ title?: string;
+ description?: string;
+}) {
+ return (
+ <Dialog {...props}>
+ <DialogHeader className="sr-only">
+ <DialogTitle>{title}</DialogTitle>
+ <DialogDescription>{description}</DialogDescription>
+ </DialogHeader>
+ <DialogContent className="overflow-hidden p-0">
+ <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+ {children}
+ </Command>
+ </DialogContent>
+ </Dialog>
+ );
+}
+
+function CommandInput({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+ return (
+ <div
+ data-slot="command-input-wrapper"
+ className="flex h-9 items-center gap-2 border-b px-3"
+ >
+ <SearchIcon className="size-4 shrink-0 opacity-50" />
+ <CommandPrimitive.Input
+ data-slot="command-input"
+ className={cn(
+ "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ {...props}
+ />
+ </div>
+ );
+}
+
+function CommandList({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+ return (
+ <CommandPrimitive.List
+ data-slot="command-list"
+ className={cn(
+ "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CommandEmpty({
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+ return (
+ <CommandPrimitive.Empty
+ data-slot="command-empty"
+ className="py-6 text-center text-sm"
+ {...props}
+ />
+ );
+}
+
+function CommandGroup({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+ return (
+ <CommandPrimitive.Group
+ data-slot="command-group"
+ className={cn(
+ "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CommandSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+ return (
+ <CommandPrimitive.Separator
+ data-slot="command-separator"
+ className={cn("bg-border -mx-1 h-px", className)}
+ {...props}
+ />
+ );
+}
+
+function CommandItem({
+ className,
+ ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+ return (
+ <CommandPrimitive.Item
+ data-slot="command-item"
+ className={cn(
+ "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CommandShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="command-shortcut"
+ className={cn(
+ "text-muted-foreground ml-auto text-xs tracking-widest",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function ContextMenu({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+ return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+ return (
+ <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+ );
+}
+
+function ContextMenuGroup({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+ return (
+ <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+ );
+}
+
+function ContextMenuPortal({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+ return (
+ <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+ );
+}
+
+function ContextMenuSub({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+ return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+ return (
+ <ContextMenuPrimitive.RadioGroup
+ data-slot="context-menu-radio-group"
+ {...props}
+ />
+ );
+}
+
+function ContextMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+ inset?: boolean;
+}) {
+ return (
+ <ContextMenuPrimitive.SubTrigger
+ data-slot="context-menu-sub-trigger"
+ data-inset={inset}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <ChevronRightIcon className="ml-auto" />
+ </ContextMenuPrimitive.SubTrigger>
+ );
+}
+
+function ContextMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+ return (
+ <ContextMenuPrimitive.SubContent
+ data-slot="context-menu-sub-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function ContextMenuContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+ return (
+ <ContextMenuPrimitive.Portal>
+ <ContextMenuPrimitive.Content
+ data-slot="context-menu-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+ className,
+ )}
+ {...props}
+ />
+ </ContextMenuPrimitive.Portal>
+ );
+}
+
+function ContextMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ <ContextMenuPrimitive.Item
+ data-slot="context-menu-item"
+ data-inset={inset}
+ data-variant={variant}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function ContextMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+ return (
+ <ContextMenuPrimitive.CheckboxItem
+ data-slot="context-menu-checkbox-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ checked={checked}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <ContextMenuPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </ContextMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </ContextMenuPrimitive.CheckboxItem>
+ );
+}
+
+function ContextMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+ return (
+ <ContextMenuPrimitive.RadioItem
+ data-slot="context-menu-radio-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <ContextMenuPrimitive.ItemIndicator>
+ <CircleIcon className="size-2 fill-current" />
+ </ContextMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </ContextMenuPrimitive.RadioItem>
+ );
+}
+
+function ContextMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+ inset?: boolean;
+}) {
+ return (
+ <ContextMenuPrimitive.Label
+ data-slot="context-menu-label"
+ data-inset={inset}
+ className={cn(
+ "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function ContextMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+ return (
+ <ContextMenuPrimitive.Separator
+ data-slot="context-menu-separator"
+ className={cn("bg-border -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ );
+}
+
+function ContextMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="context-menu-shortcut"
+ className={cn(
+ "text-muted-foreground ml-auto text-xs tracking-widest",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ ContextMenu,
+ ContextMenuTrigger,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuCheckboxItem,
+ ContextMenuRadioItem,
+ ContextMenuLabel,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuGroup,
+ ContextMenuPortal,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuRadioGroup,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +15x +15x +15x +15x +15x +1x +5x +5x +5x +5x +5x +1x +23x +23x +23x +23x +23x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +19x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +1x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Dialog({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+ return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+ return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+ return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+ return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+ return (
+ <DialogPrimitive.Overlay
+ data-slot="dialog-overlay"
+ className={cn(
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DialogContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+ return (
+ <DialogPortal data-slot="dialog-portal">
+ <DialogOverlay />
+ <DialogPrimitive.Content
+ data-slot="dialog-content"
+ className={cn(
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+ <XIcon />
+ <span className="sr-only">Close</span>
+ </DialogPrimitive.Close>
+ </DialogPrimitive.Content>
+ </DialogPortal>
+ );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="dialog-header"
+ className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+ {...props}
+ />
+ );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="dialog-footer"
+ className={cn(
+ "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+ return (
+ <DialogPrimitive.Title
+ data-slot="dialog-title"
+ className={cn("text-lg leading-none font-semibold", className)}
+ {...props}
+ />
+ );
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+ return (
+ <DialogPrimitive.Description
+ data-slot="dialog-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +9x +9x +9x +9x +9x +1x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "./utils";
+
+function Drawer({
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+ return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+ return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+ return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+ return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+ className,
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+ return (
+ <DrawerPrimitive.Overlay
+ data-slot="drawer-overlay"
+ className={cn(
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+ return (
+ <DrawerPortal data-slot="drawer-portal">
+ <DrawerOverlay />
+ <DrawerPrimitive.Content
+ data-slot="drawer-content"
+ className={cn(
+ "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+ "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+ "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+ "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+ "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+ className,
+ )}
+ {...props}
+ >
+ <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+ {children}
+ </DrawerPrimitive.Content>
+ </DrawerPortal>
+ );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="drawer-header"
+ className={cn("flex flex-col gap-1.5 p-4", className)}
+ {...props}
+ />
+ );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="drawer-footer"
+ className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+ {...props}
+ />
+ );
+}
+
+function DrawerTitle({
+ className,
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+ return (
+ <DrawerPrimitive.Title
+ data-slot="drawer-title"
+ className={cn("text-foreground font-semibold", className)}
+ {...props}
+ />
+ );
+}
+
+function DrawerDescription({
+ className,
+ ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+ return (
+ <DrawerPrimitive.Description
+ data-slot="drawer-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ Drawer,
+ DrawerPortal,
+ DrawerOverlay,
+ DrawerTrigger,
+ DrawerClose,
+ DrawerContent,
+ DrawerHeader,
+ DrawerFooter,
+ DrawerTitle,
+ DrawerDescription,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+ return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+ return (
+ <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+ );
+}
+
+function DropdownMenuTrigger({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+ return (
+ <DropdownMenuPrimitive.Trigger
+ data-slot="dropdown-menu-trigger"
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+ return (
+ <DropdownMenuPrimitive.Portal>
+ <DropdownMenuPrimitive.Content
+ data-slot="dropdown-menu-content"
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+ className,
+ )}
+ {...props}
+ />
+ </DropdownMenuPrimitive.Portal>
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+ return (
+ <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+ );
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ <DropdownMenuPrimitive.Item
+ data-slot="dropdown-menu-item"
+ data-inset={inset}
+ data-variant={variant}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+ return (
+ <DropdownMenuPrimitive.CheckboxItem
+ data-slot="dropdown-menu-checkbox-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ checked={checked}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <DropdownMenuPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </DropdownMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </DropdownMenuPrimitive.CheckboxItem>
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+ return (
+ <DropdownMenuPrimitive.RadioGroup
+ data-slot="dropdown-menu-radio-group"
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+ return (
+ <DropdownMenuPrimitive.RadioItem
+ data-slot="dropdown-menu-radio-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <DropdownMenuPrimitive.ItemIndicator>
+ <CircleIcon className="size-2 fill-current" />
+ </DropdownMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </DropdownMenuPrimitive.RadioItem>
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+ inset?: boolean;
+}) {
+ return (
+ <DropdownMenuPrimitive.Label
+ data-slot="dropdown-menu-label"
+ data-inset={inset}
+ className={cn(
+ "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+ return (
+ <DropdownMenuPrimitive.Separator
+ data-slot="dropdown-menu-separator"
+ className={cn("bg-border -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="dropdown-menu-shortcut"
+ className={cn(
+ "text-muted-foreground ml-auto text-xs tracking-widest",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuSub({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+ return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+ inset?: boolean;
+}) {
+ return (
+ <DropdownMenuPrimitive.SubTrigger
+ data-slot="dropdown-menu-sub-trigger"
+ data-inset={inset}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <ChevronRightIcon className="ml-auto size-4" />
+ </DropdownMenuPrimitive.SubTrigger>
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+ return (
+ <DropdownMenuPrimitive.SubContent
+ data-slot="dropdown-menu-sub-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +21x +21x +21x +21x +21x +21x +21x + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+ Controller,
+ FormProvider,
+ useFormContext,
+ useFormState,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "./utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+ name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+ {} as FormFieldContextValue,
+);
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+ ...props
+}: ControllerProps<TFieldValues, TName>) => {
+ return (
+ <FormFieldContext.Provider value={{ name: props.name }}>
+ <Controller {...props} />
+ </FormFieldContext.Provider>
+ );
+};
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState } = useFormContext();
+ const formState = useFormState({ name: fieldContext.name });
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within <FormField>");
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+type FormItemContextValue = {
+ id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+ {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+ const id = React.useId();
+
+ return (
+ <FormItemContext.Provider value={{ id }}>
+ <div
+ data-slot="form-item"
+ className={cn("grid gap-2", className)}
+ {...props}
+ />
+ </FormItemContext.Provider>
+ );
+}
+
+function FormLabel({
+ className,
+ ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+ const { error, formItemId } = useFormField();
+
+ return (
+ <Label
+ data-slot="form-label"
+ data-error={!!error}
+ className={cn("data-[error=true]:text-destructive", className)}
+ htmlFor={formItemId}
+ {...props}
+ />
+ );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
+
+ return (
+ <Slot
+ data-slot="form-control"
+ id={formItemId}
+ aria-describedby={
+ !error
+ ? `${formDescriptionId}`
+ : `${formDescriptionId} ${formMessageId}`
+ }
+ aria-invalid={!!error}
+ {...props}
+ />
+ );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+ const { formDescriptionId } = useFormField();
+
+ return (
+ <p
+ data-slot="form-description"
+ id={formDescriptionId}
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message ?? "") : props.children;
+
+ if (!body) {
+ return null;
+ }
+
+ return (
+ <p
+ data-slot="form-message"
+ id={formMessageId}
+ className={cn("text-destructive text-sm", className)}
+ {...props}
+ >
+ {body}
+ </p>
+ );
+}
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "./utils";
+
+function HoverCard({
+ ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+ return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+ ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+ return (
+ <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+ );
+}
+
+function HoverCardContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+ return (
+ <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+ <HoverCardPrimitive.Content
+ data-slot="hover-card-content"
+ align={align}
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+ className,
+ )}
+ {...props}
+ />
+ </HoverCardPrimitive.Portal>
+ );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| accordion.tsx | +
+
+ |
+ 100% | +68/68 | +100% | +4/4 | +100% | +4/4 | +100% | +68/68 | +
| alert-dialog.tsx | +
+
+ |
+ 100% | +159/159 | +100% | +11/11 | +100% | +11/11 | +100% | +159/159 | +
| alert.tsx | +
+
+ |
+ 100% | +68/68 | +100% | +3/3 | +100% | +3/3 | +100% | +68/68 | +
| aspect-ratio.tsx | +
+
+ |
+ 100% | +13/13 | +100% | +1/1 | +100% | +1/1 | +100% | +13/13 | +
| avatar.tsx | +
+
+ |
+ 100% | +55/55 | +100% | +3/3 | +100% | +3/3 | +100% | +55/55 | +
| badge.tsx | +
+
+ |
+ 100% | +48/48 | +50% | +1/2 | +100% | +1/1 | +100% | +48/48 | +
| breadcrumb.tsx | +
+
+ |
+ 100% | +111/111 | +87.5% | +7/8 | +100% | +7/7 | +100% | +111/111 | +
| button.tsx | +
+
+ |
+ 100% | +60/60 | +50% | +1/2 | +100% | +1/1 | +100% | +60/60 | +
| calendar.tsx | +
+
+ |
+ 98.55% | +68/69 | +50% | +1/2 | +100% | +1/1 | +98.55% | +68/69 | +
| card.tsx | +
+
+ |
+ 100% | +94/94 | +100% | +7/7 | +100% | +7/7 | +100% | +94/94 | +
| carousel.tsx | +
+
+ |
+ 88.47% | +215/243 | +36.36% | +8/22 | +100% | +6/6 | +88.47% | +215/243 | +
| chart.tsx | +
+
+ |
+ 46.15% | +162/351 | +43.75% | +7/16 | +83.33% | +5/6 | +46.15% | +162/351 | +
| checkbox.tsx | +
+
+ |
+ 100% | +34/34 | +100% | +1/1 | +100% | +1/1 | +100% | +34/34 | +
| collapsible.tsx | +
+
+ |
+ 100% | +35/35 | +100% | +3/3 | +100% | +3/3 | +100% | +35/35 | +
| command.tsx | +
+
+ |
+ 100% | +179/179 | +100% | +9/9 | +100% | +9/9 | +100% | +179/179 | +
| context-menu.tsx | +
+
+ |
+ 100% | +254/254 | +100% | +15/15 | +100% | +15/15 | +100% | +254/254 | +
| dialog.tsx | +
+
+ |
+ 100% | +137/137 | +100% | +10/10 | +100% | +10/10 | +100% | +137/137 | +
| drawer.tsx | +
+
+ |
+ 100% | +134/134 | +100% | +10/10 | +100% | +10/10 | +100% | +134/134 | +
| dropdown-menu.tsx | +
+
+ |
+ 100% | +259/259 | +100% | +15/15 | +100% | +15/15 | +100% | +259/259 | +
| form.tsx | +
+
+ |
+ 82.35% | +140/170 | +53.84% | +7/13 | +100% | +7/7 | +82.35% | +140/170 | +
| hover-card.tsx | +
+
+ |
+ 100% | +46/46 | +100% | +3/3 | +100% | +3/3 | +100% | +46/46 | +
| index.ts | +
+
+ |
+ 100% | +50/50 | +100% | +0/0 | +100% | +0/0 | +100% | +50/50 | +
| input-otp.tsx | +
+
+ |
+ 100% | +79/79 | +83.33% | +5/6 | +100% | +4/4 | +100% | +79/79 | +
| input.tsx | +
+
+ |
+ 100% | +23/23 | +100% | +1/1 | +100% | +1/1 | +100% | +23/23 | +
| label.tsx | +
+
+ |
+ 100% | +26/26 | +100% | +1/1 | +100% | +1/1 | +100% | +26/26 | +
| menubar.tsx | +
+
+ |
+ 100% | +278/278 | +100% | +16/16 | +100% | +16/16 | +100% | +278/278 | +
| navigation-menu.tsx | +
+
+ |
+ 100% | +170/170 | +100% | +8/8 | +100% | +8/8 | +100% | +170/170 | +
| pagination.tsx | +
+
+ |
+ 100% | +129/129 | +77.77% | +7/9 | +100% | +7/7 | +100% | +129/129 | +
| popover.tsx | +
+
+ |
+ 100% | +50/50 | +100% | +4/4 | +100% | +4/4 | +100% | +50/50 | +
| progress.tsx | +
+
+ |
+ 100% | +33/33 | +100% | +1/1 | +100% | +1/1 | +100% | +33/33 | +
| radio-group.tsx | +
+
+ |
+ 100% | +47/47 | +100% | +2/2 | +100% | +2/2 | +100% | +47/47 | +
| resizable.tsx | +
+
+ |
+ 100% | +58/58 | +100% | +3/3 | +100% | +3/3 | +100% | +58/58 | +
| scroll-area.tsx | +
+
+ |
+ 98.33% | +59/60 | +75% | +3/4 | +100% | +2/2 | +98.33% | +59/60 | +
| select.tsx | +
+
+ |
+ 100% | +191/191 | +100% | +12/12 | +100% | +10/10 | +100% | +191/191 | +
| separator.tsx | +
+
+ |
+ 100% | +30/30 | +100% | +1/1 | +100% | +1/1 | +100% | +30/30 | +
| sheet.tsx | +
+
+ |
+ 87.23% | +123/141 | +76.92% | +10/13 | +90% | +9/10 | +87.23% | +123/141 | +
| sidebar.tsx | +
+
+ |
+ 87.51% | +638/729 | +60% | +30/50 | +92.3% | +24/26 | +87.51% | +638/729 | +
| skeleton.tsx | +
+
+ |
+ 100% | +15/15 | +100% | +1/1 | +100% | +1/1 | +100% | +15/15 | +
| slider.tsx | +
+
+ |
+ 96.92% | +63/65 | +50% | +2/4 | +100% | +1/1 | +96.92% | +63/65 | +
| sonner.tsx | +
+
+ |
+ 100% | +28/28 | +100% | +1/1 | +100% | +1/1 | +100% | +28/28 | +
| switch.tsx | +
+
+ |
+ 100% | +33/33 | +100% | +1/1 | +100% | +1/1 | +100% | +33/33 | +
| table.tsx | +
+
+ |
+ 100% | +118/118 | +100% | +8/8 | +100% | +8/8 | +100% | +118/118 | +
| tabs.tsx | +
+
+ |
+ 100% | +68/68 | +100% | +4/4 | +100% | +4/4 | +100% | +68/68 | +
| textarea.tsx | +
+
+ |
+ 100% | +20/20 | +100% | +1/1 | +100% | +1/1 | +100% | +20/20 | +
| toggle-group.tsx | +
+
+ |
+ 100% | +75/75 | +33.33% | +2/6 | +100% | +2/2 | +100% | +75/75 | +
| toggle.tsx | +
+
+ |
+ 100% | +49/49 | +100% | +1/1 | +100% | +1/1 | +100% | +49/49 | +
| tooltip.tsx | +
+
+ |
+ 100% | +63/63 | +100% | +4/4 | +100% | +4/4 | +100% | +63/63 | +
| use-cluster-health.ts | +
+
+ |
+ 100% | +124/124 | +87.5% | +14/16 | +100% | +1/1 | +100% | +124/124 | +
| use-mobile.ts | +
+
+ |
+ 90.47% | +19/21 | +100% | +3/3 | +50% | +1/2 | +90.47% | +19/21 | +
| utils.ts | +
+
+ |
+ 100% | +6/6 | +100% | +1/1 | +100% | +1/1 | +100% | +6/6 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // Barrel file for all UI primitives +export * from './accordion'; +export * from './alert-dialog'; +export * from './alert'; +export * from './aspect-ratio'; +export * from './avatar'; +export * from './badge'; +export * from './breadcrumb'; +export * from './button'; +export * from './calendar'; +export * from './card'; +export * from './carousel'; +export * from './chart'; +export * from './checkbox'; +export * from './collapsible'; +export * from './command'; +export * from './context-menu'; +export * from './dialog'; +export * from './drawer'; +export * from './dropdown-menu'; +export * from './form'; +export * from './hover-card'; +export * from './input-otp'; +export * from './input'; +export * from './label'; +export * from './menubar'; +export * from './navigation-menu'; +export * from './pagination'; +export * from './popover'; +export * from './progress'; +export * from './radio-group'; +export * from './resizable'; +export * from './scroll-area'; +export * from './select'; +export * from './separator'; +export * from './sheet'; +export * from './sidebar'; +export * from './skeleton'; +export * from './slider'; +export * from './sonner'; +export * from './switch'; +export * from './table'; +export * from './tabs'; +export * from './textarea'; +export * from './toggle-group'; +export * from './toggle'; +export * from './tooltip'; +export * from './use-cluster-health'; +export * from './use-mobile'; +export * from './utils'; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function InputOTP({
+ className,
+ containerClassName,
+ ...props
+}: React.ComponentProps<typeof OTPInput> & {
+ containerClassName?: string;
+}) {
+ return (
+ <OTPInput
+ data-slot="input-otp"
+ containerClassName={cn(
+ "flex items-center gap-2 has-disabled:opacity-50",
+ containerClassName,
+ )}
+ className={cn("disabled:cursor-not-allowed", className)}
+ {...props}
+ />
+ );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="input-otp-group"
+ className={cn("flex items-center gap-1", className)}
+ {...props}
+ />
+ );
+}
+
+function InputOTPSlot({
+ index,
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ index: number;
+}) {
+ const inputOTPContext = React.useContext(OTPInputContext);
+ const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+ return (
+ <div
+ data-slot="input-otp-slot"
+ data-active={isActive}
+ className={cn(
+ "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+ className,
+ )}
+ {...props}
+ >
+ {char}
+ {hasFakeCaret && (
+ <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+ <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+ </div>
+ )}
+ </div>
+ );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+ return (
+ <div data-slot="input-otp-separator" role="separator" {...props}>
+ <MinusIcon />
+ </div>
+ );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 | 1x +1x +1x +1x +1x +1x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +26x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+ <input
+ type={type}
+ data-slot="input"
+ className={cn(
+ "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Input };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "./utils";
+
+function Label({
+ className,
+ ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+ return (
+ <LabelPrimitive.Root
+ data-slot="label"
+ className={cn(
+ "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Label };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +9x +9x +9x +9x +9x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Menubar({
+ className,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+ return (
+ <MenubarPrimitive.Root
+ data-slot="menubar"
+ className={cn(
+ "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function MenubarMenu({
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+ return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+ return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+ return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+ return (
+ <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+ );
+}
+
+function MenubarTrigger({
+ className,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+ return (
+ <MenubarPrimitive.Trigger
+ data-slot="menubar-trigger"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function MenubarContent({
+ className,
+ align = "start",
+ alignOffset = -4,
+ sideOffset = 8,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+ return (
+ <MenubarPortal>
+ <MenubarPrimitive.Content
+ data-slot="menubar-content"
+ align={align}
+ alignOffset={alignOffset}
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+ className,
+ )}
+ {...props}
+ />
+ </MenubarPortal>
+ );
+}
+
+function MenubarItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ <MenubarPrimitive.Item
+ data-slot="menubar-item"
+ data-inset={inset}
+ data-variant={variant}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function MenubarCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+ return (
+ <MenubarPrimitive.CheckboxItem
+ data-slot="menubar-checkbox-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ checked={checked}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <MenubarPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </MenubarPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </MenubarPrimitive.CheckboxItem>
+ );
+}
+
+function MenubarRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+ return (
+ <MenubarPrimitive.RadioItem
+ data-slot="menubar-radio-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <MenubarPrimitive.ItemIndicator>
+ <CircleIcon className="size-2 fill-current" />
+ </MenubarPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </MenubarPrimitive.RadioItem>
+ );
+}
+
+function MenubarLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+ inset?: boolean;
+}) {
+ return (
+ <MenubarPrimitive.Label
+ data-slot="menubar-label"
+ data-inset={inset}
+ className={cn(
+ "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function MenubarSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+ return (
+ <MenubarPrimitive.Separator
+ data-slot="menubar-separator"
+ className={cn("bg-border -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ );
+}
+
+function MenubarShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="menubar-shortcut"
+ className={cn(
+ "text-muted-foreground ml-auto text-xs tracking-widest",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function MenubarSub({
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+ return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+ inset?: boolean;
+}) {
+ return (
+ <MenubarPrimitive.SubTrigger
+ data-slot="menubar-sub-trigger"
+ data-inset={inset}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <ChevronRightIcon className="ml-auto h-4 w-4" />
+ </MenubarPrimitive.SubTrigger>
+ );
+}
+
+function MenubarSubContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+ return (
+ <MenubarPrimitive.SubContent
+ data-slot="menubar-sub-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Menubar,
+ MenubarPortal,
+ MenubarMenu,
+ MenubarTrigger,
+ MenubarContent,
+ MenubarGroup,
+ MenubarSeparator,
+ MenubarLabel,
+ MenubarItem,
+ MenubarShortcut,
+ MenubarCheckboxItem,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSub,
+ MenubarSubTrigger,
+ MenubarSubContent,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function NavigationMenu({
+ className,
+ children,
+ viewport = true,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+ viewport?: boolean;
+}) {
+ return (
+ <NavigationMenuPrimitive.Root
+ data-slot="navigation-menu"
+ data-viewport={viewport}
+ className={cn(
+ "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ {viewport && <NavigationMenuViewport />}
+ </NavigationMenuPrimitive.Root>
+ );
+}
+
+function NavigationMenuList({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+ return (
+ <NavigationMenuPrimitive.List
+ data-slot="navigation-menu-list"
+ className={cn(
+ "group flex flex-1 list-none items-center justify-center gap-1",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function NavigationMenuItem({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+ return (
+ <NavigationMenuPrimitive.Item
+ data-slot="navigation-menu-item"
+ className={cn("relative", className)}
+ {...props}
+ />
+ );
+}
+
+const navigationMenuTriggerStyle = cva(
+ "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+ return (
+ <NavigationMenuPrimitive.Trigger
+ data-slot="navigation-menu-trigger"
+ className={cn(navigationMenuTriggerStyle(), "group", className)}
+ {...props}
+ >
+ {children}{" "}
+ <ChevronDownIcon
+ className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+ aria-hidden="true"
+ />
+ </NavigationMenuPrimitive.Trigger>
+ );
+}
+
+function NavigationMenuContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+ return (
+ <NavigationMenuPrimitive.Content
+ data-slot="navigation-menu-content"
+ className={cn(
+ "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+ "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function NavigationMenuViewport({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+ return (
+ <div
+ className={cn(
+ "absolute top-full left-0 isolate z-50 flex justify-center",
+ )}
+ >
+ <NavigationMenuPrimitive.Viewport
+ data-slot="navigation-menu-viewport"
+ className={cn(
+ "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+ className,
+ )}
+ {...props}
+ />
+ </div>
+ );
+}
+
+function NavigationMenuLink({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+ return (
+ <NavigationMenuPrimitive.Link
+ data-slot="navigation-menu-link"
+ className={cn(
+ "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function NavigationMenuIndicator({
+ className,
+ ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+ return (
+ <NavigationMenuPrimitive.Indicator
+ data-slot="navigation-menu-indicator"
+ className={cn(
+ "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+ className,
+ )}
+ {...props}
+ >
+ <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+ </NavigationMenuPrimitive.Indicator>
+ );
+}
+
+export {
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+ navigationMenuTriggerStyle,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ MoreHorizontalIcon,
+} from "lucide-react";
+
+import { cn } from "./utils";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+ return (
+ <nav
+ role="navigation"
+ aria-label="pagination"
+ data-slot="pagination"
+ className={cn("mx-auto flex w-full justify-center", className)}
+ {...props}
+ />
+ );
+}
+
+function PaginationContent({
+ className,
+ ...props
+}: React.ComponentProps<"ul">) {
+ return (
+ <ul
+ data-slot="pagination-content"
+ className={cn("flex flex-row items-center gap-1", className)}
+ {...props}
+ />
+ );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+ return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+ isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+ React.ComponentProps<"a">;
+
+function PaginationLink({
+ className,
+ isActive,
+ size = "icon",
+ ...props
+}: PaginationLinkProps) {
+ return (
+ <a
+ aria-current={isActive ? "page" : undefined}
+ data-slot="pagination-link"
+ data-active={isActive}
+ className={cn(
+ buttonVariants({
+ variant: isActive ? "outline" : "ghost",
+ size,
+ }),
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function PaginationPrevious({
+ className,
+ ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+ return (
+ <PaginationLink
+ aria-label="Go to previous page"
+ size="default"
+ className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+ {...props}
+ >
+ <ChevronLeftIcon />
+ <span className="hidden sm:block">Previous</span>
+ </PaginationLink>
+ );
+}
+
+function PaginationNext({
+ className,
+ ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+ return (
+ <PaginationLink
+ aria-label="Go to next page"
+ size="default"
+ className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+ {...props}
+ >
+ <span className="hidden sm:block">Next</span>
+ <ChevronRightIcon />
+ </PaginationLink>
+ );
+}
+
+function PaginationEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ aria-hidden
+ data-slot="pagination-ellipsis"
+ className={cn("flex size-9 items-center justify-center", className)}
+ {...props}
+ >
+ <MoreHorizontalIcon className="size-4" />
+ <span className="sr-only">More pages</span>
+ </span>
+ );
+}
+
+export {
+ Pagination,
+ PaginationContent,
+ PaginationLink,
+ PaginationItem,
+ PaginationPrevious,
+ PaginationNext,
+ PaginationEllipsis,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "./utils";
+
+function Popover({
+ ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+ return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+ ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+ return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+ return (
+ <PopoverPrimitive.Portal>
+ <PopoverPrimitive.Content
+ data-slot="popover-content"
+ align={align}
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+ className,
+ )}
+ {...props}
+ />
+ </PopoverPrimitive.Portal>
+ );
+}
+
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+ return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +53x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "./utils";
+
+function Progress({
+ className,
+ value,
+ ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+ return (
+ <ProgressPrimitive.Root
+ data-slot="progress"
+ className={cn(
+ "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+ className,
+ )}
+ {...props}
+ >
+ <ProgressPrimitive.Indicator
+ data-slot="progress-indicator"
+ className="bg-primary h-full w-full flex-1 transition-all"
+ style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+ />
+ </ProgressPrimitive.Root>
+ );
+}
+
+export { Progress };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function RadioGroup({
+ className,
+ ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+ return (
+ <RadioGroupPrimitive.Root
+ data-slot="radio-group"
+ className={cn("grid gap-3", className)}
+ {...props}
+ />
+ );
+}
+
+function RadioGroupItem({
+ className,
+ ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+ return (
+ <RadioGroupPrimitive.Item
+ data-slot="radio-group-item"
+ className={cn(
+ "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ {...props}
+ >
+ <RadioGroupPrimitive.Indicator
+ data-slot="radio-group-indicator"
+ className="relative flex items-center justify-center"
+ >
+ <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+ </RadioGroupPrimitive.Indicator>
+ </RadioGroupPrimitive.Item>
+ );
+}
+
+export { RadioGroup, RadioGroupItem };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "./utils";
+
+function ResizablePanelGroup({
+ className,
+ ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+ return (
+ <ResizablePrimitive.PanelGroup
+ data-slot="resizable-panel-group"
+ className={cn(
+ "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function ResizablePanel({
+ ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+ return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+ withHandle,
+ className,
+ ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+ withHandle?: boolean;
+}) {
+ return (
+ <ResizablePrimitive.PanelResizeHandle
+ data-slot="resizable-handle"
+ className={cn(
+ "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+ className,
+ )}
+ {...props}
+ >
+ {withHandle && (
+ <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+ <GripVerticalIcon className="size-2.5" />
+ </div>
+ )}
+ </ResizablePrimitive.PanelResizeHandle>
+ );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +6x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "./utils";
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+ return (
+ <ScrollAreaPrimitive.Root
+ data-slot="scroll-area"
+ className={cn("relative", className)}
+ {...props}
+ >
+ <ScrollAreaPrimitive.Viewport
+ data-slot="scroll-area-viewport"
+ className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+ >
+ {children}
+ </ScrollAreaPrimitive.Viewport>
+ <ScrollBar />
+ <ScrollAreaPrimitive.Corner />
+ </ScrollAreaPrimitive.Root>
+ );
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+ return (
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
+ data-slot="scroll-area-scrollbar"
+ orientation={orientation}
+ className={cn(
+ "flex touch-none p-px transition-colors select-none",
+ orientation === "vertical" &&
+ "h-full w-2.5 border-l border-l-transparent",
+ orientation === "horizontal" &&
+ "h-2.5 flex-col border-t border-t-transparent",
+ className,
+ )}
+ {...props}
+ >
+ <ScrollAreaPrimitive.ScrollAreaThumb
+ data-slot="scroll-area-thumb"
+ className="bg-border relative flex-1 rounded-full"
+ />
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
+ );
+}
+
+export { ScrollArea, ScrollBar };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +2x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +2x +3x +3x +3x +3x +3x +3x +3x +3x +3x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from "lucide-react";
+
+import { cn } from "./utils";
+
+function Select({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+ return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+ return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+ return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ children,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+ size?: "sm" | "default";
+}) {
+ return (
+ <SelectPrimitive.Trigger
+ data-slot="select-trigger"
+ data-size={size}
+ className={cn(
+ "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <SelectPrimitive.Icon asChild>
+ <ChevronDownIcon className="size-4 opacity-50" />
+ </SelectPrimitive.Icon>
+ </SelectPrimitive.Trigger>
+ );
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "popper",
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+ return (
+ <SelectPrimitive.Portal>
+ <SelectPrimitive.Content
+ data-slot="select-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+ position === "popper" &&
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+ className,
+ )}
+ position={position}
+ {...props}
+ >
+ <SelectScrollUpButton />
+ <SelectPrimitive.Viewport
+ className={cn(
+ "p-1",
+ position === "popper" &&
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+ )}
+ >
+ {children}
+ </SelectPrimitive.Viewport>
+ <SelectScrollDownButton />
+ </SelectPrimitive.Content>
+ </SelectPrimitive.Portal>
+ );
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+ return (
+ <SelectPrimitive.Label
+ data-slot="select-label"
+ className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+ {...props}
+ />
+ );
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+ return (
+ <SelectPrimitive.Item
+ data-slot="select-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+ className,
+ )}
+ {...props}
+ >
+ <span className="absolute right-2 flex size-3.5 items-center justify-center">
+ <SelectPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </SelectPrimitive.ItemIndicator>
+ </span>
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+ </SelectPrimitive.Item>
+ );
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+ return (
+ <SelectPrimitive.Separator
+ data-slot="select-separator"
+ className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ );
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+ return (
+ <SelectPrimitive.ScrollUpButton
+ data-slot="select-scroll-up-button"
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className,
+ )}
+ {...props}
+ >
+ <ChevronUpIcon className="size-4" />
+ </SelectPrimitive.ScrollUpButton>
+ );
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+ return (
+ <SelectPrimitive.ScrollDownButton
+ data-slot="select-scroll-down-button"
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className,
+ )}
+ {...props}
+ >
+ <ChevronDownIcon className="size-4" />
+ </SelectPrimitive.ScrollDownButton>
+ );
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "./utils";
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+ return (
+ <SeparatorPrimitive.Root
+ data-slot="separator-root"
+ decorative={decorative}
+ orientation={orientation}
+ className={cn(
+ "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Separator };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +1x + + + + + + + + + + + + + + + +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +4x +5x + +5x + +5x + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+ return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+ return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+ return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+ return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+ return (
+ <SheetPrimitive.Overlay
+ data-slot="sheet-overlay"
+ className={cn(
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+ side?: "top" | "right" | "bottom" | "left";
+}) {
+ return (
+ <SheetPortal>
+ <SheetOverlay />
+ <SheetPrimitive.Content
+ data-slot="sheet-content"
+ className={cn(
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+ side === "right" &&
+ "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+ side === "left" &&
+ "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+ side === "top" &&
+ "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+ side === "bottom" &&
+ "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+ <XIcon className="size-4" />
+ <span className="sr-only">Close</span>
+ </SheetPrimitive.Close>
+ </SheetPrimitive.Content>
+ </SheetPortal>
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sheet-header"
+ className={cn("flex flex-col gap-1.5 p-4", className)}
+ {...props}
+ />
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sheet-footer"
+ className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+ {...props}
+ />
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+ return (
+ <SheetPrimitive.Title
+ data-slot="sheet-title"
+ className={cn("text-foreground font-semibold", className)}
+ {...props}
+ />
+ );
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+ return (
+ <SheetPrimitive.Description
+ data-slot="sheet-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 +638 +639 +640 +641 +642 +643 +644 +645 +646 +647 +648 +649 +650 +651 +652 +653 +654 +655 +656 +657 +658 +659 +660 +661 +662 +663 +664 +665 +666 +667 +668 +669 +670 +671 +672 +673 +674 +675 +676 +677 +678 +679 +680 +681 +682 +683 +684 +685 +686 +687 +688 +689 +690 +691 +692 +693 +694 +695 +696 +697 +698 +699 +700 +701 +702 +703 +704 +705 +706 +707 +708 +709 +710 +711 +712 +713 +714 +715 +716 +717 +718 +719 +720 +721 +722 +723 +724 +725 +726 +727 +728 +729 +730 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +21x +21x +21x +20x +20x + + + +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x + + + + + + + + + + +2x +2x +2x +2x +2x + +2x +2x +2x +2x +1x + + + + + + + + +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + +5x +5x +5x +5x +5x +5x +5x + + +5x +5x + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + + + + + + + + + + + + + + + + +5x +5x +5x +5x +5x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import type{ VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "./use-mobile";
+import { cn } from "./utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "./sheet";
+import { Skeleton } from "./skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "./tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ }
+
+ return context;
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open],
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo<SidebarContextProps>(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+ );
+
+ return (
+ <SidebarContext.Provider value={contextValue}>
+ <TooltipProvider delayDuration={0}>
+ <div
+ data-slot="sidebar-wrapper"
+ style={
+ {
+ "--sidebar-width": SIDEBAR_WIDTH,
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+ ...style,
+ } as React.CSSProperties
+ }
+ className={cn(
+ "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ </div>
+ </TooltipProvider>
+ </SidebarContext.Provider>
+ );
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
+ return (
+ <div
+ data-slot="sidebar"
+ className={cn(
+ "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ </div>
+ );
+ }
+
+ if (isMobile) {
+ return (
+ <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+ <SheetContent
+ data-sidebar="sidebar"
+ data-slot="sidebar"
+ data-mobile="true"
+ className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+ style={
+ {
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+ } as React.CSSProperties
+ }
+ side={side}
+ >
+ <SheetHeader className="sr-only">
+ <SheetTitle>Sidebar</SheetTitle>
+ <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+ </SheetHeader>
+ <div className="flex h-full w-full flex-col">{children}</div>
+ </SheetContent>
+ </Sheet>
+ );
+ }
+
+ return (
+ <div
+ className="group peer text-sidebar-foreground hidden md:block"
+ data-state={state}
+ data-collapsible={state === "collapsed" ? collapsible : ""}
+ data-variant={variant}
+ data-side={side}
+ data-slot="sidebar"
+ >
+ {/* This is what handles the sidebar gap on desktop */}
+ <div
+ data-slot="sidebar-gap"
+ className={cn(
+ "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+ "group-data-[collapsible=offcanvas]:w-0",
+ "group-data-[side=right]:rotate-180",
+ variant === "floating" || variant === "inset"
+ ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+ )}
+ />
+ <div
+ data-slot="sidebar-container"
+ className={cn(
+ "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+ side === "left"
+ ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+ : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+ // Adjust the padding for floating and inset variants.
+ variant === "floating" || variant === "inset"
+ ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+ className,
+ )}
+ {...props}
+ >
+ <div
+ data-sidebar="sidebar"
+ data-slot="sidebar-inner"
+ className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+ >
+ {children}
+ </div>
+ </div>
+ </div>
+ );
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps<typeof Button>) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+ <Button
+ data-sidebar="trigger"
+ data-slot="sidebar-trigger"
+ variant="ghost"
+ size="icon"
+ className={cn("size-7", className)}
+ onClick={(event) => {
+ onClick?.(event);
+ toggleSidebar();
+ }}
+ {...props}
+ >
+ <PanelLeftIcon />
+ <span className="sr-only">Toggle Sidebar</span>
+ </Button>
+ );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+ <button
+ data-sidebar="rail"
+ data-slot="sidebar-rail"
+ aria-label="Toggle Sidebar"
+ tabIndex={-1}
+ onClick={toggleSidebar}
+ title="Toggle Sidebar"
+ className={cn(
+ "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+ "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+ "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+ "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+ "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+ <main
+ data-slot="sidebar-inset"
+ className={cn(
+ "bg-background relative flex w-full flex-1 flex-col",
+ "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps<typeof Input>) {
+ return (
+ <Input
+ data-slot="sidebar-input"
+ data-sidebar="input"
+ className={cn("bg-background h-8 w-full shadow-none", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-header"
+ data-sidebar="header"
+ className={cn("flex flex-col gap-2 p-2", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-footer"
+ data-sidebar="footer"
+ className={cn("flex flex-col gap-2 p-2", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof Separator>) {
+ return (
+ <Separator
+ data-slot="sidebar-separator"
+ data-sidebar="separator"
+ className={cn("bg-sidebar-border mx-2 w-auto", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-content"
+ data-sidebar="content"
+ className={cn(
+ "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-group"
+ data-sidebar="group"
+ className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupLabel({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+ <Comp
+ data-slot="sidebar-group-label"
+ data-sidebar="group-label"
+ className={cn(
+ "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ <Comp
+ data-slot="sidebar-group-action"
+ data-sidebar="group-action"
+ className={cn(
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupContent({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-group-content"
+ data-sidebar="group-content"
+ className={cn("w-full text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+ <ul
+ data-slot="sidebar-menu"
+ data-sidebar="menu"
+ className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+ <li
+ data-slot="sidebar-menu-item"
+ data-sidebar="menu-item"
+ className={cn("group/menu-item relative", className)}
+ {...props}
+ />
+ );
+}
+
+const sidebarMenuButtonVariants = cva(
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+ outline:
+ "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+ },
+ size: {
+ default: "h-8 text-sm",
+ sm: "h-7 text-xs",
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function SidebarMenuButton({
+ asChild = false,
+ isActive = false,
+ variant = "default",
+ size = "default",
+ tooltip,
+ className,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ isActive?: boolean;
+ tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+ <Comp
+ data-slot="sidebar-menu-button"
+ data-sidebar="menu-button"
+ data-size={size}
+ data-active={isActive}
+ className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+ {...props}
+ />
+ );
+
+ if (!tooltip) {
+ return button;
+ }
+
+ if (typeof tooltip === "string") {
+ tooltip = {
+ children: tooltip,
+ };
+ }
+
+ return (
+ <Tooltip>
+ <TooltipTrigger asChild>{button}</TooltipTrigger>
+ <TooltipContent
+ side="right"
+ align="center"
+ hidden={state !== "collapsed" || isMobile}
+ {...tooltip}
+ />
+ </Tooltip>
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ <Comp
+ data-slot="sidebar-menu-action"
+ data-sidebar="menu-action"
+ className={cn(
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ showOnHover &&
+ "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="sidebar-menu-badge"
+ data-sidebar="menu-badge"
+ className={cn(
+ "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+ "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+}) {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+ <div
+ data-slot="sidebar-menu-skeleton"
+ data-sidebar="menu-skeleton"
+ className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+ {...props}
+ >
+ {showIcon && (
+ <Skeleton
+ className="size-4 rounded-md"
+ data-sidebar="menu-skeleton-icon"
+ />
+ )}
+ <Skeleton
+ className="h-4 max-w-(--skeleton-width) flex-1"
+ data-sidebar="menu-skeleton-text"
+ style={
+ {
+ "--skeleton-width": width,
+ } as React.CSSProperties
+ }
+ />
+ </div>
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+ <ul
+ data-slot="sidebar-menu-sub"
+ data-sidebar="menu-sub"
+ className={cn(
+ "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuSubItem({
+ className,
+ ...props
+}: React.ComponentProps<"li">) {
+ return (
+ <li
+ data-slot="sidebar-menu-sub-item"
+ data-sidebar="menu-sub-item"
+ className={cn("group/menu-sub-item relative", className)}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuSubButton({
+ asChild = false,
+ size = "md",
+ isActive = false,
+ className,
+ ...props
+}: React.ComponentProps<"a"> & {
+ asChild?: boolean;
+ size?: "sm" | "md";
+ isActive?: boolean;
+}) {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+ <Comp
+ data-slot="sidebar-menu-sub-button"
+ data-sidebar="menu-sub-button"
+ data-size={size}
+ data-active={isActive}
+ className={cn(
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | 1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { cn } from "./utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="skeleton"
+ className={cn("bg-accent animate-pulse rounded-md", className)}
+ {...props}
+ />
+ );
+}
+
+export { Skeleton };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "./utils";
+
+function Slider({
+ className,
+ defaultValue,
+ value,
+ min = 0,
+ max = 100,
+ ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+ const _values = React.useMemo(
+ () =>
+ Array.isArray(value)
+ ? value
+ : Array.isArray(defaultValue)
+ ? defaultValue
+ : [min, max],
+ [value, defaultValue, min, max],
+ );
+
+ return (
+ <SliderPrimitive.Root
+ data-slot="slider"
+ defaultValue={defaultValue}
+ value={value}
+ min={min}
+ max={max}
+ className={cn(
+ "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+ className,
+ )}
+ {...props}
+ >
+ <SliderPrimitive.Track
+ data-slot="slider-track"
+ className={cn(
+ "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+ )}
+ >
+ <SliderPrimitive.Range
+ data-slot="slider-range"
+ className={cn(
+ "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+ )}
+ />
+ </SliderPrimitive.Track>
+ {Array.from({ length: _values.length }, (_, index) => (
+ <SliderPrimitive.Thumb
+ data-slot="slider-thumb"
+ key={index}
+ className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+ />
+ ))}
+ </SliderPrimitive.Root>
+ );
+}
+
+export { Slider };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+import type { ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme();
+
+ return (
+ <Sonner
+ theme={theme as ToasterProps["theme"]}
+ className="toaster group"
+ style={
+ {
+ "--normal-bg": "var(--popover)",
+ "--normal-text": "var(--popover-foreground)",
+ "--normal-border": "var(--border)",
+ } as React.CSSProperties
+ }
+ {...props}
+ />
+ );
+};
+
+export { Toaster };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +3x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "./utils";
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+ return (
+ <SwitchPrimitive.Root
+ data-slot="switch"
+ className={cn(
+ "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ {...props}
+ >
+ <SwitchPrimitive.Thumb
+ data-slot="switch-thumb"
+ className={cn(
+ "bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+ )}
+ />
+ </SwitchPrimitive.Root>
+ );
+}
+
+export { Switch };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 | 1x +1x +1x +1x +1x +1x +1x +1x +34x +34x +34x +34x +34x +34x +34x +34x +34x +34x +34x +34x +34x +34x +1x +34x +34x +34x +34x +34x +34x +34x +34x +34x +1x +34x +34x +34x +34x +34x +34x +34x +34x +34x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +105x +105x +105x +105x +105x +105x +105x +105x +105x +105x +105x +105x +1x +249x +249x +249x +249x +249x +249x +249x +249x +249x +249x +249x +249x +1x +502x +502x +502x +502x +502x +502x +502x +502x +502x +502x +502x +502x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+ return (
+ <div
+ data-slot="table-container"
+ className="relative w-full overflow-x-auto"
+ >
+ <table
+ data-slot="table"
+ className={cn("w-full caption-bottom text-sm", className)}
+ {...props}
+ />
+ </div>
+ );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+ return (
+ <thead
+ data-slot="table-header"
+ className={cn("[&_tr]:border-b", className)}
+ {...props}
+ />
+ );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+ return (
+ <tbody
+ data-slot="table-body"
+ className={cn("[&_tr:last-child]:border-0", className)}
+ {...props}
+ />
+ );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+ return (
+ <tfoot
+ data-slot="table-footer"
+ className={cn(
+ "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ <tr
+ data-slot="table-row"
+ className={cn(
+ "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ <th
+ data-slot="table-head"
+ className={cn(
+ "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ <td
+ data-slot="table-cell"
+ className={cn(
+ "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+ <caption
+ data-slot="table-caption"
+ className={cn("text-muted-foreground mt-4 text-sm", className)}
+ {...props}
+ />
+ );
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +1x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +8x +1x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +1x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +13x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "./utils";
+
+function Tabs({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+ return (
+ <TabsPrimitive.Root
+ data-slot="tabs"
+ className={cn("flex flex-col gap-2", className)}
+ {...props}
+ />
+ );
+}
+
+function TabsList({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+ return (
+ <TabsPrimitive.List
+ data-slot="tabs-list"
+ className={cn(
+ "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+ return (
+ <TabsPrimitive.Trigger
+ data-slot="tabs-trigger"
+ className={cn(
+ "data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+ return (
+ <TabsPrimitive.Content
+ data-slot="tabs-content"
+ className={cn("flex-1 outline-none", className)}
+ {...props}
+ />
+ );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+ <textarea
+ data-slot="textarea"
+ className={cn(
+ "resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Textarea };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+import { toggleVariants } from "./toggle";
+
+const ToggleGroupContext = React.createContext<
+ VariantProps<typeof toggleVariants>
+>({
+ size: "default",
+ variant: "default",
+});
+
+function ToggleGroup({
+ className,
+ variant,
+ size,
+ children,
+ ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+ VariantProps<typeof toggleVariants>) {
+ return (
+ <ToggleGroupPrimitive.Root
+ data-slot="toggle-group"
+ data-variant={variant}
+ data-size={size}
+ className={cn(
+ "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+ className,
+ )}
+ {...props}
+ >
+ <ToggleGroupContext.Provider value={{ variant, size }}>
+ {children}
+ </ToggleGroupContext.Provider>
+ </ToggleGroupPrimitive.Root>
+ );
+}
+
+function ToggleGroupItem({
+ className,
+ children,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+ VariantProps<typeof toggleVariants>) {
+ const context = React.useContext(ToggleGroupContext);
+
+ return (
+ <ToggleGroupPrimitive.Item
+ data-slot="toggle-group-item"
+ data-variant={context.variant || variant}
+ data-size={context.size || size}
+ className={cn(
+ toggleVariants({
+ variant: context.variant || variant,
+ size: context.size || size,
+ }),
+ "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ </ToggleGroupPrimitive.Item>
+ );
+}
+
+export { ToggleGroup, ToggleGroupItem };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-2 min-w-9",
+ sm: "h-8 px-1.5 min-w-8",
+ lg: "h-10 px-2.5 min-w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function Toggle({
+ className,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+ VariantProps<typeof toggleVariants>) {
+ return (
+ <TogglePrimitive.Root
+ data-slot="toggle"
+ className={cn(toggleVariants({ variant, size, className }))}
+ {...props}
+ />
+ );
+}
+
+export { Toggle, toggleVariants };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +5x +5x +5x +5x +5x +1x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +1x +1x + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc.
+// SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "./utils";
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+ return (
+ <TooltipPrimitive.Provider
+ data-slot="tooltip-provider"
+ delayDuration={delayDuration}
+ {...props}
+ />
+ );
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+ return (
+ <TooltipProvider>
+ <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+ </TooltipProvider>
+ );
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+ return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+ return (
+ <TooltipPrimitive.Portal>
+ <TooltipPrimitive.Content
+ data-slot="tooltip-content"
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+ </TooltipPrimitive.Content>
+ </TooltipPrimitive.Portal>
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 | 1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +8x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +8x +8x | import { useMemo } from 'react';
+
+interface Pod {
+ name: string;
+ image: string;
+ labels: Record<string, string>;
+ node: string;
+ status: string;
+ cpuUsage: string;
+ memoryUsage: string;
+ age: string;
+ ready: string;
+ restarts: number;
+ ip: string;
+}
+
+interface Node {
+ name: string;
+ pods: number;
+ status: string;
+ cpu: string;
+ memory: string;
+}
+
+interface ClusterHealth {
+ status: "Healthy" | "Warning" | "Critical";
+ color: string;
+ bgColor: string;
+ dotColor: string;
+ borderColor: string;
+ bgGradient: string;
+ runningPods: number;
+ pendingPods: number;
+ failedPods: number;
+ totalPods: number;
+ runningPodPercentage: number;
+ healthyNodeCount: number;
+ totalNodeCount: number;
+ nodeHealthPercentage: number;
+ nodesData: Node[];
+}
+
+export function useClusterHealth(pods: Pod[]): ClusterHealth {
+ return useMemo(() => {
+ // Mock nodes data (should match Workloads.tsx)
+ const nodesData: Node[] = [
+ { name: 'worker-node-1', pods: 2, status: 'Ready', cpu: '2.4/4', memory: '3.2/8' },
+ { name: 'worker-node-2', pods: 2, status: 'Ready', cpu: '1.8/4', memory: '2.1/8' },
+ { name: 'worker-node-3', pods: 1, status: 'Ready', cpu: '0.8/4', memory: '1.5/8' }
+ ];
+
+ // Calculate cluster metrics
+ const runningPods = pods.filter(pod => pod.status === "Running").length;
+ const pendingPods = pods.filter(pod => pod.status === "Pending").length;
+ const failedPods = pods.filter(pod => pod.status === "Failed").length;
+ const totalPods = pods.length;
+ const runningPodPercentage = totalPods > 0 ? (runningPods / totalPods) * 100 : 100;
+ const healthyNodeCount = nodesData.filter(node => node.status === 'Ready').length;
+ const totalNodeCount = nodesData.length;
+ const nodeHealthPercentage = totalNodeCount > 0 ? (healthyNodeCount / totalNodeCount) * 100 : 100;
+
+ // Determine cluster health status
+ // Critical: Failed pods > 20% or any nodes down
+ if (failedPods > totalPods * 0.2 || nodeHealthPercentage < 100) {
+ return {
+ status: "Critical",
+ color: "text-red-600 dark:text-red-400",
+ bgColor: "bg-red-500",
+ dotColor: "bg-red-500",
+ borderColor: "border-red-200/20 dark:border-red-800/20",
+ bgGradient: "from-red-500/10 to-red-600/10",
+ runningPods,
+ pendingPods,
+ failedPods,
+ totalPods,
+ runningPodPercentage,
+ healthyNodeCount,
+ totalNodeCount,
+ nodeHealthPercentage,
+ nodesData
+ };
+ }
+ // Warning: Pending pods > 10% or running pods < 90%
+ else if (pendingPods > totalPods * 0.1 || runningPodPercentage < 90) {
+ return {
+ status: "Warning",
+ color: "text-amber-600 dark:text-amber-400",
+ bgColor: "bg-amber-500",
+ dotColor: "bg-amber-500",
+ borderColor: "border-amber-200/20 dark:border-amber-800/20",
+ bgGradient: "from-amber-500/10 to-amber-600/10",
+ runningPods,
+ pendingPods,
+ failedPods,
+ totalPods,
+ runningPodPercentage,
+ healthyNodeCount,
+ totalNodeCount,
+ nodeHealthPercentage,
+ nodesData
+ };
+ }
+ // Healthy: All systems operational
+ else {
+ return {
+ status: "Healthy",
+ color: "text-emerald-600 dark:text-emerald-400",
+ bgColor: "bg-emerald-500",
+ dotColor: "bg-emerald-500",
+ borderColor: "border-emerald-200/20 dark:border-emerald-800/20",
+ bgGradient: "from-emerald-500/10 to-emerald-600/10",
+ runningPods,
+ pendingPods,
+ failedPods,
+ totalPods,
+ runningPodPercentage,
+ healthyNodeCount,
+ totalNodeCount,
+ nodeHealthPercentage,
+ nodesData
+ };
+ }
+ }, [pods]);
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | 1x +1x +1x +1x +1x +8x +8x +8x +8x +8x +4x +4x + + +4x +4x +4x +8x +8x +8x +8x + | import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+ undefined,
+ );
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ };
+ mql.addEventListener("change", onChange);
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ return !!isMobile;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | 1x +1x +1x +1x +2577x +2577x + | import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.tsx | +
+
+ |
+ 0% | +0/14 | +0% | +0/1 | +0% | +0/1 | +0% | +0/14 | +
| App.vite-backup.tsx | +
+
+ |
+ 0% | +0/37 | +0% | +0/1 | +0% | +0/1 | +0% | +0/37 | +
| main.tsx | +
+
+ |
+ 0% | +0/8 | +0% | +0/1 | +0% | +0/1 | +0% | +0/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 | + + + + + + + + | // SPDX-FileCopyrightText: Copyright 2024 LG Electronics Inc. +// SPDX-License-Identifier: Apache-2.0 + + import { createRoot } from "react-dom/client"; + import App from "./App.tsx"; + import "./index.css"; + + createRoot(document.getElementById("root")!).render(<App />); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| recharts.tsx | +
+
+ |
+ 0% | +0/11 | +0% | +0/1 | +0% | +0/1 | +0% | +0/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 | + + + + + + + + + + + | import React from 'react'; +export const ResponsiveContainer = (props: any) => <div data-testid="recharts-responsive">{props.children}</div>; +export const PieChart = (props: any) => <div data-testid="recharts-pie">{props.children}</div>; +export const Pie = (props: any) => <div data-testid="recharts-pie-elem" />; +export const Cell = (props: any) => <div data-testid="recharts-cell" />; +export default { + ResponsiveContainer, + PieChart, + Pie, + Cell, +}; + |