fix: Stops displaying no containers page while waiting for pods #210

packages/management-api/src/managed-pod.ts

@@ -13,6 +13,7 @@ const DEFAULT_JOLOKIA_OPTIONS: BaseRequestOptions = {
 
 export type Management = {
   status: {
+    managed: boolean
     running: boolean
     error: boolean
   }
@@ -30,6 +31,7 @@ export class ManagedPod {
 
   private _management: Management = {
     status: {
+      managed: false,
       running: false,
       error: false,
     },

packages/management-api/src/management-service.ts

@@ -4,6 +4,11 @@ import { Connection, Connections, connectService } from '@hawtio/react'
 import { k8Service, k8Api, KubePod, K8Actions, Container, ContainerPort, debounce } from '@hawtio/online-kubernetes-api'
 import { MgmtActions, log } from './globals'
 
+interface UpdateEmitter {
+  uid?: string
+  fireUpdate: boolean
+}
+
 export class ManagementService extends EventEmitter {
   private _initialized = false
   private _pods: { [key: string]: ManagedPod } = {}
@@ -79,21 +84,36 @@ export class ManagementService extends EventEmitter {
     Object.keys(this._pods).forEach(uid => this.uidQueue.add(uid))
   }
 
-  private emitUpdate(uid: string, fireUpdate: boolean) {
-    this.uidQueue.delete(uid)
+  private emitUpdate(emitter: UpdateEmitter) {
+    if (emitter.uid) {
+      this.uidQueue.delete(emitter.uid)
+    }
 
-    if (fireUpdate && this.uidQueue.size === 0) {
+    if (emitter.fireUpdate && this.uidQueue.size === 0) {
       this.emit(MgmtActions.UPDATED)
     }
   }
 
   private async mgmtUpdate() {
     this.preMgmtUpdate()
 
+    if (Object.keys(this._pods).length === 0) {
+      /*
+       * If there are no pods, we still want an update to fire
+       * to let 3rd parties know that updates are happening but
+       * currently there are no pods to report on
+       */
+      this.emitUpdate({ fireUpdate: true })
+      return
+    }
+
     for (const uid of Object.keys(this._pods)) {
       const mPod: ManagedPod = this._pods[uid]
       const fingerprint = this.fingerprint(mPod.management)
 
+      // Flag that the pod is now under management
+      mPod.management.status.managed = true
+
       mPod.management.status.running = this.podStatus(mPod) === 'Running'
 
       if (!mPod.management.status.running) {
@@ -102,7 +122,7 @@ export class ManagementService extends EventEmitter {
          * against a non-running pod.
          * Emit an update but only if the status has in fact changed
          */
-        this.emitUpdate(uid, fingerprint === this.fingerprint(mPod.management))
+        this.emitUpdate({ uid, fireUpdate: fingerprint === this.fingerprint(mPod.management) })
         continue
       }
 
@@ -112,12 +132,12 @@ export class ManagementService extends EventEmitter {
       try {
         const url = await mPod.probeJolokiaUrl()
         if (!url) {
-          this.emitUpdate(uid, fingerprint === this.fingerprint(mPod.management))
+          this.emitUpdate({ uid, fireUpdate: fingerprint === this.fingerprint(mPod.management) })
         }
       } catch (error) {
         log.error(new Error(`Cannot access jolokia url at ${mPod.jolokiaPath}`, { cause: error }))
         mPod.management.status.error = true
-        this.emitUpdate(uid, fingerprint === this.fingerprint(mPod.management))
+        this.emitUpdate({ uid, fireUpdate: fingerprint === this.fingerprint(mPod.management) })
         continue
       }
 
@@ -126,12 +146,12 @@ export class ManagementService extends EventEmitter {
         success: (routes: string[]) => {
           mPod.management.status.error = false
           mPod.management.camel.routes_count = routes.length
-          this.emitUpdate(uid, fingerprint === this.fingerprint(mPod.management))
+          this.emitUpdate({ uid, fireUpdate: fingerprint === this.fingerprint(mPod.management) })
         },
         error: error => {
           log.error(error)
           mPod.management.status.error = true
-          this.emitUpdate(uid, fingerprint === this.fingerprint(mPod.management))
+          this.emitUpdate({ uid, fireUpdate: fingerprint === this.fingerprint(mPod.management) })
         },
       })
     }

packages/online-shell/src/discover/Discover.css

@@ -23,6 +23,16 @@
   display: none;
 }
 
+.discover-loading {
+  width: 85%;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2em;
+  background-color: transparent;
+  font-style: italic;
+}
+
 .discover-group-label {
   text-align: left;
   color: rgb(117, 117, 117);

packages/online-shell/src/discover/Discover.tsx

@@ -9,6 +9,10 @@ import {
   List,
   PageSection,
   PageSectionVariants,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
   Title,
 } from '@patternfly/react-core'
 import { CubesIcon } from '@patternfly/react-icons'
@@ -24,7 +28,18 @@ export const Discover: React.FunctionComponent = () => {
     useDisplayItems()
 
   if (isLoading) {
-    return <HawtioLoadingCard />
+    return (
+      <PageSection variant={PageSectionVariants.light}>
+        <Panel className='discover-loading'>
+          <PanelHeader>Waiting for Hawtio Containers ...</PanelHeader>
+          <PanelMain>
+            <PanelMainBody>
+              <HawtioLoadingCard />
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+    )
   }
 
   if (error) {
@@ -43,15 +58,17 @@ export const Discover: React.FunctionComponent = () => {
 
   if (discoverGroups.length + discoverPods.length === 0) {
     return (
-      <EmptyState>
-        <EmptyStateIcon icon={CubesIcon} />
-        <Title headingLevel='h1' size='lg'>
-          No Hawtio Containers
-        </Title>
-        <EmptyStateBody>
-          There are no containers running with a port configured whose name is <code>jolokia</code>.
-        </EmptyStateBody>
-      </EmptyState>
+      <PageSection variant={PageSectionVariants.light}>
+        <EmptyState>
+          <EmptyStateIcon icon={CubesIcon} />
+          <Title headingLevel='h1' size='lg'>
+            No Hawtio Containers
+          </Title>
+          <EmptyStateBody>
+            There are no containers running with a port configured whose name is <code>jolokia</code>.
+          </EmptyStateBody>
+        </EmptyState>
+      </PageSection>
     )
   }
 

packages/online-shell/src/discover/DiscoverPodItem.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react'
 import { Label, LabelGroup, ListItem, Title } from '@patternfly/react-core'
 import { DatabaseIcon, HomeIcon, OutlinedHddIcon } from '@patternfly/react-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { ConsoleLink, ConsoleType } from '../console'
 import { Labels } from '../labels'
 import { DiscoverPod } from './globals'
@@ -32,8 +34,20 @@ export const DiscoverPodItem: React.FunctionComponent<DiscoverPodItemProps> = (p
   }
 
   const routesLabel = (): ReactNode => {
+    if (!props.pod.mPod.management.status.managed) {
+      return (
+        <Label color='grey' icon={<FontAwesomeIcon icon={faSpinner} spin />} className='pod-item-routes'>
+          {`querying routes ...`}
+        </Label>
+      )
+    }
+
     const total = props.pod.mPod.management.camel.routes_count
-    return `${total} route${total !== 1 ? 's' : ''}`
+    return (
+      <Label color='gold' icon={<CamelRouteIcon />} className='pod-item-routes'>
+        {`${total} route${total !== 1 ? 's' : ''}`}
+      </Label>
+    )
   }
 
   return (
@@ -68,9 +82,7 @@ export const DiscoverPodItem: React.FunctionComponent<DiscoverPodItemProps> = (p
           {containersLabel()}
         </Label>
 
-        <Label color='gold' icon={<CamelRouteIcon />} className='pod-item-routes'>
-          {routesLabel()}
-        </Label>
+        {routesLabel()}
       </LabelGroup>
 
       <div className='pod-item-connect-button'>

packages/online-shell/src/discover/context.ts

@@ -11,6 +11,7 @@ type UpdateListener = () => void
  */
 export function useDisplayItems() {
   const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const [isMounting, setIsMounting] = useState(true)
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<Error | null>()
   const [discoverGroups, setDiscoverGroups] = useState<DiscoverGroup[]>([])
@@ -27,29 +28,30 @@ export function useDisplayItems() {
   }
 
   useEffect(() => {
-    setIsLoading(true)
+    setIsMounting(true)
 
     const checkLoading = async () => {
       const mgmtLoaded = await isMgmtApiRegistered()
 
       if (!mgmtLoaded) return
 
-      setIsLoading(false)
-
       if (k8Api.hasError()) {
         setError(k8Api.error)
+        setIsMounting(false)
         return
       }
 
       if (k8Service.hasError()) {
         setError(k8Service.error)
+        setIsMounting(false)
         return
       }
 
       //
       // First-time update pod organisation
       //
       organisePods([], [])
+      setIsMounting(false)
     }
 
     checkLoading()
@@ -71,6 +73,8 @@ export function useDisplayItems() {
   useEffect(() => {
     const mgmtListener = () => {
       organisePods(discoverGroups, filters)
+      // Listener inited so loading now complete
+      setIsLoading(false)
     }
 
     mgmtService.on(MgmtActions.UPDATED, mgmtListener)
@@ -79,7 +83,7 @@ export function useDisplayItems() {
     return () => {
       if (updateListener.current) mgmtService.off(MgmtActions.UPDATED, updateListener.current)
     }
-  }, [isLoading, filters, discoverGroups])
+  }, [isMounting, filters, discoverGroups])
 
   return { error, isLoading, discoverGroups, setDiscoverGroups, discoverPods, setDiscoverPods, filters, setFilters }
 }