import React from 'react' ; import Table , { Cell , LabelCell } from 'design/DataTableNext' ; import MenuSshLogin , { LoginItem } from 'shared/components/MenuSshLogin' ; import { Node } from 'teleport/services/nodes' ; function NodeList ( props ) { const { nodes = [ ] , onLoginMenuOpen , onLoginSelect , pageSize = 100 } = props ; return ( < Table columns = { [ { key : 'hostname' , headerText : 'Hostname' , isSortable : true , } , { key : 'addr' , headerText : 'Address' , isSortable : true , render : renderAddressCell , } , { key : 'tags' , headerText : 'Labels' , render : ( { tags } ) => < LabelCell data = { tags } / > , } , { altKey : 'connect-btn' , render : ( { id } ) => renderLoginCell ( id , onLoginSelect , onLoginMenuOpen ) , } , ] } emptyText = "No Nodes Found" data = { nodes } pagination = { { pageSize , } } isSearchable / > ) ; } const renderLoginCell = ( id , onSelect , onOpen ) => { function handleOnOpen ( ) { return onOpen ( id ) ; } function handleOnSelect ( e , login ) { if ( ! onSelect ) { return [ ] ; } return onSelect ( e , login , id ) ; } return ( < Cell align = "right" > < MenuSshLogin onOpen = { handleOnOpen } onSelect = { handleOnSelect } transformOrigin = { { vertical : 'top' , horizontal : 'right' , } } anchorOrigin = { { vertical : 'center' , horizontal : 'right' , } } /> < /Cell>); } ; export const renderAddressCell = ( { addr , tunnel } ) => ( < Cell > { tunnel ? renderTunnel ( ) : addr } < /Cell>); function renderTunnel ( ) { return ( < span style = { { cursor : 'default' } } title = "This node is connected to cluster through reverse tunnel" > { `⟵ tunnel` } < /span>); } type Props = { nodes : Node [ ] ; onLoginMenuOpen ( serverId ) : { login : string ; url : string ; } [ ] ; onLoginSelect ( e , login , serverId ) : void ; pageSize ? : number ; } ; export default NodeList ;