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

[VietND96]

User description

🔗 Related Issues

Fixes #15599

💥 What does this PR do?

Enhances the Sessions view in Selenium Grid UI to support additional dynamic columns that can be selected from a list of checkboxes. These columns display values parsed from the merged running sessions capabilities JSON data, and users can sort the table by clicking on the column headers.

Dialog for selecting additional dynamic columns

After selected

When all columns are selected, horizontal scrolling is enabled

🔧 Implementation Notes

• Dynamic Column Selection: Added a new ColumnSelector component with a dialog that allows users to select which capability fields to display as additional columns.
• Automatic Capability Detection: The component automatically detects available capability keys from session data and presents them as selectable options.
• Dynamic Table Rendering: Modified the RunningSessions component to render the selected columns dynamically in the table.
• Sorting Support: The implementation leverages the existing sorting mechanism to support sorting by the dynamic columns.
• Data Extraction: Added logic to parse the capabilities JSON and extract values for the selected columns, with special handling for different data types.

💡 Additional Considerations

🔄 Types of changes

• Cleanup (formatting, renaming)
• Bug fix (backwards compatible)
• New feature (non-breaking change which adds functionality and tests!)
• Breaking change (fix or feature that would cause existing functionality to change)

---

PR Type

Enhancement

---

Description

• Added dynamic column selection for sessions table.

• Implemented ColumnSelector component with dialog UI.

• Persisted selected columns and capability keys in localStorage.

• Enabled sorting and display of custom capability columns.

---

Changes walkthrough 📝

Relevant files

Enhancement

ColumnSelector.tsx Add ColumnSelector component for dynamic session columns  javascript/grid-ui/src/components/RunningSessions/ColumnSelector.tsx Introduced new ColumnSelector component for dynamic column selection. Implements dialog UI for selecting capability fields as columns. Handles persistence of selected columns and available keys in localStorage. Provides select all/unselect all functionality. +180/-0  RunningSessions.tsx Integrate dynamic columns and selection into sessions table javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx Integrated ColumnSelector into RunningSessions toolbar. Added logic to extract and display selected capability columns. Persisted user column selections and capability keys. Updated table head and body to support dynamic columns and sorting. +71/-9    session-data.ts Allow dynamic properties in SessionData interface                javascript/grid-ui/src/models/session-data.ts Extended SessionData interface to allow dynamic keys. +1/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The error handling for parsing capabilities is minimal. The component catches errors but only logs them to console without providing user feedback when capabilities parsing fails. } catch (e) { console.error('Error parsing capabilities:', e) } Table Responsiveness The implementation adds dynamic columns but doesn't address potential UI issues when many columns are selected. While horizontal scrolling is mentioned in the PR description, the code doesn't show explicit handling for responsive design concerns. {selectedColumns.map(column => ( <TableCell key={column} align='left'>{row[column]}</TableCell> ))}

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix table layout issue The colSpan value is hardcoded to 6, but with dynamic columns added through the column selector, this should be updated to match the total number of columns. This prevents layout issues when empty rows are displayed. javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx [563-564] <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}> - <TableCell colSpan={6} /> + <TableCell colSpan={6 + selectedColumns.length} /> Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the colSpan should dynamically reflect the number of columns, including those added by the user, to prevent layout issues with empty rows. This is a relevant and accurate improvement, though not critical.	Medium
General	Include all capability types The current implementation excludes all object-type capabilities, but some object values might be useful to display as stringified JSON. Consider allowing object values but stringify them when displaying in the table. javascript/grid-ui/src/components/RunningSessions/ColumnSelector.tsx [68-85] 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) } }) Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion proposes including all capability keys, even those with object values, which could enhance flexibility for users wanting to display more complex data. However, this change may introduce clutter or less readable columns, so its impact is moderate.	Low
Update

[qodo-merge-pro]

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: Format / Check format script run

Failed stage: Run Bazel [❌]

