import React from 'react' ; import { ButtonBorder } from 'design' ; import Table , { Cell , TextCell } from 'design/DataTableNext' ; import { displayDateTime } from 'shared/services/loc' ; import cfg from 'teleport/config' ; import { Recording } from 'teleport/services/recordings' ; import { State } from './useRecordings' ; export default function RecordingsList ( props ) { const { recordings = [ ] , clusterId , pageSize = 50 , fetchMore , fetchStatus , } = props ; return ( < Table data = { recordings } columns = { [ { key : 'hostname' , headerText : 'Node' , } , { key : 'users' , headerText : 'User(s)' , render : ( { users } ) => ( < Cell style = { { wordBreak : 'break-word' } } > { users } < /Cell>), } , { key : 'duration' , headerText : 'Duration' , isSortable : true , render : ( { durationText } ) => < TextCell data = { durationText } />, } , { key : 'createdDate' , headerText : 'Created' , isSortable : true , render : ( { createdDate } ) => ( < Cell > { displayDateTime ( createdDate ) } < /Cell>), } , { key : 'sid' , headerText : 'Session ID' , } , { altKey : 'play-btn' , render : recording => renderPlayCell ( recording , clusterId ) , } , ] } emptyText = "No Recordings Found" pagination = { { pageSize } } fetching = { { onFetchMore : fetchMore , fetchStatus } } initialSort = { { key : 'createdDate' , dir : 'DESC' , } } isSearchable / > ) ; } const renderPlayCell = ( { description , sid } , clusterId ) => { if ( description !== 'play' ) { return ( < Cell align = "right" style = { { color : '#9F9F9F' } } > { description } < /Cell>); } const url = cfg . getPlayerRoute ( { clusterId , sid } ) ; return ( < Cell align = "right" > < ButtonBorder kind = "primary" as = "a" href = { url } width = "80px" target = "_blank" size = "small" > Play < /ButtonBorder> < /Cell>); } ; type Props = { pageSize ? : number ; recordings : State [ 'recordings' ] ; clusterId : State [ 'clusterId' ] ; fetchMore : State [ 'fetchMore' ] ; fetchStatus : State [ 'fetchStatus' ] ; } ;