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

Signed-off-by: Viet Nguyen Duc <nguyenducviet4496@gmail.com>

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 (