Update how the cluster name is truncated

assets/js/components/ClusterDetails/ChecksResults.jsx

@@ -15,7 +15,10 @@ import LoadingBox from '../LoadingBox';
 import Button from '@components/Button';
 import { getCluster } from '@state/selectors';
 import TrentoLogo from '../../../static/trento-icon.png';
-import { TriggerChecksExecutionRequest } from './ClusterDetails';
+import {
+  TriggerChecksExecutionRequest,
+  truncatedClusterNameClasses,
+} from './ClusterDetails';
 import { ExecutionIcon } from './ExecutionIcon';
 import { getClusterName } from '@components/ClusterLink';
 
@@ -210,7 +213,9 @@ export const ChecksResults = () => {
       <div className="flex mb-4">
         <h1 className="text-3xl w-3/5">
           <span className="font-medium">Checks Results for cluster</span>{' '}
-          <span className="font-bold">{getClusterName(cluster)}</span>
+          <span className={`font-bold ${truncatedClusterNameClasses}`}>
+            {getClusterName(cluster)}
+          </span>
         </h1>
         <div className="flex w-2/5 justify-end text-white">
           <Button

assets/js/components/ClusterDetails/ClusterDetails.jsx

@@ -18,6 +18,10 @@ import { EOS_SETTINGS, EOS_CLEAR_ALL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 import { getCluster } from '@state/selectors';
 import classNames from 'classnames';
 
+export const truncatedClusterNameClasses = classNames(
+  'font-bold truncate w-60 inline-block align-top'
+);
+
 const siteDetailsConfig = {
   usePadding: false,
   columns: [
@@ -82,7 +86,10 @@ const ClusterDetails = () => {
     <div>
       <div className="flex">
         <h1 className="text-3xl font-bold w-1/2">
-          Pacemaker cluster details: {getClusterName(cluster)}
+          Pacemaker cluster details:{' '}
+          <span className={truncatedClusterNameClasses}>
+            {getClusterName(cluster)}
+          </span>
         </h1>
         <div className="flex w-1/2 justify-end">
           <Button

assets/js/components/ClusterDetails/ClusterSettings.jsx

@@ -10,7 +10,10 @@ import { Tab } from '@headlessui/react';
 import { ChecksSelection } from './ChecksSelection';
 import { ConnectionSettings } from './ConnectionSettings';
 import { getCluster } from '@state/selectors';
-import { TriggerChecksExecutionRequest } from './ClusterDetails';
+import {
+  TriggerChecksExecutionRequest,
+  truncatedClusterNameClasses,
+} from './ClusterDetails';
 import { getClusterName } from '@components/ClusterLink';
 
 export const ClusterSettings = () => {
@@ -33,7 +36,9 @@ export const ClusterSettings = () => {
       <div className="flex mb-2">
         <h1 className="text-3xl w-1/2">
           <span className="font-medium">Cluster Settings for</span>{' '}
-          <span className="font-bold">{getClusterName(cluster)}</span>
+          <span className={`font-bold ${truncatedClusterNameClasses}`}>
+            {getClusterName(cluster)}
+          </span>
         </h1>
         <div className="flex w-1/2 justify-end text-white">
           <Button

assets/js/components/ClusterLink.jsx

@@ -1,27 +1,30 @@
 import React from 'react';
 
 import { Link } from 'react-router-dom';
+import classNames from 'classnames';
 
-const truncatedLength = 14; // Using 14 as it cuts the uuid format after the 2nd -
 export const getClusterName = (cluster) => {
-  return cluster?.name || cluster?.id.slice(0, truncatedLength) + '...';
+  return cluster?.name || cluster?.id;
 };
 
 const ClusterLink = ({ cluster }) => {
   const clusterName = getClusterName(cluster);
+  const truncatedClasses = classNames(
+    'truncate w-32 inline-block align-middle'
+  );
 
   if (cluster?.type == 'hana_scale_up' || cluster?.type == 'hana_scale_out') {
     return (
       <Link
         className="text-jungle-green-500 hover:opacity-75"
         to={`/clusters/${cluster.id}`}
       >
-        {clusterName}
+        <span className={truncatedClasses}>{clusterName}</span>
       </Link>
     );
   }
 
-  return <span>{clusterName}</span>;
+  return <span className={truncatedClasses}>{clusterName}</span>;
 };
 
 export default ClusterLink;

test/e2e/cypress/integration/clusters_overview.js

@@ -40,8 +40,7 @@ import {
 
         it('Unnamed clusters should use the ID as details page link', () => {
           const clusterID = clusterIdByName('hana_cluster_1')
-          const truncatedLength = 14;
-          cy.get(`a:contains(${clusterID.slice(0, truncatedLength)})`).should('be.visible')
+          cy.get(`a:contains(${clusterID})`).should('be.visible')
         });
       });
     });