From ed328262a3ab2c5068944c638e426692eab6d74b Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:43:06 +0200
Subject: [PATCH] fix the bug of not loaded icons in the alert component
 (#1419)

* fix the Some Icons are not loading in the Alert component in the node page

* fix the missing icons in the control page alert

* fix the ams comp.

* fix dialog
---
 .../UI/the-control/AmsterdamComponent.vue     |  2 +-
 .../UI/the-control/ControlAlert.vue           | 20 +++++++++++--
 .../UI/the-control/TooltipDialog.vue          |  2 +-
 .../src/components/UI/the-node/NodeAlert.vue  | 30 ++++++++++++++++---
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
index d117f260b..5c54403a7 100644
--- a/launcher/src/components/UI/the-control/AmsterdamComponent.vue
+++ b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -33,7 +33,7 @@
               }"
               @mouseenter="
                 (cursorLocation = `the current epoch: ${currentResult.currentEpoch} and the slot number is ${
-                  n.slotNumber === 0 ? 'null' : n.slotNumber
+                  n.slotNumber === 0 ? 'N/A' : n.slotNumber
                 }`),
                   dialogOpen(currentResult.currentEpoch, n.slotNumber, n.slotStatus),
                   (epochType = 'proposed ')
diff --git a/launcher/src/components/UI/the-control/ControlAlert.vue b/launcher/src/components/UI/the-control/ControlAlert.vue
index ebbbc6e02..d161ab29c 100644
--- a/launcher/src/components/UI/the-control/ControlAlert.vue
+++ b/launcher/src/components/UI/the-control/ControlAlert.vue
@@ -123,11 +123,11 @@
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box">
-            <img :src="item.sIcon" alt="warn_storage" />
+            <img :src="iconFilter(item)" alt="warn_storage" />
           </div>
           <div class="message">
             <div class="main-message" @click="showUpdate">
-              <span>{{ item.name }} UPDATE</span>
+              <span>{{ nameFilter(item) }} UPDATE</span>
             </div>
             <div class="val-message">
               <span>{{ item.version }}</span>
@@ -265,6 +265,22 @@ export default {
     this.cpuMeth();
   },
   methods: {
+    nameFilter(arg) {
+      if (arg.name === "PrometheusNodeExporter") {
+        return "Node Exporter";
+      } else {
+        return arg.name;
+      }
+    },
+    iconFilter(arg) {
+      if (arg.name === "PrometheusNodeExporter") {
+        return "/img/icon/plugin-icons/Other/PrometheusNodeExporter-s.png";
+      } else if (arg.name === "Notification") {
+        return "/img/icon/plugin-icons/Other/NotifierService-s.png";
+      } else {
+        return arg.sIcon;
+      }
+    },
     expertHandler(el) {
       let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
       selectedObject.expertOptionsModal = true;
diff --git a/launcher/src/components/UI/the-control/TooltipDialog.vue b/launcher/src/components/UI/the-control/TooltipDialog.vue
index 4ddb69af5..d21a502ad 100644
--- a/launcher/src/components/UI/the-control/TooltipDialog.vue
+++ b/launcher/src/components/UI/the-control/TooltipDialog.vue
@@ -13,7 +13,7 @@
             green: status == 'proposed',
             red: status == 'missed',
           }"
-          >{{ slot == 0 ? "null" : formatValues(slot) }}</span
+          >{{ slot == 0 ? "N/A" : formatValues(slot) }}</span
         >
       </div>
     </div>
diff --git a/launcher/src/components/UI/the-node/NodeAlert.vue b/launcher/src/components/UI/the-node/NodeAlert.vue
index 700b8dc9a..c6fc85d4c 100644
--- a/launcher/src/components/UI/the-node/NodeAlert.vue
+++ b/launcher/src/components/UI/the-node/NodeAlert.vue
@@ -137,11 +137,11 @@
         @click="showUpdate"
       >
         <div class="message-icon">
-          <img :src="item.sIcon" alt="warn_storage" />
+          <img :src="iconFilter(item)" alt="warn_storage" />
         </div>
-        <div class="message-text_container">
+        <div class="message-text_container update-items">
           <div class="main-message">
-            <span>{{ item.name }} UPDATE</span>
+            <span>{{ nameFilter(item) }} UPDATE</span>
           </div>
           <div class="val-message">
             <span>{{ item.version }}</span>
@@ -154,7 +154,7 @@
 
 <script>
 import ControlService from "@/store/ControlService";
-import { useControlStore } from "../../../store/theControl";
+import { useControlStore } from "@/store/theControl";
 import { mapWritableState } from "pinia";
 import { useNodeHeader } from "@/store/nodeHeader";
 import { useServices } from "@/store/services";
@@ -203,6 +203,7 @@ export default {
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
     }),
+
     usedPercInt() {
       return parseInt(this.usedPerc);
     },
@@ -233,6 +234,7 @@ export default {
         }
         return update;
       });
+      console.log("updatedUpdates", updatedUpdates);
       return updatedUpdates;
     },
   },
@@ -278,6 +280,22 @@ export default {
     this.cpuMeth();
   },
   methods: {
+    nameFilter(arg) {
+      if (arg.name === "PrometheusNodeExporter") {
+        return "Node Exporter";
+      } else {
+        return arg.name;
+      }
+    },
+    iconFilter(arg) {
+      if (arg.name === "PrometheusNodeExporter") {
+        return "/img/icon/plugin-icons/Other/PrometheusNodeExporter-s.png";
+      } else if (arg.name === "Notification") {
+        return "/img/icon/plugin-icons/Other/NotifierService-s.png";
+      } else {
+        return arg.sIcon;
+      }
+    },
     expertHandler(el) {
       let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
       selectedObject.expertOptionsModal = true;
@@ -375,6 +393,10 @@ export default {
 </script>
 
 <style scoped>
+.update-items {
+  height: 90% !important;
+  justify-content: center !important;
+}
 .pointer {
   cursor: pointer;
 }