@rancher/shell 0.1.0 → 0.1.1

package/components/form/PodAffinity.vue

@@ -4,8 +4,8 @@ import { get, set, isEmpty, clone } from '@shell/utils/object';
 import { POD, NODE, NAMESPACE } from '@shell/config/types';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { randomStr } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import debounce from 'lodash/debounce';
@@ -35,6 +35,11 @@ export default {
       type:    Array,
       default: () => []
     },
+
+    namespaces: {
+      type:    Array,
+      default: null
+    },
   },
 
   data() {
@@ -49,6 +54,7 @@ export default {
       out._anti = false;
       if (term.podAffinityTerm) {
         Object.assign(out, term.podAffinityTerm);
+        out._namespaces = (term.podAffinityTerm.namespaces || []).toString();
         delete out.podAffinityTerm;
       }
 
@@ -61,6 +67,7 @@ export default {
       out._anti = true;
       if (term.podAffinityTerm) {
         Object.assign(out, term.podAffinityTerm);
+        out._namespaces = (term.podAffinityTerm.namespaces || []).toString();
         delete out.podAffinityTerm;
       }
 
@@ -71,7 +78,10 @@ export default {
 
     return {
       allSelectorTerms,
-      defaultWeight: 1
+      defaultWeight: 1,
+      // rules in MatchExpressions.vue can not catch changes what happens on parent component
+      // we need re-render it via key changing
+      rerenderNums:  randomStr(4)
     };
   },
   computed: {
@@ -89,7 +99,7 @@ export default {
 
     allNamespaces() {
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
-      const choices = this.$store.getters[`${ inStore }/all`](NAMESPACE);
+      const choices = this.namespaces || this.$store.getters[`${ inStore }/all`](NAMESPACE);
       const out = sortBy(choices.map((obj) => {
         return {
           label: obj.nameDisplay,
@@ -102,8 +112,17 @@ export default {
 
     existingNodeLabels() {
       return getUniqueLabelKeys(this.nodes);
-    }
+    },
+
+    hasNodes() {
+      return this.nodes.length;
+    },
+
+    hasNamespaces() {
+      return this.allNamespaces.length;
+    },
   },
+
   created() {
     this.queueUpdate = debounce(this.update, 500);
   },
@@ -132,6 +151,12 @@ export default {
       });
 
       Object.assign(this.value.affinity, { podAffinity, podAntiAffinity });
+      this.$emit('update', this.value);
+    },
+
+    remove() {
+      this.rerenderNums = randomStr(4);
+      this.queueUpdate();
     },
 
     addSelector() {
@@ -163,14 +188,25 @@ export default {
     changeNamespaceMode(term, idx) {
       if (term.namespaces) {
         term.namespaces = null;
+        term._namespaces = null;
       } else {
         this.$set(term, 'namespaces', []);
+        this.$set(term, '_namespaces', '');
       }
       this.$set(this.allSelectorTerms, idx, term);
+      this.queueUpdate();
     },
 
     updateNamespaces(term, namespaces) {
-      this.$set(term, 'namespaces', namespaces);
+      let nsArray = namespaces;
+
+      // namespaces would be String if there is no namespace
+      if (!this.hasNamespaces) {
+        nsArray = namespaces.split(',').map(ns => ns.trim()).filter(ns => ns?.length);
+      }
+
+      this.$set(term, 'namespaces', nsArray);
+      this.queueUpdate();
     },
 
     isEmpty,
@@ -190,6 +226,7 @@ export default {
         :default-add-value="{ matchExpressions: [] }"
         :mode="mode"
         :add-label="t('workload.scheduling.affinity.addNodeSelector')"
+        @remove="remove"
       >
         <template #default="props">
           <div class="row mt-20 mb-20">
@@ -226,15 +263,26 @@ export default {
           <div class="spacer"></div>
           <div v-if="!!props.row.value.namespaces || !!get(props.row.value, 'podAffinityTerm.namespaces')" class="row mb-20">
             <LabeledSelect
+              v-if="hasNamespaces"
               v-model="props.row.value.namespaces"
               :mode="mode"
               :multiple="true"
               :taggable="true"
               :options="allNamespaces"
               :label="t('workload.scheduling.affinity.matchExpressions.inNamespaces')"
+              @input="updateNamespaces(props.row.value, props.row.value.namespaces)"
+            />
+            <LabeledInput
+              v-else
+              v-model="props.row.value._namespaces"
+              :mode="mode"
+              :label="t('workload.scheduling.affinity.matchExpressions.inNamespaces')"
+              :placeholder="t('cluster.credential.harvester.affinity.namespaces.placeholder')"
+              @input="updateNamespaces(props.row.value, props.row.value._namespaces)"
             />
           </div>
           <MatchExpressions
+            :key="rerenderNums"
             :mode="mode"
             class=" col span-12 mt-20"
             :type="pod"
@@ -246,6 +294,7 @@ export default {
           <div class="row">
             <div class="col span-12">
               <LabeledSelect
+                v-if="hasNodes"
                 v-model="props.row.value.topologyKey"
                 :taggable="true"
                 :searchable="true"
@@ -258,6 +307,15 @@ export default {
                 :disabled="mode==='view'"
                 @input="update"
               />
+              <LabeledInput
+                v-else
+                v-model="props.row.value.topologyKey"
+                :mode="mode"
+                :label="t('workload.scheduling.affinity.topologyKey.label')"
+                :placeholder="t('workload.scheduling.affinity.topologyKey.placeholder')"
+                required
+                @input="update"
+              />
             </div>
           </div>
 

package/components/form/PodSecurity.vue

@@ -1,9 +1,9 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import ArrayList from '@shell/components/form/ArrayList';
 import KeyValue from '@shell/components/form/KeyValue';
 import { mapGetters } from 'vuex';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: {

package/components/form/Ports.vue

@@ -3,7 +3,7 @@ import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   components: { Checkbox },

package/components/form/Probe.vue

@@ -2,7 +2,7 @@
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import UnitInput from '@shell/components/form/UnitInput';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ShellInput from '@shell/components/form/ShellInput';
 import KeyValue from '@shell/components/form/KeyValue';
@@ -143,7 +143,7 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div class="title clearfix">
       <h3>
         {{ label }}
@@ -151,18 +151,26 @@ export default {
       </h3>
     </div>
     <div class="row">
-      <div class="col span-11-of-23">
+      <div
+        data-testid="input-probe-kind"
+        class="col span-11-of-23"
+      >
         <LabeledSelect
           v-model="kind"
           :mode="mode"
           :label="t('probe.type.label')"
           :options="kindOptions"
           :placeholder="t('probe.type.placeholder')"
+          @input="update"
         />
 
         <div v-if="kind && kind!=='none'" class="spacer-small" />
 
-        <div v-if="kind === 'HTTP' || kind === 'HTTPS'">
+        <!-- HTTP/HTTPS -->
+        <div
+          v-if="kind === 'HTTP' || kind === 'HTTPS'"
+          data-testid="input-probe-port"
+        >
           <LabeledInput
             v-model.number="httpGet.port"
             type="number"
@@ -171,19 +179,27 @@ export default {
             :mode="mode"
             :label="t('probe.httpGet.port.label')"
             :placeholder="t('probe.httpGet.port.placeholder')"
+            @input="update"
           />
 
           <div class="spacer-small" />
 
-          <LabeledInput
-            v-model="httpGet.path"
-            :mode="mode"
-            :label="t('probe.httpGet.path.label')"
-            :placeholder="t('probe.httpGet.path.placeholder')"
-          />
+          <div data-testid="input-probe-path">
+            <LabeledInput
+              v-model="httpGet.path"
+              :mode="mode"
+              :label="t('probe.httpGet.path.label')"
+              :placeholder="t('probe.httpGet.path.placeholder')"
+              @input="update"
+            />
+          </div>
         </div>
 
-        <div v-if="kind === 'tcp'">
+        <!-- TCP -->
+        <div
+          v-if="kind === 'tcp'"
+          data-testid="input-probe-socket"
+        >
           <LabeledInput
             v-model.number="tcpSocket.port"
             type="number"
@@ -192,16 +208,22 @@ export default {
             :mode="mode"
             :label="t('probe.httpGet.port.label')"
             :placeholder="t('probe.httpGet.port.placeholderDeux')"
+            @input="update"
           />
           <div class="spacer-small" />
         </div>
 
-        <div v-if="kind === 'exec'">
+        <!-- Exec -->
+        <div
+          v-if="kind === 'exec'"
+          data-testid="input-probe-command"
+        >
           <div class="col span-12">
             <ShellInput
               v-model="exec.command"
               :label="t('probe.command.label')"
               :placeholder="t('probe.command.placeholder')"
+              @input="update"
             />
           </div>
           <div class="spacer-small" />
@@ -212,9 +234,13 @@ export default {
         <hr v-if="kind && kind!=='none'" :style="{'position':'relative', 'margin':'0px'}" class="vertical" />
       </div>
 
+      <!-- none -->
       <div v-if="!isNone" class="col span-11-of-23">
         <div class="row">
-          <div class="col span-4">
+          <div
+            data-testid="input-probe-periodSeconds"
+            class="col span-4"
+          >
             <UnitInput
               v-model="probe.periodSeconds"
               :mode="mode"
@@ -222,9 +248,13 @@ export default {
               min="1"
               :suffix="t('suffix.sec')"
               :placeholder="t('probe.checkInterval.placeholder')"
+              @input="update"
             />
           </div>
-          <div class="col span-4">
+          <div
+            data-testid="input-probe-initialDelaySeconds"
+            class="col span-4"
+          >
             <UnitInput
               v-model="probe.initialDelaySeconds"
               :mode="mode"
@@ -232,9 +262,13 @@ export default {
               :label="t('probe.initialDelay.label')"
               min="0"
               :placeholder="t('probe.initialDelay.placeholder')"
+              @input="update"
             />
           </div>
-          <div class="col span-4">
+          <div
+            data-testid="input-probe-timeoutSeconds"
+            class="col span-4"
+          >
             <UnitInput
               v-model="probe.timeoutSeconds"
               :mode="mode"
@@ -242,6 +276,7 @@ export default {
               :label="t('probe.timeout.placeholder')"
               min="0"
               :placeholder="t('probe.timeout.placeholder')"
+              @input="update"
             />
           </div>
         </div>
@@ -249,7 +284,10 @@ export default {
         <div class="spacer-small" />
 
         <div class="row">
-          <div class="col span-6">
+          <div
+            data-testid="input-probe-successThreshold"
+            class="col span-6"
+          >
             <LabeledInput
               v-model.number="probe.successThreshold"
               type="number"
@@ -257,9 +295,13 @@ export default {
               :mode="mode"
               :label="t('probe.successThreshold.label')"
               :placeholder="t('probe.successThreshold.placeholder')"
+              @input="update"
             />
           </div>
-          <div class="col span-6">
+          <div
+            data-testid="input-probe-failureThreshold"
+            class="col span-6"
+          >
             <LabeledInput
               v-model.number="probe.failureThreshold"
               type="number"
@@ -267,6 +309,7 @@ export default {
               :mode="mode"
               :label="t('probe.failureThreshold.label')"
               :placeholder="t('probe.failureThreshold.label')"
+              @input="update"
             />
           </div>
         </div>

package/components/form/ProjectMemberEditor.vue

@@ -3,9 +3,9 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
 import { MANAGEMENT } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
-import Card from '@shell/components/Card';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Card } from '@components/Card';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 
 export default {

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -101,6 +101,9 @@ export default {
     max() {
       return this.projectLimit - this.namespaceContribution;
     },
+    availableResourceQuotas() {
+      return formatSi(this.projectLimit - this.totalContribution, { ...this.siOptions, addSuffixSpace: false });
+    },
     slices() {
       const out = [];
 
@@ -112,7 +115,42 @@ export default {
       });
 
       return out;
-    }
+    },
+    tooltip() {
+      const t = this.$store.getters['i18n/t'];
+      const out = [
+        {
+          label: t('resourceQuota.tooltip.reserved'),
+          value: formatSi(this.namespaceContribution, { ...this.siOptions, addSuffixSpace: false }),
+        },
+        {
+          label: t('resourceQuota.tooltip.namespace'),
+          value: this.value.limit[this.type]
+        },
+        {
+          label: t('resourceQuota.tooltip.available'),
+          value: this.availableResourceQuotas
+        },
+        {
+          label: t('resourceQuota.tooltip.max'),
+          value: this.projectResourceQuotaLimits[this.type]
+        }
+      ];
+
+      let formattedTooltip = '<div class="quota-percentage-tooltip">';
+
+      (out || []).forEach((v) => {
+        formattedTooltip += `
+        <div style='margin-top: 5px; display: flex; justify-content: space-between;'>
+          ${ v.label }
+          <span style='margin-left: 20px;'>${ v.value }</span>
+        </div>`;
+      });
+      formattedTooltip += '</div>';
+
+      return formattedTooltip;
+    },
+
   },
 
   methods: {
@@ -140,7 +178,13 @@ export default {
       :options="types"
     />
     <div class="resource-availability mr-10">
-      <PercentageBar class="percentage-bar" :value="percentageUsed" :slices="slices" :color-stops="{'100': '--primary'}" />
+      <PercentageBar
+        v-tooltip="tooltip"
+        class="percentage-bar"
+        :value="percentageUsed"
+        :slices="slices"
+        :color-stops="{'100': '--primary'}"
+      />
     </div>
     <UnitInput
       :value="value.limit[type]"

package/components/form/ResourceQuota/Project.vue

@@ -42,6 +42,9 @@ export default {
     remainingTypes(currentType) {
       return this.mappedTypes
         .filter(mappedType => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
+    },
+    emitRemove(data) {
+      this.$emit('remove', data.row?.value);
     }
   },
 };
@@ -66,6 +69,7 @@ export default {
       :default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
       :add-allowed="remainingTypes().length > 0"
       :mode="mode"
+      @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)" />

package/components/form/ResourceTabs/index.vue

@@ -58,6 +58,11 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
+    },
+
+    alwaysShowEvents: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -84,22 +89,28 @@ export default {
       return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
     },
     showEvents() {
-      return this.isView && this.needEvents && !this.$fetchState.pending && this.hasEvents && this.events.length;
+      return this.isView && this.needEvents && !this.$fetchState.pending && this.hasEvents && (this.events.length || this.alwaysShowEvents);
     },
     showRelated() {
       return this.isView && this.needRelated && !this.$fetchState.pending;
     },
     eventHeaders() {
       return [
+        {
+          name:  'type',
+          label: this.t('tableHeaders.type'),
+          value: 'eventType',
+          sort:  'eventType',
+        },
         {
           name:  'reason',
-          label: 'Reason',
+          label: this.t('tableHeaders.reason'),
           value: 'reason',
           sort:  'reason',
         },
         {
           name:          'date',
-          label:         'Updated',
+          label:         this.t('tableHeaders.updated'),
           value:         'date',
           sort:          'date:desc',
           formatter:     'LiveDate',
@@ -108,7 +119,7 @@ export default {
         },
         {
           name:  'message',
-          label: 'Message',
+          label: this.t('tableHeaders.message'),
           value: 'message',
           sort:  'message',
         },
@@ -119,9 +130,10 @@ export default {
         return event.involvedObject?.uid === this.value?.metadata?.uid;
       }).map((event) => {
         return {
-          reason:  (`${ event.reason || 'Unknown' }${ event.count > 1 ? ` (${ event.count })` : '' }`).trim(),
-          message: event.message || 'Unknown',
-          date:    event.lastTimestamp || event.firstTimestamp || event.metadata.creationTimestamp,
+          reason:    (`${ event.reason || this.t('generic.unknown') }${ event.count > 1 ? ` (${ event.count })` : '' }`).trim(),
+          message:   event.message || this.t('generic.unknown'),
+          date:      event.lastTimestamp || event.firstTimestamp || event.metadata.creationTimestamp,
+          eventType: event.eventType
         };
       });
     },

package/components/form/RuleSelector.vue

@@ -1,7 +1,7 @@
 <script>
 import { _VIEW } from '@shell/config/query-params';
 import ArrayList from '@shell/components/form/ArrayList';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Select from '@shell/components/form/Select';
 
 const OPERATOR_VALUES = {