mirror/QuickStack
1
0
Fork 0
mirror of https://github.com/biersoeckli/QuickStack.git synced 2026-01-02 01:30:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

ui update for cluster information

Browse Source
This commit is contained in:
biersoeckli
2024-11-11 14:40:56 +00:00
parent 4de979033f
commit f592e31068
6 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/settings/cluster-info/nodeInfo.tsx
View File

@@ -1,56 +0,0 @@
'use client'
import { getAuthUserSession } from "@/server/utils/action-wrapper.utils";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
} from "@/components/ui/breadcrumb"
import PageTitle from "@/components/custom/page-title";
import userService from "@/server/services/user.service";
import clusterService from "@/server/services/node.service";
import { NodeInfoModel } from "@/model/node-info.model";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export default async function NodeInfo({ nodeInfos }: { nodeInfos: NodeInfoModel[] }) {
return (
<Card>
<CardHeader>
<CardTitle>Cluster Info</CardTitle>
<CardDescription>Overview of all nodes and capacities in the cluster.</CardDescription>
</CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4">
{nodeInfos.map((nodeInfo, index) => (
<div key={index} className="space-y-4 rounded-lg border p-4">
<h3 className="font-semibold text-xl text-center">Node {index + 1}
<span className={nodeInfo.status ? 'text-green-400' : 'text-red-400'}> ({nodeInfo.status ? 'online' : 'offline'})</span>
</h3>
<div className="space-y-2">
<div>
<span className="font-semibold">Name:</span> {nodeInfo.name}
</div>
<div>
<span className="font-semibold">IP:</span> {nodeInfo.ip}
</div>
<div>
<span className="font-semibold">CPU Cores:</span> {nodeInfo.cpuCapacity}
</div>
<div>
<span className="font-semibold">Memory:</span> {nodeInfo.ramCapacity}
</div>
<div>
<span className="font-semibold">OS:</span> {nodeInfo.os}
</div>
<div>
<span className="font-semibold">Architektur:</span> {nodeInfo.architecture}
</div>
</div>
</div>
))}
</CardContent>
</Card >
)
}

59
src/app/settings/cluster/nodeInfo.tsx Normal file
View File

@@ -0,0 +1,59 @@
'use client'
import { NodeInfoModel } from "@/model/node-info.model";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Code } from "@/components/custom/code";
export default async function NodeInfo({ nodeInfos }: { nodeInfos: NodeInfoModel[] }) {
return (
<Card>
<CardHeader>
<CardTitle>Nodes</CardTitle>
<CardDescription>Overview of all Nodes in your CLuster</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{nodeInfos.map((nodeInfo, index) => (
<div key={index} className="space-y-4 rounded-lg border">
<h3 className={(nodeInfo.status ? 'bg-green-200 text-green-700' : 'bg-red-200 text-red-700') + ' p-4 rounded-t-lg font-semibold text-xl text-center'}>
Node {index + 1}
</h3>
<div className="space-y-2 px-4 pb-4">
<div>
<span className="font-semibold">Name:</span> <Code>{nodeInfo.name}</Code>
</div>
<div>
<span className="font-semibold">IP:</span> <Code>{nodeInfo.ip}</Code>
</div>
<div>
<span className="font-semibold">CPU Cores:</span> {nodeInfo.cpuCapacity}
</div>
<div>
<span className="font-semibold">Memory:</span> {nodeInfo.ramCapacity}
</div>
<div>
<span className="font-semibold">OS:</span> {nodeInfo.os} | {nodeInfo.architecture}
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div className="text-xs text-slate-500">
<span className="font-semibold">Kernel Version:</span> {nodeInfo.kernelVersion}<br />
<span className="font-semibold">Container Runtime Version:</span> {nodeInfo.containerRuntimeVersion}<br />
<span className="font-semibold">Kube Proxy Version:</span> {nodeInfo.kubeProxyVersion}<br />
<span className="font-semibold">Kubelet Version:</span> {nodeInfo.kubeletVersion}
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
)
}

4
src/app/settings/cluster-info/page.tsx → src/app/settings/cluster/page.tsx
View File

@@ -11,6 +11,10 @@ export default async function ClusterInfoPage() {
const nodeInfo = await clusterService.getNodeInfo();
return (
<div className="flex-1 space-y-4 p-8 pt-6">
<PageTitle
title={'Cluster'}
subtitle={`View all Nodes of your current QuickStack cluster.`}>
</PageTitle>
<NodeInfo nodeInfos={nodeInfo} />
</div>
)

2
src/app/settings/settings-nav.tsx
View File

@@ -38,7 +38,7 @@ export default function SettingsNav() {
<Link href="/settings/server"> <button className={pathname === '/settings/server' ? selectedCss : notSelectedCss}><Settings /> QuickStack Settings</button></Link>
</div>
<div>
<Link href="/settings/cluster-info"> <button className={pathname === '/settings/cluster-info' ? selectedCss : notSelectedCss}><Server /> Cluster Info</button></Link>
<Link href="/settings/cluster"> <button className={pathname === '/settings/cluster' ? selectedCss : notSelectedCss}><Server /> Cluster</button></Link>
</div>
</div>
);

5
src/model/node-info.model.ts
View File

@@ -9,7 +9,10 @@ export const nodeInfoZodModel = z.object({
cpuCapacity: z.string(),
ramCapacity: z.string(),
ip: z.string(),
diskCapacity: z.string(),
containerRuntimeVersion: z.string(),
kernelVersion: z.string(),
kubeProxyVersion: z.string(),
kubeletVersion: z.string(),
})
export type NodeInfoModel = z.infer<typeof nodeInfoZodModel>;

5
src/server/services/node.service.ts
View File

@@ -14,7 +14,10 @@ class ClusterService {
cpuCapacity: node.status?.capacity?.cpu!,
ramCapacity: node.status?.capacity?.memory!,
ip: node.status?.addresses?.filter((address) => address.type === 'InternalIP')[0].address!,
diskCapacity: node.status?.capacity?.ephemeralStorage!,
kernelVersion: node.status?.nodeInfo?.kernelVersion!,
containerRuntimeVersion: node.status?.nodeInfo?.containerRuntimeVersion!,
kubeProxyVersion: node.status?.nodeInfo?.kubeProxyVersion!,
kubeletVersion: node.status?.nodeInfo?.kubeletVersion!,
}
});
}