@rancher/shell 0.2.5 → 0.3.1

package/components/form/Labels.vue

@@ -1,8 +1,12 @@
 <script>
 import KeyValue from '@shell/components/form/KeyValue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 
 export default {
-  components: { KeyValue },
+  components: {
+    ToggleSwitch,
+    KeyValue
+  },
 
   props: {
     value: {
@@ -41,6 +45,10 @@ export default {
     }
   },
 
+  data() {
+    return { toggler: false };
+  },
+
   computed: {
     containerClass() {
       return `${ this.displaySideBySide ? 'row' : '' } ${ this.defaultContainerClass }`.trim();
@@ -48,24 +56,41 @@ export default {
 
     sectionClass() {
       return `${ this.displaySideBySide ? 'col span-6' : 'row' } ${ this.defaultSectionClass }`.trim();
-    }
+    },
+
   }
 };
 </script>
 <template>
   <div :class="containerClass">
-    <div :class="sectionClass">
-      <KeyValue
-        key="labels"
-        :value="value.labels"
-        :add-label="t('labels.addLabel')"
-        :mode="mode"
-        :title="t('labels.labels.title')"
-        :title-protip="labelTitleTooltip"
-        :read-allowed="false"
-        :value-can-be-empty="true"
-        @input="value.setLabels($event)"
-      />
+    <div class="labels">
+      <div class="labels__header">
+        <h3>
+          <t k="labels.labels.title" />
+        </h3>
+        <ToggleSwitch
+          v-if="value.hasSystemLabels"
+          v-model="toggler"
+          name="label-system-toggle"
+          :on-label="t('labels.labels.show')"
+        />
+      </div>
+      <p class="mt-10 mb-10">
+        <t k="labels.labels.description" />
+      </p>
+      <div :class="sectionClass">
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :protected-keys="value.systemLabels || []"
+          :toggle-filter="toggler"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          @input="value.setLabels($event)"
+        />
+      </div>
     </div>
     <div class="spacer" />
     <div :class="sectionClass">
@@ -84,6 +109,11 @@ export default {
   </div>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.labels {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

package/components/form/MatchExpressions.vue

@@ -13,7 +13,7 @@ export default {
     // Array of actual match expressions
     // or k8s selector Object of {matchExpressions, matchLabels}
     value: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: () => []
     },
 

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -55,22 +55,22 @@ export default {
       customPermissions: [
         {
           label: this.t('members.clusterPermissions.createProjects'),
-          key:      'projects-create',
+          key:   'projects-create',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterBackups'),
-          key:      'backups-manage',
+          key:   'backups-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterCatalogs'),
-          key:      'clustercatalogs-manage',
+          key:   'clustercatalogs-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterMembers'),
-          key:      'clusterroletemplatebindings-manage',
+          key:   'clusterroletemplatebindings-manage',
           value: false
         },
         {
@@ -80,38 +80,38 @@ export default {
         },
         {
           label: this.t('members.clusterPermissions.manageNodes'),
-          key:      'nodes-manage',
+          key:   'nodes-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageStorage'),
-          key:      'storage-manage',
+          key:   'storage-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewAllProjects'),
-          key:      'projects-view',
+          key:   'projects-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewClusterCatalogs'),
-          key:      'clustercatalogs-view',
+          key:   'clustercatalogs-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewClusterMembers'),
-          key:      'clusterroletemplatebindings-view',
+          key:   'clusterroletemplatebindings-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewNodes'),
-          key:      'nodes-view',
+          key:   'nodes-view',
           value: false
         }
       ],
       permissionGroup: 'member',
       custom:          {},
-      roleTemplates:     [],
+      roleTemplates:   [],
       principalId:     '',
       bindings:        []
     };
