From d5cd97aafd5211c4a4f1f01ac4d5b5eaf0d8c53a Mon Sep 17 00:00:00 2001
From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 15:23:32 +0800
Subject: [PATCH] Fix upgrade cluster model styles (backport #162) (#257)

* fix upgrade model style

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit ff439e66a9c7335b02ba4a4b16e09b85579c9a7c)

* change overallMessage color to red

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit 50901a2eaf0dc35efcd36d7b30bbba08e8c3e6c4)

---------

Co-authored-by: andy.lee <andy.lee@suse.com>
---
 .../components/HarvesterUpgradeHeader.vue     |  9 +-
 .../HarvesterUpgradeProgressBarList.vue       | 89 +++++++++----------
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/pkg/harvester/components/HarvesterUpgradeHeader.vue b/pkg/harvester/components/HarvesterUpgradeHeader.vue
index 0805d396..015b515a 100644
--- a/pkg/harvester/components/HarvesterUpgradeHeader.vue
+++ b/pkg/harvester/components/HarvesterUpgradeHeader.vue
@@ -190,6 +190,7 @@ export default {
       v-clean-tooltip="{
         placement: 'bottom-left',
       }"
+      popper-class="upgrade-header-dropdown"
       class="hand"
     >
       <slot name="button-content">
@@ -272,7 +273,7 @@ export default {
 
           <p
             v-if="overallMessage"
-            class="text-warning mb-20"
+            class="text-error mb-20"
           >
             {{ overallMessage }}
           </p>
@@ -338,6 +339,12 @@ export default {
   </div>
 </template>
 
+<style lang="scss">
+.upgrade-header-dropdown .v-popper__arrow-container {
+  display: none;
+}
+</style>
+
 <style lang="scss" scoped>
 a {
   float: right;
diff --git a/pkg/harvester/components/HarvesterUpgradeProgressBarList.vue b/pkg/harvester/components/HarvesterUpgradeProgressBarList.vue
index 46f100c7..d5ef71ca 100644
--- a/pkg/harvester/components/HarvesterUpgradeProgressBarList.vue
+++ b/pkg/harvester/components/HarvesterUpgradeProgressBarList.vue
@@ -12,7 +12,7 @@ export default {
       default: ''
     },
 
-    precent: {
+    percent: {
       type:    Number,
       default: 0
     },
@@ -39,16 +39,18 @@ export default {
 
 <template>
   <div class="bar-list">
-    <h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4>
+    <h4>{{ title }} <span class="float-r text-info">{{ percent }}%</span></h4>
     <div>
       <div>
         <Collapse v-model:open="open">
           <template #title>
             <div class="total-bar">
-              <span class="bar"><PercentageBar
-                :model-value="precent"
-                preferred-direction="MORE"
-              /></span>
+              <span class="bar">
+                <PercentageBar
+                  :model-value="percent"
+                  preferred-direction="MORE"
+                />
+              </span>
               <span
                 class="on-off"
                 @click="handleSwitch"
@@ -56,28 +58,26 @@ export default {
             </div>
           </template>
 
-          <template>
-            <div class="custom-content">
-              <div
-                v-for="(item, i) in list"
-                :key="i"
-              >
-                <p>
-                  {{ item.name }} <span
-                    class="status"
-                    :class="{ [item.state]: true }"
-                  >{{ item.state }}</span>
-                </p>
-                <PercentageBar
-                  :model-value="item.percent"
-                  preferred-direction="MORE"
-                />
-                <p class="warning">
-                  {{ item.message }}
-                </p>
-              </div>
+          <div class="custom-content">
+            <div
+              v-for="(item, i) in list"
+              :key="i"
+            >
+              <p>
+                {{ item.name }} <span
+                  class="status"
+                  :class="{ [item.state]: true }"
+                >{{ item.state }}</span>
+              </p>
+              <PercentageBar
+                :model-value="item.percent"
+                preferred-direction="MORE"
+              />
+              <p class="warning">
+                {{ item.message }}
+              </p>
             </div>
-          </template>
+          </div>
         </Collapse>
       </div>
     </div>
@@ -93,7 +93,7 @@ export default {
   .total-bar {
     display: flex;
     user-select: none;
-    .bar {
+    > .bar {
       width: 85%;
     }
     .on-off {
@@ -102,25 +102,22 @@ export default {
     }
   }
   .custom-content {
-    .item {
-      margin-bottom: 14px;
-      p {
-        margin-bottom: 4px;
-      }
-      .status {
-        float: right;
-      }
-      .Succeeded, .Upgrading, .Pending {
-        color: var(--success);
-      }
-      .failed {
-        color: var(--error)
-      }
-      .warning {
-        color: var(--error);
-      }
+    margin-bottom: 14px;
+    p {
+      margin-bottom: 4px;
+    }
+    .status {
+      float: right;
+    }
+    .Succeeded, .Upgrading, .Pending {
+      color: var(--success);
+    }
+    .failed {
+      color: var(--error)
+    }
+    .warning {
+      color: var(--error);
     }
   }
 }
-
 </style>