@rancher/shell 0.1.2 → 0.1.4

package/components/formatter/HarvesterIpAddress.vue

@@ -1,90 +0,0 @@
-<script>
-import { OFF } from '@shell/models/harvester/kubevirt.io.virtualmachine';
-import { get } from '@shell/utils/object';
-import { isIpv4 } from '@shell/utils/string';
-import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { HCI } from '@shell/config/types';
-import { MANAGEMENT_NETWORK } from '@shell/mixins/harvester-vm';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
-
-export default {
-  components: { CopyToClipboard },
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-    row: {
-      type:     Object,
-      required: true
-    }
-  },
-
-  computed: {
-    // Return VM instance IP and VM annotation IP
-    ips() {
-      return [...this.vmiIp, ...this.networkAnnotationIP]
-        .filter(Boolean)
-        .sort((a, b) => a.ip < b.ip ? -1 : 1);
-    },
-
-    networkAnnotationIP() {
-      if (this.row.actualState !== 'Running') { // TODO: Running
-        return [];
-      }
-
-      const annotationIp = get(this.row, `metadata.annotations."${ HCI_ANNOTATIONS.NETWORK_IPS }"`) || '[]';
-
-      // Obtain IP from VM annotation, remove the CIDR suffix number if CIDR Exist
-      try {
-        const out = JSON.parse(annotationIp);
-
-        return out.map( ip => ({
-          ip:   ip.replace(/\/[\d\D]*/, ''),
-          name: ''
-        }));
-      } catch (e) {
-        return [];
-      }
-    },
-
-    vmiIp() {
-      const vmiResources = this.$store.getters['harvester/all'](HCI.VMI);
-      const resource = vmiResources.find(VMI => VMI.id === this.value) || null;
-      const networksName = this.row.networksName || [];
-      const vmiNetworks = resource?.spec?.networks || [];
-
-      return (resource?.status?.interfaces || []).filter((intf) => {
-        return isIpv4(intf.ipAddress) && networksName.includes(intf.name);
-      }).map((intf) => {
-        let name;
-        const network = vmiNetworks.find(network => network.name === intf.name);
-
-        if (network && network.multus) {
-          name = network.multus.networkName;
-        } else if (network && network.pod) {
-          name = MANAGEMENT_NETWORK;
-        }
-
-        return {
-          ip: intf.ipAddress,
-          name
-        };
-      });
-    },
-
-    showIP() {
-      return this.row.stateDisplay !== OFF;
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-if="showIP">
-    <span v-for="{ip, name} in ips" :key="ip">
-      <span v-tooltip="name">{{ ip }}</span>
-      <CopyToClipboard :text="ip" label-as="tooltip" class="icon-btn" action-color="bg-transparent" />
-    </span>
-  </div>
-</template>

package/components/formatter/HarvesterMemoryUsed.vue

@@ -1,140 +0,0 @@
-<script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
-import { METRIC, NODE } from '@shell/config/types';
-import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
-
-export default {
-  name:       'HarvesterMemoryUsed',
-  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);
-    },
-
-    memoryTotal() {
-      let out = 0;
-
-      if (this.metrics) {
-        out = this.metrics.memoryCapacity;
-      }
-
-      return out;
-    },
-
-    memoryUnits() {
-      const exponent = exponentNeeded(this.memoryTotal, 1024);
-
-      return `${ UNITS[exponent] }iB`;
-    },
-
-    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.memoryReserved;
-      } else {
-        return 0;
-      }
-    },
-
-    used() {
-      if (this.metrics) {
-        return parseSi(this.metrics?.usage?.memory || '0m', { increment: 1024 });
-      } else {
-        return 0;
-      }
-    },
-  },
-
-  methods: {
-    memoryFormatter(value) {
-      const exponent = exponentNeeded(this.memoryTotal, 1024);
-
-      const formatOptions = {
-        addSuffix:   false,
-        increment:   1024,
-        minExponent: exponent
-      };
-
-      return formatSi(value, formatOptions);
-    },
-  }
-};
-</script>
-
-<template>
-  <div>
-    <ConsumptionGauge
-      :capacity="memoryTotal"
-      :used="reserved"
-      :units="memoryUnits"
-      :number-formatter="memoryFormatter"
-      :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="memoryTotal"
-        :used="used"
-        :units="memoryUnits"
-        :number-formatter="memoryFormatter"
-      >
-        <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/HarvesterMigrationState.vue

