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

Added LXC resource page

Browse Source
This commit is contained in:
niku
2023-03-21 22:45:56 +01:00
parent 4a997778e6
commit c66d035a1c
10 changed files with 212 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/nodes/[node]/lxc/[vmid]/console.tsx
View File

@ -14,21 +14,20 @@ function buildConsoleUrl(domain: string, node: string, vmid: string) {
}
export default function QEMUResourceConsolePage() {
const { name, vmid } = useSearchParams<{ name: string; vmid: string }>();
const { node, vmid } = useSearchParams<{ node: string; vmid: string }>();
const { domain, ticketData } = useAuthStore();
console.log({ ticketData }, buildConsoleUrl(domain, node, vmid));
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
source={{
uri: buildConsoleUrl(domain, name, vmid),
uri: buildConsoleUrl(domain, node, vmid),
headers: {
Cookie: `PVEAuthCookie=${ticketData.data.ticket}`,
CSRFPreventionToken: ticketData.data.CSRFPreventionToken,
Accept:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
},
}}
allowsFullscreenVideo={true}
scalesPageToFit={false}
injectedJavaScript={`
const meta = document.createElement('meta');

137
app/nodes/[node]/lxc/[vmid]/index.tsx
View File

@ -1,23 +1,128 @@
import { View, Text } from "react-native";
import { useRouter, useSearchParams } from "expo-router";
import { useMemo } from "react";
import { View, Text, TouchableHighlight, ScrollView } from "react-native";
import Icon from "@expo/vector-icons/Feather";
import tw from "twrnc";
import Card from "../../../../../components/Card";
import { Gauge } from "../../../../../components/Gauge";
import ProgressBar from "../../../../../components/ProgressBar";
import { useNode } from "../../../../../hooks/useNode";
import { useResource } from "../../../../../hooks/useResource";
import { formatBytes } from "../../../../../lib/helper/format";
export default function LXCResourcePage() {
return (
<View>
<View
style={tw.style("bg-white m-2 p-3 rounded-lg border border-slate-200")}
>
<Text>Currently not supported</Text>
</View>
const router = useRouter();
const { node, vmid } = useSearchParams<{ node: string; vmid: string }>();
const { rddData, config } = useResource(node, "lxc", vmid);
const { lxc: lxcs } = useNode(node);
<Text style={tw.style("ml-6 mt-4")}>Config</Text>
<View
style={tw.style("bg-white m-2 p-1 rounded-lg border border-slate-200")}
const status = useMemo(() => {
if (lxcs.isSuccess) {
return lxcs.data.find((lxc) => lxc.vmid.toString() === vmid);
}
}, [lxcs]);
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(
"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>
<TouchableHighlight
style={tw.style("m-2 rounded-lg bg-slate-800")}
onPress={() =>
router.push({
pathname: "/nodes/[node]/lxc/[vmid]/console",
params: { node, vmid },
})
}
>
<Text style={tw.style("px-2 py-7 flex flex-row text-center")}>
Currently not supported
</Text>
</View>
</View>
<View style={tw.style("flex flex-row m-4 items-center justify-center")}>
<Icon name="terminal" size={22} style={tw.style("mr-2 text-white")} />
<Text style={tw.style("text-white")}>Open terminal</Text>
</View>
</TouchableHighlight>
<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>
);
}