console: Gateway status panel

Author: ryaplots

pkg/webui/console/containers/gateway-connection/index.js

@@ -12,10 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import classnames from 'classnames'
 import { FormattedNumber, defineMessages } from 'react-intl'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
 import Icon, { IconArrowsSort, IconBroadcast } from '@ttn-lw/components/icon'
 import Status from '@ttn-lw/components/status'
@@ -35,8 +35,6 @@ import { isNotFoundError, isTranslated } from '@ttn-lw/lib/errors/utils'
 import { selectGsConfig } from '@ttn-lw/lib/selectors/env'
 import getHostFromUrl from '@ttn-lw/lib/host-from-url'
 
-import { startGatewayStatistics, stopGatewayStatistics } from '@console/store/actions/gateways'
-
 import {
   selectGatewayById,
   selectGatewayStatistics,
@@ -73,17 +71,8 @@ const GatewayConnection = props => {
   const lastSeen = useSelector(selectGatewayLastSeen)
   const isOtherCluster = consoleGsAddress !== gatewayServerAddress
 
-  const dispatch = useDispatch()
-
   useConnectionReactor(gtwId)
 
-  useEffect(() => {
-    dispatch(startGatewayStatistics(gtwId))
-    return () => {
-      dispatch(stopGatewayStatistics())
-    }
-  }, [dispatch, gtwId])
-
   const status = useMemo(() => {
     const statsNotFound = Boolean(error) && isNotFoundError(error)
     const isDisconnected = Boolean(statistics) && Boolean(statistics.disconnected_at)

pkg/webui/console/containers/gateway-status-panel/index.js

@@ -108,17 +108,16 @@ const GatewayStatusPanel = () => {
   const error = useSelector(selectGatewayStatisticsError)
   const fetching = useSelector(selectGatewayStatisticsIsFetching)
   const isDisconnected = Boolean(gatewayStats?.disconnected_at)
-  const isConnected = Boolean(gatewayStats?.connected_at) && !isDisconnected
   const isFetching = !Boolean(gatewayStats) && fetching
-  const hasStatistics = Boolean(gatewayStats)
   const noConnectionYet = useMemo(
     () => isBackend(error) && getBackendErrorName(error).includes('not_connected'),
     [error],
   )
+  const hasStatistics = Boolean(gatewayStats)
+  const isConnected = Boolean(gatewayStats?.connected_at) && !isDisconnected && !noConnectionYet
 
   const hasError = Boolean(error) && Boolean(error.message)
-  const isUnavailable = hasError && error.message === 'Unavailable' && !fetching && !gatewayStats
-  const isLoadingWithError = hasError && error.message === 'Unavailable' && !gatewayStats
+  const isUnavailable = hasError && error.message === 'Unavailable'
 
   const maxRoundTripTime = useMemo(
     () =>
@@ -156,7 +155,7 @@ const GatewayStatusPanel = () => {
           status={
             isDisconnected
               ? 'bad'
-              : isFetching || noConnectionYet || isLoadingWithError
+              : isFetching || noConnectionYet
                 ? 'mediocre'
                 : isConnected
                   ? 'green'
@@ -191,15 +190,7 @@ const GatewayStatusPanel = () => {
           </div>
         </div>
       )}
-      {isUnavailable && (
-        <div className="d-flex j-center al-center flex-grow">
-          <div className="d-flex direction-column j-center al-center text-center w-60 gap-cs-m mb-ls-m">
-            <Message content={m.isUnavailable} className="fw-bold fs-l lh-xs3" component="div" />
-            <Message content={m.isUnavailableDesc} className="c-text-neutral-light lh-xxs" />
-          </div>
-        </div>
-      )}
-      {hasStatistics && !isFetching && !noConnectionYet && !isUnavailable && (
+      {hasStatistics && !isFetching && !isUnavailable && (
         <>
           <div className={style.gtwStatusPanelUpperContainer}>
             <div className="d-flex direction-column j-between w-full sm-md:j-start">
@@ -249,7 +240,7 @@ const GatewayStatusPanel = () => {
           </div>
         </>
       )}
-      {!hasStatistics && !isFetching && !noConnectionYet && !isUnavailable && (
+      {(isUnavailable || (!hasStatistics && !isFetching && !noConnectionYet)) && (
         <EmptyState title={m.isUnavailable} message={m.isUnavailableDesc} />
       )}
     </Panel>

pkg/webui/console/views/gateway/index.js

@@ -45,6 +45,8 @@ import {
   stopGatewayEventsStream,
   getGatewaysRightsList,
   getGatewayClaimInfoByEui,
+  startGatewayStatistics,
+  stopGatewayStatistics,
 } from '@console/store/actions/gateways'
 import { getGsFrequencyPlans } from '@console/store/actions/configuration'
 import { trackRecencyFrequencyItem } from '@console/store/actions/recency-frequency-items'
@@ -86,12 +88,20 @@ const Gateway = () => {
       await dispatch(getGsFrequencyPlans())
 
       const { ids } = await dispatch(attachPromise(getGateway(gtwId, selector)))
+      await dispatch(startGatewayStatistics(gtwId))
 
       await dispatch(attachPromise(getGatewayClaimInfoByEui(ids.eui, true)))
     },
     [gtwId],
   )
-  useEffect(() => () => dispatch(stopGatewayEventsStream(gtwId)), [gtwId, dispatch])
+
+  useEffect(
+    () => () => {
+      dispatch(stopGatewayStatistics())
+      dispatch(stopGatewayEventsStream(gtwId))
+    },
+    [dispatch, gtwId],
+  )
 
   // Track gateway access.
   useEffect(() => {