From 5d01779dc05e703d3401af42e746e5ab9872b373 Mon Sep 17 00:00:00 2001
From: Risha Mars <mars@buoyant.io>
Date: Tue, 7 Aug 2018 14:29:02 -0700
Subject: [PATCH] Tap Web UI: add autocomplete for some authorities (#1409)

Problem:
Currently the web UI's resource autocomplete also lists authorities.
However you can't tap authorities in this way, you have to use --authority
in addition to whatever resource you're trying to tap.
The web UI is confusing as it presents authorities in that list.
Those authorities should instead be moved to the Authority box in the advanced filter form.

Solution:
* Don't present authorities as options in the Resource dropdowns
* Add authority autocomplete to authority form input

Follow up to @kl in #1391 there is an error when we try to tap an authority
---
 web/app/js/components/Tap.jsx | 51 ++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/web/app/js/components/Tap.jsx b/web/app/js/components/Tap.jsx
index 4392cf0e6..df3d20d55 100644
--- a/web/app/js/components/Tap.jsx
+++ b/web/app/js/components/Tap.jsx
@@ -41,6 +41,7 @@ class Tap extends React.Component {
       tapResultsById: {},
       tapResultFilterOptions: this.getInitialTapFilterOptions(),
       resourcesByNs: {},
+      authoritiesByNs: {},
       query: {
         resource: "",
         namespace: "",
@@ -57,6 +58,7 @@ class Tap extends React.Component {
         resource: [],
         toNamespace: [],
         toResource: [],
+        authority: []
       },
       maxLinesToDisplay: 40,
       awaitingWebSocketConnection: false,
@@ -131,18 +133,34 @@ class Tap extends React.Component {
 
   getResourcesByNs(rsp) {
     let statTables = _.get(rsp, [0, "ok", "statTables"]);
-    return _.reduce(statTables, (mem, table) => {
+    let authoritiesByNs = {};
+    let resourcesByNs = _.reduce(statTables, (mem, table) => {
       _.map(table.podGroup.rows, row => {
         if (!mem[row.resource.namespace]) {
           mem[row.resource.namespace] = [];
+          authoritiesByNs[row.resource.namespace] = [];
         }
 
-        if (row.resource.type.toLowerCase() !== "service") {
-          mem[row.resource.namespace].push(`${row.resource.type}/${row.resource.name}`);
+        switch (row.resource.type.toLowerCase()) {
+          case "service":
+            break;
+          case "authority":
+            authoritiesByNs[row.resource.namespace].push(row.resource.name);
+            break;
+          default:
+            mem[row.resource.namespace].push(`${row.resource.type}/${row.resource.name}`);
         }
       });
       return mem;
     }, {});
+    return {
+      authoritiesByNs,
+      resourcesByNs
+    };
+  }
+
+  getResourceList(resourcesByNs, ns) {
+    return resourcesByNs[ns] || _.uniq(_.flatten(_.values(resourcesByNs)));
   }
 
   parseTapResult = data => {
@@ -307,7 +325,7 @@ class Tap extends React.Component {
     this.ws.close(1000);
   }
 
-  handleFormChange = (name, scopeResource) => {
+  handleFormChange = (name, scopeResource, shouldScopeAuthority) => {
     let state = {
       query: this.state.query,
       autocomplete: this.state.autocomplete
@@ -319,6 +337,9 @@ class Tap extends React.Component {
         // scope the available typeahead resources to the selected namespace
         state.autocomplete[scopeResource] = this.state.resourcesByNs[formVal];
       }
+      if (shouldScopeAuthority) {
+        state.autocomplete.authority = this.state.authoritiesByNs[formVal];
+      }
 
       this.setState(state);
     };
@@ -354,20 +375,21 @@ class Tap extends React.Component {
     this.api.setCurrentRequests([this.api.fetchMetrics(url)]);
     this.serverPromise = Promise.all(this.api.getCurrentPromises())
       .then(rsp => {
-        let resourcesByNs = this.getResourcesByNs(rsp);
+        let { resourcesByNs, authoritiesByNs } = this.getResourcesByNs(rsp);
         let namespaces = _.sortBy(_.keys(resourcesByNs));
-        let resourceNames = resourcesByNs[this.state.query.namespace] ||
-          _.uniq(_.flatten(_.values(resourcesByNs)));
-        let toResourceNames = resourcesByNs[this.state.query.toNamespace] ||
-          _.uniq(_.flatten(_.values(resourcesByNs)));
+        let resourceNames  = this.getResourceList(resourcesByNs, this.state.query.namespace);
+        let toResourceNames = this.getResourceList(resourcesByNs, this.state.query.toNamespace);
+        let authorities = this.getResourceList(authoritiesByNs, this.state.query.namespace);
 
         this.setState({
           resourcesByNs,
+          authoritiesByNs,
           autocomplete: {
             namespace: namespaces,
             resource: resourceNames,
             toNamespace: namespaces,
-            toResource: toResourceNames
+            toResource: toResourceNames,
+            authority: authorities
           },
           pendingRequests: false
         });
@@ -397,7 +419,7 @@ class Tap extends React.Component {
                 allowClear
                 placeholder="Namespace"
                 optionFilterProp="children"
-                onChange={this.handleFormChange("namespace", "resource")}>
+                onChange={this.handleFormChange("namespace", "resource", true)}>
                 {
                   _.map(this.state.autocomplete.namespace, (n, i) => (
                     <Select.Option key={`ns-dr-${i}`} value={n}>{n}</Select.Option>
@@ -480,7 +502,12 @@ class Tap extends React.Component {
           <Col span={2 * colSpan}>
             <Form.Item
               extra="Display requests with this :authority">
-              <Input placeholder="Authority" onChange={this.handleFormEvent("authority")} />
+
+              <AutoComplete
+                dataSource={this.autoCompleteData("authority")}
+                onSelect={this.handleFormChange("authority")}
+                onSearch={this.handleFormChange("authority")}
+                placeholder="Authority" />
             </Form.Item>
           </Col>