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

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/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,12 @@ 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;
+  .unlabeled-select{
+    width: auto;
+  }
 }
 
 .rule {
@@ -308,10 +311,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/ValueFromResource.vue

@@ -284,128 +284,141 @@ export default {
 
 <template>
   <div class="var-row">
-    <div class="type">
-      <LabeledSelect
-        v-model:value="type"
-        :mode="mode"
-        :multiple="false"
-        :options="options"
-        option-label="label"
-        :searchable="false"
-        :reduce="e=>e.value"
-        :label="t('workload.container.command.fromResource.type')"
-        @update:value="updateRow"
-      />
-    </div>
-
-    <div
-      v-if="!hideVariableName"
-      class="name"
-    >
-      <LabeledInput
-        v-model:value="name"
-        :label="nameLabel"
-        :placeholder="t('workload.container.command.fromResource.name.placeholder')"
-        :mode="mode"
-        @update:value="updateRow"
-      />
-    </div>
-
-    <div
-      v-if="type==='simple'"
-      class="single-value"
-    >
-      <LabeledInput
-        v-model:value="valStr"
-        :label="t('workload.container.command.fromResource.value.label')"
-        :placeholder="t('workload.container.command.fromResource.value.placeholder')"
-        :mode="mode"
-        @update:value="updateRow"
-      />
+    <div class="row">
+      <div class="remove">
+        <button
+          v-if="!isView"
+          type="button"
+          class="btn role-link"
+          @click.stop="$emit('remove')"
+        >
+          {{ t('generic.remove') }}
+        </button>
+      </div>
     </div>
 
-    <template v-else-if="needsSource">
-      <div :class="{'single-value': type === 'configMapRef' || type === 'secretRef'}">
+    <div class="row">
+      <div class="type span-6 col">
         <LabeledSelect
-          v-model:value="referenced"
-          :options="sourceOptions"
-          :multiple="false"
-          :get-option-label="opt=>get(opt, 'metadata.name') || opt"
-          :get-option-key="opt=>opt.id|| opt"
+          v-model:value="type"
           :mode="mode"
-          :label="sourceLabel"
-          :loading="loading"
-        />
-      </div>
-      <div v-if="type!=='secretRef' && type!== 'configMapRef'">
-        <LabeledSelect
-          v-model:value="key"
           :multiple="false"
-          :options="keys"
-          :mode="mode"
+          :options="options"
           option-label="label"
-          :label="t('workload.container.command.fromResource.key.label')"
-          :loading="loading"
+          :searchable="false"
+          :reduce="e=>e.value"
+          :label="t('workload.container.command.fromResource.type')"
           @update:value="updateRow"
         />
       </div>
-    </template>
-
-    <template v-else-if="type==='resourceFieldRef'">
-      <div>
+  
+      <div
+        v-if="!hideVariableName"
+        class="name span-6 col"
+      >
         <LabeledInput
-          v-model:value="refName"
-          :label="t('workload.container.command.fromResource.containerName')"
-          :placeholder="t('workload.container.command.fromResource.source.placeholder')"
+          v-model:value="name"
+          :label="nameLabel"
+          :placeholder="t('workload.container.command.fromResource.name.placeholder')"
           :mode="mode"
           @update:value="updateRow"
         />
       </div>
-      <div>
-        <LabeledSelect
-          v-model:value="key"
-          :label="t('workload.container.command.fromResource.key.label')"
-          :multiple="false"
-          :options="resourceKeyOpts"
-          :mode="mode"
-          :searchable="false"
-          :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
-          @update:value="updateRow"
-        />
-      </div>
-    </template>
+    </div>
 
-    <template v-else>
-      <div class="single-value">
+    <div class="row">
+      <div
+        v-if="type==='simple'"
+        class="single-value span-6 col"
+      >
         <LabeledInput
-          v-model:value="fieldPath"
-          :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
-          :label="t('workload.container.command.fromResource.key.label')"
+          v-model:value="valStr"
+          :label="t('workload.container.command.fromResource.value.label')"
+          :placeholder="t('workload.container.command.fromResource.value.placeholder')"
           :mode="mode"
           @update:value="updateRow"
         />
       </div>
-    </template>
-    <div class="remove">
-      <button
-        v-if="!isView"
-        type="button"
-        class="btn role-link"
-        @click.stop="$emit('remove')"
-      >
-        {{ t('generic.remove') }}
-      </button>
+  
+      <template v-else-if="needsSource">
+        <div
+          :class="{'single-value': type === 'configMapRef' || type === 'secretRef'}"
+          class="span-6 col"
+        >
+          <LabeledSelect
+            v-model:value="referenced"
+            :options="sourceOptions"
+            :multiple="false"
+            :get-option-label="opt=>get(opt, 'metadata.name') || opt"
+            :get-option-key="opt=>opt.id|| opt"
+            :mode="mode"
+            :label="sourceLabel"
+            :loading="loading"
+          />
+        </div>
+        <div
+          v-if="type!=='secretRef' && type!== 'configMapRef'"
+          class="span-6 col"
+        >
+          <LabeledSelect
+            v-model:value="key"
+            :multiple="false"
+            :options="keys"
+            :mode="mode"
+            option-label="label"
+            :label="t('workload.container.command.fromResource.key.label')"
+            :loading="loading"
+            @update:value="updateRow"
+          />
+        </div>
+      </template>
+  
+      <template v-else-if="type==='resourceFieldRef'">
+        <div class="span-6 col">
+          <LabeledInput
+            v-model:value="refName"
+            :label="t('workload.container.command.fromResource.containerName')"
+            :placeholder="t('workload.container.command.fromResource.source.placeholder')"
+            :mode="mode"
+            @update:value="updateRow"
+          />
+        </div>
+        <div class="span-6 col">
+          <LabeledSelect
+            v-model:value="key"
+            :label="t('workload.container.command.fromResource.key.label')"
+            :multiple="false"
+            :options="resourceKeyOpts"
+            :mode="mode"
+            :searchable="false"
+            :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
+            @update:value="updateRow"
+          />
+        </div>
+      </template>
+  
+      <template v-else>
+        <div class="single-value span-6 col">
+          <LabeledInput
+            v-model:value="fieldPath"
+            :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
+            :label="t('workload.container.command.fromResource.key.label')"
+            :mode="mode"
+            @update:value="updateRow"
+          />
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
 .var-row{
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 100px;
-  grid-column-gap: 20px;
-  margin-bottom: 10px;
-  align-items: center;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr 1fr 1fr 100px;
+  // grid-column-gap: 20px;
+  // margin-bottom: 10px;
+  // align-items: center;
 
   .single-value {
     grid-column: span 2;
@@ -413,6 +426,7 @@ export default {
 
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 }
 

package/components/nav/TopLevelMenu.vue

@@ -867,6 +867,7 @@ export default {
                 @click="hide()"
               >
                 <router-link
+                  v-if="a.value !== 'fleet'"
                   class="option"
                   :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
@@ -923,7 +924,7 @@ export default {
         <div
           class="footer"
         >
-          <div
+          <!-- <div
             v-if="canEditSettings"
             class="support"
             @click="hide()"
@@ -948,7 +949,7 @@ export default {
             >
               {{ aboutText }}
             </router-link>
-          </div>
+          </div> -->
         </div>
       </div>
     </transition>

package/components/nav/Type.vue

@@ -158,7 +158,7 @@ export default {
          <div v-else style="display: flex; align-items: center;" class="labelKey_menu">
           <i v-if="!type.labelDisplay || (type.labelDisplay && type.labelDisplay.indexOf('</i>') === -1)" class="icon icon-fw icon-globe" style="color: var(--muted);width: 32px;text-align: left;"></i>
            <span
-             v-clean-html="type.labelDisplay.replace('设置', '基础设置') || type.label"
+             v-clean-html="type.labelDisplay || type.label"
              class="label"
              :class="{'no-icon': !type.icon}"
            />

package/edit/autoscaling.horizontalpodautoscaler/external-metric.vue

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div>
-    <div class="row mb-20">
+    <div class="row">
       <MetricTarget
         v-model:value="value.target"
         :mode="mode"

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -215,7 +215,7 @@ export default {
           :label="t('hpa.tabs.target')"
           :weight="10"
         >
-          <div class="row mb-20">
+          <div class="row">
             <div class="col span-6">
               <LabeledSelect
                 v-model:value="value.spec.scaleTargetRef"
@@ -242,6 +242,8 @@ export default {
                 type="number"
               />
             </div>
+          </div>
+          <div class="row">
             <div class="col span-6">
               <LabeledInput
                 v-model:value.number="value.spec.maxReplicas"

package/edit/autoscaling.horizontalpodautoscaler/metric-identifier.vue

@@ -51,8 +51,8 @@ export default {
 
 <template>
   <div class="col span-12">
-    <div class="row mb-20">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledInput
           v-model:value="value.name"
           :mode="mode"