dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/components/form/HealthCheck.vue

@@ -18,10 +18,10 @@ export default {
   },
 
   data() {
-    const { readinessProbe, livenessProbe, startupProbe } = this.value;
-
     return {
-      readinessProbe, livenessProbe, startupProbe
+      readinessProbe: this.value.readinessProbe,
+      livenessProbe:  this.value.livenessProbe,
+      startupProbe:   this.value.startupProbe,
     };
   },
 

package/components/form/HookOption.vue

@@ -28,23 +28,18 @@ export default {
   },
 
   data() {
-    const selectHook = null;
-
-    const defaultExec = { exec: { command: [] } };
-    const defaultHttpGet = {
-      httpGet: {
-        host:        '',
-        path:        '',
-        port:        null,
-        scheme:      '',
-        httpHeaders: null
-      }
-    };
-
     return {
-      selectHook,
-      defaultExec,
-      defaultHttpGet,
+      selectHook:     null,
+      defaultExec:    { exec: { command: [] } },
+      defaultHttpGet: {
+        httpGet: {
+          host:        '',
+          path:        '',
+          port:        null,
+          scheme:      '',
+          httpHeaders: null
+        }
+      },
       schemeOptions: ['HTTP', 'HTTPS']
     };
   },

package/components/form/InputWithSelect.vue

