Change the color of a row based on date/time for a...

jeffbat · ‎04-25-2019

I have the need to create a dashboard that will be showing a table of data based on date/time and showing the date/time as a column. The data will show the last 7 days.

I want to be able to colorize the rows in the dashboard that are within the last 24 hours.

Is there an easy way to do this in a dashboard.

we are running Splunk Enterprise 7.2.4.2.

Thanks.

vnravikumar · ‎04-25-2019

Hi

try this and modify accordingly

<dashboard script="highlight.js">
  <label>table</label>
  <row>
    <panel>
      <html depends="$hide$">
          <style>
             .green{ 
             background-color:#53A051 !important;
             }
             </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="tableHighlight">
        <search>
          <query>| gentimes start=04/22/19 end=04/27/19 increment=1d 
| eval data="dummydata" , duration = round((now()-starttime)/86400) 
| eval color= if(duration=0,"yes","no"),  data= 'color'."|".'data'|rename starthuman as DateTime |table DateTime,data</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

js:

 require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'splunkjs/mvc/simplexml/ready!'
  ], function (_, $, mvc, TableView) {

      var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function (cell) {
              return _(['data']).contains(cell.field);
          },
          render: function ($td, cell) {
              var val = cell.value.split("|")[0];
              var label = cell.value.split("|")[1];
              if (val == "yes") {
                  $td.addClass("range-cell").addClass("green")
              }

              $td.text(label).addClass("string");
          }
      });

      var sh = mvc.Components.get("tableHighlight");
      if (typeof (sh) != "undefined") {
          sh.getVisualization(function (tableView) {
              tableView.table.addCellRenderer(new CustomRangeRenderer());
              tableView.table.render();
          });
      }
  });

Change the color of a row based on date/time for a dashboard

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life