diff --git a/pkg/webui/console/containers/gateway-connection/index.js b/pkg/webui/console/containers/gateway-connection/index.js index 7b5c52b82c..0e4389af64 100644 --- a/pkg/webui/console/containers/gateway-connection/index.js +++ b/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) diff --git a/pkg/webui/console/containers/gateway-status-panel/index.js b/pkg/webui/console/containers/gateway-status-panel/index.js index 9350c3277e..c6737010d4 100644 --- a/pkg/webui/console/containers/gateway-status-panel/index.js +++ b/pkg/webui/console/containers/gateway-status-panel/index.js @@ -108,13 +108,13 @@ 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' @@ -190,15 +190,7 @@ const GatewayStatusPanel = () => { )} - {isUnavailable && ( -
-
- - -
-
- )} - {hasStatistics && !isFetching && !noConnectionYet && !isUnavailable && ( + {hasStatistics && !isFetching && !isUnavailable && ( <>
@@ -248,7 +240,7 @@ const GatewayStatusPanel = () => {
)} - {!hasStatistics && !isFetching && !noConnectionYet && !isUnavailable && ( + {(isUnavailable || (!hasStatistics && !isFetching && !noConnectionYet)) && ( )} diff --git a/pkg/webui/console/views/gateway/index.js b/pkg/webui/console/views/gateway/index.js index 2b51e29e78..5997b48837 100644 --- a/pkg/webui/console/views/gateway/index.js +++ b/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(() => {