NETWAYS Blog

Icinga Web 2 – Das gefällt jedem

von Johannes Meyer | Sep 8, 2016 | Icinga, Development

Und wenn doch nicht, kann man es ganz einfach seinen eigenen Design-Vorstellungen entsprechend anpassen, denn darum geht es heute:

Theming

Wer es bis jetzt noch nicht entdeckt hat, darf nun erst einmal im Menü auf seinen Benutzernamen klicken und die Konto-Einstellungen öffnen. Dort versteckt sich seit v2.1.1 eine Möglichkeit das Theme, in dem Icinga Web 2 erstrahlt, zu ändern. (Sofern diese Möglichkeit nicht vom Administrator deaktiviert wurde.) Diese Themes werden teilweise von Icinga Web 2, teilweise von Modulen bereit gestellt können aber auch vom System-Administrator eingepflegt werden.
Von Haus aus stellt aktuell nur Icinga Web 2 zwei Themes bereit: High-Contrast und Winter.
Das High-Contrast Theme, wie der Name schon suggeriert, erhöht den Kontrast der Farben in Icinga Web 2. Es ist dafür gedacht die Barrierefreiheit zu erhöhen. Das Winter Theme hingegen ist einfach nur eine Spielerei für die kalten Winter-Tage.
Würde es aber heute nur um die einfache Nutzung der Themes gehen, wären wir nun schon wieder am Ende angelangt. Aber das wäre ja langweilig und für viele sicher auch nichts neues, nicht? Deshalb:

Eigene Themes erstellen

Erst einmal ein paar Grundsätze:

Globale Themes liegen hier: icingaweb2-installation/public/css/themes/
Modul Themes liegen hier: modul-installation/public/css/themes/
Der Name eines Themes wird direkt vom Dateinamen abgeleitet
Themes müssen die Datei-Endung „less“ haben
Geschrieben wird ein Theme mit CSS oder LESS

Auf CSS oder LESS gehen wir nun nicht näher ein, das wäre zu viel des Guten. Interessant allerdings dürfte sein, wie Stylesheets in Icinga Web 2 behandelt werden und was in den einzelnen bereits mitgelieferten Dateien enthalten ist.

Stylesheets in Icinga Web 2

Alle Stylesheets in den oben erwähnten Verzeichnissen, werden automatisch von Icinga Web 2 in eine einzelne Datei zusammengefasst und an den Browser ausgeliefert:

Mit Originaler (lesbarer) Formatierung: /icingaweb2/css/icinga.css
Keine Formatierung (Komprimiert): /icingaweb2/css/icinga.min.css

Da die Stylesheets von Icinga Web 2 immer zuerst kommen und danach die aller Module, können Themes (da sie als letztes kommen) alles andere beeinflussen.
Prinzipiell solltet ihr euch einfach einmal alle mitgelieferten Stylesheets ansehen: icingaweb2-installation/public/css/icinga/
Aber um den Überblick und die Orientierung etwas zu vereinfachen, ist hier eine grobe Zusammenfassung zu den wichtigsten Dateien:

base.less
Allgemeine Regeln und alle globalen Farb-Variablen
login.less
Regeln für den Login, inklusive welches Logo verwendet wird
layout.less
Regeln für das globale Layout (Header, Container, Footer)
menu.less
Regeln für das Haupt-Menü
forms.less
Regeln für alle Formulare
tabs.less
Regeln für die Tabs
controls.less
Speziellere Regeln für Form-Elemente bzw. „Widgets“

Jetzt könnt ihr bereits loslegen. Einfach eine neue Datei in einem der oben genannten Pfade anlegen (je nachdem ob es sich um ein Modul handelt, oder nicht) und fröhlich drauf los stylen. Treten Probleme auf oder ihr möchtet mit den Developer-Tools des Browsers die Regeln inspizieren, kann es hilfreich sein den „_dev“ URL-Parameter an die URL anzuhängen. (z.B. /icingaweb2/dashboard?_dev) Dies führt dazu, dass das Stylesheet nicht komprimiert ausgeliefert wird.
Das wars dann nun aber. Falls noch Fragen aufkommen, verweise ich auf das Forum. Frohes schaffen!

Johannes Meyer

Lead Developer

