Status Widget

En avansert statuswidget for StatusPage-kompatible API-er med omfattende filtreringsmuligheter og responsivt design.

Hovedfunksjoner

• 🔄 Universal kompatibilitet - Fungerer med alle StatusPage.io-instanser
• 🚫 Avansert filtrering - Skjul spesifikke komponenter, hendelser og vedlikehold
• 📊 Intelligent kategorisering - Filtrer etter status og alvorlighetsgrad
• 🔍 Sanntidssøk - Søk og filtrer i hendelseshistorikk
• 🌍 Flerspråklig - Automatisk språkdeteksjon (norsk/engelsk)
• 📱 Responsivt design - Optimert for desktop og mobil
• ⚡ Ytelsesoptimert - Intelligent hurtigbufring, lazy loading og Service Worker-støtte
• ⌨️ Tastatursnarvei - Hurtigtaster for effektiv bruk og navigasjon

Filtreringssystem

Kjernefeaturet er det konsistente filtreringssystemet som følger enkle regler:

Enkel og konsistent filtrering

• Når en komponent filtreres vekk (i exclude_components), blir ALT relatert til denne komponenten fjernet fra alle deler av widgeten
• Dette gjelder komponentoversikt, planlagt vedlikehold, hendelser og hendelseshistorikk
• Både hovedkomponenter og underkomponenter håndteres likt

Hvordan det fungerer

• Komponenter - Skjul hele komponentgrupper permanent fra alle visninger
• Hendelser - Skjules hvis DE BERØRER EN ELLER FLERE eksluderte komponenter
• Vedlikehold - Skjules hvis DE BERØRER EN ELLER FLERE eksluderte komponenter
• Mønstergjenkjenning - Avansert regex-basert filtrering med samme konsistente logikk

Eksempel på konsistent filtrering

Hvis du ekskluderer “ELMA”, vil:

• ✅ Komponenten “ELMA” være skjult fra komponentlisten
• ✅ Vedlikehold som påvirker “ELMA” være skjult (selv om vedlikeholdet også påvirker andre komponenter)
• ✅ Hendelser som påvirker “ELMA” være skjult (selv om hendelsen også påvirker andre komponenter)
• ✅ Dette gjelder alle visninger: nåværende status, planlagt vedlikehold, aktive hendelser og hendelseshistorikk

Kom i gang raskt

Grunnleggende bruk

{% include status_widget.html api="https://status.digdir.no" %}

Med tittel

{% include status_widget.html api="https://status.digdir.no" title="Digitaliseringsdirektoratet" %}

Filtrering (mest brukt)

{% include status_widget.html api="https://status.digdir.no" exclude_components="eFormidling,ELMA" %}

Tilgjengelige API-er

• https://status.digdir.no - Digitaliseringsdirektoratet
• https://status.skatteetaten.no - Skatteetaten

Filtrering av innhold

Konsistent filtreringslogikk

Status-widgeten følger en enkel og forutsigbar regel:

• Når du filtrerer bort en komponent, fjernes ALT relatert til denne komponenten fra ALLE deler av widgeten
• Dette betyr at hendelser og vedlikehold som påvirker den filtrerte komponenten ikke vises, uansett om de også påvirker andre komponenter

Praktisk eksempel

exclude_components="eFormidling"

Resultat:
✅ Komponenten "eFormidling" vises ikke i komponentlisten
✅ Vedlikehold som påvirker "eFormidling" vises ikke (selv om det også påvirker andre systemer)
✅ Hendelser som påvirker "eFormidling" vises ikke (selv om de også påvirker andre systemer)
✅ Dette gjelder alle seksjoner: status, planlagt vedlikehold, aktive hendelser og historikk

Hvordan finne komponenter å filtrere

1. Aktiver debug-modus for å se alle komponenter:

   {% include status_widget.html api="https://status.digdir.no" debug="true" %}
   

2. Åpne utviklerverktøy (F12) og se Console-fanen

3. Kopier komponentnavn fra loggen

4. Legg til i exclude_components (kommaseparert)

Enkle filtreringseksempler

Skjul spesifikke komponenter:

