add red notice when some services are unreachable
This commit is contained in:
parent
3fdf603cb5
commit
d3458ac763
4 changed files with 76 additions and 15 deletions
|
@ -3,8 +3,9 @@ import React, { Component } from 'react'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import Service from './Service.js'
|
import Service from './Service.js'
|
||||||
import ServicePlaceholder from './ServicePlaceholder.js'
|
import ServicePlaceholder from './ServicePlaceholder.js'
|
||||||
|
import DegradedNotice from './DegradedNotice.js'
|
||||||
import OP from '../ws/op.js'
|
import OP from '../ws/op.js'
|
||||||
import { log } from '../util.js'
|
import { log, objectFromEntries } from '../util.js'
|
||||||
import { domain as DOMAIN } from '../config.json'
|
import { domain as DOMAIN } from '../config.json'
|
||||||
|
|
||||||
export default class App extends Component {
|
export default class App extends Component {
|
||||||
|
@ -153,20 +154,31 @@ export default class App extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const metrics = !this.state.metrics ? null : (
|
let metrics = null
|
||||||
<div className="services">
|
|
||||||
{Object.entries(this.state.metrics.status)
|
if (this.state.metrics) {
|
||||||
.map(([name, info]) => (
|
const allServices = Object.entries(this.state.metrics.status)
|
||||||
<Service
|
const graphs = this.state.metrics.graph
|
||||||
name={name}
|
|
||||||
key={name}
|
const services = allServices.map(([name, info]) => (
|
||||||
graph={this.state.metrics.graph[name]}
|
<Service name={name} key={name} graph={graphs[name]} {...info}/>
|
||||||
{...info}
|
|
||||||
/>
|
|
||||||
))
|
))
|
||||||
|
|
||||||
|
let notice = null
|
||||||
|
const down = allServices.filter(([, { status }]) => !status)
|
||||||
|
|
||||||
|
if (down.length !== 0) {
|
||||||
|
// a service is down :(
|
||||||
|
notice = <DegradedNotice services={objectFromEntries(down)}/>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
metrics = (
|
||||||
|
<div className="services">
|
||||||
|
{notice}
|
||||||
|
{services}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard">
|
<div className="dashboard">
|
||||||
|
|
17
priv/frontend/src/components/DegradedNotice.css
Normal file
17
priv/frontend/src/components/DegradedNotice.css
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
.degraded-notice {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border: solid 1px hsla(0, 100%, 80%, 1);
|
||||||
|
background: hsla(0, 100%, 90%, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.degraded-notice header {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.degraded-notice p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
25
priv/frontend/src/components/DegradedNotice.js
Normal file
25
priv/frontend/src/components/DegradedNotice.js
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
import './DegradedNotice.css'
|
||||||
|
|
||||||
|
const DegradedNotice = ({ services }) => {
|
||||||
|
const keys = Object.keys(services)
|
||||||
|
const serviceNames = keys.join(', ')
|
||||||
|
const plural = keys.length === 1 ? '' : 's'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="degraded-notice">
|
||||||
|
<header>{keys.length} service{plural} are unreachable</header>
|
||||||
|
<p>
|
||||||
|
elstat is having trouble contacting <strong>{serviceNames}</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
DegradedNotice.propTypes = {
|
||||||
|
services: PropTypes.object.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DegradedNotice
|
|
@ -6,3 +6,10 @@ export function log (...args) {
|
||||||
...args,
|
...args,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function objectFromEntries (entries) {
|
||||||
|
return entries.reduce(
|
||||||
|
(object, [key, value]) => ({ ...object, [key]: value }),
|
||||||
|
{}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue