Dashboards & Visualizations

How to format table grid in simple XML?

wolfgangs
Engager

Hi,
I have sucessfully played with column and cell colors for tables, but could not find any configuration option for table gridlines (size in px and colour).

Is there anybody with a hint?
just would need the <option name=xxxx>, if it works that way 😉

Many thanks in advance

Labels (2)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

You could edit the dashboard and switch to source mode, then add a hidden panel with css for the relevant attributes prior to the first row

  <row depends="$STYLES$">
    <panel>
      <html>
        <style>
          .results-table .wrapped-results td{
            border:2px solid #FF0000;
          }
        </style>
      </html>
    </panel>
  </row>

 

View solution in original post

0 Karma

wolfgangs
Engager

Thanks a lot for this hint!

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You could edit the dashboard and switch to source mode, then add a hidden panel with css for the relevant attributes prior to the first row

  <row depends="$STYLES$">
    <panel>
      <html>
        <style>
          .results-table .wrapped-results td{
            border:2px solid #FF0000;
          }
        </style>
      </html>
    </panel>
  </row>

 

0 Karma

bigll
Path Finder

Thank you. 
Works as designed.
Any suggestions/links for formatting tables in dashboard  beyond those options that are on the screen?
I.e. I can change cell background based on scale, but can I do font weight/color instead of cell background?

TIA.

 

ITWhisperer
SplunkTrust
SplunkTrust

CSS is your friend! Here are just a couple of things you can do with CSS

    <panel depends="$stayhidden$">
      <html>
        <style>
          #tiles table tbody tr{
            margin-right:10px;
            margin-bottom:10px;
          }
          #tiles table tbody tr td{
            width: 180px;
            text-align: center;
          }
          #tiles table tbody tr td[data-cell-index="1"]{
            font-size: 2em;
          }
          #tiles table tbody td div.multivalue-subcell[data-mv-index="1"]{
            display: none;
          }
        </style>
      </html>
    </panel>
    <panel id="tiles">
      <table>
        <search>
          <query>| makeresults 
| eval _raw="Environment,Application,Hostname,Status
EUAT,MC,H1,RUNNING
EUAT,MC,H2,DOWN
DEV,IC,H4,ERROR
UAT,IC,HK,RUNNING"
| multikv forceheader=1
| table Environment Application Hostname Status
| eval Application=mvappend(Application,case(Status="RUNNING","GREEN",Status="DOWN","RED",Status="ERROR","ORANGE"))</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color">
          <colorPalette type="expression">case (match(value,"RED"), "#ff0000",match(value,"ORANGE"), "#ff8000",match(value,"GREEN"),"#00ff00",true(),"#ffffff")</colorPalette>
        </format>
      </table>
    </panel>
0 Karma

bigll
Path Finder

Hi.

I guess I am missing something.
I.e. I have a table in the panel shown below.

Where hidden panel code should go? Between <row> and <panel> or aftr the <panel>?

Thank you
---------------------------------

<row>
<panel>
<title>CPU Utilization, Processor Time</title>
<html>
<style>
.dashboard-panel h2{
color:red !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background:#f1f5d7 !important;
}
</style>
</html>

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Exactly as I showed you - the $STYLES$ token should not be defined anywhere in your dashboard - in this way, the whole row is not displayed (making the title you used redundant) - however, the style is still sent to the browser so it can effect the CSS defined in the style block

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...