Solved: How to call prebuilt panel into HTML dashboard ?

pgadhari · ‎07-22-2019

I have designed a landing page using HTML and my navbar menu is created using prebuilt panel. How can I call my prebuilt panel in my HTML dashboard and it should be at the top of the page. Please advise ?

niketn · ‎07-22-2019

@pgadhari refer to one of my older answers where I have implemented this using Pre-built panel: https://answers.splunk.com/answers/595047/can-we-implement-cascading-dropdowns-in-a-dashboar.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn · ‎07-22-2019

@pgadhari refer to one of my older answers where I have implemented this using Pre-built panel: https://answers.splunk.com/answers/595047/can-we-implement-cascading-dropdowns-in-a-dashboar.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-22-2019

Yes, I created my prebuilt panel that time using your above link. But now the problem is, I am working on re-designing my homepage. Previous home page was in XML format, hence calling prebuilt panel was easy. But now, I am using HTML dashboard as landing page and that is where I want to know, how can I directly call prebuilt panel into my HTML page.

Also, I am using the same menu from W3 schools that was specified in your above answers and you helped me to modify the sub-navs from "on-hover" to "on-click"

Actually, I dont want to disturb that menu, and that is why I want to directly call that prebuilt panel into HTML dashboard. Hope you got it ?

pgadhari · ‎07-22-2019

I just had a look at your answers, I think point no. 3 should solve my problem :

Option 3: Use HTML file with CSS Menu and include in the Dashboard panel using src
Similar to Prebuilt Panel an HTML file can be used as a template, however, dependency with static HTML file implies Splunk refresh/restart/bump along with browser cache cleanup for changes to reflect. Since coding effort and template effect is similar to Prebuilt panel which does not require either of these steps, it is better to use option 3.

How can I use html "src" to call the other html file (my menu file) ?

niketn · ‎07-22-2019

@pgadhari provided your html file sits in your Splunk app's appserver/static folder (my_custom_html_file.html in the example below), you can use the following to embed the html file in your Simple XML Dashboard:

 <panel>
    <html src="my_custom_html_file.html">
    </html>
 </panel>

You can check this example in the Splunk Dashboard Examples App from Splunkbase as well.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-22-2019

Actually I have put lot of time in developing my landing page in HTML, hence I am looking for that solution. Hope you got it.

niketn · ‎07-22-2019

Simple XML Dashboard can also allow you to include html file provided it sits in your app's appserver/static folder. Html dashboard can obviously include html file.

If you want to figure out what code from Simple XML need to convert in HTML dashboard, I would say easiest way is to

create a Simple XML with only the code required to be converted to html. For example my code above for including html file.
See if it works in Simple XML, then convert the dashboard to html.
Finally get the code from converted html dashboard and put it in your current html dashboard (if you do not want to get rid of html dashboard in Splunk).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-23-2019

@niketnilay - As of now, I have decided to not put the top menu on landing page. Instead, I have used carousel + CSS for App links on the html home page which is fine for me.

But now, I am facing some strange issues on my home page, when I open the page in laptop screen, the div margins alignment are getting disturbed, and when I open on big screens, somehow the margins are not inline. I know this is different issue, I can open a new question if required ? But need help on fixing this.

I have used margin-left and margin-top to align the div elements and their content. Also, I have a background image in my page, which is displaying the horizontal scroll bar which I have to remove. I have to fix this, tried specifying margin and other options in CSS but not working ? Please advise ?

niketn · ‎07-24-2019

@pgadhari I think the issue that you have at your hand is purly CSS/HTML issue and not necessarily dependent on Splunk at all. For us it would be difficult to assist you setting the correct CSS style. However, if you can post the code that you have currently and post the screenshots of issue you are seeing on small and big screen as a separate question may be it will get the right attention.

Meanwhile do accept this answer if it helped and up vote the comments that you found useful.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-24-2019

Sure, I will open new question for CSS issue with more details. Thanks.

pgadhari · ‎07-22-2019

Sure. I will try this out and revert. Thanks.

niketn · ‎07-22-2019

Cool let me know how it goes. Like I said it would be way easier for you if you stick to Simple XML dashboard.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-22-2019

can I use below to code to call html file in my landing page html ? I will try this out, but whether this will work ?

