Dashboards & Visualizations

Change font color of dashboard panel based on a condition

Explorer

Hello,

I want to compare my desired monitor inputs to my actual monitor inputs. I am using btool in a script to gather my desired inputs from my forwarders. They look like this:
alt text

I want to create a dashboard panel which looks similar to this:
alt text

These are my desired inputs. Now I want my sources to be displayed with green font if there are events in the listed index with the listed host and the listed source. Otherwise, they should be displayed with red font. For example if the search query index=_internal host=uf1 source=/opt/splunkforwarder/var/log/splunk in the last hour retrieves at least 1 event, I want '/opt/splunkforwarder/var/log/splunk' to be displayed with green font.

So I have 3 problems. First, I need to know how to run a search for every single entry source in a dashboard.
Second, I need to know how to change font color in a dashboard.
Third, I need to know how to relate the search result to the color.

What I tried so far:
The search for my dashboard panel is

index=inputmonitor
| stats values(inputsource) as source by host, destindex
| rename dest
index as index

I can not do something like

index=inputmonitor
| stats values(inputsource) as source by host, destindex
| search index=
dest_index ...

Because the search command will only search my table and will not be able to search an index that is not inputmonitor.
So I really need a new search for every single combination of host, index, and source. Which means I need some kind of loop.
I suppose this is only possible with XML or probably even only with HTML and javascript. I do not have much experience with XML, HTML and javascript. I hope you know how to solve my problem or you have an idea how to solve this at least.

Here is my dashboard:

<dashboard>
  <label>Forwarder Monitoring Clone</label>
  <row>
    <panel>
      <title>input sources by host, index</title>
      <table>
        <search>
          <query>index=inputmonitor | stats values(inputsource) as source by host, dest_index | rename dest_index as index</query>
          <earliest>-10m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <link target="_blank">search?q=index=$row.index$%20host=$row.host$%20$click.name2$=$click.value2$&amp;earliest=-60m@m&amp;latest=now</link>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

Thank you in advance!

Path Finder

Hi @dpeukert ,

Here you go. Its the Javascript solution I have worked upon. The idea is to form a query from the data you have then run that query in javascript , check the result and based on that result change the div color.

Run anywhere dashboard code below,

<dashboard script="custom_renderer.js">
  <label>Test1</label>
  <row>
    <panel>
      <table id="table_customcel2">
        <search>
          <query>index=_internal 
| stats values(source) as source by index,host
| mvexpand source
| eval query = "index=" + index + " host=" + host + " source=\"" + source + "\""
| stats values(query) as query by index,host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Javascript file below,

require([
    "underscore",
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
], function(
   _,
   mvc,
   SearchManager,
   TableView
) {
    var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cellData) {
            return _(cellData).contains(cellData.field);
        },
        render: function($td, cellData) {
            var field = cellData.field;
            if (field=="query") {
                console.log("cellData: ", cellData);
                var i;
                for (i = 0; i < cellData.value.length; i++) {
                   //console.log(cellData.value[i]);
                    var mysearch = new SearchManager({
                     search: cellData.value[i], 
                     preview: true,
                     cache: true,
                     status_buckets: 300
                   });
                   //console.log(mysearch.id)
                   var mainSearch = splunkjs.mvc.Components.get(mysearch.id);
                   var myResults = mainSearch.data("preview", { count: 25, offset: 10 });
                   console.log("Has data? ", myResults.hasData());
                   var text_color
                   if (myResults.hasData()) {
                       console.log("Green")
                       text_color = "green"
                   }
                   else {
                       console.log("Red")
                       text_color = "red"
                   }
                   $td.addClass("query").html(_.template('<div style="color:<%-text_color%>"><%-query%></div>',{query:cellData.value,text_color:text_color}));
                 }
            }
            if (field=="host") {
                $td.addClass("host").html(_.template('<b><%-host%></b>',{host:cellData.value}));
            } 
            if (field=="index") {
                $td.addClass("index").html(_.template('<b><%-index%></b>',{index:cellData.value}));
            } 
        }
    });
    mvc.Components.get("table_customcel2").getVisualization(function(tableView) {
        var myCellRenderer = new CustomCellRenderer();
        tableView.addCellRenderer(myCellRenderer);
    });    
});

Sid

Explorer

Hello @techiesid,

thank you for your time and work! First of all, i tried to use your dashboard and what i see is only regarding the internal index, which is not quite what i am looking for. You changed my base query, which is probably not a good idea. You should look at my data and my search query a little bit more carefully. I am using data with fields called inputsource and destindex. I renamed them for my dashboard, but i do not need to rename them. Like i said destindex and inputsource are determined by btool. Which means that there is not necessarily an existing input. Because there could be trouble with read access or there might be no file in that directory on the forwarder. I suppose index=internal only mentions existing inputs.

The second thing is i do not know in which location i am supposed to put your script into. And i have almost no clue how your script works.

I want to provide some more information which might helps you:
I am using a script with the name btool_inputs with the following content.
/opt/splunkforwarder/bin/splunk btool inputs list | grep -e '^\[\|^index'

My props.conf is:

[inputsconf]
DATETIME_CONFIG = CURRENT
LINE_BREAKER = ([\r\n]+)\[
SHOULD_LINEMERGE = false
TRANSFORMS-throwaway = garbage
EXTRACT-source = \[monitor:\/\/(?[^\]]*)]
EXTRACT-index = index = (?.*)$

My transforms.conf is:

[garbage]
REGEX = ^(?!.*(\[monitor)).*
DEST_KEY = queue
FORMAT = nullQueue

And my inputs.conf is:

[script://$SPLUNK_HOME/etc/apps/input_monitor/bin/btool_inputs]
sourcetype = inputsconf
index = inputmonitor
interval = 60

I hope you might be able to adapt your work this configuration and to tell my how to use the script correctly.

Sincerely
@dpeukert

0 Karma

Path Finder

Hi @dpeukert ,

Sorry I should have mentioned that my intension was to show you that its possible to change the color of a mv field values based on some condition. As I dont have access to your index I gave an example of_internal index. Similar way you need to implement in your dashboard.

The JS fiel you need to put under $SPLUNK_HOME/etc/apps//appserver/static folder.

Hope that helps.

Sid

0 Karma