feat: WNS Lookup (#51)

packages/console-app/src/components/Panel.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    overflowY: 'scroll'
+    overflow: 'hidden'
   }
 }));
 

packages/console-app/src/containers/panels/wns/WNS.js

@@ -15,10 +15,12 @@ import Toolbar from '../../../components/Toolbar';
 
 import WNSRecords, { WNSRecordType } from './WNSRecords';
 import WNSStatus from './WNSStatus';
+import WNSLookup from './WNSLookup';
 
 const TAB_RECORDS = 'records';
 const TAB_STATUS = 'status';
 const TAB_LOG = 'log';
+const TAB_LOOKUP = 'lookup';
 
 const useStyles = makeStyles(() => ({
   expand: {
@@ -27,7 +29,7 @@ const useStyles = makeStyles(() => ({
 
   panel: {
     display: 'flex',
-    overflow: 'hidden',
+    overflowY: 'scroll',
     flex: 1
   },
 
@@ -49,6 +51,7 @@ const WNS = () => {
         <Toolbar>
           <Tabs value={tab} onChange={(_, value) => setTab(value)}>
             <Tab value={TAB_RECORDS} label='Records' />
+            <Tab value={TAB_LOOKUP} label='Lookup' />
             <Tab value={TAB_STATUS} label='Status' />
             <Tab value={TAB_LOG} label='Log' />
           </Tabs>
@@ -66,6 +69,12 @@ const WNS = () => {
           </div>
         )}
 
+        {tab === TAB_LOOKUP && (
+          <div className={classes.panel}>
+            <WNSLookup />
+          </div>
+        )}
+
         {tab === TAB_STATUS && (
           <div className={classes.panel}>
             <Paper className={classes.paper}>

packages/console-app/src/containers/panels/wns/WNSLookup.js

@@ -0,0 +1,136 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import React, { useContext, useState } from 'react';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import Button from '@material-ui/core/Button';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import TableBody from '@material-ui/core/TableBody';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableRow from '@material-ui/core/TableRow';
+import TextField from '@material-ui/core/TextField';
+
+import { useQuery } from '@apollo/react-hooks';
+
+import Json from '../../../components/Json';
+import Table from '../../../components/Table';
+import TableCell from '../../../components/TableCell';
+import { ConsoleContext, useQueryStatusReducer, useRegistry } from '../../../hooks';
+
+import WNS_RECORDS from '../../../gql/wns_records.graphql';
+
+const WNSLookup = () => {
+  const { config } = useContext(ConsoleContext);
+  const { registry } = useRegistry(config);
+  const [result, setResult] = useState({});
+  const [inputValue, setInputValue] = useState('');
+  const [lookupType, setLookupType] = useState('wrn');
+
+  const data = useQueryStatusReducer(useQuery(WNS_RECORDS, {
+    pollInterval: config.api.intervalQuery
+  }));
+
+  if (!data) {
+    return null;
+  }
+  const records = JSON.parse(data.wns_records.json);
+
+  const getNames = () => {
+    let ret;
+    switch (lookupType) {
+      case 'wrn': {
+        ret = [];
+        records.forEach(item => ret.push(...item.names));
+        break;
+      }
+      case 'authority': {
+        // Use the known names to come up with a default list of authorities.
+        // TODO(telackey): Should we be able to query WNS for a list of authorities?
+        const names = new Set();
+        for (const record of records) {
+          for (const name of record.names) {
+            // TODO(telackey): We need a general purpose WRN handling library.
+            names.add(name.replace('wrn://', '').split('/')[0]);
+          }
+        }
+        ret = Array.from(names.values());
+        break;
+      }
+      default:
+        throw new Error(`Unrecognized lookup type: ${lookupType}`);
+    }
+    ret.sort();
+    return ret;
+  };
+
+  const handleSelect = (evt) => {
+    evt.preventDefault();
+
+    setLookupType(evt.target.value);
+  };
+
+  const handleSubmit = async (evt) => {
+    evt.preventDefault();
+
+    if (!inputValue) {
+      setResult('');
+      return;
+    }
+
+    let result;
+    switch (lookupType) {
+      case 'wrn':
+        result = await registry.lookupNames([inputValue], true);
+        break;
+      case 'authority':
+        result = await registry.lookupAuthorities([inputValue]);
+        break;
+      default:
+        throw new Error(`Unrecognized lookup type: ${lookupType}`);
+    }
+    setResult(result);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <TableContainer>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell align='left' width='150px' style={{ verticalAlign: 'middle' }}>
+                  <NativeSelect id='lookupType' name='lookupType' defaultValue='wrn' onChange={handleSelect}>
+                    <option value='authority'>Authority</option>
+                    <option value='wrn'>WRN</option>
+                  </NativeSelect>
+                </TableCell>
+                <TableCell align='left'>
+                  <Autocomplete
+                    options={getNames()}
+                    autoFocus
+                    name='value'
+                    id='value'
+                    fullWidth
+                    freeSolo
+                    inputValue={inputValue}
+                    onInputChange={(event, newInputValue) => {
+                      setInputValue(newInputValue);
+                    }}
+                    renderInput={(params) => <TextField {...params} variant='outlined' />}
+                  />
+                </TableCell>
+                <TableCell align='left' width='150px' style={{ verticalAlign: 'middle' }}>
+                  <Button variant='contained' color='primary' type='submit'>Search</Button>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </form>
+      <Json data={result} />
+    </div>
+  );
+};
+
+export default WNSLookup;

packages/console-app/src/version.json

@@ -1,7 +1,7 @@
 {
   "build": {
     "name":      "@dxos/console-app",
-    "buildDate": "2020-10-08T05:13:10.720Z",
+    "buildDate": "2020-10-19T16:21:30.158Z",
-    "version":   "1.1.0-beta.8"
+    "version":   "1.1.0-beta.9"
   }
 }