@rancher/shell 0.1.1 → 0.1.3

package/components/form/SerialConsole/index.vue

@@ -1,267 +0,0 @@
-<script>
-import { allHash } from '@shell/utils/promise';
-import debounce from 'lodash/debounce';
-
-import Socket, {
-  EVENT_CONNECTED,
-  EVENT_CONNECTING,
-  EVENT_DISCONNECTED,
-  EVENT_MESSAGE,
-  EVENT_CONNECT_ERROR,
-} from '@shell/utils/socket';
-
-export default {
-  props:      {
-    value: {
-      type:     Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      socket:      null,
-      terminal:    null,
-      fitAddon:    null,
-      searchAddon: null,
-      webglAddon:  null,
-      isOpen:      false,
-      isOpening:   false,
-      backlog:     [],
-      firstTime:   true,
-      queue:       []
-    };
-  },
-
-  computed: {
-    xtermConfig() {
-      return {
-        cursorBlink:  true,
-        useStyle:     true,
-        fontSize:     12,
-      };
-    },
-  },
-
-  watch: {
-    queue: {
-      handler: debounce(async function(neu) {
-        if (neu.length === 0) {
-          return;
-        }
-
-        const msg = await Promise.all(neu);
-
-        (msg || []).forEach((m) => {
-          this.terminal.write(m);
-        });
-
-        this.queue = [];
-      }, 5)
-    }
-  },
-
-  beforeDestroy() {
-    this.close();
-  },
-
-  async mounted() {
-    await this.setupTerminal();
-    await this.connect();
-  },
-
-  methods: {
-    async setupTerminal() {
-      const docStyle = getComputedStyle(document.querySelector('body'));
-      const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
-
-      const addons = await allHash({
-        fit:      import(/* webpackChunkName: "xterm" */ 'xterm-addon-fit'),
-        webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
-        weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
-        search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
-      });
-
-      const terminal = new xterm.Terminal({
-        theme: {
-          background: docStyle.getPropertyValue('--terminal-bg').trim(),
-          cursor:     docStyle.getPropertyValue('--terminal-cursor').trim(),
-          foreground: docStyle.getPropertyValue('--terminal-text').trim()
-        },
-        ...this.xtermConfig,
-      });
-
-      this.fitAddon = new addons.fit.FitAddon();
-      this.searchAddon = new addons.search.SearchAddon();
-
-      try {
-        this.webglAddon = new addons.webgl.WebGlAddon();
-      } catch (e) {
-        // Some browsers (Safari) don't support the webgl renderer, so don't use it.
-        this.webglAddon = null;
-      }
-
-      terminal.loadAddon(this.fitAddon);
-      terminal.loadAddon(this.searchAddon);
-      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
-      terminal.open(this.$refs.xterm);
-
-      if ( this.webglAddon ) {
-        terminal.loadAddon(this.webglAddon);
-      }
-
-      this.fit();
-      this.flush();
-
-      terminal.onData((input) => {
-        const msg = this.str2ab(input);
-
-        this.write(msg);
-      });
-
-      this.terminal = terminal;
-    },
-
-    str2ab(str) {
-      const enc = new TextEncoder();
-
-      return enc.encode(str);
-    },
-
-    write(msg) {
-      if ( this.isOpen ) {
-        this.socket.send(msg);
-      } else {
-        this.backlog.push(msg);
-      }
-    },
-
-    clear() {
-      this.terminal.clear();
-    },
-
-    getSocketUrl() {
-      return `${ this.value?.getSerialConsolePath }`;
-    },
-
-    async connect() {
-      if ( this.socket ) {
-        await this.socket.disconnect();
-        this.socket = null;
-        this.terminal.reset();
-      }
-
-      const url = this.getSocketUrl();
-
-      if ( !url ) {
-        return;
-      }
-
-      this.socket = new Socket(url);
-
-      this.socket.addEventListener(EVENT_CONNECTING, (e) => {
-        this.isOpen = false;
-        this.isOpening = true;
-      });
-
-      this.socket.addEventListener(EVENT_CONNECT_ERROR, (e) => {
-        this.isOpen = false;
-        this.isOpening = false;
-        console.error('Connect Error', e); // eslint-disable-line no-console
-      });
-
-      this.socket.addEventListener(EVENT_CONNECTED, (e) => {
-        this.isOpen = true;
-        this.isOpening = false;
-        if (this.show) {
-          this.fit();
-          this.flush();
-        }
-
-        if (this.firstTime) {
-          this.socket.send(this.str2ab('\n'));
-          this.firstTime = false;
-        }
-      });
-
-      this.socket.addEventListener(EVENT_DISCONNECTED, (e) => {
-        this.isOpen = false;
-        this.isOpening = false;
-        this.$emit('close');
-      });
-
-      this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        this.queue.push(e.detail.data.text());
-      });
-
-      this.socket.connect();
-      this.terminal.focus();
-    },
-
-    flush() {
-      const backlog = this.backlog.slice();
-
-      this.backlog = [];
-
-      for ( const data of backlog ) {
-        this.socket.send(data);
-      }
-    },
-
-    fit(arg) {
-      if ( !this.fitAddon ) {
-        return;
-      }
-
-      this.fitAddon.fit();
-
-      const { rows, cols } = this.fitAddon.proposeDimensions();
-
-      if ( !this.isOpen ) {
-        return;
-      }
-
-      const message = JSON.stringify({
-        Width:  cols,
-        Height: rows
-      });
-
-      this.socket.send(this.str2ab(message));
-    },
-
-    close() {
-      if ( this.socket ) {
-        this.socket.disconnect();
-      }
-
-      if ( this.terminal ) {
-        this.terminal.dispose();
-      }
-    },
-  }
-};
-</script>
-
-<template>
-  <div class="harvester-shell-container">
-    <div ref="xterm" class="shell-body" />
-    <resize-observer @notify="fit" />
-  </div>
-</template>
-
-<style lang="scss">
-  @import '@/node_modules/xterm/css/xterm.css';
-
-  body, #__nuxt, #__layout, MAIN {
-    height: 100%;
-  }
-
-  .harvester-shell-container {
-    height: 100%;
-    overflow: hidden;
-
-    .shell-body, .terminal.xterm {
-      height: 100%;
-    }
-  }
-</style>

