elstat/priv/frontend/src/components/App.js

import React, { Component } from 'react'

import './App.css'
import Service from './Service.js'
import ServicePlaceholder from './ServicePlaceholder.js'
import OP from '../ws/op.js'
import { log } from '../util.js'
import { domain as DOMAIN } from '../config.json'

export default class App extends Component {
  websocket = null;

  reconnectionTime = 1000;

  state = {
    loading: true,
    error: null,
    metrics: null,
  };

  async componentDidMount () {
    await this.loadMetrics()
    this.connect()
  }

  subscribeToChannels () {
    const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`)
    log('subscribing to channels:', channels)

    this._send({
      op: OP.SUBSCRIBE,
      channels,
    })
  }

  handlePacket (packet) {
    const { op, c: channel, d: data } = packet

    if (op !== OP.DATA) {
      log('ignoring boring packet:', packet)
      return
    }

    const [, name] = channel.split(':')

    log('updating from channel:', channel)

    const { metrics } = this.state
    const graph = metrics.graph[name].slice(1)
    const newGraph = [data, ...graph]

    log('adding data:', data)

    this.setState(({ metrics: oldMetrics }, _props) => {
      const newMetrics = { ...oldMetrics }
      newMetrics.graph[name] = newGraph

      const [, latency] = data
      newMetrics.status[name].latency = latency

      return {
        metrics: newMetrics,
      }
    })
  }

  connect () {
    log('connecting to ws')

    const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss')
    this.websocket = new WebSocket(endpoint)

    this.websocket.onopen = () => {
      log('ws opened')
      this.subscribeToChannels()
    }

    this.websocket.onclose = ({ code, reason }) => {
      log(`ws closed with code ${code} (reason: ${reason || '<none>'}); ` +
          `attempting to reconnect in ${this.reconnectionTime}ms`)
      setTimeout(() => this.connect(), this.reconnectionTime)
      this.reconnectionTime *= 2
    }

    this.websocket.onmessage = (message) => {
      const { data } = message
      const parsed = JSON.parse(data)

      console.log(
        '%c>>>%c',
        'color: hsla(320, 100%, 50%, 1); font-weight: bold',
        'color: inherit; font-weight: inherit',
        parsed,
      )

      this.handlePacket(parsed)
    }

    this.websocket.onerror = (event) => {
      log('ws error:', event)
    }
  }

  _send (payload) {
    this.websocket.send(JSON.stringify(payload))
  }

  async loadMetrics () {
    log('loading metrics')

    try {
      const resp = await fetch(`${DOMAIN}/api/status`)
      const json = await resp.json()

      this.setState({ metrics: json, loading: false })
    } catch (err) {
      this.setState({ error: err.toString() })
    }
  }

  render () {
    const metrics = !this.state.metrics ? null : (
      <div className="services">
        {Object.entries(this.state.metrics.status)
          .map(([name, info]) => (
            <Service
              name={name}
              key={name}
              graph={this.state.metrics.graph[name]}
              {...info}
            />
          ))
        }
      </div>
    )

    return (
      <div className="dashboard">
        <h1>elstatus</h1>

        {this.state.error ? (
          <div className="error">
            Error: {this.state.error}
          </div>
        ) : null}

        {this.state.loading && !this.state.error ? (
          <React.Fragment>
            <ServicePlaceholder />
            <ServicePlaceholder />
            <ServicePlaceholder />
          </React.Fragment>
        ) : metrics}
      </div>
    )
  }
}