Restructure tables.

2020-07-20 18:53:43 -04:00 · 2020-07-20 18:53:43 -04:00 · 41be72c78d
commit 41be72c78d
parent c0ff3a7969
17 changed files with 378 additions and 204 deletions
--- a/packages/console-app/src/components/Log.js
+++ b/packages/console-app/src/components/Log.js
@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
    padding: theme.spacing(1),

    '& div': {
-      fontSize: 16,
+      fontSize: 14,
      fontFamily: 'monospace',
      whiteSpace: 'nowrap'
    }
--- a/packages/console-app/src/components/QueryLink.js
+++ b/packages/console-app/src/components/QueryLink.js
@ -9,32 +9,54 @@ import Link from '@material-ui/core/Link';

 import { getServiceUrl } from '../util/config';

-const QUERY = `{
-  queryRecords(attributes: [
-   { key: "name", value: { string: "%NAME%" }}]) {
-     id type name bondId createTime expiryTime owners attributes { key, value { string, json } }
-   }
-}`;
+// TODO(burdon): print actual GRAPHQL query.
+const QUERY = `
+query {
+  queryRecords(attributes: [{ key: "name", value: { string: "%NAME%" } }]) {
+    id
+    type
+    name
+    bondId
+    createTime
+    expiryTime
+    owners
+    attributes {
+      key
+      value {
+        string
+        json
+      }
+    }
+  }
+}
+`;

 /**
 * Render link to record in WNS.
 * @param {Object} config
 * @param {string} name
 * @param {string} [text]
+ * @param {boolean} icon
 */
 const QueryLink = ({ config, name, text, icon = false }) => {
  const baseURL = getServiceUrl(config, 'wns.webui');
  const query = QUERY.replace('%NAME%', name);
+
+  // TODO(burdon): This doesn't work.
  const fullURL = encodeURI(`${baseURL}?query=${query}`);

+  console.log(fullURL);
+
  if (icon) {
    return (
-      <Link href={fullURL} target='wns'>
+      <Link href={fullURL} target='WNS_GraphQL'>
        <ExitToApp />
      </Link>
    );
  }
-  return <Link href={fullURL} target='wns'>{text || name}</Link>;
+  return (
+    <Link href={fullURL} target='wns'>{text || name}</Link>
+  );
 };

 export default QueryLink;
