Merge pull request #9 from bitrise-io/changelog-handle-proxy-outage

Changelog handle proxy outage

Author: aorcsik

index.js

@@ -79,10 +79,16 @@ async function discoverWorkers(dir) {
         const config = {};
         const lines = tomlContent.split('\n');
         lines.forEach((line) => {
-          const match = line.match(/^(\w+)\s*=\s*["']?([^"'\n]+)["']?/);
-          if (match) {
-            const [, key, value] = match;
-            config[key] = value;
+          const matchArray = line.match(/^(\w+)\s*=\s*\[(.*)\]$/);
+          if (matchArray) {
+            const [, key, value] = matchArray;
+            config[key] = JSON.parse(`[${value}]`);
+          } else {
+            const match = line.match(/^(\w+)\s*=\s*["']?([^"'\n]+)["']?/);
+            if (match) {
+              const [, key, value] = match;
+              config[key] = value;
+            }
           }
         });
 
@@ -108,7 +114,11 @@ async function getWorker(urlObject) {
   }
 
   const matchedWorker = workers.filter((worker) => {
-    let routePattern = worker.config.route.replace('bitrise.io', '^');
+    let route = worker.config.route ? worker.config.route : null;
+    if (!route && worker.config.routes) [route] = worker.config.routes;
+    if (!route) return false;
+
+    let routePattern = route.replace('bitrise.io', '^');
     if (routePattern.endsWith('*')) {
       routePattern = routePattern.slice(0, -1);
     } else {

src/css/404.css

@@ -4,58 +4,3 @@ body {
 #intercom-container {
   display: none !important;
 }
-
-
-
-
-
-div#bitrise-status {
-  --radii-4: 0.25rem;
-
-  --space-8: 0.5rem;
-  --space-12: 0.75rem;
-
-  --neutral-10: #201b22;
-  --purple-80: #ead4f2;
-  --red-70: #ff8091;
-  --green-70: #77cf8f;
-  --orange-70: #fd9730;
-  --yellow-70: #ebba00;
-}
-
-div#bitrise-status a {
-  font-size: 0.6875rem;
-  line-height: 1rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  text-decoration: none;
-  border-radius: var(--radii-4);
-  display: inline-block;
-  padding: calc(var(--space-8) - 1px) calc(var(--space-12) - 1px);
-  border: 1px solid var(--purple-80);
-  color: var(--purple-80);
-}
-
-div#bitrise-status a.severity-critical {
-  background-color: var(--red-70);
-  border-color: var(--red-70);
-  color: var(--neutral-10);
-}
-
-div#bitrise-status a.severity-major {
-  background-color: var(--orange-70);
-  border-color: var(--orange-70);
-  color: var(--neutral-10);
-}
-
-div#bitrise-status a.severity-minor {
-  background-color: var(--yellow-70);
-  border-color: var(--yellow-70);
-  color: var(--neutral-10);
-}
-
-div#bitrise-status a.severity-none {
-  background-color: var(--green-70);
-  border-color: var(--green-70);
-  color: var(--neutral-10);
-}

src/html/maintenance.html

@@ -8,8 +8,6 @@
 
   <base href="/">
   <link rel="stylesheet" href="maintenance.css">
-  <link rel="stylesheet" href="404.css">
-  <script src="404.js"></script>
 
   <!-- Google Tag Manager -->
   <script>window.dataLayer = window.dataLayer || [];</script>
@@ -24,7 +22,7 @@
         <h1>
           <a href="/" title="Go to dashboard">
             <figure>
-              <img src="maintenance/bitrise_logo.svg" alt="bitrise" />
+              <img src="bitrise_logo.svg" alt="bitrise" />
             </figure>
           </a>
         </h1>
@@ -35,12 +33,12 @@ <h2>A quick tune-up is in progress. Faster builds on the way.</h2>
       </main>
     </section>
     <figure>
-      <img class="error" src="errors/bitrise_maintenance.svg" alt="Bitrise - Under Maintenance">
+      <img class="error" src="bitrise_maintenance.svg" alt="Bitrise - Under Maintenance">
     </figure>
   </div>
   <footer>
-    <div class="status" id="bitrise-status">
-      <a href="https://status.bitrise.io/" rel="noreferrer" target="_blank">Status</a>
+    <div class="status">
+      <a id="statuspage" href="https://status.bitrise.io/" rel="noreferrer" target="_blank">Status</a>
     </div>
     <div class="copyright">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -66,5 +64,7 @@ <h2>A quick tune-up is in progress. Faster builds on the way.</h2>
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TZK32GR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
+
+  <script src="status.js"></script>
 </body>
 </html>

src/js/404.js

@@ -1,47 +1,22 @@
 import '../css/404.css';
+import '../css/status.css';
+import ChangelogService from './changelog/ChangelogService';
+import { detectTopicFromUrl } from './shared/common';
+import { renderStatus } from './shared/status';
 
