<style media="screen"> body { font-family: sans-serif; } .incident { width: 350px; padding: 8px; padding-bottom: 2px; background: #f4f5f7; border-radius: 4px; margin: 10px 0; } .incident-name { font-size: 1.2rem; } .incident-status { margin-top: 4px; font-size: 0.9rem; color: rgba(0, 0, 0, 0.8); } .component { margin: 8px 0; padding: 8px; background: #00C7E5; border-radius: 4px; } .component-name { font-size: 1rem; } .component-status { font-size: 0.8rem; } .operational { background: #E3FCEF; } .degraded-perfomance { background: #FFFAE6; } .partial-outage { background: #FFFAE6; } .under-maintenance { background: #FFFAE6; } .major-outage { background: #FFEBE6; } .divider { width: 100%; } </style> <div id="teamlead-status-widget" class="teamlead-status-widget"></div> <script type="text/javascript"> const widget = document.getElementById('teamlead-status-widget') fetch('https://jqn5z9955dzm.statuspage.io/api/v2/incidents/unresolved.json') .then((res) => res.json()) .then(({ incidents }) => { widget.innerHTML = incidents.map(({ name: incidentName, status: incidentStatus, components }) => { const incidentContents = components.map(({ name, status }) => (` <div class="component ${status.replace('_', '-')}"> <div class="component-name">${name}</div> <div class="component-status">Status: ${status.replace('_', ' ')}</div> </div> `)).join('') return ` <div class="incident ${incidentStatus}"> <div class="incident-name">${incidentName}</div> <div class="incident-status">Status: ${incidentStatus.replace('_', ' ')}</div> <div class="divider"></div> ${incidentContents} </div> ` }).join('') }) </script> |