Failure summary: The action failed because there appears to be a license header inconsistency in the codebase. The log shows that the system was adding license notices to numerous files (lines 2561-3033), but then encountered an issue around line 3099-3101. The error occurs where there are two different license headers present in the same file - one for Apache License 2.0 (lines 3087-3096) and another for Software Freedom Conservancy (SFC) (lines 3099-3101). This inconsistency in license headers caused the process to exit with code 1.

Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 947: Package 'php-sql-formatter' is not installed, so not removed 948: Package 'php8.3-ssh2' is not installed, so not removed 949: Package 'php-ssh2-all-dev' is not installed, so not removed 950: Package 'php8.3-stomp' is not installed, so not removed 951: Package 'php-stomp-all-dev' is not installed, so not removed 952: Package 'php-swiftmailer' is not installed, so not removed 953: Package 'php-symfony' is not installed, so not removed 954: Package 'php-symfony-asset' is not installed, so not removed 955: Package 'php-symfony-asset-mapper' is not installed, so not removed 956: Package 'php-symfony-browser-kit' is not installed, so not removed 957: Package 'php-symfony-clock' is not installed, so not removed 958: Package 'php-symfony-debug-bundle' is not installed, so not removed 959: Package 'php-symfony-doctrine-bridge' is not installed, so not removed 960: Package 'php-symfony-dom-crawler' is not installed, so not removed 961: Package 'php-symfony-dotenv' is not installed, so not removed 962: Package 'php-symfony-error-handler' is not installed, so not removed 963: Package 'php-symfony-event-dispatcher' is not installed, so not removed ... 1141: Package 'php-twig-html-extra' is not installed, so not removed 1142: Package 'php-twig-i18n-extension' is not installed, so not removed 1143: Package 'php-twig-inky-extra' is not installed, so not removed 1144: Package 'php-twig-intl-extra' is not installed, so not removed 1145: Package 'php-twig-markdown-extra' is not installed, so not removed 1146: Package 'php-twig-string-extra' is not installed, so not removed 1147: Package 'php8.3-uopz' is not installed, so not removed 1148: Package 'php-uopz-all-dev' is not installed, so not removed 1149: Package 'php8.3-uploadprogress' is not installed, so not removed 1150: Package 'php-uploadprogress-all-dev' is not installed, so not removed 1151: Package 'php8.3-uuid' is not installed, so not removed 1152: Package 'php-uuid-all-dev' is not installed, so not removed 1153: Package 'php-validate' is not installed, so not removed 1154: Package 'php-vlucas-phpdotenv' is not installed, so not removed 1155: Package 'php-voku-portable-ascii' is not installed, so not removed 1156: Package 'php-wmerrors' is not installed, so not removed 1157: Package 'php-xdebug-all-dev' is not installed, so not removed ... 1895: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/example/headless.js 5ms (unchanged) 1896: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/example/logging.js 6ms (unchanged) 1897: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/firefox.js 32ms (unchanged) 1898: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/http/index.js 19ms (unchanged) 1899: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/http/util.js 6ms (unchanged) 1900: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/ie.js 13ms (unchanged) 1901: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/index.js 24ms (unchanged) 1902: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/io/exec.js 7ms (unchanged) 1903: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/io/index.js 14ms (unchanged) 1904: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/io/zip.js 8ms (unchanged) 1905: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/jsdoc_conf.json 2ms (unchanged) 1906: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/atoms/make-atoms-module.js 3ms (unchanged) 1907: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/by.js 20ms (unchanged) 1908: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/capabilities.js 23ms (unchanged) 1909: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/command.js 11ms (unchanged) 1910: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/error.js 22ms (unchanged) 1911: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/lib/fedcm/account.js 4ms (unchanged) ... 1980: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/fingerprint_test.js 4ms (unchanged) 1981: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/firefox/addon_test.js 8ms (unchanged) 1982: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/firefox/contextSwitching_test.js 4ms (unchanged) 1983: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/firefox/full_page_screenshot_test.js 3ms (unchanged) 1984: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/firefox/options_test.js 15ms (unchanged) 1985: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/frame_test.js 5ms (unchanged) 1986: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/http/http_test.js 14ms (unchanged) 1987: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/http/util_test.js 7ms (unchanged) 1988: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/ie/options_test.js 5ms (unchanged) 1989: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/io/io_test.js 29ms (unchanged) 1990: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/io/zip_test.js 11ms (unchanged) 1991: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/api_test.js 2ms (unchanged) 1992: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/by_test.js 7ms (unchanged) 1993: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/capabilities_test.js 15ms (unchanged) 1994: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/credentials_test.js 10ms (unchanged) 1995: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/error_test.js 11ms (unchanged) 1996: ../../../../../../../../../../work/selenium/selenium/javascript/selenium-webdriver/test/lib/form_submit_test.js 3ms (unchanged) ... 2561: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomDriverConfigs/NightlyChannelFirefoxDriver.cs 2562: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Session/CapabilitiesRequest.cs 2563: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Communication/Json/Converters/Polymorphic/RemoteValueConverter.cs 2564: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/DevTools/DevToolsTargetTest.cs 2565: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomTestAttributes/IgnoreTargetAttribute.cs 2566: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomDriverConfigs/DevChannelChromeDriver.cs 2567: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/WebSocketConnectionDataReceivedEventArgs.cs 2568: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/TestUtilities.cs 2569: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/INavigation.cs 2570: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Communication/Json/Converters/DateTimeOffsetConverter.cs 2571: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/NotFoundException.cs 2572: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Interactions/IAction.cs 2573: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/Input/DefaultMouseTest.cs 2574: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/ElementSelectingTest.cs 2575: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomDriverConfigs/DefaultSafariDriver.cs 2576: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/UnknownErrorException.cs 2577: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/PartialLinkTextMatchTest.cs 2578: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/BrowsingContext/BrowsingContextTest.cs 2579: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/WebDriverError.cs 2580: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/PasswordCredentials.cs ... 2647: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/support/UI/SlowLoadableComponent{T}.cs 2648: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/v136/V136JavaScript.cs 2649: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Communication/Json/Converters/PreloadScriptConverter.cs 2650: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/CommandInfo.cs 2651: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/v134/V134Domains.cs 2652: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/AuthRequiredEventArgs.cs 2653: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Remote/RemoteSessionSettings.cs 2654: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/Browser/BrowserTest.cs 2655: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/IE/InternetExplorerDriverService.cs 2656: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Internal/Logging/Logger.cs 2657: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/BrowsingContext/BrowsingContextStorageModule.cs 2658: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/support/UI/LoadableComponentException.cs 2659: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/Interactions/BasicKeyboardInterfaceTest.cs 2660: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Script/LocalValue.cs 2661: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/Script/CallFunctionParameterTest.cs 2662: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/ErrorResponse.cs 2663: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/BrowsingContext/UserPromptOpenedEventArgs.cs ... 2669: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomTestAttributes/IgnorePlatformAttribute.cs 2670: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/OptionsManager.cs 2671: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Chrome/ChromeDriver.cs 2672: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/Script/CallFunctionLocalValueTest.cs 2673: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Network/AuthCredentials.cs 2674: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/BrowsingContext/CloseCommand.cs 2675: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Firefox/FirefoxDriver.cs 2676: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/ConsoleApiArgument.cs 2677: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/ISearchContext.cs 2678: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/Interactions/BasicMouseInterfaceTest.cs 2679: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/ElementPropertyTest.cs 2680: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Communication/Json/Converters/Enumerable/LocateNodesResultConverter.cs 2681: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Internal/Logging/ILogHandler.cs 2682: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Network/ResponseContent.cs 2683: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Script/ScriptModule.cs 2684: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Network/FetchErrorEventArgs.cs 2685: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Network/AddInterceptCommand.cs ... 3017: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Firefox/FirefoxAndroidOptions.cs 3018: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/v136/V136Domains.cs 3019: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Network/SetCacheBehaviorCommand.cs 3020: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DevTools/v135/V135Target.cs 3021: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/ElementEqualityTest.cs 3022: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Script/RealmDestroyedEventArgs.cs 3023: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/CustomDriverConfigs/EdgeInternetExplorerModeDriver.cs 3024: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/BiDi/Network/NetworkEventsTest.cs 3025: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Script/WindowProxyProperties.cs 3026: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/support/Events/EventFiringWebDriverElementTest.cs 3027: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/IAlert.cs 3028: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/Internal/Logging/LogContextManager.cs 3029: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/Environment/TestEnvironment.cs 3030: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/DriverOptionsMergeResult.cs 3031: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/BiDi/Modules/Script/NodeProperties.cs 3032: Adding notice to /home/runner/work/selenium/selenium/dotnet/test/common/ErrorsTest.cs 3033: Adding notice to /home/runner/work/selenium/selenium/dotnet/src/webdriver/GlobalSuppressions.cs ... 3087: +// with the License. You may obtain a copy of the License at 3088: +// 3089: +// http://www.apache.org/licenses/LICENSE-2.0 3090: +// 3091: +// Unless required by applicable law or agreed to in writing, 3092: +// software distributed under the License is distributed on an 3093: +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 3094: +// KIND, either express or implied. See the License for the 3095: +// specific language governing permissions and limitations 3096: +// under the License. 3097: + 3098: + 3099: /* 3100: * Licensed to the Software Freedom Conservancy (SFC) under one 3101: * or more contributor license agreements. See the NOTICE file 3102: ##[error]Process completed with exit code 1. 3103: Post job cleanup.

