Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

SplunkJS and HTML Dashboard

devicenul1
Path Finder
‎06-10-2014 01:48 PM

Trying to build a simple HTML dashboard but there seems to be some foundational thing I'm not understanding. I've created a simple dashboard and converted to HTML, in the editor I've narrowed it down to just this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test HTML | 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" />
</head>
<body>
    <!--
    BEGIN LAYOUT
    This section contains the layout for the dashboard. Splunk uses proprietary
    styles in <div> tags, similar to Bootstrap's grid system.
    -->
    <div class="dashboard-body container-fluid main-section-body" data-role="main">
        <div class="span 12 dashboard-header clearfix">
            <h2>test HTML</h2>
        </div>
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                        <div class="panel-head">
                            <p>panel-head</p>
                        </div>
                        <div class="panel-body">
                            <p>panel-body</p>
                            <div class="splunk-view" id="single1"></div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <!--
    END LAYOUT
    -->
    <script type="text/javascript">
      var deps = [
        "splunkjs/mvc",
        "splunkjs/mvc/singleview",
        "splunkjs/mvc/searchmanager"
      ];

      require(deps, function() {
        var SingleView = require("splunkjs/mvc/singleview");
        var SearchManager = require("splunkjs/mvc/searchmanager");

        new SingleView({
            id: "single1",
            managerid: "search1",
            beforeLabel: "count of Events",
            el: $("#single1")
        });

        new SearchManager({
            id: "search1",
            earliest_time: "-15m",
            latest_time: "now",
            search: "index=_internal | stats count"
        });
      });
    </script>
</body>
</html>

But it's just an empty page with just panel-head and panel-body showing up, the styles seem to be all messed up too. I suspect that I must create a new Splunk app and build the dashboards html pages in my custom app. Is that what I'm missing?

What my code is trying to accomplish, a working dashboard (minimal code) using the example code from the Web Framework Toolkit for the SingleView form component.

What I'm trying to accomplish, understanding how to start a Dashboard using a sample / examples from the documentation / web framework toolkit with minimum amount of required code.

Tags (3)
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

nfilippi_splunk
Splunk Employee
Splunk Employee
‎06-11-2014 02:44 PM

What exactly are you trying to do here?

It looks like you took a Simple XML dashboard that included a single value element, and converted that to HTML. Then you modified the HTML page to remove the splunk bar, etc.

What may need clarification here is what you were trying to do.

If I take a Simple XML dashboard (like the one you built here), and convert it to html, it works fine for me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Convert to HTML | 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/build/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
    <!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload">

<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header">
    <div id="placeholder-splunk-bar">
        <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
    </div>
    <div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Convert to HTML</h2>
    </div>
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">

                    <div class="dashboard-element single" id="element1" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

<!-- 
END LAYOUT
-->

<script type="text/javascript">
    function _curTime(){ return new Date().getTime(); }
    var __pageStart = _curTime(), last = __pageStart;
    function __log_perf(type) { var cur = _curTime(); console.log('[PERF] %o in duration=%o ms (sinceLast=%o ms)', type, cur-__pageStart, cur-last); last = cur;  }
    if(window.console && typeof window.console.timeStamp === 'function') { var orig = __log_perf; __log_perf = function(type){ console.timeStamp(type); orig(type); } }
    document.addEventListener('DOMContentLoaded', function(){ __log_perf('DOMContentLoaded'); });
    document.addEventListener('load', function(){ __log_perf('load'); });
</script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
__log_perf('loaded static scripts');
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0 // Disable require.js load timeout
});
__log_perf('configured require');

//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/checkboxview"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        HeaderView,
        FooterView,
        Dashboard,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // CheckboxView
        ) {

        __log_perf('required dependencies');
        $('body').on('loaded', function(){ __log_perf('preload done'); });

        __log_perf('imported dependencies');

        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }
        __log_perf('created submission models');

        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        __log_perf('started search search1');


        //
        // SPLUNK HEADER AND FOOTER
        //

        new HeaderView({
            id: 'header',
            section: 'dashboards',
            el: $('.header'),
            acceleratedAppNav: true,
            useSessionStorageCache: true
        }, {tokens: true}).render();

        new FooterView({
            id: 'footer',
            el: $('.footer')
        }, {tokens: true}).render();


        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body')
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "linkView": "search",
            "drilldown": "none",
            "beforeLabel": "count of Events",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true}).render();
        __log_perf('initialized element element1');

        __log_perf('initialized components');

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
</script>
</body>
</html>

