From ca13c83a1a33f066e8050184f308f6941f6a0cc9 Mon Sep 17 00:00:00 2001
From: Anand Chowdhary <mail@anandchowdhary.com>
Date: Wed, 24 Feb 2021 19:29:34 +0530
Subject: [PATCH] :sparkles: Add scheduled maintenance events

---
 i18n.yml                              |  10 +++
 src/components/ActiveScheduled.svelte | 100 ++++++++++++++++++++++++++
 src/components/Incident.svelte        |  78 ++++++++++++++------
 src/components/Scheduled.svelte       |  72 +++++++++++++++++++
 src/routes/index.svelte               |  36 +++++-----
 5 files changed, 260 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ActiveScheduled.svelte
 create mode 100644 src/components/Scheduled.svelte

diff --git a/i18n.yml b/i18n.yml
index f1852a8..d937977 100644
--- a/i18n.yml
+++ b/i18n.yml
@@ -44,3 +44,13 @@ errorTitle: An error occurred
 errorIntro: An error occurred in trying to get the latest status details.
 errorText: You can try again in a few moments.
 errorHome: Go to the homepage
+pastScheduledMaintenance: Past Scheduled Maintenance
+scheduledMaintenance: Scheduled Maintenance
+scheduledMaintenanceSummaryStarted: Started at $DATE for $DURATION minutes
+scheduledMaintenanceSummaryStarts: Starts at $DATE for $DURATION minutes
+startedAt: Started at
+startsAt: Starts at
+duration: Duration
+durationMin: $DURATION minutes
+incidentCompleted: Completed
+incidentScheduled: Scheduled
diff --git a/src/components/ActiveScheduled.svelte b/src/components/ActiveScheduled.svelte
new file mode 100644
index 0000000..f8b00e7
--- /dev/null
+++ b/src/components/ActiveScheduled.svelte
@@ -0,0 +1,100 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let incidents = [];
+
+  onMount(async () => {
+    try {
+      incidents = (
+        await cachedResponse(`scheduled-current-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "open",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "maintenance",
+          })
+        )
+      ).data;
+      incidents = incidents.map((incident, index) => {
+        incident.showHeading =
+          index === 0 ||
+          new Date(incidents[index - 1].created_at).toLocaleDateString() !==
+            new Date(incident.created_at).toLocaleDateString();
+        incident.metadata = {};
+        if (incident.body.includes("<!--")) {
+          const summary = incident.body.split("<!--")[1].split("-->")[0];
+          const lines = summary
+            .split("\n")
+            .filter((i) => i.trim())
+            .filter((i) => i.includes(":"));
+          lines.forEach((i) => {
+            incident.metadata[i.split(/:(.+)/)[0].trim()] = i.split(/:(.+)/)[1].trim();
+          });
+        }
+        return incident;
+      });
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+  });
+</script>
+
+{#if !incidents.length && !loading}
+  <article class="up">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
+{/if}
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.scheduledMaintenance}</h2>
+    {#each incidents as incident}
+      <article class="degraded degraded-active link">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
+            {#if incident.metadata.start && incident.metadata.end}
+              <div>
+                {(new Date(incident.metadata.start).getTime() < new Date().getTime()
+                  ? config.i18n.scheduledMaintenanceSummaryStarted
+                  : config.i18n.scheduledMaintenanceSummaryStarts
+                )
+                  .replace(/\$DATE/g, new Date(incident.metadata.start).toLocaleString())
+                  .replace(
+                    /\$DURATION/g,
+                    Math.floor(
+                      (new Date(incident.metadata.end).getTime() -
+                        new Date(incident.metadata.start).getTime()) /
+                        60000
+                    )
+                  )}
+              </div>
+            {/if}
+          </div>
+          <div class="f r">
+            <a href={`${config.path}/incident/${incident.number}`}>
+              {config.i18n.incidentReport.replace(/\$NUMBER/g, incident.number)}
+            </a>
+          </div>
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  section {
+    margin-bottom: 2rem;
+  }
+</style>
diff --git a/src/components/Incident.svelte b/src/components/Incident.svelte
index 60cbcb1..ed639a5 100644
--- a/src/components/Incident.svelte
+++ b/src/components/Incident.svelte
@@ -30,6 +30,17 @@
           })
         )
       ).data;
+      incident.metadata = {};
+      if (incident.body.includes("<!--")) {
+        const summary = incident.body.split("<!--")[1].split("-->")[0];
+        const lines = summary
+          .split("\n")
+          .filter((i) => i.trim())
+          .filter((i) => i.includes(":"));
+        lines.forEach((i) => {
+          incident.metadata[i.split(/:(.+)/)[0].trim()] = i.split(/:(.+)/)[1].trim();
+        });
+      }
     } catch (error) {
       handleError(error);
     }
@@ -51,23 +62,8 @@
   });
 </script>
 
-<style>
-  footer {
-    margin-top: 2rem;
-  }
-  p {
-    margin-top: 0;
-  }
-  h2 {
-    line-height: 1;
-  }
-  .r {
-    text-align: right;
-  }
-</style>
-
 <svelte:head>
-  <title>{config.i18n.incidentTitle.replace('$NUMBER', number)}</title>
+  <title>{config.i18n.incidentTitle.replace("$NUMBER", number)}</title>
 </svelte:head>
 
 <h2>
@@ -76,7 +72,13 @@
   {:else}
     {incident.title}
     <span class={`tag ${incident.state}`}>
-      {incident.state === 'closed' ? config.i18n.incidentFixed : config.i18n.incidentOngoing}
+      {incident.state === "closed"
+        ? incident.metadata.start
+          ? config.i18n.incidentCompleted
+          : config.i18n.incidentFixed
+        : incident.metadata.start
+        ? config.i18n.incidentScheduled
+        : config.i18n.incidentOngoing}
     </span>
   {/if}
 </h2>
@@ -87,9 +89,30 @@
   {:else}
     <div class="f">
       <dl>
-        <dt>{config.i18n.incidentOpenedAt}</dt>
-        <dd>{new Date(incident.created_at).toLocaleString()}</dd>
-        {#if incident.closed_at}
+        {#if incident.metadata.start}
+          <dt>
+            {new Date(incident.metadata.start).getTime() < new Date().getTime()
+              ? config.i18n.startedAt
+              : config.i18n.startsAt}
+          </dt>
+          <dd>{new Date(incident.metadata.start).toLocaleString()}</dd>
+        {:else}
+          <dt>{config.i18n.incidentOpenedAt}</dt>
+          <dd>{new Date(incident.created_at).toLocaleString()}</dd>
+        {/if}
+        {#if incident.metadata.start && incident.metadata.end}
+          <dt>{config.i18n.duration}</dt>
+          <dd>
+            {config.i18n.durationMin.replace(
+              /\$DURATION/g,
+              Math.floor(
+                (new Date(incident.metadata.end).getTime() -
+                  new Date(incident.metadata.start).getTime()) /
+                  60000
+              )
+            )}
+          </dd>
+        {:else if incident.closed_at}
           <dt>{config.i18n.incidentClosedAt}</dt>
           <dd>{new Date(incident.closed_at).toLocaleString()}</dd>
         {/if}
@@ -126,3 +149,18 @@
 </section>
 
 <footer><a href={config.path}>{config.i18n.incidentBack}</a></footer>
+
+<style>
+  footer {
+    margin-top: 2rem;
+  }
+  p {
+    margin-top: 0;
+  }
+  h2 {
+    line-height: 1;
+  }
+  .r {
+    text-align: right;
+  }
+</style>
diff --git a/src/components/Scheduled.svelte b/src/components/Scheduled.svelte
new file mode 100644
index 0000000..8bd15ad
--- /dev/null
+++ b/src/components/Scheduled.svelte
@@ -0,0 +1,72 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let incidents = [];
+
+  onMount(async () => {
+    try {
+      incidents = (
+        await cachedResponse(`maintenance-issues-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "closed",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "maintenance",
+          })
+        )
+      ).data;
+    } catch (error) {
+      handleError(error);
+    }
+    incidents = incidents.map((incident, index) => {
+      incident.showHeading =
+        index === 0 ||
+        new Date(incidents[index - 1].created_at).toLocaleDateString() !==
+          new Date(incident.created_at).toLocaleDateString();
+      return incident;
+    });
+    loading = false;
+  });
+</script>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.pastScheduledMaintenance}</h2>
+    {#each incidents as incident}
+      {#if incident.showHeading}
+        <h3>{new Date(incident.created_at).toLocaleDateString()}</h3>
+      {/if}
+      <article class="link degraded">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
+            <div>Completed</div>
+          </div>
+          <div class="f r">
+            <a href={`${config.path}/incident/${incident.number}`}>
+              {config.i18n.incidentReport.replace(/\$NUMBER/g, incident.number)}
+            </a>
+          </div>
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  h2 {
+    margin-top: 2rem;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3fa1b21..29b874a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,9 +1,11 @@
 <script>
+  import snarkdown from "snarkdown";
   import ActiveIncidents from "../components/ActiveIncidents.svelte";
-  import LiveStatus from "../components/LiveStatus.svelte";
+  import ActiveScheduled from "../components/ActiveScheduled.svelte";
   import Incidents from "../components/Incidents.svelte";
+  import LiveStatus from "../components/LiveStatus.svelte";
+  import Scheduled from "../components/Scheduled.svelte";
   import config from "../data/config.json";
-  import snarkdown from "snarkdown";
 
   let title = "Status";
   try {
@@ -11,34 +13,36 @@
   } catch (error) {}
 </script>
 
-<style>
-  p.lead {
-    font-size: 110%;
-  }
-  header {
-    margin-bottom: 2rem;
-  }
-</style>
-
 <svelte:head>
   <title>{title}</title>
 </svelte:head>
 
 <header>
-  {#if config['status-website']}
-    {#if config['status-website'].introTitle}
+  {#if config["status-website"]}
+    {#if config["status-website"].introTitle}
       <h1>
-        {@html snarkdown(config['status-website'].introTitle)}
+        {@html snarkdown(config["status-website"].introTitle)}
       </h1>
     {/if}
-    {#if config['status-website'].introMessage}
+    {#if config["status-website"].introMessage}
       <p class="lead">
-        {@html snarkdown(config['status-website'].introMessage)}
+        {@html snarkdown(config["status-website"].introMessage)}
       </p>
     {/if}
   {/if}
 </header>
 
 <ActiveIncidents />
+<ActiveScheduled />
 <LiveStatus />
+<Scheduled />
 <Incidents />
+
+<style>
+  p.lead {
+    font-size: 110%;
+  }
+  header {
+    margin-bottom: 2rem;
+  }
+</style>