Separate servers and channels into different tabs.

packages/console-app/src/containers/panels/signal/SignalChannels.js

@@ -0,0 +1,57 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import React, { useContext } from 'react';
+import { useQuery } from '@apollo/react-hooks';
+
+import TableBody from '@material-ui/core/TableBody';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+import Table from '../../../components/Table';
+import TableCell from '../../../components/TableCell';
+
+import SIGNAL_STATUS from '../../../gql/signal_status.graphql';
+
+import { ConsoleContext, useQueryStatusReducer } from '../../../hooks';
+
+const SignalChannels = () => {
+  const { config } = useContext(ConsoleContext);
+  const data = useQueryStatusReducer(useQuery(SIGNAL_STATUS, { pollInterval: config.api.intervalQuery }));
+  if (!data) {
+    return null;
+  }
+
+  const { json: { channels = [] } } = data.signal_status;
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Channel</TableCell>
+            <TableCell size='small'>Participants</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {channels.map(({ channel, peers = [] }) => {
+            return (
+              <TableRow key={channel} size='small'>
+                <TableCell monospace>
+                  {channel}
+                </TableCell>
+                <TableCell monospace>
+                  {peers.length}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default SignalChannels;

packages/console-app/src/containers/panels/signal/SignalServers.js

@@ -24,26 +24,22 @@ const SignalServers = () => {
     return null;
   }
 
-  const { json: { channels = [] } } = data.signal_status;
+  const { json: { signals = [] } } = data.signal_status;
 
   return (
     <TableContainer>
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell>Server</TableCell>
-            <TableCell size='small' s>Peers</TableCell>
+            <TableCell>Signal Server</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {channels.map(({ channel, peers = [] }) => {
+          {signals.map((signal) => {
             return (
-              <TableRow key={channel} size='small'>
+              <TableRow key={signal} size='small'>
                 <TableCell monospace>
-                  {channel}
-                </TableCell>
-                <TableCell monospace>
-                  {peers.length}
+                  {signal}
                 </TableCell>
               </TableRow>
             );

packages/console-app/src/containers/panels/signal/Signaling.js

@@ -13,9 +13,11 @@ import Panel from '../../../components/Panel';
 import Toolbar from '../../../components/Toolbar';
 import LogPoller from '../../../components/LogPoller';
 
+import SignalChannels from './SignalChannels';
 import SignalServers from './SignalServers';
 
-const TAB_STATUS = 'status';
+const TAB_NETWORK = 'servers';
+const TAB_CHANNELS = 'channels';
 const TAB_LOG = 'log';
 
 const useStyles = makeStyles(() => ({
@@ -38,21 +40,22 @@ const useStyles = makeStyles(() => ({
 
 const Signal = () => {
   const classes = useStyles();
-  const [tab, setTab] = useState(TAB_STATUS);
+  const [tab, setTab] = useState(TAB_NETWORK);
 
   return (
     <Panel
       toolbar={
         <Toolbar>
           <Tabs value={tab} onChange={(_, value) => setTab(value)}>
-            <Tab value={TAB_STATUS} label='Status' />
+            <Tab value={TAB_NETWORK} label='Network' />
+            <Tab value={TAB_CHANNELS} label='Channels' />
             <Tab value={TAB_LOG} label='Log' />
           </Tabs>
         </Toolbar>
       }
     >
       <TabContext value={tab}>
-        {tab === TAB_STATUS && (
+        {tab === TAB_NETWORK && (
           <div className={classes.panel}>
             <Paper className={classes.paper}>
               <SignalServers />
@@ -60,6 +63,14 @@ const Signal = () => {
           </div>
         )}
 
+        {tab === TAB_CHANNELS && (
+          <div className={classes.panel}>
+            <Paper className={classes.paper}>
+              <SignalChannels />
+            </Paper>
+          </div>
+        )}
+
         {tab === TAB_LOG && (
           <div className={classes.panel}>
             <LogPoller service='signal' />

packages/console-app/src/version.json

@@ -1,7 +1,7 @@
 {
   "build": {
     "name":      "@dxos/console-app",
-    "buildDate": "2020-07-20T22:54:23.462Z",
-    "version":   "1.0.0-beta.19"
+    "buildDate": "2020-07-21T16:37:30.252Z",
+    "version":   "1.0.0-beta.21"
   }
 }