CONSOLE-5044: TypeScript port of events.jsx

[logonoff]

Convert events.jsx to TypeScript with the following improvements:

• Replace PropTypes with TypeScript interfaces
• Replace defaultProps with default parameters
• Replace connectToFlags HOC with useFlag hook
• Add proper type annotations for all components and functions

Summary by CodeRabbit

• Refactor
  • Enhanced code quality with comprehensive TypeScript typing improvements to event-related components and utilities.
  • Modernized component signatures with explicit type definitions for better maintainability.
  • Replaced legacy type validation with native TypeScript support.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5044 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the sub-task to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Convert events.jsx to TypeScript with the following improvements:

• Replace PropTypes with TypeScript interfaces
• Replace defaultProps with default parameters
• Replace connectToFlags HOC with useFlag hook
• Add proper type annotations for all components and functions

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request applies TypeScript type safety improvements to the events subsystem in the OpenShift Console frontend. Changes include converting untyped event-related helpers and components to strongly-typed functions and React functional components using explicit TypeScript interfaces. PropTypes usage was replaced with native TypeScript type definitions, and the standalone namespaceProptype validator was removed. Component signatures were standardized using the FC<Props> pattern across Actions, Inner, EventsList, NoEvents, NoMatchingEvents, ErrorLoadingEvents, and EventStreamPage. The EventStream logic was refactored to use a typed EventKind model with additional event-stream wrapper components typed accordingly.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective: converting the events module from JavaScript to TypeScript with proper type annotations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5044 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the sub-task to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Convert events.jsx to TypeScript with the following improvements:

• Replace PropTypes with TypeScript interfaces
• Replace defaultProps with default parameters
• Replace connectToFlags HOC with useFlag hook
• Add proper type annotations for all components and functions

Summary by CodeRabbit

• Refactor
• Enhanced code quality with comprehensive TypeScript typing improvements to event-related components and utilities.
• Modernized component signatures with explicit type definitions for better maintainability.
• Replaced legacy type validation with native TypeScript support.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

frontend/public/components/events.tsx (2)

187-254: Guard optional source/host to avoid runtime crashes.

Events from the newer API can omit source; direct access to source.component/source.host can throw and break rendering. Add optional guards and a fallback for missing host.

🐛 Safer handling for optional source fields

   const { involvedObject: obj, source, message, reason, series, reportingComponent } = event;
+  const sourceComponent = source?.component ?? reportingComponent;
+  const sourceHost = source?.host;

-  const component = source.component ? source.component : reportingComponent;
+  const component = sourceComponent;

-              {component === 'kubelet' && canListNode && (
+              {component === 'kubelet' && sourceHost && canListNode && (
                 <Trans ns="public">
                   Generated from {{ sourceComponent: component }} on{' '}
-                  <Link to={resourcePathFromModel(NodeModel, source.host)}>
-                    {{ sourceHost: source.host }}
+                  <Link to={resourcePathFromModel(NodeModel, sourceHost)}>
+                    {{ sourceHost }}
                   </Link>
                 </Trans>
               )}
               {component === 'kubelet' &&
-                !canListNode &&
+                sourceHost &&
+                !canListNode &&
                 t('Generated from {{ sourceComponent }} on {{ sourceHost }}', {
                   sourceComponent: component,
-                  sourceHost: source.host,
+                  sourceHost,
                 })}
+              {component === 'kubelet' &&
+                !sourceHost &&
+                t('Generated from {{ sourceComponent }}', {
+                  sourceComponent: component,
+                })}

---

369-459: Clear loading state in mock mode to avoid a permanent spinner.

When mock is true, loading never flips to false, so NoEvents is overridden by the loading state.

🐛 Ensure mock mode clears loading state

   useEffect(() => {
     ws.current?.destroy();
     setSortedEvents([]);
+    if (mock) {
+      setLoading(false);
+      setError(false);
+      return;
+    }
     if (!mock) {
       const webSocketID = `${namespace || 'all'}-sysevents`;
       const watchURLOptions = {

[openshift-ci]

@logonoff: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[logonoff]

/label px-approved
/label px-approved

[logonoff]

/label docs-approved