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

* management-service.ts * The management service is responsible for emitting an update on all the pods being managed or not. However, no update is emitted if there are no pods. As a result, the Discover component has to assume there are no pods while waiting for them. * To allow for the Discover component to wait for the update (showing 'loading'), fire an update when there are no pods * Also for each pod add a flag to show that it has now been 'managed' * context.ts * Differentiate between initialising / mounting of the context and the first call to organising the pods and the later mgmt service listener * Once mounted, only when the listener receives its first update will the context signal it is loaded (that signal will be either when there are pods or not hence the mandated firing from the mgmt service) * Discover.tsx * Improves the loading component to show a header to the loading card * DiscoverPodItem.tsx * In the event that a new pod is spun up, it can take several seconds for an update to be received concerning the number of routes. As a result, have the routes count label display a spinner and `querying ...` label before being updated to the correct total
hawtio · Nov 27, 2023 · 4636ea6 · 4636ea6
1 parent 325011e
commit 4636ea6
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 26 deletions.
diff --git a/packages/management-api/src/managed-pod.ts b/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,
     },

diff --git a/packages/management-api/src/management-service.ts b/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) })
         },
       })
     }

diff --git a/packages/online-shell/src/discover/Discover.css b/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);

diff --git a/packages/online-shell/src/discover/Discover.tsx b/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>
     )
   }
 

diff --git a/packages/online-shell/src/discover/DiscoverPodItem.tsx b/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'>

diff --git a/packages/online-shell/src/discover/context.ts b/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 }
 }