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

package/components/fleet/FleetIntro.vue

@@ -1,65 +1,95 @@
 <script>
-import { FLEET } from '@shell/config/types';
 import { NAME } from '@shell/config/product/fleet';
 
 export default {
 
   name: 'FleetIntro',
 
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    route: {
+      type:    Object,
+      default: null,
+    },
+
+    isCreatable: {
+      type:    Boolean,
+      default: false,
+    },
+
+    icon: {
+      type:    String,
+      default: 'icon-repository'
+    },
+
+    labelKey: {
+      type:     String,
+      required: true,
+    },
+  },
+
   data() {
-    const gitRepoRoute = {
+    const to = this.route || {
       name:   'c-cluster-product-resource-create',
       params: {
         product:  NAME,
-        resource: FLEET.GIT_REPO
+        resource: this.schema?.id,
       },
     };
 
-    const gitRepoSchema = this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
-    const canCreateRepos = gitRepoSchema && gitRepoSchema.resourceMethods.includes('PUT');
+    const canCreate = this.isCreatable || this.schema?.resourceMethods?.includes('PUT');
 
     return {
-      gitRepoRoute,
-      canCreateRepos
+      to,
+      canCreate,
     };
   },
 };
 </script>
 <template>
   <div class="intro-box">
-    <i class="icon icon-repository" />
+    <i
+      class="icon"
+      :class="icon"
+    />
     <div class="title">
-      {{ t('fleet.gitRepo.repo.noRepos') }}
+      {{ t(`fleet.${ labelKey }.intro.empty`) }}
     </div>
     <div
-      v-if="canCreateRepos"
+      v-if="canCreate"
       class="actions"
     >
       <router-link
-        :to="gitRepoRoute"
+        :to="to"
         class="btn role-secondary"
       >
-        {{ t('fleet.gitRepo.repo.addRepo') }}
+        {{ t(`fleet.${ labelKey }.intro.add`) }}
       </router-link>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
