@rancher/shell 0.3.0 → 0.3.2

package/edit/secret/index.vue

@@ -16,7 +16,6 @@ import Labels from '@shell/components/form/Labels';
 import { HIDE_SENSITIVE } from '@shell/store/prefs';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear, uniq } from '@shell/utils/array';
-import { importCloudCredential } from '@shell/utils/dynamic-importer';
 import { NAME as MANAGER } from '@shell/config/product/manager';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import { sortBy } from '@shell/utils/sort';
@@ -128,14 +127,11 @@ export default {
     },
 
     cloudComponent() {
-      const driver = this.driverName;
-      const haveProviders = this.$store.getters['plugins/credentialDrivers'];
-
-      if ( haveProviders.includes(driver) ) {
-        return importCloudCredential(driver);
+      if (this.$store.getters['type-map/hasCustomCloudCredentialComponent'](this.driverName)) {
+        return this.$store.getters['type-map/importCloudCredential'](this.driverName);
       }
 
-      return importCloudCredential('generic');
+      return this.$store.getters['type-map/importCloudCredential']('generic');
     },
 
     // array of id, label, description, initials for type selection step

package/edit/service.vue

@@ -22,7 +22,7 @@ import HarvesterServiceAddOnConfig from '@shell/components/HarvesterServiceAddOn
 import { clone } from '@shell/utils/object';
 import { POD, CAPI } from '@shell/config/types';
 import { matching } from '@shell/utils/selector';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import { Port } from '@shell/utils/validators/formRules';
@@ -328,6 +328,7 @@ export default {
     :validation-passed="fvFormIsValid"
     :errors="fvUnreportedValidationErrors"
     :apply-hooks="applyHooks"
+    :description="t('servicesPage.serviceListDescription')"
     @error="(e) => (errors = e)"
     @finish="save"
     @cancel="done"
@@ -385,6 +386,7 @@ export default {
         name="selectors"
         :label="t('servicesPage.selectors.label')"
       >
+        <p>{{ t('servicesPage.selectors.matchingPods.description') }}</p>
         <div class="row">
           <div class="col span-12">
             <Banner :color="(matchingPods.none ? 'warning' : 'success')">

package/edit/storage.k8s.io.storageclass/index.vue

@@ -5,11 +5,14 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import ArrayList from '@shell/components/form/ArrayList';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
+import Banner from '@components/Banner/Banner.vue';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { PROVISIONER_OPTIONS } from '@shell/models/storage.k8s.io.storageclass';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
+import { CSI_DRIVER } from '@shell/config/types';
+import { LONGHORN_DRIVER } from '@shell/models/persistentvolume';
 
 export default {
   name: 'StorageClass',
@@ -22,10 +25,17 @@ export default {
     RadioGroup,
     Tab,
     Tabbed,
+    Banner
   },
 
   mixins: [CreateEditView],
 
+  async fetch() {
+    if (this.$store.getters['cluster/schemaFor'](CSI_DRIVER)) {
+      this.csiDrivers = await this.$store.dispatch('cluster/findAll', { type: CSI_DRIVER });
+    }
+  },
+
   data() {
     const reclaimPolicyOptions = [
       {
@@ -70,7 +80,7 @@ export default {
       allowVolumeExpansionOptions,
       volumeBindingModeOptions,
       mountOptions: [],
-      provisioner:  PROVISIONER_OPTIONS[0].value,
+      csiDrivers:   [],
     };
   },
 
@@ -85,9 +95,59 @@ export default {
       return this.value.provisioner;
     },
 
+    // PROVISIONER_OPTIONS are provs with custom components: all the in-tree types + longhorn and harvester
+    // CSI drivers are third party provisioner options - this.csiDrivers is a list of the ones that are currently installed on this cluster
     provisioners() {
-      return PROVISIONER_OPTIONS.filter(provisioner => this.showUnsupportedStorage || provisioner.supported);
-    }
+      const dropdownOptions = [];
+      const provisionerOptionsDrivers = [];
+
+      PROVISIONER_OPTIONS.forEach((opt) => {
+        provisionerOptionsDrivers.push(opt.value);
+        if (this.showUnsupportedStorage || opt.supported) {
+          let label = this.t(opt.labelKey);
+
+          if (opt.value.includes('kubernetes')) {
+            label += ` ${ this.t('persistentVolume.plugin.inTree') }`;
+          }
+          if (!opt.supported) {
+            label += ` ${ this.t('persistentVolume.plugin.unsupported') }`;
+          }
+          dropdownOptions.push({
+            value:      opt.value,
+            label,
+            deprecated: opt.deprecated
+          });
+        }
+      });
+
+      this.csiDrivers.forEach((driver) => {
+        // if a csiDriver is in PROVISIONER_OPTIONS, it's already in the dropdown list; dont add again
+        if (driver.metadata.name === LONGHORN_DRIVER || provisionerOptionsDrivers.includes(driver.metadata.name)) {
+          return;
+        }
+        const fallback = `${ driver.metadata.name }  ${ this.t('persistentVolume.csi.drivers.suffix') }`;
+
+        dropdownOptions.push({
+          value: driver.metadata.name,
+          label: this.$store.getters['i18n/withFallback'](`persistentVolume.csi.drivers.${ driver.metadata.name.replaceAll('.', '-') }`, null, fallback)
+        });
+      });
+      const out = dropdownOptions.sort((a, b) => a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+
+      return out;
+    },
+
+    provisionerIsDeprecated() {
+      const provisionerOpt = PROVISIONER_OPTIONS.find(opt => opt.value === this.value.provisioner);
+
+      return provisionerOpt && provisionerOpt.deprecated !== undefined;
+    },
+
+    provisionerIsHideCustomize() {
+      const provisionerOpt = PROVISIONER_OPTIONS.find(opt => opt.value === this.value.provisioner);
+
+      return provisionerOpt && provisionerOpt.hideCustomize !== undefined;
+    },
   },
 
   watch: {
@@ -120,6 +180,18 @@ export default {
           delete this.value.parameters[key];
         }
       });
+    },
+    provisionerLabel(provisioner) {
+      const provisionerOpt = PROVISIONER_OPTIONS.find(opt => opt.value === provisioner);
+
+      return provisionerOpt?.labelKey ? this.t(provisionerOpt.labelKey) : provisioner;
+    },
+    getOptionLabel(opt) {
+      if (opt.deprecated) {
+        return `${ opt.label } ${ this.t('storageClass.deprecated.title') }`;
+      }
+
+      return opt.label;
     }
   }
 };
@@ -143,34 +215,46 @@ export default {
       :mode="modeOverride"
       :register-before-hook="registerBeforeHook"
     />
+
     <LabeledSelect
       :value="value.provisioner"
       label="Provisioner"
       :options="provisioners"
       :localized-label="true"
-      option-label="labelKey"
+      :get-option-label="getOptionLabel"
       :mode="modeOverride"
       :searchable="true"
       :taggable="true"
       class="mb-20"
       @input="updateProvisioner($event)"
     />
+    <Banner
+      v-if="provisionerIsDeprecated"
+      color="warning"
+    >
+      <t
+        k="storageClass.deprecated.warning"
+        raw
+        :provisioner="provisionerLabel(value.provisioner)"
+      />
+    </Banner>
     <Tabbed :side-tabs="true">
-      <Tab
-        name="parameters"
-        :label="t('storageClass.parameters.label')"
-        :weight="2"
+      <Tab
+        name="parameters"
+        :label="t('storageClass.parameters.label')"
+        :weight="2"
       >
-        <component
-          :is="getComponent(value.provisioner)"
-          :key="value.provisioner"
-          :value="value"
-          :mode="modeOverride"
+        <component
+          :is="getComponent(value.provisioner)"
+          :key="value.provisioner"
+          :value="value"
+          :mode="modeOverride"
         />
       </Tab>
-      <Tab
-        name="customize"
-        :label="t('storageClass.customize.label')"
+      <Tab
+        v-if="!provisionerIsHideCustomize"
+        name="customize"
+        :label="t('storageClass.customize.label')"
       >
         <div class="row mt-20">
           <div class="col span-6">

package/edit/storage.k8s.io.storageclass/provisioners/driver.harvesterhci.io.vue

@@ -0,0 +1,114 @@
+<script>
+import { mapGetters } from 'vuex';
+import semver from 'semver';
+
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Banner from '@components/Banner/Banner.vue';
+import KeyValue from '@shell/components/form/KeyValue';
+
+import { clone } from '@shell/utils/object';
+import { allHash } from '@shell/utils/promise';
+
+const DEFAULT_PARAMETERS = [
+  'hostStorageClass',
+];
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    KeyValue,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    }
+  },
+
+  async fetch() {
+    const res = await allHash({ rke2Versions: this.$store.dispatch('management/request', { url: '/v1-rke2-release/releases' }) });
+
+    this.rke2Versions = res.rke2Versions;
+  },
+
+  data() {
+    return { rke2Versions: {} };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    isSatisfiesVersion() {
+      const kubernetesVersion = this.currentCluster.kubernetesVersion;
+      const kubernetesVersionExtension = this.currentCluster.kubernetesVersionExtension;
+
+      if (kubernetesVersionExtension.startsWith('rke2')) {
+        const charts = ((this.rke2Versions?.data || []).find(v => v.id === kubernetesVersion) || {}).charts;
+        let csiVersion = charts?.['harvester-csi-driver']?.version || '';
+
+        if (csiVersion.endsWith('00')) {
+          csiVersion = csiVersion.slice(0, -2);
+        }
+
+        return semver.satisfies(csiVersion, '>=0.1.15');
+      } else {
+        return true;
+      }
+    },
+
+    parameters: {
+      get() {
+        const parameters = clone(this.value?.parameters) || {};
+
+        DEFAULT_PARAMETERS.map((key) => {
+          delete parameters[key];
+        });
+
+        return parameters;
+      },
+
+      set(value) {
+        Object.assign(this.value.parameters, value);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="!isSatisfiesVersion"
+      color="warning"
+    >
+      {{ t('storageClass.harvesterhci.warning.unSatisfiesVersion', null, true) }}
+    </Banner>
+    <div v-else>
+      <div
+        class="row mb-10"
+      >
+        <div class="col span-6">
+          <LabeledInput
+            v-model="value.parameters.hostStorageClass"
+            :label="t('storageClass.harvesterhci.hostStorageClass.label')"
+            :placeholder="t('storageClass.harvesterhci.hostStorageClass.placeholder')"
+            :mode="mode"
+            :tooltip="t('storageClass.harvesterhci.hostStorageClass.tooltip')"
+          />
+        </div>
+      </div>
+      <KeyValue
+        v-model="parameters"
+        :add-label="t('storageClass.longhorn.addLabel')"
+        :read-allowed="false"
+        :mode="mode"
+      />
+    </div>
+  </div>
+</template>

package/edit/workload/__tests__/index.test.ts

@@ -0,0 +1,98 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Workload from '@shell/edit/workload/index.vue';
+
+jest.mock('@shell/models/secret', () => ({ onmessage: jest.fn() }));
+
+describe('component: Workload', () => {
+  it.each([
+    [
+      `pods \"test\" is forbidden: violates PodSecurity \"restricted:latest\": allowPrivilegeEscalation != false (container \"container-0\" must set securityContext.allowPrivilegeEscalation=false), unrestricted capabilities (container \"container-0\" must set securityContext.capabilities.drop=[\"ALL\"]), runAsNonRoot != true (container \"container-0\" must not set securityContext.runAsNonRoot=false), seccompProfile (pod or container \"container-0\" must set securityContext.seccompProfile.type to \"RuntimeDefault\" or \"Localhost\")`,
+      `Pod "test" Security Policy Violation "restricted:latest"`
+    ]
+  ])('should map error message into object', (oldMessage, newMessage) => {
+    const mockedValidationMixin = {
+      methods: {
+        fvFormIsValid:                jest.fn(),
+        type:                         jest.fn(),
+        fvUnreportedValidationErrors: jest.fn(),
+        fvGetAndReportPathRules:      jest.fn(),
+      }
+    };
+    const mockedCREMixin = {};
+    const mockedWorkloadMixin = {
+      methods: {
+        doneRoute:                   jest.fn(),
+        workloadSubTypes:            jest.fn(),
+        applyHooks:                  jest.fn(),
+        save:                        jest.fn(),
+        selectType:                  jest.fn(),
+        isCronJob:                   jest.fn(),
+        spec:                        jest.fn(),
+        isReplicable:                jest.fn(),
+        isStatefulSet:               jest.fn(),
+        headlessServices:            jest.fn(),
+        defaultTab:                  jest.fn(),
+        allContainers:               jest.fn(),
+        isPod:                       jest.fn(),
+        tabWeightMap:                jest.fn(),
+        podLabels:                   jest.fn(),
+        podTemplateSpec:             jest.fn(),
+        isLoadingSecondaryResources: jest.fn(),
+        allNodes:                    jest.fn(),
+        allNodeObjects:              jest.fn(),
+        clearPvcFormState:           jest.fn(),
+        savePvcHookName:             jest.fn(),
+        namespacedConfigMaps:        jest.fn(),
+        podAnnotations:              jest.fn(),
+        isJob:                       jest.fn(),
+        podFsGroup:                  jest.fn(),
+        namespacedSecrets:           jest.fn(),
+        registerBeforeHook:          jest.fn(),
+        pvcs:                        jest.fn(),
+        // tabWeightMap:     jest.fn(),
+      }
+    };
+    const localVue = createLocalVue();
+    const MockedWorkload = { ...Workload, mixins: [mockedValidationMixin, mockedCREMixin, mockedWorkloadMixin] };
+    const wrapper = shallowMount(MockedWorkload, {
+      localVue,
+      propsData: {
+        value:         { metadata: {}, spec: { template: {} } },
+        params:        {},
+        fvFormIsValid: {}
+      },
+      mocks: {
+        $route:      { params: {}, query: {} },
+        $router:     { applyQuery: jest.fn() },
+        $fetchState: { pending: false },
+        $store:      {
+          getters: {
+            'cluster/schemaFor': jest.fn(),
+            'type-map/labelFor': jest.fn(),
+            'i18n/t':            jest.fn(),
+          },
+        },
+      },
+      stubs: {
+        Tab:                 true,
+        LabeledInput:        true,
+        VolumeClaimTemplate: true,
+        Networking:          true,
+        Job:                 true,
+        NodeScheduling:      true,
+        PodAffinity:         true,
+        Tolerations:         true,
+        Storage:             true,
+        Tabbed:              true,
+        LabeledSelect:       true,
+        NameNsDescription:   true,
+        CruResource:         true,
+        KeyValue:            true
+      }
+    });
+
+    const result = (wrapper.vm as any).mapError(oldMessage).message;
+
+    expect(result).toStrictEqual(newMessage);
+  });
+});

package/edit/workload/index.vue

@@ -22,12 +22,48 @@ export default {
   },
   methods: {
     changed(tab) {
+      const key = this.idKey;
+
       this.selectedName = tab.selectedName;
-      const container = this.containerOptions.find( c => c.name === tab.selectedName);
+      const container = this.containerOptions.find( c => c[key] === tab.selectedName);
 
       if ( container ) {
         this.selectContainer(container);
       }
+    },
+
+    /**
+     * Find error exceptions to be mapped for each case
+     */
+    mapError(error) {
+      switch (true) {
+      case error.includes('violates PodSecurity'): {
+        const match = error.match(/\"(.*?)\"/gi);
+        const name = match[0];
+        const policy = match[1];
+
+        return {
+          message: `Pod ${ name } Security Policy Violation ${ policy }`,
+          icon:    'icon-pod_security'
+        };
+      }
+
+      default:
+        break;
+      }
+    },
+
+    /**
+     * Map all the error texts to a message and icon object
+     */
+    getErrorsMap(errors) {
+      return !errors || !Array.isArray(errors) ? {} : errors.reduce((acc, error) => ({
+        ...acc,
+        [error]: this.mapError(error) || {
+          message: error,
+          icon:    null
+        }
+      }), {});
     }
   }
 };
@@ -49,6 +85,7 @@ export default {
       :subtypes="workloadSubTypes"
       :apply-hooks="applyHooks"
       :value="value"
+      :errors-map="getErrorsMap(fvUnreportedValidationErrors)"
       @finish="save"
       @select-type="selectType"
       @error="e=>errors = e"
@@ -108,6 +145,7 @@ export default {
         </div>
       </div>
       <Tabbed
+        ref="containersTabbed"
         class="deployment-tabs"
         :show-tabs-add-remove="true"
         :default-tab="defaultTab"
@@ -116,9 +154,9 @@ export default {
       >
         <Tab
           v-for="(tab, i) in allContainers"
-          :key="i"
+          :key="tab[idKey]"
           :label="tab.name"
-          :name="tab.name"
+          :name="tab[idKey]"
           :weight="tab.weight"
           :error="!!tab.error"
         >
@@ -160,11 +198,11 @@ export default {
                   <div class="col span-6">
                     <RadioGroup
                       :mode="mode"
-                      :value="isInitContainer"
+                      :value="allContainers[i]._init"
                       name="initContainer"
                       :options="[true, false]"
                       :labels="[t('workload.container.init'), t('workload.container.standard')]"
-                      @input="updateInitContainer"
+                      @input="updateInitContainer($event, allContainers[i])"
                     />
                   </div>
                 </div>
@@ -206,7 +244,16 @@ export default {
               </div>
               <div class="spacer" />
               <div>
-                <h3>{{ t('workload.container.titles.ports') }}</h3>
+                <h3>
+                  {{ t('workload.container.ports.expose') }}
+                  <i
+                    v-tooltip="t('workload.container.ports.toolTip')"
+                    class="icon icon-info"
+                  />
+                </h3>
+                <p class="padded">
+                  {{ t('workload.container.ports.description') }}
+                </p>
                 <div class="row">
                   <WorkloadPorts
                     v-model="allContainers[i].ports"
@@ -260,7 +307,7 @@ export default {
             </Tab>
 
             <Tab
-              v-if="!isInitContainer"
+              v-if="!allContainers[i]._init"
               :label="t('workload.container.titles.healthCheck')"
               name="healthCheck"
               :weight="tabWeightMap['healthCheck']"
@@ -528,7 +575,7 @@ export default {
               class="btn-sm role-link"
               @click="addContainerBtn"
             >
-              <i class="icon icon-plus icon-lg" /> {{ t('workload.container.addContainer') }}
+              <i class="icon icon-plus pr-5" /> {{ t('workload.container.addContainer') }}
             </button>
           </li>
         </template>
@@ -597,4 +644,7 @@ export default {
     margin-bottom: 10px;
   }
 }
+.padded {
+  padding-bottom: 10px;
+}
 </style>