dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.61

package/components/form/ServicePorts.vue

@@ -125,7 +125,7 @@ export default {
 <template>
   <div>
     <div v-if="rows.length">
-      <div
+      <!-- <div
         class="ports-headers"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
@@ -169,77 +169,13 @@ export default {
           v-if="showRemove"
           class="remove"
         />
-      </div>
+      </div> -->
       <div
         v-for="(row, idx) in rows"
         :key="idx"
         class="ports-row"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
-        <div
-          v-if="padLeft"
-          class="left"
-        />
-        <div class="port-name">
-          <span v-if="isView">{{ row.name }}</span>
-          <input
-            v-else
-            ref="port-name"
-            v-model.number="row.name"
-            type="text"
-            :placeholder="t('servicePorts.rules.name.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div class="port">
-          <span v-if="isView">{{ row.port }}</span>
-          <input
-            v-else
-            ref="port"
-            v-model.number="row.port"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.listening.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showProtocol"
-          class="port-protocol"
-        >
-          <span v-if="isView">{{ row.protocol }}</span>
-          <Select
-            v-else
-            v-model:value="row.protocol"
-            :options="protocolOptions"
-            @update:value="queueUpdate"
-          />
-        </div>
-        <div class="target-port">
-          <span v-if="isView">{{ row.targetPort }}</span>
-          <input
-            v-else
-            v-model="row.targetPort"
-            :placeholder="t('servicePorts.rules.target.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showNodePort"
-          class="node-port"
-        >
-          <span v-if="isView">{{ row.nodePort }}</span>
-          <input
-            v-else
-            v-model.number="row.nodePort"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.node.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
         <div
           v-if="showRemove"
           class="remove"
@@ -252,7 +188,106 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <div class="flex">
+          <span class="port-name">
+            <t k="servicePorts.rules.name.label" />
+          </span>
+          <div class="port-name">
+            <span v-if="isView">{{ row.name }}</span>
+            <input
+              v-else
+              ref="port-name"
+              v-model.number="row.name"
+              type="text"
+              :placeholder="t('servicePorts.rules.name.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex">
+          <span class="port">
+            <t k="servicePorts.rules.listening.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.listeningPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+          </span>
+          <div class="port">
+            <span v-if="isView">{{ row.port }}</span>
+            <input
+              v-else
+              ref="port"
+              v-model.number="row.port"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.listening.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showProtocol">
+          <span
+            class="port-protocol"
+          >
+            <t k="servicePorts.rules.protocol.label" />
+          </span>
+          <div
+            class="port-protocol"
+          >
+            <span v-if="isView">{{ row.protocol }}</span>
+            <Select
+              v-else
+              v-model:value="row.protocol"
+              :options="protocolOptions"
+              @update:value="queueUpdate"
+            />
+          </div>
+        </div>
+        <div class="flex">
+          <span class="target-port">
+            <t k="servicePorts.rules.target.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.targetPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+
+          </span>
+          <div class="target-port">
+            <span v-if="isView">{{ row.targetPort }}</span>
+            <input
+              v-else
+              v-model="row.targetPort"
+              :placeholder="t('servicePorts.rules.target.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showNodePort">
+          <span
+            class="node-port"
+          >
+            <t k="servicePorts.rules.node.label" />
+          </span>
+          <div
+            class="node-port"
+          >
+            <span v-if="isView">{{ row.nodePort }}</span>
+            <input
+              v-else
+              v-model.number="row.nodePort"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.node.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
         <Error
+          style="margin-bottom: 24px;"
           :value="{...row, idx}"
           :rules="rules"
         />
@@ -286,22 +321,60 @@ export default {
   }
 
   .ports-headers, .ports-row{
-    display: grid;
-    grid-column-gap: $column-gutter;
-    margin-bottom: 10px;
+    // display: grid;
+    // grid-column-gap: $column-gutter;
+    // margin-bottom: 10px;
+    // align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    // &.show-protocol{
+    //   grid-template-columns: 23% 23% 10% 15% 15% 10%;
+    //   &:not(.show-node-port){
+    //     grid-template-columns: 31% 31% 10% 15% 10%;
+    //   }
+    // }
+    // &.show-node-port:not(.show-protocol){
+    //   grid-template-columns: 28% 28% 15% 15% 10%;
+    // }
+  }
+  .flex{
+    display: flex;
     align-items: center;
+    margin-bottom: 24px;
+    >span:nth-child(1){
+      min-width: 160px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+    }
 
-    &.show-protocol{
-      grid-template-columns: 23% 23% 10% 15% 15% 10%;
-      &:not(.show-node-port){
-        grid-template-columns: 31% 31% 10% 15% 10%;
+    .port-name:not(span){
+      width: 400px;
+
+    }
+    .port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
       }
     }
-    &.show-node-port:not(.show-protocol){
-      grid-template-columns: 28% 28% 15% 15% 10%;
+    .target-port:not(span){
+      width: 400px;
+    }
+    .node-port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
+      }
     }
   }
 
+  .flex:nth-last-child{
+    margin-bottom: 0px;
+  }
   .ports-headers {
     color: var(--input-label);
   }
@@ -312,6 +385,7 @@ export default {
 
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 
   .ports-row {

package/components/form/SimpleSecretSelector.vue

@@ -24,13 +24,14 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 const NONE = '__[[NONE]]__';
 
 export default {
   emits: ['updateSecretName', 'updateSecretKey'],
 
-  components: { LabeledSelect, ResourceLabeledSelect },
+  components: { LabeledSelect, ResourceLabeledSelect, LabeledInput },
 
   props: {
     test:        { type: String, default: '' },
@@ -199,10 +200,18 @@ export default {
 
 <template>
   <div class="secret-selector show-key-selector">
-    <div class="input-container">
-      <ResourceLabeledSelect
+    <div class="input-container row">
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="name"
+          :mode="mode"
+          :label="secretNameLabel"
+          @update:value="$emit('updateSecretName', $event)"
+          :placeholder="'请输入'+secretNameLabel"
+        />
+        <!-- <ResourceLabeledSelect
         v-model:value="name"
-        class="col span-6"
+       
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
         :label="secretNameLabel"
@@ -211,16 +220,27 @@ export default {
         :paginated-resource-settings="paginateSecretsSetting"
         :all-resources-settings="allSecretsSettings"
         @selecting="updateSecretName"
-      />
-      <LabeledSelect
+      /> -->
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="key"
+          :disabled="isKeyDisabled"
+          :mode="mode"
+          :label="keyNameLabel"
+          @update:value="$emit('updateSecretKey', $event)"
+        />
+      <!-- <LabeledSelect
         v-model:value="key"
-        class="col span-6"
+       
         :disabled="isKeyDisabled"
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
         @selecting="updateSecretKey"
-      />
+      /> -->
+     </div>
+     
     </div>
   </div>
 </template>
@@ -247,7 +267,7 @@ export default {
   &.show-key-selector {
     .input-container > * {
       display: inline-block;
-      width: 50%;
+      /* width: 50%; */
 
       &.labeled-select.focused {
         z-index: 10;

package/components/form/Taints.vue

@@ -112,6 +112,7 @@ export default {
 
 <style lang="scss" scoped>
   .compact-select {
-    height: 40px;
+    height: 32px;
+    overflow: hidden;
   }
 </style>

package/components/form/Tolerations.vue

@@ -202,7 +202,7 @@ export default {
       :key="index"
       class="rule"
     >
-      <div class="col">
+      <div>
         <LabeledInput
           v-model:value="rule.key"
           :mode="mode"
@@ -211,7 +211,7 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col">
+      <div>
         <Select
           id="operator"
           v-model:value="rule.operator"
@@ -222,7 +222,7 @@ export default {
         />
       </div>
       <template v-if="rule.operator==='Exists'">
-        <div class="col">
+        <div>
           <LabeledInput
             value="n/a"
             :mode="mode"
@@ -232,7 +232,7 @@ export default {
         </div>
       </template>
       <template v-else>
-        <div class="col">
+        <div>
           <LabeledInput
             v-model:value="rule.value"
             :mode="mode"
@@ -242,7 +242,7 @@ export default {
           />
         </div>
       </template>
-      <div class="col">
+      <div>
         <Select
           v-model:value="rule.effect"
           :options="effectOpts"
@@ -251,7 +251,7 @@ export default {
           @update:value="e=>updateEffect(e, rule)"
         />
       </div>
-      <div class="col">
+      <div>
         <UnitInput
           v-model:value="rule.tolerationSeconds"
           :disabled="rule.effect !== 'NoExecute'"
@@ -262,7 +262,7 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col remove">
+      <div class="remove">
         <button
           v-if="!isView"
           type="button"
@@ -294,9 +294,13 @@ export default {
 
 .rule, .toleration-headers{
   display: grid;
-  grid-template-columns: 20% 10% 20% 15% 20% 15%;
+  grid-template-columns: 13% 13% 13% 13% 13% 13%;
   grid-gap: 10px;
   align-items: center;
+  margin-bottom: 10px;
+  .unlabeled-select{
+    width: auto;
+  }
 }
 
 .rule {
@@ -308,10 +312,10 @@ export default {
 
 .toleration-headers SPAN {
   color: var(--input-label);
-  margin-bottom: 10px;
 }
 .remove BUTTON {
   padding: 0px;
+  min-width: auto;
 }
 .height-adjust-input {
   min-height: 42px;

package/components/form/UnitInput.vue

@@ -258,11 +258,11 @@ export default {
     @update:value="update"
     @blur="update($event.target.value)"
   >
-    <template #suffix>
+    <template #suffixNew>
       <div
         v-if="displayUnit"
         :id="describedById"
-        class="addon"
+        class="addonNew"
         :class="{'with-tooltip': tooltip || tooltipKey}"
       >
         {{ displayUnit }}
@@ -272,7 +272,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .addon.with-tooltip {
+  .addonNew.with-tooltip {
     padding-right: 42px;
   }
+  .addonNew {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+  }
 </style>