-/**
- * @typedef {{
- *  page: {
- *    id: string;
- *    name: string;
- *    url: string;
- *    time_zone: string;
- *    updated_at: string;
- *  };
- *  status: {
- *    indicator: "minor" | "major" | "critical" | "none" | "maintenance";
- *    description: string;
- *  };
- * }} StatusResult
- */
-
-/**
- * @param {URL} statusURL
- * @returns {Promise<{
- *  severity: "minor" | "major" | "critical" | "none";
- *  message: string;
- * }>}
- */
-const getStatus = async (statusURL) => {
-  const statusAPIURL = new URL(statusURL);
-  statusAPIURL.pathname = '/api/v2/status.json';
-  const result = await fetch(statusAPIURL);
-  /** @type {StatusResult} */
-  const data = await result.json();
-  return {
-    severity: data.status.indicator === 'maintenance' ? 'minor' : data.status.indicator,
-    message: data.status.description,
-  };
-};
+(async () => {
+  const url = new URL(document.location.href);
+  const topicSlugId = detectTopicFromUrl(url, 'changelog', 'topic');
+  if (topicSlugId) {
+    const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? '' : 'https://bitrise.io';
+    const changelogService = new ChangelogService(apiBase, 'https://app.bitrise.io');
+    const currentApiBase = await changelogService.getApiBase();
+    if (currentApiBase === changelogService.fallbackApiBase) {
+      window.location.href = `/changelog/topic?topic=${topicSlugId}`;
+    }
+  }
+})();
 
 window.addEventListener('load', async () => {
-  try {
-    const statusLink = document.querySelector('div#bitrise-status a');
-    const { severity, message } = await getStatus(statusLink.href);
-    statusLink.className = `severity-${severity}`;
-    statusLink.innerHTML = `Status: ${message}`;
-  } catch (e) {
-    /* don't update status badge */
-  }
+  renderStatus(document.querySelector('div#bitrise-status a'));
 });

src/js/changelog-topic.js

