dashboard-shell-shell 1.0.122 → 1.0.1000000082

package/components/form/Security.vue

@@ -5,6 +5,45 @@ import { _VIEW } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const allCapabilities = ['ALL',
+  'AUDIT_CONTROL',
+  'AUDIT_WRITE',
+  'BLOCK_SUSPEND',
+  'CHOWN',
+  'DAC_OVERRIDE',
+  'DAC_READ_SEARCH',
+  'FOWNER',
+  'FSETID',
+  'IPC_LOCK',
+  'IPC_OWNER',
+  'KILL',
+  'LEASE',
+  'LINUX_IMMUTABLE',
+  'MAC_ADMIN',
+  'MAC_OVERRIDE',
+  'MKNOD',
+  'NET_ADMIN',
+  'NET_BIND_SERVICE',
+  'NET_BROADCAST',
+  'NET_RAW',
+  'SETFCAP',
+  'SETGID',
+  'SETPCAP',
+  'SETUID',
+  'SYSLOG',
+  'SYS_ADMIN',
+  'SYS_BOOT',
+  'SYS_CHROOT',
+  'SYS_MODULE',
+  'SYS_NICE',
+  'SYS_PACCT',
+  'SYS_PTRACE',
+  'SYS_RAWIO',
+  'SYS_RESOURCE',
+  'SYS_TIME',
+  'SYS_TTY_CONFIG',
+  'WAKE_ALARM'];
+
 export default {
   emits: ['update:value'],
 
@@ -25,68 +64,27 @@ export default {
   },
 
   data() {
-    const allCapabilities = ['ALL',
-      'AUDIT_CONTROL',
-      'AUDIT_WRITE',
-      'BLOCK_SUSPEND',
-      'CHOWN',
-      'DAC_OVERRIDE',
-      'DAC_READ_SEARCH',
-      'FOWNER',
-      'FSETID',
-      'IPC_LOCK',
-      'IPC_OWNER',
-      'KILL',
-      'LEASE',
-      'LINUX_IMMUTABLE',
-      'MAC_ADMIN',
-      'MAC_OVERRIDE',
-      'MKNOD',
-      'NET_ADMIN',
-      'NET_BIND_SERVICE',
-      'NET_BROADCAST',
-      'NET_RAW',
-      'SETFCAP',
-      'SETGID',
-      'SETPCAP',
-      'SETUID',
-      'SYSLOG',
-      'SYS_ADMIN',
-      'SYS_BOOT',
-      'SYS_CHROOT',
-      'SYS_MODULE',
-      'SYS_NICE',
-      'SYS_PACCT',
-      'SYS_PTRACE',
-      'SYS_RAWIO',
-      'SYS_RESOURCE',
-      'SYS_TIME',
-      'SYS_TTY_CONFIG',
-      'WAKE_ALARM'];
+    return {
+      privileged:               this.value.privileged || false,
+      allowPrivilegeEscalation: this.value.allowPrivilegeEscalation || false,
+      allCapabilities,
+      runAsNonRoot:             this.value.runAsNonRoot || false,
+      readOnlyRootFilesystem:   this.value.readOnlyRootFilesystem || false,
+      add:                      [],
+      drop:                     [],
+      runAsUser:                this.value.runAsUser
+    };
+  },
 
-    const {
-      capabilities = {},
-      runAsNonRoot = false,
-      readOnlyRootFilesystem = false,
-      privileged = false,
-      allowPrivilegeEscalation = false,
-      runAsUser
-    } = this.value;
+  created() {
+    const { capabilities = {} } = this.value;
     const {
       add = [],
       drop = []
     } = capabilities;
 
-    return {
-      privileged,
-      allowPrivilegeEscalation,
-      allCapabilities,
-      runAsNonRoot,
-      readOnlyRootFilesystem,
-      add,
-      drop,
-      runAsUser
-    };
+    this.add = add;
+    this.drop = drop;
   },
 
   computed: {

package/components/form/Select.vue

@@ -2,11 +2,12 @@
 import { get } from '@shell/utils/object';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
+import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
-  emits: ['update:value', 'createdListItem'],
+  emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
 
   components: { LabeledTooltip },
   mixins:     [
@@ -87,8 +88,17 @@ export default {
       type:    Boolean,
       default: null
     },
+    isLangSelect: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isOpen:       false,
+      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
+    };
   },
-
   methods: {
     // resizeHandler = in mixin
     getOptionLabel(option) {
@@ -187,14 +197,26 @@ export default {
         return Math.random(100000);
       }
     },
+
     report(e) {
       alert(e);
     },
+
     handleDropdownOpen(args) {
       // function that prevents the "opening dropdown on focus"
       // default behaviour of v-select
       return args.noDrop || args.disabled ? false : args.open;
-    }
+    },
+    onOpen() {
+      this.isOpen = true;
+      this.$emit('on-open');
+      this.resizeHandler();
+    },
+
+    onClose() {
+      this.isOpen = false;
+      this.$emit('on-close');
+    },
   },
   computed: {
     requiredField() {
@@ -255,6 +277,10 @@ export default {
       [$attrs.class]: $attrs.class
     }"
     :tabindex="disabled || isView ? -1 : 0"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-label="$attrs['aria-label'] || undefined"
+    :aria-describedby="$attrs['aria-describedby'] || undefined"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
@@ -282,15 +308,26 @@ export default {
       :modelValue="value != null ? value : ''"
       :dropdownShouldOpen="handleDropdownOpen"
       :tabindex="-1"
-      role="listbox"
+      role="listitem"
+      :uid="generatedUid"
+      :aria-label="'-'"
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
-      @open="resizeHandler"
+      @open="onOpen"
+      @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
     >
-      <template #option="option">
-        <div @mousedown="(e) => onClickOption(option, e)">
+      <template #no-options>
+        暂无数据
+      </template>
+      <template
+        #option="option"
+      >
+        <div
+          :lang="isLangSelect ? option.value : undefined"
+          @mousedown="(e) => onClickOption(option, e)"
+        >
           {{ getOptionLabel(option.label) }}
         </div>
       </template>

package/components/form/ShellInput.vue

@@ -21,6 +21,10 @@ export default {
       causes $emit 'input' of ["-c", "sleep 600"]
   */
   data() {
+    return { userValue: '' };
+  },
+
+  created() {
     let userValue = '';
 
     if ( this.value ) {
@@ -36,7 +40,7 @@ export default {
       }, '').trim();
     }
 
-    return { userValue };
+    this.userValue = userValue;
   },
 
   methods: {

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: '' },
@@ -186,10 +187,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"
@@ -198,16 +207,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>
@@ -234,7 +254,7 @@ export default {
   &.show-key-selector {
     .input-container > * {
       display: inline-block;
-      width: 50%;
+      /* width: 50%; */
 
       &.labeled-select.focused {
         z-index: 10;

package/components/form/Tolerations.vue

@@ -29,6 +29,10 @@ export default {
   },
 
   data() {
+    return { rules: [] };
+  },
+
+  created() {
     const rules = [];
 
     // on creation in agent configuration, the backend "eats"
@@ -49,7 +53,7 @@ export default {
       });
     }
 
-    return { rules };
+    this.rules = rules;
   },
 
   computed: {

package/components/form/UnitInput.vue

@@ -206,7 +206,7 @@ export default {
       }
 
       if (this.outputModifier) {
-        out = out === null ? null : `${ inputValue }${ this.unit }`;
+        out = out === null ? null : `${ parseInt(inputValue) }${ this.unit }`;
       } else if ( this.outputAs === 'string' ) {
         out = out === null ? '' : `${ inputValue }`;
       } else if (out) {
@@ -235,13 +235,13 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
-    @change="update($event.target.value)"
+    @update:value="update"
     @blur="update($event.target.value)"
   >
-    <template #suffix>
+    <template #suffixNew>
       <div
         v-if="displayUnit"
-        class="addon"
+        class="addonNew"
         :class="{'with-tooltip': tooltip || tooltipKey}"
       >
         {{ displayUnit }}
@@ -251,7 +251,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>

package/components/form/ValueFromResource.vue

@@ -4,6 +4,7 @@ import { get } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { ref, watch } from 'vue';
 
 export default {
   emits: ['update:value', 'remove'],
@@ -44,84 +45,164 @@ export default {
   },
 
   data() {
-    const typeOpts = [
-      { value: 'simple', label: 'Key/Value Pair' },
-      { value: 'resourceFieldRef', label: 'Resource' },
-      { value: 'configMapKeyRef', label: 'ConfigMap Key' },
-      { value: 'secretKeyRef', label: 'Secret key' },
-      { value: 'fieldRef', label: 'Pod Field' },
-      { value: 'secretRef', label: 'Secret' },
-      { value: 'configMapRef', label: 'ConfigMap' },
-    ];
-
-    const resourceKeyOpts = ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'];
-    let type;
-
-    if (this.value.secretRef) {
-      type = 'secretRef';
-    } else if (this.value.configMapRef) {
-      type = 'configMapRef';
-    } else if (this.value.value) {
-      type = 'simple';
-    } else if (this.value.valueFrom) {
-      type = Object.keys((this.value.valueFrom))[0] || 'simple';
+    return {
+      typeOpts: [
+        { value: 'simple', label: 'Key/Value Pair' },
+        { value: 'resourceFieldRef', label: 'Resource' },
+        { value: 'configMapKeyRef', label: 'ConfigMap Key' },
+        { value: 'secretKeyRef', label: 'Secret key' },
+        { value: 'fieldRef', label: 'Pod Field' },
+        { value: 'secretRef', label: 'Secret' },
+        { value: 'configMapRef', label: 'ConfigMap' },
+      ],
+      secrets:         this.allSecrets,
+      resourceKeyOpts: ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'],
+    };
+  },
+
+  setup(props, { emit }) {
+    const type = ref(null);
+
+    if (props.value.secretRef) {
+      type.value = 'secretRef';
+    } else if (props.value.configMapRef) {
+      type.value = 'configMapRef';
+    } else if (props.value.value) {
+      type.value = 'simple';
+    } else if (props.value.valueFrom) {
+      type.value = Object.keys((props.value.valueFrom))[0] || 'simple';
     }
 
-    let refName;
-    let name;
-    let fieldPath;
-    let referenced;
-    let key;
-    let valStr;
-    const keys = [];
+    const refName = ref('');
+    const name = ref('');
+    const fieldPath = ref('');
+    const referenced = ref(null);
+    const key = ref(null);
+    const valStr = ref('');
+    const keys = ref([]);
 
-    switch (type) {
+    switch (type.value) {
     case 'resourceFieldRef':
-      name = this.value.name;
-      refName = this.value.valueFrom[type].containerName;
-      key = this.value.valueFrom[type].resource || '';
+      name.value = props.value.name;
+      refName.value = props.value.valueFrom[type.value].containerName;
+      key.value = props.value.valueFrom[type.value].resource || '';
       break;
     case 'configMapKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allConfigMaps.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = props.value.name;
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = props.value.valueFrom[type.value].name;
+      referenced.value = props.allConfigMaps.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'secretRef':
     case 'configMapRef':
-      name = this.value.prefix;
-      refName = this.value[type].name;
+      name.value = props.value.prefix;
+      refName.value = props.value[type.value].name;
       break;
     case 'secretKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allSecrets.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = props.value.name;
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = props.value.valueFrom[type.value].name;
+      referenced.value = props.allSecrets.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'fieldRef':
-      fieldPath = get(this.value.valueFrom, `${ type }.fieldPath`) || '';
-      name = this.value.name;
+      fieldPath.value = get(props.value.valueFrom, `${ type.value }.fieldPath`) || '';
+      name.value = props.value.name;
       break;
     default:
-      name = this.value.name;
-      valStr = this.value.value;
+      name.value = props.value.name;
+      valStr.value = props.value.value;
       break;
     }
 
+    referenced.value = refName.value;
+
+    const updateRow = () => {
+      if (!name.value?.length && !refName.value?.length) {
+        if (type.value !== 'fieldRef') {
+          emit('update:value', null);
+
+          return;
+        }
+      }
+      let out = { name: name.value || refName.value };
+
+      switch (type.value) {
+      case 'configMapKeyRef':
+      case 'secretKeyRef':
+        out.valueFrom = {
+          [type.value]: {
+            key: key.value, name: refName.value, optional: false
+          }
+        };
+        break;
+      case 'resourceFieldRef':
+        out.valueFrom = {
+          [type.value]: {
+            containerName: refName.value, divisor: 1, resource: key.value
+          }
+        };
+        break;
+      case 'fieldRef':
+        if (!fieldPath.value || !fieldPath.value.length) {
+          out = null; break;
+        }
+        out.valueFrom = { [type.value]: { apiVersion: 'v1', fieldPath: fieldPath.value } };
+        break;
+      case 'simple':
+        out.value = valStr.value;
+        break;
+      default:
+        delete out.name;
+        out.prefix = name.value;
+        out[type.value] = { name: refName.value, optional: false };
+      }
+      emit('update:value', out);
+    };
+
+    watch(type, () => {
+      referenced.value = null;
+      key.value = '';
+      refName.value = '';
+      keys.value = [];
+      key.value = '';
+      valStr.value = '';
+      fieldPath.value = '';
+    });
+
+    watch(referenced, (neu, old) => {
+      if (neu) {
+        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
+          keys.value = Object.keys(neu.data);
+        }
+        refName.value = neu?.metadata?.name;
+      }
+      updateRow();
+    });
+
     return {
-      typeOpts, type, refName, referenced: refName, secrets: this.allSecrets, keys, key, fieldPath, name, resourceKeyOpts, valStr
+      type,
+      refName,
+      referenced,
+      keys,
+      key,
+      fieldPath,
+      name,
+      valStr,
+      updateRow,
+      get,
     };
   },
+
   computed: {
     isView() {
       return this.mode === _VIEW;
@@ -189,74 +270,6 @@ export default {
       return ['resourceFieldRef', 'configMapKeyRef', 'secretKeyRef'].includes(this.type);
     },
   },
-
-  watch: {
-    type() {
-      this.referenced = null;
-      this.key = '';
-      this.refName = '';
-      this.keys = [];
-      this.key = '';
-      this.valStr = '';
-      this.fieldPath = '';
-    },
-
-    referenced(neu, old) {
-      if (neu) {
-        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
-          this.keys = Object.keys(neu.data);
-        }
-        this.refName = neu?.metadata?.name;
-      }
-      this.updateRow();
-    },
-  },
-
-  methods: {
-    updateRow() {
-      if (!this.name?.length && !this.refName?.length) {
-        if (this.type !== 'fieldRef') {
-          this.$emit('update:value', null);
-
-          return;
-        }
-      }
-      let out = { name: this.name || this.refName };
-
-      switch (this.type) {
-      case 'configMapKeyRef':
-      case 'secretKeyRef':
-        out.valueFrom = {
-          [this.type]: {
-            key: this.key, name: this.refName, optional: false
-          }
-        };
-        break;
-      case 'resourceFieldRef':
-        out.valueFrom = {
-          [this.type]: {
-            containerName: this.refName, divisor: 1, resource: this.key
-          }
-        };
-        break;
-      case 'fieldRef':
-        if (!this.fieldPath || !this.fieldPath.length) {
-          out = null; break;
-        }
-        out.valueFrom = { [this.type]: { apiVersion: 'v1', fieldPath: this.fieldPath } };
-        break;
-      case 'simple':
-        out.value = this.valStr;
-        break;
-      default:
-        delete out.name;
-        out.prefix = this.name;
-        out[this.type] = { name: this.refName, optional: false };
-      }
-      this.$emit('update:value', out);
-    },
-    get
-  }
 };
 </script>