Enhance stats data (#3728)

* feat: reformat ssd capacity * fix(stats/store): get the stats url form the env * chore(dasbord/stats:store): use urljoin * chore(stats/cach):update dummy data * chore: apply ssd reformat on dashboard/stats * chore(stats):reformat ssd value * chore(stats):fix build --------- Co-authored-by: kassem <[email protected]>
threefoldtech · Dec 9, 2024 · 0c0f60a · 0c0f60a
1 parent aff636e
commit 0c0f60a
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 70 deletions.
diff --git a/packages/playground/src/components/connect_wallet_landing.vue b/packages/playground/src/components/connect_wallet_landing.vue
@@ -95,7 +95,7 @@ export default {
       pageTitle,
       DashboardRoutes,
       stats: computed(() => statsStore.stats),
-      statsUrl: window.env.STATS_URL || "https://stats.grid.tf",
+      statsUrl: window.env.STATS_URL,
       baseUrl,
     };
   },
@@ -107,6 +107,7 @@ export default {
   .v-col {
     flex-basis: auto !important;
   }
+
   .home_text {
     width: auto !important;
   }

diff --git a/packages/playground/src/components/logged_in_landing.vue b/packages/playground/src/components/logged_in_landing.vue
@@ -164,16 +164,19 @@ export default {
 .card-opacity {
   background-color: rgba(125, 227, 200, 0.12);
 }
+
 @media (max-width: 768px) {
   .responsive-div {
-    min-height: 220px !important; /* Adjust height for mobile */
+    min-height: 220px !important;
+    /* Adjust height for mobile */
   }
 }
 
 @media only screen and (max-width: 600px) {
   .v-col {
     flex-basis: auto !important;
   }
+
   .v-card-title {
     white-space: normal !important;
   }

diff --git a/packages/playground/src/stores/stats.ts b/packages/playground/src/stores/stats.ts
@@ -1,38 +1,43 @@
 import { defineStore } from "pinia";
-import { computed } from "vue";
-
-import { useAsync } from "@/hooks";
-const url = window.env.STATS_URL || "https://stats.grid.tf";
+import urlJoin from "url-join";
+import { ref } from "vue";
+interface StateData {
+  label: string;
+  value: string;
+  image: string;
+}
 
 export const useStatsStore = defineStore("stats-store", () => {
-  const res = useAsync(() => fetch(url + "/api/stats-summary").then(resp => resp.json()), {
-    init: true,
-  });
-  const data = computed(() => res.value.data);
-  const stats = computed(() => [
-    {
-      label: "SSD Capacity",
-      value: data.value?.ssd,
-      image: "capacity.png",
-    },
-    {
-      label: "Nodes",
-      value: data.value?.nodes,
-      image: "nodes.png",
-    },
-    {
-      label: "Countries",
-      value: data.value?.countries,
-      image: "countries.png",
-    },
-    {
-      label: "Cores",
-      value: data.value?.cores,
-      image: "cores.png",
-    },
-  ]);
-  return {
-    data,
-    stats,
-  };
+  const stats = ref<StateData[]>([]);
+  window.$$monitorLock
+    .then(() => fetch(urlJoin(window.env.STATS_URL, "/api/stats-summary")))
+    .then(res => res.json())
+    .then(data => {
+      stats.value = [
+        {
+          label: "SSD Capacity",
+          value: data.ssd,
+          image: "capacity.png",
+        },
+        {
+          label: "Nodes",
+          value: data.nodes,
+          image: "nodes.png",
+        },
+        {
+          label: "Countries",
+          value: data.countries,
+          image: "countries.png",
+        },
+        {
+          label: "Cores",
+          value: data.cores,
+          image: "cores.png",
+        },
+      ];
+    })
+    .catch(error => {
+      console.error("Failed to fetch stats", error);
+    });
+  return { stats };
 });
diff --git a/packages/playground/src/utils/format_resource_size.ts b/packages/playground/src/utils/format_resource_size.ts
@@ -50,20 +50,19 @@ function formatSpeed(val: number) {
   return Math.round(val);
 }
 
-export function toTeraOrGigaStats(sizeInBytes: number) {
+export function formatNumberWithCommas(sizeInBytes: number) {
   const giga = 1024 ** 3;
 
   if (!sizeInBytes) return "0 GB";
 
-  const val = +sizeInBytes;
-  if (val === 0 || isNaN(val)) return "0 GB";
+  const gb = Math.round(sizeInBytes / giga).toString();
 
-  const gb = val / giga;
-
-  if (gb < 100) {
-    return gb.toFixed(2) + " GB";
+  let res = "";
+  let count = 0;
+  for (let i = gb.length - 1; i >= 0; i--) {
+    res = gb[i] + res;
+    count++;
+    if (count % 3 === 0 && i !== 0) res = "," + res;
   }
-
-  const tb = gb / 1024;
-  return tb.toFixed(2) + " TB";
+  return res + " GB";
 }
diff --git a/packages/playground/src/views/stats.vue b/packages/playground/src/views/stats.vue
@@ -44,7 +44,7 @@
 import { NodeStatus, type Stats as GridProxyStats } from "@threefold/gridproxy_client";
 import { onMounted, ref } from "vue";
 
-import formatResourceSize, { toTeraOrGigaStats } from "@/utils/format_resource_size";
+import formatResourceSize, { formatNumberWithCommas } from "@/utils/format_resource_size";
 
 import { gridProxyClient } from "../clients";
 import StatisticsCard from "../components/statistics_card.vue";
@@ -134,7 +134,7 @@ const fetchData = async () => {
         { data: stats!.farms, title: "Farms", icon: "mdi-tractor" },
         { data: stats!.countries, title: "Countries", icon: "mdi-earth" },
         { data: stats!.totalCru, title: "CPUs", icon: "mdi-cpu-64-bit" },
-        { data: toTeraOrGigaStats(stats!.totalSru), title: "SSD Storage", icon: "mdi-nas" },
+        { data: formatNumberWithCommas(stats!.totalSru), title: "SSD Storage", icon: "mdi-nas" },
         { data: formatResourceSize(stats!.totalMru), title: "RAM", icon: "mdi-memory" },
         { data: stats!.gpus, title: "GPUs", icon: "mdi-memory" },
         { data: stats!.accessNodes, title: "Access Nodes", icon: "mdi-gate" },

diff --git a/packages/stats/nginx/njs/cache.js b/packages/stats/nginx/njs/cache.js
@@ -16,7 +16,7 @@ function isLessThan24Hours(timestamp) {
 
 const DUMMY_DATA = {
   capacity: "17.46 PB",
-  ssd: "6800.54 TB",
+  ssd: "8,108,670 GB",
   nodes: 2081,
   countries: 52,
   cores: 59828,

diff --git a/packages/stats/nginx/njs/stats.js b/packages/stats/nginx/njs/stats.js
@@ -84,7 +84,7 @@ function mergeStatsData(stats) {
 
   const result = {};
   result.capacity = toTeraOrGiga(res.totalHru + res.totalSru);
-  result.ssd = toTeraOrGigaStats(res.totalSru);
+  result.ssd = formatNumberWithCommas(res.totalSru);
   result.nodes = res.nodes;
   result.countries = res.countries;
   result.cores = res.totalCru;
@@ -137,22 +137,24 @@ function toTeraOrGiga(value) {
   return gb.toFixed(2) + " PB";
 }
 
-function toTeraOrGigaStats(value) {
+function formatNumberWithCommas(value) {
   const giga = 1024 ** 3;
 
   if (!value) return "0 GB";
 
   const val = +value;
   if (val === 0 || isNaN(val)) return "0 GB";
 
-  const gb = val / giga;
+  const gb = Math.round(val / giga).toString();
 
-  if (gb < 100) {
-    return gb.toFixed(2) + " GB";
+  let res = "";
+  let count = 0;
+  for (let i = gb.length - 1; i >= 0; i--) {
+    res = gb[i] + res;
+    count++;
+    if (count % 3 === 0 && i !== 0) res = "," + res;
   }
-
-  const tb = gb / 1024;
-  return tb.toFixed(2) + " TB";
+  return res + " GB";
 }
 
 // Exporting the main function for Nginx

diff --git a/packages/stats/src/components/stats_table.vue b/packages/stats/src/components/stats_table.vue
@@ -51,7 +51,7 @@ import { computed, type PropType, type Ref, ref, watch } from "vue";
 
 import type { IStatistics, NetworkStats } from "../types/index";
 import { formatData, getStats } from "../utils/stats";
-import toTeraOrGigaOrPeta, { toTeraOrGigaStats } from "../utils/toTeraOrGegaOrPeta";
+import toTeraOrGigaOrPeta, { formatNumberWithCommas } from "../utils/toTeraOrGegaOrPeta";
 import StatisticsCard from "./statistics_card.vue";
 
 const props = defineProps({
@@ -83,7 +83,7 @@ const Istats = computed((): IStatistics[] => {
       { data: formattedStats.value.countries, title: "Countries", icon: "mdi-earth" },
       { data: formattedStats.value.totalCru, title: "CPUs", icon: "mdi-cpu-64-bit" },
       { data: formattedStats.value.gpus, title: "GPUs", icon: "mdi-memory" },
-      { data: toTeraOrGigaStats(formattedStats.value.totalSru.toString()), title: "SSD Storage", icon: "mdi-nas" },
+      { data: formatNumberWithCommas(formattedStats.value.totalSru), title: "SSD Storage", icon: "mdi-nas" },
       { data: toTeraOrGigaOrPeta(formattedStats.value.totalMru.toString()), title: "RAM", icon: "mdi-memory" },
       { data: formattedStats.value.accessNodes, title: "Access Nodes", icon: "mdi-gate" },
       { data: formattedStats.value.gateways, title: "Gateways", icon: "mdi-boom-gate-outline" },

diff --git a/packages/stats/src/utils/toTeraOrGegaOrPeta.ts b/packages/stats/src/utils/toTeraOrGegaOrPeta.ts
@@ -20,20 +20,19 @@ export default function toTeraOrGiga(value?: string) {
   return `${gb.toFixed(2)} PB`;
 }
 
-export function toTeraOrGigaStats(value?: string) {
+export function formatNumberWithCommas(sizeInBytes: number) {
   const giga = 1024 ** 3;
 
-  if (!value) return "0 GB";
+  if (!sizeInBytes) return "0 GB";
 
-  const val = +value;
-  if (val === 0 || isNaN(val)) return "0 GB";
-
-  const gb = val / giga;
+  const gb = Math.round(sizeInBytes / giga).toString();
 
-  if (gb < 100) {
-    return gb.toFixed(2) + " GB";
+  let res = "";
+  let count = 0;
+  for (let i = gb.length - 1; i >= 0; i--) {
+    res = gb[i] + res;
+    count++;
+    if (count % 3 === 0 && i !== 0) res = "," + res;
   }
-
-  const tb = gb / 1024;
-  return tb.toFixed(2) + " TB";
+  return res + " GB";
 }