Argo Workflows UI v3.7.7: the GRAPH in Cron Workflows view shows "Cannot read properties of undefined (reading 'forEach')"

[ncs-coder-ops]

Pre-requisites

• I have double-checked my configuration
• I have tested with the :latest image tag (i.e. quay.io/argoproj/workflow-controller:latest) and can confirm the issue still exists on :latest. If not, I have explained why, in detail, in my description below.
• I have searched existing issues and could not find a match for this bug
• I'd like to contribute the fix myself (see contributing guide)

What happened? What did you expect to happen?

I upgraded from v3.6.4 to v3.7.7 and noticed the addition of the GRAPH menu in the CronWorkflow view in the Argo Workflows UI. When I click on it I get the following output:

Cannot read properties of undefined (reading 'forEach')
 [Reload this page](javascript:document.location.reload();) to try again.

Stack Trace
TypeError: Cannot read properties of undefined (reading 'forEach')
    at https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1671900
    at nl (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1674085)
    at gi (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:563288)
    at Cs (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:577326)
    at kl (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:623096)
    at yc (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:611481)
    at vc (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:611409)
    at gc (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:611272)
    at ac (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:608107)
    at oc (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:606663)
Component Stack

    at nl (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1670614)
    at div
    at div
    at ss (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1653634)
    at vf (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1723432)
    at div
    at div
    at de (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:41659)
    at Of (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1725003)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1533334)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1531135)
    at component (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1740040)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1533334)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1531135)
    at Oh (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1797807)
    at div
    at div
    at Kt (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1527261)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1531135)
    at t (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1528794)
    at Xb (https://argo-workflows.example-domain.com/main.5025d1c0e176f5e8a2e0.js:2:1916354)
    at Jb

The browser back button doesn't work, so to move away from here I need to click for example on the WorkflowTemplates icon on the left and then click the browser refresh button.

Images used:
Argo Workflow Controller:

• quay.io/argoproj/workflow-controller:v3.7.7
• quay.io/argoproj/workflow-controller@sha256:9d2f4633a4c093ff63bbbd87db3d455fbe6dde91e3027c8ce53c2d56ce1e4071
  Argo Workflows Server:
• quay.io/argoproj/argocli:v3.7.7
• quay.io/argoproj/argocli@sha256:66188ad429c990b258a474aedcdf921350ddaf03df77b3f3509b6f968941a497

This UI issue is noticed on both Edge and Chrome browsers it seems to be happening for Cron Workflows which have longer names: like I tested up to 18 chars which is ok but like 41 chars names exhibit the error.

Version(s)

v3.7.7

Paste a minimal workflow that reproduces the issue. We must be able to run the workflow; don't enter a workflow that uses private images.

Navigate to the Argo Workflows UI -> Cron Workflows ( on the left ) -> Select a Cron Workflow from the list and click on it -> GRAPH

Logs from the workflow controller

kubectl logs -n argo deploy/workflow-controller | grep ${workflow}

I don't see any errors in these logs related to the Cron Workflow that shows the error.

Logs from in your workflow's wait container

kubectl logs -n argo -c wait -l workflows.argoproj.io/workflow=${workflow},workflow.argoproj.io/phase!=Succeeded

The Workflow has succeeded as I can see it in the Workflows view.

[ralichkov]

Pretty sure this is still relevant. Doesn't work for me on 4.0.1

[MasonM]

I can't reproduce this on v3.7.7:

Here's the workflow I used:

metadata:
  name: delightful-whale-long-name-long-name-long-name
  namespace: argo
  labels:
    example: "true"
spec:
  workflowMetadata:
    labels:
      example: "true"
  schedules:
    - "* * * * *"
  workflowSpec:
    entrypoint: argosay
    arguments:
      parameters:
        - name: message
          value: hello argo
    templates:
      - name: argosay
        inputs:
          parameters:
            - name: message
              value: "{{workflow.parameters.message}}"
        container:
          name: main
          image: argoproj/argosay:v2
          command:
            - /argosay
          args:
            - echo
            - "{{inputs.parameters.message}}"
    ttlStrategy:
      secondsAfterCompletion: 300
    podGC:
      strategy: OnPodCompletion

Could you please provide a workflow to reproduce this issue?