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

update cards etc

Browse Source
This commit is contained in:
karamvir
2023-07-25 13:23:55 -07:00
parent 9cc3fa0897
commit c8b312bcb1
9 changed files with 108 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/layouts/card.tsx Normal file
View File

@@ -0,0 +1,39 @@
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@ui/card";
import { ReactNode } from "react";
interface CardProps {
title: string;
description: string;
icon: ReactNode;
children: ReactNode;
statusIcon?: ReactNode;
}
export const ResourceCard = ({
title,
description,
icon,
children,
statusIcon,
}: CardProps) => (
<Card hoverable>
<CardHeader className="flex flex-row justify-between">
<div>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</div>
{statusIcon}
</CardHeader>
<CardContent className="flex items-center gap-4">
{icon}
<div className="border h-6" />
{children}
</CardContent>
</Card>
);

6
frontend/src/layouts/resources.tsx
View File

@@ -7,12 +7,12 @@ import { Page } from "./page";
export const Resources = ({
type,
info,
summary,
icon,
components,
}: {
type: string;
info: string;
summary: ReactNode;
icon: ReactNode;
components: (search: string) => ReactNode;
}) => {
@@ -24,7 +24,7 @@ export const Resources = ({
subtitle={
<h2 className="text-lg text-muted-foreground flex items-center gap-2">
{icon}
{info}
{summary}
</h2>
}
actions={

24
frontend/src/resources/build/card.tsx
View File

@@ -11,6 +11,7 @@ import { version_to_string } from "@util/helpers";
import { Link } from "react-router-dom";
import { BuildInfo } from "./util";
import { Hammer } from "lucide-react";
import { ResourceCard } from "@layouts/card";
export const BuildCard = ({ id }: { id: string }) => {
const builds = useRead("ListBuilds", {}).data;
@@ -19,22 +20,13 @@ export const BuildCard = ({ id }: { id: string }) => {
return (
<Link to={`/builds/${build.id}`} key={build.id}>
<Card hoverable>
<CardHeader className="flex flex-row justify-between">
<div>
<CardTitle>{build.name}</CardTitle>
<CardDescription>
{version_to_string(build.version)}
</CardDescription>
</div>
<ServerStatusIcon serverId={build.id} />
</CardHeader>
<CardContent className="flex items-center gap-4">
<Hammer className="w-4 h-4" />
<div className="border h-6" />
<BuildInfo id={id} />
</CardContent>
</Card>
<ResourceCard
title={build.name}
description={version_to_string(build.version) ?? "not built"}
icon={<Hammer className="w-4 h-4" />}
>
<BuildInfo id={id} />
</ResourceCard>
</Link>
);
};

16
frontend/src/resources/build/util.tsx
View File

@@ -18,7 +18,7 @@ export const BuildVersion = ({ id }: { id: string }) => {
export const BuildBuilder = ({ id }: { id: string }) => {
const builds = useRead("ListBuilds", {}).data;
const build = builds?.find((b) => b.id === id);
return <>{"build.builder " + build?.id ?? "..."}</>;
return <>{build?.id.slice(0, 10) + "..." ?? "..."}</>;
};
export const BuildLastBuilt = ({ id }: { id: string }) => {
@@ -30,15 +30,15 @@ export const BuildLastBuilt = ({ id }: { id: string }) => {
export const BuildInfo = ({ id }: { id: string }) => {
return (
<div className="flex flex-col gap-2 md:flex-row md:gap-4">
<CardDescription className="flex items-center">
<Factory className="w-4 h-4 mr-2" />
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<Factory className="w-4 h-4" />
<BuildBuilder id={id} />
</CardDescription>
<CardDescription className="flex items-center">
<History className="w-4 h-4 mr-2" />
</div>
<div className="flex items-center gap-2">
<History className="w-4 h-4" />
<BuildLastBuilt id={id} />
</CardDescription>
</div>
</div>
);
};

32
frontend/src/resources/deployment/card.tsx
View File

@@ -1,14 +1,8 @@
import { useRead } from "@hooks";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@ui/card";
import { Link } from "react-router-dom";
import { DeploymentInfo, DeploymentStatusIcon } from "./util";
import { Rocket } from "lucide-react";
import { ResourceCard } from "@layouts/card";
export const DeploymentCard = ({ id }: { id: string }) => {
const deployments = useRead("ListDeployments", {}).data;
@@ -16,22 +10,14 @@ export const DeploymentCard = ({ id }: { id: string }) => {
if (!deployment) return null;
return (
<Link to={`/deployments/${deployment.id}`}>
<Card hoverable>
<CardHeader className="flex flex-row justify-between">
<div>
<CardTitle>{deployment.name}</CardTitle>
<CardDescription>
{deployment.status ?? "not deployed"}
</CardDescription>
</div>
<DeploymentStatusIcon deploymentId={id} />
</CardHeader>
<CardContent className="flex items-center gap-4">
<Rocket className="w-4 h-4" />
<div className="border h-6" />
<DeploymentInfo deploymentId={id} />
</CardContent>
</Card>
<ResourceCard
title={deployment.name}
description={deployment.status ?? "not deployed"}
statusIcon={<DeploymentStatusIcon deploymentId={id} />}
icon={<Rocket className="w-4 h-4" />}
>
<DeploymentInfo deploymentId={id} />
</ResourceCard>
</Link>
);
};

2
frontend/src/resources/deployment/util.tsx
View File

@@ -46,7 +46,7 @@ export const DeploymentInfo = ({ deploymentId }: { deploymentId: string }) => {
const deployment = deployments?.find((d) => d.id === deploymentId);
return (
<div className="flex flex-col gap-2 md:flex-row md:gap-4 text-muted-foreground">
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<Server className="w-4 h-4" />
server name

37
frontend/src/resources/pages.tsx
View File

@@ -6,14 +6,25 @@ import { BuildCard } from "./build/card";
import { ServerCard } from "./server/card";
import { BuilderCard } from "./builder/card";
const DeploymentsSummary = () => {
const summary = useRead("GetDeploymentsSummary", {}).data;
if (!summary) return <>...</>;
else {
const { total, running, stopped, unknown } = summary;
return (
<>
{total} Total, {running} Running, {stopped} Stopped, {unknown} Unknown
</>
);
}
};
export const Deployments = () => {
const deployments = useRead("ListDeployments", {}).data;
const summary = useRead("GetDeploymentsSummary", {}).data;
return (
<Resources
type="Deployment"
info={`${summary?.total} Total, ${summary?.running} Running, ${summary?.stopped} Stopped, ${summary?.unknown} Unknown`}
summary={<DeploymentsSummary />}
icon={<Rocket className="w-4 h-4" />}
components={(search) => (
<>
@@ -28,13 +39,25 @@ export const Deployments = () => {
);
};
const ServersSummary = () => {
const summary = useRead("GetServersSummary", {}).data;
if (!summary) return <>...</>;
else {
const { total, healthy, unhealthy } = summary;
return (
<>
{total} Total, {healthy} Healthy, {unhealthy} Unhealthy
</>
);
}
};
export const Servers = () => {
const servers = useRead("ListServers", {}).data;
const summary = useRead("GetServersSummary", {}).data;
return (
<Resources
type="Server"
info={`${summary?.total} Total, ${summary?.healthy} Healthy, ${summary?.unhealthy} Unhealthy`}
summary={<ServersSummary />}
icon={<Server className="w-4 h-4" />}
components={(search) => (
<>
@@ -56,7 +79,7 @@ export const Builds = () => {
return (
<Resources
type="Build"
info={`${summary?.total} Total`}
summary={summary ? `${summary?.total} Total` : "..."}
icon={<Hammer className="w-4 h-4" />}
components={(search) => (
<>
@@ -78,7 +101,7 @@ export const Builders = () => {
return (
<Resources
type="Builder"
info={`${summary?.total} Total`}
summary={summary ? `${summary?.total} Total` : "..."}
icon={<Factory className="w-4 h-4" />}
components={(search) => (
<>

30
frontend/src/resources/server/card.tsx
View File

@@ -1,14 +1,8 @@
import { useRead } from "@hooks";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@ui/card";
import { Link } from "react-router-dom";
import { ServerStatusIcon, ServerStats } from "./util";
import { Server } from "lucide-react";
import { ResourceCard } from "@layouts/card";
export const ServerCard = ({ id }: { id: string }) => {
const servers = useRead("ListServers", {}).data;
@@ -17,20 +11,14 @@ export const ServerCard = ({ id }: { id: string }) => {
return (
<Link to={`/servers/${server.id}`} key={server.id}>
<Card hoverable>
<CardHeader className="flex flex-row justify-between items-start">
<div>
<CardTitle>{server.name}</CardTitle>
<CardDescription>{server.status}</CardDescription>
</div>
<ServerStatusIcon serverId={server.id} />
</CardHeader>
<CardContent className="flex items-center gap-4">
<Server className="w-4 h-4" />
<div className="border h-6" />
<ServerStats server_id={server.id} />
</CardContent>
</Card>
<ResourceCard
title={server.name}
description={server.status}
statusIcon={<ServerStatusIcon serverId={server.id} />}
icon={<Server className="w-4 h-4" />}
>
<ServerStats server_id={server.id} />
</ResourceCard>
</Link>
);
};

2
frontend/src/resources/server/util.tsx
View File

@@ -37,7 +37,7 @@ export const ServerStats = ({ server_id }: { server_id: string }) => {
}, [refetch]);
return (
<div className="flex gap-4 text-muted-foreground">
<div className="flex gap-4 text-sm text-muted-foreground">
<div className="flex gap-2 items-center ">
<Cpu className="w-4 h-4" />
{data?.cpu_perc.toFixed(2)}%