FIX: peer network style

stereum-dev · Oct 30, 2024 · ad0f222 · ad0f222
1 parent cacdf3e
commit ad0f222
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 100 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -4138,6 +4138,11 @@ video {
   background-color: rgb(54 83 20 / var(--tw-bg-opacity));
 }
 
+.bg-orange-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
+
 .bg-orange-500{
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));

diff --git a/launcher/src/components/UI/control-page/components/fragments/ClientStatus.vue b/launcher/src/components/UI/control-page/components/fragments/ClientStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p2pBarCont">
     <div class="titleVal">
-      <span>{{ props.clientName }}</span>
+      <img class="w-3/4" :src="props.clientIcon" alt="" />
     </div>
     <div class="p2pVal">
       <div class="p2pVal_value" :style="{ width: props.clientVal + '%' }"></div>
@@ -13,8 +13,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
-
 const props = defineProps({
   clientName: {
     type: String,
@@ -28,6 +26,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  clientIcon: {
+    type: String,
+    required: true,
+  },
 });
 </script>
 
@@ -42,9 +44,9 @@ const props = defineProps({
 
 .titleVal {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
-  width: 40%;
+  width: 20%;
   height: 100%;
   font-size: 42%;
   font-weight: 600;

diff --git a/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue b/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue
@@ -1,46 +1,47 @@
 <template>
-  <div class="peer2peerParent">
+  <div class="peer2peerParent flex w-full h-full justify-center items-center relative">
     <no-data
       v-if="!setupStore?.selectedServicePairs || isConsensusMissing || !footerStore.isConsensusRunning"
       @mouseenter="footerStore.cursorLocation = footerStore.nodataMessage"
       @mouseleave="footerStore.cursorLocation = ''"
     />
     <template v-else>
-      <div class="p2pBox">
-        <div class="p2pIco">
-          <div class="p2pIco-container">
-            <img src="/img/icon/control-page-icons/PeerToPeerIcon.svg" alt="Peer to Peer Icon" />
-          </div>
-          <span>{{ t("controlPage.peerNetwork") }}</span>
-        </div>
-        <div class="wrapper">
-          <div class="p2pBarBox">
-            <ClientStatus
-              :client-name="consensusClient"
-              :client-val="consensusValPeer"
-              :client-num="consensusNumPeer"
-              @mouseenter="
-                footerStore.cursorLocation = `${t('controlPage.connectedPairsTo', {
-                  client: consensusClient,
-                  peer: consensusValPeer,
-                })} `
-              "
-              @mouseleave="footerStore.cursorLocation = ''"
-            />
-            <ClientStatus
-              :client-name="executionClient"
-              :client-val="executionValPeer"
-              :client-num="executionNumPeer"
-              @mouseenter="
-                footerStore.cursorLocation = `${t('controlPage.connectedPairsTo', {
-                  client: executionClient,
-                  peer: executionValPeer,
-                })} `
-              "
-              @mouseleave="footerStore.cursorLocation = ''"
-            />
-          </div>
+      <div class="p2pIco w-1/4 h-full flex flex-col justify-center items-center">
+        <div class="p2pIco-container flex justify-center items-center w-full h-4/5 p-2">
+          <img class="w-full" src="/img/icon/control-page-icons/PeerToPeerIcon.svg" alt="Peer to Peer Icon" />
         </div>
+        <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-[40%] font-semibold uppercase">{{
+          t("controlPage.peerNetwork")
+        }}</span>
+      </div>
+
+      <div class="p2pBarBox w-3/4 h-full flex justify-around items-center flex-col pt-1 pb-1">
+        <ClientStatus
+          :client-name="consensusClient"
+          :client-val="consensusValPeer"
+          :client-num="consensusNumPeer"
+          :client-icon="reactiveServiceStates.consensus.icon"
+          @mouseenter="
+            footerStore.cursorLocation = `${t('controlPage.connectedPairsTo', {
+              client: consensusClient,
+              peer: consensusValPeer,
+            })} `
+          "
+          @mouseleave="footerStore.cursorLocation = ''"
+        />
+        <ClientStatus
+          :client-name="executionClient"
+          :client-val="executionValPeer"
+          :client-num="executionNumPeer"
+          :client-icon="reactiveServiceStates.execution.icon"
+          @mouseenter="
+            footerStore.cursorLocation = `${t('controlPage.connectedPairsTo', {
+              client: executionClient,
+              peer: executionValPeer,
+            })} `
+          "
+          @mouseleave="footerStore.cursorLocation = ''"
+        />
       </div>
     </template>
   </div>
@@ -78,18 +79,20 @@ const executionValPeer = computed(() => findPeerDetails("execution", setupStore.
 const executionNumPeer = computed(() => findPeerDetails("execution", setupStore.selectedServicePairs?.executionService?.id).numPeer || 0);
 
 const isConsensusMissing = computed(() => footerStore.missingServices?.includes("consensus"));
+
+const reactiveServiceStates = computed(() => ({
+  execution: {
+    name: setupStore.selectedServicePairs?.executionService?.name || "",
+    icon: setupStore.selectedServicePairs?.executionService?.icon || "",
+  },
+  consensus: {
+    name: setupStore.selectedServicePairs?.consensusService?.name || "",
+    icon: setupStore.selectedServicePairs?.consensusService?.icon || "",
+  },
+}));
 </script>
 
 <style scoped>
-.p2pBarBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  overflow-y: auto;
-}
 .wrapper {
   width: 70%;
   height: 100%;
@@ -108,15 +111,7 @@ const isConsensusMissing = computed(() => footerStore.missingServices?.includes(
   font-weight: 600;
   color: #c1c1c1;
 }
-.peer2peerParent {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  height: 100%;
-  box-sizing: border-box;
-  position: relative;
-}
+
 .p2pTtl {
   width: 100%;
   height: 20%;
@@ -127,43 +122,4 @@ const isConsensusMissing = computed(() => footerStore.missingServices?.includes(
   align-items: center;
   font-size: 50%;
 }
-
-.p2pBox {
-  width: 90%;
-  height: 100%;
-  display: flex;
-  box-sizing: border-box;
-  justify-content: flex-start;
-  align-items: center;
-}
-.p2pIco {
-  box-sizing: border-box;
-  width: 30%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.p2pIco span {
-  width: 100%;
-  height: 20%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 50%;
-  font-weight: bold;
-  color: #c1c1c1;
-}
-.p2pIco-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%;
-}
-.p2pIco-container img {
-  width: 70%;
-  height: 90%;
-}
 </style>
diff --git a/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue b/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue
@@ -109,7 +109,7 @@ const chartOptions = {
     strokeDashArray: 5,
     xaxis: { lines: { show: true } },
     yaxis: { lines: { show: true } },
-    padding: { top: -25, bottom: -5, left: -5, right: -2 },
+    padding: { top: -25, bottom: -7, left: -5, right: -2 },
   },
   stroke: { width: 1, colors: ["#00ff00"], curve: "smooth" },
   fill: {

diff --git a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
@@ -26,7 +26,7 @@
       </div>
       <template v-if="starogeRows">
         <div class="w-full h-3/4 overflow-y-auto scrollable-container pr-1">
-          <div v-for="item in storagestatus" :key="item" class="w-full flex pt-1 pb-1">
+          <div v-for="item in storagestatus" :key="item" class="w-full flex pt-1">
             <div
               :class="getTextColor(getStableColor(item.service))"
               class="text-gray-200 text-2xs border border-gray-600 w-full h-4 pl-1 rounded-md flex justify-between pr-1"

diff --git a/launcher/src/components/UI/node-page/components/service/ClientStatus.vue b/launcher/src/components/UI/node-page/components/service/ClientStatus.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { computed } from "vue";
-import { useSetups } from "../../../../../store/setups";
+import { useSetups } from "@/store/setups";
 
 const props = defineProps({
   client: { type: Object, required: true },