Embedding HTML dashboard into XML dashboard

pgadhari — Sun, 21 Jul 2019 05:18:45 GMT

I have a HTML dashboard which I created using Images. Now, I want to show that dashboard in my XML dashboard in the same app, where my XML dashboard is there.

My XML dashboard has 3 tabs, and I have to create the 4th tab (using tabs.js) and want to show the HTML dashboard in that. How can I achieve this ? Attaching the screenshot for the reference.

Basically, my HTML dashboard is created based on my below question asked :

https://answers.splunk.com/answers/757986/how-to-drilldown-from-panel-having-image-to-other.html

Re: Embedding HTML dashboard into XML dashboard

niketn — Sun, 21 Jul 2019 05:34:52 GMT

@pgadhari seems like what you have done with html dashboard can also be done with Simple XML. Any specific reason for choosing html dashboard?

If you keep panels to Simple XML you can also implment tabs in Splunk Dashboard using Simple XML JS/CSS extension.

Re: Embedding HTML dashboard into XML dashboard

pgadhari — Sun, 21 Jul 2019 05:38:57 GMT

@niketnilay - I was not sure of whether it can be done with simple XML. I got the answer that I need to convert the dashboard to HTML and then use the show & hide function to show the panels based on the clicks. Can you show me how it can be done with simple XML ?

Please go through my previous question:

https://answers.splunk.com/answers/757986/how-to-drilldown-from-panel-having-image-to-other.html

Re: Embedding HTML dashboard into XML dashboard

niketn — Sun, 21 Jul 2019 10:49:45 GMT

@pgadhari try something like the following run anywhere example. I have kept this simple for explanation so you can improve the JS to have a loop for setting and un-setting tokens.

The Simple XML Dashboard has images ( <img> ) inside <html> <panel>. The jQuery selector is used to identify the image clicked in Simple XML JS Extension and using SplunkJS stack it is used set/unset the required token/s.

Following is the Simple XML Dashboard code

<dashboard script="image_click_handler.js">
  <label>Panel with image for drilldown</label>
  <init>
    <set token="tokImgSrc">http://pngimg.com/uploads/server/server_PNG46.png</set>
    <set token="tokImgDtlSrc">https://www.groundreport.com/wp-content/uploads/2017/02/server-rack-colocation1.png</set>
  </init>
  <row>
    <panel id="html_panel1">
      <title>Panel 1</title>
      <html>
        <div style="display: flex;justify-content: center;">
          <div>
            <title>Panel 1</title>
          </div>
          <div>
            <img id="html_img1" class="click-image" style="height: 150px;cursor:pointer;" src="$tokImgSrc$"/>
          </div>
        </div>
      </html>
    </panel>
    <panel id="html_panel2">
      <title>Panel 2</title>
      <html>
        <div style="display: flex;justify-content: center;">
          <div>
            <title>Panel 2</title>
          </div>
          <div>
            <img id="html_img2" class="click-image" style="height: 150px;cursor:pointer;" src="$tokImgSrc$"/>
          </div>
        </div>
      </html>
    </panel>
    <panel id="html_panel3">
      <title>Panel 3</title>
      <html>
        <div style="display: flex;justify-content: center;">
          <div>
            <title>Panel 3</title>
          </div>
          <div>
            <img id="html_img3" class="click-image" style="height: 150px;cursor:pointer;" src="$tokImgSrc$"/>
          </div>
        </div>
      </html>
    </panel>
    <panel id="html_panel4">
      <title>Panel 4</title>
      <html>
        <div style="display: flex;justify-content: center;">
          <div>
            <title>Panel 4</title>
          </div>
          <div>
            <img id="html_img4" class="click-image" style="height: 150px;cursor:pointer;" src="$tokImgSrc$"/>
          </div>
        </div>
      </html>
    </panel>
    <panel id="html_panel5">
      <title>Panel 5</title>
      <html>
        <div style="display: flex;justify-content: center;">
          <div>
            <title>Panel 5</title>
          </div>
          <div>
            <img id="html_img5" class="click-image" style="height: 150px;cursor:pointer;" src="$tokImgSrc$"/>
          </div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <div style="float:right">
          <a target="_blank" href="http://pngimg.com/download/25954">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$tokHtmlDtlImg1$">
    <panel>
      <title>Panel 1 Detail</title>
      <html>
        <div style="display:flex; justify-content:center;">
          <img style="width: 100%; height:300px" src="$tokImgDtlSrc$"/>
        </div>
      </html>
      <html>
        <div style="float:right;">
          <a target="_blank" href="https://www.groundreport.com/selecting-right-colocation-provider-points-consider">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$tokHtmlDtlImg2$">
    <panel>
      <title>Panel 2 Detail</title>
      <html>
        <div style="display:flex; justify-content:center;">
          <img style="width: 100%; height:300px" src="$tokImgDtlSrc$"/>
        </div>
      </html>
      <html>
        <div style="float:right;">
          <a target="_blank" href="https://www.groundreport.com/selecting-right-colocation-provider-points-consider">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$tokHtmlDtlImg3$">
    <panel>
      <title>Panel 3 Detail</title>
      <html>
        <div style="display:flex; justify-content:center;">
          <img style="width: 100%; height:300px" src="$tokImgDtlSrc$"/>
        </div>
      </html>
      <html>
        <div style="float:right;">
          <a target="_blank" href="https://www.groundreport.com/selecting-right-colocation-provider-points-consider">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$tokHtmlDtlImg4$">
    <panel>
      <title>Panel 4 Detail</title>
      <html>
        <div style="display:flex; justify-content:center;">
          <img style="width: 100%; height:300px" src="$tokImgDtlSrc$"/>
        </div>
      </html>
      <html>
        <div style="float:right;">
          <a target="_blank" href="https://www.groundreport.com/selecting-right-colocation-provider-points-consider">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$tokHtmlDtlImg5$">
    <panel>
      <title>Panel 5 Detail</title>
      <html>
        <div style="display:flex; justify-content:center;">
          <img style="width: 100%; height:300px" src="$tokImgDtlSrc$"/>
        </div>
      </html>
      <html>
        <div style="float:right;">
          <a target="_blank" href="https://www.groundreport.com/selecting-right-colocation-provider-points-consider">This Photo</a> by Unknown Author is licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC</a>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Following is the JS file image_click_handler.js required to enable image click handling to set/unset tokens:

require(["jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {
    console.log("Inside Image Click Handler");
    var submittedTokenModel = mvc.Components.get("submitted");
    var defaultTokenModel = mvc.Components.get("default");
    $(document).on('click', 'div[id^="html_panel"] .click-image', function () {
        console.log("HTML Panel Image clicked");
        var strClickedImgID= $(this).attr("id");
        console.log("strClickedImgID:",strClickedImgID);
        switch (strClickedImgID) {
          case "html_img1":
            defaultTokenModel.set("tokHtmlDtlImg1", "true");
            submittedTokenModel.set("tokHtmlDtlImg1", "true");
            defaultTokenModel.unset("tokHtmlDtlImg2");
            submittedTokenModel.unset("tokHtmlDtlImg2");
            defaultTokenModel.unset("tokHtmlDtlImg3");
            submittedTokenModel.unset("tokHtmlDtlImg3");
            defaultTokenModel.unset("tokHtmlDtlImg4");
            submittedTokenModel.unset("tokHtmlDtlImg4");
            defaultTokenModel.unset("tokHtmlDtlImg5");
            submittedTokenModel.unset("tokHtmlDtlImg5");
            break;
          case "html_img2":
            defaultTokenModel.unset("tokHtmlDtlImg1");
            submittedTokenModel.unset("tokHtmlDtlImg1");
            defaultTokenModel.set("tokHtmlDtlImg2", "true");
            submittedTokenModel.set("tokHtmlDtlImg2", "true");
            defaultTokenModel.unset("tokHtmlDtlImg3");
            submittedTokenModel.unset("tokHtmlDtlImg3");
            defaultTokenModel.unset("tokHtmlDtlImg4");
            submittedTokenModel.unset("tokHtmlDtlImg4");
            defaultTokenModel.unset("tokHtmlDtlImg5");
            submittedTokenModel.unset("tokHtmlDtlImg5");
            break;
          case "html_img3":
            defaultTokenModel.unset("tokHtmlDtlImg1");
            submittedTokenModel.unset("tokHtmlDtlImg1");
            defaultTokenModel.unset("tokHtmlDtlImg2");
            submittedTokenModel.unset("tokHtmlDtlImg2");
            defaultTokenModel.set("tokHtmlDtlImg3", "true");
            submittedTokenModel.set("tokHtmlDtlImg3", "true");
            defaultTokenModel.unset("tokHtmlDtlImg4");
            submittedTokenModel.unset("tokHtmlDtlImg4");
            defaultTokenModel.unset("tokHtmlDtlImg5");
            submittedTokenModel.unset("tokHtmlDtlImg5");
            break;
          case "html_img4":
            defaultTokenModel.unset("tokHtmlDtlImg1");
            submittedTokenModel.unset("tokHtmlDtlImg1");
            defaultTokenModel.unset("tokHtmlDtlImg2");
            submittedTokenModel.unset("tokHtmlDtlImg2");
            defaultTokenModel.unset("tokHtmlDtlImg3");
            submittedTokenModel.unset("tokHtmlDtlImg3");
            defaultTokenModel.set("tokHtmlDtlImg4", "true");
            submittedTokenModel.set("tokHtmlDtlImg4", "true");
            defaultTokenModel.unset("tokHtmlDtlImg5");
            submittedTokenModel.unset("tokHtmlDtlImg5");
            break;
          case "html_img5":
            defaultTokenModel.unset("tokHtmlDtlImg1");
            submittedTokenModel.unset("tokHtmlDtlImg1");
            defaultTokenModel.unset("tokHtmlDtlImg2");
            submittedTokenModel.unset("tokHtmlDtlImg2");
            defaultTokenModel.unset("tokHtmlDtlImg3");
            submittedTokenModel.unset("tokHtmlDtlImg3");
            defaultTokenModel.unset("tokHtmlDtlImg4");
            submittedTokenModel.unset("tokHtmlDtlImg4");
            defaultTokenModel.set("tokHtmlDtlImg5", "true");
            submittedTokenModel.set("tokHtmlDtlImg5", "true");
            break;
          default:
            defaultTokenModel.unset("tokHtmlDtlImg1");
            submittedTokenModel.unset("tokHtmlDtlImg1");
            defaultTokenModel.unset("tokHtmlDtlImg2");
            submittedTokenModel.unset("tokHtmlDtlImg2");
            defaultTokenModel.unset("tokHtmlDtlImg3");
            submittedTokenModel.unset("tokHtmlDtlImg3");
            defaultTokenModel.unset("tokHtmlDtlImg4");
            submittedTokenModel.unset("tokHtmlDtlImg4");
            defaultTokenModel.unset("tokHtmlDtlImg5");
            submittedTokenModel.unset("tokHtmlDtlImg5");
        }
    });
});

