subscribe and handle status changes

priv/frontend/src/components/App.js

@@ -24,8 +24,15 @@ export default class App extends Component {
   }
 
   subscribeToChannels () {
-    const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`)
-    log('subscribing to channels:', channels)
+    const { graph } = this.state.metrics
+    const channels = Object.keys(graph).reduce(
+      (channels, name) => [...channels, `latency:${name}`, `status:${name}`],
+      []
+    )
+
+    log(
+      `subscribing to ${channels.length} channels: ${channels.join(', ')}`
+    )
 
     this._send({
       op: OP.SUBSCRIBE,
@@ -33,37 +40,64 @@ export default class App extends Component {
     })
   }
 
-  handlePacket (packet) {
-    const { op, c: channel, d: data } = packet
+  handleStatus (name, [, status]) {
+    const { status: statuses } = this.state.metrics
+    log('updating status on:', name)
 
-    if (op !== OP.DATA) {
-      log('ignoring boring packet:', packet)
+    if (!(name in statuses)) {
+      log(`failed to locate channel ${name} to update statuses`)
       return
     }
 
-    const [, name] = channel.split(':')
+    if (statuses[name].status === status) {
+      log(`ignoring stale status (${status}) for ${name}`)
+      return
+    }
 
-    log('updating from channel:', channel)
+    this.setState(({ metrics: old }, _props) => {
+      const metrics = { ...old }
+      metrics.status[name].status = status
 
+      return { metrics }
+    })
+  }
+
+  handleLatency (name, data) {
     const { metrics } = this.state
     const graph = metrics.graph[name].slice(1)
     const newGraph = [data, ...graph]
 
-    log('adding data:', data)
+    log('adding latency entry:', data)
 
-    this.setState(({ metrics: oldMetrics }, _props) => {
-      const newMetrics = { ...oldMetrics }
-      newMetrics.graph[name] = newGraph
+    this.setState(({ metrics: old }, _props) => {
+      const metrics = { ...old }
+      metrics.graph[name] = newGraph
 
       const [, latency] = data
-      newMetrics.status[name].latency = latency
+      metrics.status[name].latency = latency
 
-      return {
-        metrics: newMetrics,
-      }
+      return { metrics }
     })
   }
 
+  handlePacket (packet) {
+    const { op, c: channel, d: data } = packet
+
+    if (op !== OP.DATA) {
+      return
+    }
+
+    const [type, name] = channel.split(':')
+
+    log('updating from channel:', channel)
+
+    if (type === 'latency') {
+      this.handleLatency(name, data)
+    } else if (type === 'status') {
+      this.handleStatus(name, data)
+    }
+  }
+
   connect () {
     log('connecting to ws')