{% include status_widget.html api="https://status.digdir.no" exclude_components="Test,eFormidling" %}

Skjul løste hendelser:

{% include status_widget.html api="https://status.digdir.no" exclude_incident_statuses="resolved,postmortem" %}

Skjul mindre viktige hendelser:

{% include status_widget.html api="https://status.digdir.no" exclude_impact_levels="minor,none" %}

Viktig: Hvordan komponentfiltrering fungerer

Når du bruker exclude_components, følger widgeten et enkelt prinsipp:

• “Hvis en komponent er ekskludert, skal ingenting som berører den komponenten vises”
• Dette gjelder alle deler av widgeten: komponentstatus, vedlikehold og hendelser
• Både hovedkomponenter og underkomponenter behandles likt

Eksempel:

{% include status_widget.html api="https://status.digdir.no" exclude_components="ELMA" %}

• Komponenten “ELMA” vises ikke
• Vedlikehold som påvirker “ELMA” vises ikke (selv om det også påvirker andre komponenter)
• Hendelser som påvirker “ELMA” vises ikke (selv om de også påvirker andre komponenter)

Kombinert filtrering

{% include status_widget.html 
   api="https://status.digdir.no" 
   title="Produksjonssystemer"
   exclude_components="Test,Debug,Internal"
   exclude_impact_levels="none"
   exclude_incident_statuses="resolved"
   history_days="3" %}

Praktiske eksempler

Flere etater på samme side

{% include status_widget.html api="https://status.digdir.no" title="Digitaliseringsdirektoratet" %}
{% include status_widget.html api="https://status.skatteetaten.no" title="Skatteetaten" %}

Tilpasset språk og oppdateringsintervall

{% include status_widget.html 
   api="https://status.digdir.no" 
   lang="en" 
   refresh_interval="300000" %}

Avanserte filtreringsalternativer

Regex-basert filtrering

Skjul alle testkomponenter:

{% include status_widget.html api="https://status.digdir.no" exclude_component_patterns='[{"pattern":"Test.*","flags":"i"},{"pattern":".*Staging.*","flags":"i"}]' %}

Skjul hendelser med spesifikke ord:

{% include status_widget.html api="https://status.digdir.no" exclude_incident_patterns='[{"pattern":".*test.*","flags":"i"},{"pattern":".*internal.*","flags":"i"}]' %}

Skjul vedlikehold med mønstre:

{% include status_widget.html api="https://status.digdir.no" exclude_maintenance_patterns='[{"pattern":".*planned.*","flags":"i"}]' %}

Alle parametere

Merk: enable_sw (Service Worker) er kun tilgjengelig som HTML-attributt, ikke Jekyll-parameter.

Statusverdier

Widgeten viser status med fargekoder og ikoner:

• 🟢 Operasjonell (operational) - Alle systemer fungerer normalt
• 🟡 Redusert ytelse (degraded_performance) - Mindre ytelsesproblem
• 🟠 Delvis nedetid (partial_outage) - Noen funksjoner påvirket
• 🔴 Større nedetid (major_outage) - Kritiske problemer
• 🔵 Vedlikehold (under_maintenance) - Planlagt vedlikehold

Funksjoner

Hva viser widgeten

• Systemstatus - Sanntidsstatus for alle tjenester med hierarkisk visning
• Planlagt vedlikehold - Kommende og pågående vedlikeholdsvindu
• Aktive hendelser - Pågående problemer med oppdateringer og løsningsarbeid
• Hendelseshistorikk - Tidligere hendelser organisert etter dato med søk

Automatiske funksjoner

• Oppdateres hver 3. minutt (kan tilpasses med refresh_interval)
• Responsivt design for desktop og mobil
• Automatisk språkdeteksjon basert på nettleserspråk
• Intelligent hurtigbufring for raskere lasting
• Feilhåndtering med automatisk gjenprøving ved feil
• Service Worker-støtte for offline-funktionalitet (valgfritt)

Tastatursnarvei

• Ctrl/Cmd + R eller F5 - Manuell oppdatering av alle data
• Escape - Fjern alle aktive filtre og søk
• Ctrl/Cmd + F - Fokuser søkefelt (kun i hendelsesvisning)