orus-dev/dockship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Trying to fix tw

Browse Source
This commit is contained in:
selimaj-dev
2025-12-26 19:05:49 +01:00
parent 82d45d872e
commit 10bd71a761
8 changed files with 110 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+64 -1
View File
@@ -8,6 +8,7 @@
"name": "dockship",
"version": "0.1.0",
"dependencies": {
"@radix-ui/react-progress": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@types/dockerode": "^3.3.47",
"class-variance-authority": "^0.7.1",
@@ -848,6 +849,68 @@
}
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
"integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
"integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.4"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-progress": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
"integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-context": "1.1.3",
"@radix-ui/react-primitive": "2.1.4"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -1301,7 +1364,7 @@
"version": "19.2.3",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
"dev": true,
"devOptional": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.2.0"
package.json
+1
View File
@@ -8,6 +8,7 @@
"start": "next start"
},
"dependencies": {
"@radix-ui/react-progress": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@types/dockerode": "^3.3.47",
"class-variance-authority": "^0.7.1",
src/app/applications/page.tsx
+3 -3
View File
@@ -5,8 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
import { MetricBar } from "@/components/dashboard/MetricBar";
import { Play, Square, RotateCcw, MoreVertical, Plus } from "lucide-react";
import { Progress } from "@/components/ui/progress";
const applications = [
{
@@ -130,7 +130,7 @@ export default function ApplicationsPage() {
<div className="col-span-2">
<div className="text-xs text-muted-foreground mb-1">CPU</div>
<div className="flex items-center gap-2">
<MetricBar value={app.cpu} max={100} />
<Progress value={app.cpu} className="w-full" />
<span className="text-xs font-mono w-8">{app.cpu}%</span>
</div>
</div>
@@ -141,7 +141,7 @@ export default function ApplicationsPage() {
Memory
</div>
<div className="flex items-center gap-2">
<MetricBar value={app.memory} max={100} />
<Progress value={app.memory} className="w-full" />
<span className="text-xs font-mono w-8">{app.memory}%</span>
</div>
</div>
src/app/monitoring/page.tsx
+5 -5
View File
@@ -3,7 +3,6 @@
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { MetricBar } from "@/components/dashboard/MetricBar";
import {
LineChart,
Line,
@@ -14,6 +13,7 @@ import {
AreaChart,
Area,
} from "recharts";
import { Progress } from "@/components/ui/progress";
const cpuData = [
{ time: "00:00", value: 45 },
@@ -88,7 +88,7 @@ export default function MonitoringPage() {
Cluster CPU
</div>
<div className="stat-value">68%</div>
<MetricBar value={68} max={100} />
<Progress value={68} className="w-full" />
</CardContent>
</Card>
<Card>
@@ -97,7 +97,7 @@ export default function MonitoringPage() {
Cluster Memory
</div>
<div className="stat-value">71%</div>
<MetricBar value={71} max={100} />
<Progress value={71} className="w-full" />
</CardContent>
</Card>
<Card>
@@ -337,14 +337,14 @@ export default function MonitoringPage() {
<span>CPU</span>
<span>{container.cpu}%</span>
</div>
<MetricBar value={container.cpu} max={100} />
<Progress value={container.cpu} className="w-full" />
</div>
<div>
<div className="flex justify-between text-[10px] text-muted-foreground mb-1">
<span>Memory</span>
<span>{container.memory}%</span>
</div>
<MetricBar value={container.memory} max={100} />
<Progress value={container.memory} className="w-full" />
</div>
<div className="flex justify-between text-[10px] pt-1 border-t border-border">
<span className="text-muted-foreground">Network</span>
src/app/nodes/page.tsx
+4 -4
View File
@@ -5,8 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
import { MetricBar } from "@/components/dashboard/MetricBar";
import { Server, Plus, Settings, Trash2 } from "lucide-react";
import { Progress } from "@/components/ui/progress";
const nodes = [
{
@@ -130,7 +130,7 @@ export default function NodesPage() {
CPU ({node.cpu.cores} cores)
</div>
<div className="stat-value mb-2">{node.cpu.usage}%</div>
<MetricBar value={node.cpu.usage} max={100} />
<Progress value={node.cpu.usage} className="w-full" />
</div>
{/* Memory */}
@@ -141,7 +141,7 @@ export default function NodesPage() {
<div className="stat-value mb-2">
{node.memory.percentage}%
</div>
<MetricBar value={node.memory.percentage} max={100} />
<Progress value={node.memory.percentage} className="w-full" />
<div className="text-[10px] text-muted-foreground mt-1 font-mono">
{node.memory.used} / {node.memory.total}
</div>
@@ -151,7 +151,7 @@ export default function NodesPage() {
<div>
<div className="text-xs text-muted-foreground mb-2">Disk</div>
<div className="stat-value mb-2">{node.disk.percentage}%</div>
<MetricBar value={node.disk.percentage} max={100} />
<Progress value={node.disk.percentage} className="w-full" />
<div className="text-[10px] text-muted-foreground mt-1 font-mono">
{node.disk.used} / {node.disk.total}
</div>
src/app/overview/page.tsx
+5 -5
View File
@@ -6,7 +6,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
import { MetricBar } from "@/components/dashboard/MetricBar";
import {
Box,
Server,
@@ -15,6 +14,7 @@ import {
ArrowRight,
Clock,
} from "lucide-react";
import { Progress } from "@/components/ui/progress";
const recentDeployments = [
{
@@ -172,7 +172,7 @@ export default function OverviewPage() {
</div>
<div className="col-span-2">
<div className="flex items-center gap-2">
<MetricBar value={app.cpu} max={100} />
<Progress value={app.cpu} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.cpu}%
</span>
@@ -180,7 +180,7 @@ export default function OverviewPage() {
</div>
<div className="col-span-2">
<div className="flex items-center gap-2">
<MetricBar value={app.memory} max={100} />
<Progress value={app.memory} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.memory}%
</span>
@@ -257,12 +257,12 @@ export default function OverviewPage() {
<span className="text-muted-foreground">CPU</span>
<span className="font-mono">{node.cpu}%</span>
</div>
<MetricBar value={node.cpu} max={100} />
<Progress value={node.cpu} className="bg-primary" />
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">Memory</span>
<span className="font-mono">{node.memory}%</span>
</div>
<MetricBar value={node.memory} max={100} />
<Progress value={node.memory} className="w-full" />
<div className="flex items-center justify-between text-xs pt-2 border-t border-border mt-2">
<span className="text-muted-foreground">Containers</span>
<span className="font-mono">{node.containers}</span>
src/components/dashboard/MetricBar.tsx
-32
View File
@@ -1,32 +0,0 @@
interface MetricBarProps {
value: number;
max: number;
variant?: "default" | "success" | "warning" | "danger";
}
export function MetricBar({ value, max, variant = "default" }: MetricBarProps) {
const percentage = Math.min((value / max) * 100, 100);
const getColor = () => {
if (variant !== "default") {
switch (variant) {
case "success": return "bg-success";
case "warning": return "bg-warning";
case "danger": return "bg-destructive";
}
}
if (percentage > 80) return "bg-destructive";
if (percentage > 60) return "bg-warning";
return "bg-primary";
};
return (
<div className="metric-bar">
<div
className={`metric-bar-fill ${getColor()}`}
style={{ width: `${percentage}%` }}
/>
</div>
);
}
src/components/ui/progress.tsx
+28 -20
View File
@@ -1,23 +1,31 @@
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
"use client"
import { cn } from "@/lib/utils";
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;
import { cn } from "@/lib/utils"
export { Progress };
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 }