[UPDATED ANSWER] as per mock screenshots provided. Please refer to updated screenshot and code below. You can play with CSS and SPL as per your actual needs.
PS: No changes to JS. So only SPL query , CSS <Style> and <html> panel has been changed.
1. SPL has been changed to bring data for specific printer in one cell and all the Printers in one row.
2. As per your need nested <div> sections were required for responsive table design where data is in single row but wraps to the subsequent row if width of the view is reduced. Previous example was built using <table> hence it was not responsive.
@genesiusj, is there a reason why you want table kind of view but not Splunk table?
I have converted my answer to build a table for five fields printer, status, statusNum, timeConvDate, timeConvTime as per your question. In order to pass the data from Search results to JS the token tokResultsInHTML has been set in <done> search event handler and the field name from search SPL i.e. htmlData is passed using predefined search token $result. htmlData$ .
As compared to the previous example with <div> section (where request was for single field to be displayed in four columns), I have created <table> with row <tr> and cell .
PS: CSS Style override has been changed as per table structure (each element has id # and class . added for specific customization). I have overridden few as example kindly change as needed. Central text alignment has been applied for each table cell.
Please try out and confirm!
Following is the run anywhere example Simple XML code:
<dashboard script="display_token_with_html_content.js">
<label>Table with HTML data</label>
<search>
<query>| makeresults
| eval status="printing,deleting,error;printing,error;door open,error;restarted;printed,deleting;error,offline;error,offline;spooling,paused"
| makemv status delim=";"
| mvexpand status
| eval delta=500
| streamstats count as sno
| eval printer="printer".sno
| eval delta=delta*sno
| eval _time=_time-delta
| fields - delta sno
| eval timeConvDate=strftime(_time,"%a %m-%d-%Y")
| eval timeConvTime=strftime(_time,"%H:%M:%S")
| eval statusClass=case(status="printing,deleting,error","status_fatal",status="error,toner low","status_fatal",status="printing,error","status_fatal",status="paper jam","status_fatal",status="no toner","status_fatal",status="error,offline","status_fatal",status="error","status_fatal",
status="door open,error","status_critical",status="spooling,paused","status_critical",status="paused","status_critical",status="out of paper","status_critical",status="error,out of paper","status_critical",status="offline","status_critical",status="door open","status_critical",
status="toner low","status_low",status="restarted","status_low",
status="printing,deleting","status_info",status="printed,deleting","status_info",status="printing,printed,deleting","status_info",status="error,warming up","status_info",status="spooling,printing","status_info",status="error,offline","status_info",status="spooling","status_info",status="printing","status_info",status="normal","status_info")
| sort - statusClass, status
| table printer, status, statusClass, timeConvDate, timeConvTime
| eval htmlData="<div class=\"html_table_column ".statusClass."\"><div class=\"html_column_printer html_div_center\">".printer."</div><div id=\"column_status\" class=\"html_div_center\">".status."</div>"."<div id=\"column_timeConvDate\" class=\"html_div_center\">".timeConvDate."</div>"."<div id=\"column_timeConvTime\" class=\"html_div_center\">".timeConvTime."</div></div>"
| stats list(htmlData) as htmlData
| eval htmlData="<div class=\"html_table_row\">".mvjoin(htmlData," ")."</div>"</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<done>
<set token="tokResultsInHTML">$result.htmlData$</set>
</done>
</search>
<row>
<panel>
<html>
<style>
div#html_table div.html_table_row{
display: flex;
flex-wrap: wrap;
}
div#html_table div.html_table_row div.html_table_column{
width:15%;
text-align:center;
text-align: center;
color: white;
margin-right: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
div#html_table div.html_table_row div.status_fatal{
background:red;
}
div#html_table div.html_table_row div.status_critical{
background:orange;
}
div#html_table div.html_table_row div.status_low{
background:blue;
}
div#html_table div.html_table_row div.status_info{
background:green;
}
div#html_table div.html_table_row div.html_column_printer{
font-weight:bold;
font-size:120%;
}
</style>
$tokResultsInHTML$
</html>
</panel>
</row>
<row>
<panel>
<title>Format Data as desired output and show as html</title>
<html>
<div id="html_table">
</div>
</html>
</panel>
</row>
</dashboard>
Following is the required JS display_token_with_html_content .js
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function (
$,
mvc
) {
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
if (tokResultsInHTML !== undefined) {
$("#html_table").html(tokResultsInHTML);
}
});
});
The mvc.Components is predefined Splunk JS object/class notation so kindly don't confuse with the component column which was used in the previous example. I have changed the example SPL, you can replace commands from | makeresults till | fields - delta sno with your index query and use the remaining pipes as is.
... View more