[WIFI-11742] Wifi analysis now displays bands when available

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(22)",
+  "version": "2.8.0(23)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.8.0(22)",
+      "version": "2.8.0(23)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(22)",
+  "version": "2.8.0(23)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/hooks/Network/Statistics.ts

@@ -86,6 +86,7 @@ export type DeviceStatistics = {
     active_ms: number;
     busy_ms: number;
     channel: number;
+    band?: string[];
     channel_width: string;
     noise: number;
     phy: string;

src/pages/Device/WifiAnalysis/AssocationsTable.tsx

@@ -47,16 +47,19 @@ const WifiAnalysisAssocationsTable = ({ data, ouis }: Props) => {
     [],
   );
   const dataCell = React.useCallback((v: number) => <DataCell bytes={v} />, []);
+  const indexCell = React.useCallback((assoc: ParsedAssociation) => assoc.radio?.band ?? assoc.radio?.index, []);
 
   const columns: Column<ParsedAssociation>[] = React.useMemo(
     (): Column<ParsedAssociation>[] => [
       {
         id: 'index',
-        Header: '#',
+        Header: '',
         Footer: '',
         accessor: 'radio.index',
+        Cell: ({ cell }) => indexCell(cell.row.original),
         customWidth: '35px',
         alwaysShow: true,
+        disableSortBy: true,
       },
       {
         id: 'station',
@@ -171,7 +174,7 @@ const WifiAnalysisAssocationsTable = ({ data, ouis }: Props) => {
           }
           hiddenColumns={hiddenColumns}
           data={data ?? []}
-          hideEmptyListText
+          sortBy={data?.[0]?.radio?.band ? [{ id: 'index', desc: true }] : undefined}
           // @ts-ignore
           hideControls
           showAllRows

src/pages/Device/WifiAnalysis/RadiosTable.tsx

@@ -7,6 +7,7 @@ import { Column } from 'models/Table';
 
 export type ParsedRadio = {
   recorded: number;
+  band?: string;
   index: number;
   channel: number;
   channelWidth: string;
@@ -26,15 +27,19 @@ const WifiAnalysisRadioTable = ({ data }: Props) => {
   const { t } = useTranslation();
   const [hiddenColumns, setHiddenColumns] = React.useState<string[]>([]);
 
+  const indexCell = React.useCallback((radio: ParsedRadio) => radio?.band ?? radio?.index, []);
+
   const columns: Column<ParsedRadio>[] = React.useMemo(
     (): Column<ParsedRadio>[] => [
       {
         id: 'index',
-        Header: '#',
+        Header: '',
         Footer: '',
         accessor: 'index',
+        Cell: ({ cell }) => indexCell(cell.row.original),
         customWidth: '35px',
         alwaysShow: true,
+        disableSortBy: true,
       },
       {
         id: 'channel',
@@ -115,6 +120,7 @@ const WifiAnalysisRadioTable = ({ data }: Props) => {
           hiddenColumns={hiddenColumns}
           data={data ?? []}
           obj={t('controller.devices.logs')}
+          sortBy={data?.[0]?.band ? [{ id: 'index', desc: true }] : undefined}
           // @ts-ignore
           hideControls
           showAllRows

src/pages/Device/WifiAnalysis/index.tsx

@@ -24,6 +24,7 @@ const parseRadios = (t: (str: string) => string, data: { data: DeviceStatistics;
         radios.push({
           recorded: data.recorded,
           index: i,
+          band: radio.band?.[0],
           channel: radio.channel,
           channelWidth: radio.channel_width,
           noise: radio.noise ? parseDbm(radio.noise) : '-',