Solved: Is there something called Doubleclick in Splunk Da...

sarvesh_11 · ‎07-10-2019

Hey Splunkers,
@skalliger @DavidHourani ,

We have drilldown in Splunk Dashboard, like when we click on lets say a status indicator, it navigates us to a different panel or URL etc.
Likewise, is there something called doubleclick ?
Like you doubleclick on indicator so you will be navigated to different panel rather than which is appearing on 1st click.

TIA

niketn · ‎07-11-2019

@sarvesh_11 , yes I mentioned two options.

Option 1) Use dblclick event handler through JavaScript for Status Indicator.
Option 2) Use right click to get Context menu on Status Indicator through which you can give users option to Select Panel 1 or Panel 2. Similar Solution using Table visualization and Modal Pop-up has been provided in one of my older answer: https://answers.splunk.com/answers/699512/is-it-possible-to-have-a-drill-down-submenu-on-a-d.html

Please find below run anywhere example for Option 1 above

alt text

Following is Simple XML Dashboard Code:

<dashboard script="status_indicator_click_handler.js">
  <label>Status Indicator Click and Double Click</label>
  <row>
    <panel>
      <viz id="st_ind_results" type="status_indicator_app.status_indicator">
        <search>
          <query>|  makeresults
|  fields - _time
|  eval data="test",value="30",color="#f8be34",icon="times-circle"
|  table value icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">150</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">warning</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#f8be34</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row depends="$tokSingleClick$">
    <panel>
      <title>Panel 1</title>
      <html>
        <div>Single Click</div>
      </html>
    </panel>
  </row>
  <row depends="$tokDoubleClick$">
    <panel>
      <title>Panel 2</title>
      <html>
        <div>Double Click</div>
      </html>
    </panel>
  </row>
</dashboard>

Following is underlying JavaScript file status_indicator_click_handler.js, which needs to be placed under you Splunk app's appserver/static folder.

require(["jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {
    var submittedTokenModel = mvc.Components.get("submitted");
    var defaultTokenModel = mvc.Components.get("default");
    $(document).on("dblclick", "#st_ind_results", function () {
        console.log("Inside Double Click Handler");
        defaultTokenModel.set("tokDoubleClick", "true");
        submittedTokenModel.set("tokDoubleClick", "true");
        defaultTokenModel.unset("tokSingleClick");
        submittedTokenModel.unset("tokSingleClick");
    });
    $(document).on("click", "#st_ind_results", function () {
        console.log("Inside Single Click Handler");
        defaultTokenModel.set("tokSingleClick", "true");
        submittedTokenModel.set("tokSingleClick", "true");
        defaultTokenModel.unset("tokDoubleClick");
        submittedTokenModel.unset("tokDoubleClick");
    });
});

PS: Double Click will also invoke single click two times, hence unset of tokens as toggle between single click and double click is required.

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

View solution in original post

niketn · ‎07-11-2019

@sarvesh_11 , yes I mentioned two options.

Option 1) Use dblclick event handler through JavaScript for Status Indicator.
Option 2) Use right click to get Context menu on Status Indicator through which you can give users option to Select Panel 1 or Panel 2. Similar Solution using Table visualization and Modal Pop-up has been provided in one of my older answer: https://answers.splunk.com/answers/699512/is-it-possible-to-have-a-drill-down-submenu-on-a-d.html

Please find below run anywhere example for Option 1 above

alt text

Following is Simple XML Dashboard Code:

<dashboard script="status_indicator_click_handler.js">
  <label>Status Indicator Click and Double Click</label>
  <row>
    <panel>
      <viz id="st_ind_results" type="status_indicator_app.status_indicator">
        <search>
          <query>|  makeresults
|  fields - _time
|  eval data="test",value="30",color="#f8be34",icon="times-circle"
|  table value icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">150</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">warning</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#f8be34</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row depends="$tokSingleClick$">
    <panel>
      <title>Panel 1</title>
      <html>
        <div>Single Click</div>
      </html>
    </panel>
  </row>
  <row depends="$tokDoubleClick$">
    <panel>
      <title>Panel 2</title>
      <html>
        <div>Double Click</div>
      </html>
    </panel>
  </row>
</dashboard>

Following is underlying JavaScript file status_indicator_click_handler.js, which needs to be placed under you Splunk app's appserver/static folder.

require(["jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {
    var submittedTokenModel = mvc.Components.get("submitted");
    var defaultTokenModel = mvc.Components.get("default");
    $(document).on("dblclick", "#st_ind_results", function () {
        console.log("Inside Double Click Handler");
        defaultTokenModel.set("tokDoubleClick", "true");
        submittedTokenModel.set("tokDoubleClick", "true");
        defaultTokenModel.unset("tokSingleClick");
        submittedTokenModel.unset("tokSingleClick");
    });
    $(document).on("click", "#st_ind_results", function () {
        console.log("Inside Single Click Handler");
        defaultTokenModel.set("tokSingleClick", "true");
        submittedTokenModel.set("tokSingleClick", "true");
        defaultTokenModel.unset("tokDoubleClick");
        submittedTokenModel.unset("tokDoubleClick");
    });
});

PS: Double Click will also invoke single click two times, hence unset of tokens as toggle between single click and double click is required.

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

sarvesh_11 · ‎07-11-2019

Hey @niketnilay ,
thanks for your valuable inputs.
But for doubleclick it is opening up the panel, while i have given :

 <panel>
   <html>
      <link target="_blank">https://abc.com</link>
      </html>
      </panel>

it is not triggering the URL rather it is writting in the panel.
I have tried ,
http://www.yahoo.com this also. But it is showing invalid attribute.

niketn · ‎07-15-2019

@sarvesh_11 use window.open() with target=_blank in JavaScript. Refer to older answer for similar use case:

https://answers.splunk.com/answers/471329/is-it-possible-to-drilldown-from-an-status-indicat.html

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

niketn · ‎07-10-2019

@sarvesh_11 Status Indicator requires Simple XML JS extension for you to code drilldown. So in the same place instead of single click you can code double click using jQuery. You can also use Modal Window concept to create Context menu with multiple options on click. Refer to one of my older answer for doing this inside a table: https://answers.splunk.com/answers/699512/is-it-possible-to-have-a-drill-down-submenu-on-a-d.html

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

sarvesh_11 · ‎07-11-2019

Hi @niketnilay ,

are you saying me to use .dblclick() function?
Because my requirement is :
On single click to top panel, bottom panel will open, on double clicking the top panel it will navigate to a different URL.

Is there something called Doubleclick in Splunk Dashboard?

Say goodbye to manually analyzing phishing and malware threats with Splunk Attack ...

AppDynamics is now part of Splunk Ideas

Advanced Splunk Data Management Strategies