HPCC-25201 Add React Activities

[GordonSmith]

Signed-off-by Gordon Smith GordonJSmith@gmail.com

Type of change:

• This change is a bug fix (non-breaking change which fixes an issue).
• This change is a new feature (non-breaking change which adds functionality).
• This change improves the code (refactor or other change that does not change the functionality)
• This change fixes warnings (the fix does not alter the functionality or the generated code)
• This change is a breaking change (fix or feature that will cause existing behavior to change).
• This change alters the query API (existing queries will have to be recompiled)

Checklist:

• My code follows the code style of this project.
  • My code does not create any new warnings from compiler, build system, or lint.
• The commit message is properly formatted and free of typos.
  • The commit message title makes sense in a changelog, by itself.
  • The commit is signed.
• My change requires a change to the documentation.
  • I have updated the documentation accordingly, or...
  • I have created a JIRA ticket to update the documentation.
  • Any new interfaces or exported functions are appropriately commented.
• I have read the CONTRIBUTORS document.
• The change has been fully tested:
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have checked that this change does not introduce memory leaks.
  • I have used Valgrind or similar tools to check for potential issues.
• I have given due consideration to all of the following potential concerns:
  • Scalability
  • Performance
  • Security
  • Thread-safety
  • Cloud-compatibility
  • Premature optimization
  • Existing deployed queries will not be broken
  • This change fixes the problem, not just the symptom
  • The target branch of this pull request is appropriate for such a change.
• There are no similar instances of the same problem that should be addressed
  • I have addressed them here
  • I have raised JIRA issues to address them separately
• This is a user interface / front-end modification
  • I have tested my changes in multiple modern browsers
  • The component(s) render as expected

Smoketest:

• Send notifications about my Pull Request position in Smoketest queue.
• Test my draft Pull Request.

Testing:

[github-actions]

Jira Issue: https://hpccsystems.atlassian.net//browse/HPCC-25201

Jirabot Action Result:
Workflow Transition To: Merge Pending
Additional PR: #20356

[Copilot]

Pull Request Overview

This PR adds React-based Activities component cards as a preview feature to the ECL Watch web interface. It introduces new card-based visualizations for activities, disk usage, and queue management alongside the existing activities view.

• Adds new /activities-preview route with React card-based UI components
• Implements reusable card components for queues, disk usage, and activities
• Extracts shared utility functions from ESPDFUWorkunit for better code reuse

Reviewed Changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
esp/src/tests/v9-activities-preview.spec.ts	Adds Playwright tests for the new activities preview page
esp/src/tests/test-wus.json	Removes test workunit configuration file
esp/src/src/ESPDFUWorkunit.ts	Extracts state and protection image utility functions for reuse
esp/src/src/DiskUsage.ts	Adds ClusterGauge class for disk usage visualization
esp/src/src-react/util/metricGraph.ts	Updates CSS import path for React styling
esp/src/src-react/routes.tsx	Adds new activities-preview route
esp/src/src-react/hooks/queue.ts	Implements queue management hooks and types
esp/src/src-react/hooks/index.ts	Exports new queue hooks
esp/src/src-react/hooks/diskUsage.ts	Adds disk usage data hooks
esp/src/src-react/hooks/banner.tsx	Updates activity hook usage pattern
esp/src/src-react/hooks/activity.ts	Refactors activity hook return value and improves type safety
esp/src/src-react/components/controls/OverflowMenu.tsx	Enhances menu button styling
esp/src/src-react/components/controls/FlatTreeEx.tsx	Updates React.FC to React.FunctionComponent
esp/src/src-react/components/cards/QueueCard.tsx	Implements queue management card component
esp/src/src-react/components/cards/GenericCard.tsx	Creates reusable card component foundation
esp/src/src-react/components/cards/DiskUsageCard.tsx	Implements disk usage visualization cards
esp/src/src-react/components/cards/CardGroup.tsx	Creates grid layout component for cards
esp/src/src-react/components/Menu.tsx	Adds activities preview menu item
esp/src/src-react/components/DiskUsage.tsx	Refactors disk usage component to use cards
esp/src/src-react/components/ActivitiesCards.tsx	Implements main activities preview page
esp/src/src-dojo/nls/hpcc.ts	Adds new localization strings
esp/src/.gitignore	Adds test-wus.json to gitignore
esp/src/.github/instructions/react-coding.instructions.md	Updates React component type preference

[GordonSmith]

@jeclrsg this is the same PR as previously, except its a tech preview rather than marking the other as legacy.

[jeclrsg]

@GordonSmith looked good. All my comments were just nitpicks. Copilot still had a comment that was unaddressed. Don't remember which file, but it was just suggesting includes() over indexOf() somewhere

[jeclrsg]

add an enum for these ints? or is there such a thing already somewhere in comms maybe?

[jeclrsg]

@GordonSmith I added a nitpick comment about a duplicate import I didn't notice earlier, but also just going ahead and marking as approved

[github-actions]

Jirabot Action Result:
Added fix version: 9.8.120
Added fix version: 9.10.66
Added fix version: 9.12.40
Added fix version: 9.14.22
Workflow Transition: 'Resolve issue'