FIX: Correct alarm filtering logic in alert boxes (#2017)

* FIX: update alarm filter in node page * FIX: update alarm filter in control page
stereum-dev · Aug 29, 2024 · ac7bcee · ac7bcee
1 parent 1e6c987
commit ac7bcee
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 79 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1800,6 +1800,10 @@ video {
   height: 50px;
 }
 
+.h-\[53px\]{
+  height: 53px;
+}
+
 .h-\[554px\]{
   height: 554px;
 }
@@ -5013,6 +5017,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-zinc-700{
+  --tw-shadow-color: #3f3f46;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-zinc-800{
   --tw-shadow-color: #27272a;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5617,6 +5626,11 @@ html body {
   background-color: rgb(43 48 52 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-\[\#2f5a50\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 90 80 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-\[\#325e5a\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(50 94 90 / var(--tw-bg-opacity));

diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -6,22 +6,16 @@
         <SidebarSection />
       </div>
       <div class="col-start-2 col-end-17 w-full h-full">
-        <NodeSection
-          @open-expert="openExpertModal"
-          @open-log="openLogPage"
-          @export-setup="exportSetup"
-        />
+        <NodeSection @open-expert="openExpertModal" @open-log="openLogPage" @export-setup="exportSetup" />
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
         <NetworkStatus />
         <ServiceSection @open-expert="openExpertModal" @open-logs="openLogPage" />
       </div>
       <div class="col-start-21 col-end-25 px-1 flex flex-col justify-between">
-        <div
-          class="h-[60px] self-center w-full flex flex-col justify-center items-center"
-        >
+        <div class="h-[60px] self-center w-full flex flex-col justify-center items-center">
           <button
-            class="w-full h-[34px] rounded-full bg-[#264744] hover:bg-[#325e5a] px-2 py-1 text-gray-200 active:scale-95 shadow-md shadow-zinc-800 active:shadow-none transition-all duration-200 ease-in-out uppercase flex justify-center items-center"
+            class="info-toggle-btn w-full h-[34px] rounded-full bg-[#264744] hover:bg-[#325e5a] px-2 py-1 text-gray-200 active:scale-95 shadow-md shadow-zinc-800 active:shadow-none transition-all duration-200 ease-in-out uppercase flex justify-center items-center"
             @click="alarmToggle"
             @mouseenter="
               footerStore.cursorLocation = nodeStore.infoAlarm
@@ -30,11 +24,7 @@
             "
             @mouseleave="footerStore.cursorLocation = ''"
           >
-            <img
-              class="w-8"
-              src="/img/icon/node-page-icons/access-tutorial-icon.png"
-              alt="information"
-            />
+            <img class="w-8" src="/img/icon/node-page-icons/access-tutorial-icon.png" alt="information" />
           </button>
         </div>
         <AlertSection :info-aralm="nodeStore.infoAlarm" />
@@ -47,11 +37,7 @@
         @export-all-log="updateAndExportAllLogs"
         @export-customized-logs="updateAndExportAllLogs"
       />
-      <ExpertWindow
-        v-if="isExpertModeOpen"
-        :item="expertModeClient"
-        @hide-modal="closeExpertMode"
-      />
+      <ExpertWindow v-if="isExpertModeOpen" :item="expertModeClient" @hide-modal="closeExpertMode" />
     </div>
 
     <!-- End Node main layout -->
@@ -150,8 +136,6 @@ onUnmounted(() => {
 
 //*************  Methods *************
 
-
-
 //get all configs and services
 const nodeSetupsPrepration = () => {
   setupStore.allSetups.forEach((s) => (s.isActive = false));
@@ -192,10 +176,7 @@ const checkForListingKeys = async () => {
     serviceStore.installedServices &&
     serviceStore.installedServices.length > 0 &&
     serviceStore.installedServices.some(
-      (s) =>
-        s.category === "validator" &&
-        s.state === "running" &&
-        (!s.config.keys || !s.config.keys.length > 0)
+      (s) => s.category === "validator" && s.state === "running" && (!s.config.keys || !s.config.keys.length > 0)
     )
   ) {
     clearInterval(pollingListingKeys);
@@ -209,11 +190,7 @@ const updateConnectionStats = async () => {
   controlStore.ipAddress = stats.ipAddress;
 };
 const updateServiceLogs = async () => {
-  if (
-    serviceStore.installedServices &&
-    serviceStore.installedServices.length > 0 &&
-    headerStore.refresh
-  ) {
+  if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
     const data = await ControlService.getServiceLogs({ logs_tail: 150 });
     nodeStore.serviceLogs = data;
   }
@@ -228,13 +205,9 @@ const updateAndExportAllLogs = async (client) => {
     until: nodeStore.untilDateParsDays,
   });
 
-  const fileName = `${client.name}_${
-    nodeStore.isExportCustomizedDateLoading ? "customized" : "all"
-  }_logs.txt`;
+  const fileName = `${client.name}_${nodeStore.isExportCustomizedDateLoading ? "customized" : "all"}_logs.txt`;
   const data = [...nodeStore.allLogsForExp.logs].reverse();
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 
@@ -246,11 +219,7 @@ const updateAndExportAllLogs = async (client) => {
 
 const updateServerVitals = async () => {
   try {
-    if (
-      serviceStore.installedServices &&
-      serviceStore.installedServices.length > 0 &&
-      headerStore.refresh
-    ) {
+    if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
       const data = await ControlService.getServerVitals();
       controlStore.cpu = data.cpu;
       controlStore.availDisk = data.availDisk;
@@ -286,18 +255,12 @@ const exportLogs = async (client) => {
     (service) => service.config?.serviceID === client.config?.serviceID
   );
 
-  const fileName = nodeStore.exportLogs
-    ? `${client.name}_150_logs.txt`
-    : `${client.name}_all_logs.txt`;
+  const fileName = nodeStore.exportLogs ? `${client.name}_150_logs.txt` : `${client.name}_all_logs.txt`;
 
   // Select the data based on the condition
-  const data = nodeStore.exportLogs
-    ? currentService.logs.slice(-150).reverse()
-    : currentService.logs.reverse();
+  const data = nodeStore.exportLogs ? currentService.logs.slice(-150).reverse() : currentService.logs.reverse();
 
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 };

diff --git a/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue b/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
@@ -6,26 +6,27 @@
       >
         <div class="icon-line">
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'green'"
             class="status-icon"
-            :class="{ active: perfect }"
+            :class="{
+              filtered: alertShowState !== 'green' && alertShowState !== 'showAll',
+            }"
             @click="alertPicker(perfect ? 'green' : 'showAll')"
           >
             <img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
           </div>
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'yellow'"
             class="status-icon"
-            :class="{ active: warning || pointStatus.length !== 0 }"
+            :class="{
+              filtered: alertShowState !== 'yellow' && alertShowState !== 'showAll',
+            }"
             @click="alertPicker(warning || pointStatus.length !== 0 ? 'yellow' : 'showAll')"
           >
             <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
           </div>
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'red'"
             class="status-icon"
             :class="{
-              active: alarm || notSetAddresses.length !== 0 || synchronizationErrorControl || errorAlarm,
+              filtered: alertShowState !== 'red' && alertShowState !== 'showAll',
             }"
             @click="
               alertPicker(
@@ -651,7 +652,7 @@ export default {
 .icon-line {
   display: flex;
   justify-content: flex-start;
-  padding-top: 4px;
+  padding-top: 2px;
   width: 100%;
   height: 30px;
 }
@@ -662,21 +663,25 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 25%;
   border-radius: 5px;
   margin-right: 5px;
-}
-.active {
-  opacity: 100%;
+  box-sizing: border-box;
+  border: 2px solid #151618;
   cursor: pointer;
 }
-.active:hover {
-  transform: scale(1.1);
+
+.status-icon.filtered {
+  opacity: 30%;
+}
+.status-icon.filtered:hover {
+  opacity: 100%;
 }
 
 .status-icon img {
-  width: 90%;
-  height: 90%;
+  width: 100%;
+  height: 100%;
+  justify-self: center;
+  align-self: center;
 }
 
 .status-message_yellow,

diff --git a/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue b/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue
@@ -33,14 +33,14 @@
       </div>
     </div> -->
 
-    <div
+    <!-- <div
       class="back-button"
       @click="infoAlarm = !infoAlarm"
       @mouseenter="cursorLocation = `${returnStatus}`"
       @mouseleave="cursorLocation = ''"
     >
       <div class="up-arrow"></div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>

diff --git a/launcher/src/components/UI/the-control/ControlAlert.vue b/launcher/src/components/UI/the-control/ControlAlert.vue
@@ -6,28 +6,27 @@
           class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pt-0.5"
         >
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'green'"
             class="icon_alarm"
-            :class="{ active: perfect }"
+            :class="{
+              filtered: alertShowState !== 'green' && alertShowState !== 'showAll',
+            }"
             @click="alertPicker(perfect ? 'green' : 'showAll')"
           >
             <img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
           </div>
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'yellow'"
             class="icon_alarm"
             :class="{
-              active: warning || pointStatus.length !== 0,
+              filtered: alertShowState !== 'yellow' && alertShowState !== 'showAll',
             }"
             @click="alertPicker(warning || pointStatus.length !== 0 ? 'yellow' : 'showAll')"
           >
             <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
           </div>
           <div
-            v-if="alertShowState === 'showAll' || alertShowState === 'red'"
             class="icon_alarm"
             :class="{
-              active: alarm || notSetAddresses.length !== 0 || synchronizationErrorControl || errorAlarm,
+              filtered: alertShowState !== 'red' && alertShowState !== 'showAll',
             }"
             @click="
               alertPicker(
@@ -557,16 +556,17 @@ export default {
   align-items: center;
   box-sizing: border-box;
   margin: 0 1.5px;
-  opacity: 25%;
+  cursor: pointer;
   padding: 2px;
 }
-.active {
-  opacity: 100%;
-  cursor: pointer;
+.icon_alarm.filtered {
+  opacity: 30%;
 }
-.active:hover {
-  transform: scale(1.1);
+
+.icon_alarm.filtered:hover {
+  opacity: 100%;
 }
+
 .icon_alarm img {
   height: 100%;
 }