Dashboards & Visualizations

Issue with simple HTML dashboard customization

Micmac
Path Finder

Hello,

My goal is to change the CSS apply to a row depending on a value a cell, I have find the .js code below which seems work before but not for me.

To sum up I have :
- js and css files located in : $MYSPLUNKDIR/etc/apps/search/appserver/static/application.(js|css)
- A HTML dashboard convert from XML by Splunk who normally include the both files

I have seen that the js and css files are well retrieve by the browser that let me think the code include in the HTML dashboard is OK...

Maybe the application.js use an old code ?

If you have some ideas it's very welcom.

Thanks,

Extract of the include in HTML dashboard :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Alerts Page Clone | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
    <!--<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/application.css" 
[...]
    <script type="text/javascript"  src="/static/app/search/application.js"></script>
    </body>
</html>

application.js :

if ((Splunk.util.getCurrentView() == 'MYDASHBOARD') && Splunk.Module.SimpleResultsTable) {
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function($super) {
            var retVal = $super();
            this.myCustomHeatMapDecorator();
            return retVal;
        },
    myCustomHeatMapDecorator: function() {
            $("tr:has(td)", this.container).each(function() {
                var tr = $(this);
                if (tr.find("td:nth-child(3)").text() == "crit") {
                    tr.addClass("severityCritical");
                }
                if (tr.find("td:nth-child(3)").text() == "high" ) {
                    tr.addClass("severityHigh");
                }

            });
        },
    });
}

application.css :

tr.severityHigh td {
    background-color:#ed2b21 !important;
    color: #fff !important;
    font-weight: bold;
}
tr.severityCritical td {
    background-color:#ed2b21 !important;
    color: #fff !important;
    font-weight: bold;
}
0 Karma
1 Solution

nfilippi_splunk
Splunk Employee
Splunk Employee

There is an example for how to do this in the "Splunk 6 Dashboard Examples" app.

http://apps.splunk.com/app/1603/

Note that this example is written in Simple XML, using custom js and css extensions.

View solution in original post

nfilippi_splunk
Splunk Employee
Splunk Employee

There is an example for how to do this in the "Splunk 6 Dashboard Examples" app.

http://apps.splunk.com/app/1603/

Note that this example is written in Simple XML, using custom js and css extensions.

Micmac
Path Finder

Thanks I found the perfect example !

0 Karma

Micmac
Path Finder

Nobody has a workaround, another way to do that ?

Thanks,

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...