init

src/components/monitorHistogram.js

@@ -0,0 +1,49 @@
+import config from '../../config.yaml'
+
+export default function MonitorHistogram({ kvMonitorsDaysMap, monitor }) {
+  let date = new Date()
+  date.setDate(date.getDate() - config.settings.daysInHistory)
+
+  if (typeof window !== 'undefined') {
+    return (
+      <div
+        key={`${monitor.id}-histogram`}
+        className="horizontal flex histogram"
+      >
+        {Array.from(Array(config.settings.daysInHistory).keys()).map(key => {
+          date.setDate(date.getDate() + 1)
+          const dayInHistory = date.toISOString().split('T')[0]
+          const dayInHistoryKey = 'h_' + monitor.id + '_' + dayInHistory
+
+          let bg = ''
+          let dayInHistoryStatus = 'No data'
+
+          if (typeof kvMonitorsDaysMap[dayInHistoryKey] !== 'undefined') {
+            bg = kvMonitorsDaysMap[dayInHistoryKey] ? 'green' : 'orange'
+            dayInHistoryStatus = kvMonitorsDaysMap[dayInHistoryKey]
+              ? 'No outages'
+              : 'Some outages'
+          }
+
+          return (
+            <div key={key} className="hitbox">
+              <div
+                className={`${bg} bar`}
+                data-tooltip={`${dayInHistory} - ${dayInHistoryStatus}`}
+              />
+            </div>
+          )
+        })}
+      </div>
+    )
+  } else {
+    return (
+      <div
+        key={`${monitor.id}-histogram`}
+        className="horizontal flex histogram"
+      >
+        <div className="grey-text">Loading histogram ...</div>
+      </div>
+    )
+  }
+}

src/components/monitorStatusLabel.js

@@ -0,0 +1,16 @@
+export default function MonitorStatusLabel({ kvMonitorsMap, monitor }) {
+  let labelColor = 'grey'
+  let labelText = 'No data'
+
+  if (typeof kvMonitorsMap[monitor.id] !== 'undefined') {
+    if (kvMonitorsMap[monitor.id].operational) {
+      labelColor = 'green'
+      labelText = 'Operational'
+    } else {
+      labelColor = 'orange'
+      labelText = 'Not great not terrible'
+    }
+  }
+
+  return <div className={`ui ${labelColor} horizontal label`}>{labelText}</div>
+}