@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

package/components/fleet/FleetClusterTargets/index.vue

@@ -0,0 +1,455 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { isEmpty } from 'lodash';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import { FLEET } from '@shell/config/types';
+import FleetUtils from '@shell/utils/fleet';
+import { Expression, Selector, Target, TargetMode } from '@shell/types/fleet';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import MatchExpressions from '@shell/components/form/MatchExpressions.vue';
+import { Banner } from '@components/Banner';
+import { RcButton } from '@components/RcButton';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import TargetsList from '@shell/components/fleet/FleetClusterTargets/TargetsList.vue';
+
+export interface Cluster {
+  name: string,
+  nameDisplay: string
+}
+
+interface DataType {
+  targetMode: TargetMode,
+  allClusters: any[],
+  selectedClusters: string[],
+  clusterSelectors: Selector[],
+  key: number,
+}
+
+const excludeHarvesterRule = FleetUtils.Application.excludeHarvesterRule;
+
+export default {
+
+  name: 'FleetClusterTargets',
+
+  emits: ['update:value', 'created'],
+
+  components: {
+    Banner,
+    LabeledSelect,
+    MatchExpressions,
+    RadioGroup,
+    RcButton,
+    TargetsList,
+  },
+
+  props: {
+    targets: {
+      type:    Array as PropType<Target[]>,
+      default: () => [],
+    },
+
+    matching: {
+      type:    Array as PropType<Cluster[]>,
+      default: () => [],
+    },
+
+    namespace: {
+      type:    String,
+      default: ''
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    created: {
+      type:    String as PropType<TargetMode>,
+      default: '',
+    },
+  },
+
+  async fetch() {
+    const hash = await checkSchemasForFindAllHash({
+      allClusters: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER
+      }
+    }, this.$store) as { allClusters: any[] };
+
+    this.allClusters = hash.allClusters || [];
+  },
+
+  data(): DataType {
+    return {
+      targetMode:       'all',
+      allClusters:      [],
+      selectedClusters: [],
+      clusterSelectors: [],
+      key:              0 // Generates a unique key to handle Targets
+    };
+  },
+
+  mounted() {
+    this.fromTargets();
+
+    if (this.mode === _CREATE) {
+      this.update();
+
+      // Restore the targetMode from parent component; this is the case of edit targets in CREATE mode, go to YAML editor and come back to the form
+      this.targetMode = this.created || 'all';
+    } else {
+      this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace);
+    }
+  },
+
+  watch: {
+    namespace() {
+      if (this.mode === _CREATE) {
+        this.reset();
+      }
+
+      if (this.mode !== _VIEW) {
+        this.update();
+      }
+    },
+  },
+
+  computed: {
+    targetModeOptions(): { label: string, value: TargetMode }[] {
+      if (this.namespace === 'fleet-local') {
+        return [{
+          label: 'local cluster',
+          value: 'local'
+        }];
+      }
+
+      const out: { label: string, value: TargetMode }[] = [
+        {
+          label: 'All Clusters in the workspace',
+          value: 'all',
+        },
+        {
+          label: 'No clusters',
+          value: 'none'
+        },
+      ];
+
+      if (this.clustersOptions.length) {
+        out.push({
+          label: 'Manually selected clusters',
+          value: 'clusters'
+        });
+      }
+
+      return out;
+    },
+
+    clustersOptions() {
+      return this.allClusters
+        .filter((x) => x.metadata.namespace === this.namespace && !isHarvesterCluster(x))
+        .map((x) => ({ label: x.nameDisplay, value: x.metadata.name }));
+    },
+
+    isLocal() {
+      return this.namespace === 'fleet-local';
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    selectTargetMode(value: TargetMode) {
+      this.targetMode = value;
+
+      // Save the current targetMode in parent component
+      this.$emit('created', this.targetMode);
+
+      this.update();
+    },
+
+    selectClusters(list: string[]) {
+      this.selectedClusters = list;
+
+      this.update();
+    },
+
+    addMatchExpressions() {
+      const neu = { key: this.key++ };
+
+      this.clusterSelectors.push(neu);
+
+      // Focus first element in MatchExpression
+      this.$nextTick(() => {
+        const matchExpression = (this.$refs[`match-expression-${ neu.key }`] as HTMLElement[])?.[0];
+
+        matchExpression?.focus();
+      });
+
+      this.update();
+    },
+
+    updateMatchExpressions(index: number, value: Selector, key?: number) {
+      this.clusterSelectors[index] = { ...value, key };
+
+      this.update();
+    },
+
+    removeMatchExpressions(key?: number) {
+      this.clusterSelectors = this.clusterSelectors.filter((f) => f.key !== key);
+
+      this.update();
+    },
+
+    update() {
+      const targets = this.toTargets();
+
+      this.$emit('update:value', targets);
+    },
+
+    fromTargets() {
+      if (!this.targets?.length) {
+        return;
+      }
+
+      for (const target of this.targets) {
+        const {
+          clusterName,
+          clusterSelector,
+          clusterGroup,
+          clusterGroupSelector,
+        } = target;
+
+        // If clusterGroup or clusterGroupSelector are defined, targets are marked as complex and won't handle by the UI
+        if (clusterGroup || clusterGroupSelector) {
+          return;
+        }
+
+        if (clusterName) {
+          this.selectedClusters.push(clusterName);
+        }
+
+        if (!isEmpty(clusterSelector)) {
+          const neu = {
+            key:              this.key++,
+            matchLabels:      clusterSelector.matchLabels,
+            matchExpressions: clusterSelector.matchExpressions?.filter((f) => f.key !== excludeHarvesterRule.clusterSelector.matchExpressions[0].key)
+          };
+
+          if (neu.matchLabels || neu.matchExpressions?.length) {
+            this.clusterSelectors.push(neu);
+          }
+        }
+      }
+    },
+
+    toTargets(): Target[] | undefined {
+      switch (this.targetMode) {
+      case 'none':
+        return undefined;
+      case 'all':
+        return [excludeHarvesterRule];
+      case 'clusters':
+        return this.normalizeTargets(this.selectedClusters, this.clusterSelectors);
+      case 'advanced':
+      case 'local':
+        return this.targets;
+      }
+    },
+
+    normalizeTargets(selected: string[], clusterMatchExpressions: Selector[]) {
+      const targets: Target[] = [];
+
+      selected.forEach((clusterName) => {
+        targets.push({ clusterName });
+      });
+
+      clusterMatchExpressions.forEach((elem) => {
+        const { matchLabels: labels, matchExpressions: expressions } = elem || {};
+
+        if (labels || expressions) {
+          const matchLabels = Object.keys(labels || {}).reduce((acc, key) => {
+            if (key && labels) {
+              return {
+                ...acc,
+                [key]: labels[key],
+              };
+            }
+
+            return acc;
+          }, {});
+
+          const matchExpressions = (expressions || []).reduce((acc, expression) => {
+            // Do not display Harvester-exclude rule
+            if (expression.key && expression.key !== excludeHarvesterRule.clusterSelector.matchExpressions[0].key) {
+              return [
+                ...acc,
+                expression
+              ];
+            }
+
+            return acc;
+          }, [] as Expression[]);
+
+          const clusterSelector: Selector = {};
+
+          if (!isEmpty(matchLabels)) {
+            clusterSelector.matchLabels = matchLabels;
+          }
+
+          if (matchExpressions.length) {
+            clusterSelector.matchExpressions = matchExpressions;
+          }
+
+          if (!isEmpty(clusterSelector)) {
+            targets.push({ clusterSelector });
+          }
+        }
+      });
+
+      if (targets.length) {
+        return targets;
+      }
+
+      return undefined;
+    },
+
+    reset() {
+      this.targetMode = 'all';
+      this.selectedClusters = [];
+      this.clusterSelectors = [];
+    }
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="targetMode !== 'advanced'"
+    class="row"
+  >
+    <RadioGroup
+      name="targetMode"
+      data-testid="fleet-target-cluster-radio-button"
+      :value="isLocal ? 'local' : targetMode"
+      :mode="mode"
+      :options="targetModeOptions"
+      :disabled="isView"
+      @update:value="selectTargetMode"
+    />
+  </div>
+
+  <Banner
+    v-if="targetMode === 'advanced'"
+    class="row"
+    color="warning"
+    :label="t('fleet.clusterTargets.advancedConfigs')"
+  />
+
+  <div
+    v-if="targetMode === 'clusters'"
+    class="row mt-20"
+  >
+    <div class="col span-9">
+      <h3 class="m-0">
+        {{ t('fleet.clusterTargets.title') }}
+      </h3>
+      <LabeledSelect
+        data-testid="fleet-target-cluster-name-selector"
+        class="mmt-4"
+        :value="selectedClusters"
+        :label="t('fleet.clusterTargets.label')"
+        :options="clustersOptions"
+        :taggable="true"
+        :close-on-select="false"
+        :mode="mode"
+        :multiple="true"
+        :placeholder="t('fleet.clusterTargets.placeholders.selectMultiple')"
+        @update:value="selectClusters"
+      />
+      <div class="mmt-8">
+        <h3 class="m-0">
+          {{ t('fleet.clusterTargets.rules.title') }}
+        </h3>
+        <div
+          v-for="(selector, i) in clusterSelectors"
+          :key="selector.key"
+          class="match-expressions-container mmt-4"
+        >
+          <MatchExpressions
+            :ref="`match-expression-${ selector.key }`"
+            class="body"
+            :value="selector"
+            :mode="mode"
+            :initial-empty-row="true"
+            :label-key="t('fleet.clusterTargets.rules.labelKey')"
+            :add-icon="'icon-plus'"
+            :add-class="'btn-sm'"
+            @update:value="updateMatchExpressions(i, $event, selector.key)"
+          />
+          <RcButton
+            small
+            link
+            @click="removeMatchExpressions(selector.key)"
+          >
+            <i class="icon icon-x" />
+          </RcButton>
+        </div>
+        <RcButton
+          small
+          secondary
+          class="mmt-6"
+          @click="addMatchExpressions"
+        >
+          <i class="icon icon-plus" />
+          <span>{{ t('fleet.clusterTargets.rules.addSelector') }}</span>
+        </RcButton>
+      </div>
+    </div>
+    <div class="col span-3">
+      <TargetsList
+        class="target-list"
+        :clusters="matching"
+        :empty-label="t('fleet.clusterTargets.rules.matching.placeholder')"
+      />
+    </div>
+  </div>
+
+  <div
+    v-if="targetMode === 'all' && !isLocal"
+    class="row"
+  >
+    <div class="col span-6">
+      <TargetsList
+        class="target-list mt-20"
+        :clusters="matching"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .match-expressions-container {
+    display: flex;
+    align-items: start;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+
+    .body {
+      padding: 15px;
+      width: 100%;
+    }
+
+    .btn {
+      margin: 5px;
+    }
+  }
+
+  .target-list {
+    max-height: 250px;
+  }
+</style>

package/components/fleet/FleetClusters.vue

@@ -38,16 +38,23 @@ export default {
         STATE,
         NAME,
         {
-          name:     'bundlesReady',
-          labelKey: 'tableHeaders.bundlesReady',
-          value:    'status.display.readyBundles',
+          name:     'reposReady',
+          labelKey: 'tableHeaders.reposReady',
+          value:    'status.readyGitRepos',
           sort:     'status.summary.ready',
           search:   false,
         },
         {
-          name:     'reposReady',
-          labelKey: 'tableHeaders.reposReady',
-          value:    'status.readyGitRepos',
+          name:     'helmOpsReady',
+          labelKey: 'tableHeaders.helmOpsReady',
+          value:    'status.readyHelmOps',
+          sort:     'status.summary.ready',
+          search:   false,
+        },
+        {
+          name:     'bundlesReady',
+          labelKey: 'tableHeaders.bundlesReady',
+          value:    'status.display.readyBundles',
           sort:     'status.summary.ready',
           search:   false,
         },
@@ -117,6 +124,18 @@ export default {
       <span v-else>{{ row.repoInfo.total }}</span>
     </template>
 
+    <template #cell:helmOpsReady="{row}">
+      <span
+        v-if="!row.helmOpsInfo"
+        class="text-muted"
+      >&mdash;</span>
+      <span
+        v-else-if="row.helmOpsInfo.unready"
+        class="text-warning"
+      >{{ row.helmOpsInfo.ready }}/{{ row.helmOpsInfo.total }}</span>
+      <span v-else>{{ row.helmOpsInfo.total }}</span>
+    </template>
+
     <template #cell:bundlesReady="{row}">
       <span
         v-if="row.bundleInfo.noValidData"