cluster vanity name

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -230,12 +230,12 @@ export const Dashboard: React.FunctionComponent = () => {
     <>
       <DashboardHeader
         image={settings}
-        title={context.currentCluster.name}
+        title={context.currentCluster.vanity_name || context.currentCluster.name}
         description={
           ingressIp ? (
             <>{renderIngressIp(ingressIp, ingressError)}</>
           ) : (
-            `Cluster settings and status for ${context.currentCluster.name}.`
+            `Cluster settings and status for ${context.currentCluster.vanity_name || context.currentCluster.name}.`
           )
         }
         disableLineBreak

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -27,6 +27,7 @@ const ClusterList: React.FC<Props> = ({}) => {
       { id: currentProject.id },
     )
       .then(({ data }) => {
+        console.log(data);
         setClusters(data);
         setIsLoading(false);
       })
@@ -127,7 +128,7 @@ const ClusterList: React.FC<Props> = ({}) => {
                     }}
                   >
                     {renderIcon()}
-                    {cluster.name}
+                    {cluster.vanity_name || cluster.name}
                     {
                       (
                         cluster.status === "UPDATING" || cluster.status === "UPDATING_UNAVAILABLE"

dashboard/src/main/home/dashboard/OldClusterList.tsx

@@ -137,7 +137,7 @@ class Templates extends Component<PropsType, StateType> {
             key={i}
           >
             {this.renderIcon()}
-            <TemplateTitle>{cluster.name}</TemplateTitle>
+            <TemplateTitle>{cluster.vanity_name || cluster.name}</TemplateTitle>
           </TemplateBlock>
         );
       }

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -74,7 +74,7 @@ class SettingsPage extends Component<PropsType, StateType> {
         let clusterOptions: { label: string; value: string }[] = [];
         let clusterMap: { [clusterId: string]: ClusterType } = {};
         res.data.forEach((cluster: ClusterType, i: number) => {
-          clusterOptions.push({ label: cluster.name, value: cluster.name });
+          clusterOptions.push({ label: cluster.vanity_name || cluster.name, value: cluster.name });
           clusterMap[cluster.name] = cluster;
         });
         if (res.data.length > 0) {

dashboard/src/main/home/modals/AccountSettingsModal.tsx

@@ -144,7 +144,7 @@ const List = styled.div`
   border-radius: 5px;
   margin-top: 20px;
   border: 1px solid #ffffff44;
-  max-height: 200px;
+  max-height: 120px;
   overflow-y: auto;
 `;
 

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -216,7 +216,7 @@ export const ClusterSection: React.FC<Props> = ({
             </svg>
           </ClusterIcon>
           <Tooltip title={cluster?.name}>
-            <ClusterName>{cluster?.name}</ClusterName>
+            <ClusterName>{cluster?.vanity_name || cluster?.name}</ClusterName>
           </Tooltip>
           <I isExpanded={isExpanded} className="material-icons">
             arrow_drop_down

dashboard/src/shared/types.tsx

@@ -3,6 +3,7 @@ import ValuesYaml from "main/home/cluster-dashboard/expanded-chart/ValuesYaml";
 export interface ClusterType {
   id: number;
   name: string;
+  vanity_name?: string;
   server: string;
   service_account_id: number;
   agent_integration_enabled: boolean;