Dashboards & Visualizations

Editing Splunk Dashboard after converting to HTML

Path Finder

Hi all,

I am using SPLUNK 7.0.0
I have converted my dashboard into html to make some changes to the layout

I have a piece of code as given below

<div id="panel6" class="dashboard-cell" style="width: 20%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Value</h2>

                <div class="panel-element-row">
                    <div id="element6" class="dashboard-element single" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>

I want to change the width of the panel from 20% to 50% hence I added the below code and adjusted the width of other panels accordingly.

<div id="panel6" class="dashboard-cell" style="width: 50% !important;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Value</h2>

                <div class="panel-element-row">
                    <div id="element6" class="dashboard-element single" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>

After saving it nothing changes
although in the source code i can still see the updated code.

0 Karma
1 Solution

Legend

Can you try overriding the style using panel ids?

<style>
      #errorSinglePanel{
      width:25% !important;
      }
      #errorStatsPanel{
      width:30% !important;
      }
      #errorLineChartPanel{
      width:45% !important;
      }
</style>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Adjust Width of Panels in Dashboard HTML</h2>
    </div>
    <div class="fieldset">
        <div class="input input-timerangepicker" id="input1">
            <label>Select Time</label>
        </div>
    </div>
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="errorSinglePanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Splunkd Errors (Single Value)</h2>

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element single" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="errorStatsPanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Top 5 Error (Stats)</h2>
                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="errorLineChartPanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Splunkd Errors (Timechart)</h2>
                <div class="panel-element-row">
                    <div id="element4" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Legend

Can you try overriding the style using panel ids?

<style>
      #errorSinglePanel{
      width:25% !important;
      }
      #errorStatsPanel{
      width:30% !important;
      }
      #errorLineChartPanel{
      width:45% !important;
      }
</style>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Adjust Width of Panels in Dashboard HTML</h2>
    </div>
    <div class="fieldset">
        <div class="input input-timerangepicker" id="input1">
            <label>Select Time</label>
        </div>
    </div>
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="errorSinglePanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Splunkd Errors (Single Value)</h2>

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element single" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="errorStatsPanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Top 5 Error (Stats)</h2>
                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="errorLineChartPanel" class="dashboard-cell" style="width: 33.5%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Splunkd Errors (Timechart)</h2>
                <div class="panel-element-row">
                    <div id="element4" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Champion

You can reload these from disk using the following endpoint(s).

To reload all objects:

http://splunkinstanceip:8000/debug/refresh

To reload views only:

http://splunkinstanceip:8000/debug/refresh?entity=%2Fdata%2Fui%2Fnav&entity=%2Fdata%2Fui%2Fviews
0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!