Improve No Data Visualization (#1938)

stereum-dev · Jul 12, 2024 · e783117 · e783117
1 parent ac4187f
commit e783117
Show file tree

Hide file tree

Showing 11 changed files with 348 additions and 202 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -2571,11 +2571,6 @@ video {
           appearance: none;
 }
 
-.auto-cols-max{
-  grid-auto-columns: -webkit-max-content;
-  grid-auto-columns: max-content;
-}
-
 .grid-flow-row{
   grid-auto-flow: row;
 }
@@ -2862,6 +2857,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2886,12 +2887,6 @@ video {
   margin-bottom: calc(1px * var(--tw-space-y-reverse));
 }
 
-.space-y-3 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .divide-x > :not([hidden]) ~ :not([hidden]){
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));

diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -2,11 +2,11 @@
   <div class="amsterdam-parent">
     <div
       class="icoTitle"
-      @mouseenter="cursorLocation = `${footerInfo} ${currentNetwork?.name}`"
+      @mouseenter="cursorLocation = `${footerInfo} ${getSetupNetwork?.name}`"
       @mouseleave="cursorLocation = ''"
     >
       <div class="icoContainer">
-        <img :src="networkIcon" />
+        <img :src="getSetupNetwork?.icon" />
       </div>
       <span>{{ $t("controlPage.node") }}</span>
     </div>
@@ -19,16 +19,9 @@
         </div>
       </div>
       <no-data
-        v-else-if="
-          consensusClientIsOff || prometheusIsOff || installedServicesController !== ''
-        "
-        :service-cat="
-          installedServicesController !== ''
-            ? 'install'
-            : prometheusIsOff
-            ? 'prometheus'
-            : ''
-        "
+        v-else-if="missingServices.length > 0 || !isConsensusRunning || prometheusIsOff"
+        @mouseenter="cursorLocation = `${nodataMessage}`"
+        @mouseleave="cursorLocation = ''"
       />
       <div v-else class="box-wrapper">
         <div class="proposed-part">
@@ -115,6 +108,7 @@ import { useControlStore } from "@/store/theControl";
 import { useServices } from "@/store/services";
 import ControlService from "@/store/ControlService";
 import NoData from "./NoData.vue";
