Add a meshed column to metrics tables in the web UI (#1466)

Currently conduit stat outputs a column that shows the number of meshed pods in the resource being
queried. The web UI does not have this information about meshed pod state.

This commit adds a meshed column for better UI parity with the stat command.

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

web/app/js/components/MetricsTable.jsx

@@ -43,6 +43,15 @@ const formatTitle = (title, tooltipText) => {
 
 };
 
+const meshedColumn = {
+  title: formatTitle("Meshed"),
+  dataIndex: "pods",
+  key: "pods",
+  className: "numeric",
+  sorter: (a, b) => numericSort(a.pods.totalPods, b.pods.totalPods),
+  render: p => p.meshedPods + "/" + p.totalPods
+};
+
 const columnDefinitions = (resource, namespaces, onFilterClick, showNamespaceColumn, PrefixedLink, showGrafanaLink) => {
   let nsColumn = [
     {
@@ -142,6 +151,11 @@ const columnDefinitions = (resource, namespaces, onFilterClick, showNamespaceCol
     }
   ];
 
+  // don't add the meshed column on a Authority MetricsTable
+  if (resource !== "authority") {
+    columns.splice(1, 0, meshedColumn);
+  }
+
   if (!showNamespaceColumn) {
     return columns;
   } else {

web/app/js/components/util/MetricUtils.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import Percentage from './Percentage';
+import Percentage from './Percentage.js';
 import PropTypes from 'prop-types';
 
 const getPodCategorization = pod => {
@@ -118,6 +118,11 @@ const processStatTable = table => {
       latency: getLatency(row),
       tlsRequestPercent: getTlsRequestPercentage(row),
       added: row.meshedPodCount === row.runningPodCount,
+      pods: {
+        totalPods: row.runningPodCount,
+        meshedPods: row.meshedPodCount,
+        meshedPercentage: new Percentage(parseInt(row.meshedPodCount, 10), parseInt(row.runningPodCount, 10))
+      },
       errors: row.errorsByPod
     };
   })

web/app/test/MetricUtilsTest.js

@@ -26,6 +26,7 @@ describe('MetricUtils', () => {
             P95: 2,
             P99: 7
           },
+          pods: {totalPods: "1", meshedPods: "1", meshedPercentage: new Percentage(1,1)},
           added: true,
           errors: {}
         }

web/app/test/MetricsTableTest.js

@@ -29,7 +29,7 @@ describe('Tests for <MetricsTableBase>', () => {
 
     expect(table).to.have.length(1);
     expect(table.props().dataSource).to.have.length(1);
-    expect(table.props().columns).to.have.length(8);
+    expect(table.props().columns).to.have.length(9);
   });
 
   it('omits the namespace column for the namespace resource', () => {
@@ -43,7 +43,7 @@ describe('Tests for <MetricsTableBase>', () => {
     const table = component.find(BaseTable);
 
     expect(table).to.have.length(1);
-    expect(table.props().columns).to.have.length(7);
+    expect(table.props().columns).to.have.length(8);
   });
 
   it('omits the namespace column when showNamespaceColumn is false', () => {
@@ -58,7 +58,21 @@ describe('Tests for <MetricsTableBase>', () => {
     const table = component.find(BaseTable);
 
     expect(table).to.have.length(1);
-    expect(table.props().columns).to.have.length(7);
+    expect(table.props().columns).to.have.length(8);
+  });
+
+  it('omits meshed column for authority resource', () => {
+    const component = shallow(
+      <MetricsTableBase
+        {...defaultProps}
+        metrics={[]}
+        resource="authority" />
+    );
+
+    const table = component.find(BaseTable);
+
+    expect(table).to.have.length(1);
+    expect(table.props().columns).to.have.length(8);
   });
 
 });