[OKD4.7] Web-UI broken on "Create PersistentVolumeClaim"

[devzeronull]

Hi,

we experienced an error on the Web-UI in 4.7.0-0.okd-2021-03-21-094146 Release (bare-metal UPI).
When we click in Administrator View on "PersistentVolumeClaims" -> "Create PersistentVolumeClaim" (URL: https://console-openshift-console.apps.clustername.basedomain/k8s/ns/default/persistentvolumeclaims/~new/form")

the page gets loaded and after a short flickering showing the Forms content for a millisecond it stays completely empty - like being overlayed with a white page or the page content blended out:

In 4.6 it would look like this:

When looking at the pages source code it seems to be loaded having the following JavaScript-error:

TypeError: can't convert undefined to object
d create-pvc-chunk-e6298432dd020e2cd449.min.js:1
k create-pvc-chunk-e6298432dd020e2cd449.min.js:1
Ia vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
Ws vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
unstable_runWithPriority vendorsmain-chunk-3652a4e54bce917198bc.min.js:166497
li vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
Ws vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
Fs vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
Ps vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
hi vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
unstable_runWithPriority vendorsmain-chunk-3652a4e54bce917198bc.min.js:166497
li vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
hi vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
di vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
Is vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
notify vendorsmain-chunk-3652a4e54bce917198bc.min.js:39200
notifyNestedSubs vendorsmain-chunk-3652a4e54bce917198bc.min.js:39200
notifySubscribers vendorsmain-chunk-3652a4e54bce917198bc.min.js:109462
handleChangeWrapper vendorsmain-chunk-3652a4e54bce917198bc.min.js:39200
v vendorsmain-chunk-3652a4e54bce917198bc.min.js:24762
b main-chunk-0e0280b47986f6ccc022.min.js:1
dispatch vendorsmain-chunk-3652a4e54bce917198bc.min.js:24762
s main-chunk-0e0280b47986f6ccc022.min.js:1
s main-chunk-0e0280b47986f6ccc022.min.js:1
i main-chunk-0e0280b47986f6ccc022.min.js:1
vendorsmain-chunk-3652a4e54bce917198bc.min.js:166203
stopped watching storage.k8s.iov1StorageClass before finishing incremental loading with error TypeError: can't convert undefined to object! main-chunk-0e0280b47986f6ccc022.min.js:1

It is reproduceable in 4.7, but not in 4.6 and seems like it could be related to the templating/branding issue on the first 4.7 Release...

Can you confirm that?

Best regards

[klzsysy]

me too

[spadgett]

Hi, I'm not able to reproduce. It's likely something in the data on your particular cluster, most likely something about one of the StorageClass resources that console doesn't like. Are you able to share the output of oc get storageclasses -o yaml?

/kind bug

cc @zherman0 @cloudbehl

[larueli]

We experience the same issue with 4.7.0-0.okd-2021-04-24-103438.

We have two storage classes :

`oc get storageclasses -o yaml`

apiVersion: v1
items:
- allowVolumeExpansion: true
  apiVersion: storage.k8s.io/v1
  kind: StorageClass
  metadata:
    creationTimestamp: "2021-02-25T20:33:41Z"
    managedFields:
    - apiVersion: storage.k8s.io/v1
      fieldsType: FieldsV1
      fieldsV1:
        f:allowVolumeExpansion: {}
        f:parameters:
          .: {}
          f:clusterID: {}
          f:csi.storage.k8s.io/fstype: {}
          f:csi.storage.k8s.io/node-stage-secret-name: {}
          f:csi.storage.k8s.io/node-stage-secret-namespace: {}
          f:csi.storage.k8s.io/provisioner-secret-name: {}
          f:csi.storage.k8s.io/provisioner-secret-namespace: {}
          f:imageFeatures: {}
          f:imageFormat: {}
          f:pool: {}
        f:provisioner: {}
        f:reclaimPolicy: {}
        f:volumeBindingMode: {}
      manager: Mozilla
      operation: Update
      time: "2021-02-25T20:33:41Z"
    name: ceph
    resourceVersion: "53739199"
    selfLink: /apis/storage.k8s.io/v1/storageclasses/ceph
    uid: cebfcb6a-1df5-45ac-83e2-4c5ccea3279f
  parameters:
    clusterID: rook-ceph-external
    csi.storage.k8s.io/fstype: ext4
    csi.storage.k8s.io/node-stage-secret-name: rook-csi-rbd-node
    csi.storage.k8s.io/node-stage-secret-namespace: rook-ceph-external
    csi.storage.k8s.io/provisioner-secret-name: rook-csi-rbd-provisioner
    csi.storage.k8s.io/provisioner-secret-namespace: rook-ceph-external
    imageFeatures: layering
    imageFormat: “2”
    pool: openshift
  provisioner: rook-ceph.rbd.csi.ceph.com
  reclaimPolicy: Delete
  volumeBindingMode: Immediate
- apiVersion: storage.k8s.io/v1
  kind: StorageClass
  metadata:
    annotations:
      storageclass.kubernetes.io/is-default-class: "false"
    creationTimestamp: "2020-11-13T00:23:29Z"
    managedFields:
    - apiVersion: storage.k8s.io/v1
      fieldsType: FieldsV1
      fieldsV1:
        f:parameters:
          .: {}
          f:archiveOnDelete: {}
        f:provisioner: {}
        f:reclaimPolicy: {}
        f:volumeBindingMode: {}
      manager: oc
      operation: Update
      time: "2020-11-13T00:23:29Z"
    - apiVersion: storage.k8s.io/v1
      fieldsType: FieldsV1
      fieldsV1:
        f:metadata:
          f:annotations:
            .: {}
            f:storageclass.kubernetes.io/is-default-class: {}
      manager: Mozilla
      operation: Update
      time: "2021-01-20T13:06:42Z"
    name: nfs-proxmox-vm
    resourceVersion: "35969163"
    selfLink: /apis/storage.k8s.io/v1/storageclasses/nfs-proxmox-vm
    uid: bbe2124c-6740-41d8-b7a9-a900437cc2a9
  parameters:
    archiveOnDelete: "true"
  provisioner: nfs-proxmox-vm
  reclaimPolicy: Delete
  volumeBindingMode: Immediate
kind: List
metadata:
  resourceVersion: ""
  selfLink: ""

We experience this issue only on the ceph storage class. When I go on the page to create the pvc, it works, but when I select ceph, it renders a blank page. When I select nfs-proxmox-vm, it works as expected.

Here is the error shown in the console output, hope it helps ?

Feel free to ask more details !

[spadgett]

OK I'm able to reproduce in 4.7, but not 4.8. It looks like something has been fixed indirectly. Here is the stack with real function names. Thanks for the YAML 👍

Uncaught TypeError: can't convert undefined to object
    getVolumeModeForProvisioner shared.ts:65
    CreatePVCForm create-pvc.tsx:122
    React 43
    Webpack 21
shared.ts:65
    getVolumeModeForProvisioner shared.ts:65
    CreatePVCForm create-pvc.tsx:122
    React 6
    flushPassiveEffectsImpl self-hosted:1277
    React 4
    renderRoot self-hosted:1277
    runRootCallback React
    runRootCallback self-hosted:1277
    React 8
    dispatchDiscreteEvent self-hosted:1277
    React 13
    renderRoot self-hosted:1277
    runRootCallback React
    runRootCallback self-hosted:1277
    React 10
    Webpack 21

[spadgett]

It looks like this was introduced in 4.7.z by #8234

/assign @GowthamShanmugam
cc @bipuladh

[GowthamShanmugam]

It looks like this was introduced in 4.7.z by #8234

/assign @GowthamShanmugam
cc @bipuladh

Fixing this issue

[GowthamShanmugam]

It looks like this was introduced in 4.7.z by #8234
/assign @GowthamShanmugam
cc @bipuladh

Fixing this issue

Fix PR: #8784, removed wrong commit(accidentally modified few files in rebase, reverted back those changes)

[spadgett]

Fixed by #8452.

/close