Merge pull request #2989 from threefoldtech/development_2.6_node_stat…

…istics Node statistics UI
threefoldtech · Jun 25, 2024 · c4c73fb · c4c73fb
2 parents 3db714d + edfc0eb
commit c4c73fb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/packages/playground/src/components/statistics_card.vue b/packages/playground/src/components/statistics_card.vue
@@ -1,22 +1,20 @@
 <template>
-  <div class="my-2 mx-2 text-center">
-    <v-card color="primary" class="py-2">
-      <div class="d-flex align-center justify-center items-center font-weight-medium">
-        <v-icon class="mr-2" size="small">{{ item.icon }} </v-icon>
-        <span>
-          {{ item.title }}
-        </span>
-      </div>
+  <v-card color="primary" class="py-2 text-center flex-grow-1">
+    <div class="font-weight-medium">
+      <v-icon class="mr-2" size="small">{{ item.icon }} </v-icon>
+      <span>
+        {{ item.title }}
+      </span>
+    </div>
 
-      <v-divider class="mt-1" />
+    <v-divider class="mt-1" />
 
-      <v-card-text class="card-body"> {{ item.data }} </v-card-text>
-    </v-card>
-  </div>
+    <v-card-text class="card-body"> {{ item.data }} </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts" setup>
-import type { IStatistics as IStatistics } from "../types";
+import type { IStatistics } from "../types";
 
 defineProps<{
   item: IStatistics;

diff --git a/packages/playground/src/views/stats.vue b/packages/playground/src/views/stats.vue
@@ -14,8 +14,8 @@
           </v-col>
         </v-row>
       </div>
-      <v-card class="pa-5">
-        <v-row>
+      <v-card class="d-flex">
+        <v-row align="center" class="pa-5">
           <v-col color="red" v-if="failed">
             <v-alert type="error" variant="tonal">
               Failed to get stats data after 3 attempts, Feel free to contact the support team or try again later.
@@ -24,14 +24,21 @@
               </v-btn>
             </v-alert>
           </v-col>
-          <v-col xl="6" lg="6" md="12" cols="12" class="mx-auto mt-15 pr-2">
+          <v-col cols="12" md="8">
             <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
           </v-col>
-          <v-divider class="main_divider mx-1 my-4" vertical></v-divider>
-          <v-col v-if="Istats.length !== 0" class="d-flex flex-wrap justify-start">
-            <v-col v-for="item of Istats" :key="item.title" xl="4" lg="6" md="6" cols="12" class="px-0 py-0">
-              <StatisticsCard :item="item" />
-            </v-col>
+          <v-col v-if="Istats.length !== 0" cols="12" md="4">
+            <v-row>
+              <v-col
+                v-for="(item, index) of Istats"
+                :key="item.title"
+                :cols="index === Istats.length - 1 ? 12 : 6"
+                :md="index === Istats.length - 1 ? 12 : 6"
+                class="d-flex flex-grow-1"
+              >
+                <StatisticsCard :item="item" />
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-card>