Re: Embedding HTML dashboard into XML dashboard

pgadhari — Sun, 21 Jul 2019 11:10:37 GMT

Thanks. I will try this out and revert back.

Re: Embedding HTML dashboard into XML dashboard

niketn — Sat, 11 Apr 2020 13:32:19 GMT

@pgadhari were you able to try the above solution?

Re: Embedding HTML dashboard into XML dashboard

pgadhari — Sat, 11 Apr 2020 18:09:48 GMT

@niketnilay - No, I did not tried it as this project was on hold for sometime. Next week I will try it as I have to kick off this again and it has to be started. Thanks for your support and answer. I will get back in case of any issues. Thanks.

Re: Embedding HTML dashboard into XML dashboard

niketn — Sat, 11 Apr 2020 20:53:43 GMT

@pgadhari also wanted you to check out one of other answers with a Table Tile based approach which is purely Simple XML with CSS override and does not require JS Extension if that is your requirement: https://answers.splunk.com/answers/529004/is-there-a-way-to-display-more-than-20-charts-at-a.html#answer-816673

Re: Embedding HTML dashboard into XML dashboard

pgadhari — Sun, 12 Apr 2020 04:45:13 GMT

@niketnilay - Sure I will check that out.

Re: Embedding HTML dashboard into XML dashboard

niketn — Mon, 20 Apr 2020 18:11:36 GMT

@pgadhari please upvote the other answer if worked for you. Also accept this answer if your issue is resolved! 🙂

Re: Embedding HTML dashboard into XML dashboard

pgadhari — Sat, 25 Apr 2020 10:17:31 GMT

@niketnilay - sure I will accept the answer. Actually, one more thing, I am working on creating new landing page for our splunk environment. Hence, I will need some help on JS and CSS stuff, would request you to extend your help in case i face any issues in that. I will open new question on that shortly.

thanks again for all your support.

topic Re: Embedding HTML dashboard into XML dashboard in Dashboards & Visualizations

Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard

Re: Embedding HTML dashboard into XML dashboard