@@ -48,7 +48,39 @@ function Overview (): JSX.Element {
4848 fetchPolicy : 'network-only'
4949 } )
5050
51- const [ sortOption , setSortOption ] = useState ( 'osInfo.name' )
51+ function compareSlotStereotypes ( a : NodeInfo , b : NodeInfo , attribute : string ) : number {
52+ const joinA = a . slotStereotypes . length === 1
53+ ? a . slotStereotypes [ 0 ] [ attribute ]
54+ : a . slotStereotypes . slice ( ) . map ( st => st [ attribute ] ) . reverse ( ) . join ( ',' )
55+ const joinB = b . slotStereotypes . length === 1
56+ ? b . slotStereotypes [ 0 ] [ attribute ]
57+ : b . slotStereotypes . slice ( ) . map ( st => st [ attribute ] ) . reverse ( ) . join ( ',' )
58+ return joinA . localeCompare ( joinB )
59+ }
60+
61+ const sortProperties = {
62+ 'platformName' : ( a , b ) => compareSlotStereotypes ( a , b , 'platformName' ) ,
63+ 'status' : ( a , b ) => a . status . localeCompare ( b . status ) ,
64+ 'browserName' : ( a , b ) => compareSlotStereotypes ( a , b , 'browserName' ) ,
65+ 'browserVersion' : ( a , b ) => compareSlotStereotypes ( a , b , 'browserVersion' ) ,
66+ 'slotCount' : ( a , b ) => {
67+ const valueA = a . slotStereotypes . reduce ( ( sum , st ) => sum + st . slotCount , 0 )
68+ const valueB = b . slotStereotypes . reduce ( ( sum , st ) => sum + st . slotCount , 0 )
69+ return valueA < valueB ? - 1 : 1
70+ } ,
71+ 'id' : ( a , b ) => ( a . id < b . id ? - 1 : 1 )
72+ }
73+
74+ const sortPropertiesLabel = {
75+ 'platformName' : 'Platform Name' ,
76+ 'status' : 'Status' ,
77+ 'browserName' : 'Browser Name' ,
78+ 'browserVersion' : 'Browser Version' ,
79+ 'slotCount' : 'Slot Count' ,
80+ 'id' : 'ID'
81+ }
82+
83+ const [ sortOption , setSortOption ] = useState ( Object . keys ( sortProperties ) [ 0 ] )
5284 const [ sortOrder , setSortOrder ] = useState ( 1 )
5385 const [ sortedNodes , setSortedNodes ] = useState < NodeInfo [ ] > ( [ ] )
5486 const [ isDescending , setIsDescending ] = useState ( false )
@@ -62,12 +94,6 @@ function Overview (): JSX.Element {
6294 setSortOrder ( event . target . checked ? - 1 : 1 )
6395 }
6496
65- const sortProperties = {
66- 'osInfo.name' : ( a , b ) => a . osInfo . name . localeCompare ( b . osInfo . name ) ,
67- 'status' : ( a , b ) => a . status . localeCompare ( b . status ) ,
68- 'id' : ( a , b ) => ( a . id < b . id ? - 1 : 1 )
69- }
70-
7197 const sortNodes = useMemo ( ( ) => {
7298 return ( nodes : NodeInfo [ ] , option : string , order : number ) => {
7399 const sortFn = sortProperties [ option ] || ( ( ) => 0 )
@@ -156,10 +182,12 @@ function Overview (): JSX.Element {
156182 < InputLabel > Sort By</ InputLabel >
157183 < Box display = "flex" alignItems = "center" >
158184 < Select value = { sortOption } onChange = { handleSortChange }
159- label = "Sort By" style = { { minWidth : '150px' } } >
160- < MenuItem value = "osInfo.name" > Platform</ MenuItem >
161- < MenuItem value = "status" > Status</ MenuItem >
162- < MenuItem value = "id" > ID</ MenuItem >
185+ label = "Sort By" style = { { minWidth : '170px' } } >
186+ { Object . keys ( sortProperties ) . map ( ( key ) => (
187+ < MenuItem value = { key } >
188+ { sortPropertiesLabel [ key ] }
189+ </ MenuItem >
190+ ) ) }
163191 </ Select >
164192 < FormControlLabel
165193 control = { < Checkbox checked = { isDescending }
0 commit comments