こんにちは
今日、Splunkで高度なダッシュボードの秘密を共有し続けています。 この記事では、ダッシュボードをより便利で読みやすく、インタラクティブにするために、JavaScriptを使用するいくつかのケースを調べます。 カットの下の詳細をお読みください。
前の記事では、最初の5つのトリックを見て、jsを使用せずにダッシュボードでダイナミクスを構成する方法、さまざまなテンプレートとスタイルを見つけて追加する方法の簡単な例を見てきました。 今日もこの話を続けます。
開始する前に、スクリプトをデバッグするため、および一般的に複雑なダッシュボードを作成するプロセスでは、キャッシュをオフにして簡単な再起動を設定することにより、開発者モードを構成する必要があることに注意してください。 また、以前の記事でこれを行う方法についても書きました 。
6.テーブル内のツールチップ
特定のフィールドに長い値がある場合はどうなりますか？ もちろん、必要に応じてそれらを読みたいと思いますが、それらを常に見る必要はありません。 これを行うために、次のことを行います。メッセージの上にカーソルを置くと、メッセージを短くし、メッセージ全体の形でヒントを構成します。
ツールチップ用の既成のコードテンプレートは、 前に説明したBootstrapリソースにあります。
ダッシュボードにスクリプトを適用するには、ディレクトリにスクリプトを配置する必要があります... / Splunk / etc / apps / dashboard_tips / appserver / static
そして、ダッシュボードXMLコードで必要なcssおよびjsファイルを指定します。
<form stylesheet="tooltip.css" script="tooltip.js">
このタスクには、メッセージを表示するためのパラメーターを示す非常にシンプルなCSSコードが必要です。
.tooltip-inner { max-width: 800px; text-align: left; font-size: 14px; font-weight: normal; }
また、メッセージサイズが48文字を超える場合、メッセージを短くし、このメッセージのテキストにヒントを追加することを示すJSスクリプト。 また、スクリプトを適用するテーブルを指定する必要もあります。 これを行うには、テーブルを定義するタグでIDを指定します。このIDは、mvc.Components.get（）関数で参照されます。
<table id="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.テーブルを変換する
splankによって自動的に生成されるテーブルは、必ずしもダッシュボードで適切に表示されるとは限りません。 テーブルからデータを取得して、まったく異なる方法でデータを表示したい場合があります。
提示された例では、常にテーブルの1行と十分に大きなマップがあります。 最も明白な変換オプションは、テーブルを転置することです。 もちろん、 | transposeコマンドを使用できますが、今ではそれについてではなく、JSを介してテーブルからデータを変換する方法についてです。 さらにCSSを使用すると、本当に素晴らしいことができます。
このようなテーブルを取得する方法を見てみましょう。
まず、関心のあるクエリにIDを追加する必要があります。これは、JSスクリプトで参照します。
<search id="map_search">
また、ダッシュボードのXMLコードで、.jsファイルを参照する必要があります。このファイルは、ディレクトリ内にある必要があります... / Splunk / etc / apps / dashboard_tips / appserver / static
<form script="table2list.js">
そしてもちろん、ダッシュボードでこのスクリプトにバインドする必要があります。 これを行うには、htmlタグ内で、IDリストビューを持つdivオブジェクトを作成します。これはスクリプトでも参照します。
<html> <h3 class="dashboard-element-title">IP Address Details (table pivot)</h3> <div id="list-view"/> </html>
データを変換するスクリプトのテキスト：
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 = new DataView({ id: "dtview", managerid: "map_search", template: templateString, el: $("#list-view") }).render(); });
!!! ダッシュボードに変更を加えると、テーブルは定期的に表示されなくなり、ページを更新して戻す必要があります。
8.ダッシュボードのコンテンツをインタラクティブに変更する
このセクションでは、トークンではなくコードを使用してダッシュボードを変更する方法について説明します。 質問が始まる-なぜ？ コードの助けを借りて、これをより柔軟かつ視覚的にもっと面白く配置することが可能であり、これは大きく複雑なコードを必要とせず、すべてが非常に簡単です。
この例では、アイコンをクリックしてテーブルの外観を構成します。
写真に示されているダッシュボードは、すでに多くのスクリプトを使用していることに注意してください。
これらすべてを1つのCSSまたはJSコードに保存する必要はありません。個別に残して、すべてをコンマで区切って指定できます。
<form script="table2list.js, toggle.js, tooltip.js" stylesheet="toggle.css, tooltip.css">
アイコン、画像などを使用する場合は、ディレクトリにも保存する必要があります... / Splunk / etc / apps / dashboard_tips / appserver / static
ここに表示されるこのようなテーブルを管理するには、次のものが必要です。
ダッシュボードコードのHTML：
<html> <div style="float: right"> Show/hide the table below <img id="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(){ function toggle(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")); }); }); });
次に、必要なテーブルを含むパネルの前にあるダッシュボードコードにtooltip_rowを追加します。
<row id="tooltip_row"> <panel> </panel> </row>
8.入力のマスク
JavaScriptを使用すると、入力ダッシュボードに簡単に制限またはカスタムルールを適用できます。 たとえば、整数のみを入力したり、カレンダーから日付を選択するなど。
これを行うには、目的の各入力に対して、JSで参照するIDを設定します。
<input type="text" token="numbers" id="numbers_only" searchWhenChanged="true"> <label>Numbers only</label> <default>1</default> </input> <input type="text" token="numbers_0_100" id="numbers_0_100_step10" searchWhenChanged="true"> <label>Numbers 0-100 step=10</label> <default>0</default> </input> <input type="text" token="date" id="date" searchWhenChanged="true"> <label>Date</label> </input> <input type="text" token="date_restrictions" id="date_restrictions" searchWhenChanged="true"> <label>Date after 2018-08-01</label> </input> <input type="text" token="range" id="range" searchWhenChanged="true"> <label>Range (0-10)</label> <default>5</default> </input>
そして、JSでの入力のための入力ルールを追加します
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.チャート付きポップアップ
このセクションでは、ユーザーが「詳細」フィールドのどのアイコンをクリックしたかに応じて、特定のソースタイプのイベント数を示す図を含むポップアップウィンドウを取得する方法を調べます。
これを行うには、最初にチャートのベースとなるクエリを作成する必要があります。
<search id="chart_search"> <query> index=_internal sourcetype=$chart_sourcetype$ | timechart count </query> <earliest>rt-5m</earliest> <latest>rtnow</latest> </search>
リクエストはトークン$ chart_sourcetype $に依存します。このトークンに値の割り当てを追加し、テーブル内の値がクリック可能になるようにドリルダウンを設定する必要があります。 これは、必要なテーブルの「オプション」で行われます。
<option name="drilldown">cell</option> <drilldown> <set token="chart_sourcetype">$row.sourcetype$</set> </drilldown>
次に、JSを使用して、[詳細]フィールドとダイアグラムビューのアイコンを構成します。
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 changes var 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(); }); });
そして、前の記事で行ったように、ポップアップウィンドウを構成します。テキストの代わりに、JSが参照する識別子を持つブロックを追加します。
<div id="chartDetail"/>
<panel> <html> <!-- Modal Chart --> <div class="modal fade" id="modalChart" tabindex="-1" role="dialog" aria-labelledby="modalChartLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalChartLabel">Details: $chart_sourcetype$</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"/> </button> </div> <div class="modal-body"> <div id="chartDetail"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </html> </panel>
したがって、2つの記事で、基本的なユーザースキルを超える10の興味深いダッシュボードケースを整理しました。 しかし、一般的に、これらすべてのストーリーを繰り返して独自に実装することはそれほど難しくありません。
このすべてをより詳しく、より明確に見るために、 GitHubでアプリケーションをダウンロードできます。ここで、すべてのスクリプト、コードを見つけ、ダッシュボードをクリックして、すべてがどのように機能するかを確認できます。
Splunk .conf18カンファレンスのビデオも見ることができます。
