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

package/components/fleet/FleetResources.vue

@@ -28,18 +28,28 @@ export default {
       required: false,
       default:  null,
     },
+    search: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   computed: {
-    resources() {
-      return (this.rows || []).map((r) => ({
+    computedResources() {
+      const resources = (this.rows || []).map((r) => ({
         tableKey: r.key,
         ...stateDisplayProperties(r.state),
         ...r,
       }));
+
+      if (this.clusterId) {
+        return resources.filter((r) => r.clusterId === this.clusterId);
+      }
+
+      return resources;
     },
     resourceHeaders() {
-      return [
+      const out = [
         {
           name:      'state',
           value:     'state',
@@ -49,16 +59,11 @@ export default {
           width:     100,
         },
         {
-          name:  'cluster',
-          value: 'clusterName',
-          sort:  ['clusterName', 'stateSort'],
-          label: 'Cluster',
-        },
-        {
-          name:  'apiVersion',
-          value: 'apiVersion',
-          sort:  'apiVersion',
-          label: 'API Version',
+          name:      'name',
+          value:     'name',
+          sort:      'name',
+          label:     'Name',
+          formatter: 'LinkDetail',
         },
         {
           name:  'kind',
@@ -66,20 +71,30 @@ export default {
           sort:  'kind',
           label: 'Kind',
         },
-        {
-          name:      'name',
-          value:     'name',
-          sort:      'name',
-          label:     'Name',
-          formatter: 'LinkDetail',
-        },
         {
           name:  'namespace',
           value: 'namespace',
           sort:  'namespace',
           label: 'Namespace',
         },
+        {
+          name:  'apiVersion',
+          value: 'apiVersion',
+          sort:  'apiVersion',
+          label: 'API Version',
+        },
       ];
+
+      if (!this.clusterId) {
+        out.splice(3, 0, {
+          name:  'cluster',
+          value: 'clusterName',
+          sort:  ['clusterName', 'stateSort'],
+          label: 'Cluster',
+        });
+      }
+
+      return out;
     },
   }
 };
@@ -87,12 +102,25 @@ export default {
 
 <template>
   <SortableTable
-    :rows="resources"
+    :rows="computedResources"
     :headers="resourceHeaders"
     :table-actions="false"
     :row-actions="false"
+    :search="search"
     key-field="tableKey"
     default-sort-by="state"
     :paged="true"
-  />
+  >
+    <!-- Pass down templates provided by the caller -->
+    <template
+      v-for="(_, slot) of $slots"
+      v-slot:[slot]="scope"
+      :key="slot"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </SortableTable>
 </template>

package/components/fleet/FleetSummary.vue

@@ -1,49 +1,8 @@
 <script>
-import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { clone } from '@shell/utils/object';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
-
-const getResourcesDefaultState = (labelGetter, stateKey) => {
-  return [
-    STATES_ENUM.READY,
-    STATES_ENUM.NOT_READY,
-    STATES_ENUM.WAIT_APPLIED,
-    STATES_ENUM.MODIFIED,
-    STATES_ENUM.MISSING,
-    STATES_ENUM.ORPHANED,
-    STATES_ENUM.UNKNOWN,
-  ].reduce((acc, state) => {
-    acc[state] = {
-      count:  0,
-      color:  STATES[state].color,
-      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
-      status: state
-    };
-
-    return acc;
-  }, {});
-};
-
-const getBundlesDefaultState = (labelGetter, stateKey) => {
-  return [
-    STATES_ENUM.READY,
-    STATES_ENUM.INFO,
-    STATES_ENUM.WARNING,
-    STATES_ENUM.NOT_READY,
-    STATES_ENUM.ERROR,
-    STATES_ENUM.ERR_APPLIED,
-    STATES_ENUM.WAIT_APPLIED,
-    STATES_ENUM.UNKNOWN,
-  ].reduce((acc, state) => {
-    acc[state] = {
-      count:  0,
-      color:  STATES[state].color,
-      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
-      status: state
-    };
-
-    return acc;
-  }, {});
-};
+import FleetUtils from '@shell/utils/fleet';
 
 export default {
 
@@ -67,24 +26,39 @@ export default {
     },
   },
 
+  data() {
+    let bundlesDefaultStates; let resourcesDefaultStates = {};
+
+    try {
+      bundlesDefaultStates = FleetUtils.getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey);
+      resourcesDefaultStates = FleetUtils.getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey);
+    } catch (error) {
+    }
+
+    return {
+      bundlesDefaultStates,
+      resourcesDefaultStates,
+    };
+  },
+
   computed: {
 
-    repoName() {
+    resourceName() {
       return this.value.metadata.name;
     },
 
-    repoNamespace() {
+    resourceNamespace() {
       return this.value.metadata.namespace;
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.namespace === this.repoNamespace && item.repoName === this.repoName);
+      const resources = this.bundles.filter((item) => item.namespace === this.resourceNamespace && item.appSourceName === this.resourceName);
 
       if (!resources.length) {
         return [];
       }
 
-      const out = { ...getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = clone(this.bundlesDefaultStates);
 
       resources.forEach(({ status, metadata }) => {
         if (!status) {
@@ -149,7 +123,8 @@ export default {
     },
 
     resourceCounts() {
-      const out = { ...getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = clone(this.resourcesDefaultStates);
+
       const resourceStatuses = this.value.allResourceStatuses;
 
       Object.entries(resourceStatuses.states)
@@ -183,13 +158,13 @@ export default {
       title="Bundles"
       :values="bundleCounts"
       value-key="count"
-      data-testid="gitrepo-bundle-summary"
+      data-testid="resource-bundle-summary"
     />
     <FleetStatus
       title="Resources"
       :values="resourceCounts"
       value-key="count"
-      data-testid="gitrepo-deployment-summary"
+      data-testid="resource-deployment-summary"
     />
   </div>
 </template>

package/components/fleet/__tests__/FleetOCIStorageSecret.test.ts

@@ -0,0 +1,213 @@
+import { mount } from '@vue/test-utils';
+import flushPromises from 'flush-promises';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
+import FleetOCIStorageSecret from '@shell/components/fleet/FleetOCIStorageSecret.vue';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+
+const workspaces = [
+  {
+    id:       'fleet-local',
+    metadata: { annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_DEFAULT]: 'secret-1' } }
+  },
+  {
+    id:       'fleet-default',
+    metadata: { annotations: { } }
+  },
+  {
+    id:       'fleet-custom-workspace',
+    metadata: { annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_DEFAULT]: 'secret-6' } }
+  },
+];
+
+const secrets = [
+  {
+    id:       'fleet-local/secret-1',
+    name:     'secret-1',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: {
+      namespace:   'fleet-local',
+      annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_GENERATED]: false }
+    }
+  },
+  {
+    id:       'fleet-local/secret-2',
+    name:     'secret-2',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: {
+      namespace:   'fleet-local',
+      annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_GENERATED]: 'true' }
+    }
+  },
+  {
+    id:       'fleet-default/secret-3',
+    name:     'secret-3',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: {
+      namespace:   'fleet-default',
+      annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_GENERATED]: false }
+    }
+  },
+  {
+    id:       'fleet-default/secret-4',
+    name:     'secret-4',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: {
+      namespace:   'fleet-default',
+      annotations: { [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_GENERATED]: 'true' }
+    }
+  },
+  {
+    id:       'fleet-custom-workspace/secret-5',
+    name:     'secret-5',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: { namespace: 'fleet-custom-workspace' }
+  },
+  {
+    id:       'fleet-custom-workspace/secret-6',
+    name:     'secret-6',
+    _type:    SECRET_TYPES.FLEET_OCI_STORAGE,
+    metadata: { namespace: 'fleet-custom-workspace' }
+  }
+];
+
+describe('component: FleetOCIStorageSecret', () => {
+  describe('mode: create', () => {
+    const mode = _CREATE;
+
+    it('displays empty options', () => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: 'fleet-local',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets: [], workspaces };
+        },
+      });
+
+      expect(wrapper.vm.options).toHaveLength(1);
+      expect(wrapper.vm.options[0].label).toContain('none');
+    });
+
+    it('displays default and None options', () => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: 'fleet-local',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      expect(wrapper.vm.options).toHaveLength(2);
+      expect(wrapper.vm.options[0].label).toContain('none');
+
+      expect(wrapper.vm.options[1].label).toContain('secret-1');
+      expect(wrapper.vm.options[1].label).toContain('default');
+    });
+
+    it('displays custom secrets options', () => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: 'fleet-default',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      expect(wrapper.vm.options).toHaveLength(3);
+      expect(wrapper.vm.options[0].label).toContain('none');
+
+      expect(wrapper.vm.options[1].label).toContain('chooseCustom');
+      expect(wrapper.vm.options[2].label).toContain('secret-3');
+      expect(wrapper.vm.options[2].label).not.toContain('default');
+    });
+
+    it('displays all options', () => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: 'fleet-custom-workspace',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      expect(wrapper.vm.options).toHaveLength(4);
+      expect(wrapper.vm.options[0].label).toContain('none');
+
+      expect(wrapper.vm.options[1].label).toContain('secret-6');
+      expect(wrapper.vm.options[1].label).toContain('default');
+
+      expect(wrapper.vm.options[2].label).toContain('chooseCustom');
+      expect(wrapper.vm.options[3].label).toContain('secret-5');
+    });
+
+    it('select default if default secret exists', async() => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: '',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      wrapper.setProps({ workspace: 'fleet-local' });
+      await flushPromises();
+
+      expect(wrapper.emitted('update:value')?.[0][0]).toBe('secret-1');
+    });
+
+    it('select none if default secret not exists', async() => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: '',
+          secret:    null,
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      wrapper.setProps({ workspace: 'fleet-default' });
+      await flushPromises();
+
+      expect(wrapper.emitted('update:value')).toBeUndefined();
+    });
+  });
+
+  describe('mode: edit', () => {
+    const mode = _EDIT;
+
+    it('displays selected secret', async() => {
+      const wrapper = mount(FleetOCIStorageSecret, {
+        props: {
+          workspace: 'fleet-local',
+          secret:    'test',
+          mode,
+        },
+        data() {
+          return { secrets, workspaces };
+        },
+      });
+
+      const secretSelector = wrapper.find('[data-testid="fleet-oci-storage-secret-list"]');
+
+      expect(wrapper.vm.selected).toBe('test');
+      expect(secretSelector.element.textContent).toContain('test');
+    });
+  });
+});

