@ksarpol @DalJeanis @woodcock @pgadhari @to4kawa @rob_jordan @rich7177 @efavreau
If more than 20 trellis viz is required for Single Value or Status Indicator kind of viz (i.e. Icon, color, text kind of viz) and not for Column, Bar or any other chart following Table based hack can be used instead which is based on one of my recent answers: https://answers.splunk.com/answers/809414/issue-with-css-html-js-formatting-search-output.html?child...
Following are the steps used to create Table results as Tile with Color, Icon and Value:
Step 1: Create a Table with required data like in the example host, cpu and threshold for color ( can also be used for dynamic icon refer to above answer).
Step 2: Create multi-value field for label (field to be displayed need to be added. Even for color format)
Step 3: Fields required for drilldown only can be hidden using underscore prefix.
Step 4: Apply CSS Override to convert Table layout to responsive Tile (i.e. tiles should overflow to next row based on browser width).
Step 5: Apply dynamic CSS size override based on Tile size selection i.e. Small, Regular or Large (more can be added or only static one can be used as per use case)
Step 6. Since Table value is Multi-Valued field, CSS override can be added based on index. For example index 0 is the threshold, which needs to be used for Tile color but not to be displayed. Also Tile Icon needs to be of larger size compared to Tile Label.
Step 7: Apply Table Cell color based on colorPalette expression.
Step 8: Create drilldown. Example uses required hidden fields but drilldown can use more dynamic default tokens like $click.value$ and $click.value2$. Refer to above answer for examples/discussion.
Once we create Table with Tiles, Icon and Color, we can obviously also set the number of rows (tiles) to be displayed in the table (for example some max value like 50, 100, 500 etc). I have used Text box to generate 25 Tiles by default which also sets no of rows to 25 (default example).
<option name="count">$tokHosts$</option>
Following is the Simple XML Code, please try out and confirm.
PS: Since Unicode Icons can not be attached to Splunk Answers, you would need to manually need to replace <ICON> in the Splunk search with required unicode like Desktop in this example. from https://emojipedia.org/desktop-computer/
<form>
<label>Table with Unicode Character and Drilldown</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input type="link" token="tokTileSize" searchWhenChanged="true">
<label>Tile Size</label>
<choice value="small">Small</choice>
<choice value="regular">Regular</choice>
<choice value="large">Large</choice>
<default>regular</default>
<change>
<condition value="small">
<set token="tokIconTopPadding">initial</set>
<set token="tokLabelTopPadding">initial</set>
<set token="tokIconFontSize">initial</set>
<set token="tokLabelFontSize">initial</set>
<set token="tokTileWidth">120px</set>
</condition>
<condition value="regular">
<set token="tokIconTopPadding">40px</set>
<set token="tokLabelTopPadding">25px</set>
<set token="tokIconFontSize">600%</set>
<set token="tokLabelFontSize">200%</set>
<set token="tokTileWidth">180px</set>
</condition>
<condition value="large">
<set token="tokIconTopPadding">60px</set>
<set token="tokLabelTopPadding">35px</set>
<set token="tokIconFontSize">800%</set>
<set token="tokLabelFontSize">300%</set>
<set token="tokTileWidth">240px</set>
</condition>
</change>
</input>
<input type="text" token="tokHosts" searchWhenChanged="true">
<label>No. of Hosts (TESTING)</label>
<default>25</default>
</input>
<html>
<style>
#table_tile table tbody{
display:flex;
flex-wrap: wrap;
}
#table_tile table th{
display: none !important;
}
#table_tile table tbody tr{
margin-right:10px;
margin-bottom:10px;
}
#table_tile table tbody tr td{
width: $tokTileWidth$;
text-align: center;
background: #fff;
}
#table_tile table tbody tr td div[data-mv-index="0"].multivalue-subcell{
display:none;
}
#table_tile table tbody tr td div[data-mv-index="1"].multivalue-subcell{
padding-top: $tokIconTopPadding$;
font-size: $tokIconFontSize$;
}
#table_tile table tbody tr td div[data-mv-index="2"].multivalue-subcell{
padding-top: $tokIconTopPadding$;
font-size: $tokLabelTopPadding$;
}
</style>
</html>
<table id="table_tile">
<search>
<query>| makeresults count=$tokHosts$
| fields - _time
| streamstats count as sno
| eval host="host".sno
| fields - sno
| eval cpu=substr(tostring(random()),1,2)
| eval _cpu_kpi_threshold=case(cpu>=0 AND cpu<40,"normal",
cpu>=40 AND cpu<80,"medium",
cpu>=80 AND cpu<90,"high",
true(),"critical"
)
| eval _cpu=cpu
| eval server=_cpu_kpi_threshold."|"."<ICON>️️" ."|".host
| makemv server delim="|"
| eval _host=host
| fields - host cpu</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="count">$tokHosts$</option>
<option name="refresh.display">progressbar</option>
<format type="color" field="server">
<colorPalette type="expression">if (match(value,"critical"), "#DC4E41", if(match(value,"high"),"#F1813F", if(match(value,"medium"),"#F8BE34","#B6C75A")))</colorPalette>
</format>
<drilldown>
<set token="tokServer">$row._host$</set>
<set token="tokCPU">$row._cpu$</set>
<set token="tokCPUThreshold">$row._cpu_kpi_threshold$</set>
</drilldown>
</table>
</panel>
</row>
<row>
<panel>
<title>Replace <ICON> in the Simple XML with Unicode Desktop character from https://emojipedia.org/desktop-computer/</title>;
<html>
<div>Selected Server: $tokServer$</div>
<div>Server CPU: $tokCPU$</div>
<div>Server CPU KPI Threshold: $tokCPUThreshold$</div>
</html>
</panel>
</row>
</form>
PS: Also attaching the snippet of Simple XML search SPL where Unicode character needs to be replaced in the above code as Splunk Answers does not allow unicode character.
Splunk recently purchased SignalFX in 2019 so likely we'll start to see new visualizations show up in Splunk in 2020. SignalFX has long had the ability to display high level status of hundreds of nodes with dynamic drilldown.
