Hello,
I have a question for a custom table.
I have to do this, but in Splunk it's not possible to merge cells.
I have to do this :
For the moment, I made this :
1 Solution
You can achieve such a format using your own HTML and CSS. You can try below sample code for your POC.
<dashboard script="convert_to_html.js">
<label>HTML Table from SPL</label>
<search id="mySearch">
<done>
<set token="tokHTML">$result.data$</set>
</done>
<query>|makeresults count=10 | eval a=1 | accum a | eval NW="NW"+a, P="P"+a, NAOK="NAOK"+a, NAKO="NAKO"+a, TRMOK="TRMOK"+a, TRMKO="TRMKO"+a | table NW P NAOK NAKO TRMOK TRMKO</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<row>
<panel>
<html>
<div id="htmlPanelWithToken">
</div>
</html>
</panel>
</row>
<row>
<panel>
<html>
<style>
.th_td_class {
background-color: chocolate;
color: white;
text-align: center;
}
.td_class {
background-color: orange;
color: white;
border: 2px solid black;
text-align: center;
}
.tr_class {
background-color: chocolate;
color: white;
text-align: center;
border: 2px solid black;
}
.td_content_class {
text-align: center;
border: 2px solid black;
}
</style>
</html>
</panel>
</row>
</dashboard>
JS
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function ($, mvc,) {
var mySearch = mvc.Components.get("mySearch");
var mySearchResults = mySearch.data("results");
mySearchResults.on("data", function () {
resultArray = mySearchResults.data().rows;
$("#htmlPanelWithToken").html("");
var generateDataContent = "";
//Iterate Result set
$.each(resultArray, function (index, value) {
// Create proper HTML content from result
// generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>";
//value[1] = data field
//value[2] = data1 field
generateDataContent = generateDataContent + `<tr>
<td class="td_content_class">`+ value[0] + `</td>
<td class="td_content_class">`+ value[1] + `</td>
<td class="td_content_class">`+ value[2] + `</td>
<td class="td_content_class">`+ value[3] + `</td>
<td class="td_content_class">`+ value[4] + `</td>
<td class="td_content_class">`+ value[5] + `</td>
</tr>`;
})
var generateHTMLContent = `
<table width="25%">
<thead>
<tr>
<td class="tr_class">F</td>
<td class="tr_class">V</td>
</tr>
</thead>
<tbody>
<tr>
<td class="td_content_class">N</td>
<td class="td_content_class">W</td>
</tr>
<tr>
<td class="td_content_class">P</td>
<td class="td_content_class">P</td>
</tr>
<tr>
<td class="td_content_class">D</td>
<td class="td_content_class">123</td>
</tr>
</tbody>
</table>
<br/>
<table width="100%">
<thead>
<tr>
<td colspan="2"></td>
<td class="tr_class" colspan="2">NA</td>
<td class="tr_class" colspan="2">TRM</td>
</tr>
<tr>
<td class="td_class">NW</td>
<td class="td_class">P</td>
<td class="td_class">OK</td>
<td class="td_class">KO</td>
<td class="td_class">OK</td>
<td class="td_class">KO</td>
</tr>
</thead>
<tbody>
`+ generateDataContent + `
</tbody>
</table>
<br />
<table width="50%">
<tbody>
<tr>
<td class="td_content_class">Total</td>
<td class="td_content_class">W</td>
<td class="td_content_class">P</td>
<td class="td_content_class">11</td>
<td class="td_content_class">10</td>
<td class="td_content_class">1111</td>
<td class="td_content_class">2222</td>
</tr>
</tbody>
</table>
`;
$("#htmlPanelWithToken").html(generateHTMLContent);
});
});
I hope this will help you.
Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.
