Bringing Bulk Editing to a new Level with Icinga DB

Bringing Bulk Editing to a new Level with Icinga DB

Those of you, who already tried out the new Icinga DB Web Module might have noticed a new button next to the search bar in list views.

With Icinga DB we are proud to introduce a powerful new feature for bulk editing multiple objects.

You might be already familiar with the present multiselect feature, which enables you to select multiple list objects by Ctrl(Cmd on Mac)- or Shift-clicking. It enabled you to do bulk actions on multiple objects. This was helpful, but reached its limits – usability and perfomance-wise – when you were intending to deal with a large number of objects.

Continue With Filter goes beyond that and brings bulk editing to a whole new level. Setting downtimes, comments or acknowledgements works now a lot more efficient, because you can apply them to a filtered set of objects.

Setting downtimes to a large number of objects

So, let’s say you want to set downtimes on functional services on a certain host.

1) Create a filter with the filter editor
2) Select all resulting objects by clicking “Continue with filter”
3) You can now execute actions on all of the objects

See it in action

 

For the realisation of this feature we made multiselect urls handle filter parameters. And because it is also more performant, we use it in different places all around the new web module:

* The new badges in the host and service groups view
* The new service widget in the host detail view

You can now reach a new bulk object detail view by passing the filter syntax via the url.

`/icingadb/hosts?([filter syntax])`

It can also be easily added among other parameters, e.g.

`/icingaweb2/icingadb/hosts?state.soft_state=0&([filter syntax])`

To learn more about the new UI Features of the Icinga DB Web module, you can have a look at this post.

Happy bulk editing!

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Das neue User Interface von Icinga DB

Während mit Icinga DB sehr viel unter der Haube passiert ist, kommt mit dem Release auch ein rundum neu geschriebenes Monitoring Modul für Icinga Web 2. In diesem Zuge erhielt auch das User Interface ein ausführliches Redesign. In diesem Blogpost werden die wichtigsten Änderungen erklärt.

Listen

Wie im bewährten Monitoring Modul gibt es im Monitoring Modul für Icinga DB viele Listenansichten. Daher wurden diese komplett überarbeitet. Allen Listenelementen liegt eine grundlegende einheitliche Anatomie zugrunde.

ListItem Anatomy.jpg

Anatomie eines Listenelements

Visual

Für jedes Listenelement wird ein so genanntes Visual verwendet. Dieses dient dazu, in langen Listen bestimmte Elemente hervorzuheben bzw. einen intuitiven Überblick geben, welchen Zustand das zugrunde liegende Objekt hat. Bei Host- bzw. Servicelisten wird dadurch beispielsweise der State dargestellt. So wird in der Übersicht unmittelbar ersichtlich, bei welchen Objekten Probleme vorliegen.

Title

Der Titel beschreibt ergänzend kurz zusammengefasst den Zustand des Listenelements. So enthält er beispielsweise die Info, dass ein Host gerade Down ist. Während das Visual einen intuitiven Eindruck gibt, erklärt der Titel, was genau passiert ist.

Meta

Der Metabereich ist für zusätzliche Informationen vorgesehen. In der Regel werden hier Zeitangaben des Listenelements angezeigt. In Host und Servicelisten steht hier, wie lange sich das Objekt bereits im entsprechenden Zustand befindet.

Caption

Der Caption-Bereich enthält detaillierte Informationen zum Listenelement. Dies kann im Falle von Hosts und Services der Plugin Output sein. Bei Kommentaren und Downtimes werden hier die Kommentartexte des Users angezeigt. Um die Listendarstellung kompakt und einheitlich zu halten, werden lange Texte auf eine oder mehrere Zeilen gekürzt.

Klickbare Elemente

Viele der Listenelemente enthalten neben dem Hauptelement zwei oder mehrere klickbare Elemente. Alle Teile des Listenelements, die auf weitere Detailinformationen verweisen sind eindeutig hervorgehoben. Dadurch ist sofort erkennbar, hinter welchen Textteilen sich Zusatzinformationen befinden.

Overdue Checks in Host- und Service Listen

In Host und Servicelisten werden Overdue Checks nun besonders auffällig hervorgehoben. Dadurch ist auf den ersten Blick sofort ersichtlich, welche Objekte möglicherweise nicht mehr aktuell sind.

Artboard Copy.jpg

Das neue Icinga DB Design: Hostliste und Detailbereich

Detailgrad der Listenansichten wählen

