How can I use table cells to make them buttons?

[antonio147]

How can I use table cells to make them buttons?
I would like the cells in a table to be buttons to then launch a query, is it possible?

[antonio147]

But what if instead of the table you want to have a single value?
in addition to the table I also have to show more single data.
Type a header with its value below, repeated for multiple headings, by clicking on the value or header, view the results in detail in a table at the end of the page (another query).
I tried to work on the initial code, with no success.

Tks 

BR

Antonio

[ITWhisperer]

In the drilldown, create two tokens, one from the value (first column of the row clicked) and one from name2 (value of the header for the column clicked). The second token is constructed as a condition to the where clause in the second panel such that it is null if the first column is clicked meaning all time periods.

The search in the second panel adds the bucket the event would fit into so that the where clause can filter based on the second token defined in the drillldown of the first panel.

    <panel>
      <table id="states">
        <title>States</title>
        <search>
          <query>| gentimes start=-1 increment=10m 
| rename starttime as _time 
| fields - endhuman endtime starthuman 
| eval count=random() % 20 
| eval state=mvindex(split("INSERTION,WAIT PM,WAIT OSS",","),random() % 3) 
| bin span=8h _time 
| eval _time=strftime(_time,"%H:%M")
| chart sum(count) as total by state _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <eval token="state">$click.value$</eval>
          <eval token="timeframe">if($click.name2$="state",null,"AND timebucket=\"".$click.name2$."\"")</eval>
        </drilldown>
      </table>
    </panel>
    <panel depends="$state$">
      <table>
        <title>States - $state$ - $timeframe$</title>
        <search>
          <query>| gentimes start=-1 increment=10m 
| rename starttime as _time 
| fields - endhuman endtime starthuman 
| eval count=random() % 20 
| eval state=mvindex(split("INSERTION,WAIT PM,WAIT OSS",","),random() % 3) 
| bin span=8h _time as timebucket
| eval timebucket=strftime(timebucket,"%H:%M")
| where state="$state$" $timeframe$
| table _time state count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>

[antonio147]

I'm trying to understand how these 2 lines work.
they are not clear to me.
<eval token = "state"> $ click.value $ </eval>
<eval token = "timeframe"> if ($ click.name2 $ = "state", null, "AND timebucket = \" ". $ click.name2 $." \ "") </eval>

[ITWhisperer]

The first one sets the token state to the value of the field in the first column of the row clicked.

The second one sets the token timeframe to the value of the name of the column clicked. However, we only want to do this if the clicked cell is not in the first column i.e. the state column. The value set is used in the where clause so this has to be valid and meaningful for that where clause. The search has a field called timeframe with values that match the column headings from the chart command in the first search. This is how we filter the second search based on the time period selected.

[antonio147]

Instead of the initial table, I would like to make a single element like: INSERTION and under the value at 02, then INSERTION and under the value of 10, INSERTION and under the value of 15.
Again, WAIT PM with the value of 02, etc .....
then by clicking on INSERTION at 02, you will have the details in a table below of only those events.

[gcusello]

Hi @antonio147,

as I said in my previous answer, you can create a table of Single Value panels enabling drilldown from each of them.

i usually use this solution in my Home pages: a dashboard that gives a first impression of the situation of monitored infrastructure and a direct access to the related dashboards.

Ciao.

Giuseppe

[antonio147]

Hi Giuseppe,
i saw your answer, my problem i couldn't select drilldown to get what you said.
You made me think of the single value solution.

[gcusello]

Hi @antonio147,

what do you mean with " couldn't select drilldown"?

you could link (using drilldown) the other dashboard you have:

for example: in onemy old project I had in home page a table with in each row the number of systems in different statuses e.g.:

                        Total      Up      Down
Windows Servers          100       98        2
Linux Servers             80       79        1
Firewalls                  6        6        0
Network Appliances        20       19        1
VM-Ware systems            8        8        0

If you click on a Single Value of the first column, drilldown open the relative dashboard without filters,

If you click on one of the Values, drilldown open the relative dashboard passing the conditions: type and status.

In this way you immediately have the situation of your infrastructure because you can use colours in Single Values and can immediately go to the spoecifdic dashboard to analyze the problem.

Obviously you have to create a dashboard for each kind of system having Status ad one of the input parameters.

Ciao.

Giuseppe

[antonio147]

just one question, do you use 2 separate dashboards?
My goal is to have a dashboard with header, sub-value (result of the first query) repeated for each header (status, value) and then at the bottom of the page the table with the detailed data of the status, value) clicked.
The drilldown, now I understand how it makes me see it, my error that I wanted to see immediately in the dashboard creation, and instead appears only at a later time.

[gcusello]

Hi @antonio147,

yes, you can have an in-page drilldown: it depends on the data to display: if the data to display from differtent buttons are more or less the same you can do it.

In my app I had very different informations for each kind of system, so I had to create a dashboard for each kind of system, but it was easy because in any way I had to create a dashboard for each kind of system.

Ciao.

Giuseppe

[ITWhisperer · Accepted solution]

  <row>
    <panel>
      <html>
        <style>
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(1)
          {
            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="states"] tr[data-view$="ResultsTableRow"] td:nth-child(1):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="states"] tr[data-view$="ResultsTableRow"] td:nth-child(1):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;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(1)
          {
            background-color: red !important;
          }
        </style>
      </html>
      <table id="states">
        <title>States</title>
        <search>
          <query>| gentimes start=-1 increment=10m | rename starttime as _time | fields - endhuman endtime starthuman | eval count=random() % 20 | eval state=mvindex(split("INSERTION,WAIT PM,WAIT OSS",","),random() % 3) | stats sum(count) as total by state</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <eval token="state">$click.value$</eval>
        </drilldown>
      </table>
    </panel>
    <panel depends="$state$">
      <table>
        <title>States</title>
        <search>
          <query>| gentimes start=-1 increment=10m | rename starttime as _time | fields - endhuman endtime starthuman | eval count=random() % 20 | eval state=mvindex(split("INSERTION,WAIT PM,WAIT OSS",","),random() % 3) | where state="$state$" | table _time state count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>

[antonio147]

Thank you all,
the code indicated by ITWhispeper is excellent.
I tried it and it works with my query, what about perfect.
thank you
Bye
Antonio

[gcusello]

Hi @antonio147,

you have two solutions:

1. you can create a group of Single Values panels and use them to drilldown into other dashboards.
2. you can create a table in HTML and use images to link to the new dashboard.

In all my apps I alway have an Homepage sometimes using solution1 (more times) and sometimes solution 2 tha forward to the dedicated dashboards.

Ciao.

Giuseppe