@rancher/shell 0.1.0 → 0.1.1

package/mixins/labeled-form-element.ts

@@ -0,0 +1,193 @@
+import Vue from 'vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { getWidth, setWidth } from '@shell/utils/width';
+
+interface LabeledFormElement {
+  raised: boolean;
+  focused: boolean;
+  blurred: number | null;
+}
+
+export default Vue.extend({
+  inheritAttrs: false,
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    label: {
+      type:     String,
+      default: null
+    },
+
+    labelKey: {
+      type:     String,
+      default: null
+    },
+
+    placeholderKey: {
+      type:     String,
+      default: null
+    },
+
+    tooltip: {
+      type:    [String, Object],
+      default: null
+    },
+
+    hoverTooltip: {
+      type:    Boolean,
+      default: true,
+    },
+
+    tooltipKey: {
+      type:     String,
+      default: null
+    },
+
+    required: {
+      type:    Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+
+    placeholder: {
+      type:    [String, Number],
+      default: ''
+    },
+
+    value: {
+      type:    [String, Number, Object],
+      default: ''
+    },
+
+    options: {
+      default:   null,
+      type:      Array
+    },
+
+    searchable: {
+      default: false,
+      type:    Boolean
+    },
+
+    rules: {
+      default:   () => [],
+      type:      Array,
+      // we only want functions in the rules array
+      validator: (rules: any) => rules.every((rule: any) => ['function'].includes(typeof rule))
+    }
+  },
+
+  data(): LabeledFormElement {
+    return {
+      raised:  this.mode === _VIEW || !!`${ this.value }`,
+      focused: false,
+      blurred: null,
+    };
+  },
+
+  computed: {
+    requiredField(): boolean {
+      // using "any" for a type on "rule" here is dirty but the use of the optional chaining operator makes it safe for what we're doing here.
+      return (this.required || this.rules.some((rule: any): boolean => rule?.name === 'required'));
+    },
+    empty(): boolean {
+      return !!`${ this.value }`;
+    },
+
+    isView(): boolean {
+      return this.mode === _VIEW;
+    },
+
+    isDisabled(): boolean {
+      return this.disabled || this.isView;
+    },
+
+    isSearchable(): boolean {
+      const { searchable } = this;
+      const options = ( this.options || [] );
+
+      if (searchable || options.length >= 10) {
+        return true;
+      }
+
+      return false;
+    },
+    validationMessage(): string | undefined {
+      // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
+      const requiredRule = this.rules.find((rule: any) => rule?.name === 'required');
+      const ruleMessages = [];
+      const value = this?.value;
+
+      if (requiredRule && this.blurred && !this.focused) {
+        const message = requiredRule(value);
+
+        if (!!message) {
+          return message;
+        }
+      }
+
+      for (const rule of this.rules) {
+        const message = rule(value);
+
+        if (!!message && rule.name !== 'required') { // we're catching 'required' above so we can ignore it here
+          ruleMessages.push(message);
+        }
+      }
+      if (ruleMessages.length > 0 && (this.blurred || this.focused)) {
+        return ruleMessages.join(', ');
+      } else {
+        return undefined;
+      }
+    }
+  },
+
+  methods: {
+    resizeHandler() {
+      // since the DD is positioned there is no way to 'inherit' the size of the input, this calcs the size of the parent and set the dd width if it is smaller. If not let it grow with the regular styles
+      this.$nextTick(() => {
+        const DD = (this.$refs.select as HTMLElement).querySelector('ul.vs__dropdown-menu');
+
+        const selectWidth = getWidth(this.$refs.select as Element) || 0;
+        const dropWidth = getWidth(DD as Element) || 0;
+
+        if (dropWidth < selectWidth) {
+          setWidth(DD as Element, selectWidth);
+        }
+      });
+    },
+    onFocus() {
+      this.$emit('on-focus');
+
+      return this.onFocusLabeled();
+    },
+
+    onFocusLabeled() {
+      this.raised = true;
+      this.focused = true;
+    },
+
+    onBlur() {
+      this.$emit('on-blur');
+
+      return this.onBlurLabeled();
+    },
+
+    onBlurLabeled() {
+      this.focused = false;
+
+      if ( !this.value ) {
+        this.raised = false;
+      }
+
+      this.blurred = Date.now();
+    }
+  }
+});

