@rancher/shell 0.1.2 → 0.1.3

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,366 @@ 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>
+          </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"
+                :container="container"
+                :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

@@ -43,6 +43,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,
@@ -102,6 +103,15 @@ export default {
       type:    String,
       default: 'create',
     },
+
+    createOption: {
+      default: (text) => {
+        if (text) {
+          return { metadata: { name: text } };
+        }
+      },
+      type: Function
+    },
   },
 
   async fetch() {
@@ -138,6 +148,7 @@ export default {
   },
 
   data() {
+    let defaultTab;
     let type = this.$route.params.resource;
     const createSidecar = !!this.$route.query.sidecar;
     const isInitContainer = !!this.$route.query.init;
@@ -148,21 +159,48 @@ export default {
 
     if (!this.value.spec) {
       this.value.spec = {};
+      if (this.value.type === WORKLOAD_TYPES.POD) {
+        const podContainers = [{
+          imagePullPolicy: 'Always',
+          name:            `container-0`,
+        }];
+
+        defaultTab = 'container-0';
+
+        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] } } };
+
+        this.$set(this.value, 'spec', podSpec);
+      }
+    }
+
+    if (this.mode === _CREATE) {
+      defaultTab = 'container-0';
+    }
+
+    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 +214,18 @@ export default {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
         });
+        defaultTab = 'container-0';
+
         containers = podTemplateSpec.initContainers;
       }
-      if (createSidecar) {
+      if (createSidecar || this.value.type === 'pod') {
         container = {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
         };
+
+        defaultTab = 'container-0';
+
         containers.push(container);
       } else {
         container = containers[0];
@@ -217,7 +260,9 @@ export default {
       fvFormRuleSets:      [{
         path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
       }],
-      fvReportedValidationPaths: ['spec']
+      fvReportedValidationPaths: ['spec'],
+      defaultTab
+
     };
   },
 
@@ -251,6 +296,10 @@ export default {
       return this.type === WORKLOAD_TYPES.DEPLOYMENT;
     },
 
+    isPod() {
+      return this.value.type === WORKLOAD_TYPES.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) {

package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue

@@ -209,6 +209,7 @@ export default {
           :label="t('persistentVolumeClaim.capacity')"
           :increment="1024"
           :input-exponent="3"
+          :required="true"
           :output-modifier="true"
         />
       </div>