package/components/fleet/__tests__/FleetSummary.test.ts

@@ -9,13 +9,13 @@ const REPO_NAME_VARIANT = 'testrepo-again';
 const CLUSTER_NAME = 'testcluster';
 
 const mockedBundlesInRepo = [{
-  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
-  type:       'fleet.cattle.io.bundle',
-  apiVersion: 'fleet.cattle.io/v1alpha1',
-  kind:       'Bundle',
-  repoName:   REPO_NAME,
-  namespace:  'fleet-default',
-  metadata:   {
+  id:            `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+  type:          'fleet.cattle.io.bundle',
+  apiVersion:    'fleet.cattle.io/v1alpha1',
+  kind:          'Bundle',
+  appSourceName: REPO_NAME,
+  namespace:     'fleet-default',
+  metadata:      {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME
@@ -49,13 +49,13 @@ const mockedBundlesInRepo = [{
   }
 },
 {
-  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
-  type:       'fleet.cattle.io.bundle',
-  apiVersion: 'fleet.cattle.io/v1alpha1',
-  kind:       'Bundle',
-  repoName:   REPO_NAME,
-  namespace:  'fleet-default',
-  metadata:   {
+  id:            `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
+  type:          'fleet.cattle.io.bundle',
+  apiVersion:    'fleet.cattle.io/v1alpha1',
+  kind:          'Bundle',
+  appSourceName: REPO_NAME,
+  namespace:     'fleet-default',
+  metadata:      {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME
@@ -90,13 +90,13 @@ const mockedBundlesInRepo = [{
 }];
 
 const mockedBundlesOutOfRepo = [{
-  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
-  type:       'fleet.cattle.io.bundle',
-  apiVersion: 'fleet.cattle.io/v1alpha1',
-  kind:       'Bundle',
-  repoName:   REPO_NAME_VARIANT,
-  namespace:  'custom-namespace',
-  metadata:   {
+  id:            `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
+  type:          'fleet.cattle.io.bundle',
+  apiVersion:    'fleet.cattle.io/v1alpha1',
+  kind:          'Bundle',
+  appSourceName: REPO_NAME_VARIANT,
+  namespace:     'custom-namespace',
+  metadata:      {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
@@ -130,13 +130,13 @@ const mockedBundlesOutOfRepo = [{
   }
 },
 {
-  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
-  type:       'fleet.cattle.io.bundle',
-  apiVersion: 'fleet.cattle.io/v1alpha1',
-  kind:       'Bundle',
-  repoName:   REPO_NAME,
-  namespace:  'custom-namespace',
-  metadata:   {
+  id:            `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+  type:          'fleet.cattle.io.bundle',
+  apiVersion:    'fleet.cattle.io/v1alpha1',
+  kind:          'Bundle',
+  appSourceName: REPO_NAME,
+  namespace:     'custom-namespace',
+  metadata:      {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME
@@ -170,13 +170,13 @@ const mockedBundlesOutOfRepo = [{
   }
 },
 {
-  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
-  type:       'fleet.cattle.io.bundle',
-  apiVersion: 'fleet.cattle.io/v1alpha1',
-  kind:       'Bundle',
-  repoName:   REPO_NAME_VARIANT,
-  namespace:  'custom-namespace',
-  metadata:   {
+  id:            `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
+  type:          'fleet.cattle.io.bundle',
+  apiVersion:    'fleet.cattle.io/v1alpha1',
+  kind:          'Bundle',
+  appSourceName: REPO_NAME_VARIANT,
+  namespace:     'custom-namespace',
+  metadata:      {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
@@ -337,10 +337,10 @@ describe('component: FleetSummary', () => {
   ])('displays the number of bundles associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
     const wrapper = mount(FleetSummary, {
       props:  { bundles, value: new GitRepo(mockRepo) },
-      global: { mocks: { $store: mockStore } }
+      global: { mocks: { $store: mockStore }, directives: { 'trim-whitespace': (id: any) => id } },
     });
 
-    const bundleCountEl = wrapper.find('[data-testid="gitrepo-bundle-summary"] .count');
+    const bundleCountEl = wrapper.find('[data-testid="resource-bundle-summary"] .count');
 
     expect(bundleCountEl.text()).toBe(bundleCount);
   });
@@ -352,10 +352,10 @@ describe('component: FleetSummary', () => {
   ])('displays the number of deployments associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
     const wrapper = mount(FleetSummary, {
       props:  { bundles, value: new GitRepo(mockRepo) },
-      global: { mocks: { $store: mockStore } }
+      global: { mocks: { $store: mockStore }, directives: { 'trim-whitespace': (id: any) => id } }
     });
 
-    const bundleCountEl = wrapper.find('[data-testid="gitrepo-deployment-summary"] .count');
+    const bundleCountEl = wrapper.find('[data-testid="resource-deployment-summary"] .count');
 
     expect(bundleCountEl.text()).toBe(bundleCount);
   });

package/components/fleet/dashboard/Empty.vue

@@ -0,0 +1,73 @@
+
+<script>
+export default {
+  name: 'FleetDashboardEmpty',
+
+  props: {
+    permissions: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { getStartedLink: { name: 'c-cluster-fleet-application-create' } };
+  }
+};
+</script>
+<template>
+  <div
+    class="fleet-empty-dashboard"
+    aria-hidden="true"
+    :data-testid="'fleet-empty-dashboard'"
+  >
+    <i class="icon-fleet mb-30" />
+    <h1>{{ t('fleet.dashboard.welcome') }}</h1>
+    <p class="mb-30">
+      <span>{{ t('fleet.dashboard.gitOpsScale') }}</span>
+      <a
+        :href="t('fleet.dashboard.learnMoreLink')"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        {{ t('fleet.dashboard.learnMore') }} <i class="icon icon-external-link" />
+      </a>
+      <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+    </p>
+    <template v-if="permissions.gitRepos || permissions.helmOps">
+      <h3 class="mb-30">
+        {{ t('fleet.dashboard.noApplications', null, true) }}
+      </h3>
+      <router-link
+        :to="getStartedLink"
+        class="btn role-secondary"
+      >
+        {{ t('fleet.dashboard.getStarted') }}
+      </router-link>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .fleet-empty-dashboard {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 100%;
+
+    .icon-fleet {
+      font-size: 100px;
+      color: var(--disabled-text);
+    }
+
+    > p > span {
+      color: var(--disabled-text);
+    }
+
+    .sr-only {
+      visibility: hidden;
+    }
+  }
+</style>