<form version="1.1" theme="light">
<label>Dashboard</label>
<!-- Hidden base search for dropdowns -->
<search id="base_search">
<query>
index=$index$ ----------
</query>
<earliest>$time_tok.earliest$</earliest>
<latest>$time_tok.latest$</latest>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<html>
<p>⚠️ Kindly avoid running the Dashboard for extended time frames <b>(Last 30 days)</b> unless absolutely necessary, as it may impact performance.</p>
<p>To get started, Please make sure to select your <b>Index Name</b> - this is required to display the dashboard data </p>
</html>
</panel>
</row>This is how I am writing the description. But I am not satisfied because it is not eye catchy. When the user opens the dashboard he should see this note first, i want in that way. I am not aware of HTML as well. Can some one help me. Copied icon from google and it seems small in dashboard.
1 Solution
@livehybrid wrote:Ive adjusted the styling now so its based on the Splunk theme colouring and adjusts for both:
Regarding the emoji and dark-mode, it seems to work okay for me. Occasionally when switching between light/dark mode I needed to do a hard refresh but it certainly looks to be working as per the above screenhot.
Below is the XML code the example dashboard:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;">⚠️</span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
Want to increase font size for these two lines and thats it.
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;">⚠️</span>
Important Notice
</h3>
<p class="text-muted">
Avoid running the dashboard for long date ranges <strong>(Last 30 days)</strong> unless strictly needed – it may impact performance. Use shorter ranges for faster results.
</p>
<p class="text-muted">
Please ensure an <strong>Index Name</strong> is selected - this is required to load dashboard data.
</p>
</div>
</div>
</html>
If you prefer, you could use an SVG instead of emoji using this:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;"><svg focusable="false" height="1.3em" width="1em" viewBox="0 0 1500 1313" aria-hidden="false" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" data-test-name="warning-icon" class="warningIcon"><title>Warning</title><path style="fill:currentColor;" d="M.956 1196.326l668.58-1144.89C689.395 17.736 718.71 0 749.916 0c31.207 0 59.577 15.963 80.382 51.436l668.58 1144.89c7.565 12.416-23.642 116.174-77.544 116.174H85.474c-53.902 0-92.083-102.872-84.518-116.174zm643.333-684.743l32.146 257.167c4.908 39.264 34.086 74.685 69.815 91.187 36.612-16.018 64.87-50.826 69.914-91.187l32.146-257.167C855.18 456.623 815.582 411 759.7 411h-26.8c-55.908 0-95.555 45.033-88.61 100.583zm101.294 644.209c63.283 0 114.584-51.301 114.584-114.584 0-63.282-51.301-114.583-114.584-114.583-63.282 0-114.583 51.3-114.583 114.583s51.3 114.584 114.583 114.584z"></path></svg></span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
Can we please increase the font size of that two lines below imp notice and we are good to go. Thanks for your help. @livehybrid
