niku/pvern
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added qemu vm info page

Browse Source
This commit is contained in:
niku 2023-06-10 22:23:45 +02:00
parent fd37a13cf5
commit 3d02d19f05
1 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
app/nodes/[node]/qemu/[vmid]/index.tsx Normal file
View File

@ -0,0 +1,121 @@
import { useSearchParams } from "expo-router";
import { useMemo } from "react";
import { View, Text, ScrollView } from "react-native";
import Icon from "@expo/vector-icons/Feather";
import tw from "twrnc";
import Card from "../../../../../components/shared/card";
import { Gauge } from "../../../../../components/shared/gauge";
import ProgressBar from "../../../../../components/shared/progress-bar";
import { useNode } from "../../../../../hooks/useNode";
import { useResource } from "../../../../../hooks/useResource";
import { formatBytes } from "../../../../../lib/helper/format";
export default function QemuResourcePage() {
const { node, vmid } = useSearchParams<{ node: string; vmid: string }>();
const { rddData, config } = useResource(node, "qemu", vmid);
const { qemu } = useNode(node);
const status = useMemo(() => {
if (qemu.isSuccess) {
return qemu.data.find((lxc) => lxc.vmid.toString() === vmid);
}
}, [qemu]);
console.log({ rddData });
return (
<ScrollView>
<Card>
<View style={tw.style("p-1")}>
<View style={tw.style("px-1 mb-4")}>
<View style={tw.style("flex flex-row items-center")}>
<View
style={tw.style(
"h-12 w-12 rounded-lg flex flex-row justify-center items-center",
status.status === "running" ? "bg-green-200" : "bg-slate-200"
)}
>
<Icon name="monitor" size={22} />
</View>
<View style={tw.style("mx-2 flex-1")}>
<Text style={tw.style("text-xl")}>
{vmid}: {status.name}
</Text>
<Text style={tw.style("text-base")}>Node: {node}</Text>
</View>
<View
style={tw.style(
"h-12 w-12 flex flex-row justify-center items-center"
)}
>
<Icon name="power" size={22} />
</View>
</View>
</View>
{rddData.isSuccess && (
<View>
<View style={tw.style("mb-2")}>
<ProgressBar label="CPU" value={rddData.data.cpu} max={1} />
</View>
<View style={tw.style("mb-2")}>
<ProgressBar
label="Memory"
value={rddData.data.mem ?? 1}
max={rddData.data.maxmem ?? 1}
formatFn={formatBytes}
/>
</View>
<View style={tw.style("mb-2")}>
<ProgressBar
label="Storage"
value={rddData.data.disk ?? 1}
max={rddData.data.maxdisk ?? 1}
formatFn={formatBytes}
/>
</View>
<View style={tw.style("mb-2")}>
<ProgressBar
label="Storage"
value={rddData.data.disk ?? 1}
max={rddData.data.maxdisk ?? 1}
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(rddData.data.netout)}/s`}
/>
</View>
<View style={tw.style("flex-1")}>
<Gauge
label="Down"
value={`${formatBytes(rddData.data.netin)}/s`}
/>
</View>
</View>
</View>
)}
</View>
</Card>
<Card>
<View style={tw.style("m-2")}>
{config.isSuccess &&
Object.entries(config.data).map(([key, val]) => {
return (
<View key={key} style={tw.style("mb-1")}>
<Text style={tw.style("text-lg")}>{key}:</Text>
<Text>{val}</Text>
</View>
);
})}
</View>
</Card>
</ScrollView>
);
}