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>
<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>
Use CSS and give your panels appropriate ids
div[id="white_on_red"] .dashboard-element-title
{
background-color: red !important;
color: white !important;
}
Can you give me an example using the code I provided?
<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>
Thank you. That worked. I was actually trying to change the main panel Title color and not the description section.
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;
}
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>
In the style block like I showed earlier.
Thank you. I am just trying to change the Title background color and make the text white.
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 😉
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