Schlagwort-Archive: Bootstrap

Navigationsmenü für Pentaho-Dashboards

(English)

Wenn man in einem Pentaho-System eine gewisse Anzahl von Dashboards und Berichten implementiert hat, ergibt sich unweigerlich die Frage nach der Navigation zwischen ihnen. Der eleganteste Weg ist ein zentrales Menüsystem, das leicht in alle Dashboards eingebunden werden kann und an einer Stelle verwaltet wird.

Navigation menu

Das Bootstrap-Framework, das heutzutage in Pentaho Community Dashboards verwendet wird, bietet ein sogenanntes Navbar-Objekt, das für diese Zwecke sehr gut geeignet ist.

Navigation menu opened

Für die beste Wartbarkeit erstellt man am besten eine eigene JavaScript-Datei, in der das Menü definiert wird. Diese Datei wird dann in allen Dashboards, die das Menü enthalten sollen, eingebunden.

Die Menüzeile besteht aus einem Titel (im Beispiel „Analytic Backend“), der mit einem Link hinterlegt sein kann, und den einzelnen Menüs. Die Menüs enthalten die Menüpunkte (ebenfalls verlinkt) und Trennlinien.

Mit ein paar simplen JavaScript-Funktionen können alle benötigten Objekte als HTML-Code zusammengesetzt werden. Das fertige Navbar-Objekt wird dann in die Seite eingefügt.

Zuerst definieren wir die notwendigen Funktionen:

/*
    Navigation menu for Pentaho Community Dashboards
*/

//Creates a menu item with a link
function menuLink(url, caption) {
    return('<li><a href="' + url + '">' + caption + '</a></li>');
}

//Creates a separator item
function menuSeparator() {
    return('<li role="separator" class="divider"></li>');
}	

//Creates a drop-down menu with a title.
//If right = true, the menu will be right-aligned (this should be the last menu)
function menu(title, content, right) {

    if (right === undefined) {
        right = false;
    }

    if (right) {
        rightClass = " navbar-right";
    } else {
        rightClass = "";
    }

    menuInit = '<ul class="nav navbar-nav' + rightClass + '"><li class="dropdown">' +
	   '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button aria-haspopup="true" '+ 'aria-expanded="false">' + title + ' <span class="caret"></span></a>' +
	   '<ul class="dropdown-menu">';
    menuEnd = '</ul></li></ul>';
	
    return(menuInit + content + menuEnd);
}

//Creates the entire navigation bar
function menuNavbar(url, title, content) {
    navbar = '<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header">' +
        '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">' +
            '<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span></button>' +
        '<a class="navbar-brand" href="' + url + '">' + title + '</a></div>' +
        '<div class="collapse navbar-collapse" id="mainMenu">' +
        content +
        '</div></div></nav>';

    return(navbar);
}

Dann kommt der variable Teil, die Definition der Menüs und der Menüpunkte:

/*
    Customization starts here.
    
    1. Menus
*/

customersMenu = menu("Customers",
    menuLink("/pentaho/api/repos/%3Apublic%3ACustomer%20classes.wcdf/generatedContent", "Customer attributes") +
    menuLink("/pentaho/api/repos/%3Apublic%3ACustomer%20groups.wcdf/generatedContent", "Customer groups") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3ATop%20customers.wcdf/generatedContent", "Top customers") +
    menuLink("/pentaho/api/repos/%3Apublic%3ARegistration%20metrics.wcdf/generatedContent", "Registration metrics") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3AInactive%20customers.wcdf/generatedContent", "Inactive customers") +
    ""
);

vehiclesMenu = menu("Vehicles",
    menuLink("/pentaho/api/repos/%3Apublic%3AVehicle%20positions.wcdf/generatedContent", "Vehicle positions") +
    menuLink("/pentaho/api/repos/%3Apublic%3AVehicle%20management.wcdf/generatedContent", "Vehicle management") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3ADamage%20management.wcdf/generatedContent", "Damage management") +
    menuLink("/pentaho/api/repos/%3Apublic%3AActive%20rides.wcdf/generatedContent", "Active rides") +
    ""
);

// More menus

// Right-aligned menu
technicalMenu = menu("Technical",
    menuLink("https://sco2t.com/", "Sco2t main page") +
    menuLink("https://datascientist.at", "datascientist.at") +
    menuLink("https://rapidminer.com", "RapidMiner") +
    "",
    true
);

Die einzelnen menuLink-Zeilen enthalten die Ziel-URL (ein Dashboard, ein Report, oder auch eine beliebige URL außerhalb des Systems) und den Menü-Text.

Am Ende wird das Menü selbst angelegt.

