Dashboards & Visualizations

Disable drilldown on specific cell in SimpleResultsTable

kjellvis
Engager

Hey,

Is it possible to disable drilldown on a spesific cell or column in a table?

1 Solution

dmillis
Splunk Employee
Splunk Employee

In 6.1, you can disable drilldown on certain table cells in this fashion:

<table>
  <title>Some Table</title>
  <searchString>
    ...
  </searchPostProcess>
  <option name="drilldown">all</option>
  <drilldown>
    <condition field="status">
    </condition>
    <condition field="eventcount">
    </condition>
    <condition field="appname">
      <link>
        this_dashboard?form.Appname=$click.value2$
      </link>
    </condition>
  </drilldown>
</table>

This example would disable drilldown/links to the 'status' and 'eventcount' cells, while allowing drilldown for 'appname'.

Details here

View solution in original post

dmillis
Splunk Employee
Splunk Employee

In 6.1, you can disable drilldown on certain table cells in this fashion:

<table>
  <title>Some Table</title>
  <searchString>
    ...
  </searchPostProcess>
  <option name="drilldown">all</option>
  <drilldown>
    <condition field="status">
    </condition>
    <condition field="eventcount">
    </condition>
    <condition field="appname">
      <link>
        this_dashboard?form.Appname=$click.value2$
      </link>
    </condition>
  </drilldown>
</table>

This example would disable drilldown/links to the 'status' and 'eventcount' cells, while allowing drilldown for 'appname'.

Details here

nick405060
Motivator

This doesn't actually remove the links, it just makes it so when you click them nothing happens. They are still blue and underlined. Having links that look like they are links but are really are non-links is very confusing.

Looking for an ACTUAL way to disable drilldown by column. E.g. make it look like you set drilldown to none. Can't imagine this is an acceptable solution for any front-end developer.

Nextbeat
Path Finder

First use the answer above to disable a column's field:

<table>
    <search>
        <query></query>
    </search>
    <option name="drilldown">all</option>
    <drilldown>
        <!--Disables the click function for the defined field, which directs to the search results-->
        <condition field="<column_name>"></condition>
    </drilldown>
</table>

Then use HTML/CSS code to remove the style.

