topic Re: How to create custom dashboard? in Dashboards & Visualizations

How to create custom dashboard?

ramesh12345 — Mon, 01 Apr 2019 08:08:02 GMT

Hi,

I have a query which displays max percentages.i am displaying with default splunk provided radial gauge.But i want to display the same in with an image. i need to display in bulb(red,green,orange) as per the percentages defined,it automatically needs to change according to the percentages.(>80 green,<80 and >60 orange <60 red)
How to do this custom dashboard?

Re: How to create custom dashboard?

kamlesh_vaghela — Mon, 01 Apr 2019 08:55:36 GMT

@ramesh12345

If you want to go with only radial gauge then check below links. You can set a range in settings.

https://docs.splunk.com/Documentation/SplunkLight/7.2.4/References/Datavisualizationlibrary#Gauges
https://docs.splunk.com/Documentation/Splunk/7.2.5/Viz/CreateGauges#Radial_gauge

You can display images in the Dashboard then you can use achieve by using HTML panel.

https://docs.splunk.com/Documentation/Splunk/7.2.5/Viz/BuildandeditdashboardswithSimplifiedXML#Use_the_HTML_panel_to_display_static_text

Can you please share more information about your dashboard and how you are planning to display bulb image??
Dashboard mock will preferable 😛

Re: How to create custom dashboard?

ramesh12345 — Mon, 01 Apr 2019 09:34:28 GMT

I just want to display bulb(it should be dynamically changes color as per the percentage) instead of Gauge.
Red,Green,Orange colors.how to do this.

Re: How to create custom dashboard?

vnravikumar — Mon, 01 Apr 2019 11:07:55 GMT

Try this, based on value image will get change. For sample purpose, I had made a text box to enter the value. Modify it accordingly to your requirement.

<form>
   <label>Image</label>
   <fieldset submitButton="false">
     <input type="text" token="value">
       <label>Enter number to test(1-100)</label>
     </input>
   </fieldset>
   <row>
     <panel depends="$path$">
       <html>
         <body>
           <tr>
             <td>
             <img src="$path$" height="200" width="200"/>
           </td>
           </tr>
         </body>
       </html>
     </panel>
     <panel depends="$hide$">
      <single>
         <search>
           <query>|makeresults |eval temp=$value$ | table temp</query>
           <done>
             <condition match="'result.temp' >=80">
               <set token="path">/static/app/splunk/green.jpg</set>
             </condition>
            <condition match="'result.temp' >=60 AND 'result.temp' <80">
               <set token="path">/static/app/splunk/orange.jpg</set>
             </condition>
             <condition match=" 'result.temp' <60">
               <set token="path">/static/app/splunk/red.jpg</set>
             </condition>
           </done>
           <earliest>$earliest$</earliest>
           <latest>$latest$</latest>
         </search>
      </single>
     </panel>
   </row>
 </form>

Re: How to create custom dashboard?

ramesh12345 — Tue, 02 Apr 2019 12:21:29 GMT

For example my query

index=_internal|stats count by name

it will display all count with the names. now i want to display different color bulbs based on count value for each individual item.

whenever i executed query above query by your example it is showing only one row,but i need to display all the names count with different bulb colors based on range.

Please help how to do this

Re: How to create custom dashboard?

niketn — Tue, 02 Apr 2019 12:55:34 GMT

@ramesh12345 you should check out Table with Icon example in the Splunk Dashboard Examples App.

Please refer to one of my previous answers which demos three examples including icons based on range https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

Re: How to create custom dashboard?

ramesh12345 — Tue, 29 Sep 2020 23:59:19 GMT

Bulb Visualization Sample

 <panel>
   <html>
     <style>
       /* CSS for table response_time_highlight_icon 
        #response_time_highlight_icon tr{

               width: 40px;
               height: 40px;
               float: left;
        }*/
       #response_time_highlight_icon td.icon img{
           text-align: center;
            width: 100px;
            height: 100px;
       }
       #response_time_highlight_icon td.icon i {
           font-size: 25px;
           text-shadow: 1px 1px #aaa;
       }
       #response_time_highlight_icon td.icon .severe {
           color: indianred;
       }
       #response_time_highlight_icon td.icon .elevated {
           color: orange;
       }
       #response_time_highlight_icon td.icon .low {
           color: #lightgreen ;
       }

       /* CSS for table response_time_highlight_cell */
       #response_time_highlight_cell td.range-low {
           background-color: lightgreen !important;
       }
       #response_time_highlight_cell td.range-elevated {
           background-color: orange !important;
           font-weight: bold;
       }
       #response_time_highlight_cell td.range-severe {
           background-color: indianred !important;
           font-weight: bold;
       }

       /* CSS for table response_time_highlight_row */
       #response_time_highlight_row tr td {
           background-color: lightgreen !important;
       }
       #response_time_highlight_row tr.range-elevated td {
           background-color: orange !important;
       }
       #response_time_highlight_row tr.range-severe td {
           background-color: indianred !important;
       }
       #response_time_highlight_row .table td {
           border-top: 1px solid #fff;
       }
     </style>


   <table id="response_time_highlight_icon">
     <search>
       <query>index=_internal|stats count by name|  eval "Total Count"=case('count'>2800,"severe_".'count','count'&lt;2800 AND 'count'>=2000,"elevated_".'count',true(),"low_".'count')|fields - count,name</query>
       <earliest>-24h@h</earliest>
       <latest>now</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="count">10</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>

Java Script Code is:

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {
severe: 'alert-circle',
elevated: 'alert',
low: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the "Total Count" field
return cell.field === 'Total Count';
},
render: function($td, cell) {
var icon = 'check-circle';
// Fetch the icon for the value
var cellArray = cell.value.split("");
var cellValue = cellArray1;
var range = cellArray[0];
if (ICONS.hasOwnProperty(cellArray[0])) {
icon = ICONS[cellArray[0]];
}
// Create the icon element and add it to the table cell
/* $td.addClass('icon').html(.template('

<%- cellValue %>

', {
icon: icon,
range: cellArray[0],
cellValue:cellValue
}));
}
});
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for 'Total Count'
return _(['Total Count']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var strSLA = cell.value;
if (strSLA!==undefined){
strSLA=strSLA.trim();
$td.addClass('range-cell').addClass("range-"+strSLA);
}
$td.text(strSLA).addClass('string');
}
});

mvc.Components.get("response_time_highlight_icon").getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get("response_time_highlight_cell").getVisualization(function(tableView){
tableView.on("rendered", function() {
console.log("Table Rendered");
setTimeout(function(){
$("#response_time_highlight_cell tr").each(function() {
var strSLA=$(this).find("td:last").html();
if (strSLA!==undefined){
strSLA=strSLA.trim();
$(this).find("td:nth-child(3)").addClass("range-cell").addClass("range-"+strSLA);
}
});
},100);
});
});
mvc.Components.get("response_time_highlight_row").getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});

Output is showing like this,But i want to display horizontally.Bulbs should display sided by side.How to do this.