Dashboards & Visualizations

Is there something called Doubleclick in Splunk Dashboard?

sarvesh_11
Communicator

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

0 Karma
1 Solution

niketnilay
Legend

@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

0 Karma

niketnilay
Legend

@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

0 Karma

sarvesh_11
Communicator

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.

0 Karma

niketnilay
Legend

@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!!!"
0 Karma

niketnilay
Legend

@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!!!"
0 Karma

sarvesh_11
Communicator

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.

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!