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

Split some code into seperate components

Browse Source
This commit is contained in:
niku
2023-03-21 20:09:37 +01:00
parent dddd9fd666
commit 42c2d069ef
6 changed files with 264 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
app/nodes/[node]/index.tsx
View File

@ -1,10 +1,13 @@
import { Link, Stack, useSearchParams } from "expo-router";
import { View, Text, SafeAreaView, ScrollView } from "react-native";
import { Link, useSearchParams } from "expo-router";
import { View, Text, SafeAreaView, ScrollView, Button } 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";
import { Gauge } from "../../../components/Gauge";
import ProgressBar from "../../../components/ProgressBar";
import Card from "../../../components/Card";
interface ResourceListItemProps {
type: "LXC" | "QEMU";
@ -42,54 +45,6 @@ export function ResourceListItem({ type, resource }: ResourceListItemProps) {
);
}
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);
@ -105,14 +60,10 @@ export default function NodePage() {
}, [node.qemu.data]);
return (
<View>
<SafeAreaView>
<ScrollView>
<View
style={tw.style(
"bg-white m-2 p-3 rounded-lg border border-slate-200"
)}
>
<ScrollView>
<Card>
<View style={tw.style("p-1")}>
<View style={tw.style("px-1")}>
<Text style={tw.style("text-2xl font-semibold")}>{nodeName}</Text>
{node.status.isSuccess && (
<View style={tw.style("mb-4")}>
@ -120,88 +71,78 @@ export default function NodePage() {
<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>
{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("mb-2")}>
<ProgressBar
label="Storage"
value={node.rdd.data.rootused}
max={node.rdd.data.roottotal}
formatFn={formatBytes}
<View style={tw.style("flex-1")}>
<Gauge
label="Down"
value={`${formatBytes(node.rdd.data.netin)}/s`}
/>
</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"
)}
</View>
)}
</View>
</Card>
<Card label="LXC Containers">
{sortedLXCs.map((lxc) => (
<Link
key={lxc.vmid}
href={{
pathname: "/nodes/[name]/lxc/[vmid]",
params: { name: nodeName, vmid: lxc.vmid },
}}
style={tw.style("m-2")}
>
{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"
)}
<ResourceListItem type="LXC" resource={lxc} />
</Link>
))}
</Card>
<Card label="Virtual Machine">
{sortedVMs.map((vm) => (
<Link
key={vm.vmid}
href={{
pathname: "/nodes/[node]/lxc/[vmid]",
params: { node: nodeName, vmid: vm.vmid },
}}
style={tw.style("m-2")}
>
{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>
<ResourceListItem type="QEMU" resource={vm} />
</Link>
))}
</Card>
</ScrollView>
);
}