package/mixins/resource-fetch.js

@@ -0,0 +1,173 @@
+import { mapGetters } from 'vuex';
+import {
+  COUNT, MANAGEMENT, POD, WORKLOAD_TYPES, WORKLOAD, SECRET
+} from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+
+// Number of pages to fetch when loading incrementally
+const PAGES = 4;
+
+// restrict advanced features of manual refresh and incremental loading to these resource types
+export const TYPES_RESTRICTED = [
+  SECRET,
+  POD,
+  WORKLOAD_TYPES.DEPLOYMENT,
+  WORKLOAD_TYPES.CRON_JOB,
+  WORKLOAD_TYPES.DAEMON_SET,
+  WORKLOAD_TYPES.JOB,
+  WORKLOAD_TYPES.STATEFUL_SET,
+  WORKLOAD_TYPES.REPLICA_SET,
+  WORKLOAD_TYPES.REPLICATION_CONTROLLER,
+  WORKLOAD
+];
+
+export default {
+  data() {
+    // fetching the settings related to manual refresh from global settings
+    const perfSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);
+    let perfConfig = {};
+
+    if (perfSetting && perfSetting.value) {
+      try {
+        perfConfig = JSON.parse(perfSetting.value);
+      } catch (e) {
+        console.warn('ui-performance setting contains invalid data'); // eslint-disable-line no-console
+      }
+    }
+
+    return {
+      perfConfig,
+      init:                       false,
+      counts:                     {},
+      multipleResources:          [],
+      // manual refresh vars
+      hasManualRefresh:            false,
+      watch:                      true,
+      isTooManyItemsToAutoUpdate: false,
+      force:                      false,
+      // incremental loading vars
+      incremental:                0,
+      fetchedResourceType:        [],
+    };
+  },
+  beforeDestroy() {
+    // make sure this only runs once, for the initialized instance
+    if (this.init) {
+      // clear up the store to make sure we aren't storing anything that might interfere with the next rendered list view
+      this.$store.dispatch('resource-fetch/clearData');
+
+      const inStore = this.$store.getters['currentStore'](COUNT);
+
+      this.fetchedResourceType.forEach((type) => {
+        this.$store.dispatch(`${ inStore }/incrementLoadCounter`, type);
+      });
+    }
+  },
+
+  computed: { ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }) },
+  watch:    {
+    refreshFlag(neu) {
+      // this is where the data assignment will trigger the update of the list view...
+      if (this.init && neu) {
+        this.$fetch();
+      }
+    }
+  },
+  methods:  {
+    $fetchType(type, multipleResources = []) {
+      const inStore = this.$store.getters['currentStore'](COUNT);
+
+      if (!this.init) {
+        this.__gatherResourceFetchData(type, multipleResources);
+
+        // make sure after init that, if we have a manual refresh, we always set the force = true
+        if (!this.watch) {
+          this.force = true;
+        }
+
+        if (this.isTooManyItemsToAutoUpdate) {
+          this.hasManualRefresh = true;
+        }
+      }
+
+      if (!this.fetchedResourceType.includes(type)) {
+        this.fetchedResourceType.push(type);
+      }
+
+      return this.$store.dispatch(`${ inStore }/findAll`, {
+        type,
+        opt: {
+          incremental:      this.incremental,
+          watch:            this.watch,
+          force:            this.force,
+          hasManualRefresh: this.hasManualRefresh
+        }
+      });
+    },
+    __getCountForResource(resourceName) {
+      let resourceCount;
+
+      if (this.counts[`${ resourceName }`]) {
+        resourceCount = this.counts[`${ resourceName }`].summary?.count;
+      }
+
+      return resourceCount || 0;
+    },
+    __gatherResourceFetchData(type, multipleResources) {
+      // flag to prevent a first data update being triggered from the requestData watcher
+      this.init = true;
+
+      // manual refresh settings config
+      const manualDataRefreshEnabled = this.perfConfig?.manualRefresh?.enabled;
+      const manualDataRefreshThreshold = parseInt(this.perfConfig?.manualRefresh?.threshold || '0', 10);
+
+      // incremental loading settings config
+      const incrementalLoadingEnabled = this.perfConfig?.incrementalLoading?.enabled;
+      const incrementalLoadingThreshold = parseInt(this.perfConfig?.incrementalLoading?.threshold || '0', 10);
+
+      // other vars
+      this.multipleResources = multipleResources;
+      const resourceName = type;
+      const inStore = this.$store.getters['currentStore'](resourceName);
+      let resourceCount = 0;
+
+      // manual refresh vars
+      let watch = true;
+      let isTooManyItemsToAutoUpdate = false;
+
+      // incremental loading vars
+      let incremental = 0;
+
+      // get resource counts
+      if ( this.$store.getters[`${ inStore }/haveAll`](COUNT) ) {
+        this.counts = this.$store.getters[`${ inStore }/all`](COUNT)[0].counts;
+
+        if (this.multipleResources.length) {
+          this.multipleResources.forEach((item) => {
+            resourceCount = resourceCount + this.__getCountForResource(item);
+          });
+        } else {
+          resourceCount = this.__getCountForResource(resourceName);
+        }
+      }
+
+      // manual refresh check
+      if (manualDataRefreshEnabled && resourceCount >= manualDataRefreshThreshold) {
+        watch = false;
+        isTooManyItemsToAutoUpdate = true;
+      }
+      // manual refresh check
+      if (incrementalLoadingEnabled && incrementalLoadingThreshold > 0 && resourceCount >= incrementalLoadingThreshold) {
+        incremental = Math.ceil(resourceCount / PAGES);
+      }
+
+      // pass on the flag that controls the appearance of the manual refresh button on the sortable table
+      this.$store.dispatch('resource-fetch/updateIsTooManyItems', isTooManyItemsToAutoUpdate);
+
+      // set vars on mixin to be used on $fetchType
+      this.watch = watch;
+      this.isTooManyItemsToAutoUpdate = isTooManyItemsToAutoUpdate;
+      this.incremental = incremental;
+    },
+  },
+};

