10 трюков для продвинутого дашбординга в Splunk. Часть 2



    Добрый день!

    Сегодня мы продолжаем делиться секретами продвинутых дашбордов в Splunk. В этой статье мы разберем несколько кейсов использования JavaScript для того, чтобы сделать дашборды более удобными, читабельными и интерактивными. Подробности читайте под катом.

    В предыдущей статье мы разобрали первые 5 трюков и на простых примерах посмотрели, как можно без использования js настроить динамику на дашборде, как найти и добавить разные шаблоны и стили. Сегодня мы продолжаем эту историю.

    Прежде чем начать, хочу отметить, что для отладки скриптов и в целом в процессе создания сложных дашбордов следует настроить режим разработчика, выключив кеширование и настроив легкую перезагрузку. О том, как это сделать мы также писали в предыдущей статье.

    6. Всплывающие подсказки в таблице


    Что делать, если у нас возникают длинные значения в определенных полях? Конечно, нам бы хотелось их прочитать при необходимости, но не обязательно постоянно их видеть. Для этого мы сделаем следующее: сократим сообщение и настроим подсказки в виде целого сообщения при наведении курсора.





    Готовый шаблон кода для всплывающих подсказок можно найти на ресурсе Bootstrap, о котором мы говорили раньше.

    Чтобы применить скрипты на дашборде, нужно поместить их в каталог …/Splunk/etc/apps/dashboard_tips/appserver/static

    А затем указать нужные css и js файлы в XML коде дашборда.



    <form stylesheet="tooltip.css" script="tooltip.js">

    Для данной задачи будет нужен очень простой CSS-код, в котором будут указаны параметры выведения сообщения.

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

    И JS-скрипт, в котором указано, что если размер сообщения больше 48 символов, то сокращаем сообщение и добавляем подсказку с текстом этого сообщения. Также нужно указать к какой именно таблице мы хотим применить скрипт. Для этого нужно в теге, задающем таблицу, указать 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. Преобразование таблиц


    Не всегда таблицы, которые формируются спланком автоматически, выглядят удачно на дашбордах. Иногда хочется, взять данные из таблицы и представить их совершенно в другом виде.


    В представленном примере у нас всегда будет одна строчка таблицы и достаточно большая карта. Наиболее очевидный вариант преобразования — транспонировать таблицу. Конечно, можно использовать команду |transpose, но сейчас речь не об этом, а о том, как данные из таблицы, преобразовать через JS. Работая дополнительно еще и с CSS, можно делать действительно удивительные вещи.

    Давайте посмотрим, как получить такую таблицу:



    Во первых, к интересующему нас запросу нужно добавить ID, на который мы будем ссылаться в JS скрипте.

    <search id="map_search">

    Также в XML коде дашборда нужно сослаться на .js файл, который должен лежать в директории …/Splunk/etc/apps/dashboard_tips/appserver/static

    <form script="table2list.js">

    Ну и конечно, надо сделать привязку к этому скрипту в дашборде. Для этого внутри html тегов, создаем объект div с ID list-view, на который также будем ссылаться в скрипте.

          <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. Интерактивное изменение содержимого дашборда


    В этом разделе мы поговорим, как можно вносить изменения в дашборд не с помощью токенов, а с использование кода. Напрашивается вопрос – зачем? С помощью кода можно более гибко и визульно интересней это оформить, причем для этого не потребуется большой и сложный код, все предельно просто.

    В нашем примере, мы хотим настроить появление таблицы по щелчку на иконку.





    Обратим внимание, что в представленном на картинках дашборде используется уже достаточно много скриптов, которые мы рассмотрели выше.

    Не обязательно сохранять все это в один код 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. Маски на Inputs




    С помощью JavaScript можно легко наложить ограничения или кастомные правила на инпутсы в дашборде. Например, чтобы вводилось только целое число или дата выбиралась из календаря и тд.

    Для этого, для каждого нужного инпута задаем ID, на который будем ссылаться в JS.

        <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. Всплывающее окно с диаграммой




    В этом пункте разберем, как получить такое всплывающее окно с диаграммой, на которой показано количество событий по определенному sourcetype, в зависимости от того, на какую иконку в поле «Detail» пользователь кликнул.

    Для этого, первоначально надо создать запрос, на котором диаграмма будет основываться:

      <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 настраиваем иконки в поле Detail и вид диаграммы:

    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>
    

    Таким образом, за две статьи мы разобрали 10 интересных кейсов по работе с дашбордами, которые выходят за рамки базовых пользовательских навыков. Но в целом, все эти истории не так сложно повторить и попробовать реализовать самостоятельно.

    Чтобы посмотреть все это ближе и нагляднее, можно скачать приложение на GitHub, где можно найти все скрипты, коды, покликать на дашбордах и посмотреть как это все работает.

    Также можно посмотреть видео с конференции Splunk .conf18.



    Если вы все еще не пробовали Splunk, то самое время начать, бесплатная версия до 500Мб в сутки доступна всем желающим. А если у вас есть вопросы или проблемы со Splunk — вы можете задать их нам, а мы поможем.

    Мы являемся официальным Premier Партнером Splunk.

    TS Solution

    134,00

    Системный интегратор

    Поделиться публикацией
    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое