Merge pull request openshift#14113 from Lucifergene/OCPBUGS-37584-Cro…

…njob-crash-UI

OCPBUGS-37584: Topology screen crashes when completed pod is selected

frontend/packages/topology/integration-tests/features/topology/topology-workload-sidebar.feature

@@ -86,3 +86,14 @@ Feature: Sidebar in topology
  And user enters key as "app.openshift.io/route-disabled"
  And user enters value as "true"
  Then user can see route decorator has been hidden for workload "nodejs-ex-3"
+
+
+ @regression @OCPBUGS-37584
+ Scenario: CronJob Sidebar Details: T-14-TC08
+ Given user applies cronjob YAML
+ Then user will see cron job with name "hello" on topology page
+ And user clicks on workload "hello" to open sidebar
+ And user can see sidebar Details, Resources tabs
+ And user verifies name of the node "hello" and Action drop down present on top of the sidebar
+ And user verifies "Jobs" section is visible
+ And user verifies "Pods" section is visible

frontend/packages/topology/integration-tests/support/step-definitions/topology/workload-sidebar.ts

@@ -161,6 +161,10 @@ Then('user can see show waiting pods with errors', () => {
  cy.get(topologyPO.sidePane.resourcesTab.waitingPods).should('be.visible');
 });
 
+Then('user verifies {string} section is visible', (workload: string) => {
+ topologySidePane.verifySection(workload);
+});
+
 Then('user can see traffic details for pod', () => {
  topologySidePane.selectTab('Resources');
  topologySidePane.verifySection('Pods');

frontend/packages/topology/integration-tests/testData/yamls/create-cronjob.yaml

@@ -0,0 +1,20 @@
+apiVersion: batch/v1
+kind: CronJob
+metadata:
+ name: hello
+ namespace: aut-topology-sidebar
+spec:
+ schedule: '* * * * *'
+ jobTemplate:
+ spec:
+ template:
+ spec:
+ containers:
+ - name: hello
+ image: busybox:1.28
+ imagePullPolicy: IfNotPresent
+ command:
+ - /bin/sh
+ - -c
+ - date; echo Hello from the Kubernetes cluster
+ restartPolicy: OnFailure

frontend/packages/topology/src/components/workload/pods-tab-section.tsx

@@ -24,9 +24,17 @@ const PodsTabSection: React.FC<{
  loaded: boolean;
  }>({ loaded: false });
 
- const handleAdapterResolved = React.useCallback((data) => {
- setPodData({ data, loaded: true });
- }, []);
+ const handleAdapterResolved = React.useCallback(
+ (data) => {
+ if (podAdapter?.resource?.kind === 'CronJob') {
+ // Fixes the issue of Topology page crashing.
+ setTimeout(() => setPodData({ data, loaded: true }), 3000);
+ } else {
+ setPodData({ data, loaded: true });
+ }
+ },
+ [podAdapter],
+ );
 
  return podAdapter ? (
  <TopologySideBarTabSection>