I took this from "https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file"

pgadhari · ‎07-22-2019

<div data-include="/path/to/include.html"></div>

above code ?

niketn · ‎07-22-2019

Just for your reference, I have converted my existing dashboard in the example above to html dashboard. However, this would just complicate things.
A reference panel in html dashboard looks like the following:

        <div id="mainmenu" class="dashboard-cell referenced-panel" style="width: 100%;" data-panel-ref="splunk_app_custom_main_menu" data-panel-app="search" data-original-id="mainmenu">
            <div class="dashboard-panel clearfix">
            </div>
        </div>

Following is the complete html code for html dashboard generated for the run anywhere example in my previous answer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Multi Level Menu in Splunk HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@D463EDB7A11DFECBDE0E7D4071EBE085CE6A280D74E01AE52A1FF855C556AD57/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/splunkjs-dashboard.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />


        <meta name="referrer" content="never" />
        <meta name="referrer" content="no-referrer" />

          <script>
                window._splunk_metrics_events = {
                   push : function() {},
                   active: false,
                   }
          </script>
    </head>
<body class="simplexml preload locale-en" data-splunk-version="7.3.0" data-splunk-product="enterprise">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<header>
    <a aria-label="Screen reader users, click here to skip the navigation bar" class="navSkip" href="#navSkip" tabIndex="1">Skip Navigation &gt;</a>
    <div class="header splunk-header">
    </div>
    <a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Multi Level Menu in Splunk HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="mainmenu" class="dashboard-cell referenced-panel" style="width: 100%;" data-panel-ref="splunk_app_custom_main_menu" data-panel-app="search" data-original-id="mainmenu">
            <div class="dashboard-panel clearfix">
            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="htmlFiller" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <style>
           #htmlFiller{
             height:500px;
           }
         </style><div style="text-align:center;font-weight:bold;font-size:150%;color:blue;position:absolute;top:250px;left:30%">
           This is a Filler Panel for Demonstration of Menu Overlay on Hover.
         </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
END LAYOUT
-->

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-credentials"></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/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// 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/layoutview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "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/simplexml/element/visualization",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simplexml/searcheventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/linklist",
    "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/tokenforwarder"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        LayoutView,
        Dashboard,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        VisualizationElement,
        FormUtils,
        EventHandler,
        SearchEventHandler,
        DropdownInput,
        RadioGroupInput,
        LinkListInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

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

        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);
        }

        var mainmenu = new PanelRef({
            id: "mainmenu",
            originalId: "mainmenu",
            el: $('#mainmenu')
        }, {tokens: true}).render();

        DashboardController.addReadyDep(mainmenu.load("splunk_app_custom_main_menu", "search"));



        //
        // SEARCH MANAGERS
        //



        //
        // SPLUNK LAYOUT
        //

        $('header').remove();
        new LayoutView({"hideSplunkBar": true, "hideAppBar": true, "hideChrome": false})
            .render()
            .getContainerElement()
            .appendChild($('.dashboard-body')[0]);

        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var htmlFiller = new HtmlElement({
            "id": "htmlFiller",
            "useTokens": true,
            "el": $('#htmlFiller')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(htmlFiller.contentLoaded());

        // 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>

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn · ‎07-22-2019

So again any specific reason for using html dashboard as a landing page? Why not use Simple XML Dashboard with <html> panel or <html> source?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎07-22-2019

I am using some carousels and css tricks to make the landing page more visually good, and hence I found it easy using HTML instead of XML, as in XML I was getting errors regarding some tags. It was easy to setup in HTML.

niketn · ‎07-22-2019

If your final code is complete html code, you can refer to the html code in Simple XML dashboard using <html> panel with source to your html code. You should be able to put html code inside <html> panel directly as well (only thing you would need is to escape XML character like < with < etc. If you get any other community would definitely be able to assist you with these.

On a different note, have you seen Carousel Viz. https://splunkbase.splunk.com/app/4342/?

In one of the cases I have created the Carousel effect using depends and rejects on tokens which would toggle based on time interval selected by User, like 5 sec, 10 sec etc.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

How to call prebuilt panel into HTML dashboard ?

Enterprise Security Content Update (ESCU) | New Releases

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

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