From ac7bcee6c24d903509e7251c44a2d913202a3c0b Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:26:17 +0200
Subject: [PATCH 1/3] FIX: Correct alarm filtering logic in alert boxes (#2017)

* FIX: update alarm filter in node page

* FIX: update alarm filter in control page
---
 launcher/public/output.css                    | 14 +++++
 .../components/UI/node-page/NodeScreen.vue    | 63 ++++---------------
 .../node-page/components/alert/NodeAlert.vue  | 35 ++++++-----
 .../components/alert/NodeTutorial.vue         |  4 +-
 .../UI/the-control/ControlAlert.vue           | 24 +++----
 5 files changed, 61 insertions(+), 79 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 6ad9d34d79..913994ac7e 100755
--- 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
index a649eb9670..1549846808 100755
--- 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
index 03a87ce3fe..ce4ac9b741 100755
--- 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
index 3f02e32295..3d9697324c 100755
--- 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
index 46955b0c21..17f0805d70 100755
--- 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%;
 }

From 95be7ba7d7fa0a3aef588df6df97559fd8ada080 Mon Sep 17 00:00:00 2001
From: NeoPlays <80448387+NeoPlays@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:45:48 +0200
Subject: [PATCH 2/3] Update UpdatePanel.vue

---
 .../UI/base-header/components/modals/UpdatePanel.vue        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue b/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
index c9e8374f1d..e0103ff5eb 100755
--- a/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
+++ b/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
@@ -184,7 +184,7 @@
                   class="w-full h-[28px] flex justify-center items-center p-1 space-x-4 border-b border-gray-500 bg-teal-800"
                 >
                   <div class="w-5 h-5 bg-[#243d36] rounded-full p-1">
-                    <img class="w-3" src="/img/icon/base-header-icons/header-update-button-green.png" alt="icon" />
+                    <img class="w-3" src="/img/icon/base-header-icons/header-update-button-green.png" alt="icon" @click="copyUpdates"/>
                   </div>
                   <span class="text-center text-sm text-gray-300 font-semibold">{{
                     $t("updatePanel.availablePlugin")
@@ -326,6 +326,10 @@ const searchUpdate = () => {
   useUpdateCheck();
 };
 
+const copyUpdates = () => {
+  navigator.clipboard.writeText(serviceStore.newUpdates.map(u => "- " + u.name + " to " + u.version).join("\n"));
+};
+
 const checkStereumUpdate = computed(() => {
   if (headerStore.stereumUpdate && headerStore.stereumUpdate.version)
     return headerStore.stereumUpdate.commit != headerStore.stereumUpdate.current_commit ? true : false;

From 6363bb6eb26294c92e4e653a28a1360421cc8d9e Mon Sep 17 00:00:00 2001
From: NeoPlays <80448387+NeoPlays@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:49:32 +0200
Subject: [PATCH 3/3] ADD: Stereum Version and OS Updates to copy paste (#2020)

---
 .../UI/base-header/components/modals/UpdatePanel.vue     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue b/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
index e0103ff5eb..79c0735d34 100755
--- a/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
+++ b/launcher/src/components/UI/base-header/components/modals/UpdatePanel.vue
@@ -327,7 +327,14 @@ const searchUpdate = () => {
 };
 
 const copyUpdates = () => {
-  navigator.clipboard.writeText(serviceStore.newUpdates.map(u => "- " + u.name + " to " + u.version).join("\n"));
+  let string = serviceStore.newUpdates.map(u => "- " + u.name + " to " + u.version).join("\n")
+  if(checkStereumUpdate.value){
+    string += "\n- Stereum to " + headerStore.stereumUpdate.version
+  }
+  if(serverStore.numberOfUpdatablePackages && serverStore.numberOfUpdatablePackages > 0){
+    string += "\n- OS Updates"
+  }
+  navigator.clipboard.writeText(string);
 };
 
 const checkStereumUpdate = computed(() => {