Dashboards & Visualizations

How can I use drilldown in one cell and hide the mouse cursor in the table?

evinasco
Communicator

Hi team,

I need your help with my doubts about mouse cursor over table:

I am currently working with drilldown on table, I enabled the drilldown option mode cell. I just need to use drilldown in one cell, but splunk enabled drilldown for all cells, I used this tag <condition field="field"></condition> to disable drilldown search link in some cells. However, I need to hide the mouse cursor and disable the blue color link over these cells.

alt text

In the example, I just need to see the mouse cursor and the blue color link over the value of the column Slot.

Does someone know how can I do that?

Regards

Tags (2)
1 Solution

niketn
Legend

@evinasco, you can do this through CSS Override. I have answered similar question in past but am unable to find it now. So try something like the following, where table in your dashboard has id tableWithDrilldown i.e. <table id="tableWithDrilldown">.

This is depended on the column number where CSS override needs to be applied. In the following example it is the first column. So the selector is td:nth-child(1). You can change position from 1 to something else if required.

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithDrilldown table tbody tr td:nth-child(1){
            cursor: default !important;
            color: black !important;
          }
        </style>
      </html>
    </panel>
  </row>

Following is a run anywhere Dashboard Example. Please try out and confirm:

<dashboard>
  <label>Table Column Hide Cursor Pointer</label>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithDrilldown table tbody tr td:nth-child(1){
            cursor: default !important;
            color: black !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="tableWithDrilldown">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count span=1d
| eval Time=strftime(_time,"%Y/%m/%d")
| table Time count</query>
          <earliest>-7d@d</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <condition field="count">
            <set token="tokClickedValue">$click.value2$</set>
            <set token="tokClickedName">$click.name2$</set>
          </condition>
          <condition>
            <!-- No Action if Time Column is clicked-->
          </condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@evinasco, you can do this through CSS Override. I have answered similar question in past but am unable to find it now. So try something like the following, where table in your dashboard has id tableWithDrilldown i.e. <table id="tableWithDrilldown">.

This is depended on the column number where CSS override needs to be applied. In the following example it is the first column. So the selector is td:nth-child(1). You can change position from 1 to something else if required.

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithDrilldown table tbody tr td:nth-child(1){
            cursor: default !important;
            color: black !important;
          }
        </style>
      </html>
    </panel>
  </row>

Following is a run anywhere Dashboard Example. Please try out and confirm:

<dashboard>
  <label>Table Column Hide Cursor Pointer</label>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithDrilldown table tbody tr td:nth-child(1){
            cursor: default !important;
            color: black !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="tableWithDrilldown">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count span=1d
| eval Time=strftime(_time,"%Y/%m/%d")
| table Time count</query>
          <earliest>-7d@d</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <condition field="count">
            <set token="tokClickedValue">$click.value2$</set>
            <set token="tokClickedName">$click.name2$</set>
          </condition>
          <condition>
            <!-- No Action if Time Column is clicked-->
          </condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

evinasco
Communicator

hi niketnilay,

you are the best, that was an excellent answers for my doubt, i have the last question about it, how can i apply that style when i have several table with differents number of columns

Regards,

0 Karma

niketn
Legend

@evinasco, you have following two options to make CSS Selectors more generic:

Option 1 ) Take out ID part of CSS Selector #tableWithDrilldown, to make the same setting apply to all tables in the dashboard.

Option 2) If you have a dashboard with set of tables for which this change should be applied and a set of table for which it should not be applied, you can have table IDs which are similar with separate number suffixed (you can actually have prefx as well) i.e. #tableWithDrilldown1, #tableWithDrilldown2 ##tableWithDrilldown3 etc and then in your selected use a pattern for ID starting with #tableWithDrilldown i.e. div[id^="tableWithDrilldown"]

div[id^="tableWithDrilldown"] table tbody tr td:nth-child(1){
       ....
       ....
}

For understanding CSS Selectors you should refer to the following link: https://www.w3schools.com/cssref/css_selectors.asp

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

evinasco
Communicator

@ niketnilay that worked really good, thanks newly for your help

Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...