Add gateway status panel

pkg/webui/components/data-sheet/index.js

@@ -14,7 +14,6 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { defineMessages } from 'react-intl'
 
 import SafeInspector from '@ttn-lw/components/safe-inspector'
 
@@ -25,10 +24,6 @@ import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 import style from './data-sheet.styl'
 
-const m = defineMessages({
-  noData: 'No data available',
-})
-
 const DataSheet = ({ className, data }) => (
   <table className={classnames(className, style.table)}>
     <tbody>
@@ -61,7 +56,7 @@ const DataSheet = ({ className, data }) => (
           ) : (
             <tr>
               <th colSpan={2}>
-                <Message content={group.emptyMessage || m.noData} />
+                <Message content={group.emptyMessage || sharedMessages.noData} />
               </th>
             </tr>
           )}

pkg/webui/components/panel/index.js

@@ -45,6 +45,7 @@ const Panel = ({
   children,
   title,
   icon,
+  iconClassName,
   toggleOptions,
   activeToggle,
   onToggleClick,
@@ -59,7 +60,7 @@ const Panel = ({
   <div className={classnames(styles.panel, className)}>
     <div className="d-flex j-between al-center mb-cs-m gap-cs-m">
       <div className="d-flex gap-cs-xs al-center overflow-hidden">
-        {icon && <Icon icon={icon} className={styles.panelHeaderIcon} />}
+        {icon && <Icon icon={icon} className={classnames(styles.panelHeaderIcon, iconClassName)} />}
         <Message content={title} className={styles.panelHeaderTitle} />
         {messageDecorators}
       </div>
@@ -90,6 +91,7 @@ Panel.propTypes = {
   className: PropTypes.string,
   divider: PropTypes.bool,
   icon: PropTypes.icon,
+  iconClassName: PropTypes.string,
   messageDecorators: PropTypes.node,
   onToggleClick: PropTypes.func,
   shortCutLinkDisabled: PropTypes.bool,
@@ -112,6 +114,7 @@ Panel.defaultProps = {
   shortCutLinkPath: undefined,
   shortCutLinkTitle: undefined,
   shortCutLinkTarget: undefined,
+  iconClassName: undefined,
 }
 
 export { Panel as default, PanelError }

pkg/webui/components/panel/panel.styl

@@ -26,6 +26,7 @@
     &-title
       font-weight: $fwv2.bold
       font-size: $fsv2.l
+      line-height: 1.3
       white-space: nowrap
       text-overflow: ellipsis
       overflow: hidden

pkg/webui/components/status-label/index.js

@@ -15,17 +15,17 @@
 import React, { useMemo } from 'react'
 import classnames from 'classnames'
 
-import Message from '@ttn-lw/lib/components/message'
-
-import PropTypes from '@ttn-lw/lib/prop-types'
-import from from '@ttn-lw/lib/from'
-
 import Icon, {
   IconCircleCheckFilled,
   IconAlertTriangleFilled,
   IconAlertCircleFilled,
   IconInfoCircleFilled,
-} from '../icon'
+} from '@ttn-lw/components/icon'
+
+import Message from '@ttn-lw/lib/components/message'
+
+import PropTypes from '@ttn-lw/lib/prop-types'
+import from from '@ttn-lw/lib/from'
 
 import style from './status-label.styl'
 

pkg/webui/components/status/index.js

@@ -23,6 +23,7 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 import style from './status.styl'
 
 const m = defineMessages({
+  green: 'green',
   good: 'good',
   bad: 'bad',
   mediocre: 'mediocre',
@@ -31,7 +32,7 @@ const m = defineMessages({
 
 const Status = React.forwardRef(
   (
-    { className, status, label, pulse, pulseTrigger, labelValues, children, title, flipped },
+    { className, status, label, pulse, pulseTrigger, labelValues, children, title, flipped, big },
     ref,
   ) => {
     const intl = useIntl()
@@ -50,6 +51,7 @@ const Status = React.forwardRef(
     }, [setAnimate])
 
     const cls = classnames(style.status, {
+      [style.statusGreen]: status === 'green',
       [style.statusGood]: status === 'good',
       [style.statusBad]: status === 'bad',
       [style.statusMediocre]: status === 'mediocre',
@@ -58,6 +60,7 @@ const Status = React.forwardRef(
       [style.flipped]: flipped,
       [style[`triggered-${status}-pulse`]]: animate,
       [style.dotOnly]: !label && !children,
+      [style.statusBig]: big,
     })
 
     let statusLabel = null
@@ -100,6 +103,7 @@ const Status = React.forwardRef(
 )
 
 Status.propTypes = {
+  big: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   flipped: PropTypes.bool,
@@ -111,7 +115,7 @@ Status.propTypes = {
     PropTypes.number,
     PropTypes.instanceOf(Date),
   ]),
-  status: PropTypes.oneOf(['good', 'bad', 'mediocre', 'unknown']),
+  status: PropTypes.oneOf(['green', 'good', 'bad', 'mediocre', 'unknown']),
   title: PropTypes.message,
 }
 
@@ -125,6 +129,7 @@ Status.defaultProps = {
   pulseTrigger: undefined,
   status: 'unknown',
   title: undefined,
+  big: false,
 }
 
 export default Status

pkg/webui/components/status/status.styl

@@ -20,6 +20,10 @@
   border-radius: 50%
   transition: background-color $ad.m
 
+  &-big
+    width: 8px
+    height: 8px
+
   &:not(.dot-only)
     &:not(.flipped)
       margin-left: $cs.xs
@@ -37,6 +41,9 @@
     opacity: .7
     animation: pulse 2s infinite
 
+  &-green
+    background-color: var(--c-bg-success-normal)
+
   &-good
     background-color: var(--c-text-brand-normal)
 

pkg/webui/console/containers/gateway-overview-header/gateway-overview-header.styl

@@ -15,7 +15,7 @@
 .root
   position: sticky
   top: 0
-  z-index: calc($zi.dropdown - 1)
+  z-index: $zi.dropdown - 1
   display: flex
   justify-content: space-between
   gap: $cs.xl

pkg/webui/console/containers/gateway-status-panel/duty-cycle-utilization.js

@@ -0,0 +1,150 @@
+// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react'
+import { FormattedNumber, defineMessages } from 'react-intl'
+import classNames from 'classnames'
+import ReactApexChart from 'react-apexcharts'
+
+import Message from '@ttn-lw/lib/components/message'
+
+import PropTypes from '@ttn-lw/lib/prop-types'
+
+import style from './gateway-status-panel.styl'
+
+const m = defineMessages({
+  frequencyRange: '{minFreq} - {maxFreq}MHz',
+})
+
+const options = {
+  chart: {
+    type: 'radialBar',
+  },
+  grid: {
+    padding: {
+      left: -9,
+      right: -9,
+      bottom: -12,
+      top: -9,
+    },
+  },
+  colors: [
+    ({ value }) => {
+      if (value < 55) {
+        return '#1CB041'
+      } else if (value === 100) {
+        return '#DB2328'
+      }
+
+      return '#DB7600'
+    },
+  ],
+  stroke: {
+    lineCap: 'round',
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  legend: {
+    show: false,
+  },
+  plotOptions: {
+    radialBar: {
+      track: {
+        show: true,
+        margin: 1.5,
+      },
+      dataLabels: {
+        show: false,
+      },
+    },
+  },
+}
+
+const DutyCycleUtilization = ({ index, gatewayStats, band }) => {
+  const maxFrequency = band.max_frequency / 1e6
+  const minFrequency = band.min_frequency / 1e6
+  const utilization = band.downlink_utilization
+    ? (band.downlink_utilization * 100) / band.downlink_utilization_limit
+    : 0
+
+  return (
+    <div
+      className={classNames(style.gtwStatusPanelDutyCycle, {
+        'mb-cs-m': index !== gatewayStats.sub_bands.length - 1,
+        'mt-cs-l': index === 0,
+      })}
+    >
+      <Message
+        content={m.frequencyRange}
+        values={{
+          minFreq: minFrequency.toFixed(1),
+          maxFreq: maxFrequency.toFixed(1),
+        }}
+        className="fs-s"
+      />
+      <div className="d-flex al-center j-center gap-cs-xs">
+        <div className="md:d-none">
+          <ReactApexChart
+            options={options}
+            series={[utilization.toFixed(2)]}
+            type="radialBar"
+            height={20}
+            width={20}
+          />
+        </div>
+        <span
+          className={classNames('fs-s fw-bold', {
+            'c-text-success-normal': utilization <= 60,
+            'c-text-warning-normal': utilization > 60 && utilization < 100,
+            'c-text-error-normal': utilization === 100,
+          })}
+          style={{ minWidth: '39px' }}
+        >
+          <FormattedNumber
+            style="percent"
+            value={
+              isNaN(band.downlink_utilization / band.downlink_utilization_limit)
+                ? 0
+                : band.downlink_utilization / band.downlink_utilization_limit
+            }
+            minimumFractionDigits={2}
+          />
+        </span>
+      </div>
+    </div>
+  )
+}
+
+DutyCycleUtilization.propTypes = {
+  band: PropTypes.shape({
+    downlink_utilization: PropTypes.number,
+    downlink_utilization_limit: PropTypes.number,
+    max_frequency: PropTypes.number,
+    min_frequency: PropTypes.number,
+  }).isRequired,
+  gatewayStats: PropTypes.shape({
+    sub_bands: PropTypes.arrayOf(
+      PropTypes.shape({
+        downlink_utilization: PropTypes.number,
+        downlink_utilization_limit: PropTypes.number,
+        max_frequency: PropTypes.number,
+        min_frequency: PropTypes.number,
+      }),
+    ),
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+}
+
+export default DutyCycleUtilization