Bug 1954566 - Cannot update a component (`UtilizationCard`) error when switching perspectives manually
Summary: Cannot update a component (`UtilizationCard`) error when switching perspectiv...
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.8
Hardware: Unspecified
OS: Unspecified
unspecified
medium
Target Milestone: ---
: 4.8.0
Assignee: Kim Dobestein
QA Contact: Yadan Pei
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2021-04-28 11:41 UTC by Yadan Pei
Modified: 2021-07-27 23:04 UTC (History)
4 users (show)

Fixed In Version:
Doc Type: No Doc Update
Doc Text:
Clone Of:
Environment:
Last Closed: 2021-07-27 23:04:32 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
switch to admin via URL (244.01 KB, image/png)
2021-04-28 11:50 UTC, Yadan Pei
no flags Details
switch to dev via URL (169.04 KB, image/png)
2021-04-28 11:51 UTC, Yadan Pei
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 8833 0 None open Bug 1954566: Cannot update a component (`UtilizationCard`) error 2021-04-30 19:23:08 UTC
Red Hat Product Errata RHSA-2021:2438 0 None None None 2021-07-27 23:04:43 UTC

Description Yadan Pei 2021-04-28 11:41:15 UTC
Description of problem:
when switching perspectives I can see following JS error(in actual results) in browser console. 
This issue doesn't exist on exiting production cluster

Version-Release number of selected component (if applicable):
build a console with code in 

How reproducible:
Always 

Steps to Reproduce:
1. visit console at localhost:9000 and switch perspectives either from Administrator to Developer or from Developer to Administrator
2.
3.

Actual results:
1. We can see following error thrown in browser console

