Dashboards & Visualizations

Is it possible to have a drill down submenu on a dashboard table in Splunk 7?

Explorer

Is it possible to have a drill down submenu on dashboard table in Splunk 7?

The Intended behavior is when a user clicks on a table, he/she will be displayed a submenu with a couple of options. Only after a second click, the user will navigate away to a chosen drill down.

0 Karma
1 Solution

SplunkTrust
SplunkTrust

@goran_epl, you can try Modal Pop-up on drilldown of Table. Please try the following run anywhere example based on Splunk's _internal index where table depicts top Splunkd errors by component over time. On table drilldown the Component name is picked up from clicked table column name and passed on to Google Search Or Splunk Answers Search depending on User's selection in modal popup. While the search opens in new window the Modal Pop up is closed on Modal drilldown Selection and also on click of Close button (through Simple XML JS Extension).

Please try out and confirm!

alt text

Following is the Simple XML Dashboard code for run anywhere example:

<dashboard script="table_with_modal_drilldown.js">
  <label>Table Context menu with Modal Window</label>
  <init>
    <set token="tokHideShow">hide fade</set>
  </init>
  <row>
    <panel>
      <table id="tableWithModalPopuUp">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| timechart count by component useother=f where max in top5</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="tokHideShow">show</set>
          <set token="tokComponent">$click.name2$</set>
        </drilldown>
      </table>
      <html>
        <style>
          div.modal#modalTableDrilldown{
              background:transparent !important;
              width:400px !important;
              opacity:.85 !important;
          }
          #modalTableDrilldown div.modal-header{
              background: #6d9e34 !important;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              padding:15px !important;
          }
          #modalTableDrilldown .modal-header h3{
              text-align: center;
              color: white;
          }
          #modalTableDrilldown .modal-body{
              display:grid;
              background: white;
              padding-top: 20px;
          }
          #modalTableDrilldown  .modal-footer{
              padding: 10px 20px 10px 10px;
          }
        </style>
        <div class="modal $tokHideShow$" id="modalTableDrilldown">
        <div class="modal-header">
            <h3>Drilldown action for $tokComponent$</h3>
        </div>
        <div class="modal-body" style="display:grid;">
            <a id="modalDrilldownSplunkAnswers" class="modal-drilldown" target="_blank" href="https://answers.splunk.com/search.html?q=$tokComponent|u$n&amp;type=question">Splunk Answers</a>
            <a id="modalDrilldownGoogle" class="modal-drilldown" target="_blank" href="https://www.google.com/search?q=$tokComponent|u$">Google</a>
        </div>
        <div class="modal-footer">
            <a id="modalDrilldownWindowClose" href="#" class="btn modal-close">Close</a>
        </div>
        </div>        
      </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file table_with_modal_drilldown.js to Close the Modal Pop Up on click of any Link/Close button on Modal popup. Place the JS file in respective Splunk App's appserver/static folder and bump/refresh/restart Splunk as required.

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($, _, mvc) {
    defaultTokenModel = mvc.Components.get("default");
    // All anchor tags close the Modal Pop Up
    $(document).on("click","#modalTableDrilldown a", function () {
        defaultTokenModel.set("tokHideShow", "hide fade");
    });
    // On click of table cell get Table Width and adjust Modal PopUp size
    $(document).on("click","#tableWithModalPopuUp table tbody tr td", function(e){
        // viewWidth stores Table Width
        var viewWidth=e.view.innerWidth;
        // Show modal pop-up a bit below the current cell.
        var top = e.pageY+10;
        var left = e.pageX;
        //Adjust position when clicking extreme left side of the table. Modal window has width 400.
        if(left<400){
            left=left+400;
        }
        //Adjust position when clicking extreme right side of the table. Modal window has width 400.
        if(left+200>viewWidth){
            left=viewWidth-200;
        }
        $("#modalTableDrilldown").css({
            top: top,
            left: left
        });
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Splunk Employee
Splunk Employee

hi @goran_epl

Did the answer below solve your problem? If so, please resolve this post by approving it! If your problem is still not solved, keep us updated so that someone else can help ya. Thanks for posting!

0 Karma

SplunkTrust
SplunkTrust

@goran_epl, you can try Modal Pop-up on drilldown of Table. Please try the following run anywhere example based on Splunk's _internal index where table depicts top Splunkd errors by component over time. On table drilldown the Component name is picked up from clicked table column name and passed on to Google Search Or Splunk Answers Search depending on User's selection in modal popup. While the search opens in new window the Modal Pop up is closed on Modal drilldown Selection and also on click of Close button (through Simple XML JS Extension).

Please try out and confirm!

alt text

Following is the Simple XML Dashboard code for run anywhere example:

<dashboard script="table_with_modal_drilldown.js">
  <label>Table Context menu with Modal Window</label>
  <init>
    <set token="tokHideShow">hide fade</set>
  </init>
  <row>
    <panel>
      <table id="tableWithModalPopuUp">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| timechart count by component useother=f where max in top5</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="tokHideShow">show</set>
          <set token="tokComponent">$click.name2$</set>
        </drilldown>
      </table>
      <html>
        <style>
          div.modal#modalTableDrilldown{
              background:transparent !important;
              width:400px !important;
              opacity:.85 !important;
          }
          #modalTableDrilldown div.modal-header{
              background: #6d9e34 !important;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              padding:15px !important;
          }
          #modalTableDrilldown .modal-header h3{
              text-align: center;
              color: white;
          }
          #modalTableDrilldown .modal-body{
              display:grid;
              background: white;
              padding-top: 20px;
          }
          #modalTableDrilldown  .modal-footer{
              padding: 10px 20px 10px 10px;
          }
        </style>
        <div class="modal $tokHideShow$" id="modalTableDrilldown">
        <div class="modal-header">
            <h3>Drilldown action for $tokComponent$</h3>
        </div>
        <div class="modal-body" style="display:grid;">
            <a id="modalDrilldownSplunkAnswers" class="modal-drilldown" target="_blank" href="https://answers.splunk.com/search.html?q=$tokComponent|u$n&amp;type=question">Splunk Answers</a>
            <a id="modalDrilldownGoogle" class="modal-drilldown" target="_blank" href="https://www.google.com/search?q=$tokComponent|u$">Google</a>
        </div>
        <div class="modal-footer">
            <a id="modalDrilldownWindowClose" href="#" class="btn modal-close">Close</a>
        </div>
        </div>        
      </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file table_with_modal_drilldown.js to Close the Modal Pop Up on click of any Link/Close button on Modal popup. Place the JS file in respective Splunk App's appserver/static folder and bump/refresh/restart Splunk as required.

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($, _, mvc) {
    defaultTokenModel = mvc.Components.get("default");
    // All anchor tags close the Modal Pop Up
    $(document).on("click","#modalTableDrilldown a", function () {
        defaultTokenModel.set("tokHideShow", "hide fade");
    });
    // On click of table cell get Table Width and adjust Modal PopUp size
    $(document).on("click","#tableWithModalPopuUp table tbody tr td", function(e){
        // viewWidth stores Table Width
        var viewWidth=e.view.innerWidth;
        // Show modal pop-up a bit below the current cell.
        var top = e.pageY+10;
        var left = e.pageX;
        //Adjust position when clicking extreme left side of the table. Modal window has width 400.
        if(left<400){
            left=left+400;
        }
        //Adjust position when clicking extreme right side of the table. Modal window has width 400.
        if(left+200>viewWidth){
            left=viewWidth-200;
        }
        $("#modalTableDrilldown").css({
            top: top,
            left: left
        });
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

SplunkTrust
SplunkTrust

Added answer to enable Dragging of Modal Popup using jQueryUI draggable() event: https://answers.splunk.com/answers/747524/draggable-modal-context-pop-up.html?childToView=747145#ans...

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