Merge pull request #2641 from threefoldtech/development_2.5_unify_nod…

…e_resources Unify node resources
threefoldtech · May 2, 2024 · 8158f28 · 8158f28
2 parents 8c5a3db + 5e0e3fb
commit 8158f28
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 71 deletions.
diff --git a/packages/playground/src/components/node_resources.vue b/packages/playground/src/components/node_resources.vue
@@ -0,0 +1,41 @@
+<template>
+  <v-row justify="center">
+    <div v-for="item in resources" :key="item.name" class="mx-6 d-flex flex-column pt-2 mt-2 align-center">
+      <div class="mb-2">{{ item.name }}</div>
+      <div class="text-center">
+        <v-progress-circular :model-value="item.value !== 'NaN' ? item.value : 0" :size="150" :width="15" color="info">
+          {{ item.value !== "NaN" ? item.value + "%" : "N/A" }}
+        </v-progress-circular>
+      </div>
+    </div>
+  </v-row>
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { computed, type PropType } from "vue";
+
+const RESOURCES = ["cru", "mru", "sru", "hru"] as const;
+const NAMED_RESOURCES = { cru: "CPU", mru: "RAM", sru: "SSD", hru: "HDD" } as const;
+
+export default {
+  name: "NodeResources",
+  props: {
+    node: { type: Object as PropType<GridNode>, required: true },
+  },
+  setup(props) {
+    const resources = computed(() => {
+      return RESOURCES.map(id => {
+        const value = Reflect.get(props.node.used_resources, id) / Reflect.get(props.node.total_resources, id);
+        return {
+          id,
+          value: (value * 100).toFixed(2),
+          name: NAMED_RESOURCES[id],
+        };
+      });
+    });
+
+    return { resources };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_resources_charts.vue b/packages/playground/src/components/node_resources_charts.vue
@@ -15,21 +15,7 @@
       </v-col>
     </v-row>
 
-    <v-row justify="center">
-      <div v-for="item in resources" :key="item.name" class="mx-6 d-flex flex-column pt-2 mt-2 align-center">
-        <div class="mb-2">{{ item.name }}</div>
-        <div class="text-center">
-          <v-progress-circular
-            :model-value="item.value !== 'NaN' ? item.value : 0"
-            :size="150"
-            :width="15"
-            color="info"
-            :indeterminate="indeterminate"
-            >{{ item.value !== "NaN" ? item.value + "%" : "N/A" }}
-          </v-progress-circular>
-        </div>
-      </div>
-    </v-row>
+    <NodeResources :node="node" />
 
     <v-row justify="center">
       <div class="d-flex my-6 align-center justify-center">
@@ -53,7 +39,10 @@ import type { ResourceWrapper } from "@/types";
 import { GrafanaStatistics } from "@/utils/get_metrics_url";
 import { getNodeStatusColor } from "@/utils/get_nodes";
 
+import NodeResources from "./node_resources.vue";
+
 export default {
+  components: { NodeResources },
   props: {
     node: {
       type: Object as PropType<GridNode>,
@@ -68,12 +57,8 @@ export default {
       required: true,
     },
   },
-  async mounted() {
-    this.resources = await this.getNodeResources();
-  },
   setup(props) {
     const resources = ref<ResourceWrapper[]>([]);
-    const renamedResources = ["CPU", "SSD", "HDD", "RAM"];
     const loading = ref<boolean>(false);
     const indeterminate = ref<boolean>(false);
     const getNodeHealthUrl = async () => {
@@ -82,33 +67,11 @@ export default {
       window.open(nodeHealthUrl, "_blank");
     };
 
-    const getNodeResources = async () => {
-      loading.value = true;
-      return ["cru", "sru", "hru", "mru"].map((i, idx) => {
-        let value;
-        if (props.node.stats && props.node.stats.system) {
-          value =
-            ((Reflect.get(props.node.stats.used, i) + Reflect.get(props.node.stats.system, i)) /
-              Reflect.get(props.node.stats.total, i)) *
-            100;
-        } else {
-          value = (Reflect.get(props.node.used_resources, i) / Reflect.get(props.node.total_resources, i)) * 100;
-        }
-        loading.value = false;
-        return {
-          id: idx + 1,
-          value: value.toFixed(2),
-          name: renamedResources[idx],
-        };
-      });
-    };
-
     return {
       NodeStatus,
       resources,
       loading,
       indeterminate,
-      getNodeResources,
       getNodeHealthUrl,
       getNodeStatusColor,
     };

diff --git a/packages/playground/src/dashboard/components/user_nodes.vue b/packages/playground/src/dashboard/components/user_nodes.vue
@@ -46,36 +46,9 @@
               <v-alert class="pa-5" style="height: 20px">
                 <h4 class="text-center font-weight-medium">Resource Units Reserved</h4>
               </v-alert>
-              <v-card-item>
-                <v-row class="mt-5 mb-5">
-                  <v-col v-for="(value, key) in item.raw.total_resources" :key="key" align="center">
-                    <p class="text-center">{{ getKey(key) }}</p>
-                    <v-flex class="text-truncate">
-                      <v-tooltip bottom class="d-none">
-                        <template v-slot:activator="{ props }">
-                          <v-progress-circular
-                            v-bind="props"
-                            :rotate="-90"
-                            :model-value="getPercentage(item.raw, key)"
-                            class="my-3"
-                          />
-                          <template v-if="item.raw.used_resources">
-                            <p v-if="item.raw.total_resources[key] > 1000">
-                              {{ byteToGB(item.raw.used_resources[key]) }} /
-                              {{ byteToGB(item.raw.total_resources[key]) }} GB
-                            </p>
-                            <p v-else-if="item.raw.total_resources[key] == 0">NA</p>
-                            <p v-else>
-                              {{ item.raw.used_resources[key] }} /
-                              {{ item.raw.total_resources[key] }}
-                            </p>
-                          </template>
-                        </template>
-                      </v-tooltip>
-                    </v-flex>
-                  </v-col>
-                </v-row>
-              </v-card-item>
+              <v-card-text class="pb-8">
+                <NodeResources :node="item.raw" />
+              </v-card-text>
             </v-card>
 
             <v-card class="mt-4" v-if="network == 'main'" focusable single model-value>
@@ -131,6 +104,7 @@ import { createCustomToast, ToastType } from "@/utils/custom_toast";
 import { getNodeStatusColor } from "@/utils/get_nodes";
 import { calculateUptime, getNodeAvailability, getNodeMintingFixupReceipts, type NodeInterface } from "@/utils/node";
 
+import NodeResources from "../../components/node_resources.vue";
 import NodeMintingDetails from "./NodeMintingDetails.vue";
 import PublicConfig from "./public_config.vue";
 import SetExtraFee from "./set_extra_fee.vue";
@@ -142,6 +116,7 @@ export default {
     PublicConfig,
     SetExtraFee,
     CardDetails,
+    NodeResources,
   },
   setup() {
     const profileManager = useProfileManager();