-.intro-box {
-  flex: 0 0 100%;
-  height: calc(100vh - 246px); // 2(48 content header + 20 padding + 55 pageheader)
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
 
-.title {
-  margin-bottom: 15px;
-  font-size: $font-size-h2;
-}
-.icon-repository {
-  font-size: 96px;
-  margin-bottom: 32px;
-}
+  .intro-box {
+    flex: 0 0 100%;
+    height: calc(100vh - 246px); // 2(48 content header + 20 padding + 55 pageheader)
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .title {
+    margin-bottom: 15px;
+    font-size: $font-size-h2;
+  }
+
+  .icon {
+    font-size: 96px;
+    margin-bottom: 32px;
+  }
 </style>

package/components/fleet/FleetNoWorkspaces.vue

@@ -22,7 +22,10 @@ export default {
 };
 </script>
 <template>
-  <div class="intro-box">
+  <div
+    class="intro-box"
+    :data-testid="'fleet-no-workspaces'"
+  >
     <i class="icon icon-repository" />
     <div class="title">
       <span v-clean-html="t('fleet.gitRepo.repo.noWorkspaces', null, true)" />
@@ -55,6 +58,7 @@ export default {
   text-align: center;
   max-width: 600px;
 }
+
 .icon-repository {
   font-size: 96px;
   margin-bottom: 32px;

package/components/fleet/FleetOCIStorageSecret.vue

@@ -0,0 +1,171 @@
+<script>
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { FLEET, SECRET } from '@shell/config/types';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+const OPTIONS = { _NONE: '_none' };
+
+export default {
+
+  name: 'FleetOCIStorageSecret',
+
+  emits: ['update:value'],
+
+  components: { LabeledSelect },
+
+  props: {
+    secret: {
+      type:    String,
+      default: '',
+    },
+
+    workspace: {
+      type:    String,
+      default: '',
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    allowDefault: {
+      type:    Boolean,
+      default: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'management',
+    },
+  },
+
+  async fetch() {
+    const hash = await checkSchemasForFindAllHash({
+      workspaces: {
+        inStoreType:     'management',
+        type:            FLEET.WORKSPACE,
+        schemaValidator: (schema) => {
+          return !!schema?.links?.collection;
+        }
+      },
+      secrets: {
+        inStoreType: 'management',
+        type:        SECRET
+      },
+    }, this.$store);
+
+    this.workspaces = hash.workspaces || [];
+    this.secrets = hash.secrets || [];
+  },
+
+  data() {
+    return {
+      workspaces: [],
+      secrets:    [],
+    };
+  },
+
+  computed: {
+    ociSecrets() {
+      return this.secrets.filter((secret) => secret._type === SECRET_TYPES.FLEET_OCI_STORAGE &&
+        secret.metadata?.annotations?.[FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_GENERATED] !== 'true' &&
+        secret.metadata?.namespace === this.workspace
+      );
+    },
+
+    defaultSecret() {
+      if (!this.allowDefault) {
+        return null;
+      }
+
+      const workspace = this.workspaces.find((ws) => ws.id === this.workspace);
+
+      const defaultSecretName = workspace?.metadata?.annotations?.[FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_DEFAULT];
+
+      return this.ociSecrets.find((secret) => secret.name === defaultSecretName);
+    },
+
+    options() {
+      const out = [{
+        label: this.t('generic.none'),
+        value: OPTIONS._NONE
+      }];
+
+      if (this.defaultSecret) {
+        out.push({
+          label: `${ this.defaultSecret.name } (${ this.t('generic.default') })`,
+          value: this.defaultSecret
+        });
+      }
+
+      const customSecrets = this.defaultSecret ? this.ociSecrets.filter((secret) => secret.id !== this.defaultSecret.id) : this.ociSecrets;
+
+      if (customSecrets.length > 0) {
+        out.push({
+          kind:     'title',
+          label:    this.t(`fleet.gitRepo.ociStorageSecret.options.${ this.allowDefault ? 'chooseCustom' : 'chooseExisting' }`),
+          disabled: true
+        });
+
+        customSecrets.forEach((secret) => {
+          out.push({
+            label: secret.name,
+            value: secret
+          });
+        });
+      }
+
+      return out;
+    },
+
+    selected() {
+      if (this.secret === this.defaultSecret?.name) {
+        return this.defaultSecret;
+      }
+
+      return this.secret || OPTIONS._NONE;
+    },
+
+    tooltip() {
+      if (this.allowDefault) {
+        return this.t('fleet.gitRepo.ociStorageSecret.tooltip', { workspace: this.workspace }, { raw: true });
+      }
+
+      return null;
+    }
+  },
+
+  watch: {
+    defaultSecret(neu) {
+      if (this.mode === _CREATE) {
+        this.update(neu);
+      }
+    }
+  },
+
+  methods: {
+    update(value) {
+      this.$emit('update:value', value?.name);
+    },
+  }
+};
+</script>
+
+<template>
+  <LabeledSelect
+    data-testid="fleet-oci-storage-secret-list"
+    :label="t('fleet.gitRepo.ociStorageSecret.label')"
+    :mode="mode"
+    :value="selected"
+    :options="options"
+    :tooltip="tooltip"
+    @update:value="update"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/fleet/FleetRepos.vue

@@ -1,14 +1,12 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Link from '@shell/components/formatter/Link';
-import Shortened from '@shell/components/formatter/Shortened';
 import FleetIntro from '@shell/components/fleet/FleetIntro';
 
 import {
   AGE,
   FLEET_REPO,
   FLEET_REPO_CLUSTER_SUMMARY,
-  FLEET_REPO_CLUSTERS_READY,
+  FLEET_APPLICATION_CLUSTERS_READY,
   FLEET_REPO_PER_CLUSTER_STATE,
   FLEET_REPO_TARGET,
   FLEET_SUMMARY,
@@ -16,24 +14,30 @@ import {
   STATE,
 } from '@shell/config/table-headers';
 
-// i18n-ignore repoDisplay
 export default {
 
   name: 'FleetRepos',
 
   components: {
-    ResourceTable, Link, Shortened, FleetIntro
+    FleetIntro,
+    ResourceTable,
   },
   props: {
+    rows: {
+      type:     Array,
+      required: true,
+    },
+
+    workspace: {
+      type:    String,
+      default: ''
+    },
+
     clusterId: {
       type:     String,
       required: false,
       default:  null,
     },
-    rows: {
-      type:     Array,
-      required: true,
-    },
 
     schema: {
       type:     Object,
@@ -48,6 +52,11 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+
+    showIntro: {
+      type:    Boolean,
+      default: true,
     }
   },
 
@@ -57,11 +66,14 @@ export default {
         return [];
       }
 
-      // Returns boolean { [namespace]: true }
-      const selectedWorkspace = this.$store.getters['namespaces']();
+      const selectedNamespaces = this.$store.getters['namespaces']();
 
       return this.rows.filter((row) => {
-        return !!selectedWorkspace[row.metadata.namespace];
+        if (this.workspace) {
+          return this.workspace === row.metadata.namespace;
+        }
+
+        return !!selectedNamespaces[row.metadata.namespace];
       });
     },
 
@@ -78,7 +90,7 @@ export default {
       const summary = this.isClusterView ? [{
         ...FLEET_REPO_CLUSTER_SUMMARY,
         formatterOpts: { clusterId: this.clusterId },
-      }] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
+      }] : [FLEET_APPLICATION_CLUSTERS_READY, FLEET_SUMMARY];
 
       // if hasPerClusterState then use the repo state
       const state = this.isClusterView ? {
@@ -95,10 +107,9 @@ export default {
         AGE
       ];
     },
-  },
-  methods: {
-    parseTargetMode(row) {
-      return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.gitRepo.warningTooltip.clusterGroup') : this.t('fleet.gitRepo.warningTooltip.cluster');
+
+    shouldShowIntro() {
+      return this.showIntro && !this.filteredRows.length;
     },
   },
 };
@@ -106,79 +117,25 @@ export default {
 
 <template>
   <div>
-    <FleetIntro v-if="noRows && !loading" />
+    <FleetIntro
+      v-if="shouldShowIntro && !loading"
+      :schema="schema"
+      :labelKey="'gitRepo'"
+      :icon="'icon-git'"
+    />
     <ResourceTable
-      v-if="!noRows"
+      v-if="!shouldShowIntro"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="rows"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :namespaced="!workspace"
       key-field="_key"
-    >
-      <template #cell:repo="{ row }">
-        <Link
-          :row="row"
-          :value="row.spec.repo || ''"
-          label-key="repoDisplay"
-          before-icon-key="repoIcon"
-          url-key="spec.repo"
-        />
-        {{ row.cluster }}
-        <template v-if="row.commitDisplay">
-          <div class="text-muted">
-            <Shortened
-              long-value-key="status.commit"
-              :row="row"
-              :value="row.commitDisplay"
-            />
-          </div>
-        </template>
-      </template>
-
-      <template
-        v-if="!isClusterView"
-        #cell:clustersReady="{ row }"
-      >
-        <span
-          v-if="!row.clusterInfo"
-          class="text-muted"
-        >&mdash;</span>
-        <span
-          v-else-if="row.clusterInfo.unready"
-          class="text-warning"
-        >{{ row.clusterInfo.ready }}/{{
-          row.clusterInfo.total }}</span>
-        <span
-          v-else
-          class="cluster-count-info"
-        >
-          {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
-          <i
-            v-if="!row.clusterInfo.total"
-            v-clean-tooltip.bottom="parseTargetMode(row)"
-            class="icon icon-warning"
-          />
-        </span>
-      </template>
-
-      <template #cell:target="{ row }">
-        {{ row.targetInfo.modeDisplay }}
-      </template>
-    </ResourceTable>
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.cluster-count-info {
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-left: 5px;
-    font-size: 22px;
-    color: var(--warning);
-  }
-}
 </style>

package/components/fleet/FleetResources.vue

@@ -1,5 +1,5 @@
 <script>
-import SortableTable from '@shell/components/SortableTable';
+import ResourceTable from '@shell/components/ResourceTable';
 import { colorForState, stateDisplay, stateSort } from '@shell/plugins/dashboard-store/resource-class';
 
 function stateDisplayProperties(state) {
@@ -16,7 +16,7 @@ function stateDisplayProperties(state) {
 export default {
   name: 'FleetResources',
 
-  components: { SortableTable },
+  components: { ResourceTable },
 
   props: {
     rows: {
@@ -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,33 +71,55 @@ 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;
     },
   }
 };
 </script>
 
 <template>
-  <SortableTable
-    :rows="resources"
+  <ResourceTable
+    :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>
+  </ResourceTable>
 </template>