Solved: How to add background cover for Dashboard Panel Ti...

elijahputz · ‎03-29-2022

Hello,

I am trying to add a background cover for the panels within a dashboard.

I have attached a photo of what we currently have and then a photo example of what I am trying to do.

Including is the source code for these panel sections.

<row>
<panel>
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel>
<title>ALL DATACENTERS | Resources Unavailable</title>
<chart>
<title>ALL DATACENTERS | Resources Unavailable</title>
<search>
<query>index=pan_logs dvc="*" session_end_reason="resources-unavailable" | timechart span=5h count by dvc</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</chart>
</panel>
</row>
<row>

ITWhisperer · ‎03-30-2022

<row>
<panel depends="$alwayshidden$">
<html>
<style>
          div[id="white_on_green"] .dashboard-element-title
          {
            background-color: green !important;
            color: white !important;
          }
          div[id="white_on_red"] .dashboard-element-title
          {
            background-color: red !important;
            color: white !important;
          }
</style>
</html>
</panel>
<panel id="white_on_green">
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel id="white_on_red">
<title>ALL DATACENTERS | Resources Unavailable</title>
<chart>
<title>ALL DATACENTERS | Resources Unavailable</title>
<search>
<query>index=pan_logs dvc="*" session_end_reason="resources-unavailable" | timechart span=5h count by dvc</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</chart>
</panel>
</row>

View solution in original post

ITWhisperer · ‎03-30-2022

Use CSS and give your panels appropriate ids

          div[id="white_on_red"] .dashboard-element-title
          {
            background-color: red !important;
            color: white !important;
          }

elijahputz · ‎03-30-2022

Can you give me an example using the code I provided?

ITWhisperer · ‎03-30-2022

<row>
<panel depends="$alwayshidden$">
<html>
<style>
          div[id="white_on_green"] .dashboard-element-title
          {
            background-color: green !important;
            color: white !important;
          }
          div[id="white_on_red"] .dashboard-element-title
          {
            background-color: red !important;
            color: white !important;
          }
</style>
</html>
</panel>
<panel id="white_on_green">
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel id="white_on_red">
<title>ALL DATACENTERS | Resources Unavailable</title>
<chart>
<title>ALL DATACENTERS | Resources Unavailable</title>
<search>
<query>index=pan_logs dvc="*" session_end_reason="resources-unavailable" | timechart span=5h count by dvc</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</chart>
</panel>
</row>

elijahputz · ‎03-30-2022

Thank you. That worked. I was actually trying to change the main panel Title color and not the description section.

ITWhisperer · ‎03-30-2022

That was difficult to determine because you said panel and the pictures don't convey the difference you were after - use this CSS instead

          div[id="white_on_red"] .panel-title
          {
            background-color: red !important;
            color: white !important;
          }

elijahputz · ‎03-30-2022

Thank you.

Where would I put the code you just sent?

div[id="white_on_red"] .panel-title { background-color: red !important; color: white !important;

<form theme="light">
<label>DoS Protection | Datacenters Clone 2</label>
<fieldset submitButton="true" autoRun="true">
<input type="time" token="field1">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel>

ITWhisperer · ‎03-30-2022

In the style block like I showed earlier.

elijahputz · ‎03-29-2022

Thank you. I am just trying to change the Title background color and make the text white.

gcusello · ‎03-30-2022

Hi @elijahputz,

good for you, tell me if I can help you more, otherwise, please, accept the answer for the other people of Community.

Ciao and happy splunking.

Giuseppe

P.S.: Karma Points are appreciated 😉

gcusello · ‎03-29-2022

Hi @elijahputz,

you could add two html panels with the colours you like: I'm not an expert in html, but this is the approach:

  <row>
    <panel>
      <html>
	<h1>
	  <center>
	    <font size="+8" style="line-height: 50px; color: black">
	        <a>
	          First column
		</a>
	    </font>
	  </center>
	</h1>
      </html>
    </panel>
    <panel>
      <html>
	<h1>
	  <center>
	    <font size="+8" style="line-height: 50px; color: black">
	        <a>
	          Second column
		</a>
	    </font>
	  </center>
	</h1>
      </html>
    </panel>
</row>

Ciao.

Giuseppe

elijahputz · ‎03-30-2022

I figured it out

Than you all.

How to add background cover for Dashboard Panel Title Colors?

other

search job inspector

subsearch

table

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor