From e33f0fa558d907ca0d159d8af5f38e1728863e47 Mon Sep 17 00:00:00 2001 From: slice Date: Sun, 15 Jul 2018 21:04:43 -0700 Subject: [PATCH] relint! --- priv/frontend/src/components/App.js | 136 +++++++++--------- priv/frontend/src/components/Graph.js | 59 ++++---- priv/frontend/src/components/Service.js | 18 +-- .../src/components/ServicePlaceholder.js | 12 +- priv/frontend/src/icons.js | 8 +- priv/frontend/src/index.js | 14 +- priv/frontend/src/util.js | 4 +- priv/frontend/src/ws/op.js | 4 +- 8 files changed, 131 insertions(+), 124 deletions(-) diff --git a/priv/frontend/src/components/App.js b/priv/frontend/src/components/App.js index f52338c..0ee4055 100644 --- a/priv/frontend/src/components/App.js +++ b/priv/frontend/src/components/App.js @@ -1,12 +1,12 @@ -import React, { Component } from 'react'; +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 './App.css' +import Service from './Service.js' +import ServicePlaceholder from './ServicePlaceholder.js' +import OP from '../ws/op.js' +import { log } from '../util.js' -const DOMAIN = 'https://elstatus.stayathomeserver.club'; +const DOMAIN = 'https://elstatus.stayathomeserver.club' // const ENDPOINT = 'http://localhost:8069/api/status' export default class App extends Component { @@ -20,101 +20,101 @@ export default class App extends Component { metrics: null, }; - async componentDidMount() { - await this.loadMetrics(); - this.connect(); + 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); + 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; + handlePacket (packet) { + const { op, c: channel, d: data } = packet if (op !== OP.DATA) { - log('ignoring boring packet:', packet); - return; + log('ignoring boring packet:', packet) + return } - const [, name] = channel.split(':'); + const [, name] = channel.split(':') - log('updating from channel:', channel); + log('updating from channel:', channel) - const { metrics } = this.state; - const graph = metrics.graph[name].slice(1); - const newGraph = [data, ...graph]; + const { metrics } = this.state + const graph = metrics.graph[name].slice(1) + const newGraph = [data, ...graph] - log('adding data:', data); + log('adding data:', data) this.setState(({ metrics: oldMetrics }, _props) => { - const newMetrics = { ...oldMetrics }; - newMetrics.graph[name] = newGraph; + const newMetrics = { ...oldMetrics } + newMetrics.graph[name] = newGraph - const [, latency] = data; - newMetrics.status[name].latency = latency; + const [, latency] = data + newMetrics.status[name].latency = latency return { metrics: newMetrics, - }; - }); + } + }) } - connect() { - log('connecting to ws'); + connect () { + log('connecting to ws') - const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss'); - this.websocket = new WebSocket(endpoint); + const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss') + this.websocket = new WebSocket(endpoint) this.websocket.onopen = () => { - log('ws opened'); - this.subscribeToChannels(); - }; + log('ws opened') + this.subscribeToChannels() + } this.websocket.onclose = ({ code, reason }) => { - log(`ws closed with code ${code} (reason: ${reason || ''}); ` - + `attempting to reconnect in ${this.reconnectionTime}ms`); - setTimeout(() => this.connect(), this.reconnectionTime); - this.reconnectionTime *= 2; - }; + log(`ws closed with code ${code} (reason: ${reason || ''}); ` + + `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); - log('ws recv:', parsed); + const { data } = message + const parsed = JSON.parse(data) + log('ws recv:', parsed) - this.handlePacket(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() }); + log('ws error:', event) } } - render() { + _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 : (
{Object.entries(this.state.metrics.status) @@ -128,7 +128,7 @@ export default class App extends Component { )) }
- ); + ) return (
@@ -148,6 +148,6 @@ export default class App extends Component { ) : metrics}
- ); + ) } } diff --git a/priv/frontend/src/components/Graph.js b/priv/frontend/src/components/Graph.js index 808183c..70b09ee 100644 --- a/priv/frontend/src/components/Graph.js +++ b/priv/frontend/src/components/Graph.js @@ -1,7 +1,7 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' -import ms from 'ms'; +import ms from 'ms' import { ResponsiveContainer, AreaChart, @@ -11,9 +11,9 @@ import { Tooltip, Area, ReferenceLine, -} from 'recharts'; +} from 'recharts' -import './Graph.css'; +import './Graph.css' export default class Graph extends Component { static propTypes = { @@ -24,34 +24,47 @@ export default class Graph extends Component { screenWidth: window.innerWidth, } - componentDidMount() { - window.addEventListener('resize', this.handleScreenChange); + componentDidMount () { + window.addEventListener('resize', this.handleScreenChange) } - componentWillUnmount() { - window.removeEventListener('resize', this.handleScreenChange); + componentWillUnmount () { + window.removeEventListener('resize', this.handleScreenChange) } handleScreenChange = () => { this.setState({ screenWidth: window.innerWidth, - }); + }) } - processData() { - const { data } = this.props; + processData () { + const { data } = this.props - return data.map(([timestamp, latency]) => ({ + const objects = data.map(([timestamp, latency]) => ({ timestamp, latency, - })).sort(({ timestamp: a }, { timestamp: b }) => a - b); + })) + + // sort so that new entries are first + return objects.sort(({ timestamp: a }, { timestamp: b }) => a - b) } - isSmallScreen() { - return this.state.screenWidth < 500; + isSmallScreen () { + return this.state.screenWidth < 500 } - render() { + render () { + const yAxis = this.isSmallScreen() + ? null + : ( + `${tick}ms`} + /> + ) + return (
@@ -63,14 +76,8 @@ export default class Graph extends Component { tickFormatter={(tick) => ms(Date.now() - tick)} tickLine={false} /> - {this.isSmallScreen() - ? null - : `${tick}ms`} - /> - } + {yAxis} +
- ); + ) } } diff --git a/priv/frontend/src/components/Service.js b/priv/frontend/src/components/Service.js index 1dafccc..914acc5 100644 --- a/priv/frontend/src/components/Service.js +++ b/priv/frontend/src/components/Service.js @@ -1,10 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React from 'react' +import PropTypes from 'prop-types' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import './Service.css'; -import Graph from './Graph.js'; +import './Service.css' +import Graph from './Graph.js' const Service = ({ graph, name, status, latency, description }) => (
@@ -28,12 +28,12 @@ const Service = ({ graph, name, status, latency, description }) => (

{graph ? : null}
-); +) Service.defaultProps = { graph: null, latency: null, -}; +} Service.propTypes = { graph: PropTypes.arrayOf( @@ -43,6 +43,6 @@ Service.propTypes = { status: PropTypes.bool.isRequired, latency: PropTypes.number, description: PropTypes.string.isRequired, -}; +} -export default Service; +export default Service diff --git a/priv/frontend/src/components/ServicePlaceholder.js b/priv/frontend/src/components/ServicePlaceholder.js index 4b97545..80ba7dd 100644 --- a/priv/frontend/src/components/ServicePlaceholder.js +++ b/priv/frontend/src/components/ServicePlaceholder.js @@ -1,9 +1,9 @@ -import React from 'react'; +import React from 'react' -import ReactPlaceholder from 'react-placeholder'; -import 'react-placeholder/lib/reactPlaceholder.css'; +import ReactPlaceholder from 'react-placeholder' +import 'react-placeholder/lib/reactPlaceholder.css' -import './ServicePlaceholder.css'; +import './ServicePlaceholder.css' const ServicePlaceholder = () => (
@@ -44,6 +44,6 @@ const ServicePlaceholder = () => ( {' '}
-); +) -export default ServicePlaceholder; +export default ServicePlaceholder diff --git a/priv/frontend/src/icons.js b/priv/frontend/src/icons.js index bae767b..c6694a1 100644 --- a/priv/frontend/src/icons.js +++ b/priv/frontend/src/icons.js @@ -1,12 +1,12 @@ -import { library } from '@fortawesome/fontawesome-svg-core'; +import { library } from '@fortawesome/fontawesome-svg-core' import { faCheckCircle, faExclamationCircle, -} from '@fortawesome/free-solid-svg-icons'; +} from '@fortawesome/free-solid-svg-icons' -export default function register() { +export default function register () { library.add( faCheckCircle, faExclamationCircle, - ); + ) } diff --git a/priv/frontend/src/index.js b/priv/frontend/src/index.js index af0200f..3e7a615 100644 --- a/priv/frontend/src/index.js +++ b/priv/frontend/src/index.js @@ -1,13 +1,13 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import React from 'react' +import ReactDOM from 'react-dom' -import './index.css'; -import App from './components/App'; -import register from './icons.js'; +import './index.css' +import App from './components/App' +import register from './icons.js' -register(); +register() ReactDOM.render( , document.getElementById('root'), -); +) diff --git a/priv/frontend/src/util.js b/priv/frontend/src/util.js index dee96d7..213298a 100644 --- a/priv/frontend/src/util.js +++ b/priv/frontend/src/util.js @@ -1,8 +1,8 @@ -export function log(...args) { +export function log (...args) { console.log( '%c[elstat]%c', 'color: purple; font-weight: bold', 'color: inherit; font-weight: inherit', ...args, - ); + ) } diff --git a/priv/frontend/src/ws/op.js b/priv/frontend/src/ws/op.js index 5986c40..17934e7 100644 --- a/priv/frontend/src/ws/op.js +++ b/priv/frontend/src/ws/op.js @@ -1,7 +1,7 @@ -module.exports = { +export default { UNSUBSCRIBE: -1, SUBSCRIBE: 0, SUBSCRIBED: 1, UNSUBSCRIBED: 2, DATA: 3, -}; +}