package/models/cluster.x-k8s.io.machine.js

@@ -1,4 +1,4 @@
-import { CAPI, NODE } from '@shell/config/types';
+import { ADDRESSES, CAPI, NODE } from '@shell/config/types';
 import { CAPI as CAPI_LABELS, MACHINE_ROLES } from '@shell/config/labels-annotations';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { listNodeRoles } from '@shell/models/cluster/node';
@@ -239,6 +239,10 @@ export default class CapiMachine extends SteveModel {
   }
 
   get isRunning() {
-    return this.status.phase === 'Running';
+    return this.status?.phase === 'Running';
+  }
+
+  get ipaddress() {
+    return this.status?.addresses?.find(({ type }) => type === ADDRESSES.INTERNAL_IP)?.address || '-';
   }
 }

package/models/etcdbackup.js

@@ -37,4 +37,8 @@ export default class Rke1EtcdBackup extends NormanModel {
   get nameDisplay() {
     return this.name;
   }
+
+  get backupLocation() {
+    return !!this.backupConfig.s3BackupConfig ? this.t('cluster.snapshot.rke1.s3') : this.t('cluster.snapshot.rke1.local');
+  }
 }

package/models/event.js

@@ -20,4 +20,8 @@ export default class K8sEvent extends SteveModel {
   get timestamp() {
     return this.lastTimestamp || this.metadata?.creationTimestamp;
   }
+
+  get eventType() {
+    return this._type;
+  }
 }

package/models/fleet.cattle.io.bundle.js

