Improve presentation of cluster provider on Cluster Management list (#5824)

* Improve presentation of cluster provide on Cluster Management list

* Fix lint issue

shell/components/formatter/ClusterProvider.vue

@@ -0,0 +1,27 @@
+<script>
+export default {
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <template v-if="row.machineProvider">
+      {{ row.machineProviderDisplay }}
+    </template>
+    <template v-else-if="row.isCustom">
+      {{ t('cluster.provider.custom') }}
+    </template>
+    <template v-else>
+      {{ t('cluster.provider.imported') }}
+    </template>
+    <div class="text-muted">
+      {{ row.provisionerDisplay }}
+    </div>
+  </div>
+</template>

shell/config/product/manager.js

@@ -150,10 +150,11 @@ export function init(store) {
       search:   'kubernetesVersion',
     },
     {
-      name:     'provider',
-      labelKey: 'tableHeaders.provider',
-      value:    'machineProvider',
-      sort:     ['machineProvider', 'provisioner'],
+      name:      'provider',
+      labelKey:  'tableHeaders.provider',
+      value:     'machineProvider',
+      sort:      ['machineProvider', 'provisioner'],
+      formatter: 'ClusterProvider',
     },
     MACHINE_SUMMARY,
     AGE,

shell/list/provisioning.cattle.io.cluster.vue

@@ -134,17 +134,6 @@ export default {
     </Masthead>
 
     <ResourceTable :schema="schema" :rows="rows" :namespaced="false">
-      <template #cell:provider="{row}">
-        <template v-if="row.machineProvider">
-          {{ row.machineProviderDisplay }}
-          <div class="text-muted">
-            {{ row.provisionerDisplay }}
-          </div>
-        </template>
-        <template v-else>
-          {{ row.provisionerDisplay }}
-        </template>
-      </template>
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>