ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

upgrade server stats to shadcn progress

Browse Source
This commit is contained in:
karamvir
2023-08-17 16:34:11 -07:00
parent 76d331ef03
commit df56123ceb
4 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@@ -17,6 +17,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-slot": "^1.0.1",
"@radix-ui/react-switch": "^1.0.3",

42
frontend/src/resources/server/stats.tsx
View File

@@ -7,6 +7,7 @@ import {
CardHeader,
CardTitle,
} from "@ui/card";
import { Progress } from "@ui/progress";
import { Cpu, Database, LineChart, MemoryStick } from "lucide-react";
import { useParams } from "react-router-dom";
@@ -24,7 +25,6 @@ export const ServerStats = () => {
<CPU server_id={server_id} />
<RAM server_id={server_id} />
<DISK server_id={server_id} />
<LOAD server_id={server_id} />
</div>
</Section>
);
@@ -44,12 +44,7 @@ const CPU = ({ server_id }: { server_id: string }) => {
</div>
</CardHeader>
<CardContent>
<div className="relative w-full rounded-lg bg-muted-foreground h-4">
<div
className="bg-blue-500 rounded-lg h-4 absolute left-0 top-0"
style={{ width: `${perc}%` }}
/>
</div>
<Progress value={perc} className="h-4" />
</CardContent>
</Card>
);
@@ -72,12 +67,7 @@ const RAM = ({ server_id }: { server_id: string }) => {
</div>
</CardHeader>
<CardContent>
{!isNaN(perc) && (
<div
className="bg-blue-500 rounded-lg h-4"
style={{ width: `${perc}%` }}
/>
)}
<Progress value={perc} className="h-4" />
</CardContent>
</Card>
);
@@ -100,31 +90,7 @@ const DISK = ({ server_id }: { server_id: string }) => {
</div>
</CardHeader>
<CardContent>
{!isNaN(perc) && (
<div
className="bg-blue-500 rounded-lg h-4"
style={{ width: `${perc}%` }}
/>
)}
</CardContent>
</Card>
);
};
const LOAD = ({ server_id }: { server_id: string }) => {
const stats = useServerStats(server_id);
const perc = stats?.basic.system_load;
return (
<Card className="w-full">
<CardHeader>
<CardTitle>System Load</CardTitle>
</CardHeader>
<CardContent>
<div
className="bg-blue-500 rounded-lg h-4"
style={{ width: `${perc}%` }}
/>
<Progress value={perc} className="h-4" />
</CardContent>
</Card>
);

28
frontend/src/ui/progress.tsx Normal file
View File

@@ -0,0 +1,28 @@
"use client";
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "@util/helpers";
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-2 w-full overflow-hidden rounded-full bg-primary/20",
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;
export { Progress };

9
frontend/yarn.lock
View File

@@ -848,6 +848,15 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-slot" "1.0.2"
"@radix-ui/react-progress@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.3.tgz#8380272fdc64f15cbf263a294dea70a7d5d9b4fa"
integrity sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-roving-focus@1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz#0b4f4f9bd509f4510079e9e0734a734fd17cdce3"