Dashboards & Visualizations

Dashboard

silverKi
Path Finder

silverKi_0-1717562227032.png

I want to fill the table cells with tags. Like multi selector.. How can I make the table contents look like tags?
How to do it without using html elements?? 

Labels (3)
0 Karma

silverKi
Path Finder

Does anybidy konw when I clicked valueo in table cell How I render input btn?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Do you mean something like this:

  <row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
          {
            display: flex !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
          {
            padding-left: 4px;
            padding-right: 4px;
            margin-left: 4px;
            margin-right: 4px;
            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(2) .multivalue-subcell: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(2) .multivalue-subcell: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(2) .multivalue-subcell
          {
            background-color: yellow !important;
            color: black !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell[data-mv-index="0"]
          {
            display: none !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="states">
        <title>States $state$</title>
        <search>
          <query>| makeresults count=10
| eval event=random() % 3 
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3) 
| stats values(state) as state by event
| eval state=mvappend("extra",state)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">row</option>
        <drilldown>
          <eval token="state">$click.value2$</eval>
        </drilldown>
      </table>
    </panel>
  </row>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Your subject is very broad - how would anyone know what this was specifically about especially given that it is already in a Dashboards & Visualizations section!

Having said that, you then restrict your required solution to not include HTML - as @gcusello says, with these restrictions, it isn't possible (with current standard visualization options).

However, if you would be prepared to expand your outlook you could do something along these lines:

 

  <row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
          {
            display: flex !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
          {
            border: 2px solid black !important;
            padding-left: 4px;
            padding-right: 4px;
            margin-left: 4px;
            margin-right: 4px;
            border-radius: 8px !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="states">
        <title>States</title>
        <search>
          <query>| makeresults count=10
| eval event=random() % 3 
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3) 
| stats values(state) as state by event</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>

 

ITWhisperer_0-1717574403854.png

Note that this doesn't work if there is only one value in the multivalue field (however, with a bit of extra work, this can be gotten around by inserting an additional value to the field and then hiding this value.

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @silverKi ,

in my knowledge, it isn't possible!

Ciao.

Giuseppe

0 Karma
Get Updates on the Splunk Community!

.conf25 technical session recap of Observability for Gen AI: Monitoring LLM ...

If you’re unfamiliar, .conf is Splunk’s premier event where the Splunk community, customers, partners, and ...

A Season of Skills: New Splunk Courses to Light Up Your Learning Journey

There’s something special about this time of year—maybe it’s the glow of the holidays, maybe it’s the ...

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to ...

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to Officially Supported Splunk ...