Include cluster field in the host details view

assets/js/components/HostDetails/HostDetails.jsx

@@ -7,17 +7,20 @@ import Table from '@components/Table';
 
 import HeartbeatPill from './HeartbeatPill';
 
+import ClusterLink from '@components/ClusterLink';
+
 import {
   subscriptionsTableConfiguration,
   sapInstancesTableConfiguration,
 } from './tableConfigs';
 
 import SuseLogo from '../../../static/suse_logo.svg';
-import { getInstancesOnHost, getHost } from '@state/selectors';
+import { getInstancesOnHost, getClusterOnHost, getHost } from '@state/selectors';
 
 const HostDetails = () => {
   const { hostID } = useParams();
   const host = useSelector(getHost(hostID));
+  const cluster = useSelector(getClusterOnHost(hostID));
   const sapSystems = useSelector(getInstancesOnHost(hostID));
 
   // eslint-disable-next-line no-undef
@@ -41,7 +44,7 @@ const HostDetails = () => {
           orientation="vertical"
           data={[
             { title: 'Name', content: host.hostname },
-            { title: 'Cluster', content: host.cluster && host.cluster.name },
+            { title: 'Cluster', content: <ClusterLink cluster={cluster}>{cluster?.name}</ClusterLink> },
             { title: 'Agent version', content: host.agent_version },
           ]}
         />

assets/js/state/selectors/index.js

@@ -69,6 +69,11 @@ const enrichInstances = (instances, sapSystemId, state) =>
       };
     });
 
+export const getClusterOnHost = (hostId) => (state) => {
+  const host = state.hostsList.hosts.find((host) => host.id === hostId);
+  return state.clustersList.clusters.find(isIdByKey('id', host?.cluster_id))
+};
+
 export const getInstancesOnHost = (hostId) => (state) => {
   const { databaseInstances, applicationInstances } = state.sapSystemsList;