package/components/formatter/AttachVMWithName.vue

@@ -1,46 +0,0 @@
-<script>
-import { HCI } from '@shell/config/types';
-
-export default {
-  props: {
-    value: {
-      type:    String,
-      default: ''
-    },
-    row: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  data() {
-    const vmList = this.$store.getters['harvester/all'](HCI.VM) || [];
-
-    return { vmList };
-  },
-
-  computed: {
-    vm() {
-      const vm = this.vmList.find( V => V.id === `${ this.row.metadata.namespace }/${ this.value }`);
-
-      return vm;
-    },
-
-    to() {
-      return this.vm?.detailLocation;
-    },
-  }
-};
-</script>
-
-<template>
-  <n-link v-if="to" :to="to">
-    {{ value }}
-  </n-link>
-
-  <span v-else>
-    {{ value }}
-  </span>
-</template>

package/components/formatter/CloudInitType.vue

@@ -1,27 +0,0 @@
-<script>
-import { HCI } from '@shell/config/labels-annotations';
-import { mapGetters } from 'vuex';
-
-export default {
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    },
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-
-    displayLabel() {
-      return this.value?.[HCI.CLOUD_INIT] === 'user' ? this.t('harvester.cloudTemplate.userData') : this.t('harvester.cloudTemplate.networkData');
-    }
-  },
-};
-</script>
-
-<template>
-  <span> {{ displayLabel }} </span>
-</template>

package/components/formatter/HarvesterBackupTargetValidation.vue

@@ -1,43 +0,0 @@
-<script>
-import { HCI } from '@shell/config/types';
-
-export default {
-  props: {
-    value: {
-      type:    String,
-      default: ''
-    }
-  },
-
-  async fetch() {
-    const harvesterSettings = await this.$store.dispatch('harvester/findAll', { type: HCI.SETTING });
-
-    this.harvesterSettings = harvesterSettings;
-  },
-
-  data() {
-    return { harvesterSettings: [] };
-  },
-
-  computed: {
-    isMatch() {
-      const harvesterSettings = this.$store.getters['harvester/all'](HCI.SETTING) || [];
-      const resource = harvesterSettings.find( V => V.id === 'backup-target');
-
-      return this.value === resource?.parseValue?.endpoint;
-    }
-  }
-};
-</script>
-
-<template>
-  <div v-if="isMatch">
-    {{ value }}
-  </div>
-  <div v-else>
-    {{ value }}
-    <p v-if="value" class="text-error">
-      {{ t('harvester.backup.matchTarget') }}
-    </p>
-  </div>
-</template>

package/components/formatter/HarvesterCPUUsed.vue

