import React from 'react' ; import { NavLink } from 'react-router-dom' ; import styled from 'styled-components' ; import { Cluster } from 'teleport/services/clusters' ; import { MenuButton , MenuItem } from 'shared/components/MenuAction' ; import Table , { Cell } from 'design/DataTableNext' ; import { Primary } from 'design/Label' ; import cfg from 'teleport/config' ; export default function ClustersList ( props ) { const { clusters = [ ] , pageSize = 50 , menuFlags } = props ; return ( < StyledTable data = { clusters } columns = { [ { altKey : 'root-label' , render : renderRootLabelCell , } , { key : 'clusterId' , headerText : 'Name' , isSortable : true , } , { altKey : 'menu-btn' , render : cluster => renderActionCell ( cluster , menuFlags ) , } , ] } emptyText = "No Clusters Found" isSearchable showFirst = { clusters => clusters . find ( c => c . clusterId === cfg . proxyCluster ) } pagination = { { pageSize } } />); } function renderRootLabelCell ( { clusterId } ) { const isRoot = cfg . proxyCluster === clusterId ; return ( < Cell style = { { width : '40px' } } > { isRoot && < Primary > ROOT < /Primary>}</Cell > ) ; } function renderActionCell ( { clusterId } , flags ) { const $items = [ ] as React . ReactNode [ ] ; if ( flags . showNodes ) { $items . push ( renderMenuItem ( 'Servers' , cfg . getNodesRoute ( clusterId ) ) ) ; } if ( flags . showApps ) { $items . push ( renderMenuItem ( 'Applications' , cfg . getAppsRoute ( clusterId ) ) ) ; } if ( flags . showKubes ) { $items . push ( renderMenuItem ( 'Kubernetes' , cfg . getKubernetesRoute ( clusterId ) ) ) ; } if ( flags . showDatabases ) { $items . push ( renderMenuItem ( 'Databases' , cfg . getDatabasesRoute ( clusterId ) ) ) ; } if ( flags . showDesktops ) { $items . push ( renderMenuItem ( 'Desktops (preview)' , cfg . getDesktopsRoute ( clusterId ) ) ) ; } if ( flags . showAudit ) { $items . push ( renderMenuItem ( 'Audit Log' , cfg . getAuditRoute ( clusterId ) ) ) ; } if ( flags . showRecordings ) { $items . push ( renderMenuItem ( 'Session Recordings' , cfg . getRecordingsRoute ( clusterId ) ) ) ; } return ( < Cell align = "right" > { $items && < MenuButton children = { $items } />}</Cell > ) ; } function renderMenuItem ( name , url ) { return ( < MenuItem as = { NavLink } to = { url } key = { name } > { name } < /MenuItem>); } type Props = { clusters : Cluster [ ] ; pageSize ? : number ; menuFlags : MenuFlags ; } ; type MenuFlags = { showNodes : boolean ; showAudit : boolean ; showRecordings : boolean ; showApps : boolean ; showDatabases : boolean ; showKubes : boolean ; showDesktops : boolean ; } ; const StyledTable = styled ( Table ) `
  td {
    height: 22px;
  }
` as typeof Table ;