dashboard-shell-shell 3.0.5-test.5 → 3.0.5-test.51

package/components/form/ArrayListGrouped.vue

@@ -120,15 +120,16 @@ export default {
 
 <style lang="scss">
 .array-list-grouped {
-    & > .box {
+    .box {
+      border: 0px solid var(--tabbed-border) !important;
       position: relative;
       display: block;
 
       & > .remove {
         position: absolute;
 
-        top: 10px;
-        right: 10px;
+        top: 0px !important;
+        right: 0px !important;
         & > .close{
           width: 32px;
           min-width: 32px !important;
@@ -140,6 +141,7 @@ export default {
       }
 
       & > .info-box {
+        border: 1px solid var(--tabbed-border) !important;
         margin-bottom: 0;
         padding-right: 25px;
       }

package/components/form/ChangePassword.vue

@@ -432,7 +432,7 @@ export default {
     }
 
     &.create, &.edit {
-      height: 185px;
+      height: 160px;
       .form {
         .fields {
           display: flex;

package/components/form/ClusterAppearance.vue

@@ -88,11 +88,12 @@ export default {
 <style lang="scss" scoped>
   .cluster-appearance {
     display: flex;
-    flex-direction: column;
-    margin: 3px 35px 0px 0px;
+    // flex-direction: column;
+    // align-items: center;
+    // margin: 3px 35px 0px 0px;
 
     label {
-      margin: 6px 0 0;
+      margin: 10px 10px 0 0;
     }
 
     &-preview {

package/components/form/Command.vue

@@ -146,9 +146,9 @@ export default {
       </div>
     </div>
 
-    <div class="row mt-20">
+    <div class="row">
       <div
-        class="col span-6"
+        class="span-6"
         data-testid="input-command-workingDir"
       >
         <LabeledInput
@@ -159,13 +159,13 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col span-6">
+      <div class="span-6">
         <div
           :style="{ 'align-items': 'center' }"
           class="row"
         >
           <div
-            class="col span-6"
+            class="col"
             data-testid="input-command-stdin"
           >
             <LabeledSelect
@@ -191,7 +191,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
     <h3>{{ t('workload.container.titles.env') }}</h3>
     <EnvVars
       :mode="mode"

package/components/form/Conditions.vue

@@ -68,6 +68,20 @@ export default {
         };
       });
     },
+  },
+  methods: {
+    hans(row) {
+      const conditionMap = {
+      'DiskPressure': '磁盘压力',
+      'MemoryPressure': '内存压力',
+      'PIDPressure': '进程数压力',
+      'Ready': '就绪状态',
+      'EtcdIsVoter': 'Etcd投票成员',
+      'NetworkUnavailable': '网络不可用',
+    };
+    
+      return conditionMap[row.condition] || row.condition;
+    }
   }
 };
 </script>
@@ -83,7 +97,7 @@ export default {
     :search="false"
   >
     <template #cell:condition="{row}">
-      <span :class="{'text-error': row.error}">{{ row.condition }}</span>
+      <span :class="{'text-error': row.error}">{{ hans(row) }}</span>
     </template>
 
     <template #cell:status="{row}">

package/components/form/Footer.vue

@@ -105,6 +105,7 @@ export default defineComponent({
     .left {
       grid-area: left;
       text-align: left;
+      margin-right: 10px;
 
       .btn, button {
         margin: 0 $column-gutter 0 0;

package/components/form/HealthCheck.vue

@@ -56,7 +56,6 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -70,7 +69,6 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
 
     <div class="row">
       <Probe

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,16 @@ export default {
   }
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 }
+.httpAdd{
+  background: var(--accent-btn);
+  border: solid 1px var(--primary);
+  color: var(--primary);
+}
+
+H4{
+  font-size: 14px;
+}
 </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

@@ -390,6 +390,17 @@ export default {
         });
       }
 
+      rows = rows.map((item) => {
+        if (item?.key?.includes('harvester')) {
+          item.key = item.key?.replace('harvester', 'cloud');
+        }
+        if (item?.value?.includes('harvester')) {
+          item.value = item.value?.replace('harvester', 'cloud');
+        }
+
+        return item;
+      });
+
       return rows;
     },
 
@@ -400,6 +411,8 @@ export default {
         [this.valueName]: value,
       };
 
+      obj.key = obj.key?.replace('harvester', 'cloud');
+      obj.value = obj.value?.replace('harvester', 'cloud');
       obj.binary = false;
       obj.canEncode = this.handleBase64;
       obj.supported = true;
@@ -481,8 +494,8 @@ export default {
           // let value = (row[valueName] || '');
           // const key = (row[keyName] || '').trim();
 
-          const key = (row[keyName] || '').trim();
-          let value = (row[valueName] || '').trim();
+          const key = (row[keyName]?.replace('cloud', 'harvester') || '').trim();
+          let value = (row[valueName]?.replace('cloud', 'harvester') || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -1001,6 +1014,7 @@ export default {
   .remove {
     text-align: center;
     BUTTON {
+      min-width: auto;
       padding: 0px;
     }
   }
@@ -1040,4 +1054,8 @@ export default {
   border-collapse: separate;
   z-index: 0; // Prevent label from cover other elements outside of the input
 }
+
+h3{
+  font-size: 14px;
+}
 </style>

package/components/form/LabeledSelect.vue

@@ -532,7 +532,9 @@ export default {
   // LabeledSelect.
   // padding-bottom: 1px;
   &:deep() .vs__actions:after {
-    padding-top: 10px;
+    // padding-top: 10px;
+    display: flex;
+    align-items: center;
   }
 
   &.no-label.compact-input {

package/components/form/Labels.vue

@@ -161,8 +161,8 @@ export default {
   <div :class="containerClass">
     <div :class="defaultSectionClass">
       <div class="labels">
-        <div class="labels__header">
-          <div v-if="showLabelTitle">
+        <div class="labels__header mb-20">
+          <div v-if="showLabelTitle" style="font-size: 14px;">
             <t k="labels.labels.title" />
           </div>
           <ToggleSwitch

package/components/form/MatchExpressions.vue

@@ -330,7 +330,7 @@ export default {
         :data-testid="`input-match-type-field-${index}`"
       >
         <div v-if="isView">
-          {{ row.matching }}
+          {{ row.matching.replace('harvester', 'cloud') }}
         </div>
         <LabeledSelect
           v-else
@@ -345,7 +345,7 @@ export default {
         :data-testid="`input-match-expression-key-${index}`"
       >
         <div v-if="isView" class="view-item-value">
-          {{ row.key }}
+          {{ row.key.replace('harvester', 'cloud') }}
         </div>
         <input
           v-else-if="!hasKeySelectOptions"
@@ -365,6 +365,7 @@ export default {
         />
       </div>
       <div
+        style="width: 400px;"
         :data-testid="`input-match-expression-operator-${index}`"
       >
         <div v-if="isView" class="view-item-value">
@@ -413,7 +414,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 +426,6 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mmt-4"
     >
       <button
         type="button"

package/components/form/Members/ClusterMembershipEditor.vue

@@ -56,6 +56,6 @@ export default {
     :type="NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING"
     :mode="mode"
     parent-key="clusterId"
-    :parent-id="parentId"
+    :parent-id="parentId"
   />
 </template>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -143,30 +143,46 @@ export default {
       return [this.permissionGroup];
     },
     options() {
+
       const customRoles = this.customRoles.map((role) => ({
         label:       role.nameDisplay,
         description: role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('members.clusterPermissions.noDescription'),
         value:       role.id
       }));
 
-      return [
-        {
-          label:       this.t('members.clusterPermissions.owner.label'),
-          description: this.t('members.clusterPermissions.owner.description'),
-          value:       'owner'
-        },
-        {
-          label:       this.t('members.clusterPermissions.member.label'),
-          description: this.t('members.clusterPermissions.member.description'),
-          value:       'member'
-        },
-        ...customRoles,
-        {
-          label:       this.t('members.clusterPermissions.custom.label'),
-          description: this.t('members.clusterPermissions.custom.description'),
-          value:       'custom'
-        }
-      ];
+      let optionList =  [{
+        label:       this.t('members.clusterPermissions.cluster-tenant.label'),
+        description: this.t('members.clusterPermissions.cluster-tenant.description'),
+        value:       'cluster-tenant'
+      }];
+
+      if (sessionStorage.getItem('TOPLEVELPERMISSIONS') === 'superadmin') {
+        optionList = [
+          {
+            label:       this.t('members.clusterPermissions.cluster-tenant.label'),
+            description: this.t('members.clusterPermissions.cluster-tenant.description'),
+            value:       'cluster-tenant'
+          },
+          {
+            label:       this.t('members.clusterPermissions.owner.label'),
+            description: this.t('members.clusterPermissions.owner.description'),
+            value:       'owner'
+          },
+          {
+            label:       this.t('members.clusterPermissions.member.label'),
+            description: this.t('members.clusterPermissions.member.description'),
+            value:       'member'
+          },
+          ...customRoles,
+          {
+            label:       this.t('members.clusterPermissions.custom.label'),
+            description: this.t('members.clusterPermissions.custom.description'),
+            value:       'custom'
+          }
+        ];
+      }
+
+      return optionList
     },
     principal() {
       const principalId = this.principalId.replace(/\//g, '%2F');
@@ -258,31 +274,34 @@ export default {
         </div>
       </template>
       <template v-slot:body>
-        <RadioGroup
-          v-model:value="permissionGroup"
-          :options="options"
-          name="permission-group"
-        />
-        <div
-          v-if="permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
-        >
+        <div style="max-height: 250px; overflow: auto;">
+          <RadioGroup
+            v-model:value="permissionGroup"
+            :options="options"
+            :flexDirection="'column'"
+            name="permission-group"
+          />
           <div
-            v-for="(permission, i) in customPermissionsUpdate"
-            :key="i"
+            v-if="permissionGroup === 'custom'"
+            class="custom-permissions ml-20 mt-10"
+            :class="{'two-column': useTwoColumnsForCustom}"
           >
-            <Checkbox
-              v-model:value="permission.value"
-              :disabled="permission.locked"
-              class="mb-5"
-              :label="permission.label"
-            />
-            <i
-              v-if="permission.locked"
-              v-clean-tooltip="permission.tooltip"
-              class="icon icon-lock icon-fw"
-            />
+            <div
+              v-for="(permission, i) in customPermissionsUpdate"
+              :key="i"
+            >
+              <Checkbox
+                v-model:value="permission.value"
+                :disabled="permission.locked"
+                class="mb-5"
+                :label="permission.label"
+              />
+              <i
+                v-if="permission.locked"
+                v-clean-tooltip="permission.tooltip"
+                class="icon icon-lock icon-fw"
+              />
+            </div>
           </div>
         </div>
       </template>