@@ -1,85 +0,0 @@
-<script>
-import { HCI } from '@shell/config/types';
-import { BadgeState } from '@components/BadgeState';
-
-export default {
-  components: { BadgeState },
-
-  props: {
-    vmResource: {
-      type:     Object,
-      required: true
-    },
-    showSuccess: {
-      type:     Boolean,
-      default: true
-    }
-  },
-
-  computed: {
-    vmiResource() {
-      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
-      const vmi = vmiList.find( (VMI) => {
-        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.vmResource?.metadata?.uid;
-      });
-
-      return vmi;
-    },
-    state() {
-      return this.vmiResource?.migrationState?.status || '';
-    }
-  },
-
-  watch: {
-    state(neu) {
-      this.$emit('state-changed', neu);
-    }
-  },
-};
-</script>
-
-<template>
-  <div v-if="state">
-    <span v-if="!showSuccess">/</span>
-    <BadgeState :label="vmiResource.migrationState.status" :color="vmiResource.migrationStateBackground" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .badge-state {
-    padding: 5px 10px;
-    border: 1px solid transparent;
-    border-radius: 20px;
-
-    &.bg-info {
-      border-color: var(--primary);
-    }
-
-    &.bg-error {
-      border-color: var(--error);
-    }
-
-    &.bg-warning {
-      border-color: var(--warning);
-    }
-
-    // Successful states are de-emphasized by using [text-]color instead of background-color
-    &.bg-success {
-      color: var(--success);
-      border-color: var(--success);
-      background: transparent;
-    }
-  }
-
-  .sortable-table TD .badge-state {
-    @include clip;
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-    padding: 2px 10px 1px 10px;
-    font-size: 1em;
-    max-width: 200px;
-    font-size: .85em;
-    vertical-align: middle;
-  }
-</style>

package/components/formatter/HarvesterNodeName.vue

