Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-04 13:16:05 +08:00 · 2024-10-23 17:00:46 +02:00
parent f8408469f7
commit 4f2688f6ab
265 changed files with 42316 additions and 82 deletions
@@ -0,0 +1,94 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import VolumeState from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  components: { VolumeState, ProgressBarMulti },
+  props:      {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    warningMessage() {
+      return this.row.relatedPV?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_ERROR];
+    },
+
+    rebuildStatus() {
+      return this.row.longhornEngine?.status?.rebuildStatus;
+    },
+
+    isRebuilding() {
+      return this.rebuildStatus && Object.keys(this.rebuildStatus).length > 0;
+    },
+
+    percentage() {
+      if (!this.isRebuilding) {
+        return;
+      }
+
+      const rebuildStatus = Object.values(this.rebuildStatus)?.[0];
+      const value = rebuildStatus?.progress;
+
+      return [{
+        value,
+        color: 'bg-warning'
+      }];
+    },
+
+    rebuildingMessage() {
+      return this.$store.getters['i18n/t']('harvester.volume.rebuildingMessage', { percentage: this.percentage[0].value });
+    }
+  },
+};
+</script>
+
+<template>
+  <span>
+    <div>
+      <ProgressBarMulti
+        v-if="isRebuilding"
+        v-clean-tooltip="rebuildingMessage"
+        :values="percentage"
+        :min="0"
+        :max="100"
+        class="mb-10"
+      />
+    </div>
+    <div class="state">
+      <VolumeState :row="row" />
+      <v-popover
+        v-if="!!warningMessage"
+        trigger="hover"
+        offset="16"
+      >
+        <span class="tooltip-target">
+          <i class="icon icon-warning icon-lg text-warning" />
+        </span>
+
+        <template slot="popover">
+          <p class="warning-message">
+            {{ warningMessage }}
+          </p>
+        </template>
+      </v-popover>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+.warning-message:first-letter {
+  text-transform: uppercase;
+}
+
+</style>