How to indicate if a particular field is drillable in splunk dashboard?

[surekhasplunk]

Hi,

I have got say 5 fields in a statistics table in a panel in splunk dashboard. Now 3 of the fields are drillable and 2 are not.
How can i indicate the user to say these 3 fields have drilldown active on them and these 2 fields are not drillable.
How to color differently or underline those 3 fields. ?

Thanks

[kamlesh_vaghela · Accepted solution]

Hi @surekhasplunk ,

In your you can achieve your requirement by adding cell level drilldown in table view.
Add below drilldown code in your table view.

Can you please try below code?

<table id="my_table">
    <search>
        <query>MY_SEARCH_WITH_5_COLUMN_TABLE</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="rowNumbers">false</option>
    <option name="totalsRow">false</option>
    <option name="wrap">true</option>
    <drilldown>
        <condition field="FIELD_1">
            <link target="_blank">search?q=MY_LOGIC</link>  
        </condition>
        <condition field="FIELD_2">
            <link target="_blank">search?q=MY_LOGIC</link>  
        </condition>
        <condition field="FIELD_3">
            <link target="_blank">search?q=MY_LOGIC</link>  
        </condition>
    </drilldown>
</table>

For making color in field you can achieve this by adding css.

myjs.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['FIELD_1','FIELD_2','FIELD_3']).contains(cell.field);
        },
        render: function($td, cell) {
            $td.html("<div class='my_css'>"+cell.value+"</div>")
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["my_table"];
    for (i=0;i<tableIDs.length;i++) {
        var sh = mvc.Components.get(tableIDs[i]);
        if(typeof(sh)!="undefined") {
            sh.getVisualization(function(tableView) {
                // Add custom cell renderer and force re-render
                tableView.table.addCellRenderer(new CustomRangeRenderer());
                tableView.table.render();
            });
        }
    }    
});

mycss.css

.my_css { 
    border:0px solid #a1a1a1;
    background-color:rgb(7,245,7);
}

[surekhasplunk]

Thanks much for quick and to the point answer . Appreciate it 🙂

[kamlesh_vaghela]

Glad to help you.
Happy Splunking

[surekhasplunk]

Hi @kamlesh_vaghela,

In the same js and css code above if i want to add a condition like if FIELD_1 = Total then make it bold.
and few more like that.
Requirement is FIELD_1 is currently coming with some values out of which i want to show some values as bold.