Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Site status

OverviewStyleGuidelinesCodeAccessibilityDemos
Site StatusColor ContextDomainsLoadingLocalizationStatus 404Status CriticalStatus MajorStatus MinorSite StatusColor ContextDomainsLoadingLocalizationStatus 404Status CriticalStatus MajorStatus Minor

Site Status

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

Color Context

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

Domains

#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>
```

Loading

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

Localization

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

Status 404

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

Status Critical

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: 'critical',
      description: 'Critical Outage',
    }
  };
},
        });
      } else {
        return target.apply(thisArg, [url, ...args]);
      }
    },
  });
</script>
```

Status Major

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

Status Minor

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>
```
© 2021-2025 Red Hat, Inc. Deploys by Netlify