Site status

import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>

import '@rhds/elements/rh-site-status/rh-site-status.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-site-status></rh-site-status>
</rh-context-demo>

#demo-form {
  height: min-content;
  align-items: center;;
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-md, 8px);
  & #domain {
    flex: 1;
  }
}

import '@rhds/elements/rh-site-status/rh-site-status.js';
// `<rh-site-status>` ordinarily fetched status information from the current domain
// i.e. the hostname of the site which the site-status element is served from
// The purpose of this demo is to show the status of other domains.
// WARNING: This technique is not meant to be imitated on production sites,
//          it's for information purposes only
import { PfSelect } from '@patternfly/elements/pf-select/pf-select.js';
const select = document.getElementById('domain')
const form = document.getElementById('demo-form');
const originalFetch = window.fetch;
select.addEventListener('change', function(event) {
  if (event.target instanceof PfSelect) {
    // remove the previous status element
    document.body.querySelector('rh-site-status').remove();
    // override the fetch call to the
    window.fetch = new Proxy(originalFetch, {
      apply(target, thisArg, [url, ...args]) {
        if (url.endsWith('.redhat.com/index.json')) {
const domain = event.target.value;
return target.apply(thisArg, [`https://${domain}/index.json`, ...args]);
        } else {
return target.apply(thisArg, [url, ...args]);
        }
      },
    });
    // add a new site-status element
    form.append(document.createElement('rh-site-status'));
  }
})

<form id="demo-form">
  <label for="domain">Domain</label>
  <pf-select id="domain">
    <pf-option>status.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>
  <rh-site-status></rh-site-status>
</form>

import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>



<script>
  window.fetch = new Proxy(window.fetch, {
    apply: (target, thisArg, [url, ...args]) => {
      if (url === 'https://status.redhat.com/index.json') {
        return Promise.resolve({
ok: true,
status: 200,
statusText: 'OK',
async json() {
  await new Promise(r => setTimeout(r, 100_000));
  return {
    page: 'fake data',
    components: ['fake data'],
    incidents: 'fake data',
    status: {
      indicator: 'none',
      description: 'All Systems Operational',
    }
  }
},
        });
      } else {
        return target.apply(thisArg, [url, ...args]);
      }
    },
  });
</script>

import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status>
  <span slot="loading-text">Chargement</span>
</rh-site-status>



<script>
  window.fetch = new Proxy(window.fetch, {
    apply: (target, thisArg, [url, ...args]) => {
      if (url === 'https://status.redhat.com/index.json') {
        return Promise.resolve({
ok: true,
status: 200,
statusText: 'OK',
async json() {
  await new Promise(r => setTimeout(r, 100_000));
  return {
    page: 'fake data',
    components: ['fake data'],
    incidents: 'fake data',
    status: {
      indicator: 'none',
      description: 'All Systems Operational',
    }
  }
},
        });
      } else {
        return target.apply(thisArg, [url, ...args]);
      }
    },
  });
</script>

import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>

<script>
  window.fetch = new Proxy(window.fetch, {
    apply: (target, thisArg, [url, ...args]) => {
      if (url === 'https://status.redhat.com/index.json') {
        return Promise.resolve({
ok: false,
status: 404,
statusText: 'Error: 404 Not Found',
        });
      } else {
        return target.apply(thisArg, [url, ...args]);
      }
    },
  });
</script>

import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>

<script>
  window.fetch = new Proxy(window.fetch, {
    apply: (target, thisArg, [url, ...args]) => {
      if (url === 'https://status.redhat.com/index.json') {
        return Promise.resolve({
ok: true,
status: 200,
statusText: 'OK',
async json() {
  await new Promise(r => setTimeout(r, 3_500));
  return {
    page: 'fake data',
    components: ['fake data'],
    incidents: 'fake data',
    status: {
      indicator: 'critical',
      description: 'Critical Outage',
    }
  };
},
        });
      } else {
        return target.apply(thisArg, [url, ...args]);
      }
    },
  });
</script>

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(
    {
      page: 'fake data',
      components: ['fake data'],
      incidents: 'fake data',
      status: { indicator: 'major', description: 'Major Outage' }
    }
  )
);
import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>

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(
    {
      page: 'fake data',
      components: ['fake data'],
      incidents: 'fake data',
      status: { indicator: 'minor', description: 'Partially Degraded Service' }
    }
  )
);
import '@rhds/elements/rh-site-status/rh-site-status.js';

<rh-site-status></rh-site-status>