@rancher/shell 0.1.2 → 0.1.4

package/components/nav/HarvesterUpgrade.vue

@@ -1,232 +0,0 @@
-<script>
-import { HCI, NODE } from '@shell/config/types';
-import { allHash } from '@shell/utils/promise';
-import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
-import PercentageBar from '@shell/components/PercentageBar';
-import ProgressBarList from '@shell/components/HarvesterUpgradeProgressBarList';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
-
-export default {
-  name:       'HarvesterUpgrade',
-  components: {
-    PercentageBar, ProgressBarList, BadgeStateFormatter
-  },
-
-  async fetch() {
-    const hash = {};
-
-    if (this.$store.getters['harvester/schemaFor'](HCI.IMAGE)) {
-      hash.images = this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE });
-    }
-
-    if (this.$store.getters['harvester/schemaFor'](HCI.UPGRADE)) {
-      hash.upgrades = this.$store.dispatch('harvester/findAll', { type: HCI.UPGRADE });
-    }
-
-    if (this.$store.getters['harvester/schemaFor'](NODE)) {
-      hash.nodes = this.$store.dispatch('harvester/findAll', { type: NODE });
-    }
-
-    await allHash(hash);
-  },
-
-  computed: {
-    latestResource() {
-      return this.$store.getters['harvester/all'](HCI.UPGRADE).find( U => U.isLatestUpgrade);
-    },
-
-    overallMessage() {
-      return this.latestResource?.overallMessage;
-    },
-
-    upgradeImage() {
-      const id = this.latestResource?.upgradeImage;
-
-      return this.$store.getters['harvester/all'](HCI.IMAGE).find(I => I.id === id);
-    },
-
-    imageProgress() {
-      return this.upgradeImage?.progress || 0;
-    },
-
-    showImage() {
-      return !this.latestResource.isUpgradeSucceeded;
-    },
-
-    imageMessage() {
-      return this.latestResource?.upgradeImageMessage;
-    },
-
-    repoReady() {
-      return this.latestResource.createRepo;
-    },
-
-    isShow() {
-      return this.latestResource && !this.latestResource.hasReadMessage;
-    },
-
-    nodesStatus() {
-      return this.latestResource?.nodeUpgradeMessage;
-    },
-
-    sysServiceUpgradeMessage() {
-      return this.latestResource?.sysServiceUpgradeMessage;
-    },
-
-    sysServiceTotal() {
-      return this.sysServiceUpgradeMessage?.[0].percent || 0;
-    },
-
-    nodesPercent() {
-      return this.latestResource?.nodeTotalPercent || 0;
-    },
-
-    repoInfo() {
-      return this.latestResource.repoInfo;
-    },
-  },
-
-  methods: {
-    ignoreMessage() {
-      this.latestResource.setLabel(HCI_ANNOTATIONS.REAY_MESSAGE, 'true');
-      this.latestResource.save();
-    }
-  }
-};
-</script>
-<template>
-  <div v-if="isShow" class="upgrade">
-    <v-popover
-      v-tooltip="{
-        placement: 'bottom-left',
-      }"
-      class="hand"
-    >
-      <slot name="button-content">
-        <i class="warning icon-fw icon icon-dot-open dot-icon" />
-      </slot>
-
-      <template slot="popover">
-        <div class="upgrade-info mb-10">
-          <div v-if="repoInfo" class="repoInfo">
-            <div v-if="latestResource" class="row mb-5">
-              <div class="col span-12">
-                <p class="state">
-                  {{ t('harvester.upgradePage.repoInfo.upgradeStatus') }}: <BadgeStateFormatter class="ml-5" :row="latestResource" />
-                </p>
-              </div>
-            </div>
-
-            <p class="bordered-section"></p>
-
-            <div class="row mb-5">
-              <div class="col span-6">
-                {{ t('harvester.upgradePage.repoInfo.os') }}: <span class="text-muted">{{ repoInfo.release.os }}</span>
-              </div>
-
-              <div class="col span-6">
-                {{ t('product.harvester') }}: <span class="text-muted">{{ repoInfo.release.harvester }}</span>
-              </div>
-            </div>
-
-            <div class="row mb-5">
-              <div class="col span-6">
-                {{ t('harvester.upgradePage.repoInfo.harvesterChart') }}: <span class="text-muted">{{ repoInfo.release.harvesterChart }}</span>
-              </div>
-
-              <div class="col span-6">
-                {{ t('harvester.upgradePage.repoInfo.monitoringChart') }}: <span class="text-muted">{{ repoInfo.release.monitoringChart }}</span>
-              </div>
-            </div>
-
-            <div class="row mb-5">
-              <div class="col span-6">
-                {{ t('harvester.upgradePage.repoInfo.kubernetes') }}: <span class="text-muted">{{ repoInfo.release.kubernetes }}</span>
-              </div>
-
-              <div class="col span-6">
-                {{ t('product.rancher') }}: <span class="text-muted">{{ repoInfo.release.rancher }}</span>
-              </div>
-            </div>
-
-            <p class="bordered-section"></p>
-          </div>
-
-          <p v-if="overallMessage" class="text-warning mb-20">
-            {{ overallMessage }}
-          </p>
-
-          <div v-if="showImage">
-            <h4>{{ t('harvester.upgradePage.upgradeImage') }}<span class="float-r text-info">{{ imageProgress }}%</span></h4>
-            <PercentageBar :value="imageProgress" preferred-direction="MORE" />
-            <p class="text-warning">
-              {{ imageMessage }}
-            </p>
-            <p class="bordered-section"></p>
-          </div>
-
-          <h4>{{ t('harvester.upgradePage.createRepository') }} <span class="float-r text-info">{{ repoReady.isReady ? t('harvester.upgradePage.succeeded') : t('harvester.upgradePage.pending') }}</span></h4>
-          <p v-if="repoReady.message" class="text-warning">
-            {{ repoReady.message }}
-          </p>
-          <p class="bordered-section"></p>
-
-          <ProgressBarList :title="t('harvester.upgradePage.upgradeNode')" :precent="nodesPercent" :list="nodesStatus" />
-          <p class="bordered-section"></p>
-
-          <ProgressBarList :title="t('harvester.upgradePage.upgradeSysService')" :precent="sysServiceTotal" :list="sysServiceUpgradeMessage" />
-        </div>
-
-        <div v-if="latestResource.isUpgradeSucceeded" class="successTip">
-          <button class="btn role-primary" @click="ignoreMessage()">
-            {{ t('harvester.upgradePage.dismissMessage') }}
-          </button>
-        </div>
-      </template>
-    </v-popover>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.upgrade {
-  height: 100%;
-  min-width: 40px;
-  display: flex;
-  align-items: center;
-
-  .dot-icon {
-    font-size: 24px;
-    vertical-align: middle;
-    color: #00a483;
-  }
-}
-
-.upgrade-info {
-  min-width: 550px;
-
-  .repoInfo {
-    .col span {
-      word-break: break-all
-    }
-
-    p.state {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .float-r {
-    float: right;
-  }
-
-  p {
-    word-break: break-word;
-    margin-top: 5px;
-  }
-}
-
-.successTip {
-  display: flex;
-  flex-direction: row-reverse
-}
-</style>

package/components/novnc/NovncConsole.vue

@@ -1,93 +0,0 @@
-<template>
-  <div>
-    <div v-if="connected && disconnected">
-      <main class="error">
-        <div class="text-center">
-          <BrandImage file-name="error-desert-landscape.svg" width="900" height="300" />
-          <h1>
-            {{ t('harvester.notification.title.warning') }}
-          </h1>
-          <h2 class="text-secondary mt-20">
-            {{ t('vncConsole.error.message') }}
-          </h2>
-        </div>
-      </main>
-    </div>
-    <div
-      ref="view"
-    />
-  </div>
-</template>
-
-<script>
-import RFB from '@novnc/novnc/core/rfb';
-import BrandImage from '@shell/components/BrandImage';
-
-export default {
-  props: {
-    url: {
-      type:    String,
-      default: ''
-    }
-  },
-
-  components: { BrandImage },
-
-  data() {
-    return {
-      rfb:          null,
-      connected:    false,
-      disconnected: false,
-    };
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      const rfb = new RFB(this.$refs.view, this.url);
-
-      rfb.addEventListener('connect', () => {
-        this.connected = true;
-      });
-      rfb.addEventListener('disconnect', (e) => {
-        this.disconnected = true;
-      });
-
-      this.rfb = rfb;
-    });
-  },
-
-  methods: {
-    disconnect() {
-      this.rfb.disconnect();
-    },
-
-    ctrlAltDelete() {
-      this.rfb.sendCtrlAltDel();
-    },
-
-    sendKey(keysym, code, down) {
-      this.rfb.sendKey(keysym, code, down);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-  .error {
-    overflow: hidden;
-
-    .row {
-      align-items: center;
-    }
-
-    h1 {
-      font-size: 5rem;
-    }
-
-    .desert-landscape {
-      img {
-        max-width: 100%;
-      }
-    }
-  }
-</style>

package/components/novnc/NovncConsoleItem.vue

@@ -1,89 +0,0 @@
-<script>
-export default {
-  name: 'NovncConsoleItem',
-
-  props: {
-    items: {
-      type:     Object,
-      required: true,
-      default:  () => {
-        return {};
-      }
-    },
-
-    path: {
-      type:     Array,
-      required: true,
-      default:  () => {
-        return [];
-      }
-    },
-
-    pos: {
-      type:     Number,
-      required: true,
-      default:  0,
-    }
-  },
-
-  methods: {
-    keysDown(key, pos) {
-      this.addKeys({ key, pos });
-      this.$emit('sendKeys');
-    },
-
-    addKeys({ key, pos }) {
-      this.$emit('update', { key, pos });
-    },
-
-    sendKeys() {
-      this.$emit('sendKeys');
-    },
-
-    getOpenStatus(key, pos) {
-      return this.path[pos] === key;
-    }
-  }
-};
-</script>
-
-<template>
-  <ul class="list-unstyled dropdown combination-keys__container">
-    <li v-for="(item, key) in items" :key="key">
-      <v-popover
-        v-if="!!item.keys"
-        placement="right-start"
-        trigger="click"
-        :container="false"
-      >
-        <span :class="{ open: getOpenStatus(key, pos) }" class="p-10 hand" @click="addKeys({ key, pos })">{{ item.label }}</span>
-
-        <template slot="popover">
-          <novnc-console-item :items="item.keys" :path="path" :pos="pos+1" @update="addKeys" @sendKeys="sendKeys" />
-        </template>
-      </v-popover>
-
-      <span v-else class="p-10 hand" @click="keysDown(key, pos)">{{ item.label }}</span>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-  .combination-keys__container {
-    max-width: 60px;
-
-    DIV, SPAN {
-      display: block;
-      text-align: center;
-    }
-
-    SPAN {
-      border-radius: 3px;
-
-      &:hover, &.open {
-        color: var(--primary-hover-text);
-        background: var(--primary-hover-bg);
-      }
-    }
-  }
-</style>

package/components/novnc/NovncConsoleWrapper.vue

@@ -1,243 +0,0 @@
-<script>
-import KeyTable from '@novnc/novnc/core/input/keysym';
-import NovncConsole from '@shell/components/novnc/NovncConsole';
-import NovncConsoleItem from '@shell/components/novnc/NovncConsoleItem';
-import { HCI } from '@shell/config/types';
-
-const SHORT_KEYS = {
-  ControlLeft: {
-    label: 'Ctrl',
-    value: KeyTable.XK_Control_L,
-  },
-  AltLeft: {
-    label: 'Alt',
-    value: KeyTable.XK_Alt_L,
-  }
-};
-
-const FUNCTION_KEYS = {
-  Delete: {
-    label: 'Del',
-    value: KeyTable.XK_Delete,
-  },
-  PrintScreen: {
-    label: 'Print Screen',
-    value: KeyTable.XK_Print,
-  },
-};
-
-const NORMAL_KEYS = {
-  KeyN: {
-    label: 'N',
-    value: KeyTable.XK_n,
-  },
-  KeyT: {
-    label: 'T',
-    value: KeyTable.XK_t,
-  },
-  KeyW: {
-    label: 'W',
-    value: KeyTable.XK_w,
-  },
-  KeyY: {
-    label: 'Y',
-    value: KeyTable.XK_y,
-  },
-};
-
-const F_KEYS = {
-  F1: {
-    label: 'F1',
-    value: KeyTable.XK_F1,
-  },
-  F2: {
-    label: 'F2',
-    value: KeyTable.XK_F2,
-  },
-  F3: {
-    label: 'F3',
-    value: KeyTable.XK_F3,
-  },
-  F4: {
-    label: 'F4',
-    value: KeyTable.XK_F4,
-  },
-  F5: {
-    label: 'F5',
-    value: KeyTable.XK_F5,
-  },
-  F6: {
-    label: 'F6',
-    value: KeyTable.XK_F6,
-  },
-  F7: {
-    label: 'F7',
-    value: KeyTable.XK_F7,
-  },
-  F8: {
-    label: 'F8',
-    value: KeyTable.XK_F8,
-  },
-  F9: {
-    label: 'F9',
-    value: KeyTable.XK_F9,
-  },
-  F10: {
-    label: 'F10',
-    value: KeyTable.XK_F10,
-  },
-  F11: {
-    label: 'F11',
-    value: KeyTable.XK_F11,
-  },
-  F12: {
-    label: 'F12',
-    value: KeyTable.XK_F12,
-  },
-};
-
-export default {
-  components: { NovncConsole, NovncConsoleItem },
-
-  async fetch() {
-    this.vmResource = await this.$store.dispatch('harvester/find', { type: HCI.VM, id: this.value.id });
-  },
-
-  data() {
-    return {
-      keysRecord: [],
-      vmResource: {},
-    };
-  },
-
-  props: {
-    value: {
-      type:     Object,
-      required: true,
-      default:  () => {
-        return {};
-      }
-    }
-  },
-
-  computed: {
-    isDown() {
-      return this.isEmpty(this.value);
-    },
-
-    url() {
-      const ip = `${ window.location.hostname }:${ window.location.port }`;
-
-      return `wss://${ ip }${ this.value?.getVMIApiPath }`;
-    },
-
-    allKeys() {
-      return {
-        ...SHORT_KEYS,
-        ...FUNCTION_KEYS,
-        ...NORMAL_KEYS,
-        ...F_KEYS,
-      };
-    },
-
-    keymap() {
-      const out = {
-        ...SHORT_KEYS,
-        PrintScreen: FUNCTION_KEYS.PrintScreen,
-        ...F_KEYS,
-      };
-
-      out.AltLeft.keys = { PrintScreen: FUNCTION_KEYS.PrintScreen, ...F_KEYS };
-      out.ControlLeft.keys = {
-        AltLeft: {
-          ...Object.assign(SHORT_KEYS.AltLeft, {}),
-          keys: { Delete: FUNCTION_KEYS.Delete }
-        },
-        ...NORMAL_KEYS,
-      };
-
-      return out;
-    },
-
-    hasSoftRebootAction() {
-      return !!this.vmResource?.actions?.softreboot;
-    }
-  },
-
-  methods: {
-    isEmpty(o) {
-      return o !== undefined && Object.keys(o).length === 0;
-    },
-
-    close() {
-      this.$refs.novncConsole.disconnect();
-    },
-
-    update({ key, pos }) {
-      this.keysRecord.splice(pos, this.keysRecord.length - pos, key);
-    },
-
-    // Send function key, e.g. ALT + F
-    sendKeys() {
-      this.keysRecord.forEach((key) => {
-        this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, true);
-      });
-
-      this.keysRecord.reverse().forEach((key) => {
-        this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, false);
-      });
-
-      this.$refs.popover.isOpen = false;
-      this.keysRecord = [];
-    },
-
-    softReboot() {
-      this.vmResource.softrebootVM();
-    },
-  }
-};
-</script>
-
-<template>
-  <div id="app">
-    <div class="vm-console">
-      <div class="combination-keys">
-        <v-popover
-          ref="popover"
-          placement="top"
-          trigger="click"
-          :container="false"
-          @auto-hide="keysRecord = []"
-        >
-          <button class="btn btn-sm bg-primary">
-            {{ t("harvester.virtualMachine.detail.console.shortKeys") }}
-          </button>
-
-          <template slot="popover">
-            <novnc-console-item :items="keymap" :path="keysRecord" :pos="0" @update="update" @sendKeys="sendKeys" />
-          </template>
-        </v-popover>
-
-        <button v-if="hasSoftRebootAction" class="btn btn-sm bg-primary" @click="softReboot">
-          {{ t("harvester.action.softreboot") }}
-        </button>
-      </div>
-      <NovncConsole v-if="url && !isDown" ref="novncConsole" :url="url" />
-      <p v-if="isDown">
-        {{ t("harvester.virtualMachine.detail.console.down") }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .vm-console {
-    height: 100%;
-    display: grid;
-    grid-template-rows: 30px auto;
-  }
-
-  .combination-keys {
-    background: rgb(40, 40, 40);
-  }
-</style>

package/config/harvester-map.js

@@ -1,44 +0,0 @@
-export const MemoryUnit = [{
-  label: 'Mi',
-  value: 'Mi'
-}, {
-  label: 'Gi',
-  value: 'Gi'
-},
-{
-  label: 'TiB',
-  value: 'Ti'
-}];
-
-export const InterfaceOption = [{
-  label: 'VirtIO',
-  value: 'virtio'
-}, {
-  label: 'SATA',
-  value: 'sata'
-}, {
-  label: 'SCSI',
-  value: 'scsi'
-}];
-
-export const SOURCE_TYPE = {
-  NEW:            'New',
-  IMAGE:          'VM Image',
-  ATTACH_VOLUME:  'Existing Volume',
-  CONTAINER:      'Container'
-};
-
-export const VOLUME_TYPE = [{
-  label: 'disk',
-  value: 'disk'
-}, {
-  label: 'cd-rom',
-  value: 'cd-rom'
-}];
-
-export const ACCESS_CREDENTIALS = {
-  RESET_PWD:  'userPassword',
-  INJECT_SSH: 'sshPublicKey'
-};
-
-export const RunStrategys = ['Always', 'RerunOnFailure', 'Manual', 'Halted'];