Der Detailgrad der Host- und Servicelisten ist nun wählbar. Die Standardansicht zeigt den Titel und einen zweizeiligen Plugin Output. In der detaillierten Ansicht wird der gesamt Plugin Output angezeigt. Will man einen größeren Überblick bekommen gibt es außerdem die Minimalansicht. Hier wird in einer Zeile der Plugin Output angeschnitten, wenn genügend Platz vorhanden ist. Dafür sieht man auf einem Bildschirm wesentlich mehr Listenelemente als in den anderen Darstellungen.

State Change Visual in History- und Notification Elementen

In History und Notification Listen sind unter anderem Statewechsel-Elemente zu finden. Hier wird im Visual der Wechsel nun auf den ersten Blick deutlich gemacht. Neben dem aktuellen State wird gleichzeitig auch der vorherige State ersichtlich.

State Changes sind in den Notificationlisten nun besser ersichtlich.

Detailansichten

Optimierte Headerbereiche

Die Headerbereiche der einzelnen Objekttypen erhalten ein neues Design. Während die herkömmlichen Headerbereiche sehr viel Platz brauchten, sind die Informationen kompakter.

Graphen

Die Detailansichten der Elemente waren bisher sehr textlastig. Nach dem Redesign sind die Detailbereiche deutlich visueller angelegt. Nun werden anstatt der bloßen Auflistung Informationen kombiniert und Zusammenhänge dargestellt.

Modaldialoge für schnelle Aktionen

Wollte man bisher aus dem Detailbereich einen Kommentar anlegen oder eine Downtime setzen wurde der Dialog in einer weiteren Spalte angezeigt, so dass die Inhalte der linken Spalte verloren gingen. Im neuen Monitoring Modul gibt es nun ein Modal-Element für kurze Interaktionsdialoge. Für Aktionen im Detailbereich erscheint nun ein Modaldialog. Dadurch bleibt die linke Listenspalte und somit der Kontext besser erhalten.

 

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.
Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Das Konzept der Aufmerksamkeitsökonomie versteht die menschliche Aufmerksamkeit als eine begrenzte Ressource. Je mehr Informationen auf den Wahrnehmenden »einprasseln«, desto mehr dieses knappen Gutes benötigt ein Mensch um diese zunächst zu sortieren und zu priorisieren, bevor sie verarbeitet werden können.

