Site status
On this page
On this page
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>
```
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.