Added LXC resource page

hooks/useNode.ts

@@ -1,7 +1,7 @@
 import { useQueries, useQuery } from "react-query";
 import useAuthStore from "../stores/useAuthStore";
 
-export type ResourceType = "LXC" | "QEMU";
+export type ResourceType = "lxc" | "qemu";
 
 export interface NodeResource {
   status: "stopped" | "running";
@@ -18,7 +18,7 @@ export interface NodeStatus {
   kversion: string;
 }
 
-export interface NodeRDD {
+export interface NodeRddData {
   netin: number;
   netout: number;
   rootused: number;
@@ -30,17 +30,17 @@ export interface NodeRDD {
 
 export function useNode(name: string) {
   const http = useAuthStore((state) => state.http);
-  const [rdd, status, lxc, qemu] = useQueries([
+  const [rddData, status, lxc, qemu] = useQueries([
     {
-      queryKey: ["nodes", name, "rdd"],
+      queryKey: ["nodes", name, "rddData"],
       queryFn: () =>
-        http.get<{ data: NodeRDD[] }>(`/api2/json/nodes/${name}/rrddata`, {
+        http.get<{ data: NodeRddData[] }>(`/api2/json/nodes/${name}/rrddata`, {
           params: {
             timeframe: "hour",
           },
         }),
       enabled: !!name,
-      select: (data): NodeRDD => data.data.data.at(-1),
+      select: (data): NodeRddData => data.data.data.at(-1),
     },
     {
       queryKey: ["nodes", name, "status"],
@@ -66,7 +66,7 @@ export function useNode(name: string) {
   ]);
 
   return {
-    rdd,
+    rddData,
     status,
     lxc,
     qemu,

hooks/useNodes.ts

@@ -21,22 +21,6 @@ export function useNodes() {
     ["nodes"],
     async () => {
       return http.get<GetNodeResp>("/api2/json/nodes");
-      // return {
-      //   data: {
-      //     data: [
-      //       {
-      //         cpu: 0.0166442953020134,
-      //         mem: 21713018880,
-      //         maxmem: 29306216448,
-      //         uptime: 4854322,
-      //         status: "online",
-      //         maxcpu: 12,
-      //         node: "pve",
-      //       },
-      //     ] as ProxmoxNode[],
-      //   },
-      //   isSuccess: true,
-      // };
     },
     { select: (data) => data.data.data, refetchInterval: 6000 }
   );

hooks/useResource.ts

@@ -0,0 +1,52 @@
+import { useQueries } from "react-query";
+import useAuthStore from "../stores/useAuthStore";
+import { ResourceType } from "./useNode";
+
+interface ResourceRddData {
+  cpu: number;
+  disk: number;
+  maxdisk: number;
+  mem: number;
+  maxmem: number;
+  netin: number;
+  netout: number;
+}
+
+export function useResource(
+  node: string,
+  type: ResourceType,
+  vmid: string | number
+) {
+  console.log({ node, type, vmid });
+  const http = useAuthStore((state) => state.http);
+  const [rddData, config] = useQueries([
+    {
+      queryKey: ["nodes", node, type, vmid, "rdd"],
+      queryFn: () =>
+        http.get<{ data: ResourceRddData[] }>(
+          `/api2/json/nodes/${node}/${type}/${vmid}/rrddata`,
+          {
+            params: {
+              timeframe: "hour",
+            },
+          }
+        ),
+      enabled: !!(node && vmid),
+      select: (data): ResourceRddData => data.data.data.at(-1),
+    },
+    {
+      queryKey: ["nodes", node, type, vmid, "config"],
+      queryFn: () =>
+        http.get<{ data: object }>(
+          `/api2/json/nodes/${node}/${type}/${vmid}/config`
+        ),
+      enabled: !!(node && vmid),
+      select: (data): object => data.data.data,
+    },
+  ]);
+
+  return {
+    rddData,
+    config,
+  };
+}

hooks/useTicket.ts

@@ -19,7 +19,7 @@ export async function createTicket({
   username,
   password,
 }: CreateTicketOpts) {
-  const url = `${domain}/api2/json/access/ticket`;
+  const url = new URL("/api2/json/access/ticket", domain).toString();
   const headers = { "Content-Type": "application/json" };
   return axios.post<CreateTicketResp>(url, { username, password }, { headers });
 }