fix(site-status): automatically fetch status for domain (#1547)

* fix(site-status): automatically fetch status for domain * refactor(site-status): decruft * test(site-status): test green
RedHat-UX · May 15, 2024 · 971214d · 971214d
1 parent 9494e3e
commit 971214d
Show file tree

Hide file tree

Showing 12 changed files with 368 additions and 166 deletions.
diff --git a/.changeset/eager-dolls-wear.md b/.changeset/eager-dolls-wear.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-site-status>`: automatically fetch status for the current domain
diff --git a/elements/rh-site-status/demo/domains.html b/elements/rh-site-status/demo/domains.html
@@ -0,0 +1,33 @@
+<form id="demo-form">
+  <rh-site-status id="status"></rh-site-status>
+  <label for="domain"></label>
+  <pf-select id="domain">
+    <pf-option>redhat.com</pf-option>
+    <pf-option>access.redhat.com</pf-option>
+    <pf-option>bugzilla.redhat.com</pf-option>
+    <pf-option>cloud.redhat.com</pf-option>
+    <pf-option>connect.redhat.com</pf-option>
+    <pf-option>console.redhat.com</pf-option>
+    <pf-option>developers.redhat.com</pf-option>
+    <pf-option>docs.redhat.com</pf-option>
+    <pf-option>intelligence.redhat.com</pf-option>
+  </pf-select>
+</form>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+  import '@patternfly/elements/pf-select/pf-select.js';
+  document.getElementById('domain').addEventListener('change', function(event) {
+    document.getElementById('status').__TESTING_ONLY_DONT_USE_OR_WELL_TELL_YOUR_BOSS__domain__ = event.target.value;
+  })
+</script>
+
+<style>
+#demo-form {
+  display: flex;
+  gap: var(--rh-space-md, 8px);
+  & #domain {
+    flex: 1;
+  }
+}
+</style>
diff --git a/elements/rh-site-status/demo/fetch-override.js b/elements/rh-site-status/demo/fetch-override.js
diff --git a/elements/rh-site-status/demo/loading.html b/elements/rh-site-status/demo/loading.html
@@ -1,11 +1,33 @@
 <script type="module">
-  import { overrideFetch } from '../fetch-override.js';
+  function overrideFetch(ok, status, statusText, json) {
+    window.fetch = new Proxy(window.fetch, {
+      apply: (target, thisArg, args) => {
+        if (args[0] === 'https://status.redhat.com/index.json') {
+          return Promise.resolve({
+            ok,
+            status,
+            statusText,
+            json,
+          });
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+  }
+
   overrideFetch(
     true,
     200,
     'OK',
     () => new Promise(resolve => {
-      setTimeout(() => resolve({ status: { indicator: 'none', description: 'All Systems Operational' } }), 100000);
+      setTimeout(() => resolve(
+        {
+          page: 'fake data',
+          components: ['fake data'],
+          incidents: 'fake data',
+          status: { indicator: 'none', description: 'All Systems Operational' }
+        }
+      ), 100000);
     })
   );
 </script>

diff --git a/elements/rh-site-status/demo/status-404.html b/elements/rh-site-status/demo/status-404.html
@@ -1,5 +1,21 @@
+
 <script type="module">
-  import { overrideFetch } from '../fetch-override.js';
+  function overrideFetch(ok, status, statusText, json) {
+    window.fetch = new Proxy(window.fetch, {
+      apply: (target, thisArg, args) => {
+        if (args[0] === 'https://status.redhat.com/index.json') {
+          return Promise.resolve({
+            ok,
+            status,
+            statusText,
+            json,
+          });
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+  }
+
   overrideFetch(false, 404, 'Error: 404 Not Found');
 </script>
 

diff --git a/elements/rh-site-status/demo/status-critical.html b/elements/rh-site-status/demo/status-critical.html
@@ -1,10 +1,32 @@
 <script type="module">
-  import { overrideFetch } from '../fetch-override.js';
+  function overrideFetch(ok, status, statusText, json) {
+    window.fetch = new Proxy(window.fetch, {
+      apply: (target, thisArg, args) => {
+        if (args[0] === 'https://status.redhat.com/index.json') {
+          return Promise.resolve({
+            ok,
+            status,
+            statusText,
+            json,
+          });
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+  }
+
   overrideFetch(
     true,
     200,
     'Critical Outage',
-    () => Promise.resolve({ status: { indicator: 'critical', description: 'Critical Outage' } })
+    () => Promise.resolve(
+      {
+        page: 'fake data',
+        components: ['fake data'],
+        incidents: 'fake data',
+        status: { indicator: 'critical', description: 'Critical Outage' }
+      }
+    )
   );
 </script>
 

diff --git a/elements/rh-site-status/demo/status-maintenance.html b/elements/rh-site-status/demo/status-maintenance.html
diff --git a/elements/rh-site-status/demo/status-major.html b/elements/rh-site-status/demo/status-major.html
@@ -1,10 +1,32 @@
 <script type="module">
-  import { overrideFetch } from '../fetch-override.js';
+  function overrideFetch(ok, status, statusText, json) {
+    window.fetch = new Proxy(window.fetch, {
+      apply: (target, thisArg, args) => {
+        if (args[0] === 'https://status.redhat.com/index.json') {
+          return Promise.resolve({
+            ok,
+            status,
+            statusText,
+            json,
+          });
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+  }
+
   overrideFetch(
     true,
     200,
     'Major Outage',
-    () => Promise.resolve({ status: { indicator: 'major', description: 'Major Outage' } })
+    () => Promise.resolve(
+      {
+        page: 'fake data',
+        components: ['fake data'],
+        incidents: 'fake data',
+        status: { indicator: 'major', description: 'Major Outage' }
+      }
+    )
   );
 </script>
 

diff --git a/elements/rh-site-status/demo/status-minor.html b/elements/rh-site-status/demo/status-minor.html
@@ -1,10 +1,32 @@
 <script type="module">
-  import { overrideFetch } from '../fetch-override.js';
+  function overrideFetch(ok, status, statusText, json) {
+    window.fetch = new Proxy(window.fetch, {
+      apply: (target, thisArg, args) => {
+        if (args[0] === 'https://status.redhat.com/index.json') {
+          return Promise.resolve({
+            ok,
+            status,
+            statusText,
+            json,
+          });
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+  }
+
   overrideFetch(
     true,
     200,
     'Partially Degraded Service',
-    () => Promise.resolve({ status: { indicator: 'minor', description: 'Partially Degraded Service' } })
+    () => Promise.resolve(
+      {
+        page: 'fake data',
+        components: ['fake data'],
+        incidents: 'fake data',
+        status: { indicator: 'minor', description: 'Partially Degraded Service' }
+      }
+    )
   );
 </script>
 

diff --git a/elements/rh-site-status/docs/30-code.md b/elements/rh-site-status/docs/30-code.md
@@ -1,17 +1,9 @@
-{% renderOverview %}
-  <rh-site-status></rh-site-status>
-{% endrenderOverview %}
+{% renderInstall %}{% endrenderInstall %}
 
-{% band header="Usage" %}{% endband %}
+## Usage
 
-{% renderSlots %}{% endrenderSlots %}
+```html
+<rh-site-status></rh-site-status>
+```
 
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}