Add VM schedules pages

package.json

@@ -69,8 +69,8 @@
     "clipboard-polyfill": "4.0.1",
     "cookie": "0.5.0",
     "cookie-universal-nuxt": "2.1.4",
-    "cron-validator": "1.2.0",
-    "cronstrue": "1.95.0",
+    "cron-validator": "1.3.1",
+    "cronstrue": "2.50.0",
     "cross-env": "6.0.3",
     "d3": "7.3.0",
     "d3-selection": "1.4.1",

pkg/harvester/components/FilterVMSchedule.vue

@@ -0,0 +1,119 @@
+<script>
+import { RadioGroup } from '@components/Form/Radio';
+
+export default {
+  name: 'HarvesterFilterVMSchedule',
+
+  components: { RadioGroup },
+
+  props: {
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return { selected: '' };
+  },
+
+  computed: {
+    scheduleOptions() {
+      const options = this.rows.map(r => r.sourceSchedule).filter(r => r);
+
+      return Array.from(new Set(options));
+    },
+  },
+
+  methods: {
+    onSelect(selected) {
+      this.selected = selected;
+      this.filterRows();
+    },
+
+    remove() {
+      this.selected = '';
+      this.filterRows();
+    },
+
+    filterRows() {
+      if (!this.selected) {
+        this.$emit('change-rows', this.rows);
+
+        return;
+      }
+      const filteredRows = this.rows.filter(row => row.sourceSchedule === this.selected);
+
+      this.$emit('change-rows', filteredRows, this.selected);
+    }
+  },
+
+  watch: {
+    rows: {
+      deep:      true,
+      immediate: false,
+      handler() {
+        this.filterRows();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="vm-schedule-filter">
+    <template>
+      <span v-if="selected" class="banner-item bg-warning">
+        {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}<i class="icon icon-close ml-5" @click="remove" />
+      </span>
+    </template>
+
+    <v-popover
+      :trigger="scheduleOptions.length ? 'click' : 'manual'"
+      placement="bottom-end"
+    >
+      <slot name="header">
+        <button ref="actionDropDown" class="btn bg-primary mr-10">
+          <slot name="title">
+            {{ t('harvester.fields.filterSchedule') }}
+          </slot>
+        </button>
+      </slot>
+      <template slot="popover">
+        <div class="filter-popup">
+          <RadioGroup
+            v-model="selected"
+            class="mr-10 ml-10"
+            name="model"
+            :options="scheduleOptions"
+            :labels="scheduleOptions"
+            @input="onSelect"
+          />
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vm-schedule-filter {
+  display: inline-block;
+
+  .banner-item {
+    display: inline-block;
+    font-size: 16px;
+    margin-right: 10px;
+    padding: 6px;
+    border-radius: 2px;
+
+    i {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+}
+.filter-popup {
+  width: max-content;
+}
+
+</style>

pkg/harvester/config/harvester.js

@@ -421,6 +421,7 @@ export function init($plugin, store) {
 
   basicType(
     [
+      HCI.SCHEDULE_VM_BACKUP,
       HCI.BACKUP,
       HCI.SNAPSHOT,
       HCI.VM_SNAPSHOT,
@@ -468,6 +469,20 @@ export function init($plugin, store) {
     exact: false
   });
 
+  configureType(HCI.SCHEDULE_VM_BACKUP, { showListMasthead: false, showConfigView: false });
+  virtualType({
+    labelKey:   'harvester.schedule.label',
+    name:       HCI.SCHEDULE_VM_BACKUP,
+    namespaced: true,
+    weight:     201,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SCHEDULE_VM_BACKUP }
+    },
+    exact:      false,
+    ifHaveType: HCI.SCHEDULE_VM_BACKUP,
+  });
+
   configureType(HCI.BACKUP, { showListMasthead: false, showConfigView: false });
   virtualType({
     labelKey:   'harvester.backup.label',

pkg/harvester/config/labels-annotations.js

@@ -53,4 +53,5 @@ export const HCI = {
   NODE_CPU_MANAGER_UPDATE_STATUS: 'harvesterhci.io/cpu-manager-update-status',
   CPU_MANAGER:                    'cpumanager',
   VM_DEVICE_ALLOCATION_DETAILS:   'harvesterhci.io/deviceAllocationDetails',
+  SVM_BACKUP_ID:                  'harvesterhci.io/svmbackupId',
 };

pkg/harvester/config/table-headers.js

@@ -40,3 +40,40 @@ export const SNAPSHOT_TARGET_VOLUME = {
   sort:      'spec.source.persistentVolumeClaimName',
   formatter: 'SnapshotTargetVolume',
 };
+
+// The column of cron expression volume on VM schedules list page
+export const VM_SCHEDULE_CRON = {
+  name:      'CronExpression',
+  labelKey:  'harvester.tableHeaders.cronExpression',
+  value:     'spec.cron',
+  align:     'center',
+  sort:      'spec.cron',
+  formatter: 'HarvesterCronExpression',
+};
+
+// The column of retain on VM schedules list page
+export const VM_SCHEDULE_RETAIN = {
+  name:     'Retain',
+  labelKey: 'harvester.tableHeaders.retain',
+  value:    'spec.retain',
+  sort:     'spec.retain',
+  align:    'center',
+};
+
+// The column of maxFailure on VM schedules list page
+export const VM_SCHEDULE_MAX_FAILURE = {
+  name:     'MaxFailure',
+  labelKey: 'harvester.tableHeaders.maxFailure',
+  value:    'spec.maxFailure',
+  sort:     'spec.maxFailure',
+  align:    'center',
+};
+
+// The column of type on VM schedules list page
+export const VM_SCHEDULE_TYPE = {
+  name:     'Type',
+  labelKey: 'harvester.tableHeaders.scheduleType',
+  value:    'spec.vmbackup.type',
+  sort:     'spec.vmbackup.type',
+  align:    'center',
+};

pkg/harvester/detail/harvesterhci.io.schedulevmbackup/BackupList.vue

@@ -0,0 +1,130 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import { STATE, NAME, AGE } from '@shell/config/table-headers';
+import { allSettled } from '../../utils/promise';
+import { BACKUP_TYPE } from '../../config/types';
+import { HCI } from '../../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+export default {
+  name: 'BackupList',
+
+  components: { ResourceTable },
+
+  props: {
+    id: {
+      type:     String,
+      required: true,
+    },
+  },
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = await allSettled({ backups: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BACKUP }) });
+
+    this.rows = hash.backups;
+  },
+
+  data() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const schema = this.$store.getters[`${ inStore }/schemaFor`](HCI.BACKUP);
+
+    return {
+      rows: [],
+      schema
+    };
+  },
+
+  computed: {
+    headers() {
+      const cols = [
+        STATE,
+        {
+          ...NAME,
+          width: 400
+        },
+        {
+          name:      'targetVM',
+          labelKey:  'tableHeaders.targetVm',
+          value:     'attachVM',
+          align:     'left',
+          sort:      'attachVM',
+          formatter: 'AttachVMWithName'
+        },
+        {
+          name:      'backupTarget',
+          labelKey:  'tableHeaders.backupTarget',
+          value:     'backupTarget',
+          sort:      'backupTarget',
+          align:     'left',
+          formatter: 'HarvesterBackupTargetValidation'
+        },
+        {
+          name:      'readyToUse',
+          labelKey:  'tableHeaders.readyToUse',
+          value:     'status.readyToUse',
+          sort:      'status.readyToUse',
+          align:     'center',
+          formatter: 'Checked',
+        },
+      ];
+
+      if (this.hasBackupProgresses) {
+        cols.push({
+          name:      'backupProgress',
+          labelKey:  'tableHeaders.progress',
+          value:     'backupProgress',
+          sort:      'backupProgress',
+          align:     'left',
+          formatter: 'HarvesterBackupProgressBar',
+        });
+      }
+      cols.push(AGE);
+
+      return cols;
+    },
+
+    hasBackupProgresses() {
+      return !!this.rows.find(R => R.status?.progress !== undefined);
+    },
+
+    filteredRows() {
+      let r = this.rows.filter(row => row.spec?.type === BACKUP_TYPE.BACKUP);
+
+      if (this.id) {
+        r = r.filter(backup => backup.metadata.annotations?.[HCI_ANNOTATIONS.SVM_BACKUP_ID] === this.id);
+      }
+
+      return r;
+    },
+  },
+};
+</script>
+
+<template>
+  <ResourceTable
+    v-bind="$attrs"
+    :headers="headers"
+    :groupable="false"
+    :rows="filteredRows"
+    :schema="schema"
+    key-field="_key"
+    default-sort-by="age"
+    v-on="$listeners"
+  >
+    <template #col:name="{row}">
+      <td>
+        <span>
+          <n-link
+            v-if="row?.status?.source"
+            :to="row.detailLocation"
+          >
+            {{ row.nameDisplay }}
+          </n-link>
+          <span v-else>
+            {{ row.nameDisplay }}
+          </span>
+        </span>
+      </td>
+    </template>
+  </ResourceTable>
+</template>