@@ -1,122 +0,0 @@
-<script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
-import { METRIC, NODE } from '@shell/config/types';
-import { parseSi } from '@shell/utils/units';
-
-export default {
-  name:       'HarvesterCpuUsed',
-  components: { ConsumptionGauge },
-
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-
-    row: {
-      type:     Object,
-      required: true
-    },
-
-    resourceName: {
-      type:     String,
-      default: ''
-    },
-
-    showUsed: {
-      type:    Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {};
-  },
-
-  computed: {
-    metrics() {
-      return this.$store.getters['harvester/byId'](METRIC.NODE, this.row.id);
-    },
-
-    cpuTotal() {
-      let out = 0;
-
-      if (this.metrics) {
-        out = this.metrics.cpuCapacity;
-      }
-
-      return out;
-    },
-
-    cpuUnits() {
-      return 'C';
-    },
-
-    node() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const node = this.$store.getters[`${ inStore }/byId`](NODE, this.row.id);
-
-      return node;
-    },
-
-    reserved() {
-      if (this.metrics) {
-        return this.node.cpuReserved;
-      } else {
-        return 0;
-      }
-    },
-
-    used() {
-      if (this.metrics) {
-        return parseSi(this.metrics?.usage?.cpu || '0m');
-      } else {
-        return 0;
-      }
-    },
-  }
-};
-</script>
-
-<template>
-  <div>
-    <ConsumptionGauge
-      :capacity="cpuTotal"
-      :used="reserved"
-      :units="cpuUnits"
-      :resource-name="resourceName"
-    >
-      <template #title="{amountTemplateValues, formattedPercentage}">
-        <span>
-          {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
-        </span>
-        <span>
-          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
-          </span>
-        </span>
-      </template>
-    </ConsumptionGauge>
-    <div
-      v-if="showUsed"
-      class="mt-10"
-    >
-      <ConsumptionGauge
-        :capacity="cpuTotal"
-        :used="used"
-        :units="cpuUnits"
-      >
-        <template #title="{amountTemplateValues, formattedPercentage}">
-          <span>
-            {{ t('clusterIndexPage.hardwareResourceGauge.used') }}
-          </span>
-          <span>
-            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
-            </span>
-          </span>
-        </template>
-      </ConsumptionGauge>
-    </div>
-  </div>
-</template>

package/components/formatter/HarvesterDiskState.vue

@@ -1,66 +0,0 @@
-<script>
-import { BadgeState } from '@components/BadgeState';
-import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
-
-const ACTIVE = 'healthy';
-const WARNING = 'warning';
-
-export default {
-  components: { BadgeState },
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-    row: {
-      type:     Object,
-      required: true
-    },
-  },
-
-  computed: {
-    state() {
-      const longhornDisks = this.row?.longhornDisks || [];
-      const out = longhornDisks.reduce((state, disk) => {
-        if (disk?.readyCondiction?.status !== 'True' || disk?.schedulableCondiction?.status !== 'True') {
-          state = WARNING;
-        }
-
-        return state;
-      }, ACTIVE);
-
-      return out;
-    },
-
-    stateDisplay() {
-      return stateDisplay(this.state);
-    },
-
-    stateBackground() {
-      if ( this.state === ACTIVE ) {
-        return 'bg-success';
-      } else {
-        return 'bg-warning';
-      }
-    },
-
-    errorMessage() {
-      if (this.state !== ACTIVE) {
-        return this.t('harvester.host.disk.error');
-      }
-
-      return '';
-    }
-  },
-};
-</script>
-
-<template>
-  <div>
-    <BadgeState
-      v-tooltip="errorMessage"
-      :color="stateBackground"
-      :label="stateDisplay"
-    />
-  </div>
-</template>

package/components/formatter/HarvesterHostName.vue

@@ -1,66 +0,0 @@
-<script>
-import LinkDetail from '@shell/components/formatter/LinkDetail';
-import { HCI } from '@shell/config/labels-annotations';
-export default {
-  components: { LinkDetail },
-  props:      {
-    value: {
-      type:     [String, Date],
-      default: ''
-    },
-    row: {
-      type:     Object,
-      required: true
-    },
-  },
-  computed: {
-    consoleUrl() {
-      const consoleUrl = this.row.metadata?.annotations?.[HCI.HOST_CONSOLE_URL];
-
-      if (!consoleUrl) {
-        return '';
-      }
-
-      if (!consoleUrl.startsWith('http://') && !consoleUrl.startsWith('https://')) {
-        return `http://${ consoleUrl }`;
-      }
-
-      return consoleUrl;
-    }
-  },
-  methods: {
-    goto() {
-      window.open(this.consoleUrl, '_blank');
-    }
-  },
-};
-</script>
-
-<template>
-  <div class="host-list">
-    <span class="overflow">
-      <LinkDetail v-model="row.nameDisplay" :row="row" />
-    </span>
-    <button v-if="consoleUrl" type="button" class="btn btn-sm role-primary console mr-10" @click="goto">
-      <span>Console</span>
-    </button>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .host-list {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .overflow{
-      flex: 1;
-      overflow:hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      -o-text-overflow:ellipsis;
-    }
-    .console {
-      width: 122px;
-    }
-  }
-</style>