@@ -1,49 +0,0 @@
-<script>
-import { HCI, NODE } from '@shell/config/types';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
-
-export default {
-  components: { CopyToClipboard },
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-    row: {
-      type:     Object,
-      required: true
-    }
-  },
-
-  computed: {
-    nodeName() {
-      return this.node?.nameDisplay || '';
-    },
-
-    vmi() {
-      const vmiResources = this.$store.getters['harvester/all'](HCI.VMI);
-      const resource = vmiResources.find(VMI => VMI.id === this.row.id) || null;
-
-      return resource;
-    },
-
-    node() {
-      const nodeName = this.vmi?.status?.nodeName;
-
-      return this.$store.getters['harvester/byId'](NODE, nodeName);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    {{ nodeName }}
-    <CopyToClipboard
-      :text="nodeName"
-      label-as="tooltip"
-      class="icon-btn"
-      action-color="bg-transparent"
-    />
-  </div>
-</template>

package/components/formatter/HarvesterStorageUsed.vue

@@ -1,194 +0,0 @@
-<script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
-import { LONGHORN } from '@shell/config/types';
-import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
-
-export default {
-  name:       'HarvesterStorageUsed',
-  components: { ConsumptionGauge },
-
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-
-    row: {
-      type:     Object,
-      required: true
-    },
-
-    resourceName: {
-      type:     String,
-      default: ''
-    },
-
-    showReserved: {
-      type:    Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {};
-  },
-
-  computed: {
-    usage() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
-      let out = 0;
-
-      const diskStatus = longhornNode?.status?.diskStatus || {};
-
-      Object.values(diskStatus).map((disk) => {
-        if (disk?.storageAvailable && disk?.storageMaximum) {
-          out += disk.storageMaximum - disk.storageAvailable;
-        }
-      });
-
-      return Number(out);
-    },
-
-    reserved() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
-      let reserved = 0;
-
-      const disks = longhornNode?.spec?.disks || {};
-
-      Object.values(disks).map((disk) => {
-        if (disk.allowScheduling) {
-          reserved += disk.storageReserved;
-        }
-      });
-
-      return reserved;
-    },
-
-    total() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
-      let out = 0;
-
-      const diskStatus = longhornNode?.status?.diskStatus || {};
-
-      Object.values(diskStatus).map((disk) => {
-        if (disk?.storageMaximum) {
-          out += disk.storageMaximum;
-        }
-      });
-
-      return out;
-    },
-
-    units() {
-      const exponent = exponentNeeded(this.total, 1024);
-
-      return `${ UNITS[exponent] }iB`;
-    },
-
-    used() {
-      let out = this.formatter(this.usage || 0);
-
-      if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.usage || 0, { canRoundToZero: false });
-      }
-
-      return out;
-    },
-
-    formatReserved() {
-      let out = this.formatter(this.reserved || 0);
-
-      if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.reserved || 0, { canRoundToZero: false });
-      }
-
-      return out;
-    },
-
-    usedAmountTemplateValues() {
-      return {
-        used:  this.used,
-        total: this.formatter(this.total || 0),
-        unit:  this.units,
-      };
-    },
-
-    reservedAmountTemplateValues() {
-      return {
-        used:  this.formatReserved,
-        total: this.formatter(this.total || 0),
-        unit:  this.units,
-      };
-    },
-  },
-
-  methods: {
-    formatter(value, format) {
-      const minExponent = exponentNeeded(this.total, 1024);
-      const formatOptions = {
-        addSuffix:   false,
-        increment:   1024,
-        minExponent,
-      };
-
-      return formatSi(value, {
-        ...formatOptions,
-        ...format,
-      });
-    },
-  }
-};
-</script>
-
-<template>
-  <div>
-    <div
-      v-if="showReserved"
-    >
-      <ConsumptionGauge
-        :capacity="total"
-        :used="reserved"
-        :units="units"
-        :number-formatter="formatter"
-        :resource-name="resourceName"
-      >
-        <template #title="{formattedPercentage}">
-          <span>
-            {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
-          </span>
-          <span>
-            {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
-            <span class="ml-10 percentage">
-              /&nbsp;{{ formattedPercentage }}
-            </span>
-          </span>
-        </template>
-      </ConsumptionGauge>
-    </div>
-    <ConsumptionGauge
-      :capacity="total"
-      :used="usage"
-      :units="units"
-      :number-formatter="formatter"
-      :resource-name="showReserved ? '' : resourceName"
-      :class="{
-        'mt-10': showReserved,
-      }"
-    >
-      <template #title="{formattedPercentage}">
-        <span>
-          {{ t('node.detail.glance.consumptionGauge.used') }}
-        </span>
-        <span>
-          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
-          <span class="ml-10 percentage">
-            /&nbsp;{{ formattedPercentage }}
-          </span>
-        </span>
-      </template>
-    </ConsumptionGauge>
-  </div>
-</template>

package/components/formatter/HarvesterVmState.vue

@@ -1,123 +0,0 @@
-<script>
-import VMState from '@shell/components/formatter/BadgeStateFormatter';
-import HarvesterMigrationState from '@shell/components/formatter/HarvesterMigrationState';
-
-export default {
-  components: { VMState, HarvesterMigrationState },
-  props:      {
-    value: {
-      type:     String,
-      default: ''
-    },
-
-    row: {
-      type:     Object,
-      required: true
-    },
-
-    allNodeNetwork: {
-      type:     Array,
-      default: () => {
-        return [];
-      }
-    },
-
-    allClusterNetwork: {
-      type:     Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-
-  data() {
-    return { isMigrating: false };
-  },
-
-  computed: {
-    networkImpassability() {
-      const nodeName = this.row?.nodeName;
-      const nn = this.allNodeNetwork.find( N => N.attachNodeName === nodeName);
-
-      return (!!nn?.message || !this.enableClusterNetwork) && this.row?.attachNetwork && this?.row?.actualState === 'Running';
-    },
-
-    enableClusterNetwork() {
-      const clusterNetwork = this.allClusterNetwork?.[0] || {};
-
-      return clusterNetwork?.enable;
-    },
-
-    warningMessage() {
-      const out = [];
-
-      if (this.networkImpassability && this.allClusterNetwork.length) {
-        out.push(this.t('harvester.network.message.vlanInactive', { name: this.row.realAttachNodeName }));
-      }
-
-      if (this.row.warningMessage?.pod) {
-        const pod = this.row.warningMessage.pod;
-
-        if (pod.metadata?.state?.error && !/pod has unbound immediate PersistentVolumeClaims/.test(pod.metadata?.state?.message)) {
-          out.push(pod.metadata?.state?.message);
-        }
-      }
-
-      if (this.row?.actualState === 'VM error' && this.row.warningMessage?.message) {
-        out.push(this.row.warningMessage?.message);
-      }
-
-      if (this.row?.migrationMessage) {
-        out.push(this.row?.migrationMessage.message);
-      }
-
-      return out;
-    }
-  },
-
-  methods: {
-    migrationStateChanged(neu) {
-      if (neu === 'Failed') {
-        this.isMigrating = false;
-      } else {
-        this.isMigrating = !!neu;
-      }
-    }
-  },
-};
-</script>
-
-<template>
-  <span>
-    <HarvesterMigrationState v-show="isMigrating" :vm-resource="row" @state-changed="migrationStateChanged" />
-    <div v-show="!isMigrating" class="state">
-      <VMState :row="row" />
-      <v-popover
-        v-if="warningMessage.length"
-        trigger="hover"
-        offset="16"
-      >
-        <span class="tooltip-target">
-          <i class="icon icon-warning icon-lg text-warning" />
-        </span>
-
-        <template slot="popover">
-          <p v-for="(message, index) in warningMessage" :key="message">
-            {{ index + 1 }}. {{ message }}
-          </p>
-        </template>
-      </v-popover>
-    </div>
-  </span>
-</template>
-
-<style lang="scss" scoped>
-.state {
-  display: flex;
-  justify-content: space-between;
-
-  .icon-warning {
-    margin-top: 2px;
-  }
-}
-</style>