//Concatenate menus in the desired order. If one is to be right-aligned, it must be the last one.
menuContent = customersMenu + vehiclesMenu + 
              usageFinancialsMenu + appsMenu + technicalMenu
;

//Create the navigation bar with a link, the main title and the whole menu content
navbar = menuNavbar("/pentaho/api/repos/%3Apublic%3AStart%20page.wcdf/generatedContent", "Analytic Backend", menuContent);

//When the document is ready, use JQuery to inject the navigation bar into the page content
$( document ).ready(function() {
    $(".container").before(navbar);
});

Damit haben wir die gewünschte Lösung: ein platzsparendes, zentral gewartetes Menü, das mit minimalem Aufwand in neue und bestehende Dashboards eingebaut werden kann: In der Layout-Ansicht „Add Resource“, type „JavaScript“, „External file“; dann wird die JavaScript-Datei im Dateibrowser ausgewählt oder einfach als Text eingefügt.

Add navigation menu

Navigation Menu for Pentaho Dashboards

When a Pentaho system reaches a certain number of dashboards and reports, the question of navigation between them becomes important. A central menu system an elegant way to solve this problem. It should be easy to include in dashboards and maintained in one place.

Navigation menu

The Bootstrap framework used in Pentaho Community Dashboards, contains a Navbar object that is very suitable for this purpose.

Navigation menu opened

For easy maintenance, a separate JavaScript file is created to define the menu. This file has to be included in all dashboards that need to contain the menu.

The navigation bar contains a title („Analytic Backend“ in the example) that can be linked to a URL, and the menus. The menus contain menu items (also with URLs) and separator lines.

A few simple JavaScript functions build the necessary HTML. The complete Navbar object is then inserted into the page.

First, a few functions:

/*
    Navigation menu for Pentaho Community Dashboards
*/

//Creates a menu item with a link
function menuLink(url, caption) {
    return('<li><a href="' + url + '">' + caption + '</a></li>');
}

//Creates a separator item
function menuSeparator() {
    return('<li role="separator" class="divider"></li>');
}	

//Creates a drop-down menu with a title.
//If right = true, the menu will be right-aligned (this should be the last menu)
function menu(title, content, right) {

    if (right === undefined) {
        right = false;
    }

    if (right) {
        rightClass = " navbar-right";
    } else {
        rightClass = "";
    }

    menuInit = '<ul class="nav navbar-nav' + rightClass + '"><li class="dropdown">' +
	   '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button aria-haspopup="true" '+ 'aria-expanded="false">' + title + ' <span class="caret"></span></a>' +
	   '<ul class="dropdown-menu">';
    menuEnd = '</ul></li></ul>';
	
    return(menuInit + content + menuEnd);
}

//Creates the entire navigation bar
function menuNavbar(url, title, content) {
    navbar = '<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header">' +
        '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">' +
            '<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span></button>' +
        '<a class="navbar-brand" href="' + url + '">' + title + '</a></div>' +
        '<div class="collapse navbar-collapse" id="mainMenu">' +
        content +
        '</div></div></nav>';

    return(navbar);
}

Then the variable part where the menus and menu items get defined:

/*
    Customization starts here.
    
    1. Menus
*/

customersMenu = menu("Customers",
    menuLink("/pentaho/api/repos/%3Apublic%3ACustomer%20classes.wcdf/generatedContent", "Customer attributes") +
    menuLink("/pentaho/api/repos/%3Apublic%3ACustomer%20groups.wcdf/generatedContent", "Customer groups") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3ATop%20customers.wcdf/generatedContent", "Top customers") +
    menuLink("/pentaho/api/repos/%3Apublic%3ARegistration%20metrics.wcdf/generatedContent", "Registration metrics") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3AInactive%20customers.wcdf/generatedContent", "Inactive customers") +
    ""
);

vehiclesMenu = menu("Vehicles",
    menuLink("/pentaho/api/repos/%3Apublic%3AVehicle%20positions.wcdf/generatedContent", "Vehicle positions") +
    menuLink("/pentaho/api/repos/%3Apublic%3AVehicle%20management.wcdf/generatedContent", "Vehicle management") +
    menuSeparator() +
    menuLink("/pentaho/api/repos/%3Apublic%3ADamage%20management.wcdf/generatedContent", "Damage management") +
    menuLink("/pentaho/api/repos/%3Apublic%3AActive%20rides.wcdf/generatedContent", "Active rides") +
    ""
);

// More menus

// Right-aligned menu
technicalMenu = menu("Technical",
    menuLink("https://sco2t.com/", "Sco2t main page") +
    menuLink("https://datascientist.at", "datascientist.at") +
    menuLink("https://rapidminer.com", "RapidMiner") +
    "",
    true
);