--- a/packages/console-app/src/components/Sidebar.js
+++ b/packages/console-app/src/components/Sidebar.js
@ -5,6 +5,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { useHistory, useParams } from 'react-router';
+
 import { makeStyles } from '@material-ui/core';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@ -17,7 +18,6 @@ const useStyles = makeStyles(theme => ({
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between'
-    // backgroundColor: theme.palette.grey[100]
  },

  list: {
--- a/packages/console-app/src/components/TableCell.js
+++ b/packages/console-app/src/components/TableCell.js
@ -9,18 +9,18 @@ import MuiTableCell from '@material-ui/core/TableCell';
 import { makeStyles } from '@material-ui/core';

 const useStyles = makeStyles(() => ({
+  icon: {
+    width: 48
+  },
  small: {
-    width: 160
+    width: 130
  },
  medium: {
-    width: 220
-  },
-  icon: {
-    width: 120
+    width: 170
  }
 }));

-const TableCell = ({ children, size, monospace = false, title, ...rest }) => {
+const TableCell = ({ children, size, monospace = false, style, title, ...rest }) => {
  const classes = useStyles();

  return (
@ -31,8 +31,10 @@ const TableCell = ({ children, size, monospace = false, title, ...rest }) => {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
+        verticalAlign: 'top',
        fontFamily: monospace ? 'monospace' : 'inherit',
-        fontSize: monospace ? 14 : 'inherit'
+        fontSize: monospace ? 14 : 13,
+        ...style
      }}
      title={title}
    >
--- a/packages/console-app/src/containers/Main.js
+++ b/packages/console-app/src/containers/Main.js
@ -25,7 +25,7 @@ import Config from './panels/Config';
 import IPFS from './panels/ipfs/IPFS';
 import Metadata from './panels/Metadata';
 import Signaling from './panels/signal/Signaling';
-import Status from './panels/Status';
+import System from './panels/system/Status';
 import WNS from './panels/wns/WNS';

 // Global error handler.
@ -52,7 +52,7 @@ const Main = ({ config }) => {
                  <Route path='/ipfs' component={IPFS} />
                  <Route path='/metadata' component={Metadata} />
                  <Route path='/signaling' component={Signaling} />
-                  <Route path='/status' component={Status} />
+                  <Route path='/system' component={System} />
                  <Route path='/wns' component={WNS} />
                </Layout>
              </Route>
--- a/packages/console-app/src/containers/panels/ipfs/IPFS.js
+++ b/packages/console-app/src/containers/panels/ipfs/IPFS.js
@ -13,9 +13,12 @@ import Panel from '../../../components/Panel';
 import Toolbar from '../../../components/Toolbar';

 import LogPoller from '../../../components/LogPoller';
+
+import IPFSNetwork from './IPFSNetwork';
 import IPFSStatus from './IPFSStatus';

 const TAB_STATUS = 'status';
+const TAB_NETWORK = 'network';
 const TAB_LOG = 'log';
 const TAB_SWARM_LOG = 'swarm';

@ -47,6 +50,7 @@ const IPFS = () => {
        <Toolbar>
          <Tabs value={tab} onChange={(_, value) => setTab(value)}>
            <Tab value={TAB_STATUS} label='Status' />
+            <Tab value={TAB_NETWORK} label='Network' />
            <Tab value={TAB_LOG} label='Log' />
            <Tab value={TAB_SWARM_LOG} label='Connection Log' />
          </Tabs>
@ -55,23 +59,27 @@ const IPFS = () => {
    >
      <TabContext value={tab}>
        {tab === TAB_STATUS && (
-          <div className={classes.panel}>
-            <Paper className={classes.paper}>
-              <IPFSStatus />
-            </Paper>
-          </div>
+          <Paper className={classes.paper}>
+            <IPFSStatus />
+          </Paper>
+        )}
+
+        {tab === TAB_NETWORK && (
+          <Paper className={classes.paper}>
+            <IPFSNetwork />
+          </Paper>
        )}

        {tab === TAB_LOG && (
-          <div className={classes.panel}>
+          <Paper className={classes.paper}>
            <LogPoller service='ipfs' />
-          </div>
+          </Paper>
        )}

        {tab === TAB_SWARM_LOG && (
-          <div className={classes.panel}>
+          <Paper className={classes.paper}>
            <LogPoller service='ipfs-swarm-connect' />
-          </div>
+          </Paper>
        )}
      </TabContext>
    </Panel>
--- a/packages/console-app/src/containers/panels/ipfs/IPFSNetwork.js
+++ b/packages/console-app/src/containers/panels/ipfs/IPFSNetwork.js
@ -0,0 +1,140 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import React from 'react';
+import get from 'lodash.get';
+
+import { useQuery } from '@apollo/react-hooks';
+import { makeStyles } from '@material-ui/core';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+import IPFS_STATUS from '../../../gql/ipfs_status.graphql';
+import WNS_RECORDS from '../../../gql/wns_records.graphql';
+
+import { useQueryStatusReducer } from '../../../hooks';
+
+import Table from '../../../components/Table';
+import TableCell from '../../../components/TableCell';
+import { BooleanIcon } from '../../../components/BooleanIcon';
+
+const RECORD_TYPE = 'wrn:service';
+const SERVICE_TYPE = 'ipfs';
+
+const useStyles = makeStyles((theme) => ({
+  tableContainer: {
+    flex: 1,
+    overflowY: 'scroll'
+  },
+
+  table: {
+    tableLayout: 'fixed',
+
+    '& th': {
+      fontVariant: 'all-small-caps',
+      fontSize: 18,
+      cursor: 'ns-resize'
+    }
+  },
+
+  connected: {
+    fontWeight: 'bold'
+  },
+
+  disconnected: {
+    fontStyle: 'italic'
+  },
+
+  colShort: {
+    width: '30%'
+  },
+
+  colWide: {},
+
+  colBoolean: {
+    width: '10%'
+  },
+
+  caption: {
+    backgroundColor: theme.palette.primary[500],
+    color: theme.palette.primary.contrastText,
+    paddingLeft: '1em',
+    margin: 0
+  }
+}));
+
+const IPFSStatus = () => {
+  const classes = useStyles();
+
+  const ipfsResponse = useQueryStatusReducer(useQuery(IPFS_STATUS));
+  const wnsResponse = useQueryStatusReducer(useQuery(WNS_RECORDS, {
+    variables: { attributes: { type: RECORD_TYPE, service: SERVICE_TYPE } }
+  }));
+
+  if (!wnsResponse || !ipfsResponse) {
+    return null;
+  }
+
+  const ipfsData = JSON.parse(ipfsResponse.ipfs_status.json);
+  const registeredServers = JSON.parse(wnsResponse.wns_records.json);
+
+  const displayServers = registeredServers.map((service) => {
+    const addresses = get(service, 'attributes.ipfs.addresses');
+    let connected = false;
+    for (const address of addresses) {
+      const parts = address.split('/');
+      const nodeId = parts[parts.length - 1];
+      connected = !!ipfsData.swarm.peers.find(({ peer }) => peer === nodeId);
+      if (connected) {
+        break;
+      }
+    }
+
+    return {
+      name: get(service, 'name'),
+      version: get(service, 'version'),
+      description: get(service, 'attributes.description'),
+      ipfs: get(service, 'attributes.ipfs'),
+      connected
+    };
+  });
+
+  displayServers.sort((a, b) => {
+    return a.connected && !b.connected ? -1 : b.connected && !a.connected ? 1 : b.name < a.name ? 1 : -1;
+  });
+
+  if (displayServers.length === 0) {
+    displayServers.push({ name: 'None' });
+  }
+
+  return (
+    <Table stickyHeader size='small' className={classes.table}>
+      <TableHead>
+        <TableRow>
+          <TableCell>Identifier</TableCell>
+          <TableCell size='medium'>Description</TableCell>
+          <TableCell size='icon'>Connected</TableCell>
+          <TableCell>Address</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {displayServers.map(({ name, description, ipfs, connected }) => (
+          <TableRow key={name}>
+            <TableCell>{name}</TableCell>
+            <TableCell>{description}</TableCell>
+            <TableCell>
+              <BooleanIcon yes={connected} />
+            </TableCell>
+            <TableCell>
+              {ipfs.addresses}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default IPFSStatus;
--- a/packages/console-app/src/containers/panels/ipfs/IPFSStatus.js
+++ b/packages/console-app/src/containers/panels/ipfs/IPFSStatus.js
@ -3,13 +3,8 @@
 //

 import React from 'react';
-import get from 'lodash.get';

 import { useQuery } from '@apollo/react-hooks';
-import { makeStyles } from '@material-ui/core';
-import TableBody from '@material-ui/core/TableBody';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';

 import IPFS_STATUS from '../../../gql/ipfs_status.graphql';
 import WNS_RECORDS from '../../../gql/wns_records.graphql';
@ -17,59 +12,11 @@ import WNS_RECORDS from '../../../gql/wns_records.graphql';
 import { useQueryStatusReducer } from '../../../hooks';

 import Json from '../../../components/Json';
-import Panel from '../../../components/Panel';
-import Table from '../../../components/Table';
-import TableCell from '../../../components/TableCell';
-import { BooleanIcon } from '../../../components/BooleanIcon';

 const RECORD_TYPE = 'wrn:service';
 const SERVICE_TYPE = 'ipfs';

-const useStyles = makeStyles((theme) => ({
-  tableContainer: {
-    flex: 1,
-    overflowY: 'scroll'
-  },
-
-  table: {
-    tableLayout: 'fixed',
-
-    '& th': {
-      fontVariant: 'all-small-caps',
-      fontSize: 18,
-      cursor: 'ns-resize'
-    }
-  },
-
-  connected: {
-    fontWeight: 'bold'
-  },
-
-  disconnected: {
-    fontStyle: 'italic'
-  },
-
-  colShort: {
-    width: '30%'
-  },
-
-  colWide: {},
-
-  colBoolean: {
-    width: '10%'
-  },
-
-  caption: {
-    backgroundColor: theme.palette.primary[500],
-    color: theme.palette.primary.contrastText,
-    paddingLeft: '1em',
-    margin: 0
-  }
-}));
-
 const IPFSStatus = () => {
-  const classes = useStyles();
-
  const ipfsResponse = useQueryStatusReducer(useQuery(IPFS_STATUS));
  const wnsResponse = useQueryStatusReducer(useQuery(WNS_RECORDS, {
    variables: { attributes: { type: RECORD_TYPE, service: SERVICE_TYPE } }
@ -80,77 +27,21 @@ const IPFSStatus = () => {
  }

  const ipfsData = JSON.parse(ipfsResponse.ipfs_status.json);
-  const registeredServers = JSON.parse(wnsResponse.wns_records.json);
-
-  const displayServers = registeredServers.map((service) => {
-    console.error(service);
-    const addresses = get(service, 'attributes.ipfs.addresses');
-    let connected = false;
-    for (const address of addresses) {
-      const parts = address.split('/');
-      const nodeId = parts[parts.length - 1];
-      connected = !!ipfsData.swarm.peers.find(({ peer }) => peer === nodeId);
-      if (connected) {
-        break;
-      }
+  const data = {
+    id: ipfsData.id.id,
+    version: ipfsData.id.agentVersion,
+    addresses: ipfsData.id.addresses,
+    swarm: {
+      peers: ipfsData.swarm.peers.length
+    },
+    repo: {
+      numObjects: ipfsData.repo.stats.numObjects,
+      repoSize: ipfsData.repo.stats.repoSize
    }
-
-    return {
-      name: get(service, 'name'),
-      version: get(service, 'version'),
-      description: get(service, 'attributes.description'),
-      ipfs: get(service, 'attributes.ipfs'),
-      connected
-    };
-  });
-
-  displayServers.sort((a, b) => {
-    return a.connected && !b.connected ? -1 : b.connected && !a.connected ? 1 : b.name < a.name ? 1 : -1;
-  });
-
-  if (displayServers.length === 0) {
-    displayServers.push({ name: 'None' });
-  }
+  };

  return (
-    <Panel>
-      <h4 className={classes.caption}>WNS-registered IPFS Servers</h4>
-      <Table stickyHeader size='small' className={classes.table}>
-        <TableHead>
-          <TableRow>
-            <TableCell>Identifier</TableCell>
-            <TableCell size='medium'>Description</TableCell>
-            <TableCell size='icon'>Connected</TableCell>
-            <TableCell>Address</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {displayServers.map(({ name, description, ipfs, connected }) => (
-            <TableRow key={name}>
-              <TableCell>{name}</TableCell>
-              <TableCell>{description}</TableCell>
-              <TableCell>
-                <BooleanIcon yes={connected} />
-              </TableCell>
-              <TableCell>
-                {ipfs.addresses}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-
-      <h4 className={classes.caption}>Local IPFS Server</h4>
-      <Json data={{
-        id: ipfsData.id.id,
-        version: ipfsData.id.agentVersion,
-        addresses: ipfsData.id.addresses,
-        peers: ipfsData.swarm.peers.length,
-        numObjects: ipfsData.repo.stats.numObjects,
-        repoSize: ipfsData.repo.stats.repoSize
-      }}
-      />
-    </Panel>
+    <Json data={data} />
  );
 };

--- a/packages/console-app/src/containers/panels/signal/SignalServers.js
+++ b/packages/console-app/src/containers/panels/signal/SignalServers.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 SignalServers = () => {
+  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>Server</TableCell>
+            <TableCell>Peers</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 SignalServers;
--- a/packages/console-app/src/containers/panels/signal/SignalStatus.js
+++ b/packages/console-app/src/containers/panels/signal/SignalStatus.js
@ -1,26 +0,0 @@
-//
-// Copyright 2020 DXOS.org
-//
-
-import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-
-import SIGNAL_STATUS from '../../../gql/signal_status.graphql';
-
-import { ConsoleContext, useQueryStatusReducer } from '../../../hooks';
-
-import Json from '../../../components/Json';
-
-const SignalStatus = () => {
-  const { config } = useContext(ConsoleContext);
-  const data = useQueryStatusReducer(useQuery(SIGNAL_STATUS, { pollInterval: config.api.intervalQuery }));
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <Json data={data.signal_status.json} />
-  );
-};
-
-export default SignalStatus;
--- a/packages/console-app/src/containers/panels/signal/Signaling.js
+++ b/packages/console-app/src/containers/panels/signal/Signaling.js
@ -11,10 +11,10 @@ import TabContext from '@material-ui/lab/TabContext';

 import Panel from '../../../components/Panel';
 import Toolbar from '../../../components/Toolbar';
-
-import SignalStatus from './SignalStatus';
 import LogPoller from '../../../components/LogPoller';

+import SignalServers from './SignalServers';
+
 const TAB_STATUS = 'status';
 const TAB_LOG = 'log';

@ -55,7 +55,7 @@ const Signal = () => {
        {tab === TAB_STATUS && (
          <div className={classes.panel}>
            <Paper className={classes.paper}>
-              <SignalStatus />
+              <SignalServers />
            </Paper>
          </div>
        )}
--- a/packages/console-app/src/containers/panels/system/Services.js
+++ b/packages/console-app/src/containers/panels/system/Services.js
@ -0,0 +1,74 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import React from 'react';
+
+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 { useSorter } from '../../../hooks';
+
+const format = (value, unit, symbol = '') => Math.floor(value / unit).toLocaleString() + symbol;
+
+const SignalServers = ({ services }) => {
+  const [sorter] = useSorter('name');
+
+  const total = services.reduce((value, { memory }) => value + memory, 0);
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Service</TableCell>
+            <TableCell style={{ width: 120 }}>Status</TableCell>
+            <TableCell style={{ width: 140, textAlign: 'right' }}>Memory</TableCell>
+            <TableCell style={{ width: 120, textAlign: 'right' }}>CPU</TableCell>
+            <TableCell>Command</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {services.sort(sorter).map(({ name, memory, cpu, status, exec }) => {
+            return (
+              <TableRow key={name} size='small'>
+                <TableCell monospace>
+                  {name}
+                </TableCell>
+                <TableCell>
+                  {status}
+                </TableCell>
+                <TableCell style={{ textAlign: 'right' }} monospace>
+                  {format(memory, 1000, 'K')}
+                </TableCell>
+                <TableCell style={{ textAlign: 'right' }} monospace>
+                  {cpu.toFixed(1)}
+                </TableCell>
+                <TableCell monospace>
+                  {exec}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+        <TableBody>
+          <TableRow>
+            <TableCell style={{ fontVariant: 'all-small-caps' }}>Total</TableCell>
+            <TableCell />
+            <TableCell style={{ textAlign: 'right' }} monospace>
+              {format(total, 1000, 'K')}
+            </TableCell>
+            <TableCell />
+            <TableCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default SignalServers;
--- a/packages/console-app/src/containers/panels/system/Status.js
+++ b/packages/console-app/src/containers/panels/system/Status.js
@ -9,17 +9,19 @@ import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TabContext from '@material-ui/lab/TabContext';

-import Json from '../../components/Json';
+import Json from '../../../components/Json';

-import SERVICE_STATUS from '../../gql/service_status.graphql';
-import SYSTEM_STATUS from '../../gql/system_status.graphql';
+import SERVICE_STATUS from '../../../gql/service_status.graphql';
+import SYSTEM_STATUS from '../../../gql/system_status.graphql';

-import { ConsoleContext, useQueryStatusReducer } from '../../hooks';
+import { ConsoleContext, useQueryStatusReducer } from '../../../hooks';

-import Panel from '../../components/Panel';
-import Toolbar from '../../components/Toolbar';
+import Panel from '../../../components/Panel';
+import Toolbar from '../../../components/Toolbar';

-const TAB_SYSTEM = 'system';
+import Services from './Services';
+
+const TAB_INFO = 'status';
 const TAB_SERVICES = 'services';

 const useStyles = makeStyles(() => ({
@ -43,37 +45,37 @@ const useStyles = makeStyles(() => ({
 const Status = () => {
  const classes = useStyles();
  const { config } = useContext(ConsoleContext);
-  const [tab, setTab] = useState(TAB_SYSTEM);
+  const [tab, setTab] = useState(TAB_SERVICES);
  const systemResponse = useQueryStatusReducer(useQuery(SYSTEM_STATUS, { pollInterval: config.api.intervalQuery }));
  const serviceResponse = useQueryStatusReducer(useQuery(SERVICE_STATUS, { pollInterval: config.api.intervalQuery }));
  if (!systemResponse || !serviceResponse) {
    return null;
  }

-  const systemData = JSON.parse(systemResponse.system_status.json);
-  const serviceData = JSON.parse(serviceResponse.service_status.json);
+  const status = JSON.parse(systemResponse.system_status.json);
+  const services = JSON.parse(serviceResponse.service_status.json);

  return (
    <Panel
      toolbar={
        <Toolbar>
          <Tabs value={tab} onChange={(_, value) => setTab(value)}>
-            <Tab value={TAB_SYSTEM} label='System' />
            <Tab value={TAB_SERVICES} label='Services' />
+            <Tab value={TAB_INFO} label='Info' />
          </Tabs>
        </Toolbar>
      }
    >
      <TabContext value={tab}>
-        {tab === TAB_SYSTEM && (
+        {tab === TAB_SERVICES && (
          <div className={classes.panel}>
-            <Json data={systemData} />
+            <Services services={services} />
          </div>
        )}

-        {tab === TAB_SERVICES && (
+        {tab === TAB_INFO && (
          <div className={classes.panel}>
-            <Json data={serviceData} />
+            <Json data={status} />
          </div>
        )}
      </TabContext>
--- a/packages/console-app/src/containers/panels/wns/WNSRecords.js
+++ b/packages/console-app/src/containers/panels/wns/WNSRecords.js
@ -83,13 +83,13 @@ const WNSRecords = ({ type }) => {
    <Table>
      <TableHead>
        <TableRow>
-          <TableCell onClick={sortBy('type')} size='small'>Type</TableCell>
+          <TableCell onClick={sortBy('type')} size='medium'>Type</TableCell>
          <TableCell onClick={sortBy('name')}>Identifier</TableCell>
-          <TableCell size='icon'>GraphQL</TableCell>
          <TableCell onClick={sortBy('attributes.displayName')}>Name</TableCell>
          <TableCell onClick={sortBy('version')} size='small'>Version</TableCell>
          <TableCell onClick={sortBy('createTime')} size='small'>Created</TableCell>
-          <TableCell onClick={sortBy('package')} size='small'>Package</TableCell>
+          <TableCell onClick={sortBy('package')}>Package</TableCell>
+          <TableCell size='icon' />
        </TableRow>
      </TableHead>
      <TableBody>
@ -117,16 +117,20 @@ const WNSRecords = ({ type }) => {
                  {appLink || name}
                </TableCell>
                <TableCell>
-                  <QueryLink config={config} name={name} icon />
+                  {displayName || service || description}
                </TableCell>
-                <TableCell>{displayName || service || description}</TableCell>
                <TableCell monospace>
                  {verLink || version}
                </TableCell>
-                <TableCell>{moment.utc(createTime).fromNow()}</TableCell>
+                <TableCell>
+                  {moment.utc(createTime).fromNow()}
+                </TableCell>
                <TableCell monospace>
                  {pkgLink}
                </TableCell>
+                <TableCell>
+                  <QueryLink config={config} name={name} icon />
+                </TableCell>
              </TableRow>
            );
          }
--- a/packages/console-app/src/hooks/sorter.js
+++ b/packages/console-app/src/hooks/sorter.js
@ -6,7 +6,7 @@ import get from 'lodash.get';
 import { useState } from 'react';

 // TODO(burdon): Enable multiple sort order (e.g., id, version).
-export const useSorter = (initSort, initAscend) => {
+export const useSorter = (initSort, initAscend = true) => {
  const [{ sort, ascend }, setSort] = useState({ sort: initSort, ascend: initAscend });

  const sorter = (item1, item2) => {
--- a/packages/console-app/src/modules.js
+++ b/packages/console-app/src/modules.js
@ -14,8 +14,8 @@ import ServicesIcon from '@material-ui/icons/Storage';
 export default {
  services: [
    {
-      path: '/status',
-      title: 'Status',
+      path: '/system',
+      title: 'System',
      icon: StatsIcon
    },
    {
--- a/packages/console-app/src/version.json
+++ b/packages/console-app/src/version.json
@ -1,7 +1,7 @@
 {
  "build": {
    "name":      "@dxos/console-app",
-    "buildDate": "2020-07-20T17:06:29.786Z",
-    "version":   "1.0.0-beta.16"
+    "buildDate": "2020-07-20T18:34:32.825Z",
+    "version":   "1.0.0-beta.17"
  }
 }