@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/fleet/FleetBundles.vue

@@ -3,13 +3,17 @@ import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 import {
+  AGE,
   CREATION_DATE,
   STATE,
   NAME,
   FLEET_BUNDLE_LAST_UPDATED,
 } from '@shell/config/table-headers';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name: 'FleetBundles',
@@ -18,36 +22,97 @@ export default {
     Banner, Loading, ResourceTable
   },
 
+  mixins: [ResourceFetch],
+
   props: {
     value: {
       type:     Object,
-      required: true,
+      required: false,
+      default:  null,
+    },
+
+    resource: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
+
+    schema: {
+      type:     Object,
+      required: false,
+      default:  null,
     },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
+    let hash;
+
+    try {
+      const toFetch = {
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        }
+      };
+
+      // Only fetch bundles if in list mode
+      if (this.isListMode) {
+        toFetch.bundle = {
+          inStoreType: 'management',
+          type:        this.resource
+        };
+      }
+
+      hash = await checkSchemasForFindAllHash(toFetch, this.$store);
+    } catch (e) {
+    }
+
+    // checkSchemasForFindAllHash already fetched the data, just get it from the store
+    if (this.isListMode && hash?.bundle) {
+      // Data is already in the store, no need to fetch again
+      this.rows = hash.bundle;
     }
+
+    this.allFleet = hash?.cluster || [];
   },
 
   data() {
-    return { allFleet: [] };
+    return {
+      allFleet: [],
+      rows:     []
+    };
+  },
+
+  mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
   },
 
   computed: {
+    isListMode() {
+      return !this.value;
+    },
 
     allBundlesInRepo() {
-      // gitrepo model has getter for its bundles.
+      // If in list mode, return all rows from ResourceFetch mixin
+      if (this.isListMode) {
+        return this.rows;
+      }
+
+      // Otherwise, get bundles from the gitrepo
       return this.value.bundles || [];
     },
 
-    schema() {
-      return this.$store.getters['management/schemaFor']( FLEET.BUNDLE );
+    bundleSchema() {
+      return this.schema || this.$store.getters['management/schemaFor']( FLEET.BUNDLE );
     },
 
     repoName() {
-      return this.value.metadata.name;
+      return this.value?.metadata?.name;
     },
 
     harvesterClusters() {
@@ -65,6 +130,10 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
+      if (this.areHarvesterHostsVisible) {
+        return this.allBundlesInRepo;
+      }
+
       return this.allBundlesInRepo.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
@@ -92,10 +161,16 @@ export default {
           sort:     'status.display.readyClusters',
           search:   ['status.summary.ready', 'status.summary.desiredReady'],
         },
-        FLEET_BUNDLE_LAST_UPDATED,
-        CREATION_DATE,
       ];
 
+      // In list mode, show AGE. In component mode, show last updated and creation date
+      if (this.isListMode) {
+        out.push(AGE);
+      } else {
+        out.push(FLEET_BUNDLE_LAST_UPDATED);
+        out.push(CREATION_DATE);
+      }
+
       return out;
     },
   },
@@ -103,7 +178,17 @@ export default {
     displayWarning(row) {
       return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
     }
-  }
+  },
+
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    if (this.isListMode) {
+      // results are filtered so we wouldn't get the correct count on indicator...
+      return { loadIndeterminate: true };
+    }
+
+    return undefined;
+  },
 };
 </script>
 
