import React from 'react' ; import Table , { Cell , LabelCell } from 'design/DataTableNext' ; import { Desktop } from 'teleport/services/desktops' ; import MenuSshLogin , { LoginItem } from 'shared/components/MenuSshLogin' ; function DesktopList ( props ) { const { desktops = [ ] , pageSize = 100 , onLoginMenuOpen , onLoginSelect , } = props ; function onDesktopSelect ( e , username , desktopName ) { e . preventDefault ( ) ; onLoginSelect ( username , desktopName ) ; } return ( < Table data = { desktops } columns = { [ { key : 'addr' , headerText : 'Address' , isSortable : true , } , { key : 'name' , headerText : 'Name' , isSortable : true , } , { key : 'tags' , headerText : 'Labels' , render : ( { tags } ) => < LabelCell data = { tags } / > , } , { altKey : 'login-cell' , render : desktop => renderLoginCell ( desktop , onLoginMenuOpen , onDesktopSelect ) , } , ] } pagination = { { pageSize , } } initialSort = { { key : 'name' , dir : 'ASC' , } } isSearchable emptyText = "No Desktops Found" / > ) ; } function renderLoginCell ( { name } , onOpen , onSelect ) { function handleOnOpen ( ) { return onOpen ( name ) ; } function handleOnSelect ( e , login ) { if ( ! onSelect ) { return [ ] ; } return onSelect ( e , login , name ) ; } return ( < Cell align = "right" > < MenuSshLogin onOpen = { handleOnOpen } onSelect = { handleOnSelect } transformOrigin = { { vertical : 'top' , horizontal : 'right' , } } anchorOrigin = { { vertical : 'center' , horizontal : 'right' , } } /> < /Cell>); } type Props = { desktops : Desktop [ ] ; pageSize ? : number ; username : string ; clusterId : string ; onLoginMenuOpen ( desktopName ) : { login : string ; url : string ; } [ ] ; onLoginSelect ( username , desktopName ) : void ; } ; export default DesktopList ;