10 Tricks für fortgeschrittenes Dashboarding in Splunk. Teil 2



    Guten Tag!

    Heute teilen wir weiterhin die Geheimnisse fortgeschrittener Dashboards in Splunk. In diesem Artikel werden einige Fälle der Verwendung von JavaScript untersucht, um Dashboards komfortabler, lesbarer und interaktiver zu machen. Lesen Sie die Details unter dem Schnitt.

    Im vorigen Artikel haben wir die ersten 5 Tricks herausgearbeitet und mit einfachen Beispielen untersucht, wie Sie die Dynamik im Dashboard ohne js anpassen, wie Sie verschiedene Vorlagen und Stile finden und hinzufügen. Heute setzen wir diese Geschichte fort.

    Bevor ich anfange, möchte ich anmerken, dass Sie zum Debuggen von Skripts und im Allgemeinen beim Erstellen komplexer Dashboards den Entwicklermodus einrichten sollten, indem Sie das Zwischenspeichern deaktivieren und einen einfachen Neustart einrichten. Wir haben auch im vorigen Artikel darüber geschrieben, wie das geht .

    6. Tipps in der Tabelle


    Was ist, wenn wir in bestimmten Bereichen lange Werte haben? Natürlich möchten wir sie gegebenenfalls lesen, aber es ist nicht notwendig, sie ständig zu sehen. Dazu tun wir Folgendes: Wir verkürzen die Nachricht und richten die Eingabeaufforderungen als ganze Nachricht ein, wenn Sie den Mauszeiger über den Cursor bewegen.





    Eine vorgefertigte Codevorlage für Tooltips finden Sie auf der Ressource Bootstrap , über die wir zuvor gesprochen haben .

    Um die Skripts im Dashboard anzuwenden, müssen Sie sie im Verzeichnis ... / Splunk / etc / apps / dashboard_tips / appserver / static ablegen.

    Anschließend müssen Sie die erforderlichen css- und js-Dateien im XML-Code des Dashboards angeben.



    <formstylesheet="tooltip.css"script="tooltip.js">

    Für diese Aufgabe benötigen Sie einen sehr einfachen CSS-Code, der die Parameter der Meldungsanzeige angibt.

    .tooltip-inner {
        max-width: 800px;
        text-align: left;
        font-size: 14px;
        font-weight: normal;
    }

    Und ein JS-Skript, in dem angegeben wird, dass, wenn die Größe der Nachricht mehr als 48 Zeichen beträgt, wir die Nachricht kürzen und einen Hinweis mit dem Text dieser Nachricht hinzufügen. Sie müssen auch angeben, auf welche Tabelle das Skript angewendet werden soll. Geben Sie dazu in dem Tag, das die Tabelle definiert, die ID an, auf die dann in der Funktion mvc.Components.get () verwiesen wird.

    <tableid="tblTooltip">

    require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, mvc, TableView) {
        var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                return cell.field === 'Message';
            },
            render: function($td, cell) {
                var message = cell.value;
                var tip = cell.value;
                if(message.length > 48) { message = message.substring(0,47) + "..." }
                $td.html(_.template('<a href="#" data-toggle="tooltip" data-container="body" data-placement="top" title="<%- tip%>"><%- message%></a>', {
                    tip: tip,
                    message: message
                }));
                // This line wires up the Bootstrap tooltip to the cell markup
                $td.children('[data-toggle="tooltip"]').tooltip();
            }
        });
        mvc.Components.get('tblTooltip').getVisualization(function(tableView) {
            // Register custom cell renderer
            tableView.table.addCellRenderer(new CustomTooltipRenderer());
            // Force the table to re-render
            tableView.table.render();
        });
    });

    7. Tabellenkonvertierung


    Nicht immer werden Tabellen, die automatisch vom Plan gebildet werden, in Dashboards angezeigt. Manchmal möchten Sie die Daten aus der Tabelle entnehmen und in einer völlig anderen Form darstellen.


    Im dargestellten Beispiel haben wir immer eine Zeile der Tabelle und eine ziemlich große Karte. Die offensichtlichste Konvertierungsoption besteht darin, die Tabelle zu transponieren. Natürlich können Sie den Befehl | transpose verwenden , aber jetzt geht es nicht darum, sondern wie Sie die Daten aus der Tabelle über JS konvertieren. Wenn Sie weiter mit CSS arbeiten, können Sie einige wirklich erstaunliche Dinge tun.

    Sehen



    wir uns an, wie man eine solche Tabelle erhält: Zuerst müssen wir der Abfrage, die uns interessiert, eine ID hinzufügen, auf die wir uns im JS-Skript beziehen.

    <searchid="map_search">

    Auch im XML-Dashboard-Code müssen Sie auf die JS-Datei verweisen, die sich im Verzeichnis ... / Splunk / etc / apps / Dashboard-Tipps / Anwendungsserver / Static befinden sollte

    <formscript="table2list.js">

    Und natürlich müssen Sie im Dashboard an dieses Skript binden. Erstellen Sie dazu in den HTML-Tags ein Div-Objekt mit der ID-Listenansicht, auf das auch im Skript verwiesen wird.

    <html><h3class="dashboard-element-title">IP Address Details (table pivot)</h3><divid="list-view"/></html>

    Der Text des Skripts, mit dem wir die Daten konvertieren:

    require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/dataview',
        'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, mvc, DataView) {
    	var templateString = "\
    <%\
    for(var i=0, l=results.length; i<l; i++) { \
    	var line=results[i]; %> \
    	<table id='list-view-template' class='table table-bordered'><tbody> \
    	\
    	<% for(var key in line) {\
    		var attrName = key;\
    		var attrValue = line[key];\
    		%> \
    		<tr>\
    			<td width='100px' style='text-align: right'><%= attrName %>:</td>\
    			<td><%= attrValue %></td>\
    		</tr>\
    	<% } %> \
        \
    	</tbody></table> \
    <% }%> \
    ";
    	var dtview = newDataView({
    		id: "dtview",
    		managerid: "map_search",
    		template: templateString,
    		el: $("#list-view")
    	}).render();
    });

    !!! Wenn Sie Änderungen an den Dashboards vornehmen, wird die Tabelle in regelmäßigen Abständen ausgeblendet. Sie müssen die Seite aktualisieren, um sie anzuzeigen.

    8. Interaktives Inhaltsänderungs-Dashboard


    In diesem Abschnitt wird erläutert, wie Änderungen an Dashboards vorgenommen werden, bei denen keine Token verwendet werden, sondern Code verwendet wird. Das wirft die Frage auf - warum? Mit Hilfe des Codes ist es möglich, ihn flexibler und optisch interessanter zu gestalten, und dies erfordert keinen großen und komplexen Code, alles ist äußerst einfach.

    In unserem Beispiel möchten wir die Darstellung der Tabelle anpassen, indem Sie auf das Symbol klicken.





    Beachten Sie, dass in dem in den Bildern gezeigten Dashboard bereits einige Skripts verwendet werden, die wir oben durchgesehen haben.

    Es ist nicht erforderlich, dies alles in einem CSS- oder JS-Code zu speichern. Sie können es getrennt lassen und alle durch Kommas getrennt angeben.

    <formscript="table2list.js, toggle.js, tooltip.js"stylesheet="toggle.css, tooltip.css">

    Wenn wir das Symbol, das Bild usw. verwenden, sollten sie auch im Verzeichnis ... / Splunk / etc / apps / dashboard_tips / appserver / static gespeichert werden.

    Um diese Tabelle zu konfigurieren, benötigen wir:

    HTML im Dashboard-Code:

    <html><divstyle="float: right">
    		      Show/hide the table below  <imgid="imgToggle1"class="toggle"title="Show/hide table below"src="/static/app/dashboard_tips/expand.png"/></div></html>

    CSS - toggle.css

    #tooltip_row {
        /*visibility: hidden;*/height: 0px;
        overflow: hidden;
    }

    JS - toggle.js

    require.config({
        paths: {
            "app": "../app"
        }
    });
    require(['splunkjs/mvc/simplexml/ready!'], function(){
        require(['splunkjs/ready!'], function(){
    		functiontoggle(button, target) {
    			if(target.css("height") == "0px" ) {
    				button.attr("src", "/static/app/dashboard_tips/collapse.png");
    				target.css({
    					"height": "auto"
    				});
    			}
    			else
    			{
    				button.attr("src", "/static/app/dashboard_tips/expand.png");
    				target.css({
    					"height": "0px"
    				});
    			}
    		}
    		// Setup the click handlers for the toggle buttons
    		$("#imgToggle1").click(function(){
    			toggle($(this), $("#tooltip_row"));
    		});
        });
    });

    Dann fügen wir dem Dashboard-Code vor dem Panel tooltip_row mit der Tabelle hinzu, die wir benötigen.

    <rowid="tooltip_row"><panel>
         таблица
        </panel></row>

    8. Masken bei Eingaben




    Mit JavaScript können Sie den Eingaben im Dashboard auf einfache Weise Einschränkungen oder benutzerdefinierte Regeln auferlegen. Um beispielsweise nur eine ganze Zahl oder ein Datum einzugeben, wurde diese aus dem Kalender usw. ausgewählt.

    Stellen Sie dazu für jeden gewünschten Eingang die ID ein, auf die in JS verwiesen wird.

    <inputtype="text"token="numbers"id="numbers_only"searchWhenChanged="true"><label>Numbers only</label><default>1</default></input><inputtype="text"token="numbers_0_100"id="numbers_0_100_step10"searchWhenChanged="true"><label>Numbers 0-100 step=10</label><default>0</default></input><inputtype="text"token="date"id="date"searchWhenChanged="true"><label>Date</label></input><inputtype="text"token="date_restrictions"id="date_restrictions"searchWhenChanged="true"><label>Date after 2018-08-01</label></input><inputtype="text"token="range"id="range"searchWhenChanged="true"><label>Range (0-10)</label><default>5</default></input>

    Fügen Sie Eingaberegeln für die Eingabe in JS hinzu

    require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
    	$("[id^=numbers_only]")
    		.find("input")
    		.attr('type','number')
    	$("[id^=numbers_0_100_step10]")
    		.find("input")
    		.attr('type','number')
    		.attr('min','0')
    		.attr('max','100')
    		.attr('step','10')
    	$("[id^=date]")
    		.find("input")
    		.attr('type','date')
    	$("[id^=date_restrictions]")
    		.find("input")
    		.attr('type','date')
    		.attr('min','2018-08-02')
    	$("[id^=range]")
    		.find("input")
    		.attr('type','range')
    		.attr('min','0')
    		.attr('max','10')
    });

    10. Popup-Fenster mit Diagramm




    In diesem Abschnitt analysieren wir, wie Sie ein solches Popup-Fenster mit einem Diagramm erhalten, in dem die Anzahl der Ereignisse für einen bestimmten Quelle-Typ angezeigt wird, abhängig davon, auf welches Symbol im Feld Detail der Benutzer geklickt hat.

    Dazu müssen Sie zunächst eine Abfrage erstellen, auf der das Diagramm basiert:

    <searchid="chart_search"><query>
          index=_internal sourcetype=$chart_sourcetype$ | timechart count
        </query><earliest>rt-5m</earliest><latest>rtnow</latest></search>

    Die Anforderung hängt von dem Token $ chart_sourcetype $ ab. Sie müssen diesem Token eine Zuweisung des Werts hinzufügen und den Drilldown so konfigurieren, dass die Werte in der Tabelle anklickbar sind. Dies erfolgt in den "Optionen" für die gewünschte Tabelle.

    <optionname="drilldown">cell</option><drilldown><settoken="chart_sourcetype">$row.sourcetype$</set></drilldown>

    Dann passen wir mit JS die Symbole im Feld Detail und in der Diagrammansicht an:

    require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
    	'splunkjs/mvc/tableview',
    	'splunkjs/mvc/chartview',
        'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, mvc, TableView, ChartView) {
    	var CustomIconRenderer = TableView.BaseCellRenderer.extend({
    		canRender: function(cell) {
    			return cell.field === 'Detail';
    		},
    		render: function($td, cell) {
    			$td.html(('<i class="icon-chart-area" style="font-size:2em" />'));
    		}
    	});
    	mvc.Components.get('tblTooltip').getVisualization(function(tableView) {
            // Register custom cell renderer
            tableView.table.addCellRenderer(new CustomIconRenderer());
            // Force the table to re-render
            tableView.table.render();
    	});
    	// Listen for token changesvar tokens = mvc.Components.get("default");
    	tokens.on("change:chart_sourcetype", function(model, value, options) {
    		$('#modalChart').modal();
    		var areaChart = new ChartView({
    			id: "chart-view",
    			managerid: "chart_search",
    			type: "area",
    			"charting.chart.nullValueMode": "connect",
    			el: $("#chartDetail")
    		}).render();
    	});
    });

    Und wir haben, genau wie im vorherigen Artikel, ein Popup-Fenster eingerichtet. Statt des Textes fügen wir einen Block mit der von JS referenzierten Kennung hinzu.

    <divid="chartDetail"/>

    <panel><html><!-- Modal Chart --><divclass="modal fade"id="modalChart"tabindex="-1"role="dialog"aria-labelledby="modalChartLabel"aria-hidden="true"><divclass="modal-dialog modal-lg"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="modalChartLabel">Details: $chart_sourcetype$</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true"/></button></div><divclass="modal-body"><divid="chartDetail"/></div><divclass="modal-footer"><buttontype="button"class="btn btn-primary"data-dismiss="modal">Close</button></div></div></div></div></html></panel>

    Daher haben wir in zwei Artikeln 10 interessante Fallstudien zum Arbeiten mit Dashboards abgebaut, die über die grundlegenden Fähigkeiten der Benutzer hinausgehen. Aber all diese Geschichten sind im Allgemeinen nicht so schwer zu wiederholen und versuchen, sie selbst zu verwirklichen.

    Um dies alles näher und visueller zu sehen, können Sie die Anwendung auf GitHub herunterladen. Dort können Sie alle Skripts und Codes finden, auf Dashboards klicken und sehen, wie alles funktioniert.

    Sie können das Video auch vom Konferenz-Splunk .conf18 aus ansehen.



    Wenn Sie Splunk noch nicht ausprobiert haben, ist es an der Zeit, die kostenlose Version mit bis zu 500 MB pro Tag für alle verfügbar zu machen. Und wenn Sie Fragen oder Probleme mit Splunk haben, können Sie uns diese fragen , und wir helfen Ihnen weiter.

    Wir sind der offizielle Premier Splunk Partner .


    Jetzt auch beliebt: