github.com/argoproj/argo-cd@v1.8.7/ui/src/app/shared/components/cluster.tsx (about) 1 import {Tooltip} from 'argo-ui'; 2 import * as React from 'react'; 3 import {DataLoader} from '.'; 4 import * as models from '../models'; 5 import {services} from '../services'; 6 7 export const clusterName = (name: string | null) => { 8 return name || 'in-cluster'; 9 }; 10 11 export const clusterTitle = (cluster: models.Cluster) => { 12 return `${clusterName(cluster.name)} (${cluster.server})`; 13 }; 14 15 const clusterHTML = (cluster: models.Cluster, showUrl: boolean) => { 16 const text = showUrl ? clusterTitle(cluster) : clusterName(cluster.name); 17 return ( 18 <Tooltip content={cluster.server}> 19 <span>{text}</span> 20 </Tooltip> 21 ); 22 }; 23 24 async function getCluster(clusters: Promise<models.Cluster[]>, server: string, name: string): Promise<models.Cluster> { 25 let cluster: models.Cluster; 26 if (clusters) { 27 cluster = await clusters.then(items => items.find(item => item.server === server || item.name === name)); 28 } else { 29 try { 30 cluster = await services.clusters.get(server, name); 31 } catch { 32 cluster = null; 33 } 34 } 35 if (!cluster) { 36 cluster = { 37 name: server, 38 server 39 }; 40 } 41 return cluster; 42 } 43 44 export const ClusterCtx = React.createContext<Promise<Array<models.Cluster>>>(null); 45 46 export const Cluster = (props: {server: string; name?: string; showUrl?: boolean}) => ( 47 <ClusterCtx.Consumer> 48 {clusters => ( 49 <DataLoader input={props} loadingRenderer={() => <span>{props.server}</span>} load={input => getCluster(clusters, input.server, input.name)}> 50 {(cluster: models.Cluster) => clusterHTML(cluster, props.showUrl)} 51 </DataLoader> 52 )} 53 </ClusterCtx.Consumer> 54 );