dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/fleet/FleetApplications.vue

@@ -0,0 +1,174 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { checkPermissions } from '@shell/utils/auth';
+import { FLEET } from '@shell/config/types';
+import { Application } from '@shell/types/fleet';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import FleetIntro from '@shell/components/fleet/FleetIntro.vue';
+import {
+  AGE,
+  NAME,
+  STATE,
+  FLEET_APPLICATION_TYPE,
+  FLEET_APPLICATION_SOURCE,
+  FLEET_APPLICATION_TARGET,
+  FLEET_APPLICATION_CLUSTERS_READY,
+  FLEET_APPLICATION_RESOURCES_SUMMARY,
+} from '@shell/config/table-headers';
+
+interface Permissions {
+  gitRepos: boolean,
+  helmOps: boolean,
+}
+
+interface DataType {
+  permissions: Permissions
+}
+
+export default {
+  name: 'FleetApplications',
+
+  components: {
+    FleetIntro,
+    ResourceTable,
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    workspace: {
+      type:    String,
+      default: ''
+    },
+
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
+
+    rows: {
+      type:     Array as PropType<Application[]>,
+      required: true,
+    },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIntro: {
+      type:    Boolean,
+      default: true,
+    }
+  },
+
+  async fetch() {
+    try {
+      const permissionsSchemas = {
+        gitRepos: {
+          type:            FLEET.GIT_REPO,
+          schemaValidator: (schema: any) => schema.resourceMethods.includes('PUT')
+        },
+        helmOps: {
+          type:            FLEET.HELM_OP,
+          schemaValidator: (schema: any) => schema.resourceMethods.includes('PUT')
+        },
+      };
+
+      const permissions = await checkPermissions(permissionsSchemas, this.$store.getters) as Permissions;
+
+      this.permissions = permissions;
+    } catch (e) {
+      console.error(e); // eslint-disable-line no-console
+    }
+  },
+
+  data(): DataType {
+    return {
+      permissions: {
+        gitRepos: true,
+        helmOps:  true
+      }
+    };
+  },
+
+  computed: {
+    createLocation() {
+      return { name: 'c-cluster-fleet-application-create' };
+    },
+
+    filteredRows() {
+      if (!this.rows) {
+        return [];
+      }
+
+      const selectedNamespaces = this.$store.getters['namespaces']();
+
+      return this.rows.filter((row) => {
+        if (this.workspace) {
+          return this.workspace === row.metadata.namespace;
+        }
+
+        return !!selectedNamespaces[row.metadata.namespace];
+      });
+    },
+
+    isClusterView() {
+      return !!this.clusterId;
+    },
+
+    shouldShowIntro() {
+      return this.showIntro && !this.filteredRows.length;
+    },
+
+    headers() {
+      return [
+        STATE,
+        NAME,
+        FLEET_APPLICATION_TYPE,
+        FLEET_APPLICATION_SOURCE,
+        FLEET_APPLICATION_TARGET,
+        FLEET_APPLICATION_CLUSTERS_READY,
+        FLEET_APPLICATION_RESOURCES_SUMMARY,
+        AGE
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <FleetIntro
+      v-if="shouldShowIntro && !loading"
+      :schema="schema"
+      :is-creatable="permissions.gitRepos || permissions.helmOps"
+      :labelKey="'application'"
+      :route="createLocation"
+      :icon="'icon-repository'"
+    />
+    <ResourceTable
+      v-if="!shouldShowIntro"
+      v-bind="$attrs"
+      key-field="_key"
+      :schema="schema"
+      :headers="headers"
+      :rows="filteredRows"
+      :loading="loading"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :namespaced="!workspace"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { Cluster } from '@shell/components/fleet/FleetClusterTargets/index.vue';
+
+export default {
+  name: 'FleetTargetsList',
+
+  props: {
+    clusters: {
+      type:    Array as PropType<Cluster[]>,
+      default: () => [],
+    },
+
+    emptyLabel: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  computed: {
+    names() {
+      const names = this.clusters.map(({ nameDisplay, name }) => nameDisplay || name);
+      const max = 10;
+
+      const remaining = names.length - max;
+
+      if (remaining > 0) {
+        return [
+          ...names.filter((_, i) => i < max),
+          this.t('fleet.clusterTargets.rules.matching.plusMore', { n: remaining }, true),
+        ];
+      }
+
+      return names;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="targets-list">
+    <h3>{{ t('fleet.clusterTargets.rules.matching.title') }}</h3>
+    <span
+      v-for="(name, i) in names"
+      :key="i"
+      class="row mt-5"
+    >
+      {{ name }}
+    </span>
+    <span
+      v-if="!names.length"
+      class="text-label"
+    >
+      {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .targets-list {
+    height: 100%;
+    border-radius: 4px;
+    padding: 16px;
+    background-color: var(--tabbed-sidebar-bg);
+  }
+</style>

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>