merge development

Author: 0oM4R

packages/playground/src/components/node_details.vue

@@ -4,12 +4,17 @@
     transition="dialog-bottom-transition"
     hide-overlay
     attach="#modals"
-    @update:model-value="(val:boolean) => closeDialog(val)"
+    min-height="95%"
+    @update:model-value="(val: boolean) => closeDialog(val)"
     @click:outside="() => $emit('close-dialog', false)"
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
-        <v-btn icon dark @click="() => $emit('close-dialog', false)">
+        <v-btn
+          icon
+          dark
+          @click="() => $emit('close-dialog', false)"
+        >
           <v-icon color="anchor">
             mdi-close
           </v-icon>
@@ -27,37 +32,87 @@
     <template v-else-if="isError">
       <v-card class="d-flex justify-center align-center h-screen">
         <div class="text-center w-100 pa-3">
-          <v-icon variant="tonal" color="error" style="font-size: 50px" icon="mdi-close-circle-outline" />
+          <v-icon
+            variant="tonal"
+            color="error"
+            style="font-size: 50px"
+            icon="mdi-close-circle-outline"
+          />
           <p class="mt-4 mb-4 font-weight-bold text-error">
             {{ errorMessage }}
           </p>
-          <v-btn class="mr-4" text="Try Again" @click="requestNode" />
-          <v-btn color="error" text="Cancel" @click="(val:boolean) => closeDialog(val)" />
+          <v-btn
+            class="mr-4"
+            text="Try Again"
+            @click="requestNode"
+          />
+          <v-btn
+            color="error"
+            text="Cancel"
+            @click="(val: boolean) => closeDialog(val)"
+          />
         </div>
       </v-card>
     </template>
 
     <template v-else>
       <v-card>
-        <node-resources-charts :node="node" :is-live-stats="isLiveStats" :hint-message="errorLoadingStatsMessage" />
-        <v-row class="pa-8 mt-5" justify-md="start" justify-sm="center">
-          <v-col cols="12" md="6" sm="12">
+        <node-resources-charts
+          :node="node"
+          :is-live-stats="isLiveStats"
+          :hint-message="errorLoadingStatsMessage"
+        />
+        <v-row
+          class="pa-8 mt-5"
+          justify-md="start"
+          justify-sm="center"
+        >
+          <v-col
+            cols="12"
+            md="6"
+            sm="12"
+          >
             <node-details-card :node="node" />
-            <farm-details-card class="mt-5" :node="node" />
-            <interfaces-details-card class="mt-5" :node="node" />
+            <farm-details-card
+              class="mt-5"
+              :node="node"
+            />
+            <interfaces-details-card
+              class="mt-5"
+              :node="node"
+            />
             <public-config-details-card
               v-if="node.publicConfig && node.publicConfig.domain"
               class="mt-5"
               :node="node"
             />
 
-            <cpu-benchmark-card v-if="hasActiveProfile && node.healthy" class="mt-5" :node="node" />
+            <cpu-benchmark-card
+              v-if="hasActiveProfile && node.healthy"
+              class="mt-5"
+              :node="node"
+            />
           </v-col>
-          <v-col cols="12" md="6" sm="12">
+          <v-col
+            cols="12"
+            md="6"
+            sm="12"
+          >
             <country-details-card :node="node" />
-            <twin-details-card class="mt-3" :node="node" />
-            <gpu-details-card v-if="node.gpus?.length" class="mt-3" :node="node" />
-            <i-perf-card v-if="hasActiveProfile && node.healthy" class="mt-3" :node="node" />
+            <twin-details-card
+              class="mt-3"
+              :node="node"
+            />
+            <gpu-details-card
+              v-if="node.gpus?.length"
+              class="mt-3"
+              :node="node"
+            />
+            <i-perf-card
+              v-if="hasActiveProfile && node.healthy"
+              class="mt-3"
+              :node="node"
+            />
           </v-col>
         </v-row>
       </v-card>