All menuLink lines contain a target address (a dashboard or report in the Pentaho system or an external URL) and the menu text.

After the menus, the navigation bar itself is created.

//Concatenate menus in the desired order. If one is to be right-aligned, it must be the last one.
menuContent = customersMenu + vehiclesMenu + 
              usageFinancialsMenu + appsMenu + technicalMenu
;

//Create the navigation bar with a link, the main title and the whole menu content
navbar = menuNavbar("/pentaho/api/repos/%3Apublic%3AStart%20page.wcdf/generatedContent", "Analytic Backend", menuContent);

//When the document is ready, use JQuery to inject the navigation bar into the page content
$( document ).ready(function() {
    $(".container").before(navbar);
});

This gives us the desired solution: a centrally maintained menu that can be easily built into dashboards.

In the Layout view click „Add Resource“ with the type JavaScript and External file. Select the file in the file browser or enter the file path.

Add navigation menu

Pentaho: Data integration in Dashboard ausgeben

Vor kurzem wurde ich gefragt, wie aufwändig es ist, das Ergebnis eines ETL-Jobs (also aus Pentaho Data Integration) im BA Server auf einem Dashboard auszugeben. Es ist gar nicht kompliziert und geht sehr schnell.

Als erstes erstellen wir eine Transformation und merken uns den Namen des Schrittes, dessen Ergebnis im BA Server ausgegeben werden soll. In diesem Beispiel lese ich den RSS-Feed von pentaho.com aus und selektiere daraus die Spalten Titel, Text und Datum.

Beispiel-Transformation
Beispiel-Transformation

Diese Transformation muß dann auf den Server geladen werden. Wenn man in Kettle ohne Repository oder mit einem Datei-Repository arbeitet, ist die Datei schon vorhanden; aus einem Datenbank-Repository müßte man sie exportieren (File/Export/To XML).

Die .ktr-Datei wird dann im BA Server unter Browse Files ins gewünschte Verzeichnis raufgeladen (Upload…).

Danach geht’s ans Erstellen des Dashboards. Im Hauptmenü Create New, dann CDE Dashboard. (Wenn dieser Menüpunkt nicht erscheint, muß man im Marketplace „Community Dashboard Editor“ installieren und den Server neu starten.)

Der erste Weg führt zu den Einstellungen des Dashboards:

Dashboard-Einstellungsdialog
Dashboard-Einstellungen

Interessant hier ist die Auswahl des Dashboard-Typs: blueprint oder bootstrap. Blueprint ist (noch?) Standard, aber viele neue Dashboards entstehen mit dem moderneren Bootstrap-Framework. Hier arbeiten wir mit dem Standard, blueprint.

In diesem Beispiel brauchen wir keine komplexe Dashboard-Struktur (die auch möglich wäre). Deswegen fügen wir nur eine Zeile und innerhalb der Zeile eine Spalte ein. Wir geben der Zeile einen Namen (RSSTableHTML) und stellen Span size auf 24, weil bei Blueprint die ganze Breite auf 24 Spalten aufgeteilt ist.

Dashboard-Struktur mit Spalteneinstellungen
Dashboard-Struktur

Als nächstes kommt die Datenquelle. Dazu wählen wir unter Datenquellen  aus den „KETTLE Queries“ den Eintrag „kettle over kettleTransFromFile“ und stellen die Eigenschaften ein.

Name: RSSFeedResult
Kettle Transformation File: (die hochgeladene Datei wählen)
Kettle Step name: Der Schritt, dessen Ergebnis ausgegeben werden soll

Wir können Cache=True belassen, um das Ergebnis für eine Stunde (3600 Sekunden) zu cachen.

Eigenschaften der Kettle-Datenquelle
Eigenschaften der Kettle-Datenquelle

Jetzt bleibt nur mehr die Tabelle. Unter Komponenten wählen wir Others und Table Component. Wir benennen die Komponente (RSSTable), wählen die Datenquelle (RSSFeedResult) und das HTML-Objekt, in dem die Tabelle angezeigt wird (RSSTableHTML). Fertig!

Eigenschaften der Tabellenkomponente
Tabellenkomponente

Wer mit dem Aussehen der Tabelle nicht zufrieden ist, kann unter Advanced Properties noch einiges umstellen und z. B. Style auf Classic umstellen.

Das Ergebnis der Bemühungen ist eine schöne Tabelle mit den Inhalten des RSS-Feeds.

Dashboard-Vorschau
Dashboard-Vorschau

Natürlich können die Kettle-Transformationen und die Dashboards beliebig komplex werden. Es ist nur zu beachten, daß der Datenerfassungsprozess nicht zu lang dauert, sonst warten die Benutzer des Dashboards zu lange.