[adrian-tarau]

@ VietND96, feature-wise, it looks great, goes beyond my request, and everybody will find this feature useful. A few questions/suggestions, since it is not clear based on the code (also, not a React dev):

• The Session column will display se:name, if present; otherwise, it will fall back to the session ID, right?
• Not clear if it will discover custom nested properties?

"namespace:options": {
    "hostname": "XXXX",
    "category": "YYYY",
    ....
  }

• Since these properties are displayed in the UI, it would be nice to beautify them. They are namespaced and use camel case, and could be displayed as labels: browserName -> Browser Name, browserVersion: Browser Version, etc.

[diemol]

I'd like to see some component tests for the new component.

[VietND96]

@adrian-tarau,

The Session column will display se:name, if present; otherwise, it will fall back to the session ID

Yes, this feature has existed for a long time. With this change, now you can have a separate column of se:name

Since these properties are displayed in the UI, it would be nice to beautify them. They are namespaced and use camel case, and could be displayed as labels: browserName -> Browser Name, browserVersion: Browser Version, etc.

For key with simple string, we can beautify it, but I am wondering on few cases with prefix se:bidiEnabled or nested properties. So, in a generic way, I think we can keep the original value, it would be fine for user to compare and search against capabilities. @diemol, what do you think?

[diemol]

I think this is good as it is, we can always iterate based on feedback.

I am more concerned about having tests running in our CI for this.

[adrian-tarau]

I was not aware that the Session column can use se:name :) Beautified properties would be more user-friendly: make the first letter uppercase and add a space for every lower case -> upper case. Some properties would not be as beautiful, but most will be.

Anyway, beautification aside, the feature is very nice, thanks.