feat add infrastructure ref kind to clusters

[ranatrk]

Issue

Fixes #1165

Description

• Add infrstructure ref kind to cluster responce and UI
• Add cluster icons to clusters list
  Example:
  

[jmickey]

LGTM! Looks like there might be an unintentional whitespace change in the TS imports, but otherwise it looks great!

[foot]

WRT Icons!

• the icons seems to still be around https://github.com/weaveworks/weave-gitops-enterprise/blob/main/ui-cra/src/utils/icons.tsx
• Their rendering bit got stripped out in [UI] MultiCluster and updates to Connect a Cluster  #687, the previous tree is easier to see them, here:

  weave-gitops-enterprise/ui-cra/src/components/Clusters/Table/Row.tsx

  Lines 82 to 93 in 0ecd3c3

  	const getClusterTypeIcon = (clusterType?: string): Icon | null => {
  	if (clusterType === 'aws') {
  	return EKS;
  	} else if (clusterType === 'existingInfra') {
  	return ExistingInfra;
  	} else if (clusterType === 'gke') {
  	return GKE;
  	} else if (clusterType === 'kind') {
  	return Kind;
  	}
  	return null;
  	};

• I'm not sure what the new map should look like
  • DockerCluster: Kind ?
  • AWSCluster or AWSManagedCluster: EKS
  • AzureCluster or AzureManagedCluster: We don't have an icon right now, just kubernetes?
  • GCPCluster: GKE
• Then we could add back a column (copy the checkbox column, its nice and narrow) into the table like this:

  weave-gitops-enterprise/ui-cra/src/components/Clusters/Table/Row.tsx

  Lines 143 to 150 in 0ecd3c3

  	{icon && (
  	<Octicon
  	className={classes.icon}
  	icon={icon}
  	size={24}
  	verticalAlign="middle"
  	/>
  	)}

[foot]

This is wicked very nicely done 🙌 .

We also use prettier to do all the autoformatting, (like gofmt for go). So if using vscode you can install the prettier extension and turn on format-on-save.

[ranatrk]

@bia the changes for using the existing icons in the clusters list are added here

[foot]

cc @bia do we have an alternative icon for k8s? https://fontawesome.com/icons/steering-wheel?s=solid ?

[foot]

Let's use an unaltered version of the k8s logo.

[foot]

On the GitopsCluster object:

weave.works/cluster-kind: [`DockerCluster` | `AWSCluster` ]

Notes:

• Backstage: https://backstage.io/docs/features/software-catalog/descriptor-format
• Add docs to the user-guide next to the dashboard annotations section
• Default should be an unaltered k8s logo (@bia to source nice svg), logo pack might be available via the linux foundation.

[foot]

https://github.com/kubernetes/kubernetes/blob/master/logo/usage_guidelines.md

[bia]

Could we combine the infrastructure icons with the Type column somehow?

What does the bottle mean this time?

[ranatrk]

Could we combine the infrastructure icons with the Type column somehow?

In the case of capi there will be different possible icons depending on the cluster infra ref kind. Could that be confusing to have the same type with different icons? @foot , @bia wdyt?

What does the bottle mean this time?

if the capi cluster infrstructure ref kind is DockerCluster

[foot]

Could that be confusing to have the same type with different icons?

Yes! capi/other is not that useful. So we could change the type column to show the infraRef/explict-annotation value instead. The column could be just an icon with a `title="type: DockerCluster" so we can see more on hover..

What does the bottle mean this time?

[bia]

Let’s do it! I’m sketching this.

[bia]

I'm still waiting on an answer from [email protected] to confirm that we can use a grey k8s logo, but here is my proposal, does it make sense?

I'm using the fa6 wine bottle, which I think matches material a bit better. Is there a licencing issue with that?

[ranatrk]

Currently the kind icon is updated with the new bottle, and the icons are moved to the type column with the grey color for all. (Including the k8s logo until we receive an answer regarding the license)

[ranatrk]

The following are the icons for EKS, GKE, Kubernetes, and Kind used:

[foot]

Wicked! ⭐ , looking great.

[ranatrk]

Icons with tooltip showing the cluster kind

[foot]

Beaut! ✨ , this looks great!