@@ -16,11 +16,11 @@ const topicMetaSeparator = document.querySelector('#changelog-topic-meta-separat
 topicMetaSeparator.style.display = 'none';
 
 const url = new URL(document.location.href);
-const topicSlugId = detectTopicFromUrl(url, 'changelog');
+const topicSlugId = detectTopicFromUrl(url, 'changelog', 'topic');
 
 /** @type {string} */
 const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? '' : 'https://bitrise.io';
-const changelogService = new ChangelogService(apiBase);
+const changelogService = new ChangelogService(apiBase, 'https://app.bitrise.io');
 
 document.getElementById('changelog-topic-title').innerHTML = "<span class='changelog-loading'>Loading</span>";
 document.getElementById('changelog-topic-meta').innerHTML = "<span class='changelog-loading'>Loading</span>";

src/js/changelog.js

@@ -34,7 +34,7 @@ document.cookie = `${cookieName}=${cookieValue};expires=${expires};${domain ? `d
 
 /** @type {string} */
 const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? '' : 'https://bitrise.io';
-const changelogService = new ChangelogService(apiBase);
+const changelogService = new ChangelogService(apiBase, 'https://app.bitrise.io');
 
 /** @type {HTMLElement} */
 const changelogList = new ChangelogList(document.getElementById('changelog-list'));
@@ -82,7 +82,8 @@ const getChangelogSettings = () => {
  */
 const renderFullChangelog = async (fullUrl) => {
   const topics = await changelogService.loadTopics(fullUrl);
-  changelogList.render(topics, lastVisitDate, getChangelogSettings());
+  const useFallback = changelogService.currentApiBase === changelogService.fallbackApiBase;
+  changelogList.render(topics, lastVisitDate, getChangelogSettings(), useFallback);
 };
 
 const loadMoreClickHandler = async (event) => {
@@ -113,7 +114,8 @@ const loadMoreClickHandler = async (event) => {
  */
 const renderLatestChangelog = async (latestUrl) => {
   const topics = await changelogService.loadTopics(latestUrl);
-  changelogList.render(topics, lastVisitDate, getChangelogSettings());
+  const useFallback = changelogService.currentApiBase === changelogService.fallbackApiBase;
+  changelogList.render(topics, lastVisitDate, getChangelogSettings(), useFallback);
 };
 
 const changelogSettingsTriggerClickHandler = () => {

src/js/changelog/ChangelogList.js

@@ -51,9 +51,10 @@ class ChangelogList {
   /**
    * @param {ChangelogTopic} topic
    * @param {boolean} isUnread
+   * @param {boolean} useFallback
    * @returns {HTMLLIElement}
    */
-  renderListItem(topic, isUnread = false) {
+  renderListItem(topic, isUnread = false, useFallback = false) {
     /** @type {HTMLLIElement} */
     const listItem = (isUnread ? this.unreadListItemTemplate : this.readListItemTemplate).cloneNode(true);
     listItem.querySelector('.changelog-timestamp').innerHTML = formatDate(topic.createdAt);
@@ -62,16 +63,17 @@ class ChangelogList {
     const listItemTag = this.tagFactory.getTopicTag(topic.tags);
     if (listItemTag) listItem.querySelector('.changelog-tag-placeholder').replaceWith(listItemTag);
 
-    listItem.querySelector('a').href = topic.webflowUrl;
+    listItem.querySelector('a').href = topic.webflowUrl(useFallback);
     return listItem;
   }
 
   /**
    * @param {ChangelogTopic[]} topics
    * @param {Date} lastVisitedDate
    * @param {{search?: string}} filters
+   * @param {boolean} useFallback
    */
-  render(topics, lastVisitedDate, filters = {}) {
+  render(topics, lastVisitedDate, filters = {}, useFallback = false) {
     this.list.innerHTML = '';
     let timestamp = null;
     topics.forEach((topic) => {
@@ -90,7 +92,7 @@ class ChangelogList {
       }
 
       const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime();
-      const listItem = this.renderListItem(topic, isUnread);
+      const listItem = this.renderListItem(topic, isUnread, useFallback);
       this.list.append(listItem);
     });
     if (this.list.innerHTML === '') {

src/js/changelog/ChangelogService.js

@@ -3,20 +3,52 @@ import ChangelogTopic from './ChangelogTopic';
 class ChangelogService {
   /**
    * @param {string} apiBase
+   * @param {string} fallbackApiBase
    */
-  constructor(apiBase) {
+  constructor(apiBase, fallbackApiBase) {
     /** @type {string} */
     this.apiBase = apiBase;
+    /** @type {string} */
+    this.fallbackApiBase = fallbackApiBase;
+    /** @type {string|null} */
+    this.currentApiBase = null;
+  }
+
+  /**
+   * Checks the availability of the primary and fallback API bases, and returns the one that is reachable.
+   * @throws {Error} if neither the primary nor the fallback API base is reachable
+   * @returns {Promise<string>} the reachable API base URL
+   */
+  async getApiBase() {
+    if (this.currentApiBase !== null) {
+      return this.currentApiBase;
+    }
+    try {
+      const response = await fetch(`${this.apiBase}/changelog-proxy`);
+      if (response.ok) {
+        this.currentApiBase = this.apiBase;
+      }
+    } catch (error) {
+      this.currentApiBase = this.fallbackApiBase;
+    }
+    if (this.currentApiBase === null) {
+      const response = await fetch(`${this.fallbackApiBase}/changelog-proxy`);
+      if (response.ok) {
+        this.currentApiBase = this.fallbackApiBase;
+      }
+    }
+    return this.currentApiBase;
   }
 
   /**
    * @param {string} changelogUrl
    * @returns {Promise<ChangelogTopic[]>}
    */
   async loadTopics(changelogUrl) {
+    const apiBase = await this.getApiBase();
     const d = new Date().toISOString().split(':');
     const cacheBuster = `${d[0].replace(/[^\d]/g, '')}${Math.floor(d[1] / 15)}`;
-    const url = `${this.apiBase + changelogUrl}?_=${cacheBuster}`;
+    const url = `${apiBase + changelogUrl}?_=${cacheBuster}`;
     const response = await fetch(url);
     const json = await response.json();
     return json.topic_list.topics.map((data) => new ChangelogTopic(data));
@@ -27,8 +59,9 @@ class ChangelogService {
    * @returns {Promise<ChangelogTopic>}
    */
   async loadTopic(topicSlugId) {
+    const apiBase = await this.getApiBase();
     if (topicSlugId.match(/rm-\d+/)) {
-      const url = `${this.apiBase}/changelog.json`;
+      const url = `${apiBase}/changelog.json`;
       const response = await fetch(url);
       const json = await response.json();
       const topicJson = json.topic_list.topics.filter(
@@ -39,7 +72,7 @@ class ChangelogService {
       }
     }
 
-    const url = `${this.apiBase}/changelog/api/t/${topicSlugId}.json`;
+    const url = `${apiBase}/changelog/api/t/${topicSlugId}.json`;
     const response = await fetch(url);
     const json = await response.json();
     if (!json.errors || json.errors.length === 0) {

src/js/changelog/ChangelogTopic.js

@@ -71,12 +71,20 @@ class ChangelogTopic {
     return this.data.slug;
   }
 
-  /** @returns {string} */
-  get webflowUrl() {
+  /**
+   * @param {boolean} useFallback
+   * @returns {string}
+   */
+  webflowUrl(useFallback = false) {
+    let basePath = '/changelog/';
+    if (useFallback) {
+      basePath = '/changelog/topic?topic=';
+    }
+
     if (this.id === 0) {
-      return `/changelog/${this.slug}`;
+      return `${basePath}${this.slug}`;
     }
-    return `/changelog/${this.slug}/${this.id}`;
+    return `${basePath}${this.slug}/${this.id}`;
   }
 
   /** @returns {boolean} */