Add Dashboard page

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-04 05:06:05 +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,235 @@
+<script>
+import { mapGetters } from 'vuex';
+import { allHash } from '@shell/utils/promise';
+import { Checkbox } from '@components/Form/Checkbox';
+import ModalWithCard from '@shell/components/ModalWithCard';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Banner } from '@components/Banner';
+import { HCI } from '../types';
+import UpgradeInfo from './UpgradeInfo';
+export default {
+  name: 'HarvesterUpgrade',
+
+  components: {
+    Checkbox, ModalWithCard, LabeledSelect, Banner, UpgradeInfo
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const res = await allHash({
+      upgradeVersion: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
+      versions:       this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VERSION }),
+      upgrade:        this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.UPGRADE }),
+    });
+
+    this.upgrade = res.upgrade;
+  },
+
+  data() {
+    return {
+      upgrade:          [],
+      upgradeMessage:   [],
+      errors:           '',
+      selectMode:       true,
+      version:          '',
+      enableLogging:    true,
+      readyReleaseNote: false
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    versionOptions() {
+      const versions = this.$store.getters['harvester/all'](HCI.VERSION);
+
+      return versions.map(V => V.metadata.name);
+    },
+
+    currentVersion() {
+      const serverVersion = this.$store.getters['harvester/byId'](HCI.SETTING, 'server-version');
+
+      return serverVersion.currentVersion || '';
+    },
+
+    canEnableLogging() {
+      return this.$store.getters['harvester/schemaFor'](HCI.UPGRADE_LOG);
+    },
+
+    releaseLink() {
+      return `https://github.com/harvester/harvester/releases/tag/${ this.version }`;
+    }
+  },
+
+  watch: {
+    upgrade: {
+      handler(neu) {
+        let upgradeMessage = [];
+        const list = neu || [];
+
+        const currentResource = list.find( O => !!O.isLatestUpgrade);
+
+        upgradeMessage = currentResource ? currentResource.upgradeMessage : [];
+
+        this.$set(this, 'upgradeMessage', upgradeMessage);
+      },
+      deep: true
+    },
+
+    version() {
+      this.readyReleaseNote = false;
+    }
+  },
+
+  methods: {
+    async handleUpgrade() {
+      const upgradeValue = {
+        type:     HCI.UPGRADE,
+        metadata: {
+          generateName: 'hvst-upgrade-',
+          namespace:    'harvester-system'
+        },
+        spec: { version: this.version }
+      };
+
+      if (this.canEnableLogging) {
+        upgradeValue.spec.logEnabled = this.enableLogging;
+      }
+
+      const proxyResource = await this.$store.dispatch('harvester/create', upgradeValue);
+
+      try {
+        await proxyResource.save();
+
+        this.cancel();
+      } catch (err) {
+        if (err?.message !== '') {
+          this.errors = err.message;
+        }
+      }
+    },
+
+    cancel() {
+      this.$refs.deleteTip.hide();
+      this.errors = '';
+    },
+
+    open() {
+      this.$refs.deleteTip.open();
+    },
+  }
+};
+</script>
+
+<template>
+  <div v-if="currentCluster">
+    <header class="header-layout header mb-0">
+      <h1>
+        <t
+          k="harvester.dashboard.header"
+          :cluster="currentCluster.nameDisplay"
+        />
+      </h1>
+      <button v-if="versionOptions.length" type="button" class="btn bg-warning btn-sm" @click="open">
+        <t k="harvester.upgradePage.upgrade" />
+      </button>
+    </header>
+
+    <ModalWithCard ref="deleteTip" name="deleteTip" :width="850">
+      <template #title>
+        <t k="harvester.upgradePage.upgradeApp" />
+      </template>
+
+      <template #content>
+        <UpgradeInfo :version="version" />
+
+        <div class="currentVersion mb-15">
+          <span> <t k="harvester.upgradePage.currentVersion" /> </span>
+          <span class="version">{{ currentVersion }}</span>
+        </div>
+
+        <div>
+          <LabeledSelect
+            v-model="version"
+            class="mb-10"
+            :label="t('harvester.upgradePage.versionLabel')"
+            :options="versionOptions"
+            :clearable="true"
+          />
+
+          <div v-if="canEnableLogging" class="mb-5">
+            <Checkbox v-model="enableLogging" class="check" type="checkbox" :label="t('harvester.upgradePage.enableLogging')" />
+          </div>
+
+          <div v-if="version">
+            <p v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)" class="mb-10"></p>
+
+            <Checkbox v-model="readyReleaseNote" class="check" type="checkbox" label-key="harvester.upgradePage.checkReady" />
+          </div>
+
+          <Banner v-if="errors.length" color="warning">
+            {{ errors }}
+          </Banner>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="footer">
+          <button class="btn role-secondary mr-20" @click.prevent="cancel">
+            <t k="generic.close" />
+          </button>
+          <button :disabled="!readyReleaseNote" class="btn role-tertiary bg-primary" @click.prevent="handleUpgrade">
+            <t k="harvester.upgradePage.upgrade" />
+          </button>
+        </div>
+      </template>
+    </ModalWithCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .footer {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .banner-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .banner-content {
+    display: flex;
+  }
+
+  .banner-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 15px;
+  }
+
+  .icon {
+    font-size: 20px;
+    width: 20px;
+    line-height: 23px;
+  }
+
+  .currentVersion {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    .version {
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+</style>