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

package/components/form/HookOption.vue

@@ -128,7 +128,7 @@ export default {
     </div>
 
     <template v-if="selectHook === 'exec'">
-      <div class="mb-20 single-value">
+      <div class="col single-value mt-20">
         <h4>{{ t('workload.container.lifecycleHook.exec.title') }}</h4>
         <div>
           <ShellInput
@@ -143,65 +143,61 @@ export default {
     </template>
 
     <template v-if="selectHook === 'httpGet'">
-      <h4>{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
+      <div class="mt-20"></div>
+      <h4 class="mb-10">{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
       <div class="var-row">
-        <LabeledInput
-          v-model:value="value.httpGet.host"
-          :label="t('workload.container.lifecycleHook.httpGet.host.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
-          :mode="mode"
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value="value.httpGet.path"
-          :label="t('workload.container.lifecycleHook.httpGet.path.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
-          :mode="mode"
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value.number="value.httpGet.port"
-          type="number"
-          :label="t('workload.container.lifecycleHook.httpGet.port.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
-          :mode="mode"
-          required
-          @update:value="update"
-        />
-        <LabeledSelect
-          v-model:value="value.httpGet.scheme"
-          :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
-          :options="schemeOptions"
-          :mode="mode"
-          @update:value="update"
-        />
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.host"
+              :label="t('workload.container.lifecycleHook.httpGet.host.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.path"
+              :label="t('workload.container.lifecycleHook.httpGet.path.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value.number="value.httpGet.port"
+              type="number"
+              :label="t('workload.container.lifecycleHook.httpGet.port.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
+              :mode="mode"
+              required
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.httpGet.scheme"
+              :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
+              :options="schemeOptions"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
       </div>
 
-      <h4>{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
+      <h4 class="mb-10">{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
       <div
         v-for="(header, index) in value.httpGet.httpHeaders"
         :key="index"
         class="var-row"
         data-testid="hookoption-header-row"
       >
-        <LabeledInput
-          v-model:value="value.httpGet.httpHeaders[index].name"
-          :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
-          class="single-value"
-          :mode="mode"
-          required
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value="value.httpGet.httpHeaders[index].value"
-          :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
-          class="single-value"
-          :mode="mode"
-          @update:value="update"
-        />
         <div class="remove">
           <button
             v-if="!isView"
@@ -213,18 +209,41 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.httpHeaders[index].name"
+              :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
+              class="single-value"
+              :mode="mode"
+              required
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.httpHeaders[index].value"
+              :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
+              class="single-value"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
       </div>
 
       <div>
         <button
           v-if="!isView"
           type="button"
-          class="btn role-link mb-20"
+          class="btn role-link mb-20 httpAdd"
           :disabled="mode === 'view'"
           data-testid="hookoption-add-header-button"
           @click.stop="addHeader"
         >
-          Add Header
+          添加HTTP头
         </button>
       </div>
     </template>
@@ -233,11 +252,11 @@ export default {
 
 <style lang='scss' scoped>
 .var-row{
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 100px;
-  grid-column-gap: 20px;
-  margin-bottom: 20px;
-  align-items: center;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr 1fr 1fr 100px;
+  // grid-column-gap: 20px;
+  // margin-bottom: 20px;
+  // align-items: center;
 
   .single-value {
     grid-column: span 2;
@@ -248,6 +267,12 @@ export default {
   }
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 }
+.httpAdd{
+  background: var(--accent-btn);
+  border: solid 1px var(--primary);
+  color: var(--primary);
+}
 </style>

package/components/form/InputWithSelect.vue

@@ -30,7 +30,7 @@ export default {
 
     selectLabel: {
       type:    String,
-      default: '',
+      default: ' ',
     },
 
     selectValue: {
@@ -164,11 +164,12 @@ export default {
       :v-bind="$attrs"
       @update:value="change"
     />
+    <div style="width: 100%;height: 24px;"></div>
     <LabeledInput
       v-if="textLabel || textRules.length > 0"
       ref="text"
       v-model:value="string"
-      class="input-string col span-8"
+      class="input-string span-8"
       :label="textLabel"
       :placeholder="placeholder"
       :disabled="disabled || textDisabled"
@@ -204,7 +205,7 @@ export default {
 
   &.select-after {
     height: 100%;
-    flex-direction: row-reverse;
+    // flex-direction: row-reverse;
 
     & .input-string {
       border-radius: var(--border-radius) 0 0 var(--border-radius);
@@ -270,19 +271,19 @@ export default {
     margin-right: 0;
 
     &:hover:not(.focused):not(.disabled):not(.view) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &:hover:not(.focused):not(.disabled) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &.labeled-select.focused :deep(),

package/components/form/KeyValue.vue

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

package/components/form/MatchExpressions.vue

@@ -413,7 +413,7 @@ export default {
           v-if="!isView"
           type="button"
           class="btn role-link"
-          :style="{padding:'0px'}"
+          :style="{padding:'0px', minWidth: 'auto'}"
 
           :disabled="mode==='view'"
           :data-testid="`input-match-expression-remove-control-${index}`"
@@ -425,7 +425,6 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mmt-4"
     >
       <button
         type="button"

package/components/form/Networking.vue

@@ -236,7 +236,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div class="mt-20">
       <div class="row">

package/components/form/NodeAffinity.vue

@@ -210,33 +210,31 @@ export default {
         @remove="remove"
       >
         <template #default="props">
-          <div class="row">
-            <div class="col span-9">
-              <LabeledSelect
-                :options="affinityOptions"
-                :value="priorityDisplay(props.row.value)"
-                :label="t('workload.scheduling.affinity.priority')"
-                :mode="mode"
-                :data-testid="`node-affinity-priority-index${props.i}`"
-                @update:value="(changePriority(props.row.value))"
-              />
-            </div>
-            <div
-              v-if="'weight' in props.row.value"
-              class="col span-3"
-            >
-              <LabeledInput
-                v-model:value.number="props.row.value.weight"
-                :mode="mode"
-                type="number"
-                min="1"
-                max="100"
-                :label="t('workload.scheduling.affinity.weight.label')"
-                :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
-                :data-testid="`node-affinity-weight-index${props.i}`"
-                @update:value="update"
-              />
-            </div>
+          <div class="col">
+            <LabeledSelect
+              :options="affinityOptions"
+              :value="priorityDisplay(props.row.value)"
+              :label="t('workload.scheduling.affinity.priority')"
+              :mode="mode"
+              :data-testid="`node-affinity-priority-index${props.i}`"
+              @update:value="(changePriority(props.row.value))"
+            />
+          </div>
+          <div
+            v-if="'weight' in props.row.value"
+            class="col"
+          >
+            <LabeledInput
+              v-model:value.number="props.row.value.weight"
+              :mode="mode"
+              type="number"
+              min="1"
+              max="100"
+              :label="t('workload.scheduling.affinity.weight.label')"
+              :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
+              :data-testid="`node-affinity-weight-index${props.i}`"
+              @update:value="update"
+            />
           </div>
           <MatchExpressions
             :value="matchingSelectorDisplay ? props.row.value : props.row.value.matchExpressions"
@@ -254,5 +252,8 @@ export default {
   </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
+.weight_input{
+  margin-left: 10px;
+}
 </style>

package/components/form/PodAffinity.vue

@@ -370,27 +370,25 @@ export default {
         @remove="remove"
       >
         <template #default="props">
-          <div class="row mt-20">
-            <div class="col span-6">
-              <LabeledSelect
-                :mode="mode"
-                :options="[t('workload.scheduling.affinity.affinityOption'),t('workload.scheduling.affinity.antiAffinityOption')]"
-                :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
-                :label="t('workload.scheduling.affinity.type')"
-                :data-testid="`pod-affinity-type-index${props.i}`"
-                @update:value="props.row.value._anti = !props.row.value._anti"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledSelect
-                :mode="mode"
-                :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
-                :value="priorityDisplay(props.row.value)"
-                :label="t('workload.scheduling.affinity.priority')"
-                :data-testid="`pod-affinity-priority-index${props.i}`"
-                @update:value="changePriority(props.row.value, props.i)"
-              />
-            </div>
+          <div class="col">
+            <LabeledSelect
+              :mode="mode"
+              :options="[t('workload.scheduling.affinity.affinityOption'),t('workload.scheduling.affinity.antiAffinityOption')]"
+              :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
+              :label="t('workload.scheduling.affinity.type')"
+              :data-testid="`pod-affinity-type-index${props.i}`"
+              @update:value="props.row.value._anti = !props.row.value._anti"
+            />
+          </div>
+          <div class="col">
+            <LabeledSelect
+              :mode="mode"
+              :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
+              :value="priorityDisplay(props.row.value)"
+              :label="t('workload.scheduling.affinity.priority')"
+              :data-testid="`pod-affinity-priority-index${props.i}`"
+              @update:value="changePriority(props.row.value, props.i)"
+            />
           </div>
           <div class="row mb-20">
             <RadioGroup

package/components/form/Probe.vue

@@ -160,7 +160,7 @@ export default {
     <div class="row">
       <div
         data-testid="input-probe-kind"
-        class="col span-11-of-23"
+        class="span-9-of-23"
       >
         <LabeledSelect
           v-model:value="kind"
@@ -240,7 +240,7 @@ export default {
         </div>
       </div>
 
-      <div class="col span-1-of-13">
+      <div class="span-1-of-13">
         <hr
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
@@ -252,12 +252,12 @@ export default {
       <!-- none -->
       <div
         v-if="!isNone"
-        class="col span-11-of-23"
+        class="span-11-of-23 ml-30"
       >
         <div class="row">
           <div
             data-testid="input-probe-periodSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.periodSeconds"
@@ -269,9 +269,12 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        
+        <div class="row">
           <div
             data-testid="input-probe-initialDelaySeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.initialDelaySeconds"
@@ -283,9 +286,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-timeoutSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.timeoutSeconds"
@@ -299,12 +304,10 @@ export default {
           </div>
         </div>
 
-        <div class="spacer-small" />
-
         <div class="row">
           <div
             data-testid="input-probe-successThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.successThreshold"
@@ -316,9 +319,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-failureThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.failureThreshold"
@@ -333,7 +338,6 @@ export default {
         </div>
 
         <template v-if="kind === 'HTTP' || kind === 'HTTPS'">
-          <div class="spacer-small" />
 
           <div class="row">
             <div class="col span-12">

package/components/form/ResourceSelector.vue

@@ -125,7 +125,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-12">
+      <div class="span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
           <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>

package/components/form/ServiceNameSelect.vue

@@ -122,9 +122,7 @@ export default {
   <div>
     <div class="spacer" />
     <div class="row mb-10">
-      <h3 class="col span-6">
-        {{ t('workload.serviceAccountName.label') }}
-      </h3>
+      <h3>{{ t('workload.serviceAccountName.label') }}</h3>
     </div>
     <div class="row span-6">
       <LabeledSelect