@@ -213,9 +213,9 @@ export default {
 </script>
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="cluster-permissions-editor"
+  <div
+    v-else
+    class="cluster-permissions-editor"
   >
     <div class="row mt-10">
       <div class="col span-12">
@@ -229,10 +229,10 @@ export default {
       </div>
     </div>
 
-    <Card
-      class="m-0"
-      :show-highlight-border="false"
-      :show-actions="false"
+    <Card
+      class="m-0"
+      :show-highlight-border="false"
+      :show-actions="false"
     >
       <template v-slot:title>
         <div class="type-title">
@@ -248,17 +248,17 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div
-          v-if="permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
+        <div
+          v-if="permissionGroup === 'custom'"
+          class="custom-permissions ml-20 mt-10"
+          :class="{'two-column': useTwoColumnsForCustom}"
         >
-          <Checkbox
-            v-for="permission in customPermissions"
-            :key="permission.key"
-            v-model="permission.value"
-            class="mb-5"
-            :label="permission.label"
+          <Checkbox
+            v-for="permission in customPermissions"
+            :key="permission.key"
+            v-model="permission.value"
+            class="mb-5"
+            :label="permission.label"
           />
         </div>
       </template>

package/components/form/Members/MembershipEditor.vue

@@ -45,8 +45,8 @@ export default {
     },
 
     defaultBindingHandler: {
-      type:     Function,
-      default:  null,
+      type:    Function,
+      default: null,
     },
 
     modalSticky: {
@@ -138,9 +138,9 @@ export default {
   methods: {
     addMember() {
       this.$store.dispatch('cluster/promptModal', {
-        component:   this.addMemberDialogName,
-        resources:   [this.onAddMember],
-        modalSticky: this.modalSticky
+        component:      this.addMemberDialogName,
+        componentProps: { onAdd: this.onAddMember },
+        modalSticky:    this.modalSticky
       });
     },
 
@@ -173,9 +173,9 @@ export default {
     <template #columns="{row}">
       <div class="columns row">
         <div class="col span-6">
-          <Principal
-            :key="row.value.principalId"
-            :value="row.value.principalId"
+          <Principal
+            :key="row.value.principalId"
+            :value="row.value.principalId"
           />
         </div>
         <div class="col span-6 role">
@@ -194,12 +194,12 @@ export default {
     </template>
     <template #remove-button="{remove, i}">
       <span v-if="(isCreate && i === 0) || isView" />
-      <button
-        v-else
-        type="button"
-        :disabled="isView"
-        class="btn role-link"
-        @click="remove"
+      <button
+        v-else
+        type="button"
+        :disabled="isView"
+        class="btn role-link"
+        @click="remove"
       >
         {{ t('generic.remove') }}
       </button>

package/components/form/NameNsDescription.vue

@@ -405,7 +405,7 @@ export default {
       >
         <i
           v-tooltip="t('generic.cancel')"
-          class="icon icon-lg icon-close align-value"
+          class="icon icon-close align-value"
         />
       </button>
     </div>

package/components/form/NodeAffinity.vue

@@ -14,7 +14,7 @@ export default {
     ArrayListGrouped, MatchExpressions, LabeledSelect
   },
 
-  props:      {
+  props: {
     // value should be NodeAffinity or VolumeNodeAffinity
     value: {
       type:    Object,

package/components/form/NodeScheduling.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NodeAffinity from '@shell/components/form/NodeAffinity';
-import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';

package/components/form/Password.vue

@@ -20,11 +20,11 @@ export default {
     },
     name: {
       default: '',
-      type:     String
+      type:    String
     },
     autocomplete: {
-      type:      String,
-      default:   ''
+      type:    String,
+      default: ''
     },
     required: {
       default: false,

package/components/form/PodAffinity.vue

@@ -17,7 +17,7 @@ export default {
     ArrayListGrouped, MatchExpressions, LabeledSelect, RadioGroup, LabeledInput
   },
 
-  props:      {
+  props: {
     // pod template spec
     value: {
       type:    Object,

package/components/form/Probe.vue

@@ -285,10 +285,10 @@ export default {
           >
             <UnitInput
               v-model="probe.timeoutSeconds"
+              min="0"
               :mode="mode"
               :suffix="t('suffix.sec')"
-              :label="t('probe.timeout.placeholder')"
-              min="0"
+              :label="t('probe.timeout.label')"
               :placeholder="t('probe.timeout.placeholder')"
               @input="update"
             />
@@ -322,7 +322,7 @@ export default {
               min="1"
               :mode="mode"
               :label="t('probe.failureThreshold.label')"
-              :placeholder="t('probe.failureThreshold.label')"
+              :placeholder="t('probe.failureThreshold.placeholder')"
               @input="update"
             />
           </div>

package/components/form/ProjectMemberEditor.vue

@@ -147,7 +147,7 @@ export default {
         },
       ],
       projects:      [],
-      roleTemplates:     [],
+      roleTemplates: [],
     };
   },
   computed: {

package/components/form/ResourceQuota/Project.vue

@@ -72,12 +72,12 @@ export default {
       @remove="emitRemove"
     >
       <template #columns="props">
-        <Row
-          v-model="value"
-          :mode="mode"
-          :types="remainingTypes(typeValues[props.i])"
-          :type="typeValues[props.i]"
-          @type-change="updateType(props.i, $event)"
+        <Row
+          v-model="value"
+          :mode="mode"
+          :types="remainingTypes(typeValues[props.i])"
+          :type="typeValues[props.i]"
+          @type-change="updateType(props.i, $event)"
         />
       </template>
     </ArrayList>

package/components/form/ResourceQuota/shared.js

@@ -7,56 +7,56 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'limitsCpu',
+    value:          'limitsCpu',
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.limitsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:           'limitsMemory',
+    value:          'limitsMemory',
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.limitsMemory',
     placeholderKey: 'resourceQuota.projectLimit.memoryPlaceholder'
   },
   {
-    value:           'persistentVolumeClaims',
+    value:          'persistentVolumeClaims',
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.persistentVolumeClaims',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'pods',
+    value:          'pods',
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.pods',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'replicationControllers',
+    value:          'replicationControllers',
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.replicationControllers',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'requestsCpu',
+    value:          'requestsCpu',
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.requestsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:           'requestsMemory',
+    value:          'requestsMemory',
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.requestsMemory',
     placeholderKey: 'resourceQuota.projectLimit.memoryPlaceholder'
   },
   {
-    value:           'requestsStorage',
+    value:          'requestsStorage',
     units:          'storage',
     inputExponent:  2,
     increment:      1024,
@@ -64,7 +64,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.storagePlaceholder'
   },
   {
-    value:           'secrets',
+    value:          'secrets',
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -72,7 +72,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'services',
+    value:          'services',
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -80,7 +80,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'servicesLoadBalancers',
+    value:          'servicesLoadBalancers',
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -88,7 +88,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:           'servicesNodePorts',
+    value:          'servicesNodePorts',
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',

package/components/form/ResourceTabs/index.vue

@@ -58,11 +58,6 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
-    },
-
-    alwaysShowEvents: {
-      type:    Boolean,
-      default: false
     }
   },
 
@@ -92,7 +87,7 @@ export default {
       return false;
     },
     showEvents() {
-      return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);
+      return this.isView && this.needEvents && this.hasEvents;
     },
     showRelated() {
       return this.isView && this.needRelated;

package/components/form/SecretSelector.vue

@@ -53,7 +53,7 @@ export default {
       default: 'Key'
     },
     mode: {
-      type:     String,
+      type:    String,
       default: _EDIT
     }
   },

package/components/form/Security.vue

@@ -12,7 +12,7 @@ export default {
     LabeledSelect
   },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -63,10 +63,10 @@ export default {
 
     const {
       capabilities = {},
-      runAsRoot = true,
+      runAsNonRoot = false,
       readOnlyRootFilesystem = false,
       privileged = false,
-      allowPrivilegeEscalation = true,
+      allowPrivilegeEscalation = false,
       runAsUser
     } = this.value;
     const {
@@ -78,7 +78,7 @@ export default {
       privileged,
       allowPrivilegeEscalation,
       allCapabilities,
-      runAsRoot,
+      runAsNonRoot,
       readOnlyRootFilesystem,
       add,
       drop,
@@ -105,7 +105,7 @@ export default {
   methods: {
     update() {
       const securityContext = {
-        runAsRoot:                this.runAsRoot,
+        runAsNonRoot:             this.runAsNonRoot,
         readOnlyRootFilesystem:   this.readOnlyRootFilesystem,
         capabilities:             { add: this.add, drop: this.drop },
         privileged:               this.privileged,
@@ -115,6 +115,7 @@ export default {
 
       this.$emit('input', securityContext);
     }
+
   }
 };
 </script>
@@ -164,13 +165,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
+            v-model="runAsNonRoot"
             name="runasNonRoot"
             :label="t('workload.container.security.runAsNonRoot.label')"
-            :value="!runAsRoot"
             :options="[false, true]"
             :labels="[t('workload.container.security.runAsNonRoot.false'), t('workload.container.security.runAsNonRoot.true')]"
             :mode="mode"
-            @input="e=>{runAsRoot = !e; update()}"
+            @input="update"
           />
         </div>
         <div

package/components/form/Select.vue

@@ -135,7 +135,7 @@ export default {
       return true;
     },
     getOptionKey(opt) {
-      if (opt.optionKey) {
+      if (opt?.optionKey) {
         return get(opt, opt.optionKey);
       }
 
@@ -268,6 +268,10 @@ export default {
       }
     }
 
+    & .vs--multiple ::v-deep .vs__selected-options .vs__selected {
+      width: auto;
+    }
+
     ::v-deep .labeled-tooltip.error .status-icon {
       top: 7px;
       right: 2px;
@@ -275,9 +279,10 @@ export default {
 
     ::v-deep .vs__selected-options {
       display: flex;
+      margin: 3px;
 
       .vs__selected {
-          width: 100%;
+          width: initial;
       }
     }