Johannes ist seit 2011 bei uns und inzwischen, seit er 2014 die Ausbildung abgeschlossen hat, als Lead Developer für Icinga Web 2, Icinga DB Web sowie alle möglichen anderen Module und Bibliotheken im Web Bereich zuständig. Arbeitet er gerade mal nicht, macht er es sich bei schlechtem Wetter am liebsten zum zocken oder Filme/Serien schauen auf dem Sofa gemütlich. Passt das Wetter, geht's auch mal auf eines seiner Zweiräder. Motorisiert oder nicht.

Lies mehr von Johannes und triff unser Team

Vagrant-Box mit Icinga2 mit Icingaweb2 aufsetzen

von Johannes Carraro | Jun 15, 2016 | IT Automation

Vagrant-Box mit Icinga2 mit Icingaweb2 aufsetzen

Als Entwickler und Systemadministrator kommt man öfters nicht um eine Testmöglichkeit herum.
Eine VM mit einem Hypervisor seiner Wahl aufzusetzen ist meistens sehr zeitaufwendig um kleinere Tests nachzustellen.
Eine einfache und schnelle Möglichkeit bietet hier sich eine Vagrant-Box vom Internet herunter zu laden oder sich ein Git-Repositoriy mit einem vorgefertigten Image zu clonen.
Wie man sich so eine Vagrant-Box per Git cloned werde ich hier beschreiben.

Vorraussetzung: Virtualbox-Pakete + GIT sollten installiert sein (Virtualbox wird hier als Provider benutzt):
~ # rpm -qa | grep virtualbox virtualbox-5.0.18-216.2.x86_64 virtualbox-guest-tools-5.0.18-216.2.x86_64 virtualbox-host-kmp-default-5.0.18_k4.1.12_1-216.2.x86_64 virtualbox-qt-5.0.18-216.2.x86_64 virtualbox-guest-kmp-default-5.0.18_k4.1.12_1-216.2.x86_64 git-2.6.6-7.1.x86_64
Info: Die Version kann von den verschiedenen Distributionen variieren.
Als nächsten müssen wir das Git-Repository lokal clonen
Dazu ins home – Verzeichnis in der Shell seiner Wahl wechseln
Ein Verzeichnis seiner Wahl anlegen:
mkdir git z.B
und in diesem Verzeichnis folgendes Kommando ausführen als user versteht sich:
~ # git clone https://github.com/Icinga/icinga-vagrant Klone nach 'icinga-vagrant' ... remote: Counting objects: 5172, done. remote: Total 5172 (delta 0), reused 0 (delta 0), pack-reused 5172 Empfange Objekte: 100% (5172/5172), 1.53 MiB | 569.00 KiB/s, Fertig. Löse Unterschiede auf: 100% (1929/1929), Fertig. Prüfe Konnektivität ... Fertig.
So das wars auch fast schon 🙂
Jetzt z.B in das Verzeichnis Icinga2x-cluster wechseln
~ # cd icinga-vagrant/icinga2x-cluster/
Anschließend nur noch die Vagrant-Box starten:
~ # vagrant up
Nun kann es eine Weile dauernd bis die Box gebaut wird, wenn keine Fehler aufgetreten sind kann man sich per ssh connecten.
~ # vagrant ssh [vagrant@icinga2 ~]$
Weitere vagrant Kommandos:
vagrant help -> Listet weitere Kommandos von vagrant auf vagrant halt -> fährt die Vagrant-Box herunter (shutdown) vagrant reload -> starten die Vagrant-Box neu (reboot)
Login-Information bekommt man direkt auf:
https://github.com/Icinga/icinga-vagrant/
Icingaweb2 nach erfolgreichen Login:

Viel Spaß beim testen, basteln und herumspielen 🙂
Es lohnt sich auch immer mal unser Schulungsangebot sich anzuschauen.

Johannes Carraro

Senior Systems Engineer

Bevor Johannes bei NETWAYS anheuerte war er knapp drei Jahre als Systemadministrator in Ansbach tätig. Seit Februar 2016 verstärkt er nun unser Team Operations als Senior Systems Engineer. In seiner Freizeit spielt Johannes E-Gitarre, bastelt an Linux Systemen zuhause herum und ertüchtigt sich beim Tischtennisspielen im Verein, bzw. Mountainbiken, Inlinern und nicht zuletzt Skifahren.

Lies mehr von Johannes und triff unser Team

NETWAYS Webinarkalender im Juli

