Eenvoudig PRTG Dashboard Aanpassen met CSS

In de wereld van netwerk monitoring is PRTG een krachtige tool die veel IT professionals dagelijks gebruiken. Maar soms wil je de weergave net even anders hebben dan de standaard interface biedt. In deze blogpost deel ik een simpele maar effectieve truc om je PRTG dashboard aan te passen aan jouw wensen, specifiek gericht op het filteren van meldingen.

Het Probleem

Een veel voorkomende situatie: je PRTG dashboard toont zowel 'Down' als 'Down (Acknowledged)' meldingen. Terwijl de acknowledged meldingen al onder controle zijn, leiden ze af van de acute problemen die nog aandacht nodig hebben. Hoe filter je deze acknowledged meldingen weg zonder de basis functionaliteit van PRTG aan te tasten?

De Oplossing: CSS Magie

De oplossing blijkt verrassend eenvoudig. Met slechts drie regels CSS kunnen we precies bereiken wat we willen. Hier is hoe:

1. Open je PRTG map settings
2. Zoek naar het "HTML Before" veld
3. Voeg deze code toe:

<style>
tr.sr.sa {
    display: none !important;
}
</style>

Dat is alles! Maar wat doet deze code precies?

Hoe Werkt Het?

Laten we de code ontleden:

• tr: selecteert tabel rijen
• .sr: staat voor "sensor row", selecteert alle sensor rijen
• .sa: staat voor "sensor acknowledged", selecteert acknowledged sensoren
• display: none: verbergt de geselecteerde elementen
• !important: zorgt dat onze regel prioriteit krijgt

Door deze CSS selector te gebruiken, vertellen we de browser: "Verberg alle tabel rijen die zowel een sensor row (.sr) als acknowledged (.sa) zijn."

Voordelen van Deze Aanpak

Deze oplossing heeft verschillende voordelen:

• Lichtgewicht: Geen JavaScript nodig, puur CSS
• Performant: Heeft minimale impact op de laadtijd
• Niet-invasief: Beïnvloedt alleen de weergave, niet de functionaliteit
• Persistent: Blijft werken na pagina verversing
• Reversible: Makkelijk terug te draaien indien nodig
• Files: Geen upload nodig dus ideaal voor PRTG hosted oplossingen

Tips voor Verdere Aanpassingen

Je kunt deze techniek uitbreiden voor andere aanpassingen:

• Filter andere status types door andere klassen te targeten
• Pas kleuren aan met background-color
• Highlight specifieke sensoren met border of box-shadow

Conclusie

Soms zijn de meest effectieve oplossingen verrassend eenvoudig. Met basis kennis van HTML/CSS kun je PRTG aanpassen aan jouw specifieke wensen zonder de core functionaliteit aan te tasten. Deze CSS-based aanpak voor het filteren van acknowledged meldingen is daar een perfect voorbeeld van.

Mocht je nog vragen hebben over dit onderwerp of over andere monitor gerelateerde zaken dan kun je uiteraard altijd contact met ons opnemen.