react-dom.development.js:67 Warning: Cannot update a component (`UtilizationCard`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at http://localhost:9000/static/main-57d6189529893c2ef087.js:13102:71
    at http://localhost:9000/static/main-57d6189529893c2ef087.js:46762:128
    at http://localhost:9000/static/main-57d6189529893c2ef087.js:63567:147
    at Connect(Component) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287850:75)
    at Firehose (http://localhost:9000/static/main-57d6189529893c2ef087.js:63610:9)
    at Connect(Firehose) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287850:75)
    at WithDashboardResources (http://localhost:9000/static/main-57d6189529893c2ef087.js:47633:9)
    at Connect(WithDashboardResources) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287850:75)
    at div
    at Grid (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:34886:11)
    at div
    at UtilizationBody (http://localhost:9000/static/main-57d6189529893c2ef087.js:13016:28)
    at article
    at Card (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:11771:11)
    at http://localhost:9000/static/main-57d6189529893c2ef087.js:11761:11
    at ErrorBoundary (http://localhost:9000/static/main-57d6189529893c2ef087.js:13599:9)
    at UtilizationCard (http://localhost:9000/static/main-57d6189529893c2ef087.js:46873:87)
    at div
    at GridItem (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:34926:11)
    at div
    at Grid (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:34886:11)
    at div
    at GridItem (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:34926:11)
    at div
    at Grid (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:34886:11)
    at div
    at DashboardGrid (http://localhost:9000/static/main-57d6189529893c2ef087.js:11443:26)
    at div
    at Dashboard (http://localhost:9000/static/main-57d6189529893c2ef087.js:11407:22)
    at ClusterDashboard (http://localhost:9000/static/dashboards-f993e8e1be267c14a043.js:390:143)
    at Route (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292787:29)
    at Switch (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292993:29)
    at div
    at HorizontalNav (http://localhost:9000/static/main-57d6189529893c2ef087.js:64079:219)
    at DashboardsPage_ (http://localhost:9000/static/dashboards-f993e8e1be267c14a043.js:868:28)
    at Connect(DashboardsPage_) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287850:75)
    at AsyncComponent (http://localhost:9000/static/main-57d6189529893c2ef087.js:61656:9)
    at Route (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292787:29)
    at LazyRoute
    at Switch (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292993:29)
    at div
    at div
    at section
    at PageSection (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:22017:11)
    at AppContents (http://localhost:9000/static/main-57d6189529893c2ef087.js:43623:131)
    at div
    at div
    at DrawerMain (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14345:5)
    at DrawerContent (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14247:5)
    at div
    at Drawer (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14142:11)
    at NotificationDrawer (http://localhost:9000/static/main-57d6189529893c2ef087.js:38552:31)
    at ConnectedNotificationDrawer_ (http://localhost:9000/static/main-57d6189529893c2ef087.js:58142:41)
    at Connect(ConnectedNotificationDrawer_) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287850:75)
    at main
    at div
    at Page (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:21612:9)
    at div
    at div
    at DrawerContentBody (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14280:5)
    at div
    at div
    at DrawerMain (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14345:5)
    at DrawerContent (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14247:5)
    at div
    at Drawer (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:14142:11)
    at QuickStartDrawer (http://localhost:9000/static/main-57d6189529893c2ef087.js:6739:29)
    at EnhancedProvider (http://localhost:9000/static/main-57d6189529893c2ef087.js:43817:39)
    at EnhancedProvider (http://localhost:9000/static/main-57d6189529893c2ef087.js:43817:39)
    at EnhancedProvider (http://localhost:9000/static/main-57d6189529893c2ef087.js:43817:39)
    at DetectNamespace (http://localhost:9000/static/main-57d6189529893c2ef087.js:6405:28)
    at DetectPerspective (http://localhost:9000/static/main-57d6189529893c2ef087.js:6545:30)
    at App_ (http://localhost:9000/static/main-57d6189529893c2ef087.js:43823:9)
    at http://localhost:9000/static/main-57d6189529893c2ef087.js:43919:141
    at withI18nextTranslation(Unknown) (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:282693:31)
    at Route (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292787:29)
    at Switch (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292993:29)
    at Router (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:292416:30)
    at AppRouter (http://localhost:9000/static/main-57d6189529893c2ef087.js:43925:113)
    at ToastProvider (http://localhost:9000/static/main-57d6189529893c2ef087.js:18541:26)
    at Provider (http://localhost:9000/static/vendors~main-29c7b603d9b38b7da7e6.js:287563:20)
    at Suspense
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:24002
scheduleUpdateOnFiber @ react-dom.development.js:21836
dispatchAction @ react-dom.development.js:16139
(anonymous) @ UtilizationItem.tsx:140
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
updateSimpleMemoComponent @ react-dom.development.js:17215
beginWork @ react-dom.development.js:19140
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
notify @ Subscription.js:19
notifyNestedSubs @ Subscription.js:90
handleChangeWrapper @ Subscription.js:95
dispatch @ redux.js:214
(anonymous) @ redux.ts:26
dispatch @ redux.js:611
(anonymous) @ dashboards.ts:72
fulfilled @ common.ts:11
Promise.then (async)
step @ common.ts:11
(anonymous) @ common.ts:11
push../public/actions/dashboards.ts.__awaiter @ common.ts:11
fetchPeriodically @ dashboards.ts:58
(anonymous) @ dashboards.ts:108
(anonymous) @ redux.ts:23
watchPrometheusQuery @ with-dashboard-resources.tsx:27
WithDashboardResources.watchPrometheus @ with-dashboard-resources.tsx:111
(anonymous) @ utilization-card.tsx:198
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365
(anonymous) @ async.tsx:56
Promise.then (async)
loadComponent @ async.tsx:52
componentDidMount @ async.tsx:41
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ useResolvedExtensions.ts:59
Promise.then (async)
(anonymous) @ useResolvedExtensions.ts:52
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157

Expected results:


Additional info:

Comment 1 Yadan Pei 2021-04-28 11:45:07 UTC
above issue is seen when switching perspectives manually

Comment 2 Yadan Pei 2021-04-28 11:49:49 UTC
another issue is that: 

User is in Developer perspective, switching to /k8s/all-namespaces/pods?perspective=admin will correctly set perspective to Administrator, but no page content is loaded (screenshot: switch to admin via URL) vice versa (screenshot: switch to dev from URL)

this issue also not reproduced on production cluster

Comment 3 Yadan Pei 2021-04-28 11:50:38 UTC
Created attachment 1776550 [details]
switch to admin via URL

Comment 4 Yadan Pei 2021-04-28 11:51:54 UTC
Created attachment 1776551 [details]
switch to dev via URL

Comment 5 Robb Hamilton 2021-04-28 17:51:48 UTC
I will be out on PTO, so putting this back in the queue for triage.

Comment 7 Yadan Pei 2021-05-06 07:39:43 UTC
switch perspective manually and didn't have this error 

moving to VERIFIED, this is checked against 4.8.0-0.nightly-2021-05-05-135043

Comment 10 errata-xmlrpc 2021-07-27 23:04:32 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Moderate: OpenShift Container Platform 4.8.2 bug fix and security update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHSA-2021:2438


Note You need to log in before you can comment on or make changes to this bug.