Bugzilla – Bug 1211653
Cockpit not displaying Podman containers Integration screen
Last modified: 2024-06-26 12:17:11 UTC
I am running the latest bind image from registry.opensuse.org on openSUSE MicroOS on a Raspberry Pi3, and after creating the bind container and running it, in Cockpit->Podman containers, I cannot view the Integrations tab, is presents a blank screen, and only refreshing the browser will allow the other container tabs to be viewed. # cat /etc/os-release NAME="openSUSE MicroOS" # VERSION="20230509" ID="opensuse-microos" ID_LIKE="suse opensuse opensuse-tumbleweed" VERSION_ID="20230509" PRETTY_NAME="openSUSE MicroOS" ANSI_COLOR="0;32" CPE_NAME="cpe:/o:opensuse:microos:20230509" BUG_REPORT_URL="https://bugzilla.opensuse.org" SUPPORT_URL="https://bugs.opensuse.org" HOME_URL="https://www.opensuse.org/" DOCUMENTATION_URL="https://en.opensuse.org/Portal:MicroOS" LOGO="distributor-logo-MicroOS" From the browser troubleshooting windows, if it helps... react-dom.development.js:67 Warning: Unsupported style property row-gap. Did you mean rowGap? at div at Flex (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13529:11) at div at Flex (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13529:11) at div at FlexItem (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13562:11) at div at Flex (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13529:11) at div at CardHeader (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:748:11) at article at Card (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:583:11) at Images (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:25423:5) at div at Stack (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13696:11) at section at PageSection (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:5295:11) at main at div at Page (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:5098:9) at WithDialogs (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:20356:23) at Application (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:26533:5) printWarning @ react-dom.development.js:67 error @ react-dom.development.js:43 warnHyphenatedStyleName @ react-dom.development.js:2444 warnValidStyle @ react-dom.development.js:2492 setValueForStyles @ react-dom.development.js:2565 setInitialDOMProperties @ react-dom.development.js:8899 setInitialProperties @ react-dom.development.js:9135 finalizeInitialChildren @ react-dom.development.js:10201 completeWork @ react-dom.development.js:19470 completeUnitOfWork @ react-dom.development.js:22812 performUnitOfWork @ react-dom.development.js:22787 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:468 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 Component.setState @ react.development.js:365 (anonymous) @ app.jsx:481 Promise.then (async) init @ app.jsx:480 componentDidMount @ app.jsx:522 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:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 (anonymous) @ index.js:27 ContainerIntegration.jsx:52 Uncaught TypeError: imageEnv is not iterable at renderContainerEnv (ContainerIntegration.jsx:52:29) at ContainerIntegration (ContainerIntegration.jsx:100:17) at renderWithHooks (react-dom.development.js:14985:1) at mountIndeterminateComponent (react-dom.development.js:17811:1) at beginWork (react-dom.development.js:19049:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22779:1) renderContainerEnv @ ContainerIntegration.jsx:52 ContainerIntegration @ ContainerIntegration.jsx:100 renderWithHooks @ react-dom.development.js:14985 mountIndeterminateComponent @ react-dom.development.js:17811 beginWork @ react-dom.development.js:19049 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 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:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 discreteUpdates$1 @ react-dom.development.js:22420 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 react-dom.development.js:20085 The above error occurred in the <ContainerIntegration> component: at ContainerIntegration (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:21357:24) at div at section at TabContentBase (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:7826:11) at Tabs (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:7929:9) at div at ListingPanel (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:19840:5) at div at ExpandableRowContent (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:17564:11) at td at TdBase (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:18703:11) at Td at tr at TrBase (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:18997:11) at Tr at tbody at TbodyBase (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:18654:11) at Tbody at table at TableComposableBase (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:18573:11) at TableComposable at ListingTable (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:20025:27) at article at Card (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:583:11) at div at Flex (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13529:11) at div at CardBody (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:684:11) at article at Card (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:583:11) at div at Containers (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:22595:5) at div at Stack (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:13696:11) at section at PageSection (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:5295:11) at main at div at Page (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:5098:9) at WithDialogs (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:20356:23) at Application (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:26533:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20118 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20736 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:468 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:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 discreteUpdates$1 @ react-dom.development.js:22420 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 ContainerIntegration.jsx:52 Uncaught TypeError: imageEnv is not iterable at renderContainerEnv (ContainerIntegration.jsx:52:29) at ContainerIntegration (ContainerIntegration.jsx:100:17) at renderWithHooks (react-dom.development.js:14985:1) at mountIndeterminateComponent (react-dom.development.js:17811:1) at beginWork (react-dom.development.js:19049:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22779:1) renderContainerEnv @ ContainerIntegration.jsx:52 ContainerIntegration @ ContainerIntegration.jsx:100 renderWithHooks @ react-dom.development.js:14985 mountIndeterminateComponent @ react-dom.development.js:17811 beginWork @ react-dom.development.js:19049 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 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:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 discreteUpdates$1 @ react-dom.development.js:22420 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at Application (https://rpi3:9090/cockpit/$f640f64e433ba341a8692a2002b93372678adba4748efcee330b92602f24cdc6/podman/index.js:26533:5) printWarning @ react-dom.development.js:67 error @ react-dom.development.js:43 warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23914 scheduleUpdateOnFiber @ react-dom.development.js:21840 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 updateState @ app.jsx:158 (anonymous) @ app.jsx:174 (anonymous) @ app.jsx:174 (anonymous) @ rest.js:34 (anonymous) @ rest.js:34 (anonymous) @ cockpit.js:1 o @ cockpit.js:1 c @ cockpit.js:1 value @ cockpit.js:1 f @ cockpit.js:1 (anonymous) @ cockpit.js:1 B.n.onmessage.e.dispatch_data @ cockpit.js:1 (anonymous) @ cockpit.js:1 postMessage (async) (anonymous) @ index.js:2 B.n.onmessage.e.dispatch_data @ cockpit.js:1
Interestingly, tried running the same image with the same configuration on SLE Micro 5.4 and the Integrations tab isn't even present, and one has to to delete a container to make config changes.
Hi! Is this still an issue? We're cleaning up cockpit bugs and trying to figure out what bugs are still relevant.
Yes this is still an issue, I just reproduced it in my lab. Here is the Javascript console error the browser caught... Updating page status index.js:26:202581 Forwarding page status index.js:26:206241 Updating page status index.js:26:202581 Forwarding page status 2 index.js:26:206241 Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. stylesheets-manager.js:536:12 Updating page status index.js:26:202581 Forwarding page status index.js:26:206241 Uncaught TypeError: imageEnv is undefined ContainerEnv ContainerIntegration.jsx:53 React 17 handleTabClick cockpit-components-listing-panel.jsx:42 handleTabClick Tabs.tsx:203 handleTabClick Tabs.tsx:443 onClick Tab.tsx:105 React 23 <anonymous> index.js:28 EventListener.handleEvent* index.js:27 <anonymous> index.js:114552 ContainerIntegration.jsx:53:25 ContainerEnv ContainerIntegration.jsx:53 React 17 handleTabClick cockpit-components-listing-panel.jsx:42 handleTabClick Tabs.tsx:203 handleTabClick Tabs.tsx:443 onClick Tab.tsx:105 React 19 forEach self-hosted:4425 React 4 <anonymous> index.js:28 (Async: EventListener.handleEvent) <anonymous> index.js:27 <anonymous> index.js:114552 Uncaught TypeError: imageEnv is undefined ContainerEnv ContainerIntegration.jsx:53 React 18 handleTabClick cockpit-components-listing-panel.jsx:42 handleTabClick Tabs.tsx:203 handleTabClick Tabs.tsx:443 onClick Tab.tsx:105 React 23 <anonymous> index.js:28 EventListener.handleEvent* index.js:27 <anonymous> index.js:114552 ContainerIntegration.jsx:53:25 The above error occurred in the <ContainerEnv> component: ContainerEnv@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:109298:22 div dd DescriptionListDescription@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:107410:42 div DescriptionListGroup@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:107423:35 dl DescriptionList@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:107392:270 ContainerIntegration@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:109327:30 div section TabContentBase@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:107899:9 _Tabs@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108027:7 div ListingPanel@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:109064:7 div ExpandableRowContent@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:106224:31 td TdBase@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108799:145 Td tr TrBase@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108604:285 Tr tbody TbodyBase@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108650:102 Tbody table TableBase@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108539:9 Table ListingTable@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:108924:22 div Card@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:102325:11 div Flex@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:103231:253 div CardBody@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:102387:71 div Card@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:102325:11 div Containers@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:112661:7 div Stack@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:97803:85 section PageSection@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:97098:289 main div Page@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:96870:7 WithDialogs@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:98091:21 WithPodmanInfo@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:109108:24 Application@https://rpi3:9090/cockpit/$9487bcd2df03d48b6a4cd8c7b8a2a0315fc5d0eff2734dfd40c5c863417209f1/podman/index.js:113933:7 Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:18687:14 Uncaught TypeError: imageEnv is undefined ContainerEnv ContainerIntegration.jsx:53 React 15 handleTabClick cockpit-components-listing-panel.jsx:42 handleTabClick Tabs.tsx:203 handleTabClick Tabs.tsx:443 onClick Tab.tsx:105 React 23 <anonymous> index.js:28 EventListener.handleEvent* index.js:27 <anonymous> index.js:114552 ContainerIntegration.jsx:53:25 Updating page status index.js:26:202581 Forwarding page status index.js:26:206241
Thanks! We'll look into it.
Just upgraded my lab to SLEM 5.5 and the issue is present there as well.
Hey! I've just taken over this one, I've got a pr with upstream that'll fix this once it lands downstream: https://github.com/cockpit-project/cockpit-podman/pull/1769