Add links to Cluster and ClusterClass from list views

Signed-off-by: Matt Boersma <Matt.Boersma@microsoft.com>

Author: mboersma

cluster-api/src/components/clusters/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { Cluster } from '../../resources/cluster';
 
 export function ClustersList() {
@@ -12,7 +12,18 @@ export function ClustersList() {
         {
           id: 'clusterclass',
           label: 'Cluster Class',
-          getValue: cluster => cluster.spec?.topology?.class,
+          getValue: null,
+          render: cluster => (
+            <Link
+              routeName="clusterclasse"
+              params={{
+                name: cluster.spec?.topology?.class,
+                namespace: cluster.metadata?.namespace,
+              }}
+            >
+              {cluster.spec?.topology?.class}
+            </Link>
+          ),
         },
         {
           id: 'phase',

cluster-api/src/components/kubeadmconfigs/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { KubeadmConfig } from '../../resources/kubeadmconfig';
 
 export function KubeadmConfigsList() {
@@ -12,7 +12,18 @@ export function KubeadmConfigsList() {
         {
           id: 'cluster',
           label: 'Cluster',
-          getValue: kc => kc.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+          getValue: null,
+          render: kc => (
+            <Link
+              routeName="capicluster"
+              params={{
+                name: kc.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+                namespace: kc.metadata?.namespace,
+              }}
+            >
+              {kc.metadata?.labels?.['cluster.x-k8s.io/cluster-name']}
+            </Link>
+          ),
         },
         'age',
       ]}

cluster-api/src/components/kubeadmcontrolplanes/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { KubeadmControlPlane } from '../../resources/kubeadmcontrolplane';
 
 export function KubeadmControlPlanesList() {
@@ -12,7 +12,18 @@ export function KubeadmControlPlanesList() {
         {
           id: 'cluster',
           label: 'Cluster',
-          getValue: kcp => kcp.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+          getValue: null,
+          render: kcp => (
+            <Link
+              routeName="capicluster"
+              params={{
+                name: kcp.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+                namespace: kcp.metadata?.namespace,
+              }}
+            >
+              {kcp.metadata?.labels?.['cluster.x-k8s.io/cluster-name']}
+            </Link>
+          ),
         },
         {
           id: 'initialized',

cluster-api/src/components/machinedeployments/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { MachineDeployment } from '../../resources/machinedeployment';
 
 export function MachineDeploymentsList() {
@@ -12,7 +12,18 @@ export function MachineDeploymentsList() {
         {
           id: 'cluster',
           label: 'Cluster',
-          getValue: deployment => deployment.spec?.clusterName,
+          getValue: null,
+          render: deployment => (
+            <Link
+              routeName="capicluster"
+              params={{
+                name: deployment.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+                namespace: deployment.metadata?.namespace,
+              }}
+            >
+              {deployment.metadata?.labels?.['cluster.x-k8s.io/cluster-name']}
+            </Link>
+          ),
         },
         {
           id: 'replicas',

cluster-api/src/components/machinehealthchecks/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { MachineHealthCheck } from '../../resources/machinehealthcheck';
 
 export function MachineHealthChecksList() {
@@ -12,7 +12,18 @@ export function MachineHealthChecksList() {
         {
           id: 'cluster',
           label: 'Cluster',
-          getValue: mhc => mhc.spec?.clusterName,
+          getValue: null,
+          render: mhc => (
+            <Link
+              routeName="capicluster"
+              params={{
+                name: mhc.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+                namespace: mhc.metadata?.namespace,
+              }}
+            >
+              {mhc.metadata?.labels?.['cluster.x-k8s.io/cluster-name']}
+            </Link>
+          ),
         },
         {
           id: 'expectedMachines',

cluster-api/src/components/machinesets/List.tsx

@@ -1,4 +1,4 @@
-import { ResourceListView } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Link, ResourceListView } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { MachineSet } from '../../resources/machineset';
 
 export function MachineSetsList() {
@@ -12,7 +12,18 @@ export function MachineSetsList() {
         {
           id: 'cluster',
           label: 'Cluster',
-          getValue: machineset => machineset.spec.clusterName,
+          getValue: null,
+          render: machineset => (
+            <Link
+              routeName="capicluster"
+              params={{
+                name: machineset.metadata?.labels?.['cluster.x-k8s.io/cluster-name'],
+                namespace: machineset.metadata?.namespace,
+              }}
+            >
+              {machineset.metadata?.labels?.['cluster.x-k8s.io/cluster-name']}
+            </Link>
+          ),
         },
         {
           id: 'replicas',