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

christinaef07 · ‎11-20-2020

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>

ITWhisperer · ‎11-24-2020

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>

ITWhisperer · ‎11-21-2020

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>

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

XML

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms