public/legacy.html

<!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>