@rancher/shell 1.2.0 → 2.0.0

package/pages/c/_cluster/explorer/tools/index.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import Loading from '@shell/components/Loading';
-import { _FLAGGED, DEPRECATED, HIDDEN, FROM_TOOLS } from '@shell/config/query-params';
+import { _FLAGGED, DEPRECATED as DEPRECATED_QUERY, HIDDEN, FROM_TOOLS } from '@shell/config/query-params';
 import { filterAndArrangeCharts } from '@shell/store/catalog';
 import { CATALOG, NORMAN } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
@@ -9,10 +9,11 @@ import LazyImage from '@shell/components/LazyImage';
 import { isAlternate } from '@shell/utils/platform';
 import IconMessage from '@shell/components/IconMessage';
 import TypeDescription from '@shell/components/TypeDescription';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
   components: {
-    LazyImage, Loading, IconMessage, TypeDescription
+    LazyImage, Loading, IconMessage, TypeDescription, TabTitle
   },
 
   async fetch() {
@@ -20,7 +21,7 @@ export default {
 
     const query = this.$route.query;
 
-    this.showDeprecated = query[DEPRECATED] === _FLAGGED;
+    this.showDeprecated = query[DEPRECATED_QUERY] === 'true' || query[DEPRECATED_QUERY] === _FLAGGED;
     this.showHidden = query[HIDDEN] === _FLAGGED;
 
     this.allInstalled = await this.$store.dispatch('cluster/findAll', { type: CATALOG.APP });
@@ -58,7 +59,7 @@ export default {
     installedAppForChart() {
       const out = {};
 
-      for ( const app of this.installedApps ) {
+      for (const app of (this.installedApps || [])) {
         const matching = app.matchingChart();
 
         if ( !matching ) {
@@ -99,7 +100,7 @@ export default {
   watch: {
     namespaces() {
       // When the namespaces change, check the v1 apps - might indicate add or removal of a v1 app
-      if (this.legacyEnabled && this.systemProject) {
+      if (this.systemProject) {
         this.$store.dispatch('rancher/findAll', {
           type: NORMAN.APP,
           opt:  { url: `/v3/project/${ this.systemProject }/apps`, force: true }
@@ -287,7 +288,9 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else-if="options.length">
-    <h1 v-clean-html="t('catalog.tools.header')" />
+    <h1>
+      <TabTitle>{{ t('catalog.tools.header') }}</TabTitle>
+    </h1>
     <TypeDescription
       resource="chart"
     />
@@ -297,6 +300,7 @@ export default {
         v-for="opt in options"
         :key="opt.chart.id"
         class="item"
+        :data-testid="`cluster-tools-app-${opt.chart.id}`"
       >
         <div
           class="logo"

package/pages/c/_cluster/fleet/index.vue

@@ -14,7 +14,7 @@ import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue';
 import { NAME } from '@shell/config/product/fleet';
 
 export default {
-  name:       'ListGitRepo',
+  name:       'FleetDashboard',
   components: {
     Loading,
     ResourceTable,
@@ -32,6 +32,10 @@ export default {
           return !!schema?.links?.collection;
         }
       },
+      clusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      },
       allBundles: {
         inStoreType: 'management',
         type:        FLEET.BUNDLE,
@@ -39,6 +43,10 @@ export default {
       gitRepos: {
         inStoreType: 'management',
         type:        FLEET.GIT_REPO,
+      },
+      fleetClusters: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER,
       }
     }, this.$store);
 
@@ -56,7 +64,8 @@ export default {
 
   data() {
     return {
-      headers: [
+      admissableAreas: ['clusters', 'bundles', 'resources'],
+      headers:         [
         {
           name:          'name',
           labelKey:      'tableHeaders.repoName',
@@ -109,7 +118,6 @@ export default {
       }
 
       // When user doesn't have access to the workspaces fall back to namespaces
-
       return this.allNamespaces.filter((item) => {
         return item.metadata.annotations[WORKSPACE_ANNOTATION] === WORKSPACE;
       }).map(( obj ) => {
@@ -151,112 +159,82 @@ export default {
       });
     },
     getStatusInfo(area, row) {
+      const defaultStatusInfo = {
+        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
+        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+      };
+
       // classes are defined in the themes SASS files...
-      switch (area) {
-      case 'clusters':
-        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
+      return this.getBadgeClassAndIcon(area, row) || defaultStatusInfo;
+    },
+    getBadgeClassAndIcon(area, row) {
+      let group;
 
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-clusters`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
-      case 'bundles':
-        if (row.bundles?.length && row.bundles?.every((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.bundles?.length && row.bundles?.some((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.bundles?.length && row.bundles?.some((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
+      if (!this.admissableAreas.includes(area)) {
+        return false;
+      }
 
-        if (row.bundlesReady?.length === row.bundles?.length && row.bundlesReady && row.bundles?.length) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
+      if (area === 'clusters') {
+        group = row.targetClusters;
+      } else if (area === 'bundles') {
+        group = row.bundles;
+      } else if (area === 'resources') {
+        group = row.status?.resources;
+      }
 
+      if (group?.length && group?.every((item) => item.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
         return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-bundles`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+          badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
         };
-      case 'resources':
-        if (row.status?.resources?.length && row.status?.resources?.every((resource) => resource.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.status?.resources?.length && row.status?.resources?.some((resource) => resource.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.status?.resources?.length && row.status?.resources?.some((resource) => resource.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
+      }
+      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
+        return {
+          badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+        };
+      }
+      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
+        return {
+          badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+        };
+      }
 
+      if (area === 'resources') {
         if (row.status?.resourceCounts?.desiredReady === row.status?.resourceCounts?.ready && row.status?.resourceCounts?.desiredReady) {
           return {
             badgeClass: STATES[STATES_ENUM.ACTIVE].color,
             icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
           };
         }
-
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-resources`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
-      default:
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
       }
+
+      return {
+        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-${ area }`,
+        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+      };
     },
     getTooltipInfo(area, row) {
-      switch (area) {
-      case 'clusters':
-        if (row.clusterInfo?.total) {
-          return `Ready: ${ row.clusterInfo?.ready }<br>Total: ${ row.clusterInfo?.total }`;
-        }
+      let group;
 
-        return '';
-      case 'bundles':
-        if (row.bundles?.length) {
-          return this.generateTooltipData(row.bundles);
-        }
+      if (!this.admissableAreas.includes(area)) {
+        return {};
+      }
 
-        return '';
-      case 'resources':
-        if (row.status?.resources?.length) {
-          return this.generateTooltipData(row.status?.resources);
-        }
+      if (area === 'clusters') {
+        group = row.targetClusters;
+      } else if (area === 'bundles') {
+        group = row.bundles;
+      } else if (area === 'resources') {
+        group = row.status?.resources;
+      }
 
-        return '';
-      default:
-        return {};
+      if (group?.length) {
+        return this.generateTooltipData(group);
       }
+
+      return '';
     },
     generateTooltipData(data) {
       const infoObj = {};
@@ -276,6 +254,23 @@ export default {
 
       return tooltipData;
     },
+    getBadgeValue(area, row) {
+      let value;
+
+      if (!this.admissableAreas.includes(area)) {
+        return 'N/A';
+      }
+
+      if (area === 'clusters') {
+        value = `${ row.targetClustersReady?.length || '0' }/${ row.targetClusters?.length || '?' }`;
+      } else if (area === 'bundles') {
+        value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`;
+      } else if (area === 'resources') {
+        value = `${ row.status?.resourceCounts?.ready || '0' }/${ row.status?.resourceCounts?.desiredReady || '?' }`;
+      }
+
+      return value;
+    },
     toggleCollapse(val, key) {
       this.$set(this.isCollapsed, key, val);
     },
@@ -326,12 +321,12 @@ export default {
         <h3 class="mb-30">
           {{ t('fleet.dashboard.noRepo', null, true) }}
         </h3>
-        <n-link
+        <router-link
           :to="getStartedLink"
           class="btn role-secondary"
         >
           {{ t('fleet.dashboard.getStarted') }}
-        </n-link>
+        </router-link>
       </template>
     </div>
     <!-- fleet dashboard with repos -->
@@ -416,7 +411,7 @@ export default {
                 :tooltip-text="getTooltipInfo('clusters', row)"
                 :badge-class="getStatusInfo('clusters', row).badgeClass"
                 :icon="getStatusInfo('clusters', row).icon"
-                :value="`${ row.clusterInfo.ready }/${ row.clusterInfo.total }`"
+                :value="getBadgeValue('clusters', row)"
               />
             </template>
             <template #cell:bundlesReady="{row}">
@@ -427,7 +422,7 @@ export default {
                 :tooltip-text="getTooltipInfo('bundles', row)"
                 :badge-class="getStatusInfo('bundles', row).badgeClass"
                 :icon="getStatusInfo('bundles', row).icon"
-                :value="`${ row.bundlesReady.length || 0 }/${ row.bundles.length }`"
+                :value="getBadgeValue('bundles', row)"
               />
             </template>
             <template #cell:resourcesReady="{row}">
@@ -436,7 +431,7 @@ export default {
                 :tooltip-text="getTooltipInfo('resources', row)"
                 :badge-class="getStatusInfo('resources', row).badgeClass"
                 :icon="getStatusInfo('resources', row).icon"
-                :value="`${ row.status.resourceCounts.ready }/${ row.status.resourceCounts.desiredReady }`"
+                :value="getBadgeValue('resources', row)"
               />
             </template>
 

package/pages/c/_cluster/longhorn/__tests__/longhorn.index.test.ts

@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils';
+
+import IconMessage from '@shell/components/IconMessage';
+import LonghornOverview from '@shell/pages/c/_cluster/longhorn/index.vue';
+
+const longhornFrontend = {
+  id:         'default/longhorn-frontend',
+  type:       'service',
+  apiVersion: 'v1',
+  kind:       'Service',
+  metadata:   {
+    labels:    { app: 'longhorn-ui' },
+    name:      'longhorn-frontend',
+    namespace: 'default',
+  }
+};
+
+describe('page: LonghornOverview', () => {
+  const commonMocks = {
+    $fetchState: { pending: false },
+    $store:      {
+      dispatch: () => jest.fn,
+      getters:  {
+        currentProduct:      () => 'cluster',
+        'cluster/findAll':   () => jest.fn(),
+        'cluster/schemaFor': () => jest.fn(),
+        'cluster/matching':  () => jest.fn(),
+        'i18n/t':            () => jest.fn(),
+      },
+    },
+  };
+
+  const createWrapper = (overrides?: any) => {
+    return shallowMount(LonghornOverview, {
+      mocks: commonMocks,
+      ...overrides,
+    });
+  };
+
+  it('initializes externalLinks as an empty array', () => {
+    const wrapper = createWrapper({
+      stubs: {
+        IconMessage: { template: '<span />' },
+        LazyImage:   { template: '<span />' },
+      }
+    });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+  });
+
+  it('populates externalLinks proxy link correctly when uiServices contain service', async() => {
+    const proxyUrl = `/k8s/clusters/_/api/v1/namespaces/${ longhornFrontend.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`;
+
+    interface LinkConfig {
+      enabled: boolean;
+      iconSrc: string;
+      label: string;
+      description: string;
+      link: string;
+    }
+
+    const wrapper = createWrapper({
+      computed: { currentCluster: () => ({ id: '_' }) },
+      stubs:    {
+        Banner:    { template: '<span />' },
+        LazyImage: { template: '<span />' },
+      }
+    });
+
+    wrapper.setData({ uiServices: [longhornFrontend] });
+
+    await wrapper.vm.$nextTick();
+
+    const containsProxyUrl = wrapper.vm.externalLinks.find((link: LinkConfig) => link.link);
+
+    expect(containsProxyUrl).toBeTruthy();
+    expect(containsProxyUrl.link).toStrictEqual(proxyUrl);
+  });
+
+  it('displays IconMessage when externalLinks array is empty', () => {
+    const wrapper = createWrapper({ stubs: { LazyImage: { template: '<span />' } } });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+
+    const iconMessage = wrapper.findComponent(IconMessage);
+
+    expect(iconMessage.exists()).toBe(true);
+  });
+});

package/pages/c/_cluster/longhorn/index.vue

@@ -3,42 +3,61 @@ import { mapGetters } from 'vuex';
 
 import InstallRedirect from '@shell/utils/install-redirect';
 
+import { SERVICE } from '@shell/config/types';
 import { NAME, CHART_NAME } from '@shell/config/product/longhorn';
 
+import IconMessage from '@shell/components/IconMessage';
 import LazyImage from '@shell/components/LazyImage';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { LazyImage },
+  components: {
+    IconMessage, LazyImage, Loading
+  },
 
   middleware: InstallRedirect(NAME, CHART_NAME),
 
+  async fetch() {
+    if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
+      this.uiServices = await this.$store.dispatch('cluster/findMatching', {
+        type:     SERVICE,
+        selector: 'app=longhorn-ui'
+      });
+    }
+  },
+
   data() {
     return {
-      externalLinks:  [],
       longhornImgSrc: require('~shell/assets/images/vendor/longhorn.svg'),
+      uiServices:     null
     };
   },
 
-  computed: { ...mapGetters(['currentCluster']) },
+  computed: {
+    ...mapGetters(['currentCluster']),
 
-  mounted() {
-    this.externalLinks = [
-      {
-        enabled:     true,
-        iconSrc:     this.longhornImgSrc,
-        label:       'longhorn.overview.linkedList.longhorn.label',
-        description: 'longhorn.overview.linkedList.longhorn.description',
-        link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/`
-      },
-    ];
-  },
+    externalLinks() {
+      if ( this.uiServices && this.uiServices.length === 1 && this.uiServices[0].metadata?.namespace ) {
+        return [
+          {
+            enabled:     true,
+            iconSrc:     this.longhornImgSrc,
+            label:       'longhorn.overview.linkedList.longhorn.label', // i18n-uses longhorn.overview.linkedList.longhorn.label
+            description: 'longhorn.overview.linkedList.longhorn.description', // i18n-uses longhorn.overview.linkedList.longhorn.description
+            link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.uiServices[0].metadata.namespace }/services/http:longhorn-frontend:80/proxy/`
+          },
+        ];
+      }
 
-  methods: {}
+      return [];
+    }
+  }
 };
 </script>
 
 <template>
-  <section>
+  <Loading v-if="$fetchState.pending" />
+  <section v-else>
     <header class="row">
       <div class="col span-12">
         <h1>
@@ -52,7 +71,10 @@ export default {
         </div>
       </div>
     </header>
-    <div class="links">
+    <div
+      v-if="externalLinks && externalLinks.length"
+      class="links"
+    >
       <div
         v-for="fel in externalLinks"
         :key="fel.label"
@@ -75,5 +97,18 @@ export default {
         </a>
       </div>
     </div>
+
+    <IconMessage
+      v-else
+      class="mt-40 mb-20"
+      icon="icon-longhorn"
+      :vertical="true"
+    >
+      <template #message>
+        <p>
+          {{ t('longhorn.overview.linkedList.longhorn.uiServiceUnavailable') }}
+        </p>
+      </template>
+    </IconMessage>
   </section>
 </template>

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -3,15 +3,22 @@ import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { NORMAN, SECRET } from '@shell/config/types';
-import { AGE_NORMAN, DESCRIPTION, ID_UNLINKED, NAME_UNLINKED } from '@shell/config/table-headers';
+import {
+  AGE_NORMAN,
+  DESCRIPTION,
+  ID_UNLINKED,
+  NAME_UNLINKED,
+} from '@shell/config/table-headers';
 
 export default {
   components: {
-    Loading, ResourceTable, Masthead
+    Loading,
+    ResourceTable,
+    Masthead,
   },
 
   async fetch() {
-    if ( this.$store.getters['management/schemaFor'](SECRET) ) {
+    if (this.$store.getters['management/schemaFor'](SECRET) && !this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }
@@ -37,12 +44,12 @@ export default {
         ID_UNLINKED,
         NAME_UNLINKED,
         {
-          name:        'apikey',
-          labelKey:    'tableHeaders.apikey',
-          value:       'publicData',
-          sort:        'publicData',
-          search:      'publicData',
-          dashIfEmpty: true,
+          name:      'apikey',
+          labelKey:  'tableHeaders.apikey',
+          value:     'publicData',
+          sort:      'publicData',
+          search:    'publicData',
+          formatter: 'CloudCredPublicData',
         },
         DESCRIPTION,
         AGE_NORMAN,
@@ -54,15 +61,12 @@ export default {
         name:   'c-cluster-manager-cloudCredential-create',
         params: {
           product:  this.$store.getters['currentProduct'].name,
-          resource: this.resource
+          resource: this.resource,
         },
       };
     },
   },
 
-  mounted() {
-    window.c = this;
-  },
 };
 </script>
 
@@ -75,7 +79,6 @@ export default {
       :create-location="createLocation"
       :type-display="t('manager.cloudCredentials.label')"
     />
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
@@ -84,17 +87,7 @@ export default {
       group-by="providerDisplay"
     >
       <template #cell:id="{row}">
-        {{ row.id.replace('cattle-global-data:','') }}
-      </template>
-      <template #cell:apikey="{row}">
-        <span
-          v-if="row.publicData"
-          v-clean-html="row.publicData"
-        />
-        <span
-          v-else
-          class="text-muted"
-        >&mdash;</span>
+        {{ row.id.replace('cattle-global-data:', '') }}
       </template>
     </ResourceTable>
   </div>

package/pages/c/_cluster/manager/drivers/kontainerDriver/_id.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'KontainerDriverEditPage',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail resource-override="kontainerDriver" />
+</template>

package/pages/c/_cluster/manager/drivers/kontainerDriver/create.vue

@@ -0,0 +1,15 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'KontainerDriverCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail
+    resource-override="kontainerDriver"
+    parent-route-override="c-cluster-manager-driver-kontainerdriver"
+  />
+</template>