[grid] UI Sessions capability fields to display as additional columns

Signed-off-by: Viet Nguyen Duc <[email protected]>

Author: VietND96

javascript/grid-ui/src/components/RunningSessions/ColumnSelector.tsx

@@ -0,0 +1,180 @@
+/*
+ * Licensed to the Software Freedom Conservancy (SFC) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The SFC licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useEffect } from 'react'
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  FormGroup,
+  IconButton,
+  Tooltip,
+  Typography
+} from '@mui/material'
+import { ViewColumn as ViewColumnIcon } from '@mui/icons-material'
+
+interface ColumnSelectorProps {
+  sessions: any[]
+  selectedColumns: string[]
+  onColumnSelectionChange: (columns: string[]) => void
+}
+
+const ColumnSelector: React.FC<ColumnSelectorProps> = ({
+  sessions,
+  selectedColumns,
+  onColumnSelectionChange
+}) => {
+  const [open, setOpen] = useState(false)
+  const [availableColumns, setAvailableColumns] = useState<string[]>([])
+  const [localSelectedColumns, setLocalSelectedColumns] = useState<string[]>(selectedColumns)
+
+  useEffect(() => {
+    setLocalSelectedColumns(selectedColumns)
+  }, [selectedColumns])
+
+  useEffect(() => {
+    let allKeys = new Set<string>()
+    try {
+      const savedKeys = localStorage.getItem('selenium-grid-all-capability-keys')
+      if (savedKeys) {
+        const parsedKeys = JSON.parse(savedKeys)
+        parsedKeys.forEach((key: string) => allKeys.add(key))
+      }
+    } catch (e) {
+      console.error('Error loading saved capability keys:', e)
+    }
+
+    sessions.forEach(session => {
+      try {
+        const capabilities = JSON.parse(session.capabilities)
+        Object.keys(capabilities).forEach(key => {
+          if (
+            typeof capabilities[key] !== 'object' &&
+            !key.startsWith('goog:') &&
+            !key.startsWith('moz:') &&
+            key !== 'alwaysMatch' &&
+            key !== 'firstMatch'
+          ) {
+            allKeys.add(key)
+          }
+        })
+      } catch (e) {
+        console.error('Error parsing capabilities:', e)
+      }
+    })
+
+    const keysArray = Array.from(allKeys).sort()
+    localStorage.setItem('selenium-grid-all-capability-keys', JSON.stringify(keysArray))
+
+    setAvailableColumns(keysArray)
+  }, [sessions])
+
+  const handleToggle = (column: string) => {
+    setLocalSelectedColumns(prev => {
+      if (prev.includes(column)) {
+        return prev.filter(col => col !== column)
+      } else {
+        return [...prev, column]
+      }
+    })
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleSave = () => {
+    onColumnSelectionChange(localSelectedColumns)
+    setOpen(false)
+  }
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setLocalSelectedColumns([...availableColumns])
+    } else {
+      setLocalSelectedColumns([])
+    }
+  }
+
+  return (
+    <Box>
+      <Tooltip title="Select columns to display" arrow placement="top">
+        <IconButton
+          aria-label="select columns"
+          onClick={() => setOpen(true)}
+        >
+          <ViewColumnIcon />
+        </IconButton>
+      </Tooltip>
+
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>
+          Select Columns to Display
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography variant="body2" gutterBottom>
+            Select capability fields to display as additional columns:
+          </Typography>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={localSelectedColumns.length === availableColumns.length && availableColumns.length > 0}
+                  indeterminate={localSelectedColumns.length > 0 && localSelectedColumns.length < availableColumns.length}
+                  onChange={(e) => handleSelectAll(e.target.checked)}
+                />
+              }
+              label={<Typography fontWeight="bold">Select All / Unselect All</Typography>}
+            />
+            {availableColumns.map(column => (
+              <FormControlLabel
+                key={column}
+                control={
+                  <Checkbox
+                    checked={localSelectedColumns.includes(column)}
+                    onChange={() => handleToggle(column)}
+                  />
+                }
+                label={column}
+              />
+            ))}
+          </FormGroup>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleSave} variant="contained" color="primary">
+            Apply
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default ColumnSelector

javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx

@@ -51,6 +51,7 @@ import { Size } from '../../models/size'
 import LiveView from '../LiveView/LiveView'
 import SessionData, { createSessionData } from '../../models/session-data'
 import { useNavigate } from 'react-router-dom'
+import ColumnSelector from './ColumnSelector'
 
 function descendingComparator<T> (a: T, b: T, orderBy: keyof T): number {
   if (orderBy === 'sessionDurationMillis') {
@@ -94,7 +95,7 @@ interface HeadCell {
   numeric: boolean
 }
 
-const headCells: HeadCell[] = [
+const fixedHeadCells: HeadCell[] = [
   { id: 'id', numeric: false, label: 'Session' },
   { id: 'capabilities', numeric: false, label: 'Capabilities' },
   { id: 'startTime', numeric: false, label: 'Start time' },
@@ -107,10 +108,11 @@ interface EnhancedTableProps {
     property: keyof SessionData) => void
   order: Order
   orderBy: string
+  headCells: HeadCell[]
 }
 
 function EnhancedTableHead (props: EnhancedTableProps): JSX.Element {
-  const { order, orderBy, onRequestSort } = props
+  const { order, orderBy, onRequestSort, headCells } = props
   const createSortHandler = (property: keyof SessionData) => (event: React.MouseEvent<unknown>) => {
     onRequestSort(event, property)
   }
@@ -181,6 +183,16 @@ function RunningSessions (props) {
   const [rowsPerPage, setRowsPerPage] = useState(10)
   const [searchFilter, setSearchFilter] = useState('')
   const [searchBarHelpOpen, setSearchBarHelpOpen] = useState(false)
+  const [selectedColumns, setSelectedColumns] = useState<string[]>(() => {
+    try {
+      const savedColumns = localStorage.getItem('selenium-grid-selected-columns')
+      return savedColumns ? JSON.parse(savedColumns) : []
+    } catch (e) {
+      console.error('Error loading saved columns:', e)
+      return []
+    }
+  })
+  const [headCells, setHeadCells] = useState<HeadCell[]>(fixedHeadCells)
   const liveViewRef = useRef(null)
   const navigate = useNavigate()
 
@@ -264,8 +276,27 @@ function RunningSessions (props) {
 
   const { sessions, origin, sessionId } = props
 
+  const getCapabilityValue = (capabilitiesStr: string, key: string): string => {
+    try {
+      const capabilities = JSON.parse(capabilitiesStr as string)
+      const value = capabilities[key]
+      
+      if (value === undefined || value === null) {
+        return ''
+      }
+      
+      if (typeof value === 'object') {
+        return JSON.stringify(value)
+      }
+      
+      return String(value)
+    } catch (e) {
+      return ''
+    }
+  }
+
   const rows = sessions.map((session) => {
-    return createSessionData(
+    const sessionData = createSessionData(
       session.id,
       session.capabilities,
       session.startTime,
@@ -276,6 +307,12 @@ function RunningSessions (props) {
       session.slot,
       origin
     )
+    
+    selectedColumns.forEach(column => {
+      sessionData[column] = getCapabilityValue(session.capabilities, column)
+    })
+    
+    return sessionData
   })
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage)
 
@@ -291,19 +328,39 @@ function RunningSessions (props) {
       setRowLiveViewOpen(s)
     }
   }, [sessionId, sessions])
+  
+  useEffect(() => {
+    const dynamicHeadCells = selectedColumns.map(column => ({
+      id: column,
+      numeric: false,
+      label: column
+    }))
+    
+    setHeadCells([...fixedHeadCells, ...dynamicHeadCells])
+  }, [selectedColumns])
 
   return (
     <Box width='100%'>
       {rows.length > 0 && (
         <div>
           <Paper sx={{ width: '100%', marginBottom: 2 }}>
             <EnhancedTableToolbar title='Running'>
-              <RunningSessionsSearchBar
-                searchFilter={searchFilter}
-                handleSearch={setSearchFilter}
-                searchBarHelpOpen={searchBarHelpOpen}
-                setSearchBarHelpOpen={setSearchBarHelpOpen}
-              />
+              <Box display="flex" alignItems="center">
+                <ColumnSelector 
+                  sessions={sessions}
+                  selectedColumns={selectedColumns}
+                  onColumnSelectionChange={(columns) => {
+                    setSelectedColumns(columns)
+                    localStorage.setItem('selenium-grid-selected-columns', JSON.stringify(columns))
+                  }}
+                />
+                <RunningSessionsSearchBar
+                  searchFilter={searchFilter}
+                  handleSearch={setSearchFilter}
+                  searchBarHelpOpen={searchBarHelpOpen}
+                  setSearchBarHelpOpen={setSearchBarHelpOpen}
+                />
+              </Box>
             </EnhancedTableToolbar>
             <TableContainer>
               <Table
@@ -316,6 +373,7 @@ function RunningSessions (props) {
                   order={order}
                   orderBy={orderBy}
                   onRequestSort={handleRequestSort}
+                  headCells={headCells}
                 />
                 <TableBody>
                   {stableSort(rows, getComparator(order, orderBy))
@@ -494,6 +552,10 @@ function RunningSessions (props) {
                           <TableCell align='left'>
                             {row.nodeUri}
                           </TableCell>
+                          {/* Add dynamic columns */}
+                          {selectedColumns.map(column => (
+                            <TableCell key={column} align='left'>{row[column]}</TableCell>
+                          ))}
                         </TableRow>
                       )
                     })}

javascript/grid-ui/src/models/session-data.ts

@@ -33,6 +33,7 @@ interface SessionData {
   slot: any
   vnc: string
   name: string
+  [key: string]: any
 }
 
 export function createSessionData (