von Christian Stein | Jun 22, 2015 | Linux, Hardware, Icinga, Webinare

Auch im Juli gibt es wieder zwei Webinare, in welchen wir einerseits den aktuellen Stand von Icinga Web 2 zeigen wollen und auf der anderen Seite unser SMS Alarmierungs Webinar, in welchem wir unsere SMS Hardware an Linux und Icinga 2 anbinden.
Hier noch einmal die nächsten Termine zusammengefasst:

Titel

Zeitraum	Registrierung
Icinga Web 2: Neuheiten im Webfrontend	08. Juli 2015 – 10:30 Uhr	Anmelden
Linux: Einrichten einer SMS-Alarmierung	23. Juli 2015 – 10:30 Uhr	Anmelden

Wer unsere bisherigen Webinare verpasst hat, kann sich diese in unserem Webinararchiv natürlich kostenfrei ansehen.

Christian Stein

Manager Sales

Christian kommt ursprünglich aus der Personalberatungsbranche, wo er aber schon immer auf den IT Bereich spezialisiert war. Bei NETWAYS arbeitet er als Manager Sales und berät unsere Kunden in der vertrieblichen Phase rund um das Thema Monitoring. Gemeinsam mit Georg hat er sich Mitte 2012 auch an unserem Hardware-Shop "vergangen".

Lies mehr von Christian und triff unser Team

Endspurt für Icinga Web 2

von Thomas Gelf | Mrz 28, 2014 | Icinga

Fleißig wird noch immer gehämmert und wir haben auch weiterhin gut zu tun. Eines lässt sich aber nur noch schwer verbergen, Icinga Web 2 wird richtig gut und ist mit Volldampf auf der Zielgeraden angelangt!

Icinga Web 2 – Dashboard

Home Sweet Home – Dashboard

Sofort nach dem Login landet man im Dashboard. Jeder kann sich gleich mehrere dieser Dashboards konfigurieren und darauf jeweils beliebig viele Komponenten einbinden. Jede Ansicht und jeder Filter kann hier angezogen werden. Aktuelle Zeitstempel laufen sanft im Sekundentakt weiter, das Aktualisieren der Inhalte verläuft angenehm ruhig. Es gibt es kein Zappeln und kein Flackern.

Icinga Web 2 – Statusfarben

Nur Probleme

Das Wichtigste auf so einem Monitoring-Dashboard: die Probleme, um die sich noch keiner kümmert. Wir stellen hier für Suche und Sortierung elegante und bequeme virtuelle Spaltenbezeichner bereit, die vieles einfacher machen. Abseits der vollständigen Übersichtslisten wird standardmäßig immer nach der Dringlichkeit des Problems sortiert. Unbehandelte neue Issues sind dabei kräftiger und farbig hinterlegt, Probleme um die sich schon wer kümmert zeigen den aktuellen Zustand mit einer sanfteren Farbe in einem schmalen Seitenstreifen an. Auf diese Weise kann man schon aus der Ferne zuverlässig erkennen, ob alles im Grünen Bereich ist oder ob Handlungsbedarf besteht.

Icinga Web 2 – PDF Export

Export und PDFs

Für die meisten Ansichten besteht die Möglichkeit, die dargestellten Daten ins CSV- und JSON-Format zu exportieren oder aber als PDF-Datei abzulegen. An derselben Stelle lässt sich auch so ziemlich jede Übersicht mit den aktuellen Filter- und Sortiereigenschaften mit wenigen Klicks in ein bestehendes oder wahlweise neu anzulegendes Dashboard übernehmen.

Willkommen in der Matrix

Unsere Matrix-Ansicht ist filterbar und lässt sich in großen Umgebungen zudem in jede Richtung frei durchblättern. Sollen alle Hosts und Services abgebildet werden? Oder lieber nur solche mit Problemen, vielleicht auch nur jene um die sich gerade keiner kümmert? Müssen ein paar spezielle Dienste ausgeblendet werden? Das alles geht, und noch viel mehr.

Icinga Web 2 – Gefilterte Service-Matrix

Geschichte schreiben

