topic Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells? in Splunk Search

How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Sun, 02 Apr 2017 10:57:30 GMT

I’ve seen this example many time in splunk websites using tags
dashboard-container
dashboard-row
dashboard-cell
dashboard-panel
panel-head
panel-body
How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

niketn — Sun, 02 Apr 2017 13:21:23 GMT

@tajones... any mock screenshot of what you are trying to make? Also what kind of information in each cell, like whether it will be values to be printed using Single Value or HTML panel or else cell displaying a visualization like chart or gauge ot table etc?

Do you need a layout like attached image? This can be done using simple XML. All your Searches/Visualizations/HTML Panels will go inside each of the Simple XML Panels.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Sun, 02 Apr 2017 14:59:22 GMT

Here's my code for 1st row

<div id="panel1" class="dashboard-cell" style="width: 25%;">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element1" class="dashboard-element single" style="width: 50%;">
                <div class="panel-head">
                    <h3>DSMQ Application</h3>
                </div>
                <div id="body-element1" class="panel-body" style="width: 25%"></div>
                    <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href21" href="/app/fd_na_application_monitoring_icto_gfs_monitoring/gfs_dsmq_validation_dashboard?earliest=0&latest=" class="btn btn-primary">Drill Down</a>                
            </div>
        </div>
    </div>
</div>
<div id="panel2" class="dashboard-cell" style="width: 25%;">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element2" class="dashboard-element single" style="width: 100%;">
                <div class="panel-head">
                    <h3>FIWS Application</h3>
                </div>
                <div id="body-element2" class="panel-body" style="width: 25%"></div>
                        <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href22" href="/app/fd_na_application_monitoring_icto_gfs_monitoring/gfs_fiws_validation_dashboard?earliest=0&latest=" class="btn btn-primary">Drill Down</a>
            </div>
        </div>
    </div>
</div>
<div id="panel3" class="dashboard-cell" style="width: 25%">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element3" class="dashboard-element single" style="width: 100%;">
                <div class="panel-head">
                    <h3>Paypoint Application</h3>
                </div>
                <div id="body-element3" class="panel-body" style="width: 25%"></div>
                    <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href23" href="https://l3ppap1009:8000/en-US/app/fd_na_application_monitoring_icto_gfs_monitoring/gfs_paypoint_validation_dashboard?earliest=0&amp;latest=" class="btn btn-primary">Drill Down</a>
            </div>
        </div>
    </div>
</div>
<div id="panel4" class="dashboard-cell" style="width: 25%;">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element4" class="dashboard-element single" style="width: 100%">
                <div class="panel-head">
                    <h3>eCustomer Service Application</h3>
                </div>
                <div id="body-element4" class="panel-body" style="width: 25%"></div>
                    <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href24" href="" class="btn btn-primary">Drill Down</a>
            </div>
        </div>
    </div>
</div>
<div id="panel5" class="dashboard-cell" style="width: 25%;">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element5" class="dashboard-element single" style="width: 100%">
                <div class="panel-head">
                    <h3>eMessenger Application</h3>
                </div>
                <div id="body-element5" class="panel-body" style="width: 25%"></div>
                    <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href24" href="" class="btn btn-primary">Drill Down</a>
            </div>
        </div>
    </div>
</div>
<div id="panel6" class="dashboard-cell" style="width: 25%;">
    <div class="dashboard-panel clearfix">
        <div class="panel-element-row">
            <div id="element6" class="dashboard-element single" style="width: 100%">
                <div class="panel-head">
                    <h3>Speedpass Application</h3>
                </div>
                <div id="body-element6" class="panel-body" style="width: 25%"></div>
                    <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                    <a id="href24" href="" class="btn btn-primary">Drill Down</a>
            </div>
        </div>
    </div>
</div>
</div>

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

niketn — Mon, 03 Apr 2017 05:00:56 GMT

