dashboard-shell-shell 3.0.5-test.13 → 3.0.5-test.14

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/aws-ebs.vue

@@ -104,34 +104,34 @@ export default {
 </script>
 <template>
   <div>
-    <div class="row mb-20">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <RadioGroup
           v-model:value="value.parameters.type"
           name="volumeType"
           :label="t('storageClass.aws-ebs.volumeType.label')"
           :mode="mode"
           :options="volumeTypeOptions"
+          class="mb-20"
         />
         <UnitInput
           v-if="value.parameters.type === 'io1' || value.parameters.type === 'gp3'"
           v-model:value="iopsPerGB"
-          class="mt-10"
           :label="t('storageClass.aws-ebs.volumeType.provisionedIops.label')"
           :suffix="t('storageClass.aws-ebs.volumeType.provisionedIops.suffix')"
           :mode="mode"
         />
-        <LabeledInput
-          v-model:value="value.parameters.fsType"
-          class="mt-10"
-          :placeholder="t('storageClass.aws-ebs.filesystemType.placeholder')"
-          :label="t('storageClass.aws-ebs.filesystemType.label')"
-          :mode="mode"
+        <div v-if="value.parameters.type === 'io1' || value.parameters.type === 'gp3'" style="height: 24px;"></div>
+        <LabeledInput
+          v-model:value="value.parameters.fsType"
+          :placeholder="t('storageClass.aws-ebs.filesystemType.placeholder')"
+          :label="t('storageClass.aws-ebs.filesystemType.label')"
+          :mode="mode"
         />
       </div>
     </div>
-    <div class="row mb-20">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <RadioGroup
           v-model:value="availabilityZone"
           name="availabilityZone"
@@ -139,17 +139,20 @@ export default {
           :mode="mode"
           :options="availabilityZoneOptions"
         />
-        <LabeledInput
-          v-if="availabilityZone === 'manual'"
-          v-model:value="value.parameters.zones"
-          class="mt-10"
-          :placeholder="t('storageClass.aws-ebs.availabilityZone.placeholder')"
-          :mode="mode"
-        />
+        <div style="display: flex;">
+          <div style="width: 160px;"></div>
+          <LabeledInput
+            v-if="availabilityZone === 'manual'"
+            v-model:value="value.parameters.zones"
+            class="mt-10"
+            :placeholder="t('storageClass.aws-ebs.availabilityZone.placeholder')"
+            :mode="mode"
+          />
+        </div>
       </div>
     </div>
     <div class="row">
-      <div class="col span-6">
+      <div class="col">
         <RadioGroup
           v-model:value="value.parameters.encrypted"
           name="encryption"
@@ -158,22 +161,26 @@ export default {
           :options="encryptionOptions"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <RadioGroup
           v-if="value.parameters.encrypted === 'true'"
           v-model:value="keyId"
-          class="mt-10"
           name="keyId"
           :label="t('storageClass.aws-ebs.keyId.label')"
           :mode="mode"
           :options="keyIdOptions"
         />
-        <LabeledInput
-          v-if="keyId === 'manual'"
-          v-model:value="value.parameters.kmsKeyId"
-          class="mt-10"
-          :mode="mode"
-        />
+        <div class="row">
+          <div v-if="keyId === 'manual'" style="min-width: 160px;"></div>
+          <LabeledInput
+            v-if="keyId === 'manual'"
+            v-model:value="value.parameters.kmsKeyId"
+            class="mt-10"
+            :mode="mode"
+          />
+        </div>
       </div>
     </div>
   </div>

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/gce-pd.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="row mb-20">
+    <div class="row">
       <div class="col span-6">
         <RadioGroup
           v-model:value="value.parameters.type"
@@ -77,14 +77,16 @@ export default {
           :mode="mode"
           :options="volumeTypeOptions"
         />
-        <LabeledInput
-          v-model:value="value.parameters.fsType"
-          class="mt-10"
-          :placeholder="t('storageClass.gce-pd.filesystemType.placeholder')"
-          :label="t('storageClass.gce-pd.filesystemType.label')"
-          :mode="mode"
+        <div style="height: 24px;"></div>
+        <LabeledInput
+          v-model:value="value.parameters.fsType"
+          :placeholder="t('storageClass.gce-pd.filesystemType.placeholder')"
+          :label="t('storageClass.gce-pd.filesystemType.label')"
+          :mode="mode"
         />
       </div>
+    </div>
+    <div class="row">
       <div class="col span-6">
         <RadioGroup
           v-model:value="availabilityZone"
@@ -93,12 +95,12 @@ export default {
           :mode="mode"
           :options="availabilityZoneOptions"
         />
-        <LabeledInput
-          v-if="availabilityZone === 'manual'"
-          v-model:value="value.parameters.zones"
-          class="mt-10"
-          :placeholder="t('storageClass.gce-pd.availabilityZone.placeholder')"
-          :mode="mode"
+        <LabeledInput
+          v-if="availabilityZone === 'manual'"
+          v-model:value="value.parameters.zones"
+          class="mt-10"
+          :placeholder="t('storageClass.gce-pd.availabilityZone.placeholder')"
+          :mode="mode"
         />
       </div>
     </div>

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/vsphere-volume.vue

@@ -41,55 +41,57 @@ export default {
 </script>
 <template>
   <div>
-    <div class="row mb-10">
-      <div class="col span-4">
-        <LabeledSelect
-          v-model:value="value.parameters.diskformat"
-          :options="diskFormatOptions"
-          :label="t('storageClass.vsphere-volume.diskFormat.label')"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-4">
-        <LabeledInput
-          v-model:value="value.parameters.storagePolicyName"
-          :placeholder="t('storageClass.vsphere-volume.storagePolicyName.placeholder')"
-          :label="t('storageClass.vsphere-volume.storagePolicyName.label')"
-          :mode="mode"
+    <div class="row">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model:value="value.parameters.diskformat"
+          :options="diskFormatOptions"
+          :label="t('storageClass.vsphere-volume.diskFormat.label')"
+          :mode="mode"
         />
       </div>
-      <div class="col span-4">
-        <LabeledInput
-          v-model:value="value.parameters.datastore"
-          :placeholder="t('storageClass.vsphere-volume.datastore.placeholder')"
-          :label="t('storageClass.vsphere-volume.datastore.label')"
-          :mode="mode"
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.parameters.storagePolicyName"
+          :placeholder="t('storageClass.vsphere-volume.storagePolicyName.placeholder')"
+          :label="t('storageClass.vsphere-volume.storagePolicyName.label')"
+          :mode="mode"
         />
       </div>
     </div>
     <div class="row">
-      <div class="col span-4">
-        <LabeledInput
-          v-model:value="value.parameters.hostFailuresToTolerate"
-          :placeholder="t('storageClass.vsphere-volume.hostFailuresToTolerate.placeholder')"
-          :label="t('storageClass.vsphere-volume.hostFailuresToTolerate.label')"
-          :mode="mode"
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.parameters.datastore"
+          :placeholder="t('storageClass.vsphere-volume.datastore.placeholder')"
+          :label="t('storageClass.vsphere-volume.datastore.label')"
+          :mode="mode"
         />
       </div>
-      <div class="col span-4">
-        <LabeledInput
-          v-model:value="value.parameters.cachereservation"
-          :placeholder="t('storageClass.vsphere-volume.cacheReservation.placeholder')"
-          :label="t('storageClass.vsphere-volume.cacheReservation.label')"
-          :mode="mode"
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.parameters.hostFailuresToTolerate"
+          :placeholder="t('storageClass.vsphere-volume.hostFailuresToTolerate.placeholder')"
+          :label="t('storageClass.vsphere-volume.hostFailuresToTolerate.label')"
+          :mode="mode"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.parameters.cachereservation"
+          :placeholder="t('storageClass.vsphere-volume.cacheReservation.placeholder')"
+          :label="t('storageClass.vsphere-volume.cacheReservation.label')"
+          :mode="mode"
         />
       </div>
-      <div class="col span-4">
-        <LabeledInput
-          v-model:value="value.parameters.fstype"
-          :placeholder="t('storageClass.vsphere-volume.filesystemType.placeholder')"
-          :label="t('storageClass.vsphere-volume.filesystemType.label')"
-          :mode="mode"
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.parameters.fstype"
+          :placeholder="t('storageClass.vsphere-volume.filesystemType.placeholder')"
+          :label="t('storageClass.vsphere-volume.filesystemType.label')"
+          :mode="mode"
         />
       </div>
     </div>

package/edit/workload/Job.vue

@@ -274,36 +274,34 @@ export default {
           </UnitInput>
         </div>
       </div>
-      <div class="row">
-        <div
-          data-testid="input-job-concurrencyPolicy"
+      <div
+        data-testid="input-job-concurrencyPolicy"
 
-          class="col span-6"
-        >
-          <RadioGroup
-            v-model:value="concurrencyPolicy"
-            :mode="mode"
-            :label="t('workload.upgrading.concurrencyPolicy.label')"
-            name="concurrency"
-            :options="['Allow', 'Forbid', 'Replace']"
-            :labels="[t('workload.upgrading.concurrencyPolicy.options.allow'), t('workload.upgrading.concurrencyPolicy.options.forbid'), t('workload.upgrading.concurrencyPolicy.options.replace')]"
-            @update:value="update"
-          />
-        </div>
-        <div
-          data-testid="input-job-suspend"
-          class="col span-6"
-        >
-          <RadioGroup
-            v-model:value="suspend"
-            :mode="mode"
-            :label="t('workload.job.suspend')"
-            name="suspend"
-            :options="[true, false]"
-            :labels="['Yes', 'No']"
-            @update:value="update"
-          />
-        </div>
+        class="col span-8"
+      >
+        <RadioGroup
+          v-model:value="concurrencyPolicy"
+          :mode="mode"
+          :label="t('workload.upgrading.concurrencyPolicy.label')"
+          name="concurrency"
+          :options="['Allow', 'Forbid', 'Replace']"
+          :labels="[t('workload.upgrading.concurrencyPolicy.options.allow'), t('workload.upgrading.concurrencyPolicy.options.forbid'), t('workload.upgrading.concurrencyPolicy.options.replace')]"
+          @update:value="update"
+        />
+      </div>
+      <div
+        data-testid="input-job-suspend"
+        class="col span-8"
+      >
+        <RadioGroup
+          v-model:value="suspend"
+          :mode="mode"
+          :label="t('workload.job.suspend')"
+          name="suspend"
+          :options="[true, false]"
+          :labels="['Yes', 'No']"
+          @update:value="update"
+        />
       </div>
     </template>
     <div

package/edit/workload/Upgrading.vue

@@ -223,7 +223,7 @@ export default {
     <!--workload  spec.upgradeStrategy -->
     <div
       v-if="strategyOptions && !noDeploymentSpec"
-      class="row mb-20"
+      class="row"
     >
       <div
         class="col"
@@ -260,7 +260,7 @@ export default {
     <template v-if="strategy === 'RollingUpdate' && !noDeploymentSpec">
       <div
         v-if="isDeployment || isDaemonSet"
-        class="row mb-20"
+        class="row"
         data-testid="input-policy-surge"
       >
         <div
@@ -299,7 +299,7 @@ export default {
     <!-- workload spec -->
     <div
       v-if="!noDeploymentSpec"
-      class="row mb-20"
+      class="row"
     >
       <div
         v-if="!isStatefulSet"

package/edit/workload/index.vue

@@ -186,6 +186,7 @@ export default {
                   type="button"
                   class="btn-sm role-link"
                   @click="removeContainer(tab)"
+                  style="min-width: auto;padding-left: 0;"
                 >
                   {{ t('workload.container.removeContainer') }}
                 </button>
@@ -214,7 +215,7 @@ export default {
                   </div>
                 </div>
                 <h3>{{ t('workload.container.titles.image') }}</h3>
-                <div class="row mb-20">
+                <div class="row">
                   <div class="col span-6">
                     <LabeledInput
                       v-model:value.trim="allContainers[i].image"
@@ -250,7 +251,6 @@ export default {
                   </div>
                 </div>
               </div>
-              <div class="spacer" />
               <div>
                 <h3>
                   {{ t('workload.container.ports.expose') }}

package/edit/workload/storage/Mount.vue

@@ -148,6 +148,7 @@ export default {
 
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 }
 

package/edit/workload/storage/awsElasticBlockStore.vue

@@ -26,8 +26,8 @@ export default {
 
 <template>
   <div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col mr-10">
         <LabeledInput
           v-model:value="value.name"
           :required="true"
@@ -35,7 +35,7 @@ export default {
           :label="t('workload.storage.volumeName')"
         />
       </div>
-      <div class="col span-6">
+      <div class="col" style="display: flex;align-items: center;">
         <Checkbox
           v-model:value="value.awsElasticBlockStore.readOnly"
           :mode="mode"
@@ -43,8 +43,8 @@ export default {
         />
       </div>
     </div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.awsElasticBlockStore.volumeID"
           :required="true"
@@ -52,7 +52,9 @@ export default {
           :label="t('workload.storage.csi.volumeID')"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value.number="value.awsElasticBlockStore.partition"
           :mode="mode"
@@ -61,7 +63,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-6">
+      <div class="col">
         <LabeledInput
           v-model:value="value.awsElasticBlockStore.fsType"
           :mode="mode"

package/edit/workload/storage/azureDisk.vue

@@ -34,8 +34,8 @@ export default {
 
 <template>
   <div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col mr-10">
         <LabeledInput
           v-model:value="value.name"
           :required="true"
@@ -43,7 +43,7 @@ export default {
           :label="t('workload.storage.volumeName')"
         />
       </div>
-      <div class="col span-6">
+      <div class="col" style="display: flex;align-items: center;">
         <Checkbox
           v-model:value="value.azureDisk.readOnly"
           :mode="mode"
@@ -51,8 +51,8 @@ export default {
         />
       </div>
     </div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.azureDisk.diskName"
           :mode="mode"
@@ -60,7 +60,9 @@ export default {
           :label="t('workload.storage.csi.diskName')"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value.number="value.azureDisk.diskURI"
           :mode="mode"
@@ -69,8 +71,8 @@ export default {
         />
       </div>
     </div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <RadioGroup
           v-model:value="value.azureDisk.kind"
           :mode="mode"
@@ -80,7 +82,9 @@ export default {
           :labels="[t('workload.storage.csi.kind.options.dedicated'), t('workload.storage.csi.kind.options.managed'), t('workload.storage.csi.kind.options.shared')]"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <RadioGroup
           v-model:value="value.azureDisk.cachingMode"
           name="cachingMode"
@@ -92,7 +96,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-6">
+      <div class="col">
         <LabeledInput
           v-model:value="value.azureDisk.fsType"
           :mode="mode"

package/edit/workload/storage/azureFile.vue

@@ -26,8 +26,8 @@ export default {
 
 <template>
   <div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col mr-10">
         <LabeledInput
           v-model:value="value.name"
           :required="true"
@@ -35,7 +35,7 @@ export default {
           :label="t('workload.storage.volumeName')"
         />
       </div>
-      <div class="col span-6">
+      <div class="col" style="display: flex;align-items: center;">
         <Checkbox
           v-model:value="value.azureFile.readOnly"
           :mode="mode"
@@ -43,8 +43,8 @@ export default {
         />
       </div>
     </div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.azureFile.shareName"
           :mode="mode"
@@ -52,7 +52,9 @@ export default {
           :label="t('workload.storage.csi.shareName')"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.azureFile.secretName"
           :mode="mode"
@@ -62,7 +64,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-6">
+      <div class="col">
         <LabeledInput
           v-model:value="value.azureFile.fsType"
           :mode="mode"

package/edit/workload/storage/csi/index.vue

@@ -77,8 +77,8 @@ export default {
 <template>
   <div>
     <div>
-      <div class="row mb-10">
-        <div class="col span-6">
+      <div class="row">
+        <div class="col mr-10">
           <LabeledInput
             v-model:value="value.name"
             :required="true"
@@ -86,7 +86,7 @@ export default {
             :label="t('workload.storage.volumeName')"
           />
         </div>
-        <div class="col span-6">
+        <div class="col" style="display: flex;align-items: center;">
           <Checkbox
             v-model:value="value.csi.readOnly"
             :mode="mode"
@@ -94,8 +94,8 @@ export default {
           />
         </div>
       </div>
-      <div class="row mb-10">
-        <div class="col span-6">
+      <div class="row">
+        <div class="col">
           <LabeledSelect
             v-model:value="value.csi.driver"
             data-testid="workload-storage-driver"
@@ -107,10 +107,7 @@ export default {
           />
         </div>
       </div>
-      <div
-        v-if="driverComponent"
-        class="mb-10"
-      >
+      <div v-if="driverComponent">
         <component
           :is="driverComponent"
           v-model:value="value.csi.volumeAttributes"

package/edit/workload/storage/emptyDir.vue

@@ -52,8 +52,8 @@ export default {
 </script>
 <template>
   <div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.name"
           :required="true"
@@ -61,7 +61,9 @@ export default {
           :label="t('workload.storage.volumeName')"
         />
       </div>
-      <div class="col span-6">
+    </div>
+    <div class="row">
+      <div class="col">
         <LabeledSelect
           v-model:value="medium"
           :mode="mode"
@@ -71,8 +73,8 @@ export default {
         />
       </div>
     </div>
-    <div class="row mb-10">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <UnitInput
           v-model:value="value.emptyDir.sizeLimit"
           :mode="mode"