Dashboards & Visualizations

How to Provide Right click Menu option(Context Menu) from the Chart Drill Down to launch another dashboard Dynamically

basilarockiaedw
Path Finder

Our requirement is to launch two dashboards from the main dashboard chart based on the user selection in the drill level.As of now we are able to launch only one dashboard from the chart drill of Main Dashboard. Possibly what we need is like on right clicking the main Dashboard chart would populate the context menu which let the user to select which dashboard he/she would like to navigate.

Any help on this is highly appreciated.

0 Karma

daymauler
Explorer

This worked for me. Thanks

niketn
Legend

@daymauler if this worked do up vote the answer! 🙂

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

niketn
Legend

@basilarockiaedwin1 @amat @sumangala this has always been a back-burner for me and did not dedicate time to solve this Use Case. Please refer to my recent answer using Modal PopUp as drilldown context menu with Run anywhere example:

https://answers.splunk.com/answers/699512/drilldown-submenu.html

alt text

PS: Although I am attaching a code below to add bootstrap context menu using Simple XML JS extension, as stated above this can not be attached with table drilldown, hence will not work. Please refer to above answer for actual working solution using modal popup.

alt text

Following is the run anywhere Dashboard example.

<dashboard script="table_with_contextmenu.js">
  <label>Table Drilldown Submenu Bootstrap Context Menu</label>
  <row>
    <panel>
      <table id="tableWithContextMenu">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by component limit=5 useother=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
      <html>
        <div class="dropdown-menu dropdown-menu-sm" id="context-menu">
          <a class="dropdown-item" target="_blank" href="https://www.google.com/search?q=$tokComponent|u$">Google</a>
          <a class="dropdown-item" target="_blank" href="https://answers.splunk.com/search.html?q=$tokComponent$n&amp;type=question">Splunk Answers</a>
        </div>        
      </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript code (table_with_contextmenu.js):

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

    $("#tableWithContextMenu").on("contextmenu", function(e) {
        console.log("Context Menu. e:",e);
        var top = e.pageY - 540;
        var left = e.pageX + 100;
        $("#context-menu").css({
          display: "grid",
          top: top,
          left: left
        }).addClass("show");
        return false; //blocks default Webbrowser right click menu
      }).on("click", function() {
        $("#context-menu").removeClass("show").hide();
      });

      $("#context-menu a").on("click", function() {
        $(this).parent().removeClass("show").hide();
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sarvesh_11
Communicator

Do visualization change in right click requires, some more changes in js?

Like i am trying right click on status indicator visualisation, but that's not happening, i mean no right click option is happening.
THough i have changed viz id="tableWithContextMenu" but type would remain status_indicator_app.status_indicator.

Please guide me if any more changes are to be made?

0 Karma

niketn
Legend

@sarvesh_11 I have already answered this on similar lines (https://answers.splunk.com/answers/757191/is-there-something-called-doubleclick-in-splunk-da.html). Do up vote the answer if it helped.

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

sumangala
Path Finder

Hi Amat,

There is no documentation for Context menu creation in Splunk doc. You need to create context menu via bootstrap-contextmenu.js library.
There is nothing needs to install bootstrap. You just need to import library like <script type="text/javascript" src="path to /bootstrap-contextmenu.js"></script>. Here your dashboard XML code needs to be converted to HTML code, so that we can customize the Splunk dashboard.

0 Karma

amat
Explorer

Ok, thanks @sumangala . Is there any modifications i need to do in the js ? Do i need to make it splunk usable or is it ready to go straight out of the box and just change the menu in the script?

0 Karma

amat
Explorer

Is it possible to do with simple xml? I was reading at http://dev.splunk.com/view/SP-CAAAE25#Addingcode:usingJavaScriptandSearchProcessingLanguage-Attachin...

that its possible, but i couldnt get it to work. I put the appropriate files in the appserver too and specified the scripts in the simple xml.

0 Karma

sumangala
Path Finder

Yeah, you can use a separate .js and .css file and import into.xml file for other cases. But in case of context menu creation required to add some <li> tags on a dashboard, which can not be done in a .xml dashboard.
That's the reason you need to convert your XML dashboard to HTML.

Then try to add context menu library to create a context menu on Splunk drilldown.

0 Karma

niketn
Legend

@sumangala html elements can be added to Simple XML dashboard using <html> panels inside the <panel> node. Then all <html> tags can be added like <div>, <p>, <ul>, <li> etc. PS: <body> can not be added. Consider starting from <div> element as container within html panel.

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

sumangala
Path Finder

@niketnilay,
Yeah, we can add simple html tags to the xml file. But we can not link event call to html tags or some of other advance functionality. Customization of Splunk dashboard can better done in html than xml code.

0 Karma

niketn
Legend

@sumangala I would disagree. This kind of customization is exactly what Simple XML JS and CSS extension supports. Using the Extensions is particularly useful for keeping the dashboard as Simple XML and not to loose existing dashboard behavior as several new features like <init> section for dashboards, table cell coloring by Simple XML configuration etc are not available in html dashboards.

I have added an approach below to add context menu to Simple XML dashboard using Simple XML JS extension. However, for this particular use case that is not the right approach as Right click on table cell will not retrieve the table drilldown values to be used in context menu. Please refer to my alternate solution to use modal popup instead of context menu.

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

sumangala
Path Finder

Hi Johnansett,
Yes, you can trigger context menu for geostats map for on click event.

0 Karma

sumangala
Path Finder

Yes,
U can add context menu splunk table with the help of bootstrap library.

alt text

0 Karma

amat
Explorer

Hey sumangala,

How did you do this exactly? I cant find any documentation on how to install bootstrap and create the context menu

0 Karma

johnansett
Communicator

Hey sumangala, is it possible to use the bootstrap library to provide a context menu to a geostats map visualisation?

0 Karma

niketn
Legend

Click event with a context menu seems a lot of JS code to me.

Since your use case seems like user would launch to either Dashboard 1 or Dashboard 2, can you add a radio button with both dashboard names and on Chart drilldown event pass on the selected dashboard name?

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

basilarockiaedw
Path Finder

Thanks for the respone,I can achieve the functionality by adding a radio button. Just curious to know in splunk do we have an option to accommodate the context menu in drill down.

Thanks,
Basil

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...