Getting Data In

How to add a button in each row of a table?

christinaef07
Loves-to-Learn Everything

Hi everyone! I want to add a button to each row in my table under a field named 'details'. When this button is clicked, a pop up panel will expand with more details about this row of information. It uses the uuid to pull this information. So far, I have the table with the functionality working to open this pop up panel. I just want the field to look like a button. Can anyone help me with this? Table field is 'details'.

 

 

<row>
    <panel>
      <title>Job Executions</title>
      <table>
        <search>
          <query>index=asvcardmadacquisitionsanalytics_qa uuid=* |search notebook=$notebook$| eval details = "Show Details" | table uuid, notebook, status, run_duration, details</query>
          <earliest>$_time.earliest$</earliest>
          <latest>$_time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        
        <option name="drilldown">cell</option>
        <drilldown>
          <condition field="details">
            <set token="clicked_uuid">$row.uuid$</set>
            <set token="enable_pop_up"></set>
            <unset token="form.hide_panel"></unset>
          </condition>
          <condition field="uuid"></condition>
          <condition field="notebook"></condition>
          <condition field="status"></condition>
          <condition field="run_duration"></condition>
        </drilldown>
        <format type="color" field="status">
          <colorPalette type="map">{"success":#02A524,"failed":#E50202}</colorPalette>
        </format>
        <format type="color" field="details">
          <colorPalette type="map">{"Show Details": #66b3ff}</colorPalette>
        </format>
      </table>
    </panel>

    <panel depends="$enable_pop_up$">
      <input type="checkbox" token="hide_panel">
        <label></label>
        <choice value="hide">Hide</choice>
        <change>
          
        <condition value="hide">
          <unset token="enable_pop_up"></unset>
        </condition>
        </change>

      </input>
      <table>
        <title>Pop up Details Panel</title>
        <search>
          <query>index=asvcardmadacquisitionsanalytics_qa | search uuid=$clicked_uuid$ | table uuid, bap, notebook, run_duration, status, yarn_application_id, dag_start_time, dag_end_time, region | transpose | rename column as "Details", "row 1" as "Value"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>

 

 

 

Labels (1)
Tags (2)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

I have done a bit more work on this to make them look a bit more like buttons

<row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="jobexecutions"] tr[data-view$="ResultsTableRow"] td:nth-child(5){
            background-color: red !important;
            border: 2px solid white !important;
            border-radius: 8px !important;
            color: white !important;
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              2px 2px 4px 0 rgba(0,0,0,.25) !important;
          }
          div[id="jobexecutions"] tr[data-view$="ResultsTableRow"] td:nth-child(5):hover{
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              0 12px 16px 0 rgba(0,0,0,0.24),
              0 17px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(-1px) !important;
          }
          div[id="jobexecutions"] tr[data-view$="ResultsTableRow"] td:nth-child(5):active{
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              0 8px 16px 0 rgba(0,0,0,0.24),
              0 13px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(2px) !important;
          }
        </style>
      </html>
    </panel>
    <panel id="jobexecutions">
      <title>Job Executions</title>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

How about something like this - insert a hidden panel before your table panel, and give your table panel an id

 

<row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="jobexecutions"] .results-table .wrapped-results td:nth-child(5){
            border: 2px solid white !important;
            border-radius: 8px !important;
            background-color: red !important;
            color: white !important;
          }
          div[id="jobexecutions"] .results-table .wrapped-results td:nth-child(5):hover{
            background-color: red !important;
            color: white !important;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(-1px) !important;
          }
          div[id="jobexecutions"] .results-table .wrapped-results td:nth-child(5):active{
            background-color: red !important;
            color: white !important;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.24), 0 13px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(2px) !important;
          }
        </style>
      </html>
    </panel>
    <panel id="jobexecutions">
      <title>Job Executions</title>

 

0 Karma
Get Updates on the Splunk Community!

ATTENTION!! We’re MOVING (not really)

Hey, all! In an effort to keep this Slack workspace secure and also to make our new members' experience easy, ...

Splunk Admins: Build a Smarter Stack with These Must-See .conf25 Sessions

  Whether you're running a complex Splunk deployment or just getting your bearings as a new admin, .conf25 ...

AppDynamics Summer Webinars

This summer, our mighty AppDynamics team is cooking up some delicious content on YouTube Live to satiate your ...