@@ -117,9 +202,12 @@ export default {
         :label="t('fleet.bundles.harvester', {count: hidden} )"
       />
       <ResourceTable
-        :schema="schema"
+        :schema="bundleSchema"
         :headers="headers"
         :rows="bundles"
+        :loading="loading"
+        :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+        :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
       >
         <template #cell:deploymentsReady="{row}">
           <span

package/components/fleet/FleetClusterTargets/ClusterSelectionFields.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { Selector } from '@shell/types/fleet';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import MatchExpressions from '@shell/components/form/MatchExpressions.vue';
+import { RcButton } from '@components/RcButton';
+
+interface SelectOption {
+  label: string,
+  value: string,
+  disabled?: boolean,
+}
+
+const props = withDefaults(defineProps<{
+  selectedClusters?: string[];
+  selectedClusterGroups?: string[];
+  clusterSelectors?: Selector[];
+  clustersOptions?: SelectOption[];
+  clusterGroupsOptions?: SelectOption[];
+  mode: string;
+  isView?: boolean;
+  variant?: 'appco' | 'default';
+  compact?: boolean;
+}>(), {
+  selectedClusters:      () => [],
+  selectedClusterGroups: () => [],
+  clusterSelectors:      () => [],
+  clustersOptions:       () => [],
+  clusterGroupsOptions:  () => [],
+  isView:                false,
+  variant:               'default',
+  compact:               false,
+});
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'select-clusters', list: string[]): void;
+  (e: 'select-cluster-groups', list: string[]): void;
+  (e: 'add-match-expressions'): void;
+  (e: 'update-match-expressions', index: number, value: Selector, key?: number): void;
+  (e: 'remove-match-expressions', key?: number): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const isAppco = computed(() => props.variant === 'appco');
+
+const byLabelHeading = computed(() => {
+  if (isAppco.value) {
+    return 'h4';
+  }
+
+  return props.compact ? 'h5' : 'h4';
+});
+
+const groupHeading = computed(() => {
+  if (isAppco.value) {
+    return 'h4';
+  }
+
+  return props.compact ? 'h4' : 'h3';
+});
+
+const addButtonClass = computed(() => (isAppco.value ? 'mmt-3' : 'mmt-4'));
+
+const matchExpressionRefs = ref<Record<number, any>>({});
+
+function setMatchExpressionRef(key: number | undefined, el: any) {
+  if (key === null || key === undefined) {
+    return;
+  }
+
+  if (el) {
+    matchExpressionRefs.value[key] = el;
+  } else {
+    delete matchExpressionRefs.value[key];
+  }
+}
+
+function focusMatchExpression(key: number) {
+  nextTick(() => {
+    matchExpressionRefs.value[key]?.focus();
+  });
+}
+
+defineExpose({ focusMatchExpression });
+</script>
+
+<template>
+  <div :class="isAppco ? 'appco-select-clusters' : undefined">
+    <!-- Select by cluster name -->
+    <div>
+      <h4 v-if="isAppco">
+        {{ t('fleet.clusterTargets.clusters.byName.title') }}
+      </h4>
+      <LabeledSelect
+        data-testid="fleet-target-cluster-name-selector"
+        :class="{ 'mmt-4': !isAppco && !compact }"
+        :value="selectedClusters"
+        :label="t('fleet.clusterTargets.clusters.byName.label')"
+        :options="clustersOptions"
+        :taggable="true"
+        :close-on-select="false"
+        :mode="mode"
+        :multiple="true"
+        :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
+        @update:value="emit('select-clusters', $event)"
+      />
+    </div>
+
+    <!-- Select by labels -->
+    <div
+      v-if="!isView || (clusterSelectors && clusterSelectors.length > 0)"
+      :class="{ 'mmt-6': !isAppco }"
+    >
+      <component
+        :is="byLabelHeading"
+        :class="{ 'm-0': !isAppco }"
+      >
+        {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
+      </component>
+      <div
+        v-for="(selector, i) in clusterSelectors"
+        :key="selector.key"
+        class="match-expressions-container mmt-4"
+      >
+        <MatchExpressions
+          :ref="(el) => setMatchExpressionRef(selector.key, el)"
+          class="body"
+          :value="selector"
+          :mode="mode"
+          :initial-empty-row="true"
+          :label-key="t('fleet.clusterTargets.clusters.byLabel.labelKey')"
+          :add-icon="'icon-plus'"
+          :add-class="'btn-sm'"
+          @update:value="emit('update-match-expressions', i, $event, selector.key)"
+        />
+        <RcButton
+          v-if="!isView"
+          size="small"
+          variant="link"
+          :aria-label="t('fleet.clusterTargets.clusters.byLabel.removeSelector')"
+          @click="emit('remove-match-expressions', selector.key)"
+        >
+          <i
+            class="icon icon-x"
+            aria-hidden="true"
+          />
+        </RcButton>
+      </div>
+      <RcButton
+        v-if="!isView"
+        size="small"
+        variant="secondary"
+        :class="addButtonClass"
+        @click="emit('add-match-expressions')"
+      >
+        <i class="icon icon-plus" />
+        <span>{{ t('fleet.clusterTargets.clusters.byLabel.addSelector') }}</span>
+      </RcButton>
+    </div>
+
+    <!-- Select by cluster groups -->
+    <div :class="{ 'mmt-8': !isAppco }">
+      <component
+        :is="groupHeading"
+        :class="{ 'm-0': !isAppco }"
+      >
+        {{ t('fleet.clusterTargets.clusterGroups.title') }}
+      </component>
+      <LabeledSelect
+        data-testid="fleet-target-cluster-group-selector"
+        :class="{ 'mmt-4': !isAppco }"
+        :value="selectedClusterGroups"
+        :label="t('fleet.clusterTargets.clusterGroups.byName.label')"
+        :options="clusterGroupsOptions"
+        :taggable="true"
+        :close-on-select="false"
+        :mode="mode"
+        :multiple="true"
+        :placeholder="t('fleet.clusterTargets.clusterGroups.byName.placeholder')"
+        @update:value="emit('select-cluster-groups', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .appco-select-clusters {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-lg);
+
+    h4 {
+      margin: 0 0 12px 0;
+    }
+  }
+
+  .match-expressions-container {
+    display: flex;
+    align-items: start;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+
+    .body {
+      padding: 15px;
+      width: 100%;
+    }
+
+    .btn {
+      margin: 5px;
+    }
+  }
+</style>

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -1,10 +1,13 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { Cluster } from '@shell/components/fleet/FleetClusterTargets/index.vue';
+import { RcTag, RcCounterBadge } from '@components/Pill';
 
 export default {
   name: 'FleetTargetsList',
 
+  components: { RcTag, RcCounterBadge },
+
   props: {
     clusters: {
       type:    Array as PropType<Cluster[]>,
@@ -13,47 +16,93 @@ export default {
 
     emptyLabel: {
       type:    String,
-      default: ''
-    }
+      default: '',
+    },
+
+    compact: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   computed: {
     clustersRenderList() {
-      const clustersRenderList = this.clusters.map(({ nameDisplay, name, detailLocation }) => ({
+      return this.clusters.map(({ nameDisplay, name, detailLocation }) => ({
         name: nameDisplay || name,
         detailLocation,
       }));
-
-      return clustersRenderList;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="targets-list-main">
-    <h3>{{ t('fleet.clusterTargets.rules.matching.title', { n: clustersRenderList.length }) }}</h3>
-    <div class="targets-list-list">
-      <span
-        v-for="(cluster, i) in clustersRenderList"
-        :key="i"
-        class="row mt-5"
-      >
-        <router-link
-          :to="cluster.detailLocation"
-          target="_blank"
-          class="link-main"
-        >
-          {{ cluster.name }}&nbsp;<i class="link-icon icon icon-external-link" />
-        </router-link>
-      </span>
-      <span
-        v-if="!clustersRenderList.length"
-        class="text-label"
-      >
-        {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
-      </span>
+  <div
+    class="targets-list-main"
+    :class="{ 'compact': compact }"
+  >
+    <h3
+      v-if="!compact"
+      class="m-0"
+    >
+      {{ t('fleet.clusterTargets.rules.matching.title', { n: clustersRenderList.length }) }}
+    </h3>
+    <div
+      v-else
+      class="compact-title"
+    >
+      <h3>{{ t('fleet.clusterTargets.rules.matching.selectedClusters') }}</h3>
+      <RcCounterBadge
+        :count="clustersRenderList.length"
+        type="inactive"
+      />
     </div>
+
+    <template v-if="compact">
+      <div class="targets-list-chips">
+        <RcTag
+          v-for="cluster in clustersRenderList"
+          :key="cluster.name"
+          type="inactive"
+          class="do-not-shrink"
+        >
+          {{ cluster.name }}
+        </RcTag>
+        <span
+          v-if="!clustersRenderList.length"
+          class="text-label"
+        >
+          {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+        </span>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="targets-list-list">
+        <span
+          v-for="cluster in clustersRenderList"
+          :key="cluster.name"
+          class="row"
+        >
+          <router-link
+            :to="cluster.detailLocation"
+            target="_blank"
+            class="link-main"
+          >
+            {{ cluster.name }}&nbsp;<i
+              class="link-icon icon icon-external-link"
+              aria-hidden="true"
+            />
+          </router-link>
+        </span>
+        <span
+          v-if="!clustersRenderList.length"
+          class="text-label"
+        >
+          {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+        </span>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -65,20 +114,59 @@ export default {
     background-color: var(--tabbed-sidebar-bg);
     display: flex;
     flex-direction: column;
+    gap: var(--gap-md);
+
+    &.compact {
+      background-color: var(--body-bg);
+      max-height: none;
+
+      .targets-list-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .row {
+          line-height: 24px;
+        }
+      }
+    }
+
+    .compact-title {
+      display: flex;
+      align-items: center;
+      gap: var(--gap);
+
+      h3 {
+        margin: 0;
+      }
+    }
   }
   .targets-list-list {
     overflow-y: auto;
   }
   .link-main{
-    word-spacing: 22px;
-    line-height: 17px; // To fit the icon size and make sure it doesnt resize
+    word-spacing: 15px;
+    line-height: 17px;
   }
   .link-icon {
-    margin-left: -14px; // Remove the space of the icon to make it float to accomodate the underline
-    display: none; // Make the icon disappear by default
+    margin-left: -14px;
+    display: none;
   }
-
   .link-main:hover .link-icon {
-    display: inline; // Only appear when hovered
+    display: inline;
+  }
+  .targets-list-chips {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    align-items: flex-start;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+
+    .do-not-shrink {
+      flex-shrink: 0;
+    }
   }
+
 </style>