elstatus
-
- {this.state.error ? (
-
- {this.state.error}
-
- ) : null}
-
- {this.state.loading && !this.state.error ? (
-
-
-
-
-
- ) : metrics}
+ {this.renderDashboardContent()}
)
}
diff --git a/priv/frontend/src/components/DegradedNotice.js b/priv/frontend/src/components/DegradedNotice.js
index fe5e088..885ec88 100644
--- a/priv/frontend/src/components/DegradedNotice.js
+++ b/priv/frontend/src/components/DegradedNotice.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import './DegradedNotice.css'
-const DegradedNotice = ({ services }) => {
+export default function DegradedNotice ({ services }) {
const keys = Object.keys(services)
const serviceNames = keys.join(', ')
@@ -23,5 +23,3 @@ const DegradedNotice = ({ services }) => {
DegradedNotice.propTypes = {
services: PropTypes.object.isRequired,
}
-
-export default DegradedNotice
diff --git a/priv/frontend/src/components/Incident.js b/priv/frontend/src/components/Incident.js
index 88f789c..b61504d 100644
--- a/priv/frontend/src/components/Incident.js
+++ b/priv/frontend/src/components/Incident.js
@@ -12,7 +12,7 @@ const OUTAGE_TYPES = {
degraded_service: 'Degraded Service',
}
-const Incident = ({ incident }) => {
+export default function Incident ({ incident }) {
const { content, end_date: end, start_date: start, title, type, stages } = incident
const ago = ms(Date.now() - start * 1000)
const agoEnd = end ? ms(Date.now - end * 1000) : null
@@ -51,5 +51,3 @@ Incident.propTypes = {
stages: PropTypes.array,
}),
}
-
-export default Incident
diff --git a/priv/frontend/src/components/Service.js b/priv/frontend/src/components/Service.js
index e14dfdd..5349c63 100644
--- a/priv/frontend/src/components/Service.js
+++ b/priv/frontend/src/components/Service.js
@@ -38,7 +38,7 @@ function getServiceState (status, latency) {
return status ? 'alive' : 'dead'
}
-const Service = ({ graph, name, status, latency, description }) => {
+export default function Service ({ graph, name, status, latency, description }) {
const state = getServiceState(status, latency)
const title = titles[state]
@@ -81,5 +81,3 @@ Service.propTypes = {
latency: PropTypes.number,
description: PropTypes.string.isRequired,
}
-
-export default Service
diff --git a/priv/frontend/src/components/ServicePlaceholder.css b/priv/frontend/src/components/ServicePlaceholder.css
index 0bcc6ed..d457594 100644
--- a/priv/frontend/src/components/ServicePlaceholder.css
+++ b/priv/frontend/src/components/ServicePlaceholder.css
@@ -7,3 +7,23 @@
grid-template-columns: 3rem 1fr;
grid-gap: 1rem;
}
+
+.service-placeholder .emoji {
+ width: 3rem !important;
+ height: 3rem !important;
+}
+
+.service-placeholder .name {
+ width: 100% !important;
+ height: 3rem !important;
+}
+
+.service-placeholder .text {
+ margin-top: 1rem !important;
+}
+
+.service-placeholder .graph {
+ width: 100% !important;
+ height: 175px !important;
+ margin-top: 1rem !important;
+}
diff --git a/priv/frontend/src/components/ServicePlaceholder.js b/priv/frontend/src/components/ServicePlaceholder.js
index 80ba7dd..236090f 100644
--- a/priv/frontend/src/components/ServicePlaceholder.js
+++ b/priv/frontend/src/components/ServicePlaceholder.js
@@ -5,45 +5,44 @@ import 'react-placeholder/lib/reactPlaceholder.css'
import './ServicePlaceholder.css'
-const ServicePlaceholder = () => (
-
-
+export default function ServicePlaceholder () {
+ return (
+
+
+
+ {' '}
+
+
+ {' '}
+
+
{' '}
{' '}
-
- {' '}
-
-
- {' '}
-
-
-)
-
-export default ServicePlaceholder
+ )
+}
diff --git a/priv/frontend/src/components/Stage.js b/priv/frontend/src/components/Stage.js
index cc8ae67..fe3a258 100644
--- a/priv/frontend/src/components/Stage.js
+++ b/priv/frontend/src/components/Stage.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import ms from 'ms'
-const Stage = ({ stage }) => {
+export default function Stage ({ stage }) {
const { created_at: createdAt, title, content } = stage
const ago = ms(Date.now() - createdAt * 1000)
@@ -21,7 +21,5 @@ Stage.propTypes = {
created_at: PropTypes.number,
title: PropTypes.string,
content: PropTypes.string,
- })
+ }),
}
-
-export default Stage
diff --git a/priv/frontend/src/components/Status.js b/priv/frontend/src/components/Status.js
index fada855..6fe1d86 100644
--- a/priv/frontend/src/components/Status.js
+++ b/priv/frontend/src/components/Status.js
@@ -5,7 +5,7 @@ import classnames from 'classnames'
import './Status.css'
import Incident from './Incident'
-const Status = ({ incident }) => {
+export default function Status ({ incident }) {
let view = null
if (incident) {
view =
@@ -27,5 +27,3 @@ const Status = ({ incident }) => {
Status.propTypes = {
incident: PropTypes.object,
}
-
-export default Status