(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Wahrnehmungspsychologie im UI Design

Beim Gestalten von grafischen Benutzeroberflächen ist es oft hilfreich sich einiger Paradigmen aus der Wahrnehmungspsychologie zu bedienen bzw. diese im Hinterkopf zu haben.
Konkret gebe ich hier einen kurzen Überblick mit Beispielen über 5 Prinzipien aus der Gestalttheorie, die man sich beim UI Design zu nutze machen kann.
(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

MySQL-Datenbanken verwalten mit Sequel Pro

Eines meiner meist genutzten Apps am Mac ist Sequel Pro. Das kann man kennen, muss man aber nicht. Daher liest man – wenn man möchte – in den folgenden Zeilen eine kurze Vorstellung.
(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Was kann eigentlich CSS-Grid?

Die Entwicklung für CSS Layout ist nicht aufzuhalten. Nachdem das Flexible Box Layout (aka “Flexbox”) inzwischen salonfähig ist, steht bereits die nächste CSS-Spezifikation vor der Tür. Diese soll nicht nur einfache Layout-Eigenschaften einfacher und direkter möglich machen (Stichwort “vertikal zentrieren”), sondern auch bisher nicht mögliche Layouts direkt in CSS ermöglichen, ohne das Markup anpassen zu müssen.
(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Bilddateien verlustfrei kleiner machen

Wer oft größere Bilder im Web verwendet, kennt vielleicht das Problem. Gerade qualitativ hochwertige Bilder brauchen oft unverhältnismäßig viel Speicherplatz.
Das liegt nicht selten daran, dass unnötige Daten (für die Verwendung im Web) wie z.B. Metainformationen zur Kamera, Aufnahmeort, und so weiter eingebettet sind. Aber auch die Codierung des Bildes selbst ist oft nicht optimal. Leider ist es verhältnismäßig aufwendig, das Bild per Hand mit Photoshop selbst zu optimieren und vor allem: Man braucht dazu Photoshop.
Zum Glück ist auf die Open Source Community Verlass und es gibt ein freies Tool für den Mac, welches das zumindest halb automatisch erledigt. Darf ich vorstellen: ImageOptim.
(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Flexbox in der Praxis: ein paar einfach Beispiele

Inzwischen wird das Flexible Box Layout (kurz FlexBox) ja soweit von Browsern unterstützt, dass es in vielen Fällen auch ruhigen Gewissens für die Produktion verwendet werden kann.
Größtenteils vereint FlexBox viele Layout-Funktionen unter einem Featureset. In erster Linie macht es bestimmte Layout-Funktionen leichter und direkter zugänglich, ohne das Markup verändern zu müssen. Dadurch lassen sich nun relativ elegant und mit wenigen CSS-Angaben viele Layout-Probleme lösen, die man eigentlich schon lange für selbstverständlich hielt.
(mehr …)

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Kampf den nutzlosen Menu Bar Icons (macOS)

Tools auf dem Mac gibt es mittlerweile wie Sand am Meer. Große oder kleine praktische Apps, welche die Arbeit erleichtern oder Aufgaben automatisieren. Viele haben einige dieser Systemwerkzeuge wie z.B. Alfred installiert, weil es das Arbeiten angenehmer macht.
Leider nutzen viele dieser Werkzeuge die Möglichkeit, um sich in der Menüleiste von macOS zu verewigen. Bei einigen macht es durchaus Sinn – und natürlich hängt dies auch vom Geschmack des Nutzers ab. Allerdings bieten die meisten davon aus meiner Erfahrung keinen richtigen Mehrwert.
Bisher gibt es keine Out of the box Möglichkeit, diesen Exzess einzudämmen. Zwar kann man viele der System-Icons einfach ausblenden, aber viele 3rd-Party Icons sind sehr hartnäckig, wenn sie denn keine Option zum Deaktivieren des Icons implementiert haben.

Abhilft schafft … ein weiteres Tool

 

Vanilla Demo

Vorher – Nachher: Mit Vanilla lassen sich selten genutzte Menüleisten-Icons ein und ausblenden.


Vor kurzem habe ich ein kleines Helferlein namens Vanilla gefunden, welches den User unnötige oder nicht genutzte Icons ausblenden lässt (es gibt auch eine Pro-Version, mit der man die Icons komplett ausblenden kann). Das bringt wieder etwas Übersicht in die Menüleiste zurück.
 

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Mac sperren mit Automator Actions

In diesem Beitrag möchte ich einen kurzen Kniff am Mac zeigen, der es einfacher macht, den Rechner zu sperren. Es gibt dafür auch Tools wie Alfred, mit der etwas ähnliches problemlos zu konfigurieren ist. Wer die zusätzlichen Funktionen solcher Tools nicht benötigt oder einfach kein weiteres Tools installieren will, kann das auch mit Bordmitteln bewerkstelligen.
Grundlage des ganzen ist folgender bash-Befehl. Dieser logged den aktuell angemeldeten User aus dem System aus.

/System/Library/CoreServices/Menu\ Extras/User.menu/Contents/Resources/CGSession -suspend

Automator-App erstellen

So, was hat es nun mit dem Automator auf sich? Zunächst starten wir die App. Für diejenigen, denen die Anwendung noch nie aufgefallen ist: Sie befindet sich im Programme-Ordner.
Nun wählen wir Neues Dokument und wählen im nächsten Fenster Programm.
Bildschirmfoto 2016-07-28 um 11.15.53
Daraufhin werden einem die einzelnen Aktionen präsentiert, die Automator vom Betriebsystem bzw. anderen Applikationen zur Verfügung gestellt werden. In unserem Fall wählen wir aus der Liste die Aktion Shell-Skript ausführen und ziehen es in den rechten Bereich.
In das Textfeld Fügen wir nun einfach unser Shell Skript ein. Um zu testen, ob alles richtig läuft, können wir rechts oben auf den Button Ausführen klicken. Dadurch wird die Aktion ausgeführt.
Nun exportieren wir das Skript noch als App. Dazu wählen wir Ablage > Exportieren …, vergeben einen aussagekräftigen Namen und wählen einen Speicherort (in der Regel den Programme-Ordner).

Bildschirmfoto 2016-07-28 um 11.25.42

Einfach per ⌘ + Leertaste mit Spotlight nach dem Namen, unter dem die Aktion gespeichert wurde suchen


Nun kann das Programm einfach über den Finder aufgerufen werden. Schneller geht es natürlich mit der Spotlight-Suche.

Das Auge isst mit

Das Automator-Icon für die Anwendung ist zwar schön, leider nicht allzu aussagekräftig. Also wollen wir zuguterletzt der Sperren App auch noch ein Icon spendieren.
Mit einer kurzen Suche in der Suchmaschine der Wahl finden wir ein passendes Icons Symbol (macOS benötigt .icns Dateien, eine Bilddatei reicht leider nicht aus).
Wir suchen unser Programm im Finder und öffnen mit ⌘ + i das Infos Fenster. Um das Icons zuzuweisen ziehen wir die .icns Datei auf das Symbol.
2016-07-28 11_51_56
 

Florian Strohmaier
Florian Strohmaier
Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.