feat: optimize KV storage read/write operations

- the state is now stored in a single KV key
- there is one write for cron and one read for render

src/components/monitorHistogram.js

@@ -1,8 +1,7 @@
 import config from '../../config.yaml'
 
 export default function MonitorHistogram({
-  kvMonitorsFailedDaysArray,
-  monitor,
+  monitorId,
   kvMonitor,
 }) {
   // create date and set date - daysInHistogram for the first day of the histogram
@@ -12,20 +11,19 @@ export default function MonitorHistogram({
   if (typeof window !== 'undefined') {
     return (
       <div
-        key={`${monitor.id}-histogram`}
+        key={`${monitorId}-histogram`}
         className="horizontal flex histogram"
       >
         {Array.from(Array(config.settings.daysInHistogram).keys()).map(key => {
           date.setDate(date.getDate() + 1)
           const dayInHistogram = date.toISOString().split('T')[0]
-          const dayInHistogramKey = 'h_' + monitor.id + '_' + dayInHistogram
 
           let bg = ''
           let dayInHistogramLabel = config.settings.dayInHistogramNoData
 
           // filter all dates before first check, check the rest
           if (kvMonitor && kvMonitor.firstCheck <= dayInHistogram) {
-            if (!kvMonitorsFailedDaysArray.includes(dayInHistogramKey)) {
+            if (!kvMonitor.failedDays.includes(dayInHistogram)) {
               bg = 'green'
               dayInHistogramLabel = config.settings.dayInHistogramOperational
             } else {
@@ -48,7 +46,7 @@ export default function MonitorHistogram({
   } else {
     return (
       <div
-        key={`${monitor.id}-histogram`}
+        key={`${monitorId}-histogram`}
         className="horizontal flex histogram"
       >
         <div className="grey-text">Loading histogram ...</div>

src/components/monitorStatusHeader.js

@@ -1,17 +1,15 @@
 import config from '../../config.yaml'
 
-export default function MonitorStatusHeader({ operational, lastUpdate }) {
+export default function MonitorStatusHeader({kvMonitorsMetadata}) {
   let backgroundColor = 'green'
   let headerText = config.settings.allmonitorsOperational
   let textColor = 'black'
 
-  if (!operational) {
+  if (!kvMonitorsMetadata.monitorsOperational) {
     backgroundColor = 'yellow'
     headerText = config.settings.notAllmonitorsOperational
   }
 
-  const lastCheckAgo = Math.round((Date.now() - lastUpdate.value) / 1000)
-
   return (
     <div className={`ui inverted segment ${backgroundColor}`}>
       <div className="horizontal flex between">
@@ -19,9 +17,9 @@ export default function MonitorStatusHeader({ operational, lastUpdate }) {
           {headerText}
         </div>
         {
-          lastUpdate.metadata && typeof window !== 'undefined' && (
+          kvMonitorsMetadata.lastUpdate && typeof window !== 'undefined' && (
           <div className={`${textColor}-text`}>
-            checked {lastCheckAgo} sec ago (from {lastUpdate.metadata.loc})
+            checked {Math.round((Date.now() - kvMonitorsMetadata.lastUpdate.time) / 1000)} sec ago (from {kvMonitorsMetadata.lastUpdate.loc})
           </div>
           )
         }

src/components/monitorStatusLabel.js

@@ -1,11 +1,11 @@
 import config from '../../config.yaml'
 
-export default function MonitorStatusLabel({ kvMonitorsMap, monitor }) {
+export default function MonitorStatusLabel({ kvMonitor }) {
   let labelColor = 'grey'
   let labelText = 'No data'
 
-  if (typeof kvMonitorsMap[monitor.id] !== 'undefined') {
-    if (kvMonitorsMap[monitor.id].operational) {
+  if (typeof kvMonitor !== 'undefined') {
+    if (kvMonitor.operational) {
       labelColor = 'green'
       labelText = config.settings.monitorLabelOperational
     } else {