View solution in original post

Reply
Solved! Jump to solution
Solution

nfilippi_splunk
Splunk Employee
Splunk Employee
‎06-11-2014 02:44 PM

What exactly are you trying to do here?

It looks like you took a Simple XML dashboard that included a single value element, and converted that to HTML. Then you modified the HTML page to remove the splunk bar, etc.

What may need clarification here is what you were trying to do.

If I take a Simple XML dashboard (like the one you built here), and convert it to html, it works fine for me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Convert to HTML | 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/build/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
    <!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload">

<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header">
    <div id="placeholder-splunk-bar">
        <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
    </div>
    <div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Convert to HTML</h2>
    </div>
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">

                    <div class="dashboard-element single" id="element1" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

<!-- 
END LAYOUT
-->

<script type="text/javascript">
    function _curTime(){ return new Date().getTime(); }
    var __pageStart = _curTime(), last = __pageStart;
    function __log_perf(type) { var cur = _curTime(); console.log('[PERF] %o in duration=%o ms (sinceLast=%o ms)', type, cur-__pageStart, cur-last); last = cur;  }
    if(window.console && typeof window.console.timeStamp === 'function') { var orig = __log_perf; __log_perf = function(type){ console.timeStamp(type); orig(type); } }
    document.addEventListener('DOMContentLoaded', function(){ __log_perf('DOMContentLoaded'); });
    document.addEventListener('load', function(){ __log_perf('load'); });
</script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
__log_perf('loaded static scripts');
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0 // Disable require.js load timeout
});
__log_perf('configured require');

//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/checkboxview"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        HeaderView,
        FooterView,
        Dashboard,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // CheckboxView
        ) {

        __log_perf('required dependencies');
        $('body').on('loaded', function(){ __log_perf('preload done'); });

        __log_perf('imported dependencies');

        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }
        __log_perf('created submission models');

        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        __log_perf('started search search1');


        //
        // SPLUNK HEADER AND FOOTER
        //

        new HeaderView({
            id: 'header',
            section: 'dashboards',
            el: $('.header'),
            acceleratedAppNav: true,
            useSessionStorageCache: true
        }, {tokens: true}).render();

        new FooterView({
            id: 'footer',
            el: $('.footer')
        }, {tokens: true}).render();


        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body')
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "linkView": "search",
            "drilldown": "none",
            "beforeLabel": "count of Events",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true}).render();
        __log_perf('initialized element element1');

        __log_perf('initialized components');

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
</script>
</body>
</html>
Reply
Solved! Jump to solution

devicenul1
Path Finder
‎06-13-2014 10:42 AM

I'm going to mark this as the answer as I think you were trying to get across the concept that you can't use SplunkJS within splunk. It's an additional component you download and wire for your own web apps. I was assuming (Since the documentation between the web framework and SplunkJS link to each other) that they were all useable inside Splunk. This would be the foundational thing I wasn't understanding.

0 Karma
Reply
Solved! Jump to solution

devicenul1
Path Finder
‎06-13-2014 06:01 AM

did that make it a bit more clear? something still not making sense?

0 Karma
Reply
Solved! Jump to solution

devicenul1
Path Finder
‎06-12-2014 05:49 AM

I added a bit more clarification to what I'm trying to accomplish to my post above. I feel like there is a foundational thing here I'm not understanding and to me the documentation isn't making clear.

I did start with a simple XML dashboard and converted to HTML. But like your example above, that is a lot of javascript for just a one SingleView component. Is it all necessary? I can't strip out all that unnecessary stuff, keep jus the CSS files, follow the dashboards style guide and use SplunkJS example code?

I know it's something I'm missing, I just don't know what it is.

0 Karma
Reply
Solved! Jump to solution

devicenul1
Path Finder
‎06-11-2014 01:37 PM

http://www.youtube.com/watch?v=f4zyjLyBp64

0 Karma
Reply
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

December 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...