+import { useSetups } from "@/store/setups";
 
 export default {
   components: {
@@ -133,13 +127,14 @@ export default {
       proposed: [],
       polling: {},
       loadingStrater: false,
-      prometheusIsOff: false,
+      // prometheusIsOff: false,
       consensusClientIsOff: false,
     };
   },
   computed: {
     ...mapState(useNodeManage, {
       currentNetwork: "currentNetwork",
+      networkList: "networkList",
     }),
     ...mapState(useServices, {
       installedServices: "installedServices",
@@ -152,6 +147,9 @@ export default {
       slot: "slot",
       status: "status",
       installedServicesController: "installedServicesController",
+      missingServices: "missingServices",
+      prometheusIsOff: "prometheusIsOff",
+      nodataMessage: "nodataMessage",
     }),
     ...mapWritableState(useControlStore, {
       currentSlotData: "currentSlotData",
@@ -161,10 +159,11 @@ export default {
       consensusName: "consensusName",
       pageNumber: "pageNumber",
     }),
+    ...mapState(useSetups, {
+      selectedSetup: "selectedSetup",
+    }),
     proposedBlock() {
-
-      if (this.currentNetwork.id === 3) {
-
+      if (this.selectedSetup?.network === "gnosis") {
         return Array.from({ length: 16 }, () => ({
           slotNumber: 0,
           slotStatus: "pending",
@@ -176,6 +175,14 @@ export default {
         }));
       }
     },
+    getSetupNetwork() {
+      let setupNet;
+      const net = this.selectedSetup?.network;
+      if (net && this.networkList) {
+        setupNet = this.networkList.find((network) => network.network === net);
+      }
+      return setupNet;
+    },
 
     networkIcon() {
       return this.currentNetwork?.network ? this.currentNetwork?.icon : this.defaultIcon;
@@ -207,6 +214,11 @@ export default {
   },
 
   watch: {
+    selectedSetup(newVal, oldVal) {
+      if (newVal?.network !== oldVal?.network) {
+        this.currentEpochSlot(this.consensusName);
+      }
+    },
     installedServices() {
       this.serviceController(this.installedServices);
       this.serviceStateController(this.consensusName, "consensusClientIsOff");
@@ -291,43 +303,33 @@ export default {
     },
 
     refreshTimer() {
+      const intervalTime = this.selectedSetup?.network === "gnosis" ? 5000 : 11000;
 
-      if (this.currentNetwork.id === 3) {
-
-        this.polling = setInterval(() => {
-          if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
-            this.currentEpochSlot(this.consensusName);
-          }
-        }, 5000);
-      } else {
-        this.polling = setInterval(() => {
-          if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
-            this.currentEpochSlot(this.consensusName);
-          }
-        }, 12000);
-      }
+      this.polling = setInterval(() => {
+        if (this.currentSlotData && this.currentEpochData) {
+          this.currentEpochSlot(this.consensusName);
+        }
+      }, intervalTime);
     },
     refreshHandling() {
       this.currentResult = {};
       clearInterval(this.polling);
       this.currentEpochSlot(this.consensusName);
     },
 
-    initializeProposedBlock() {
-
-      if (this.currentNetwork.id === 3) {
-
-        return Array.from({ length: 16 }, () => ({
-          slotNumber: 0,
-          slotStatus: "pending",
-        }));
-      } else {
-        return Array.from({ length: 32 }, () => ({
-          slotNumber: 0,
-          slotStatus: "pending",
-        }));
-      }
-    },
+    // initializeProposedBlock() {
+    //   if (this.selectedSetup.network === "gnosis") {
+    //     return Array.from({ length: 16 }, () => ({
+    //       slotNumber: 0,
+    //       slotStatus: "pending",
+    //     }));
+    //   } else {
+    //     return Array.from({ length: 32 }, () => ({
+    //       slotNumber: 0,
+    //       slotStatus: "pending",
+    //     }));
+    //   }
+    // },
     async currentEpochSlot() {
       try {
         let res = await ControlService.getCurrentEpochSlot(this.consensusName);

diff --git a/launcher/src/components/UI/the-control/ControlDashboard.vue b/launcher/src/components/UI/the-control/ControlDashboard.vue
@@ -1,56 +1,95 @@
 <template>
   <div class="ctrlParent gap-1 p-1">
     <div class="machineName_cell">
-      <machine-name @mouseenter="cursorLocation = `${machineName}`" @mouseleave="cursorLocation = ''" />
+      <machine-name
+        @mouseenter="cursorLocation = `${machineName}`"
+        @mouseleave="cursorLocation = ''"
+      />
     </div>
     <div class="node-serve">
-      <EpochSlot />
+      <EpochSlot
+        @mouseenter="footerSetter('current EPOCH & current SLOT')"
+        @mouseleave="cursorLocation = ''"
+      />
+    </div>
+    <div class="sandFull_cell">
+      <TheBalance
+        @mouseenter="footerSetter('Finalized EPOCH & Balance')"
+        @mouseleave="cursorLocation = ''"
+      />
     </div>
-    <div class="sandFull_cell"><TheBalance /></div>
     <dashboard-card class="hard-disk">
-      <the-hard @mouseenter="cursorLocation = `${storVol}`" @mouseleave="cursorLocation = ''" />
+      <the-hard
+        @mouseenter="cursorLocation = `${storVol}`"
+        @mouseleave="cursorLocation = ''"
+      />
     </dashboard-card>
     <dashboard-card class="storage"
-      ><the-storage @mouseenter="cursorLocation = `${stor}`" @mouseleave="cursorLocation = ''"
+      ><the-storage
+        @mouseenter="cursorLocation = `${stor}`"
+        @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="disk-speed"
-      ><disk-speed @mouseenter="cursorLocation = `${diskSpeed}`" @mouseleave="cursorLocation = ''"
+      ><disk-speed
+        @mouseenter="cursorLocation = `${diskSpeed}`"
+        @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="p2p">
-      <peer-to-peer @mouseenter="cursorLocation = `${p2p}`" @mouseleave="cursorLocation = ''" />
+      <peer-to-peer @mouseenter="footerSetter(p2p)" @mouseleave="cursorLocation = ''" />
       <!-- <newPeerToPeer /> -->
     </dashboard-card>
     <dashboard-card class="the-cpu">
-      <the-cpu @mouseenter="cursorLocation = `${cpuUse}`" @mouseleave="cursorLocation = ''" />
+      <the-cpu
+        @mouseenter="cursorLocation = `${cpuUse}`"
+        @mouseleave="cursorLocation = ''"
+      />
     </dashboard-card>
     <dashboard-card class="amsterdam">
       <amsterdam-component />
     </dashboard-card>
     <dashboard-card class="sync-status"
-      ><sync-status @mouseenter="cursorLocation = `${syncInfo}`" @mouseleave="cursorLocation = ''"
+      ><sync-status
+        @mouseenter="cursorLocation = `${syncInfo}`"
+        @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="validatorComment_cell">
       <the-staking />
     </dashboard-card>
     <dashboard-card class="the-ram">
-      <the-ram @mouseenter="cursorLocation = `${ramUse}`" @mouseleave="cursorLocation = ''"
+      <the-ram
+        @mouseenter="cursorLocation = `${ramUse}`"
+        @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="the-network"
-      ><the-network @mouseenter="cursorLocation = `${netSpeed}`" @mouseleave="cursorLocation = ''"
+      ><the-network
+        @mouseenter="cursorLocation = `${netSpeed}`"
+        @mouseleave="cursorLocation = ''"
     /></dashboard-card>
     <dashboard-card class="portlist_card">
-      <port-list @mouseenter="cursorLocation = `${listPort}`" @mouseleave="cursorLocation = ''" />
+      <port-list
+        @mouseenter="cursorLocation = `${listPort}`"
+        @mouseleave="cursorLocation = ''"
+      />
       <!-- <SubscribedSubnets /> -->
     </dashboard-card>
     <div class="half-card">
-      <rpc-endpoint @mouseenter="cursorLocation = `RPC ${endPoint}`" @mouseleave="cursorLocation = ''" />
+      <rpc-endpoint
+        @mouseenter="cursorLocation = `RPC ${endPoint}`"
+        @mouseleave="cursorLocation = ''"
+      />
     </div>
     <div class="half-card2">
-      <ws-endpoint @mouseenter="cursorLocation = `WS ${endPoint}`" @mouseleave="cursorLocation = ''" />
+      <ws-endpoint
+        @mouseenter="cursorLocation = `WS ${endPoint}`"
+        @mouseleave="cursorLocation = ''"
+      />
     </div>
 
     <div class="half-card3">
-      <data-api @mouseenter="cursorLocation = `${data} API`" @mouseleave="cursorLocation = ''" />
+      <data-api
+        @mouseenter="cursorLocation = `${data} API`"
+        @mouseleave="cursorLocation = ''"
+      />
     </div>
   </div>
 </template>
@@ -119,8 +158,14 @@ export default {
   computed: {
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
+      nodataMessage: "nodataMessage",
     }),
   },
+  methods: {
+    footerSetter(arg) {
+      this.cursorLocation = this.nodataMessage === "" ? arg : this.nodataMessage;
+    },
+  },
 };
 </script>