From 5f8596cfd5435b2643f980fae8e8e0eb21c248fd Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben.zhang@watonomous.ca>
Date: Mon, 15 Jul 2024 21:54:52 +0000
Subject: [PATCH] Add legacy status page and useful links

---
 public/legacy.html | 407 +++++++++++++++++++++++++++++++++++++++++++++
 src/App.css        |   7 +
 src/App.tsx        |  12 +-
 src/index.css      |   9 +-
 4 files changed, 433 insertions(+), 2 deletions(-)
 create mode 100644 public/legacy.html
diff --git a/public/legacy.html b/public/legacy.html
new file mode 100644
index 0000000..23e8768
--- /dev/null
+++ b/public/legacy.html
@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<!-- This page is derived from https://github.com/healthchecks/dashboard/blob/dce0034edae2f25287a49ef5efb24a7aed12b299/index.html -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Healthchecks.io</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      /* Colors, dark theme */
+
+      .theme-dark {
+        background: #000;
+        color: #fff;
+      }
+
+      .theme-dark #panel div.check {
+        background: #aaa;
+        color: #000;
+        border: 2px solid #ddd;
+      }
+
+      .theme-dark #panel div.check.status-up {
+        color: #fff;
+        background: #263026;
+      }
+
+      .theme-dark #panel div.check.status-grace {
+        color: #ffb300;
+        background: #263026;
+        border: 2px solid #ffb300;
+      }
+
+      .theme-dark #panel div.check.status-down {
+        color: #ff3929;
+        background: #263026;
+        border: 2px solid #ff3929;
+      }
+
+      .theme-dark .spinner:after {
+        border-color: #4c604c transparent #4c604c transparent;
+      }
+
+      /* Colors, light theme */
+
+      .theme-light {
+        background: #fff;
+        color: #333;
+      }
+
+      .theme-light #panel div.check {
+        color: #000;
+        background: #fff;
+        border: 2px solid #ddd;
+      }
+
+      .theme-light #panel div.check.status-grace {
+        color: #000;
+        background: #ffab00;
+        border: 2px solid transparent;
+      }
+
+      .theme-light #panel div.check.status-down {
+        color: #fff;
+        background: #d81818;
+        border: 2px solid transparent;
+      }
+
+      .theme-light .spinner:after {
+        border-color: #ddd transparent #ddd transparent;
+      }
+
+      /* Spinner from https://loading.io/css/ */
+      .spinner {
+        display: none;
+      }
+
+      div.started .spinner {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        margin-top: -18px;
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+      }
+
+      .spinner:after {
+        content: ' ';
+        display: block;
+        width: 24px;
+        height: 24px;
+        margin: 1px;
+        border-radius: 50%;
+        border: 5px solid transparent;
+        animation: lds-dual-ring 1.25s linear infinite;
+      }
+
+      @keyframes lds-dual-ring {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* Layout and font */
+
+      html,
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial,
+          sans-serif;
+        height: 100%;
+        margin: 0;
+      }
+
+      #panel {
+        padding: 8px;
+      }
+
+      #panel div.check-variant {
+        padding: 0px 8px;
+        padding-bottom: 30px;
+      }
+
+      #panel div.check-variant > h1 {
+        font-size: 1.8em;
+      }
+
+      #panel div.check-group {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        grid-gap: 8px;
+        padding: 8px;
+      }
+
+      #panel div.check-group > h1 {
+        grid-column-start: 1;
+        grid-column-end: -1;
+        margin: 8px 0;
+        font-size: 1.2em;
+      }
+
+      #panel div.check {
+        padding: 8px 8px 32px 8px;
+        font-size: 18px;
+        position: relative;
+      }
+
+      #panel div.check .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      #panel div.check .lp {
+        position: absolute;
+        font-size: 13px;
+        opacity: 0.8;
+      }
+
+      #panel div.check .lp {
+        bottom: 8px;
+        left: 8px;
+      }
+
+      div.check {
+        display: inline-block;
+      }
+
+      .check-template {
+        display: none;
+      }
+    </style>
+  </head>
+
+  <body class="theme-light">
+    <div id="panel">
+      <h1>WATcloud Status</h1>
+      <p>
+        This page contains the status of the WATcloud compute infrastructure.
+      </p>
+      <h2>Useful links</h2>
+      <ul>
+        <li><a href="https://cloud.watonomous.ca">WATcloud website</a></li>
+        <li>
+          <a href="https://cloud.watonomous.ca/machines">Machine specs</a>
+        </li>
+        <li>
+          <a href="https://cloud.watonomous.ca/docs">WATcloud documentation</a>
+        </li>
+        <li><a href="../">New status page</a></li>
+      </ul>
+    </div>
+
+    <div id="panel">
+      <h1 data-readonly-key="tCsst0GSKpfvslmpmlsmivRrUCRuv6Iv">All checks</h1>
+    </div>
+
+    <div class="check-template">
+      <div class="name"></div>
+      <div class="lp"></div>
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      function fetch(key, callback) {
+        var httpRequest = new XMLHttpRequest();
+        httpRequest.onreadystatechange = function () {
+          if (httpRequest.readyState === 4) {
+            if (httpRequest.status === 200) {
+              callback(JSON.parse(httpRequest.responseText));
+            }
+          }
+        };
+        httpRequest.open('GET', 'https://healthchecks.io/api/v2/checks/');
+        httpRequest.setRequestHeader('X-Api-Key', key);
+        httpRequest.send();
+      }
+
+      function timeSince(date) {
+        var v = Math.floor((new Date() - date) / 1000);
+
+        if (v < 60) {
+          // v is seconds
+          return v + ' second' + (v == 1 ? '' : 's');
+        }
+
+        v = Math.floor(v / 60); // v is now minutes
+        if (v < 60) {
+          return v + ' minute' + (v == 1 ? '' : 's');
+        }
+
+        v = Math.floor(v / 60); // v is now hours
+        if (v < 24) {
+          return v + ' hour' + (v == 1 ? '' : 's');
+        }
+
+        v = Math.floor(v / 24); // v is now days
+        return v + ' day' + (v == 1 ? '' : 's');
+      }
+
+      function sortWATOMachineNames(names) {
+        // Sort by machine name, prioritizing ones that contain "-ubuntu"
+        // TODO: this violates separation of data and presentation, because we have
+        // this business logic in the presentation code. Find a way to encode it into the
+        // tags or use a separate configuration.
+
+        const ubuntuNames = names
+          .filter((name) => name.includes('-ubuntu'))
+          .sort();
+        const nonUbuntuNames = names
+          .filter((name) => !name.includes('-ubuntu'))
+          .sort();
+        return [...ubuntuNames, ...nonUbuntuNames];
+      }
+
+      const template = document.querySelector('.check-template');
+
+      function makeGroupElement(groupName, checks) {
+        const container = document.createElement('div');
+        container.setAttribute('class', 'check-group');
+
+        const title = document.createElement('h1');
+        title.textContent = groupName;
+
+        const fragment = document.createDocumentFragment();
+
+        const sorted = checks.sort((a, b) => a.name.localeCompare(b.name));
+        sorted.forEach(function (item) {
+          var div = template.cloneNode(true);
+          div.setAttribute(
+            'class',
+            `check status-${item.status}` + (item.started ? ' started' : '')
+          );
+          div.querySelector('.name').textContent = item.name || 'unnamed';
+          if (item.last_ping) {
+            var s = timeSince(Date.parse(item.last_ping)) + ' ago';
+            div.querySelector('.lp').textContent = s;
+          }
+          fragment.appendChild(div);
+        });
+
+        container.appendChild(title);
+        container.appendChild(fragment);
+        return container;
+      }
+
+      function makeVariantElement(variantName, groupedChecks) {
+        const container = document.createElement('div');
+        container.setAttribute('class', 'check-variant');
+
+        const title = document.createElement('h1');
+        title.textContent = variantName;
+
+        var fragment = document.createDocumentFragment();
+        const groupedChecksKeys = sortWATOMachineNames(
+          Object.keys(groupedChecks)
+        );
+        for (const groupName of groupedChecksKeys) {
+          fragment.appendChild(
+            makeGroupElement(groupName, groupedChecks[groupName])
+          );
+        }
+
+        container.appendChild(title);
+        container.appendChild(fragment);
+
+        return container;
+      }
+
+      function groupBy(list, keyGetter) {
+        const map = {};
+        list.forEach((item) => {
+          const key = keyGetter(item);
+          const collection = map[key];
+          if (!collection) {
+            map[key] = [item];
+          } else {
+            collection.push(item);
+          }
+        });
+        return map;
+      }
+
+      function updatePanel(node) {
+        if (!node.dataset.readonlyKey) {
+          return;
+        }
+        fetch(node.dataset.readonlyKey, function (doc) {
+          const datasetId = 'TAG_' + node.dataset.readonlyKey.substr(0, 6);
+
+          // Preprocess checks
+          const checks = doc.checks.map((check) => {
+            const tags = check.tags.split(' ');
+
+            const additionalAttributes = {};
+            for (const tag of tags) {
+              if (!tag.includes('=')) {
+                continue;
+              }
+              const [key, value] = tag.split('=');
+              additionalAttributes[key] = value;
+            }
+
+            return {
+              ...check,
+              ...additionalAttributes,
+            };
+          });
+
+          const containerId = datasetId;
+          const container = document.createElement('div');
+          container.setAttribute('id', containerId);
+
+          const checksByHost = groupBy(
+            checks,
+            (check) => check.host || 'unknown'
+          );
+          container.appendChild(makeVariantElement('By-host', checksByHost));
+
+          const checksByType = groupBy(
+            checks,
+            (check) => check.check || 'unknown'
+          );
+          container.appendChild(makeVariantElement('By-type', checksByType));
+
+          const oldContainer = document.getElementById(containerId);
+          if (oldContainer) {
+            oldContainer.replaceWith(container);
+          } else {
+            node.parentNode.insertBefore(container, node.nextSibling);
+          }
+        });
+      }
+
+      if (window.location.hash) {
+        var panel;
+
+        var pairs = window.location.hash.substr(1).split('&');
+        for (var i = 0, pair; (pair = pairs[i]); i++) {
+          if (pair.indexOf('theme=') != -1) {
+            document.body.setAttribute('class', pair.replace('=', '-'));
+            continue;
+          }
+
+          var parts = pair.split('=');
+          var h1 = document.createElement('H1');
+          h1.dataset.readonlyKey = parts[0];
+          if (parts[1]) {
+            h1.innerText = decodeURIComponent(parts[1]);
+          }
+
+          if (!panel) {
+            panel = document.getElementById('panel');
+            panel.innerHTML = '';
+          }
+          panel.appendChild(h1);
+        }
+      }
+      document.querySelectorAll('h1').forEach(updatePanel);
+      setInterval(function () {
+        document.querySelectorAll('h1').forEach(updatePanel);
+      }, 5000);
+    </script>
+  </body>
+</html>
diff --git a/src/App.css b/src/App.css
index 4d7b5cc..4e33d7b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,3 +21,10 @@
     mask-position 1s ease,
     -webkit-mask-position 1s ease;
 }
