Hello,
I'm starting this post with a shoutout to @niketn because I used one of his post as the basis for my dashboard. However, input from any/all Splunkers out there is appreciated.
Here is my code, modified from niketnilay's post. How to show table result in one page/ table modification
<row>
<panel>
<title>Show Table Results in One Page</title>
<table>
<search>
<query> index=oit_printer_monitoring AND type=Printer
| eval timeConvDate=strftime(_time,"%a %m-%d-%Y")
| eval timeConvTime=strftime(_time,"%H:%M:%S")
| eval statusNum=case(status="printing,deleting,error",4,status="error,toner low",4,status="printing,error",4,status="paper jam",4,status="no toner",4,status="error,offline",4,status="error",4,
status="door open,error",3,status="spooling,paused",3,status="paused",3,status="out of paper",3,status="error,out of paper",3,status="offline",3,status="door open",3,
status="toner low",2,status="restarted",2,
status="printing,deleting",1,status="printed,deleting",1,status="printing,printed,deleting",1,status="error,warming up",1,status="spooling,printing",1,status="warming up",1,status="spooling",1,status="printing",1,status="normal",1)
| sort - statusNum, status
| fields printer, status, statusNum, timeConvDate, timeConvTime
| dedup printer
| eval printer="#".printer
| eval component=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"..."),"..."),"...")
| stats values(component) as component
| nomv component
| eval component="<div>".replace(component,"#","</div><div>")."</div>"
| makemv delim="..." component
| table component</query>......
Explanation.
Create two new fields for time and date. | eval timeConvDate=strftime(_time,"%a %m-%d-%Y") | eval timeConvTime=strftime(_time,"%H:%M:%S")
Create a new field to represent the status as a number that can be sorted later. | eval statusNum=case(status="printing,deleting,error",4,status="error,toner low",4,....
Append a "#" in front of my first field, printer, to establish the beginning of a new field component. | eval printer="#".printer
The field **component* will be concatenation of several other fields: printer, status, and the timeConvDate and timeConvTime fields as one. | eval component=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"..."),"..."),"...") I used "..." instead of "|" between each of the concatenated fields.
The next two lines are from niketnilay's code unchanged. | stats values(component) as component | nomv component '| eval component="<div>".replace(component,"#","</div><div>")."</div>"
Modified niketnilay's eval/replace code as follows:By using the "..." all 4 fields stay associated to each other, and the "#" indicates of the start of the field **component**.| makemv delim="..." component `
Replaced the "..." within the field component with a carriage return/newline.
Before continuing, I have a question about the field named *component. When I substituted ***component* with my field name, printerResult, it did not work. I had substituted in the js code as well. Therefore, I used component instead. My question is, in the js code, the word Components is used (plural and upper case C). Is this a special variable name for js and that is why it was used?*
I am using display_token_with_html_content.js as written.
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) {
$("#htmlTokenContainer").html(tokResultsInHTML);
}
});
});
I used niketnilay's css in a panel
<panel>
<title>Applying HTML Style</title>
<html>
<style>
#htmlTokenContainer{
display:flex;
flex-wrap:wrap;
}
#htmlTokenContainer div{
width: 260px;
}
</style>
$tokResultsInHTML$
</html>....
Lastly, I created another panel with just the token value assigned earlier per the niketnilay example.
<panel>
<title>Format Data as desired output and show as html</title>
<html>
<div id="htmlTokenContainer">
</div>
</html>....
Here is a screenshot of my results.
What I am trying to accomplish is placing each value of component into individual cells. The formatting would be all centered. As the final requirement click the printer name in any one of the cells would set a token, which displays another panel (depends="token" ) and populates the panel with data specific to the printer clicked.
Thanks and God bless,
Genesius
@genesiusj @vinothn
Turns out this is purely Simple XML problem (with CSS override if required). No <html> table and JS Extension required.
I used the following approach:
- Build a Splunk
tablewith Multi-value cells (You can arrange as single Row or single column). For each Printer multiple values arePrinter Name, Status, Status Type, Date and Time. - Apply color to table cell using expression color palette based on regex match for Status Type. Since
case()is not available nestedif()can be applied for setting more than two color ranges. Refer to answer. Refer to older answer: https://answers.splunk.com/answers/668588/how-to-add-custom-color-to-blank-cell.html - Enable table drilldown.
$click.value$givesall values in the multi-value cell clicked with each value separated by commaand$click.value2$gives specific value in the multi-valued cell clicked. - Apply custom CSS to format Table cell look as a tile as per the requirement.
Following is the Simple XML code required.
PS: Supports drilldown and requires no JS. Also supports sorting by Printer Name by default table sorting property 🙂
<dashboard>
<label>Table with Color and Format</label>
<row>
<panel>
<html>
<style>
#table_tile table tbody{
display:flex;
flex-wrap: wrap;
}
#table_tile table tbody tr{
margin-right:10px;
margin-bottom:10px;
}
#table_tile table tbody tr td{
width: 180px;
text-align: center;
}
</style>
<div>
<div>Clicked Value in Cell (click.value):$click.value$</div>
<div>Clicked Cell Values (click.value2):$click.value2$</div>
</div>
</html>
<table id="table_tile">
<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 "Printer Info"=printer."###".status."###".statusClass."###".timeConvDate."###".timeConvTime
| fields "Printer Info"
| makemv "Printer Info" delim="###"</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">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>
<format type="color" field="Printer Info">
<colorPalette type="expression">if (match(value,"status_fatal"), "#DC4E41", if(match(value,"^status_critical"),"#F8BE34", if(match(value,"status_low"),"#62B3B2","#B6C75A")))</colorPalette>
</format>
<drilldown>
<set token="click.value">$click.value$</set>
<set token="click.value2">$click.value2$</set>
</drilldown>
</table>
</panel>
</row>
</dashboard>
Little bit tweak to the above code with Unicode characters and I dont need Status Indicator anymore.
Refer to one of my older answers with Unicode characters in the table: https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html
As per the previous code only unicode icons in SPL and colorPalette expression have been changed. Since Splunk Answers does not allow all Unicode characters to be posted posting screenshot of the code.
@genesiusj @vinothn
Turns out this is purely Simple XML problem (with CSS override if required). No <html> table and JS Extension required.
I used the following approach:
- Build a Splunk
tablewith Multi-value cells (You can arrange as single Row or single column). For each Printer multiple values arePrinter Name, Status, Status Type, Date and Time. - Apply color to table cell using expression color palette based on regex match for Status Type. Since
case()is not available nestedif()can be applied for setting more than two color ranges. Refer to answer. Refer to older answer: https://answers.splunk.com/answers/668588/how-to-add-custom-color-to-blank-cell.html - Enable table drilldown.
$click.value$givesall values in the multi-value cell clicked with each value separated by commaand$click.value2$gives specific value in the multi-valued cell clicked. - Apply custom CSS to format Table cell look as a tile as per the requirement.
Following is the Simple XML code required.
PS: Supports drilldown and requires no JS. Also supports sorting by Printer Name by default table sorting property 🙂
<dashboard>
<label>Table with Color and Format</label>
<row>
<panel>
<html>
<style>
#table_tile table tbody{
display:flex;
flex-wrap: wrap;
}
#table_tile table tbody tr{
margin-right:10px;
margin-bottom:10px;
}
#table_tile table tbody tr td{
width: 180px;
text-align: center;
}
</style>
<div>
<div>Clicked Value in Cell (click.value):$click.value$</div>
<div>Clicked Cell Values (click.value2):$click.value2$</div>
</div>
</html>
<table id="table_tile">
<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 "Printer Info"=printer."###".status."###".statusClass."###".timeConvDate."###".timeConvTime
| fields "Printer Info"
| makemv "Printer Info" delim="###"</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">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>
<format type="color" field="Printer Info">
<colorPalette type="expression">if (match(value,"status_fatal"), "#DC4E41", if(match(value,"^status_critical"),"#F8BE34", if(match(value,"status_low"),"#62B3B2","#B6C75A")))</colorPalette>
</format>
<drilldown>
<set token="click.value">$click.value$</set>
<set token="click.value2">$click.value2$</set>
</drilldown>
</table>
</panel>
</row>
</dashboard>
[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.
