Add Dashboard page

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-04 21:26:08 +08:00 · 2024-10-23 17:00:46 +02:00
parent 9b5bdeb85c
commit f8408469f7
27 changed files with 2680 additions and 3 deletions
@@ -0,0 +1,109 @@
+<script>
+import Collapse from '@shell/components/Collapse';
+import PercentageBar from '@shell/components/PercentageBar';
+
+export default {
+  name:       'HarvesterUpgradeProgressList',
+  components: { PercentageBar, Collapse },
+
+  props: {
+    title: {
+      type:    String,
+      default: ''
+    },
+
+    precent: {
+      type:    Number,
+      default: 0
+    },
+
+    list: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+
+  data() {
+    return { open: true };
+  },
+
+  methods: {
+    handleSwitch() {
+      this.open = !this.open;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="bar-list">
+    <h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4>
+    <div>
+      <div>
+        <Collapse :open.sync="open">
+          <template #title>
+            <div class="total-bar">
+              <span class="bar"><PercentageBar :value="precent" preferred-direction="MORE" /></span>
+              <span class="on-off" @click="handleSwitch"> {{ open ? t('harvester.generic.close') : t('harvester.generic.open') }}</span>
+            </div>
+          </template>
+
+          <template>
+            <div class="custom-content">
+              <div v-for="item in list" :key="item.name" class="item">
+                <p>{{ item.name }} <span class="status" :class="{ [item.state]: true }">{{ item.state }}</span></p>
+                <PercentageBar :value="item.percent" preferred-direction="MORE" />
+                <p class="warning">
+                  {{ item.message }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </Collapse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar-list {
+  .float-r {
+    float: right;
+  }
+
+  .total-bar {
+    display: flex;
+    user-select: none;
+    .bar {
+      width: 85%;
+    }
+    .on-off {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+  .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);
+      }
+    }
+  }
+}
+
+</style>