158 lines
3.6 KiB
JavaScript
158 lines
3.6 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|