pixel
Seite wählen

Dynamische Formulare in Icinga Web 2

von | Jul 1, 2021 | Icinga

In meinem letzten internen Projekt der NETWAYS durfte ich ein Icinga Web 2 Module bauen, welches ein dynamisches Formular verwenden soll. Konkret sollte es mehrere Dropdown-Menüs geben, welche den Wert des vorherigen Dropdown-Menü evaluiert und anhand dessen, ein neues Dropdown befüllt. Dabei kann man zwei Herangehensweisen benutzen, welche ich im Folgenden erläutere.

Die klassische (schlechte) Herangehensweise

Die erste Möglichkeit, die mir in den Sinn kommt, ist, dass man sich über AJAX verschiedene Actions in Icinga Web 2 aufruft. Diese wiederum besitzen einen Code, der den Wert des zuvor ausgewählten Wertes evaluiert und das weitere Dropdown befüllt. Da Icinga Web 2 einem MVC (Modell, View, Controller) Muster folgt, wird ein Controller- für die Steuerung und ein View-Script für die Darstellung benötigt. Des Weiteren wird für den AJAX Request eine eigene module.js Datei benötigt, in der der JavaScript Code hinterlegt ist. Darüber hinaus müsste man noch CSS einbinden, damit das Formular auch noch schön dargestellt wird.

Alles im Allem, eine sehr sehr aufwendige Herangehensweise!

Die richtige Herangehensweise

Wie oben erwähnt, handelt es sich bei Icinga Web 2 um ein MVC, somit ist es auch möglich, bestimmte “ConfigForm-Views” zu erstellen, die bereits alle benötigten Sachen zur Verfügung stellen: CSS, JavaScript und HTML. Das beste daran ist, dass dies super einfach zu implementieren ist und das Framework die ganze Arbeit von der “schlechten Herangehensweise” übernimmt.
Man kann einer Configform die Klasse autosubmit mitgeben, dadurch erhält man ein Verhalten wie ein AJAX-Request. Im Folgenden ein kleiner Ausschnitt eines solchen ConfigControllers:

<?php
    namespace Icinga\Module\Testmodule\Forms\Test;
    use Icinga\Web\Form;
 
    class TestForm extends Form 
    {
      public function init()
      {
        $this->setName('form_test_form');
        $this->setSubmitLabel('Save Changes');
      }

      public function createElements(array $formData)
      {
          // Load cars
          $this->addElement(
              'select',
              'car',
              array(
                  'label' => $this->translate('Car'),
                  'multiOptions' => [
                      '' => '(select option)',
                      'audi' => 'Audi',
                      'vw' => 'VW'
                  ],
                  // 'autosubmit' acts like an AJAX-Request
                  'class' => 'autosubmit'
              )
          );

          // Select model
          if (isset($formData['car']) && $formData['car'] === 'audi') {
              $this->addElement(
                  'select',
                  'model',
                  array(
                      'label' => $this->translate('Model'),
                      'multiOptions' => [
                          '' => '(select model)',
                          'A1',
                          'A6'
                      ],
                      'required' => true,
                  )
              );
          } elseif (isset($formData['car']) && $formData['car'] === 'vw') {
              $this->addElement(
                  'select',
                  'model',
                  array(
                      'label' => $this->translate('Model'),
                      'multiOptions' => [
                          '' => '(select model)',
                          'Golf',
                          'Polo'
                      ],
                      'required' => true,
                  )
              );
          }
      }  
    }

Wenn man nun noch das View-Script einbindet erhält man eine Form, die wie folgt aussieht:



Durch das Framework von Icinga Web 2 ist es möglich, sehr schnell ein Modul nach eigenen Wünschen zu erstellen. Wem ich damit nun Lust auf ein bisschen Programmierung gemacht habe, dem kann ich die bereits vorhandenen Trainingsunterlagen auf Github empfehlen! Oder Ihr besucht eine unserer verschiedenen Konferenzen, bei der man auch mal detailliertere Einblicke wie z.B. Icinga Web 2 Modul Programmierung erhält.

Philipp Dorschner
Philipp Dorschner
Developer

Philipp hat im Jahr 2017 die Ausbildung zum Fachinformatiker – Systemintegration bei NETWAYS Professional Services begonnen. Während der Ausbildung bekam er ein immer größeres Interesse am Programmieren. Das führte dazu, dass Philipp nach erfolgreich bestandener Ausbildung die Kolleg:innen aus Professional Services nicht nur als Consultant sondern auch als Entwickler tatkräftig unterstützt. Neben seinem Interesse an der Informationstechnologie, macht er Sport im Freien oder liest bei schlechtem Wetter auch gerne mal ein Buch zu Hause.
Mehr Beiträge zum Thema Icinga

Icinga 2 mit InfluxDB 2

Die Überwachung von Infrastruktur und Software ist eine grundlegende Sache in der IT. Beim Monitoring spielt aber nicht nur der Status und die Benachrichtigung der zu überwachenden Objekte eine wesentliche Rolle, sondern auch die Aufbewahrung und die nachträgliche...

Icinga for Windows v1.6.0 – Einfacher. Zentraler. Sicherer.

Die Kollegen von Icinga haben letzte Woche Icinga for Windows in Version v1.6.0 veröffentlicht. Auch wenn diese Version keine neuen Plugins für die Überwachung bietet, hat sich im Bereich des Icinga PowerShell Frameworks einiges getan. Dadurch ist die Lösung nicht nur...

Meerkat (Dashboard für Icinga 2)

Was ist Meerkat? Wie kann man Meerkat installieren, und konfigurieren? Meerkat ist ein Dienstprogramm, geschrieben in go und javascript, und nicht nur zum Erstellen und Teilen von Dashboards für Icinga 2 geeignet, sondern auch leicht zu installieren und bedienen....

Icinga Installation mit Director in 10 Minuten

Herausforderung angenommen. Helfen wird mir der Icinga-Installer und das Director-Installations-Paket aus unserem Extras-Repository. Das hier folgende Beispiel werde ich auf einem RHEL8 durchführen, ist aber auch für Debian und Ubuntu zu adaptieren, da der Installer...