<dashboard>
  <label>Your Dashboard with Panels</label>
  <row>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
  </row>
  <row>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
  </row>
  <row>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
    <panel>
    </panel>
  </row>
</dashboard>

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

niketn — Mon, 03 Apr 2017 05:02:10 GMT

Put your visualizations/searches and html panels inside the <panel></panel> block.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Mon, 03 Apr 2017 10:49:10 GMT

hi, your second row is what i'm looking for.. but using html not xml, how can I achieve this with splunk css? I have current classes of class="dashboard-body container-fluid main-section-body" data-role="main
class="dashboard-row dashboard-row1"
class="dashboard-panel clearfix">
class="panel-element-row
id="element1" class="dashboard-element single" style="width: 100%
class="panel-head"
id="body-element1" class="panel-body"

how can I split panel-element-row or dashboad-element single into two cells? or do I need to use different classes in splunk css?

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

niketn — Mon, 03 Apr 2017 14:07:15 GMT

@tajones... You can then just build Simple XML Dashboard only for second panel and then convert to HTML to see the required code.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Tue, 04 Apr 2017 17:40:36 GMT

Hi, is there a way to send code privately?

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

aaraneta_splunk — Tue, 04 Apr 2017 17:56:49 GMT

@tajones - Just so you know, there is special markup language on this site so certain symbols will transform your post. Since you are posting sample dashboard code, you'll want the < > to render. Simply click on the Code Sample icon to the right of the Blockquote icon in the formatting toolbar. That is how I was able to edit your post/comment so that the < > will display and your code rendered properly.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

niketn — Tue, 04 Apr 2017 20:12:45 GMT

@tajones... following is the layout for you.

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Splunk Answers 515385 - Dashboard with cells HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel3" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel4" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel5" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel6" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel7" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel8" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel9" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel10" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel11" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel12" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel13" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel14" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel15" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel16" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel17" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel18" class="dashboard-cell" style="width: 8.33%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
    </div>
    <div id="row3" class="dashboard-row dashboard-row3">
        <div id="panel19" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel20" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel21" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel22" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel23" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
        <div id="panel24" class="dashboard-cell" style="width: 16.66%;">
            <div class="dashboard-panel clearfix">

            </div>
        </div>
    </div>
</div>

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Wed, 05 Apr 2017 01:55:47 GMT

I could not upload file to web site, i'm uploading first screenshot.
1. I have 6 columns to display different segments of my application (web, application, database url monitoring, transaction and VM/ESXI
2. Then I have an image that is rendered red or green depending on validation code checking on any violations that occurred for each server in my splunk kvstore
3. drill down link to application dashboards
What I would like to do with this screen layout is take each cell or column depending on your definition
And split it into two rows, with top row split into two columns. The top two colums will contain the image circle on left and right column will contain the text(ex: web, application, database…etc). The Bottom row will contain the dirlldown button, centered on bottom row. I’m having trouble doing this, because I’m not understanding splunk css style sheets and how to break down the exact grid layout I want.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Wed, 05 Apr 2017 01:55:48 GMT

I uploaded two screenshots with attachment.

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

jconger — Wed, 05 Apr 2017 19:13:41 GMT

I recommend sticking with SimpleXML whenever possible. But, when using HTML for dashboards, you do not have to use Splunk's classes. In this case, I would recommend using your own layout HTML with your own CSS. This would be the least fragile method as Splunk's CSS classes may change over time.

Put your CSS in the following directory:

$SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static

Then, reference this stylesheet in your HTML like so:

<head>
     <link rel="stylesheet" type="text/css" href="/static/app/YOUR_APP/YOUR_STYLESHEET.css" />

This is similar to your other tabs question -> https://answers.splunk.com/answers/515405/how-to-build-menu-tabs-using-splunk-css-in-html.html

Re: How can I build html page, using splunk css, build row with six columns and each column/cell split into two rows with top row split into two columns/cells?

tajones — Fri, 05 Jul 2019 21:33:14 GMT

delete post please