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

158 lines
3.6 KiB
JavaScript
Raw Normal View History

2018-07-16 04:04:43 +00:00
import React, { Component } from 'react'
2018-06-12 21:56:50 +00:00
2018-07-16 04:04:43 +00:00
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'
2018-06-12 21:56:50 +00:00
export default class App extends Component {
websocket = null;
2018-07-14 02:11:50 +00:00
reconnectionTime = 1000;
2018-06-12 21:56:50 +00:00
state = {
loading: true,
error: null,
metrics: null,
};
2018-07-16 04:04:43 +00:00
async componentDidMount () {
await this.loadMetrics()
this.connect()
}
2018-07-16 04:04:43 +00:00
subscribeToChannels () {
const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`)
log('subscribing to channels:', channels)
this._send({
op: OP.SUBSCRIBE,
channels,
2018-07-16 04:04:43 +00:00
})
}
2018-07-16 04:04:43 +00:00
handlePacket (packet) {
const { op, c: channel, d: data } = packet
if (op !== OP.DATA) {
2018-07-16 04:04:43 +00:00
log('ignoring boring packet:', packet)
return
}
2018-07-16 04:04:43 +00:00
const [, name] = channel.split(':')
2018-07-16 04:04:43 +00:00
log('updating from channel:', channel)
2018-07-16 04:04:43 +00:00
const { metrics } = this.state
const graph = metrics.graph[name].slice(1)
const newGraph = [data, ...graph]
2018-07-16 04:04:43 +00:00
log('adding data:', data)
this.setState(({ metrics: oldMetrics }, _props) => {
2018-07-16 04:04:43 +00:00
const newMetrics = { ...oldMetrics }
newMetrics.graph[name] = newGraph
2018-07-16 04:04:43 +00:00
const [, latency] = data
newMetrics.status[name].latency = latency
return {
metrics: newMetrics,
2018-07-16 04:04:43 +00:00
}
})
2018-06-12 21:56:50 +00:00
}
2018-07-16 04:04:43 +00:00
connect () {
log('connecting to ws')
2018-07-16 04:04:43 +00:00
const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss')
this.websocket = new WebSocket(endpoint)
this.websocket.onopen = () => {
2018-07-16 04:04:43 +00:00
log('ws opened')
this.subscribeToChannels()
}
2018-07-14 02:33:53 +00:00
this.websocket.onclose = ({ code, reason }) => {
2018-07-16 04:04:43 +00:00
log(`ws closed with code ${code} (reason: ${reason || '<none>'}); ` +
`attempting to reconnect in ${this.reconnectionTime}ms`)
setTimeout(() => this.connect(), this.reconnectionTime)
this.reconnectionTime *= 2
}
2018-07-14 02:11:50 +00:00
this.websocket.onmessage = (message) => {
2018-07-16 04:04:43 +00:00
const { data } = message
const parsed = JSON.parse(data)
2018-07-16 04:21:56 +00:00
console.log(
'%c>>>%c',
'color: hsla(320, 100%, 50%, 1); font-weight: bold',
'color: inherit; font-weight: inherit',
parsed,
)
2018-07-16 04:04:43 +00:00
this.handlePacket(parsed)
}
2018-07-14 02:33:53 +00:00
this.websocket.onerror = (event) => {
2018-07-16 04:04:43 +00:00
log('ws error:', event)
}
}
2018-07-16 04:04:43 +00:00
_send (payload) {
this.websocket.send(JSON.stringify(payload))
}
2018-07-16 04:04:43 +00:00
async loadMetrics () {
log('loading metrics')
try {
2018-07-16 04:04:43 +00:00
const resp = await fetch(`${DOMAIN}/api/status`)
const json = await resp.json()
2018-07-16 04:04:43 +00:00
this.setState({ metrics: json, loading: false })
} catch (err) {
2018-07-16 04:04:43 +00:00
this.setState({ error: err.toString() })
}
}
2018-07-16 04:04:43 +00:00
render () {
2018-06-12 21:56:50 +00:00
const metrics = !this.state.metrics ? null : (
<div className="services">
{Object.entries(this.state.metrics.status)
.map(([name, info]) => (
<Service
name={name}
key={name}
2018-06-12 21:56:50 +00:00
graph={this.state.metrics.graph[name]}
{...info}
/>
))
2018-06-12 21:56:50 +00:00
}
</div>
2018-07-16 04:04:43 +00:00
)
2018-06-12 21:56:50 +00:00
return (
<div className="dashboard">
<h1>elstatus</h1>
2018-07-14 02:06:38 +00:00
{this.state.error ? (
<div className="error">
Error: {this.state.error}
</div>
) : null}
2018-07-14 02:34:03 +00:00
{this.state.loading && !this.state.error ? (
2018-07-14 01:43:10 +00:00
<React.Fragment>
<ServicePlaceholder />
<ServicePlaceholder />
<ServicePlaceholder />
</React.Fragment>
2018-07-14 02:06:38 +00:00
) : metrics}
2018-06-12 21:56:50 +00:00
</div>
2018-07-16 04:04:43 +00:00
)
2018-06-12 21:56:50 +00:00
}
}