+
+.main-logo {
+  @apply text-inherit;
+  &:hover {
+    @apply text-inherit;
+  }
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index c09d495..50234e2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,15 @@ function App() {
         </div>
       </div>
       <div className="mb-8">
-        <h2 className="text-xl">Options</h2>
+        <h2 className="text-2xl">Useful Links</h2>
+        <ul>
+          <li><a href="https://cloud.watonomous.ca" target="_blank">Documentation</a></li>
+          <li><a href="https://github.com/WATonomous/infrastructure-support/discussions" target="_blank">Announcements</a></li>
+          <li><a href="./legacy.html">Legacy Status Page</a></li>
+        </ul>
+      </div>
+      <div className="mb-8">
+        <h2 className="text-2xl">Options</h2>
         <span className="text-sm text-gray-500 flex items-center justify-center">
           <input type="checkbox" id="show-internal" checked={showInternal} onChange={() => setShowInternal(!showInternal)} />
           <label htmlFor="show-internal" className="ml-1">Show internal checks</label>
@@ -44,10 +52,12 @@ function App() {
       </div>
       <div className="mb-8">
         <h2 className="text-2xl">Healthchecks.io</h2>
+        <h3 className="text-lg text-gray-500">Monitoring data from healthchecks.io</h3>
         <HealthchecksioStatus showInternal={showInternal} {...healthchecksioOptions} />
       </div>
       <div className="mb-8">
         <h2 className="text-2xl">Sentry</h2>
+        <h3 className="text-lg text-gray-500">Monitoring data from watonomous.sentry.io</h3>
         <SentryStatus {...sentryOptions} />
       </div>
     </>
diff --git a/src/index.css b/src/index.css
index 44e5dd9..1928359 100644
--- a/src/index.css
+++ b/src/index.css
@@ -47,7 +47,7 @@
   */
   .dark,
   :root[class~="dark"] {
-    --background: 222.2 84% 4.9%;
+    --background: rgba(17, 17, 17, 1);
     --foreground: 210 40% 98%;
 
     --card: 222.2 84% 4.9%;
@@ -95,4 +95,11 @@
 
 code {
   font-size: 0.8em;
+}
+
+a {
+  @apply text-blue-500;
+  &:hover {
+    @apply underline;
+  }
 }
\ No newline at end of file
