Tap: Make use of the Web UI to render tap events in a table (#1391)

* Make use of the Web UI to render tap events in a table

- Return JSON tap events instead of the command line output
- Experiment with a different way of rendering the EventList
- changed the default width back to 100% of the screen because this 
table does not look great squished

web/app/css/styles.css

@@ -58,7 +58,7 @@ h2, h3, h4, h5, h6 {
 }
 
 .main-content {
-  max-width: 1164px;
+  max-width: 100%;
   width: 100%;
   padding: 40px;
   float: left;

web/app/css/tap.css

@@ -1,23 +1,20 @@
 @import 'styles.css';
 
-.tap-display {
-  font-size: 10px;
-  margin-top: calc(4 * var(--base-width));
-}
-
-button.ant-btn-primary {
-  &.tap-start {
-    background-color: var(--green);
-    border-color: var(--green);
+.tap-form {
+  & button.ant-btn-primary {
+    &.tap-start {
+      background-color: var(--green);
+      border-color: var(--green);
+    }
+    &.tap-stop {
+      background-color: var(--siennared);
+      border-color: var(--siennared);
+    }
   }
-  &.tap-stop {
-    background-color: var(--siennared);
-    border-color: var(--siennared);
+
+  & button.tap-form-toggle {
+    padding-left: 0;
+    border: none;
+    color: rgba(52, 137, 206, 0.906);
   }
 }
-
-button.tap-form-toggle {
-  padding-left: 0;
-  border: none;
-  color: rgba(52, 137, 206, 0.906);
-}

web/app/js/components/Tap.jsx

@@ -3,6 +3,7 @@ import ErrorBanner from './ErrorBanner.jsx';
 import PageHeader from './PageHeader.jsx';
 import PropTypes from 'prop-types';
 import React from 'react';
+import TapEventTable from './TapEventTable.jsx';
 import { withContext } from './util/AppContext.jsx';
 import {
   AutoComplete,
@@ -35,7 +36,7 @@ class Tap extends React.Component {
 
     this.state = {
       error: "",
-      messages: [],
+      tapResultsById: {},
       resourcesByNs: {},
       query: {
         resource: "",
@@ -68,7 +69,9 @@ class Tap extends React.Component {
   }
 
   componentWillUnmount() {
-    this.ws.close(1000);
+    if (this.ws) {
+      this.ws.close(1000);
+    }
     this.stopTapStreaming();
     this.stopServerPolling();
   }
@@ -89,12 +92,7 @@ class Tap extends React.Component {
   }
 
   onWebsocketRecv = e => {
-    this.setState({
-      messages: _(this.state.messages)
-        .push(e.data)
-        .takeRight(this.state.maxLinesToDisplay)
-        .value()
-    });
+    this.indexTapResult(e.data);
   }
 
   onWebsocketClose = e => {
@@ -131,6 +129,75 @@ class Tap extends React.Component {
     }, {});
   }
 
+  parseTapResult = data => {
+    let d = JSON.parse(data);
+
+    switch (d.proxyDirection) {
+      case "INBOUND":
+        d.tls = _.get(d, "sourceMeta.labels.tls", "");
+        break;
+      case "OUTBOUND":
+        d.tls = _.get(d, "destinationMeta.labels.tls", "");
+        break;
+      default:
+        // too old for TLS
+    }
+
+    if (_.isNil(d.http)) {
+      this.setState({ error: "Undefined request type"});
+    } else {
+      if (!_.isNil(d.http.requestInit)) {
+        d.eventType = "req";
+        d.id = `${_.get(d, "http.requestInit.id.base")}:${_.get(d, "http.requestInit.id.stream")} `;
+      } else if (!_.isNil(d.http.responseInit)) {
+        d.eventType = "rsp";
+        d.id = `${_.get(d, "http.responseInit.id.base")}:${_.get(d, "http.responseInit.id.stream")} `;
+      } else if (!_.isNil(d.http.responseEnd)) {
+        d.eventType = "end";
+        d.id = `${_.get(d, "http.responseEnd.id.base")}:${_.get(d, "http.responseEnd.id.stream")} `;
+      }
+    }
+
+    return d;
+  }
+
+  indexTapResult = data => {
+    // keep an index of tap request rows by id. this allows us to collate
+    // requestInit/responseInit/responseEnd into one single table row,
+    // as opposed to three separate rows as in the CLI
+    let resultIndex = this.state.tapResultsById;
+    let d = this.parseTapResult(data);
+
+    if (_.isNil(resultIndex[d.id])) {
+      // don't let tapResultsById grow unbounded
+      if (_.size(resultIndex) > this.state.maxLinesToDisplay) {
+        this.deleteOldestTapResult(resultIndex);
+      }
+
+      resultIndex[d.id] = {};
+    }
+    resultIndex[d.id][d.eventType] = d;
+    // assumption: requests of a given id all share the same high level metadata
+    resultIndex[d.id]["base"] = d;
+    resultIndex[d.id].lastUpdated = Date.now();
+
+    this.setState({ tapResultsById: resultIndex });
+  }
+
+  deleteOldestTapResult = resultIndex => {
+    let oldest = Date.now();
+    let oldestId = "";
+
+    _.each(resultIndex, (res, id) => {
+      if (res.lastUpdated < oldest) {
+        oldest = res.lastUpdated;
+        oldestId = id;
+      }
+    });
+
+    delete resultIndex[oldestId];
+  }
+
   startServerPolling() {
     this.loadFromServer();
     this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval);
@@ -143,7 +210,6 @@ class Tap extends React.Component {
 
   startTapSteaming() {
     this.setState({
-      messages: [],
       awaitingWebSocketConnection: true
     });
 
@@ -260,7 +326,7 @@ class Tap extends React.Component {
 
   renderTapForm = () => {
     return (
-      <Form>
+      <Form className="tap-form">
         <Row gutter={rowGutter}>
           <Col span={colSpan}>
             <Form.Item>
@@ -296,6 +362,10 @@ class Tap extends React.Component {
                   <Button type="primary" className="tap-stop" onClick={this.handleTapStop}>Stop</Button> :
                   <Button type="primary" className="tap-start" onClick={this.handleTapStart}>Start</Button>
               }
+              {
+                this.state.awaitingWebSocketConnection ?
+                  <Icon type="loading" style={{ paddingLeft: rowGutter, fontSize: 20, color: '#08c' }} /> : null
+              }
             </Form.Item>
           </Col>
         </Row>
@@ -424,6 +494,9 @@ class Tap extends React.Component {
   }
 
   render() {
+    let tableRows = _(this.state.tapResultsById)
+      .values().sortBy('lastUpdated').reverse().value();
+
     return (
       <div>
         {!this.state.error ? null :
@@ -432,17 +505,7 @@ class Tap extends React.Component {
         <PageHeader header="Tap" />
         {this.renderTapForm()}
         {this.renderCurrentQuery()}
-
-        <div className="tap-display">
-          <code>
-            { this.state.awaitingWebSocketConnection ?
-              <div><Icon type="loading" /> Starting tap query...</div> : null }
-            { _.isEmpty(this.state.messages) && this.state.webSocketRequestSent
-              && !this.state.awaitingWebSocketConnection
-              ? <div>No messages to display</div> : null }
-            { _.map(this.state.messages, (m, i) => <div key={`message-${i}`}>{m}</div>)}
-          </code>
-        </div>
+        <TapEventTable data={tableRows} />
       </div>
     );
   }

web/app/js/components/TapEventTable.jsx

@@ -0,0 +1,141 @@
+import _ from 'lodash';
+import BaseTable from './BaseTable.jsx';
+import React from 'react';
+import { Col, Icon, Row } from 'antd';
+import { formatLatency, publicAddressToString } from './util/Utils.js';
+
+let tapColumns = [
+  {
+    title: "ID",
+    dataIndex: "base.id"
+  },
+  {
+    title: "Direction",
+    dataIndex: "base.proxyDirection"
+  },
+  {
+    title: "Source",
+    dataIndex: "base.source",
+    render: d => !d ? null : <span>{publicAddressToString(_.get(d, "ip.ipv4"), d.port)}</span>
+  },
+  {
+    title: "Destination",
+    dataIndex: "base.destination",
+    render: d => !d ? null : <span>{publicAddressToString(_.get(d, "ip.ipv4"), d.port)}</span>
+  },
+  {
+    title: "TLS",
+    dataIndex: "base.tls"
+  },
+  {
+    title: "Request Init",
+    children: [
+      {
+        title: "Authority",
+        key: "authority",
+        dataIndex: "req.http.requestInit",
+        render: d => !d ? <Icon type="loading" /> : d.authority
+      },
+      {
+        title: "Path",
+        key: "path",
+        dataIndex: "req.http.requestInit",
+        render: d => !d ? <Icon type="loading" /> : d.path
+      },
+      {
+        title: "Scheme",
+        key: "scheme",
+        dataIndex: "req.http.requestInit",
+        render: d => !d ? <Icon type="loading" /> : _.get(d, "scheme.registered")
+      },
+      {
+        title: "Method",
+        key: "method",
+        dataIndex: "req.http.requestInit",
+        render: d => !d ? <Icon type="loading" /> : _.get(d, "method.registered")
+      }
+    ]
+  },
+  {
+    title: "Response Init",
+    children: [
+      {
+        title: "HTTP status",
+        key: "http-status",
+        dataIndex: "rsp.http.responseInit",
+        render: d => !d ? <Icon type="loading" /> : d.httpStatus
+      },
+      {
+        title: "Latency",
+        key: "rsp-latency",
+        dataIndex: "rsp.http.responseInit",
+        render: d => !d ? <Icon type="loading" /> : formatTapLatency(d.sinceRequestInit)
+      },
+    ]
+  },
+  {
+    title: "Response End",
+    children: [
+      {
+        title: "GRPC status",
+        key: "grpc-status",
+        dataIndex: "end.http.responseEnd",
+        render: d => !d ? <Icon type="loading" /> : _.get(d, "eos.grpcStatusCode")
+      },
+      {
+        title: "Latency",
+        key: "end-latency",
+        dataIndex: "end.http.responseEnd",
+        render: d => !d ? <Icon type="loading" /> : formatTapLatency(d.sinceResponseInit)
+      },
+      {
+        title: "Response Length (B)",
+        key: "rsp-length",
+        dataIndex: "end.http.responseEnd",
+        render: d => !d ? <Icon type="loading" /> : d.responseBytes
+      },
+    ]
+
+  }
+];
+
+let formatTapLatency = str => {
+  let millis = parseFloat(str.replace("s", "")) * 1000;
+  return formatLatency(millis);
+};
+
+// hide verbose information
+const expandedRowRender = d => {
+  return (
+    <div>
+      <p style={{ margin: 0 }}>Destination Meta</p>
+      {
+        _.map(_.get(d, "base.destinationMeta.labels", []), (v, k) => (
+          <Row key={k}>
+            <Col span={6}>{k}</Col>
+            <Col cpan={6}>{v}</Col>
+          </Row>
+        ))
+      }
+    </div>
+  );
+};
+
+export default class TapEventTable extends BaseTable {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <BaseTable
+        dataSource={this.props.data}
+        columns={tapColumns}
+        expandedRowRender={expandedRowRender}
+        rowKey={r => r.base.id}
+        pagination={false}
+        className="tap-event-table"
+        size="middle" />
+    );
+  }
+}

web/app/js/components/util/Utils.js

@@ -14,7 +14,7 @@ const successRateFormatter = d3.format(".2%");
 const latencySecFormatter = d3.format(".3f");
 const latencyFormatter = d3.format(",");
 
-const formatLatency = m => {
+export const formatLatency = m => {
   if (_.isNil(m)) {
     return "---";
   } else if (m < 1000) {
@@ -108,3 +108,24 @@ export const friendlyTitle = resource => {
   }
   return titles;
 };
+
+/*
+  produce octets given an ip address
+*/
+const decodeIPToOctets = ip => {
+  ip = parseInt(ip, 10);
+  return [
+    ip >> 24 & 255,
+    ip >> 16 & 255,
+    ip >> 8 & 255,
+    ip & 255
+  ];
+};
+
+/*
+  converts an address to an ipv4 formatted host:port pair
+*/
+export const publicAddressToString = (ipv4, port) => {
+  let octets = decodeIPToOctets(ipv4);
+  return octets.join(".") + ":" + port;
+};

web/srv/api_handlers.go

@@ -1,6 +1,7 @@
 package srv
 
 import (
+	"bytes"
 	"encoding/json"
 	"io"
 	"net/http"
@@ -172,8 +173,14 @@ func (h *handler) handleApiTap(w http.ResponseWriter, req *http.Request, p httpr
 				break
 			}
 
-			tapEvent := util.RenderTapEvent(rsp)
-			if err := ws.WriteMessage(websocket.TextMessage, []byte(tapEvent)); err != nil {
+			buf := new(bytes.Buffer)
+			err = pbMarshaler.Marshal(buf, rsp)
+			if err != nil {
+				ws.WriteMessage(websocket.CloseMessage, []byte(err.Error()))
+				break
+			}
+
+			if err := ws.WriteMessage(websocket.TextMessage, []byte(buf.String())); err != nil {
 				if websocket.IsUnexpectedCloseError(err, websocket.CloseNormalClosure) {
 					log.Error(err)
 				}