Before modifying the style within the SimpleXML editor for the dashboard (Edit > Edit Source XML):
1. Disable the field by using the example above.
2. Right click on a disabled field value.
3. Click on Inspect/Inspect Element (this should bring up the style for that field) and this should open up Developer Tools.
4. Click on the field that you are inspecting and this should bring up the CSS code that needs to be modified (if you didn't disable the field in step 1, you may be redirected to the search results).
5. Under Rules/Styles you should see something similar to (notice the word hover😞
.element1 .element2:hover {
color: #3863a0;
text-decoration: underline;
cursor: pointer;
}

6. Note the elements that are listed because you are going to use them.
7. Add HTML/CSS code to remove the style using the information from step 6.

Here's an example to remove the links for time from a list display table:

<panel>
    /* Add a dependency so that it won't be displayed in the dashboard */
    <html depends="$hiddenForCSS$">
        <style>
        .shared-eventsviewer .formated-time:hover {
        /* Change from blue (#3863a0) to black */
        color: #000 !important;
        /*  Remove underline effect whenever mouse hovers above field */
        text-decoration: none !important;
        /* Change cursor effect from pointer to text */
        cursor: text !important;
        }
        </style>
    </html>
</panel>

View this answer for making a global change that'll affect every dashboard:
https://answers.splunk.com/answers/330361/how-to-apply-custom-css-to-a-dashboard.html

nick405060
Motivator

@Nextbeat Errr... how exactly are you supposed to do this for a table? I followed your directions exactly, and this is what I see. Zero field name mentioned.

element.style {
}
<style>
.results-table {
    overflow-x: auto;
    position: relative;
    width: 100%;
}
user agent stylesheet
div {
    display: block;
}
.main-section-body {
    color: #3c444d;
    min-height: 500px;
}
body {
    margin: 0;
    background: #f2f4f5;
    color: #3c444d;
    min-width: 960px;
    font-family: Splunk Platform Sans,Proxima Nova,Roboto,Droid,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    transition: margin .2s;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
0 Karma

Nextbeat
Path Finder

You only see the hover code if you place the mouse above the desired field and don't click on it. I had to use the screenshot key to capture the code. Here's another example:

<dashboard theme="dark">
  <label>Test</label>
  <row>
    <panel>
      <title>Test</title>
      <table>
        <search>
          <query>sourcetype="WinEventLog:Security" | table _time ComputerName Account_Name EventCode</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">all</option>
        <drilldown>
          <!--Disables the click function for the defined field, which directs to the search results-->
          <condition field="ComputerName"></condition>
        </drilldown>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    <panel>
     /* Add a dependency so that it won't be displayed in the dashboard */
     <html depends="$hiddenForCSS$">
         <style>
         td.string.highlighted:hover {
         /* Change from blue (#006ea) to black */
         color: #000 !important;
         /*  Remove underline effect whenever mouse hovers above field */
         text-decoration: none !important;
         /* Change cursor effect from pointer to text */
         cursor: text !important;
         }
         </style>
     </html>
    </panel>
  </row>
</dashboard>
0 Karma

Nextbeat
Path Finder

Here's a snippet of what I captured and used for the code:

Example Code

Here's a screenshot of what it looks like before and after:

Before

After

0 Karma

mgranger1
Path Finder

@Nextbeat ,

I've just found this post, and I'm having a heck of a time.  I think I found the appropriate "hover" element locator.  It reads ".table-drilldown>tbody>tr>td, .table-drilldown>tbody>tr>td:hover{...}"

However, when I implement your code with that locator, it doesn't seem to do anything.  Additionally, I'd love to see the images that you posted as an answer to this question, but the images aren't displaying and aren'tlinked to anything.  I have attempted to put the following into my simple xml, but it seems to have no effect:

<row>
<panel>/* Add a dependency so that it won't be displayed in the dashboard */<html depends="$hiddenForCSS$">
<style>
.table-drilldown>tbody>tr>td,.table-drilldown>tbody>tr>td:hover {
/* Change from blue (#3863a0) to black */
color: #000 !important;
/* Remove underline effect whenever mouse hovers above field */
text-decoration: none !important;
/* Change cursor effect from pointer to text */
cursor: text !important;
}

 

I'm also puzzled by the fact that it seems that ALL of the items in the result table seem to  use the same element locator (unless I'm looking in the wrong spot).


Any help or suggestions would be VERY appreciated.

Sincerely,

Matthew Granger

 

 

0 Karma

Nextbeat
Path Finder

@mgranger1 it didn't work because the specific element needed to be used.  I started by clicking on the Select an element in the page to inspect it DevTool (F12) feature and clicked on a _time value.  For this example, the element was .table-drilldown>tbody>tr>td:hover { (*Hint* Highlight the field, once the desired hover element appears, right click the field, highlight the element reference, and you'll be able to copy it before disappearing). 

Hover colorHover color

To get it to work, I didn't include the whole reference, but only entered td:hover { (notice #test was added and will be explained below). 

Hover color overwrittenHover color overwritten

You would redo the process for the highlighted element to change the cursor.

Highlight cursorHighlight cursor

Here is what both changes looked like after editing the XML (notice the cursor highlighted on the right):

Highlight cursor overwrittenHighlight cursor overwritten

The text color was changed to black, and the cursor was set to text.  Now that you've seen the element style changes, let's take a look at the code.  First I should mention adding a panel ID to prevent unwanted changes to the dashboard.  Then use this ID along with the mentioned element above, so under <row><panel><html depends="$hiddenForCSS$"><style> I added #test td:hover {.  After that, I added the desired style changes color: #000 and 
cursor: text.  To make sure these modifications would take effect, at the end I added !important; to each of the lines.  Finally, I ended the section with } </style></html></panel></row>.

XML CodeXML Code

0 Karma

_gkollias
Builder

This was very helpful! Thanks a lot.

0 Karma

kmartine
Engager

Exactly my question, and a simple one. Why no answer?
I have:

  <row>
    <table>
      <searchString>table flow,subflow,status,error,logfile | sort flow,utc_time</searchString>
      <drilldown>
          <link field="logfile">
          <![CDATA[
          h t t p ://my-url?param=$row.logfile$
          ]]>
          </link>
      </drilldown>
    </table>
  </row>

This results in the logfile cell linking to my url, but other cells bring up the splunk search results which I don't want my users to see. I want those other cells to not be clickable.

I tried:

<option name="drilldown">none</option>

but that completely disables the drilldown.

Nextbeat
Path Finder

Sorry replying to an old post. Use the following:

 <table>
     <search>
         <query></query>
     </search>
     <option name="drilldown">all</option>
     <drilldown>
         <!--Disables the action that brings up the search results for the whole table-->
         <condition value="unused"></condition>
     </drilldown>
 </table>

Now you can define specific click functions without worrying about the default action. Just make sure that you place any other conditions above this one.

0 Karma
Get Updates on the Splunk Community!

.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 ...

Introducing the 2024 SplunkTrust!

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