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 Service from './Service.js'
|
|
|
|
import ServicePlaceholder from './ServicePlaceholder.js'
|
2018-07-16 04:44:59 +00:00
|
|
|
import DegradedNotice from './DegradedNotice.js'
|
2018-07-18 19:21:44 +00:00
|
|
|
import StreamingClient from '../ws/client'
|
2018-07-18 21:59:21 +00:00
|
|
|
import Status from './Status'
|
2018-07-19 21:49:43 +00:00
|
|
|
import Page from './Page'
|
2018-07-18 21:59:21 +00:00
|
|
|
import { log, objectFromEntries, strictFetch } 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
|
|
|
|
2018-07-18 22:01:58 +00:00
|
|
|
export default class Dashboard extends Component {
|
2018-07-18 19:21:44 +00:00
|
|
|
client = null
|
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-18 21:59:21 +00:00
|
|
|
incident: 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 () {
|
2018-07-18 22:19:53 +00:00
|
|
|
try {
|
|
|
|
await this.loadMetrics()
|
|
|
|
await this.loadIncident()
|
|
|
|
} catch (error) {
|
|
|
|
this.setState({ error: error.toString() })
|
|
|
|
}
|
2018-07-18 21:59:21 +00:00
|
|
|
|
|
|
|
this.setState({ loading: false })
|
|
|
|
if (this.state.error) {
|
|
|
|
return
|
|
|
|
}
|
2018-07-17 01:05:50 +00:00
|
|
|
|
2018-07-18 19:21:44 +00:00
|
|
|
const endpoint = `${DOMAIN}/api/streaming`
|
|
|
|
.replace('https', 'wss')
|
|
|
|
.replace('http', 'ws')
|
2018-07-19 00:48:16 +00:00
|
|
|
|
2018-07-18 19:21:44 +00:00
|
|
|
this.client = new StreamingClient(endpoint, this.state.metrics)
|
|
|
|
this.client.connect()
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-18 19:21:44 +00:00
|
|
|
this.client.on('status', this.handleStatus.bind(this))
|
|
|
|
this.client.on('latency', this.handleLatency.bind(this))
|
2018-07-18 21:59:21 +00:00
|
|
|
|
|
|
|
this.client.on('incident_new', (incident) => {
|
|
|
|
this.setState({ incident })
|
|
|
|
})
|
|
|
|
this.client.on('incident_update', (incident) => {
|
|
|
|
this.setState({ incident })
|
|
|
|
})
|
|
|
|
this.client.on('incident_close', () => {
|
|
|
|
this.setState({ incident: null })
|
|
|
|
})
|
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:04:43 +00:00
|
|
|
async loadMetrics () {
|
|
|
|
log('loading metrics')
|
2018-07-13 19:07:53 +00:00
|
|
|
|
2018-07-18 22:19:53 +00:00
|
|
|
const resp = await strictFetch(`${DOMAIN}/api/status`)
|
2018-07-18 21:59:21 +00:00
|
|
|
this.setState({ metrics: await resp.json() })
|
|
|
|
}
|
2018-07-17 01:06:06 +00:00
|
|
|
|
2018-07-18 21:59:21 +00:00
|
|
|
async loadIncident () {
|
|
|
|
log('loading current incident')
|
|
|
|
|
2018-07-18 22:19:53 +00:00
|
|
|
const resp = await strictFetch(`${DOMAIN}/api/incidents/current`)
|
2018-07-18 21:59:21 +00:00
|
|
|
this.setState({ incident: await resp.json() })
|
2018-07-13 19:07:53 +00:00
|
|
|
}
|
|
|
|
|
2018-07-19 00:48:16 +00:00
|
|
|
renderNotice (services) {
|
|
|
|
const down = services.filter(([, { status }]) => !status)
|
|
|
|
|
|
|
|
// DegradedNotice should only be shown when there is no ongoing incident,
|
|
|
|
// and any services are reported as down.
|
|
|
|
if (!this.state.incident && down.length > 0) {
|
|
|
|
return <DegradedNotice services={objectFromEntries(down)}/>
|
|
|
|
}
|
|
|
|
|
|
|
|
return <Status incident={this.state.incident}/>
|
|
|
|
}
|
|
|
|
|
|
|
|
renderServices (services) {
|
|
|
|
const { graph: graphs } = this.state.metrics
|
|
|
|
return services.map(([name, info]) => (
|
|
|
|
<Service name={name} key={name} graph={graphs[name]} {...info}/>
|
|
|
|
))
|
|
|
|
}
|
|
|
|
|
|
|
|
renderPlaceholders () {
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<ServicePlaceholder/>
|
|
|
|
<ServicePlaceholder/>
|
|
|
|
<ServicePlaceholder/>
|
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderDashboardContent () {
|
|
|
|
if (this.state.error) {
|
|
|
|
return <div className="error">{this.state.error}</div>
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.loading) {
|
|
|
|
return this.renderPlaceholders()
|
2018-07-16 04:44:59 +00:00
|
|
|
}
|
2018-06-12 21:56:50 +00:00
|
|
|
|
2018-07-19 00:48:16 +00:00
|
|
|
const allServices = Object.entries(this.state.metrics.status)
|
|
|
|
|
|
|
|
const services = this.renderServices(allServices)
|
|
|
|
const notice = this.renderNotice(allServices)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
{notice}
|
|
|
|
{services}
|
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2018-06-12 21:56:50 +00:00
|
|
|
return (
|
2018-07-19 21:49:43 +00:00
|
|
|
<Page>
|
2018-07-13 19:29:46 +00:00
|
|
|
<h1>elstatus</h1>
|
2018-07-19 00:48:16 +00:00
|
|
|
{this.renderDashboardContent()}
|
2018-07-19 21:49:43 +00:00
|
|
|
</Page>
|
2018-07-16 04:04:43 +00:00
|
|
|
)
|
2018-06-12 21:56:50 +00:00
|
|
|
}
|
|
|
|
}
|