@@ -258,7 +258,7 @@ export const Workspaces: React.FunctionComponent = () => {
258258 } ;
259259
260260 const workspaceDefaultActions = ( workspace : Workspace ) : IActions => {
261- const workspaceState = workspace . status . state ;
261+ const workspaceState = workspace . state ;
262262 const workspaceActions = [
263263 {
264264 title : 'View Details' ,
@@ -400,86 +400,104 @@ export const Workspaces: React.FunctionComponent = () => {
400400 Create Workspace
401401 </ Button >
402402 </ Content >
403- < Table aria-label = "Sortable table" ouiaId = "SortableTable" >
404- < Thead >
405- < Tr >
406- < Th />
407- { Object . values ( columnNames ) . map ( ( columnName , index ) => (
408- < Th key = { `${ columnName } -col-name` } sort = { getSortParams ( index ) } >
409- { columnName }
410- </ Th >
411- ) ) }
412- < Th screenReaderText = "Primary action" />
413- </ Tr >
414- </ Thead >
415- { sortedWorkspaces . map ( ( workspace , rowIndex ) => (
416- < Tbody
417- id = "workspaces-table-content"
418- key = { rowIndex }
419- isExpanded = { isWorkspaceExpanded ( workspace ) }
420- data-testid = "table-body"
421- >
422- < Tr id = { `workspaces-table-row-${ rowIndex + 1 } ` } >
423- < Td
424- expand = { {
425- rowIndex,
426- isExpanded : isWorkspaceExpanded ( workspace ) ,
427- onToggle : ( ) =>
428- setWorkspaceExpanded ( workspace , ! isWorkspaceExpanded ( workspace ) ) ,
429- } }
430- />
431- < Td dataLabel = { columnNames . name } > { workspace . name } </ Td >
432- < Td dataLabel = { columnNames . kind } >
433- { kindLogoDict [ workspace . kind ] ? (
434- < Tooltip content = { workspace . kind } >
435- < Brand
436- src = { kindLogoDict [ workspace . kind ] }
437- alt = { workspace . kind }
438- style = { { width : '20px' , height : '20px' , cursor : 'pointer' } }
439- />
440- </ Tooltip >
441- ) : (
442- < Tooltip content = { workspace . kind } >
443- < CodeIcon />
444- </ Tooltip >
445- ) }
446- </ Td >
447- < Td dataLabel = { columnNames . image } > { workspace . options . imageConfig } </ Td >
448- < Td dataLabel = { columnNames . podConfig } > { workspace . options . podConfig } </ Td >
449- < Td dataLabel = { columnNames . state } >
450- < Label color = { stateColors [ workspace . status . state ] } >
451- { WorkspaceState [ workspace . status . state ] }
452- </ Label >
453- </ Td >
454- < Td dataLabel = { columnNames . homeVol } > { workspace . podTemplate . volumes . home } </ Td >
455- < Td dataLabel = { columnNames . cpu } > { `${ workspace . cpu } %` } </ Td >
456- < Td dataLabel = { columnNames . ram } > { formatRam ( workspace . ram ) } </ Td >
457- < Td dataLabel = { columnNames . lastActivity } >
458- < Timestamp
459- date = { new Date ( workspace . status . activity . lastActivity ) }
460- tooltip = { { variant : TimestampTooltipVariant . default } }
461- >
462- 1 hour ago
463- </ Timestamp >
464- </ Td >
465- < Td >
466- < WorkspaceConnectAction workspace = { workspace } />
467- </ Td >
468- < Td isActionCell data-testid = "action-column" >
469- < ActionsColumn
470- items = { workspaceDefaultActions ( workspace ) . map ( ( action ) => ( {
471- ...action ,
472- 'data-testid' : `action-${ typeof action . title === 'string' ? action . title . toLowerCase ( ) : '' } ` ,
473- } ) ) }
474- />
475- </ Td >
403+ { /* Show a loading spinner if data is still loading */ }
404+ { ! loaded ? (
405+ < Spinner size = "xl" />
406+ ) : (
407+ < Table
408+ data-testid = "workspaces-table"
409+ aria-label = "Sortable table"
410+ ouiaId = "SortableTable"
411+ >
412+ < Thead >
413+ < Tr >
414+ < Th />
415+ { Object . values ( columnNames ) . map ( ( columnName , index ) => (
416+ < Th key = { `${ columnName } -col-name` } sort = { getSortParams ( index ) } >
417+ { columnName }
418+ </ Th >
419+ ) ) }
420+ < Th screenReaderText = "Primary action" />
476421 </ Tr >
477- { isWorkspaceExpanded ( workspace ) && (
478- < ExpandedWorkspaceRow workspace = { workspace } columnNames = { columnNames } />
479- ) }
480- </ Tbody >
481- ) ) }
482- </ Table >
422+ </ Thead >
423+ { sortedWorkspaces . map ( ( workspace , rowIndex ) => (
424+ < Tbody
425+ id = "workspaces-table-content"
426+ key = { rowIndex }
427+ isExpanded = { isWorkspaceExpanded ( workspace ) }
428+ data-testid = "table-body"
429+ >
430+ < Tr
431+ id = { `workspaces-table-row-${ rowIndex + 1 } ` }
432+ data-testid = { `workspace-row-${ rowIndex } ` }
433+ >
434+ < Td
435+ expand = { {
436+ rowIndex,
437+ isExpanded : isWorkspaceExpanded ( workspace ) ,
438+ onToggle : ( ) =>
439+ setWorkspaceExpanded ( workspace , ! isWorkspaceExpanded ( workspace ) ) ,
440+ } }
441+ />
442+ < Td data-testid = "workspace-name" dataLabel = { columnNames . name } >
443+ { workspace . name }
444+ </ Td >
445+ < Td dataLabel = { columnNames . kind } >
446+ { kindLogoDict [ workspace . workspace_kind . name ] ? (
447+ < Tooltip content = { workspace . workspace_kind . name } >
448+ < Brand
449+ src = { kindLogoDict [ workspace . workspace_kind . name ] }
450+ alt = { workspace . workspace_kind . name }
451+ style = { { width : '20px' , height : '20px' , cursor : 'pointer' } }
452+ />
453+ </ Tooltip >
454+ ) : (
455+ < Tooltip content = { workspace . workspace_kind . name } >
456+ < CodeIcon />
457+ </ Tooltip >
458+ ) }
459+ </ Td >
460+ < Td dataLabel = { columnNames . image } >
461+ { workspace . pod_template . options . image_config . current . display_name }
462+ </ Td >
463+ < Td data-testid = "pod-config" dataLabel = { columnNames . podConfig } >
464+ { workspace . pod_template . options . pod_config . current . display_name }
465+ </ Td >
466+ < Td data-testid = "state-label" dataLabel = { columnNames . state } >
467+ < Label color = { stateColors [ workspace . state ] } > { workspace . state } </ Label > { ' ' }
468+ </ Td >
469+ < Td dataLabel = { columnNames . homeVol } >
470+ { workspace . pod_template . volumes . home . pvc_name }
471+ </ Td >
472+ < Td dataLabel = { columnNames . cpu } > { formatCPU ( getCpuValue ( workspace ) ) } </ Td >
473+ < Td dataLabel = { columnNames . ram } > { formatRam ( getRamValue ( workspace ) ) } </ Td >
474+ < Td dataLabel = { columnNames . lastActivity } >
475+ < Timestamp
476+ date = { new Date ( workspace . activity . last_activity ) }
477+ tooltip = { { variant : TimestampTooltipVariant . default } }
478+ >
479+ 1 hour ago
480+ </ Timestamp >
481+ </ Td >
482+ < Td >
483+ < WorkspaceConnectAction workspace = { workspace } />
484+ </ Td >
485+ < Td isActionCell data-testid = "action-column" >
486+ < ActionsColumn
487+ items = { workspaceDefaultActions ( workspace ) . map ( ( action ) => ( {
488+ ...action ,
489+ 'data-testid' : `action-${ typeof action . title === 'string' ? action . title . toLowerCase ( ) : '' } ` ,
490+ } ) ) }
491+ />
492+ </ Td >
493+ </ Tr >
494+ { isWorkspaceExpanded ( workspace ) && (
495+ < ExpandedWorkspaceRow workspace = { workspace } columnNames = { columnNames } />
496+ ) }
497+ </ Tbody >
498+ ) ) }
499+ </ Table >
500+ ) }
483501 { isActionAlertModalOpen && chooseAlertModal ( ) }
484502 < DeleteModal
485503 isOpen = { workspaceToDelete != null }
0 commit comments