topic Re: Creating colored tiles based on status field in Dashboards & Visualizations

Creating colored tiles based on status field

shakSplunk — Tue, 17 Aug 2021 13:26:07 GMT

Hi all,

I was wondering, with the following table would I be able to create a set of tiles that would be color coded based on the status field and also visualise also show the application in large font:

Environment	Application	Hostname	Status
EUAT	MC	H1	RUNNING
EUAT	MC	H2	DOWN
DEV	IC	H4	ERROR
UAT	IC	HK	RUNNING

I was hoping that "RUNNING" would be green, "DOWN" be red and "ERROR" be orange.

Any assistance would be greatly appreciated!

Re: Creating colored tiles based on status field

ITWhisperer — Tue, 17 Aug 2021 14:38:29 GMT

<row> <panel depends="$stayhidden$"> <html> <style> #tiles table tbody tr{ margin-right:10px; margin-bottom:10px; } #tiles table tbody tr td{ width: 180px; text-align: center; } #tiles table tbody tr td[data-cell-index="1"]{ font-size: 2em; } #tiles table tbody td div.multivalue-subcell[data-mv-index="1"]{ display: none; } </style> </html> </panel> <panel id="tiles"> <table> <search> <query>| makeresults | eval _raw="Environment,Application,Hostname,Status EUAT,MC,H1,RUNNING EUAT,MC,H2,DOWN DEV,IC,H4,ERROR UAT,IC,HK,RUNNING" | multikv forceheader=1 | table Environment Application Hostname Status | eval Application=mvappend(Application,case(Status="RUNNING","GREEN",Status="DOWN","RED",Status="ERROR","ORANGE"))</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> <option name="drilldown">none</option> <option name="refresh.display">progressbar</option> <format type="color"> <colorPalette type="expression">case (match(value,"RED"), "#ff0000",match(value,"ORANGE"), "#ff8000",match(value,"GREEN"),"#00ff00",true(),"#ffffff")</colorPalette> </format> </table> </panel> </row>

Re: Creating colored tiles based on status field

shakSplunk — Tue, 17 Aug 2021 15:53:24 GMT

I can't thank you enough for all the effort you put into that.

However would it be possible to create something like the picture I've posted.

Re: Creating colored tiles based on status field

kamlesh_vaghela — Tue, 17 Aug 2021 17:17:16 GMT

@shakSplunk

Can you please try this?

<dashboard script="a.js"> <label>Creating colored tiles based on status field</label> <search id="my_search"> <query>| makeresults | eval _raw="Environment,Application,Hostname,Status EUAT,MC,H1,RUNNING EUAT,MC,H2,DOWN DEV,IC,H4,ERROR UAT,IC,HK,RUNNING" | multikv forceheader=1 | table Environment Application Hostname Status | eval Color=case(Status="RUNNING","GREEN",Status="DOWN","RED",Status="ERROR","ORANGE")</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> <row> <panel> <html> <div style="width:50%" id="root"></div> </html> <html> <style> #root .square { float:left; position: relative; width: 40%; padding-bottom : 30%; /* = width for a 1:1 aspect ratio */ margin:1.66%; overflow:hidden; } #root .content { text-align: center; position:absolute; color:white; height:90%; /* = 100% - 2*5% padding */ width:90%; /* = 100% - 2*5% padding */ padding: 5%; } #root h3, #root h1 { color: white; } </style> </html> </panel> </row> </dashboard>

a.js

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc) { var mySearch = mvc.Components.get("my_search"); mySearch.on('search:done', function(properties) { var myResults = mySearch.data("results"); myResults.on("data", function() { resultArray = myResults.data().rows; var templateRawText = ` <div class="square" style="background-color: <%= val5 %>;"> <div> </div> <div> </div> <div class="content numbers"> <h3><%= val1 %></h3> <h3><%= val2 %></h3> <h3><%= val3 %></h3> <h1><%= val4 %></h1> </div> </div>`; var compiledTemplate = _.template(templateRawText); $.each(resultArray, function(index, value) { console.log(value); var templateResult = compiledTemplate({ val1: value[0], val2: value[1], val3: value[2], val4: value[3], val5: value[4], }); $("#root").append(templateResult); }); }) }) });