@@ -269,19 +269,19 @@ export default {
     margin-right: 0;
 
     &:hover:not(.focused):not(.disabled):not(.view) {
-      border: 1px solid var(--input-hover-border) !important;
+      border: 0px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 1px solid var(--outline) !important;
+      border: 0px solid var(--outline) !important;
     }
 
     &:hover:not(.focused):not(.disabled) {
-      border: 1px solid var(--input-hover-border) !important;
+      border: 0px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 1px solid var(--outline) !important;
+      border: 0px solid var(--outline) !important;
     }
 
     &.labeled-select.focused :deep(),
@@ -291,7 +291,8 @@ export default {
 
     &.labeled-select:not(.disabled):not(.view) :deep(),
     &.unlabeled-select:not(.disabled):not(.view) :deep() {
-      border: solid 1px var(--input-border);
+      /* border: solid 1px var(--input-border); */
+      height: 32px;
     }
 
     &.labeled-select :deep(),

package/components/form/KeyValue.vue

@@ -277,7 +277,7 @@ export default {
       const gap = this.canRemove ? ' 50px' : '';
       const size = 2 + this.extraColumns.length;
 
-      return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
+      return `grid-template-columns: repeat(${ size }, 400px)${ gap };`;
     },
     usedKeyOptions() {
       return this.rows.map((row) => row[this.keyName]);
@@ -328,7 +328,7 @@ export default {
     },
 
     getRows(value) {
-      const rows = [];
+      let rows = [];
 
       if ( this.asMap ) {
         const input = value || {};
@@ -388,6 +388,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;
     },
 
@@ -398,9 +409,15 @@ 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;
+       // 上传镜像问题
+      const s = this.rows.filter(item => item.key !== obj.key);
+      this.rows = s
+
       this.rows.push(obj);
       this.queueUpdate();
       this.$nextTick(() => {
@@ -464,8 +481,11 @@ export default {
         const valueName = this.valueName;
 
         for ( const row of this.rows ) {
-          let value = (row[valueName] || '');
-          const key = (row[keyName] || '').trim();
+          // let value = (row[valueName] || '');
+          // const key = (row[keyName] || '').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));
@@ -760,7 +780,7 @@ export default {
                     :disabled="disabled || isProtected(row.key)"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
-                    :min-height="40"
+                    :min-height="32"
                     :spellcheck="false"
                     :aria-label="t('generic.ariaLabel.value', {index: i})"
                     @update:value="queueUpdate"
@@ -823,7 +843,7 @@ export default {
                   type="button"
                   role="button"
                   :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="removeLabel || t('generic.remove')"
+                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
                   class="btn role-link"
                   @click="remove(i)"
                 >
@@ -837,7 +857,7 @@ export default {
     </div>
     <div
       v-if="(addAllowed || readAllowed) && !isView"
-      class="footer mt-20"
+      class="footer mt-10"
     >
       <slot
         name="add"
@@ -880,8 +900,8 @@ export default {
   }
   .kv-container {
     display: grid;
-    align-items: center;
-    column-gap: 20px;
+    /* align-items: center; */
+    column-gap: 10px;
     label {
       margin-bottom: 0;
     }
@@ -905,6 +925,9 @@ export default {
       }
       &.value textarea {
         padding: 10px 10px 10px 10px;
+        min-height:32px;
+        line-height: 12px; 
+        border: solid var(--border-width) var(--input-border);       
       }
 
       .text-monospace:not(.conceal) {
@@ -943,8 +966,14 @@ export default {
     }
   }
   input {
-    height: 40px;
+    height: 32px;
     line-height: 1;
+    border: solid var(--border-width) var(--input-border);
+    padding: 4px 11px;
+    &:hover{
+      border: solid var(--border-width) var(--input-border);
+      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+    }
   }
   .footer {
     .protip {

package/components/form/LabeledSelect.vue

@@ -50,6 +50,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    isLabel: {
+      default: false,
+      type:    Boolean
+    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -111,7 +115,15 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
-    }
+    },
+    selectWidth: {
+      type: String,
+      default: ''
+    },
+    leftWidth: {
+      type:    String,
+      default: ''
+    },
   },
 
   data() {
@@ -227,7 +239,7 @@ export default {
     },
 
     positionDropdown(dropdownList, component, { width }) {
-      calculatePosition(dropdownList, component, width, this.placement);
+      calculatePosition(dropdownList, component, width, this.placement, this.selectWidth===''?'label': this.selectWidth, this.isLabel, this.leftWidth);
     },
 
     get,
@@ -278,6 +290,25 @@ export default {
 </script>
 
 <template>
+   <div style="display: flex;">
+    <div
+      :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
+      :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
+    >
+      <label v-if="hasLabel" :id="`labeled-select-uid-${uid}`">
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">{{ label }}</template>
+
+        <span
+          v-if="requiredField"
+          class="required"
+        >*</span>
+      </label>
+    </div>
+    <!-- label -->
   <div
     ref="select"
     class="labeled-select"
@@ -296,12 +327,13 @@ export default {
       }
     ]"
     :tabindex="isView || disabled ? -1 : 0"
+    role="listbox"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
     @keydown.space.prevent="focusSearch"
   >
-    <div
+    <!-- <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
       :style="{ border: 'none' }"
     >
@@ -320,7 +352,7 @@ export default {
           class="required"
         >*</span>
       </label>
-    </div>
+    </div> -->
     <v-select
       ref="select-input"
       :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
@@ -344,7 +376,7 @@ export default {
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
-      role="listbox"
+      role="listitem"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
@@ -354,6 +386,7 @@ export default {
       @option:selecting="$emit('selecting', $event)"
       @option:deselecting="$emit('deselecting', $event)"
     >
+    
       <template #option="option">
         <template v-if="showTagPrompts">
           <div class="only-user-opts">
@@ -373,9 +406,9 @@ export default {
             </div>
           </div>
         </template>
-        <template v-else-if="option.kind === 'divider'">
-          <hr>
-        </template>
+        <!-- <template v-else-if="option.kind === 'divider'">
+          <hr role="none">
+        </template> -->
         <template v-else-if="option.kind === 'highlighted'">
           <div class="option-kind-highlighted">
             {{ option.label }}
@@ -466,6 +499,7 @@ export default {
       :value="validationMessage"
     />
   </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
@@ -475,7 +509,11 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
+  &:deep() .vs__actions:after {
+      padding-top: 10px;
+    }
   padding-bottom: 1px;
+  /* flex: 1; */
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -489,7 +527,7 @@ export default {
 
   &.no-label:not(.compact-input) {
     height: $input-height;
-    padding-top: 4px;
+    padding-top: 0px;
 
     :deep() .vs__actions:after {
       top: 0;
@@ -551,6 +589,7 @@ export default {
 
   &.taggable {
     :deep() .vs__selected-options {
+
       padding: 3px 0;
       .vs__selected {
         border-color: var(--accent-btn);
@@ -576,7 +615,7 @@ export default {
   }
 
   :deep() .vs__selected-options {
-    margin-top: -5px;
+    margin-top: 0px;
   }
 
   :deep() .v-select:not(.vs--single) {
@@ -588,7 +627,7 @@ export default {
   :deep() .vs__actions {
     &:after {
       position: relative;
-      top: -10px;
+      top: 0px;
     }
   }
 
@@ -626,73 +665,21 @@ export default {
   }
 }
 
-$icon-size: 18px;
-
-// This represents the drop down area. Note - it might be attached to body and NOT the parent label select div
-.vs__dropdown-menu {
-
-  // Styling for individual options
-  .vs__dropdown-option .vs__option-kind {
-    &-group {
-      display: flex;
-      align-items: center;
-
-      i { // icon
-        width: $icon-size;
-      }
-
-      > b { // group label
-        flex: 1;
-      }
-
-      > div { // badge
-        background-color: var(--primary);
-        border-radius: 4px;
-        color: var(--primary-text);
-        font-size: 12px;
-        height: 18px;
-        line-height: 18px;
-        margin-top: 1px;
-        padding: 0 10px;
-      }
-    }
-
-    &.has-icon {
-      padding-left: $icon-size;
-    }
+// Styling for option group badge
+.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
+  display: flex;
+  > b {
+    flex: 1;
   }
-
-    &.has-icon .vs__option-kind div{
-    padding-left: $icon-size;
-  }
-
-  .pagination-slot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin-top: 5px;
-
-    .load-more {
-      display: flex;
-      align-items: center;
-      height: 19px;
-
-      a {
-        cursor: pointer;
-      }
-    }
-
-    .count {
-      position: absolute;
-      right: 10px;
-    }
-  }
-
-  .no-options-slot .paginating {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  > div {
+    background-color: var(--primary);
+    border-radius: 4px;
+    color: var(--primary-text);
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    margin-top: 1px;
+    padding: 0 10px;
   }
 }
 
@@ -720,4 +707,13 @@ $icon-size: 18px;
     margin: 0px calc(-#{$input-padding-sm}/2);
     padding: 3px 20px;
 }
+
+.is-lable{
+  width: 0px !important;
+}
+
+.gafanana-select{
+  width: 300px;
+
+}
 </style>

package/components/form/Labels.vue

@@ -84,9 +84,12 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <h3 v-if="showLabelTitle">
+          <div
+            v-if="showLabelTitle"
+            class="clearFix mb-20"
+          >
             <t k="labels.labels.title" />
-          </h3>
+          </div>
           <ToggleSwitch
             v-if="value.hasSystemLabels"
             v-model:value="toggler"
@@ -94,7 +97,7 @@ export default {
             :on-label="t('labels.labels.show')"
           />
         </div>
-        <p class="mt-10 mb-10">
+        <p class="mb-20">
           <t k="labels.labels.description" />
         </p>
         <div :class="columnsClass">

package/components/form/LifecycleHooks.vue

@@ -24,10 +24,10 @@ export default {
   },
 
   data() {
-    const { postStart, preStop } = this.value;
-
     return {
-      postStart, preStop, hookOptions: ['postStart', 'preStop']
+      postStart:   this.value.postStart,
+      preStop:     this.value.preStop,
+      hookOptions: ['postStart', 'preStop']
     };
   },
 

package/components/form/MatchExpressions.vue

@@ -70,6 +70,14 @@ export default {
   },
 
   data() {
+    return {
+      ops:    [],
+      rules:  [],
+      custom: []
+    };
+  },
+
+  created() {
     const t = this.$store.getters['i18n/t'];
 
     const podOptions = [
@@ -88,8 +96,6 @@ export default {
       { label: t('workload.scheduling.affinity.matchExpressions.greaterThan'), value: 'Gt' },
     ];
 
-    const ops = this.type === NODE ? nodeOptions : podOptions;
-
     let rules;
 
     // special case for matchFields and matchExpressions
@@ -127,11 +133,8 @@ export default {
       rules.push(newRule);
     }
 
-    return {
-      ops,
-      rules,
-      custom: []
-    };
+    this.rules = rules;
+    this.ops = this.type === NODE ? nodeOptions : podOptions;
   },
 
   computed: {
@@ -242,6 +245,10 @@ export default {
 
 <template>
   <div>
+    <slot
+      v-if="rules.length"
+      name="header"
+    />
     <button
       v-if="showRemove && !isView"
       type="button"
@@ -282,7 +289,8 @@ export default {
         :data-testid="`input-match-type-field-${index}`"
       >
         <div v-if="isView">
-          {{ row.matching }}
+          {{ row.matching.replace('harvester', 'cloud') }}
+          <!-- {{ row.matching }} -->
         </div>
         <LabeledSelect
           v-else
@@ -296,8 +304,8 @@ export default {
       <div
         :data-testid="`input-match-expression-key-${index}`"
       >
-        <div v-if="isView">
-          {{ row.key }}
+        <div v-if="isView" class="view-item-value">
+          {{ row.key.replace('harvester', 'cloud') }}
         </div>
         <input
           v-else-if="!hasKeySelectOptions"
@@ -317,7 +325,7 @@ export default {
       <div
         :data-testid="`input-match-expression-operator-${index}`"
       >
-        <div v-if="isView">
+        <div v-if="isView" class="view-item-value">
           {{ row.operator }}
         </div>
         <Select
@@ -343,7 +351,7 @@ export default {
         v-else
         :data-testid="`input-match-expression-values-${index}`"
       >
-        <div v-if="isView">
+        <div v-if="isView" class="view-item-value">
           {{ row.values }}
         </div>
         <input
@@ -418,14 +426,20 @@ export default {
     justify-content: center;
   }
 
+  .match-expression-header{
+    margin-top: 24px;
+  }
   .match-expression-row, .match-expression-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    /* display: grid; */
+    display: flex;
+    /* grid-template-columns: 1fr 1fr 1fr; */
     margin: 5px 0;
-    grid-gap: $column-gutter;
+    /* grid-gap: $column-gutter; */
+    grid-gap: 10px;
 
     & > LABEL {
       margin: 0;
+      width: 400px;
     }
 
     &:not(.view){
@@ -434,8 +448,15 @@ export default {
   }
 
   .match-expression-row > div > input {
-    min-height: 40px !important;
+    min-height: 32px !important;
+    border: solid var(--border-width) var(--input-border);
+    padding: 4px 11px;
+    width: 400px;
+    &:hover{
+      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+    }
   }
+
   .match-expression-row-matching, .match-expression-header-matching {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 
@@ -443,4 +464,8 @@ export default {
       grid-template-columns: 1fr 1fr 1fr 1fr 100px;
     }
   }
-</style>
+
+  .view-item-value{
+    width: 400px;
+  }
+</style>