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'
|
2018-07-16 04:44:59 +00:00
|
|
|
import DegradedNotice from './DegradedNotice.js'
|
2018-07-16 04:04:43 +00:00
|
|
|
import OP from '../ws/op.js'
|
2018-07-16 04:44:59 +00:00
|
|
|
import { log, objectFromEntries } from '../util.js'
|
2018-07-16 04:21:41 +00:00
|
|
|
import { domain as DOMAIN } from '../config.json'
|
2018-06-12 21:56:50 +00:00
|
|
|
|
|
|
|
export default class App extends Component {
|
2018-07-16 04:24:23 +00:00
|
|
|
websocket = null
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:24:23 +00:00
|
|
|
reconnectionTime = 1000
|
2018-07-14 02:11:50 +00:00
|
|
|
|
2018-06-12 21:56:50 +00:00
|
|
|
state = {
|
|
|
|
loading: true,
|
|
|
|
error: null,
|
|
|
|
metrics: null,
|
2018-07-16 04:24:23 +00:00
|
|
|
}
|
2018-06-12 21:56:50 +00:00
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
async componentDidMount () {
|
|
|
|
await this.loadMetrics()
|
|
|
|
this.connect()
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
subscribeToChannels () {
|
2018-07-17 01:05:50 +00:00
|
|
|
if (this.state.metrics == null) {
|
|
|
|
// fetching state failed, bail
|
|
|
|
log('not going to subscribe to realtime updates due to fetch failure')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
const { graph } = this.state.metrics
|
2018-07-17 01:05:50 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
const channels = Object.keys(graph).reduce(
|
|
|
|
(channels, name) => [...channels, `latency:${name}`, `status:${name}`],
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
|
|
|
log(
|
|
|
|
`subscribing to ${channels.length} channels: ${channels.join(', ')}`
|
|
|
|
)
|
2018-07-13 19:07:53 +00:00
|
|
|
|
|
|
|
this._send({
|
|
|
|
op: OP.SUBSCRIBE,
|
|
|
|
channels,
|
2018-07-16 04:04:43 +00:00
|
|
|
})
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
handleStatus (name, [, status]) {
|
|
|
|
const { status: statuses } = this.state.metrics
|
|
|
|
log('updating status on:', name)
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
if (!(name in statuses)) {
|
|
|
|
log(`failed to locate channel ${name} to update statuses`)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
if (statuses[name].status === status) {
|
|
|
|
log(`ignoring stale status (${status}) for ${name}`)
|
2018-07-16 04:04:43 +00:00
|
|
|
return
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
this.setState(({ metrics: old }, _props) => {
|
|
|
|
const metrics = { ...old }
|
|
|
|
metrics.status[name].status = status
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
return { metrics }
|
|
|
|
})
|
|
|
|
}
|
2018-07-13 19:29:46 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
handleLatency (name, data) {
|
2018-07-16 04:04:43 +00:00
|
|
|
const { metrics } = this.state
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
log('adding latency entry:', data)
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-17 01:15:51 +00:00
|
|
|
// latency entries come in newest to oldest, so remove the oldest entry
|
|
|
|
const graph = metrics.graph[name].slice(0, metrics.graph[name].length - 1)
|
|
|
|
|
|
|
|
// make new data come in first
|
|
|
|
const newGraph = [data, ...graph]
|
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
this.setState(({ metrics: old }, _props) => {
|
|
|
|
const metrics = { ...old }
|
|
|
|
metrics.graph[name] = newGraph
|
2018-07-13 19:29:46 +00:00
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
const [, latency] = data
|
2018-07-16 04:22:06 +00:00
|
|
|
metrics.status[name].latency = latency
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
return { metrics }
|
2018-07-16 04:04:43 +00:00
|
|
|
})
|
2018-06-12 21:56:50 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:22:06 +00:00
|
|
|
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)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
connect () {
|
|
|
|
log('connecting to ws')
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss')
|
|
|
|
this.websocket = new WebSocket(endpoint)
|
2018-07-13 19:07:53 +00:00
|
|
|
|
|
|
|
this.websocket.onopen = () => {
|
2018-07-16 04:04:43 +00:00
|
|
|
log('ws opened')
|
|
|
|
this.subscribeToChannels()
|
|
|
|
}
|
2018-07-13 19:07:53 +00:00
|
|
|
|
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
|
|
|
|
2018-07-13 19:07:53 +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-13 19:07:53 +00:00
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
this.handlePacket(parsed)
|
|
|
|
}
|
2018-07-13 19:07:53 +00:00
|
|
|
|
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-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
_send (payload) {
|
|
|
|
this.websocket.send(JSON.stringify(payload))
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
async loadMetrics () {
|
|
|
|
log('loading metrics')
|
2018-07-13 19:07:53 +00:00
|
|
|
|
|
|
|
try {
|
2018-07-17 01:06:06 +00:00
|
|
|
var resp = await fetch(`${DOMAIN}/api/status`)
|
2018-07-13 19:07:53 +00:00
|
|
|
} catch (err) {
|
2018-07-17 01:06:06 +00:00
|
|
|
this.setState({
|
|
|
|
error: `Network error: ${err}`,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!resp.ok) {
|
|
|
|
this.setState({
|
|
|
|
error: `Failed to fetch stats (${resp.status} ${resp.statusText})`,
|
|
|
|
})
|
|
|
|
return
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
2018-07-17 01:06:06 +00:00
|
|
|
|
|
|
|
const json = await resp.json()
|
|
|
|
|
|
|
|
this.setState({ metrics: json, loading: false })
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-16 04:04:43 +00:00
|
|
|
render () {
|
2018-07-16 04:44:59 +00:00
|
|
|
let metrics = null
|
|
|
|
|
|
|
|
if (this.state.metrics) {
|
|
|
|
const allServices = Object.entries(this.state.metrics.status)
|
|
|
|
const graphs = this.state.metrics.graph
|
|
|
|
|
|
|
|
const services = allServices.map(([name, info]) => (
|
|
|
|
<Service name={name} key={name} graph={graphs[name]} {...info}/>
|
|
|
|
))
|
|
|
|
|
|
|
|
const down = allServices.filter(([, { status }]) => !status)
|
2018-07-17 01:16:39 +00:00
|
|
|
const notice = down.length > 0
|
|
|
|
? <DegradedNotice services={objectFromEntries(down)}/>
|
|
|
|
: null
|
2018-07-16 04:44:59 +00:00
|
|
|
|
|
|
|
metrics = (
|
|
|
|
<div className="services">
|
|
|
|
{notice}
|
|
|
|
{services}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2018-06-12 21:56:50 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="dashboard">
|
2018-07-13 19:29:46 +00:00
|
|
|
<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>
|
2018-07-17 01:06:15 +00:00
|
|
|
<ServicePlaceholder/>
|
|
|
|
<ServicePlaceholder/>
|
|
|
|
<ServicePlaceholder/>
|
2018-07-14 01:43:10 +00:00
|
|
|
</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
|
|
|
}
|
|
|
|
}
|