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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...