pvern/app/nodes/[node]/index.tsx
2023-03-20 22:37:20 +01:00

208 lines
6.2 KiB
TypeScript

import { Link, Stack, useSearchParams } from "expo-router";
import { View, Text, SafeAreaView, ScrollView } from "react-native";
import { NodeResource, useNode } from "../../../hooks/useNode";
import Icon from "@expo/vector-icons/Feather";
import tw from "twrnc";
import { formatBytes, formatPercentage } from "../../../lib/helper/format";
import { useEffect, useMemo } from "react";
interface ResourceListItemProps {
type: "LXC" | "QEMU";
resource: NodeResource;
}
export function ResourceListItem({ type, resource }: ResourceListItemProps) {
return (
<View style={tw.style("flex-row items-center")}>
<View
style={tw.style(
"h-12 w-12 rounded-lg flex flex-row justify-center items-center",
resource.status === "running" ? "bg-green-200" : "bg-slate-200"
)}
>
{type === "LXC" ? (
<Icon name="package" size={22} />
) : (
<Icon name="monitor" size={22} />
)}
</View>
<View style={tw.style("ml-2")}>
<Text style={tw.style("text-xl")}>
{resource.vmid}: {resource.name}
</Text>
<View style={tw.style("flex flex-row")}>
<Text style={tw.style("pr-2")}>CPUs: {resource.cpus}</Text>
<Text style={tw.style("pr-2")}>
MEM: {formatBytes(resource.maxmem)}
</Text>
<Text>DISK: {formatBytes(resource.maxdisk)}</Text>
</View>
</View>
</View>
);
}
interface ProgressBarProps {
label: string;
value: number;
max: number;
formatFn?: (input: number) => string;
}
export function ProgressBar({ label, value, max, formatFn }: ProgressBarProps) {
const percentage = formatPercentage(value / max);
return (
<View>
<View
style={tw.style("flex flex-row justify-between items-center mb-1 px-1")}
>
<Text>
{label} ({percentage})
</Text>
{formatFn && (
<Text>
{formatFn(value)}/{formatFn(max)}
</Text>
)}
</View>
<View style={tw.style("h-3 w-full bg-slate-300 rounded-lg")}>
<View
style={tw.style("h-full bg-slate-700 rounded-lg", {
width: percentage,
})}
/>
</View>
</View>
);
}
interface GaugeProps {
label: string;
value: string;
}
export function Gauge({ label, value }: GaugeProps) {
return (
<View>
<Text>{label}</Text>
<Text style={tw.style("text-2xl")}>{value}</Text>
</View>
);
}
export default function NodePage() {
const { node: nodeName } = useSearchParams<{ node: string }>();
const node = useNode(nodeName);
const sortedLXCs = useMemo(() => {
if (!node.lxc.isSuccess) return [];
return node.lxc.data.sort((a, b) => a.vmid - b.vmid);
}, [node.lxc.data]);
const sortedVMs = useMemo(() => {
if (!node.qemu.isSuccess) return [];
return node.qemu.data.sort((a, b) => a.vmid - b.vmid);
}, [node.qemu.data]);
return (
<View>
<SafeAreaView>
<ScrollView>
<View
style={tw.style(
"bg-white m-2 p-3 rounded-lg border border-slate-200"
)}
>
<Text style={tw.style("text-2xl font-semibold")}>{nodeName}</Text>
{node.status.isSuccess && (
<View style={tw.style("mb-4")}>
<Text>{node.status.data.pveversion}</Text>
<Text>{node.status.data.kversion}</Text>
</View>
)}
{node.rdd.isSuccess && (
<View>
<View style={tw.style("mb-2")}>
<ProgressBar label="CPU" value={node.rdd.data.cpu} max={1} />
</View>
<View style={tw.style("mb-2")}>
<ProgressBar
label="Memory"
value={node.rdd.data.memused}
max={node.rdd.data.memtotal}
formatFn={formatBytes}
/>
</View>
<View style={tw.style("mb-2")}>
<ProgressBar
label="Storage"
value={node.rdd.data.rootused}
max={node.rdd.data.roottotal}
formatFn={formatBytes}
/>
</View>
<View
style={tw.style(
"flex flex-row justify-evenly items-center p-2"
)}
>
<View style={tw.style("flex-1")}>
<Gauge
label="Up"
value={`${formatBytes(node.rdd.data.netout)}/s`}
/>
</View>
<View style={tw.style("flex-1")}>
<Gauge
label="Down"
value={`${formatBytes(node.rdd.data.netin)}/s`}
/>
</View>
</View>
</View>
)}
</View>
<Text style={tw.style("ml-6 mt-4")}>LXC Containers</Text>
<View
style={tw.style(
"bg-white m-2 p-1 rounded-lg border border-slate-200"
)}
>
{sortedLXCs.map((lxc) => (
<Link
key={lxc.vmid}
href={{
pathname: "/nodes/[name]/lxc/[vmid]",
params: { name: nodeName, vmid: lxc.vmid },
}}
style={tw.style("m-2")}
>
<ResourceListItem type="LXC" resource={lxc} />
</Link>
))}
</View>
<Text style={tw.style("ml-6 mt-4")}>Virtual Machines</Text>
<View
style={tw.style(
"bg-white m-2 p-1 rounded-lg border border-slate-200"
)}
>
{sortedVMs.map((vm) => (
<Link
key={vm.vmid}
href={{
pathname: "/nodes/[node]/lxc/[vmid]",
params: { node: nodeName, vmid: vm.vmid },
}}
style={tw.style("m-2")}
>
<ResourceListItem type="QEMU" resource={vm} />
</Link>
))}
</View>
</ScrollView>
</SafeAreaView>
</View>
);
}