@@ -91,7 +91,7 @@ export default class FleetBundle extends SteveModel {
   }
 
   get stateObj() {
-    const errorState = this.status.conditions.find((item) => {
+    const errorState = this.status?.conditions?.find((item) => {
       const { error, message } = item;
       const errState = !!error;
 

package/models/fleet.cattle.io.gitrepo.js

@@ -312,4 +312,14 @@ export default class GitRepo extends SteveModel {
 
     return 0;
   }
+
+  get bundleDeployments() {
+    const bds = this.$getters['all'](FLEET.BUNDLE_DEPLOYMENT);
+
+    return bds.filter(bd => bd.metadata?.labels?.['fleet.cattle.io/repo-name'] === this.name);
+  }
+
+  get clustersList() {
+    return this.$getters['all'](FLEET.CLUSTER);
+  }
 }

package/models/harvester/harvesterhci.io.virtualmachinebackup.js

@@ -3,10 +3,13 @@ import { get } from '@shell/utils/object';
 import { findBy } from '@shell/utils/array';
 import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { _CREATE } from '@shell/config/query-params';
 
 export default class HciVmBackup extends SteveModel {
-  detailPageHeaderActionOverride() {
-    return this.t('harvester.backup.title');
+  detailPageHeaderActionOverride(realMode) {
+    if (realMode === _CREATE) {
+      return this.t('harvester.backup.title');
+    }
   }
 
   get _availableActions() {

package/models/harvester/harvesterhci.io.virtualmachineimage.js

@@ -10,6 +10,7 @@ import { formatSi } from '@shell/utils/units';
 import { ucFirst } from '@shell/utils/string';
 import { stateDisplay, colorForState } from '@shell/plugins/dashboard-store/resource-class';
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { _CLONE } from '@shell/config/query-params';
 
 export function isReady() {
   function getStatusConditionOfType(type, defaultValue = []) {
@@ -55,7 +56,9 @@ export default class HciVmImage extends SteveModel {
   }
 
   applyDefaults(resources = this, realMode) {
-    Vue.set(this.metadata, 'labels', { [HCI_ANNOTATIONS.OS_TYPE]: '', [HCI_ANNOTATIONS.IMAGE_SUFFIX]: '' });
+    if (realMode !== _CLONE) {
+      Vue.set(this.metadata, 'labels', { [HCI_ANNOTATIONS.OS_TYPE]: '', [HCI_ANNOTATIONS.IMAGE_SUFFIX]: '' });
+    }
   }
 
   createFromImage() {
@@ -68,6 +71,12 @@ export default class HciVmImage extends SteveModel {
     });
   }
 
+  cleanForNew() {
+    this.$dispatch(`cleanForNew`, this);
+
+    delete this.spec.displayName;
+  }
+
   get nameDisplay() {
     return this.spec?.displayName;
   }
@@ -238,13 +247,7 @@ export default class HciVmImage extends SteveModel {
         required:       true,
         minLength:      1,
         maxLength:      63,
-        translationKey: 'generic.name'
-      },
-      {
-        nullable:       false,
-        path:           'spec.displayName',
-        required:       true,
-        translationKey: 'generic.name'
+        translationKey: 'generic.name',
       },
       ...out
     ];

package/models/harvester/harvesterhci.io.virtualmachinetemplateversion.js

@@ -90,8 +90,9 @@ export default class HciVmTemplateVersion extends SteveModel {
                 },
                 features: { acpi: { enabled: true } },
               },
-              hostname: '',
-              networks: [{
+              evictionStrategy: 'LiveMigrate',
+              hostname:         '',
+              networks:         [{
                 name: 'default',
                 pod:  {}
               }],
@@ -105,6 +106,10 @@ export default class HciVmTemplateVersion extends SteveModel {
     Vue.set(this, 'spec', spec);
   }
 
+  get canDelete() {
+    return this.hasLink('remove') && this.$rootGetters['type-map/optionsFor'](this.type).isRemovable && !this.isDefaultVersion;
+  }
+
   get template() {
     return this.$rootGetters['harvester/all'](HCI.VM_TEMPLATE).find((T) => {
       return T.id === this.spec.templateId;
@@ -185,6 +190,10 @@ export default class HciVmTemplateVersion extends SteveModel {
     return template?.status?.defaultVersion;
   }
 
+  get isDefaultVersion() {
+    return this.defaultVersion === this?.status?.version;
+  }
+
   get customValidationRules() {
     const rules = [
       // {

package/models/harvester/kubevirt.io.virtualmachine.js

@@ -224,7 +224,7 @@ export default class VirtVm extends SteveModel {
   }
 
   cleanForNew() {
-    this.cleanForNew();
+    this.$dispatch(`cleanForNew`, this);
 
     this.spec.template.spec.hostname = '';
     const interfaces = this.spec.template.spec.domain.devices?.interfaces || [];
@@ -498,7 +498,7 @@ export default class VirtVm extends SteveModel {
   }
 
   get isBeingStopped() {
-    if (this && !this.isVMExpectedRunning && this.isVMCreated && this.vmi?.isTerminated) {
+    if (this && !this.isVMExpectedRunning && this.isVMCreated && this.vmi?.status?.phase !== VMIPhase.Succeeded) {
       return { status: STOPPING };
     }
 

package/models/harvester/kubevirt.io.virtualmachineinstance.js

@@ -106,7 +106,7 @@ export default class VirtVmInstance extends SteveModel {
   get isTerminated() {
     const conditions = this?.status?.conditions || [];
 
-    return conditions.filter(cond => cond.type === 'Ready')?.status === 'False';
+    return conditions.find(cond => cond.type === 'Ready')?.status === 'False';
   }
 
   get getVMIApiPath() {

package/models/harvester/node.js

@@ -7,6 +7,11 @@ import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/reso
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { parseSi } from '@shell/utils/units';
 
+const ALLOW_SYSTEM_LABEL_KEYS = [
+  'topology.kubernetes.io/zone',
+  'topology.kubernetes.io/region',
+];
+
 export default class HciNode extends SteveModel {
   get _availableActions() {
     const cordon = {
@@ -57,9 +62,19 @@ export default class HciNode extends SteveModel {
   get filteredSystemLabels() {
     const reg = /(k3s|kubernetes|kubevirt|harvesterhci|k3os)+\.io/;
 
-    return pickBy(this.labels, (value, key) => {
+    const labels = pickBy(this.labels, (value, key) => {
       return !reg.test(key);
     });
+
+    ALLOW_SYSTEM_LABEL_KEYS.map((key) => {
+      const value = this?.metadata?.labels?.[key];
+
+      if (value) {
+        labels[key] = value;
+      }
+    });
+
+    return labels;
   }
 
   get nameDisplay() {
@@ -72,7 +87,7 @@ export default class HciNode extends SteveModel {
     }
 
     if (this.isMaintenance) {
-      return 'Maintenance mode';
+      return 'Maintenance';
     }
 
     if (this.isCordoned ) {
@@ -216,40 +231,20 @@ export default class HciNode extends SteveModel {
     return pods.filter(p => p?.spec?.nodeName === this.id && p?.metadata?.name !== 'removing');
   }
 
-  get cpuReserved() {
-    const out = this.pods.reduce((sum, pod) => {
-      const containers = pod?.spec?.containers || [];
-
-      const containerCpuReserved = containers.reduce((sum, c) => {
-        sum += parseSi(c?.resources?.requests?.cpu || '0m');
-
-        return sum;
-      }, 0);
-
-      sum += containerCpuReserved;
-
-      return sum;
-    }, 0);
+  get reserved() {
+    try {
+      return JSON.parse(this.metadata.annotations[HCI_ANNOTATIONS.HOST_REQUEST] || '{}');
+    } catch {
+      return {};
+    }
+  }
 
-    return out;
+  get cpuReserved() {
+    return parseSi(this.reserved.cpu || '0');
   }
 
   get memoryReserved() {
-    const out = this.pods.reduce((sum, pod) => {
-      const containers = pod?.spec?.containers || [];
-
-      const containerMemoryReserved = containers.reduce((sum, c) => {
-        sum += parseSi(c?.resources?.requests?.memory || '0m', { increment: 1024 });
-
-        return sum;
-      }, 0);
-
-      sum += containerMemoryReserved;
-
-      return sum;
-    }, 0);
-
-    return out;
+    return parseSi(this.reserved.memory || '0');
   }
 
   get canDelete() {

package/models/harvester/persistentvolumeclaim.js

@@ -51,7 +51,7 @@ export default class HciPv extends SteveModel {
   }
 
   cleanForNew() {
-    this.cleanForNew();
+    this.$dispatch(`cleanForNew`, this);
 
     delete this.metadata.finalizers;
     const keys = [HCI_ANNOTATIONS.IMAGE_ID, DESCRIPTION];