Mehrere Monate oder gleich ein ganzes Jahr voller Events auf einen Blick? Kein Problem! Die Umgebung von der dieser Screenshot stammt hat ein paar Millionen Events in der Datenbank. Die Darstellung zeigt daraus nur die kritischen, das waren hier etwa 160.000 in den letzten vier Monaten. Dabei zeigt die Farbintensität auf einen Blick, wo besonders viel oder besonders wenig los gewesen ist.
Im Cache oder zwischengespeichert? Nichts davon, die Daten stammen frisch und live aus der IDO-DB – handverlesen von Icinga Web. Ein Klick auf einen bestimmten Tag listet rechts von der Übersicht die zum jeweiligen Filter passenden einzelnen Ereignisse auf. Von dort können sie exportiert oder mit zusätzlichen Filtern weiter eingeschränkt werden.

Icinga Web 2 – Historische Übersicht

Kommando? Zu Befehl!

Icinga Web 2 – Kommandos absenden

Die klassischen Icinga-Commands sind auch weiterhin verfügbar. Allerdings stehen sie statt in einer langen Liste immer genau dort parat, wo sie gebraucht werden können. Den nächsten Check sofort ausführen lassen? Ein Klick.
Downtimes, Kommentare oder Acknowledgements? Sind schnell gesetzt und per Mausklick auch genauso bequem direkt an Ort und Stelle wieder entfernbar. Checks oder Notifications an- oder abschalten? Auch nur ein Klick. Unsicher ob der aktuelle Zustand dem in der Konfiguration entspricht? Wird angezeigt. Den falschen Kommentar gelöscht? Die Historie zum jeweiligen Objekt findet sich einen Klick weiter, dort sieht gleich was man verbrochen hat und kann es wieder geradebiegen.

Icinga Web 2 Login Screen

Performance

Schnell ist Icinga Web geworden, beeindruckend schnell. Das beginnt bereits mit der Anmeldemaske. Vom Browser werden bei leerem Cache ganze vier Requests abgefeuert, wobei in Summe knapp über 60 KB vom Server geladen werden. Das beeinhaltet den HTML-Code, das große Logo, alles was wir an JavaScript für die Applikation brauchen und sämtliche Stylesheets. Ja, ihr habt richtig gelesen: von diesem Punkt an gilt es keine einzige JS- oder CSS-Datei mehr zu laden. Keine.

Icinga Web 2 Performance – Chrome

Weil ich das so wunderschön finde, gleich nochmal. Selbe Aktion, anderer Browser:

Icinga Web 2 Performance – Firefox

Alles was nach Eingabe von Benutzername und Kennwort noch folgt sind schlanke HTML-Schnipsel und ein paar Icons. Vom Drücken der Eingabetaste bis zum vollständig geladenen Dashboard vergeht ein Bruchteil einer Sekunde. Selbst wenn alle Icons noch zu laden sind gehen dabei nur schlappe 20 KB über die Leitung.
Nicht nur mit der Bandbreite geht Icinga Web sparsam um, auch um den Speicherverbrauch des Browsers sorgen wir uns. Eine Anforderung, die bei sich ständig aktualisierenden Webanwendungen nicht zu unterschätzen ist. Wir wollen keine verlorenen Elemente im DOM und keine Memory-Leaks. Gegen Browserbugs sind auch wir nicht immun, aber wir tun unser Bestes, damit ihr euer Icinga Dashboard ruhigen Gewissens monatelang jeden Tag am Fernseher an der Wand genießen könnt. Und das natürlich ohne täglich den Browser neu starten zu müssen.

Blut geleckt?

Keine Sorge, es gibt noch mehr! Die Icinga CLI kennt ihr ja bereits. Einiges was noch nicht erwähnt wurde verraten ja bereits die Screenshots. Wer ganz mutig ist, kann sich gerne an unserem GIT-Master versuchen. Und irgendwas muss ich mir natürlich noch für meinen nächsten Blogpost aufbewahren. Jetzt muss ich schleunigst wieder zurück an die Arbeit. Ihr wollt doch, dass Icinga Web 2 bald fertig wird?

Thomas Gelf

Principal Consultant

Der gebürtige Südtiroler Tom arbeitet als Principal Consultant für Systems Management bei NETWAYS und ist in der Regel immer auf Achse: Entweder vor Ort bei Kunden, als Trainer in unseren Schulungen oder privat beim Skifahren in seiner Heimatstadt Bozen. Neben Icinga und Nagios beschäftigt sich Tom vor allem mit Puppet.

Lies mehr von Thomas und triff unser Team

Nächste Einträge »