@rancher/shell 0.2.3 → 0.2.4

package/components/form/PlusMinus.vue

@@ -45,14 +45,29 @@ export default {
 
 <template>
   <div class="plus-minus">
-    <span v-if="label" class="label">{{ label }} </span>
-    <button v-tooltip="minusTooltip" :disabled="disabled || !canMinus" type="button" class="btn btn-sm role-secondary" @click="$emit('minus')">
+    <span
+      v-if="label"
+      class="label"
+    >{{ label }} </span>
+    <button
+      v-tooltip="minusTooltip"
+      :disabled="disabled || !canMinus"
+      type="button"
+      class="btn btn-sm role-secondary"
+      @click="$emit('minus')"
+    >
       <i class="icon icon-sm icon-minus" />
     </button>
     <div class="value">
       {{ value }}
     </div>
-    <button v-tooltip="plusTooltip" :disabled="disabled || !canPlus" type="button" class="btn btn-sm role-secondary" @click="$emit('plus')">
+    <button
+      v-tooltip="plusTooltip"
+      :disabled="disabled || !canPlus"
+      type="button"
+      class="btn btn-sm role-secondary"
+      @click="$emit('plus')"
+    >
       <i class="icon icon-sm icon-plus" />
     </button>
   </div>

package/components/form/PodAffinity.vue

@@ -222,7 +222,11 @@ export default {
 </script>
 
 <template>
-  <div :style="{'width':'100%'}" class="row" @input="queueUpdate">
+  <div
+    :style="{'width':'100%'}"
+    class="row"
+    @input="queueUpdate"
+  >
     <div class="col span-12">
       <ArrayListGrouped
         v-model="allSelectorTerms"
@@ -264,8 +268,11 @@ export default {
               @input="changeNamespaceMode(props.row.value, props.i)"
             />
           </div>
-          <div class="spacer"></div>
-          <div v-if="!!props.row.value.namespaces || !!get(props.row.value, 'podAffinityTerm.namespaces')" class="row mb-20">
+          <div class="spacer" />
+          <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"
@@ -294,7 +301,7 @@ export default {
             :show-remove="false"
             @input="e=>set(props.row.value, 'labelSelector.matchExpressions', e)"
           />
-          <div class="spacer"></div>
+          <div class="spacer" />
           <div class="row">
             <div class="col span-12">
               <LabeledSelect
@@ -324,7 +331,7 @@ export default {
             </div>
           </div>
 
-          <div class="spacer"></div>
+          <div class="spacer" />
           <div class="row">
             <div class="col span-6">
               <LabeledInput

package/components/form/PodSecurity.vue

@@ -79,10 +79,18 @@ export default {
 
     <div class="row">
       <div class="col span-6">
-        <LabeledInput v-model.number="runAsUser" :label="t('workload.container.security.runAsUser')" :mode="mode" />
+        <LabeledInput
+          v-model.number="runAsUser"
+          :label="t('workload.container.security.runAsUser')"
+          :mode="mode"
+        />
       </div>
       <div class="col span-6">
-        <LabeledInput v-model.number="runAsGroup" :label="t('workload.container.security.runAsGroup')" :mode="mode" />
+        <LabeledInput
+          v-model.number="runAsGroup"
+          :label="t('workload.container.security.runAsGroup')"
+          :mode="mode"
+        />
       </div>
     </div>
 
@@ -93,7 +101,11 @@ export default {
         <h5 class="text-label">
           <t k="workload.container.security.supplementalGroups" />
         </h5>
-        <ArrayList v-model="supplementalGroups" :add-label="t('workload.container.security.addGroupIDs')" :mode="mode" />
+        <ArrayList
+          v-model="supplementalGroups"
+          :add-label="t('workload.container.security.addGroupIDs')"
+          :mode="mode"
+        />
       </div>
     </div>
 
@@ -101,7 +113,11 @@ export default {
 
     <div class="row">
       <div class="col span-6">
-        <LabeledInput v-model.number="fsGroup" :label="t('workload.container.security.fsGroup')" :mode="mode" />
+        <LabeledInput
+          v-model.number="fsGroup"
+          :label="t('workload.container.security.fsGroup')"
+          :mode="mode"
+        />
       </div>
     </div>
 

package/components/form/Ports.vue

@@ -106,15 +106,21 @@ export default {
 
 <template>
   <div>
-    <div class="spacer"></div>
+    <div class="spacer" />
     <div class="clearfix">
       <h4>Ports</h4>
     </div>
 
-    <table v-if="rows.length" class="fixed">
+    <table
+      v-if="rows.length"
+      class="fixed"
+    >
       <thead>
         <tr>
-          <th v-if="padLeft" class="left"></th>
+          <th
+            v-if="padLeft"
+            class="left"
+          />
           <th class="port">
             Listening Port
           </th>
@@ -130,7 +136,10 @@ export default {
           <th class="hostPort">
             Host Port
           </th>
-          <th v-if="showRemove" class="remove"></th>
+          <th
+            v-if="showRemove"
+            class="remove"
+          />
         </tr>
       </thead>
       <tbody>
@@ -138,7 +147,10 @@ export default {
           v-for="(row, idx) in rows"
           :key="idx"
         >
-          <td v-if="padLeft" class="left"></td>
+          <td
+            v-if="padLeft"
+            class="left"
+          />
           <td class="port">
             <span v-if="isView">{{ row.port }}</span>
             <input
@@ -150,7 +162,7 @@ export default {
               max="65535"
               placeholder="e.g. 8080"
               @input="queueUpdate"
-            />
+            >
           </td>
           <td class="protocol">
             <span v-if="isView">{{ row.protocol }}</span>
@@ -189,7 +201,7 @@ export default {
               max="65535"
               placeholder="e.g. 80"
               @input="queueUpdate"
-            />
+            >
           </td>
           <td class="expose">
             <span v-if="isView">{{ row.expose ? "Yes" : "No" }}</span>
@@ -209,16 +221,30 @@ export default {
               @input="queueUpdate"
             />
           </td>
-          <td v-if="showRemove" class="remove">
-            <button type="button" class="btn role-link" @click="remove(idx)">
+          <td
+            v-if="showRemove"
+            class="remove"
+          >
+            <button
+              type="button"
+              class="btn role-link"
+              @click="remove(idx)"
+            >
               Remove
             </button>
           </td>
         </tr>
       </tbody>
     </table>
-    <div v-if="showAdd" class="footer">
-      <button type="button" class="btn role-tertiary add" @click="add()">
+    <div
+      v-if="showAdd"
+      class="footer"
+    >
+      <button
+        type="button"
+        class="btn role-tertiary add"
+        @click="add()"
+      >
         Add Port
       </button>
     </div>

package/components/form/Probe.vue

@@ -147,7 +147,11 @@ export default {
     <div class="title clearfix">
       <h3>
         {{ label }}
-        <i v-if="description" v-tooltip="description" class="icon icon-info" />
+        <i
+          v-if="description"
+          v-tooltip="description"
+          class="icon icon-info"
+        />
       </h3>
     </div>
     <div class="row">
@@ -164,7 +168,10 @@ export default {
           @input="update"
         />
 
-        <div v-if="kind && kind!=='none'" class="spacer-small" />
+        <div
+          v-if="kind && kind!=='none'"
+          class="spacer-small"
+        />
 
         <!-- HTTP/HTTPS -->
         <div
@@ -231,11 +238,18 @@ export default {
       </div>
 
       <div class="col span-1-of-13">
-        <hr v-if="kind && kind!=='none'" :style="{'position':'relative', 'margin':'0px'}" class="vertical" />
+        <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
+        v-if="!isNone"
+        class="col span-11-of-23"
+      >
         <div class="row">
           <div
             data-testid="input-probe-periodSeconds"

package/components/form/ProjectMemberEditor.vue

@@ -244,10 +244,20 @@ export default {
   <div v-else>
     <div class="row mt-10">
       <div class="col span-12">
-        <SelectPrincipal project class="mb-20" :mode="mode" :retain-selection="true" @add="onAdd" />
+        <SelectPrincipal
+          project
+          class="mb-20"
+          :mode="mode"
+          :retain-selection="true"
+          @add="onAdd"
+        />
       </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">
           <h3>{{ t('projectMembers.projectPermissions.label') }}</h3>
@@ -262,8 +272,18 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div v-if="value.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" />
+        <div
+          v-if="value.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"
+          />
         </div>
       </template>
     </Card>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -169,7 +169,10 @@ export default {
 };
 </script>
 <template>
-  <div v-if="typeOption" class="row">
+  <div
+    v-if="typeOption"
+    class="row"
+  >
     <Select
       class="mr-10"
       :mode="mode"

package/components/form/ResourceQuota/Project.vue

@@ -72,7 +72,13 @@ 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>
   </div>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -45,8 +45,17 @@ export default {
 };
 </script>
 <template>
-  <div v-if="typeOption" class="row">
-    <Select class="mr-10" :mode="mode" :value="type" :options="types" @input="updateType($event)" />
+  <div
+    v-if="typeOption"
+    class="row"
+  >
+    <Select
+      class="mr-10"
+      :mode="mode"
+      :value="type"
+      :options="types"
+      @input="updateType($event)"
+    />
     <UnitInput
       v-model="value.spec.resourceQuota.limit[type]"
       class="mr-10"

package/components/form/ResourceSelector.vue

@@ -0,0 +1,145 @@
+<script>
+import { Banner } from '@components/Banner';
+import MatchExpressions from '@shell/components/form/MatchExpressions';
+import ResourceTable from '@shell/components/ResourceTable';
+import { allHash } from '@shell/utils/promise';
+import { _EDIT } from '@shell/config/query-params';
+import { convert, matching, simplify } from '@shell/utils/selector';
+import throttle from 'lodash/throttle';
+
+export default {
+  name: 'ResourceSelector',
+
+  components: {
+    Banner,
+    MatchExpressions,
+    ResourceTable,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    type: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    },
+    namespace: {
+      type:    String,
+      default: '',
+    },
+  },
+
+  async fetch() {
+    const hash = await allHash({ allResources: this.$store.dispatch('cluster/findAll', { type: this.type }) });
+
+    this.allResources = hash.allResources;
+
+    this.updateMatchingResources();
+  },
+
+  data() {
+    const matchingResources = {
+      matched: 0,
+      matches: [],
+      none:    true,
+      sample:  null,
+      total:   0,
+    };
+
+    return {
+      matchingResources,
+      allResources:        [],
+      allResourcesInScope: [],
+      tableHeaders:        this.$store.getters['type-map/headersFor'](
+        this.$store.getters['cluster/schemaFor'](this.type)
+      ),
+    };
+  },
+
+  watch: {
+    namespace:                'updateMatchingResources',
+    'value.matchLabels':      'updateMatchingResources',
+    'value.matchExpressions': 'updateMatchingResources',
+  },
+
+  computed: {
+    schema() {
+      return this.$store.getters['cluster/schemaFor'](this.type);
+    },
+    selectorExpressions: {
+      get() {
+        return convert(
+          this.value.matchLabels || {},
+          this.value.matchExpressions || []
+        );
+      },
+      set(selectorExpressions) {
+        const { matchLabels, matchExpressions } = simplify(selectorExpressions);
+
+        this.$set(this.value, 'matchLabels', matchLabels);
+        this.$set(this.value, 'matchExpressions', matchExpressions);
+      }
+    },
+  },
+
+  methods: {
+    updateMatchingResources: throttle(function() {
+      this.allResourcesInScope = this.namespace ? this.allResources.filter(res => res.metadata.namespace === this.namespace) : this.allResources;
+      const match = matching(this.allResourcesInScope, this.selectorExpressions);
+      const matched = match.length || 0;
+      const sample = match[0]?.nameDisplay;
+
+      this.matchingResources = {
+        matched,
+        matches: match,
+        none:    matched === 0,
+        sample,
+        total:   this.allResourcesInScope.length,
+      };
+    }, 250, { leading: true }),
+  }
+
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <MatchExpressions
+          v-model="selectorExpressions"
+          :mode="mode"
+          :show-remove="false"
+          :type="type"
+          :target-resources="allResourcesInScope"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner :color="(matchingResources.none ? 'warning' : 'success')">
+          <span v-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
+        </Banner>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <ResourceTable
+          :rows="matchingResources.matches"
+          :headers="tableHeaders"
+          key-field="id"
+          :table-actions="false"
+          :schema="schema"
+          :groupable="false"
+          :search="false"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/components/form/ResourceTabs/index.vue

@@ -168,14 +168,29 @@ export default {
 </script>
 
 <template>
-  <Tabbed v-bind="$attrs" :default-tab="defaultTab" @changed="tabChange">
+  <Tabbed
+    v-bind="$attrs"
+    :default-tab="defaultTab"
+    @changed="tabChange"
+  >
     <slot />
 
-    <Tab v-if="showConditions" label-key="resourceTabs.conditions.tab" name="conditions" :weight="-1" :display-alert-icon="conditionsHaveIssues">
+    <Tab
+      v-if="showConditions"
+      label-key="resourceTabs.conditions.tab"
+      name="conditions"
+      :weight="-1"
+      :display-alert-icon="conditionsHaveIssues"
+    >
       <Conditions :value="value" />
     </Tab>
 
-    <Tab v-if="showEvents" label-key="resourceTabs.events.tab" name="events" :weight="-2">
+    <Tab
+      v-if="showEvents"
+      label-key="resourceTabs.events.tab"
+      name="events"
+      :weight="-2"
+    >
       <SortableTable
         v-if="selectedTab === 'events'"
         :rows="events"
@@ -188,12 +203,28 @@ export default {
       />
     </Tab>
 
-    <Tab v-if="showRelated" name="related" label-key="resourceTabs.related.tab" :weight="-3">
+    <Tab
+      v-if="showRelated"
+      name="related"
+      label-key="resourceTabs.related.tab"
+      :weight="-3"
+    >
       <h3 v-t="'resourceTabs.related.from'" />
-      <RelatedResources :ignore-types="[value.type]" :value="value" direction="from" />
+      <RelatedResources
+        :ignore-types="[value.type]"
+        :value="value"
+        direction="from"
+      />
 
-      <h3 v-t="'resourceTabs.related.to'" class="mt-20" />
-      <RelatedResources :ignore-types="[value.type]" :value="value" direction="to" />
+      <h3
+        v-t="'resourceTabs.related.to'"
+        class="mt-20"
+      />
+      <RelatedResources
+        :ignore-types="[value.type]"
+        :value="value"
+        direction="to"
+      />
     </Tab>
   </Tabbed>
 </template>

package/components/form/RuleSelector.vue

@@ -104,7 +104,10 @@ export default {
 </script>
 
 <template>
-  <div class="rule-selector" :class="{[mode]: true}">
+  <div
+    class="rule-selector"
+    :class="{[mode]: true}"
+  >
     <ArrayList
       v-model="localValue"
       :protip="false"
@@ -124,12 +127,15 @@ export default {
           <div class="value">
             Value
           </div>
-          <div> </div>
+          <div />
         </div>
       </template>
       <template v-slot:columns="scope">
         <div class="key">
-          <LabeledInput v-model="scope.row.value.key" :mode="mode" />
+          <LabeledInput
+            v-model="scope.row.value.key"
+            :mode="mode"
+          />
         </div>
         <div class="operator">
           <Select
@@ -140,7 +146,12 @@ export default {
           />
         </div>
         <div class="value">
-          <LabeledInput :disabled="isValueDisabled(scope)" :value="getValue(scope)" :mode="mode" @input="onValueInput(scope, $event)" />
+          <LabeledInput
+            :disabled="isValueDisabled(scope)"
+            :value="getValue(scope)"
+            :mode="mode"
+            @input="onValueInput(scope, $event)"
+          />
         </div>
       </template>
     </ArrayList>

package/components/form/SecretSelector.vue

@@ -119,7 +119,10 @@ export default {
 </script>
 
 <template>
-  <div class="secret-selector" :class="{'show-key-selector': showKeySelector}">
+  <div
+    class="secret-selector"
+    :class="{'show-key-selector': showKeySelector}"
+  >
     <div class="input-container">
       <LabeledSelect
         v-model="name"

package/components/form/Security.vue

@@ -155,7 +155,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -189,7 +189,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div
       data-testid="input-security-runAsUser"

package/components/form/Select.vue

@@ -223,7 +223,6 @@ export default {
       :selectable="selectable"
       :value="value != null ? value : ''"
       v-on="$listeners"
-      @input="(e) => $emit('input', e)"
       @search:blur="onBlur"
       @search:focus="onFocus"
       @open="resizeHandler"
@@ -235,8 +234,14 @@ export default {
         </div>
       </template>
       <!-- Pass down templates provided by the caller -->
-      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
+      <template
+        v-for="(_, slot) of $scopedSlots"
+        v-slot:[slot]="scope"
+      >
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
       </template>
     </v-select>
     <LabeledTooltip