Move the determining of display order into the cli query module (#1917)

[web UI] Previously, we were specifying the display order to display the cli flags in the
QueryToCliCmd module. But this order is pretty standard for each command, and
I'd like to avoid hardcoding that list everywhere.

Move the handling of order into the QueryToCliCmd module.

web/app/js/components/QueryToCliCmd.jsx

@@ -6,6 +6,7 @@ import {
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
+import { displayOrder } from './util/CliQueryUtils.js';
 
 const toCliParam = {
   "namespace": "--namespace",
@@ -27,7 +28,6 @@ const toCliParam = {
 export default class QueryToCliCmd extends React.Component {
   static propTypes = {
     cmdName: PropTypes.string.isRequired,
-    displayOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
     query: PropTypes.shape({}).isRequired,
     resource: PropTypes.string.isRequired
   }
@@ -37,7 +37,7 @@ export default class QueryToCliCmd extends React.Component {
   }
 
   render = () => {
-    let { cmdName, query, resource, displayOrder } = this.props;
+    let { cmdName, query, resource } = this.props;
 
     return (
       _.isEmpty(resource) ? null :
@@ -48,7 +48,7 @@ export default class QueryToCliCmd extends React.Component {
 
         <code>
           linkerd {this.props.cmdName} {resource}
-          { _.map(displayOrder, item => {
+          { _.map(displayOrder(cmdName, query), item => {
             return !toCliParam[item] ? null : this.renderCliItem(toCliParam[item], query[item]);
           })}
         </code>

web/app/js/components/QueryToCliCmd.test.jsx

@@ -9,17 +9,13 @@ describe('QueryToCliCmd', () => {
       "namespace": "linkerd",
       "scheme": ""
     }
-    let cliQueryDisplayOrder = [
-      "namespace",
-      "scheme"
-    ]
 
     let component = mount(
       <QueryToCliCmd
         cmdName="routes"
         query={query}
         resource={query.resource}
-        displayOrder={cliQueryDisplayOrder} />
+        />
     );
 
     expect(component).toIncludeText("Current Routes query");
@@ -34,75 +30,75 @@ describe('QueryToCliCmd', () => {
       "maxRps": "",
       "authority": "foo.bar:8080"
     }
-    let cliQueryDisplayOrder = [
-      "namespace",
-      "scheme",
-      "maxRps",
-      "authority"
-    ]
 
     let component = mount(
       <QueryToCliCmd
         cmdName="tap"
         query={query}
-        resource={query.resource}
-        displayOrder={cliQueryDisplayOrder} />
+        resource={query.resource} />
     );
 
     expect(component).toIncludeText("Current Tap query");
     expect(component).toIncludeText("linkerd tap deploy/controller --namespace linkerd --authority foo.bar:8080");
   });
 
-  it('displays the flags in the specified displayOrder', () => {
+  it('displays the flags in the specified order per cli command', () => {
     let query = {
-      "resource_name": "deploy/controller",
+      "resource": "deploy/controller",
       "namespace": "linkerd",
       "scheme": "HTTPS",
       "maxRps": "",
       "toResource": "deploy/prometheus",
       "authority": "foo.bar:8080"
     }
-    let cliQueryDisplayOrder = [
-      "namespace",
-      "toResource",
-      "scheme",
-      "maxRps",
-      "authority"
-    ]
 
     let component = mount(
       <QueryToCliCmd
         cmdName="tap"
         query={query}
-        resource={query.resource_name}
-        displayOrder={cliQueryDisplayOrder} />
+        resource={query.resource}
+        />
     );
 
     expect(component).toIncludeText("Current Tap query");
     expect(component).toIncludeText("linkerd tap deploy/controller --namespace linkerd --to deploy/prometheus --scheme HTTPS --authority foo.bar:8080");
   });
 
-  it("doesn't render commands for which a flag is not specified", () => {
+  it("doesn't render a namespace flag when the resource is a namespace", () => {
+    let query = {
+      "resource": "namespace/linkerd",
+      "namespace": "linkerd"
+    }
+
+    let component = mount(
+      <QueryToCliCmd
+        cmdName="top"
+        query={query}
+        resource={query.resource}
+        />
+    );
+
+    expect(component).toIncludeText("Current Top query");
+    expect(component).toIncludeText("linkerd top namespace/linkerd");
+  });
+
+  it("doesn't render commands for which a flag is not defined", () => {
       let query = {
         "resource": "deploy/controller",
         "namespace": "linkerd",
-        "scheme": "HTTPS"
+        "scheme": "HTTPS",
+        "theLimitDoesNotExist": 999
       }
-      let cliQueryDisplayOrder = [
-        "namespace",
-        "theLimitDoesNotExist",
-        "scheme"
-      ]
 
       let component = mount(
         <QueryToCliCmd
-          cmdName="routes"
+          cmdName="tap"
           query={query}
           resource={query.resource}
-          displayOrder={cliQueryDisplayOrder} />
+          />
       );
 
-      expect(component).toIncludeText("Current Routes query");
-      expect(component).toIncludeText("linkerd routes deploy/controller --namespace linkerd --scheme HTTPS");
+      expect(component).toIncludeText("Current Tap query");
+      expect(component).toIncludeText("linkerd tap deploy/controller --namespace linkerd --scheme HTTPS");
   });
 });

web/app/js/components/TapQueryForm.jsx

@@ -397,16 +397,7 @@ class TapQueryForm extends React.Component {
 
   render() {
     const { classes } = this.props;
-    let cliQueryDisplayOrder = _.compact([
-      this.state.query.resource.indexOf("namespace") === 0 ? null : "namespace",
-      "toResource",
-      this.state.query.toResource.indexOf("namespace") === 0 ? null : "toNamespace",
-      "method",
-      "path",
-      "scheme",
-      "authority",
-      "maxRps"
-    ]);
+
     return (
       <Card className={classes.card}>
         <CardContent>
@@ -433,7 +424,7 @@ class TapQueryForm extends React.Component {
           </Grid>
         </CardContent>
 
-        <QueryToCliCmd cmdName={this.props.cmdName} query={this.state.query} resource={this.state.query.resource} displayOrder={cliQueryDisplayOrder} />
+        <QueryToCliCmd cmdName={this.props.cmdName} query={this.state.query} resource={this.state.query.resource} />
 
         { !this.props.enableAdvancedForm ? null : this.renderAdvancedTapForm() }
 

web/app/js/components/TopRoutes.jsx

@@ -224,11 +224,6 @@ class TopRoutes extends React.Component {
   }
 
   render() {
-    let cliQueryDisplayOrder = [
-      "namespace",
-      "from",
-      "from_namespace"
-    ];
     let query = this.state.query;
     let from = '';
     if (_.isEmpty(query.from_type)) {
@@ -246,7 +241,7 @@ class TopRoutes extends React.Component {
         }
         <Card>
           { this.renderRoutesQueryForm() }
-          <QueryToCliCmd cmdName="routes" query={query} resource={this.state.query.resource_name} displayOrder={cliQueryDisplayOrder} />
+          <QueryToCliCmd cmdName="routes" query={query} resource={this.state.query.resource_name} />
         </Card>
         { !this.state.requestInProgress ? null : <TopRoutesModule query={this.state.query} /> }
       </div>

web/app/js/components/util/CliQueryUtils.js

@@ -0,0 +1,31 @@
+import _ from 'lodash';
+
+const topRoutesDisplayOrder = [
+  "namespace",
+  "from",
+  "from_name",
+  "from_type",
+  "from_namespace"
+];
+
+
+const tapDisplayOrder = query => _.compact([
+  _.isNil(query.resource) ? null : query.resource.indexOf("namespace") === 0 ? null : "namespace",
+  "toResource",
+  _.isNil(query.toResource) ? null : query.toResource.indexOf("namespace") === 0 ? null : "toNamespace",
+  "method",
+  "path",
+  "scheme",
+  "authority",
+  "maxRps"
+]);
+
+export const displayOrder = (cmd, query) => {
+  if (cmd === "tap" || cmd === "top") {
+    return tapDisplayOrder(query);
+  }
+  if (cmd === "routes") {
+    return topRoutesDisplayOrder;
+  }
+  return [];
+};