@rancher/shell 0.1.2 → 0.1.4

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 { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import { Port } from '@shell/utils/validators/formRules';
@@ -198,7 +198,8 @@ export default {
   },
 
   watch: {
-    'value.spec.selector': 'updateMatchingPods',
+    'value.metadata.namespace': 'updateMatchingPods',
+    'value.spec.selector':      'updateMatchingPods',
     'value.spec.sessionAffinity'(val) {
       if (val === 'ClientIP') {
         this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
@@ -240,21 +241,22 @@ export default {
 
   methods: {
     updateMatchingPods: throttle(function() {
-      const { allPods, value: { spec: { selector = { } } } } = this;
+      const { value: { spec: { selector = { } } } } = this;
+      const allInNamespace = this.allPods.filter(pod => pod.metadata.namespace === this.value?.metadata?.namespace);
 
       if (isEmpty(selector)) {
         this.matchingPods = {
           matched: 0,
-          total:   allPods.length,
+          total:   allInNamespace.length,
           none:    true,
           sample:  null,
         };
       } else {
-        const match = matching(allPods, selector);
+        const match = matching(allInNamespace, selector);
 
         this.matchingPods = {
           matched: match.length,
-          total:   allPods.length,
+          total:   allInNamespace.length,
           none:    match.length === 0,
           sample:  match[0] ? match[0].nameDisplay : null,
         };

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

@@ -26,6 +26,7 @@ describe('component: Upgrading', () => {
   });
 
   // TODO: #6179: Integrate test with component fix, as the scope is not to check the value of the input
+  // eslint-disable-next-line jest/no-disabled-tests
   it.skip.each([
     ['surge', 'maxSurge', '%'],
     ['unavailable', 'maxUnavailable', '%'],

package/edit/workload/index.vue

@@ -1,16 +1,12 @@
 <script>
-import WorkloadGeneric from './types/Generic';
-import WorkloadDeployment from './types/Deployment';
-
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
-  name:       'CruWorkload',
-  components: {
-    WorkloadGeneric,
-    WorkloadDeployment
-  },
-  props: {
+  name:       'WorkloadDeployments',
+  mixins:     [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
+  props:      {
     value: {
       type:     Object,
       required: true,
@@ -21,14 +17,378 @@ export default {
       default: 'create',
     },
   },
-  mixins: [WorkLoadMixin],
+  data() {
+    return { selectedName: null };
+  },
+  methods: {
+    changed(tab) {
+      this.selectedName = tab.selectedName;
+      const container = this.containerOptions.find( c => c.name === tab.selectedName);
+
+      if ( container ) {
+        this.selectContainer(container);
+      }
+    }
+  }
 };
 </script>
 
 <template>
-  <div>
-    <Loading v-if="$fetchState.pending" />
-    <WorkloadDeployment v-else-if="isDeployment" :mode="mode" :value="value" />
-    <WorkloadGeneric v-else :mode="mode" :value="value" />
-  </div>
+  <Loading v-if="$fetchState.pending" />
+  <form v-else class="filled-height">
+    <CruResource
+      :validation-passed="fvFormIsValid"
+      :selected-subtype="type"
+      :resource="value"
+      :mode="mode"
+      :errors="fvUnreportedValidationErrors"
+      :done-route="doneRoute"
+      :subtypes="workloadSubTypes"
+      :apply-hooks="applyHooks"
+      :value="value"
+      @finish="save"
+      @select-type="selectType"
+      @error="e=>errors = e"
+    >
+      <!-- <pre>{{ JSON.stringify(allContainers, null, 2) }}</pre> -->
+      <NameNsDescription
+        :value="value"
+        :mode="mode"
+        :rules="{name: fvGetAndReportPathRules('metadata.name'), namespace: fvGetAndReportPathRules('metadata.namespace'), description: []}"
+        @change="name=value.metadata.name"
+      />
+      <div v-if="isCronJob || isReplicable || isStatefulSet || containerOptions.length > 1" class="row mb-20">
+        <div v-if="isCronJob" class="col span-3">
+          <LabeledInput
+            v-model="spec.schedule"
+            type="cron"
+            required
+            :mode="mode"
+            :label="t('workload.cronSchedule')"
+            :rules="fvGetAndReportPathRules('spec.schedule')"
+            placeholder="0 * * * *"
+          />
+        </div>
+        <div v-if="isReplicable" class="col span-3">
+          <LabeledInput
+            v-model.number="spec.replicas"
+            type="number"
+            min="0"
+            required
+            :mode="mode"
+            :label="t('workload.replicas')"
+          />
+        </div>
+        <div v-if="isStatefulSet" class="col span-3">
+          <LabeledSelect
+            v-model="spec.serviceName"
+            option-label="metadata.name"
+            :reduce="service=>service.metadata.name"
+            :mode="mode"
+            :label="t('workload.serviceName')"
+            :options="headlessServices"
+            required
+          />
+        </div>
+      </div>
+      <Tabbed class="deployment-tabs" :show-tabs-add-remove="true" :default-tab="defaultTab" @changed="changed">
+        <Tab
+          v-for="(tab, i) in allContainers"
+          :key="i+tab.name"
+          :label="tab.name"
+          :name="tab.name"
+          :weight="tab.weight"
+          :error="!!tab.error"
+        >
+          <Tabbed :side-tabs="true" :weight="99">
+            <Tab :label="t('workload.container.titles.general')" name="general" :weight="tabWeightMap['general']" :error="tabErrors.general">
+              <template #tab-header-right class="tab-content-controls">
+                <button v-if="allContainers.length > 1 && !isView" type="button" class="btn-sm role-link" @click="removeContainer(tab)">
+                  {{ t('workload.container.removeContainer') }}
+                </button>
+              </template>
+              <div>
+                <div :style="{'align-items':'center'}" class="row mb-20">
+                  <div class="col span-6">
+                    <LabeledInput v-model="container.name" :mode="mode" :label="t('workload.container.containerName')" />
+                  </div>
+                  <div class="col span-6">
+                    <RadioGroup
+                      :mode="mode"
+                      :value="isInitContainer"
+                      name="initContainer"
+                      :options="[true, false]"
+                      :labels="[t('workload.container.init'), t('workload.container.standard')]"
+                      @input="updateInitContainer"
+                    />
+                  </div>
+                </div>
+                <h3>{{ t('workload.container.titles.image') }}</h3>
+                <div class="row mb-20">
+                  <div class="col span-6">
+                    <LabeledInput
+                      v-model.trim="container.image"
+                      :mode="mode"
+                      :label="t('workload.container.image')"
+                      :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
+                      :rules="fvGetAndReportPathRules('image')"
+                    />
+                  </div>
+                  <div class="col span-6">
+                    <LabeledSelect
+                      v-model="container.imagePullPolicy"
+                      :label="t('workload.container.imagePullPolicy')"
+                      :options="pullPolicyOptions"
+                      :mode="mode"
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col span-6">
+                    <LabeledSelect
+                      v-model="imagePullSecrets"
+                      :label="t('workload.container.imagePullSecrets')"
+                      :multiple="true"
+                      :taggable="true"
+                      :options="imagePullNamespacedSecrets"
+                      :mode="mode"
+                      option-label="metadata.name"
+                      :reduce="service=>service.metadata.name"
+                      :create-option="createOption"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="spacer" />
+              <div>
+                <h3>{{ t('workload.container.titles.ports') }}</h3>
+                <div class="row">
+                  <WorkloadPorts v-model="allContainers[i].ports" :name="value.metadata.name" :services="servicesOwned" :mode="mode" />
+                </div>
+              </div>
+              <div class="spacer" />
+              <div>
+                <h3>{{ t('workload.container.titles.command') }}</h3>
+                <Command v-model="allContainers[i]" :secrets="namespacedSecrets" :config-maps="namespacedConfigMaps" :mode="mode" />
+              </div>
+              <ServiceNameSelect
+                :value="podTemplateSpec.serviceAccountName"
+                :mode="mode"
+                :select-label="t('workload.serviceAccountName.label')"
+                :select-placeholder="t('workload.serviceAccountName.label')"
+                :options="namespacedServiceNames"
+                option-label="metadata.name"
+                @input="updateServiceAccount"
+              />
+              <div class="spacer" />
+              <div>
+                <h3>{{ t('workload.container.titles.lifecycle') }}</h3>
+                <LifecycleHooks v-model="allContainers[i].lifecycle" :mode="mode" />
+              </div>
+            </Tab>
+            <Tab :label="t('workload.container.titles.resources')" name="resources" :weight="tabWeightMap['resources']">
+              <!-- Resources and Limitations -->
+              <ContainerResourceLimit v-model="flatResources" :mode="mode" :show-tip="false" />
+            </Tab>
+
+            <Tab v-if="!isInitContainer" :label="t('workload.container.titles.healthCheck')" name="healthCheck" :weight="tabWeightMap['healthCheck']">
+              <HealthCheck :value="allContainers[i]" :mode="mode" @input="Object.assign(allContainers[i], $event)" />
+            </Tab>
+            <Tab :label="t('workload.container.titles.securityContext')" name="securityContext" :weight="tabWeightMap['securityContext']">
+              <Security v-model="allContainers[i].securityContext" :mode="mode" />
+            </Tab>
+            <Tab :label="t('workload.storage.title')" name="storage" :weight="tabWeightMap['storage']">
+              <ContainerMountPaths
+                v-model="podTemplateSpec"
+                :namespace="value.metadata.namespace"
+                :register-before-hook="registerBeforeHook"
+                :mode="mode"
+                :secrets="namespacedSecrets"
+                :config-maps="namespacedConfigMaps"
+                :container="allContainers[i]"
+                :save-pvc-hook-name="savePvcHookName"
+                @removePvcForm="clearPvcFormState"
+              />
+            </Tab>
+          </Tabbed>
+        </Tab>
+        <Tab v-if="!isPod" :label="nameDisplayFor(type)" :name="nameDisplayFor(type)" :weight="99">
+          <Tabbed :side-tabs="true">
+            <Tab name="labels" label-key="generic.labelsAndAnnotations" :weight="tabWeightMap['labels']">
+              <Labels v-model="value" :mode="mode" />
+            </Tab>
+            <Tab :label="t('workload.container.titles.upgrading')" name="upgrading" :weight="tabWeightMap['upgrading']">
+              <Job v-if="isJob || isCronJob" v-model="spec" :mode="mode" :type="type" />
+              <Upgrading v-else v-model="spec" :mode="mode" :type="type" :no-pod-spec="true" />
+            </Tab>
+          </Tabbed>
+        </Tab>
+        <Tab :label="t('workload.tabs.labels.pod')" :name="'pod'" :weight="98">
+          <Tabbed :side-tabs="true">
+            <Tab :label="t('workload.storage.title')" name="storage" :weight="tabWeightMap['storage']">
+              <Storage
+                v-model="podTemplateSpec"
+                :namespace="value.metadata.namespace"
+                :register-before-hook="registerBeforeHook"
+                :mode="mode"
+                :secrets="namespacedSecrets"
+                :config-maps="namespacedConfigMaps"
+                :save-pvc-hook-name="savePvcHookName"
+                @removePvcForm="clearPvcFormState"
+              />
+            </Tab>
+            <Tab :label="t('workload.container.titles.resources')" name="resources" :weight="tabWeightMap['resources']">
+              <template>
+                <div>
+                  <h3 class="mb-10">
+                    <t k="workload.scheduling.titles.tolerations" />
+                  </h3>
+                  <div class="row">
+                    <Tolerations v-model="podTemplateSpec.tolerations" :mode="mode" />
+                  </div>
+                </div>
+
+                <div>
+                  <div class="spacer" />
+                  <h3 class="mb-10">
+                    <t k="workload.scheduling.titles.priority" />
+                  </h3>
+                  <div class="row">
+                    <div class="col span-6">
+                      <LabeledInput v-model.number="podTemplateSpec.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
+                    </div>
+                    <div class="col span-6">
+                      <LabeledInput v-model="podTemplateSpec.priorityClassName" :mode="mode" :label="t('workload.scheduling.priority.className')" />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </Tab>
+            <Tab :label="t('workload.container.titles.podScheduling')" name="podScheduling" :weight="tabWeightMap['podScheduling']">
+              <PodAffinity :mode="mode" :value="podTemplateSpec" :nodes="allNodeObjects" />
+            </Tab>
+            <Tab :label="t('workload.container.titles.nodeScheduling')" name="nodeScheduling" :weight="tabWeightMap['nodeScheduling']">
+              <NodeScheduling :mode="mode" :value="podTemplateSpec" :nodes="allNodes" />
+            </Tab>
+            <Tab :label="t('workload.container.titles.upgrading')" name="upgrading" :weight="tabWeightMap['upgrading']">
+              <Job v-if="isJob || isCronJob" v-model="spec" :mode="mode" :type="type" />
+              <Upgrading v-else v-model="spec" :mode="mode" :type="type" :no-deployment-spec="true" />
+            </Tab>
+            <Tab :label="t('workload.container.titles.securityContext')" name="securityContext" :weight="tabWeightMap['securityContext']">
+              <div>
+                <h3>{{ t('workload.container.security.podFsGroup') }}</h3>
+                <div class="row">
+                  <div class="col span-6">
+                    <LabeledInput v-model.number="podFsGroup" type="number" :mode="mode" :label="t('workload.container.security.fsGroup')" />
+                  </div>
+                </div>
+              </div>
+            </Tab>
+            <Tab :label="t('workload.container.titles.networking')" name="networking" :weight="tabWeightMap['networking']">
+              <Networking v-model="podTemplateSpec" :mode="mode" />
+            </Tab>
+            <Tab v-if="isStatefulSet" :label="t('workload.container.titles.volumeClaimTemplates')" name="volumeClaimTemplates" :weight="tabWeightMap['volumeClaimTemplates']">
+              <VolumeClaimTemplate v-model="spec" :mode="mode" />
+            </Tab>
+            <Tab name="labels" label-key="generic.labelsAndAnnotations" :weight="tabWeightMap['labels']">
+              <div>
+                <h3>{{ t('workload.container.titles.podLabels') }}</h3>
+                <div class="row mb-20">
+                  <KeyValue
+                    key="labels"
+                    v-model="podLabels"
+                    :add-label="t('labels.addLabel')"
+                    :mode="mode"
+                    :read-allowed="false"
+                    :protip="false"
+                  />
+                </div>
+                <div class="spacer" />
+                <h3>{{ t('workload.container.titles.podAnnotations') }}</h3>
+                <div class="row">
+                  <KeyValue
+                    key="annotations"
+                    v-model="podAnnotations"
+                    :add-label="t('labels.addAnnotation')"
+                    :mode="mode"
+                    :read-allowed="false"
+                    :protip="false"
+                  />
+                </div>
+              </div>
+            </Tab>
+          </Tabbed>
+        </Tab>
+        <template #tab-row-extras>
+          <li class="tablist-controls">
+            <button v-if="!isView" type="button" class="btn-sm role-link" @click="addContainerBtn">
+              <i class="icon icon-plus icon-lg" /> {{ t('workload.container.addContainer') }}
+            </button>
+          </li>
+        </template>
+      </Tabbed>
+    </CruResource>
+  </form>
 </template>
+
+<style lang='scss'>
+.container-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.type-placeholder {
+  color: white;
+  font-size: 2.5em;
+  height: 100%;
+  width: 100%;
+  background-color: var(--primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.type-description {
+  color: var(--input-label);
+}
+
+.next-dropdown {
+  display: inline-block;
+}
+
+.tab-external-controls {
+  display: flex;
+  justify-content: right;
+}
+
+.tab-content-controls {
+  display: flex;
+  justify-content: right;
+}
+
+.tablist-controls {
+  .role-link {
+    padding: 10px 15px;
+    min-height: unset;
+    line-height: unset;
+
+    &:focus {
+      background: none;
+      box-shadow: none;
+    }
+
+    &:hover {
+      border: none;
+    }
+  }
+
+}
+
+.deployment-tabs {
+  > .tabs.horizontal {
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 10px;
+  }
+}
+</style>

package/edit/workload/mixins/workload.js

@@ -9,6 +9,7 @@ import {
   PVC,
   SERVICE_ACCOUNT,
   CAPI,
+  POD,
 } from '@shell/config/types';
 import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
@@ -36,6 +37,7 @@ import CruResource from '@shell/components/CruResource';
 import Command from '@shell/components/form/Command';
 import LifecycleHooks from '@shell/components/form/LifecycleHooks';
 import Storage from '@shell/edit/workload/storage';
+import ContainerMountPaths from '@shell/edit/workload/storage/ContainerMountPaths.vue';
 import Labels from '@shell/components/form/Labels';
 import { RadioGroup } from '@components/Form/Radio';
 import { UI_MANAGED } from '@shell/config/labels-annotations';
@@ -43,6 +45,7 @@ import { removeObject } from '@shell/utils/array';
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import formRulesGenerator from '@shell/utils/validators/formRules';
+import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 
 const TAB_WEIGHT_MAP = {
   general:              99,
@@ -88,6 +91,7 @@ export default {
     Upgrading,
     VolumeClaimTemplate,
     WorkloadPorts,
+    ContainerMountPaths
   },
 
   mixins: [CreateEditView],
@@ -102,6 +106,15 @@ export default {
       type:    String,
       default: 'create',
     },
+
+    createOption: {
+      default: (text) => {
+        if (text) {
+          return { metadata: { name: text } };
+        }
+      },
+      type: Function
+    },
   },
 
   async fetch() {
@@ -148,21 +161,42 @@ export default {
 
     if (!this.value.spec) {
       this.value.spec = {};
+      if (this.value.type === POD) {
+        const podContainers = [{
+          imagePullPolicy: 'Always',
+          name:            `container-0`,
+        }];
+
+        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] } } };
+
+        this.$set(this.value, 'spec', podSpec);
+      }
+    }
+
+    if ((this.mode === _EDIT || this.mode === _VIEW ) && this.value.type === 'pod' ) {
+      const podSpec = { ...this.value.spec };
+
+      this.$set(this.value.spec, 'template', { spec: podSpec });
     }
 
     const spec = this.value.spec;
+    let podTemplateSpec = type === WORKLOAD_TYPES.CRON_JOB ? spec.jobTemplate.spec.template.spec : spec?.template?.spec;
+
+    let containers = podTemplateSpec.containers || [];
     let container;
-    const podTemplateSpec =
-      type === WORKLOAD_TYPES.CRON_JOB ? spec.jobTemplate.spec.template.spec : spec?.template?.spec;
-    let containers = podTemplateSpec.containers;
+
+    if (this.mode === _VIEW && this.value.type === 'pod' ) {
+      podTemplateSpec = spec;
+    }
 
     if (
       this.mode === _CREATE ||
       this.mode === _VIEW ||
-      (!createSidecar && !this.value.hasSidecars)
+      (!createSidecar && !this.value.hasSidecars) // hasSideCars = containers.length > 1 || initContainers.length;
     ) {
       container = containers[0];
     } else {
+      // This means that there are no containers.
       if (!podTemplateSpec.initContainers) {
         podTemplateSpec.initContainers = [];
       }
@@ -176,13 +210,15 @@ export default {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
         });
+
         containers = podTemplateSpec.initContainers;
       }
-      if (createSidecar) {
+      if (createSidecar || this.value.type === 'pod') {
         container = {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
         };
+
         containers.push(container);
       } else {
         container = containers[0];
@@ -217,7 +253,8 @@ export default {
       fvFormRuleSets:      [{
         path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
       }],
-      fvReportedValidationPaths: ['spec']
+      fvReportedValidationPaths: ['spec'],
+
     };
   },
 
@@ -226,6 +263,14 @@ export default {
       return { general: this.fvGetPathErrors(['image'])?.length > 0 };
     },
 
+    defaultTab() {
+      if (!!this.$route.query.sidecar || this.$route.query.init || this.mode === _CREATE) {
+        return 'container-0';
+      }
+
+      return this.allContainers.length ? this.allContainers[0].name : '';
+    },
+
     isEdit() {
       return this.mode === _EDIT;
     },
@@ -251,6 +296,10 @@ export default {
       return this.type === WORKLOAD_TYPES.DEPLOYMENT;
     },
 
+    isPod() {
+      return this.value.type === POD;
+    },
+
     isStatefulSet() {
       return this.type === WORKLOAD_TYPES.STATEFUL_SET;
     },
@@ -430,6 +479,12 @@ export default {
       }
     },
 
+    imagePullNamespacedSecrets() {
+      const namespace = this.value?.metadata?.namespace;
+
+      return this.allSecrets.filter(secret => secret.metadata.namespace === namespace && (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
+    },
+
     namespacedConfigMaps() {
       const namespace = this.value?.metadata?.namespace;
 
@@ -882,7 +937,7 @@ export default {
       }
     },
     nvidiaIsValid(nvidiaGpuLimit) {
-      if (!Number.isInteger(nvidiaGpuLimit)) {
+      if ( !Number.isInteger(parseInt(nvidiaGpuLimit)) ) {
         return false;
       }
       if (nvidiaGpuLimit === undefined) {