Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-06 22:26: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,236 @@
+<script>
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import MessageLink from '@shell/components/MessageLink';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { HCI } from '../types';
+import { allSettled } from '../utils/promise';
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+import { BACKUP_TYPE } from '../config/types';
+
+export default {
+  name:       'HarvesterListBackup',
+  components: {
+    ResourceTable, Banner, Loading, Masthead, MessageLink
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = await allSettled({
+      vms:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+      settings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
+      rows:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BACKUP }),
+    });
+
+    this.rows = hash.rows;
+    this.settings = hash.settings;
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.SETTING)) {
+      const backupTargetResource = hash.settings.find( (O) => O.id === 'backup-target');
+      const isEmpty = this.getBackupTargetValueIsEmpty(backupTargetResource);
+
+      if (backupTargetResource && !isEmpty) {
+        this.testConnect();
+      }
+    }
+  },
+
+  data() {
+    const params = { ...this.$route.params };
+
+    const resource = params.resource;
+
+    return {
+      rows:     [],
+      settings: [],
+      resource,
+      to:       `${ HCI.SETTING }/backup-target?mode=edit`,
+    };
+  },
+
+  methods: {
+    async testConnect() {
+      try {
+        const url = this.$store.getters['harvester-common/getHarvesterClusterUrl']('v1/harvester/backuptarget/healthz');
+
+        await this.$store.dispatch('harvester/request', { url });
+      } catch (err) {
+        if (err?._status === 400 || err?._status === 503) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: err.errors[0]
+          }, { root: true });
+        }
+      }
+    },
+
+    getBackupTargetValueIsEmpty(resource) {
+      let out = true;
+
+      if (resource?.value) {
+        try {
+          const valueJson = JSON.parse(resource?.value);
+
+          out = !valueJson.type;
+        } catch (e) {}
+      }
+
+      return out;
+    }
+  },
+
+  computed: {
+    headers() {
+      const cols = [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:      'targetVM',
+          labelKey:  'tableHeaders.targetVm',
+          value:     'attachVM',
+          align:     'left',
+          formatter: 'AttachVMWithName'
+        },
+        {
+          name:      'backupTarget',
+          labelKey:  'tableHeaders.backupTarget',
+          value:     'backupTarget',
+          align:     'left',
+          formatter: 'HarvesterBackupTargetValidation'
+        },
+        {
+          name:      'readyToUse',
+          labelKey:  'tableHeaders.readyToUse',
+          value:     'status.readyToUse',
+          align:     'left',
+          formatter: 'Checked',
+        },
+      ];
+
+      if (this.hasBackupProgresses) {
+        cols.push({
+          name:      'backupProgress',
+          labelKey:  'tableHeaders.progress',
+          value:     'backupProgress',
+          align:     'left',
+          formatter: 'HarvesterBackupProgressBar',
+          width:     200,
+        });
+      }
+
+      cols.push(AGE);
+
+      return cols;
+    },
+
+    hasBackupProgresses() {
+      return !!this.rows.find((R) => R.status?.progress !== undefined);
+    },
+
+    filteredRows() {
+      return this.rows.filter((R) => R.spec?.type !== BACKUP_TYPE.SNAPSHOT);
+    },
+
+    backupTargetResource() {
+      return this.settings.find( (O) => O.id === 'backup-target');
+    },
+
+    isEmptyValue() {
+      return this.getBackupTargetValueIsEmpty(this.backupTargetResource);
+    },
+
+    canUpdate() {
+      return this?.backupTargetResource?.canUpdate;
+    },
+
+    errorMessage() {
+      return this.backupTargetResource?.errMessage;
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :create-button-label="t('harvester.backup.createText')"
+    />
+
+    <Banner
+      v-if="(errorMessage || isEmptyValue) && canUpdate"
+      color="error"
+    >
+      <MessageLink
+        v-if="isEmptyValue"
+        :to="to"
+        prefix-label="harvester.backup.message.noSetting.prefix"
+        middle-label="harvester.backup.message.noSetting.middle"
+        suffix-label="harvester.backup.message.noSetting.suffix"
+      />
+
+      <MessageLink
+        v-else
+        :to="to"
+        prefix-label="harvester.backup.message.errorTip.prefix"
+        middle-label="harvester.backup.message.errorTip.middle"
+      >
+        <template v-slot:suffix>
+          {{ t('harvester.backup.message.errorTip.suffix') }} {{ errorMessage }}
+        </template>
+      </MessageLink>
+    </Banner>
+
+    <div v-else-if="canUpdate">
+      <Banner
+        color="info"
+      >
+        <MessageLink
+          :to="to"
+          prefix-label="harvester.backup.message.viewSetting.prefix"
+          middle-label="harvester.backup.message.viewSetting.middle"
+          suffix-label="harvester.backup.message.viewSetting.suffix"
+        />
+      </Banner>
+    </div>
+
+    <ResourceTable
+      v-bind="$attrs"
+      :headers="headers"
+      :groupable="true"
+      :rows="filteredRows"
+      :schema="schema"
+      key-field="_key"
+      default-sort-by="age"
+      v-on="$listeners"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span>
+            <router-link
+              v-if="row.status && row.status.source"
+              :to="row.detailLocation"
+            >
+              {{ row.nameDisplay }}
+            </router-link>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+          </span>
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>