Dashboards & Visualizations

How to arrange fieldset and viz side by side inside one panel?

welderbuilder
Explorer

Hi. Does anyone know how to arrange a link list fieldset and status indicator viz side by side inside a panel? Each link list corresponds to one status located at the right panel. My goal is to place them side by side. 

 

welderbuilder_1-1598581604627.png

 

Labels (4)
0 Karma
1 Solution

niketnilay
Legend

@welderbuilder based on the details provided, you can use Simple XML CSS extension to style as per your need. If you are not using Link input for any drilldown, you can use html panel instead for similar results. Refer to Splunk Dashboard Examples App for Custom Decorations using html panel (on similar lines, you can also use Image Overlay with Single Value for better data representation).

Screen Shot 2020-08-31 at 1.02.10 AM.png

Following is Simple XML code with the run anywhere example as per the question and two options to get to desired results:

 

<form theme="dark">
  <label>Input Status Side By Side</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          div[id^="panelLabelCheck"]{
            height: 50px !important;
            width: 20% !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel,
          div[id^="panelStatusCheck"] .dashboard-panel{
            margin-bottom: 0px !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel{
            margin-right: 0px !important;
          }
          div[id^="panelStatusCheck"]{
            width: 80% !important;
          }
          div[data-view="views/dashboard/form/Input"] label,
          div[data-view="views/dashboard/form/Input"] .splunk-choice-input-message{
            display:none !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel,
          div[id^="panelStatusCheck"] .ui-resizable,
          div[id^="panelStatusCheck"] .dashboard-panel{
            height: 50px !important;
            min-height: 50px !important;
          }
          div[id^="panelStatusCheck"] .ui-resizable-handle{
            visibility: hidden !important;
          }
          div.splunk-status-indicator {
            display: flex !important;
          }
          div.splunk-status-indicator i{
            padding-top: 5px !important;
            padding-left: 20px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center">Option 1: Status Indicator</h3>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck1">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check1</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck1">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 1 Search -->
          <done>
            <set token="tokStatus1">$result.status$</set>
            <set token="tokColor1">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">info-circle</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck2">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check2</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck2">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 2 Search -->
          <done>
            <set token="tokStatus2">$result.status$</set>
            <set token="tokColor2">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck3">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check3</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck3">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Red", color="red", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 3 Search -->
          <done>
            <set token="tokStatus3">$result.status$</set>
            <set token="tokColor3">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck4">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check4</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck4">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Amber", color="orange", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 4 Search -->
          <done>
            <set token="tokStatus4">$result.status$</set>
            <set token="tokColor4">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          div.html-container div.html-row{
            display:flex;
            padding-bottom: 10px;
          }
          div.html-container div.html-row div.html-column-label{
            position: relative;
            left: 20px;
            padding-right:10px;
            font-size:15px;
          }
          div.html-container div.html-row div.html-column-status{
            position: relative;
            left: 20px;
            font-size:33px;
            font-weight:bold;
            display:flex;
          }
          div.html-container div.html-row div.html-column-status div.html-column-status-icon{
            padding-right:5px;
          }
        </style>
        <h3 style="text-align:center">Option 2: HTML Panel</h3>
        <div class="html-container">
          <div class="html-row">
            <div class="html-column-label">Check 1:</div>
            <div class="html-column-status" style="color:$tokColor1$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus1$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 2:</div>
            <div class="html-column-status" style="color:$tokColor2$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus2$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 3:</div>
            <div class="html-column-status" style="color:$tokColor3$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus3$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 4:</div>
            <div class="html-column-status" style="color:$tokColor4$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus4$</div>
            </div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</form>

 

 PS: For Image Overlay with Single Value, there is also an example I have added to my Splunk Wiki Talks: https://wiki.splunk.com/User_talk:Niketnilay 

Refer to example below with Icons (you can obviously use Splunk's built-in icons as well).

Image_Overlay_with_icons

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@welderbuilder based on the details provided, you can use Simple XML CSS extension to style as per your need. If you are not using Link input for any drilldown, you can use html panel instead for similar results. Refer to Splunk Dashboard Examples App for Custom Decorations using html panel (on similar lines, you can also use Image Overlay with Single Value for better data representation).

Screen Shot 2020-08-31 at 1.02.10 AM.png

Following is Simple XML code with the run anywhere example as per the question and two options to get to desired results:

 

<form theme="dark">
  <label>Input Status Side By Side</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          div[id^="panelLabelCheck"]{
            height: 50px !important;
            width: 20% !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel,
          div[id^="panelStatusCheck"] .dashboard-panel{
            margin-bottom: 0px !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel{
            margin-right: 0px !important;
          }
          div[id^="panelStatusCheck"]{
            width: 80% !important;
          }
          div[data-view="views/dashboard/form/Input"] label,
          div[data-view="views/dashboard/form/Input"] .splunk-choice-input-message{
            display:none !important;
          }
          div[id^="panelLabelCheck"] .dashboard-panel,
          div[id^="panelStatusCheck"] .ui-resizable,
          div[id^="panelStatusCheck"] .dashboard-panel{
            height: 50px !important;
            min-height: 50px !important;
          }
          div[id^="panelStatusCheck"] .ui-resizable-handle{
            visibility: hidden !important;
          }
          div.splunk-status-indicator {
            display: flex !important;
          }
          div.splunk-status-indicator i{
            padding-top: 5px !important;
            padding-left: 20px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center">Option 1: Status Indicator</h3>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck1">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check1</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck1">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 1 Search -->
          <done>
            <set token="tokStatus1">$result.status$</set>
            <set token="tokColor1">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">info-circle</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck2">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check2</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck2">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 2 Search -->
          <done>
            <set token="tokStatus2">$result.status$</set>
            <set token="tokColor2">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck3">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check3</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck3">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Red", color="red", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 3 Search -->
          <done>
            <set token="tokStatus3">$result.status$</set>
            <set token="tokColor3">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel id="panelLabelCheck4">
      <input type="link" token="tokCheck1" searchWhenChanged="true">
        <label></label>
        <choice value="check1">Check4</choice>
      </input>
    </panel>
    <panel id="panelStatusCheck4">
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults
| fields - _time
| eval status="Amber", color="orange", icon="exclamation-circle"
| table status icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <!-- Set tokens for HTML panel from Status Check 4 Search -->
          <done>
            <set token="tokStatus4">$result.status$</set>
            <set token="tokColor4">$result.color$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">50</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.fixIcon">check</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          div.html-container div.html-row{
            display:flex;
            padding-bottom: 10px;
          }
          div.html-container div.html-row div.html-column-label{
            position: relative;
            left: 20px;
            padding-right:10px;
            font-size:15px;
          }
          div.html-container div.html-row div.html-column-status{
            position: relative;
            left: 20px;
            font-size:33px;
            font-weight:bold;
            display:flex;
          }
          div.html-container div.html-row div.html-column-status div.html-column-status-icon{
            padding-right:5px;
          }
        </style>
        <h3 style="text-align:center">Option 2: HTML Panel</h3>
        <div class="html-container">
          <div class="html-row">
            <div class="html-column-label">Check 1:</div>
            <div class="html-column-status" style="color:$tokColor1$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus1$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 2:</div>
            <div class="html-column-status" style="color:$tokColor2$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus2$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 3:</div>
            <div class="html-column-status" style="color:$tokColor3$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus3$</div>
            </div>
          </div>
          <div class="html-row">
            <div class="html-column-label">Check 4:</div>
            <div class="html-column-status" style="color:$tokColor4$">
                <div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
                <div class="html-column-status-value">$tokStatus4$</div>
            </div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</form>

 

 PS: For Image Overlay with Single Value, there is also an example I have added to my Splunk Wiki Talks: https://wiki.splunk.com/User_talk:Niketnilay 

Refer to example below with Icons (you can obviously use Splunk's built-in icons as well).

Image_Overlay_with_icons

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@welderbuilder Not sure what exactly is the output you need. But seems like you need CSS extension for the two panels. Here is a previous answer of mine which creates Links as Tabs and shows corresponding Status Indicators on click of various links : https://community.splunk.com/t5/Dashboards-Visualizations/How-can-we-create-Tabs-using-Link-List-in-...

If you need a different output, do edit the image and post as per your final requirement or any other way you want to post the mock required structure.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

welderbuilder
Explorer

Hi @niketnilay , here's what I wanted to achieve. I'd like for each button to be aligned wih their corresponding status. Here's an illustration of what I want to do:

0D3C4478-6766-44CC-9FAF-EA16F003909F.jpeg

 

0 Karma

niketnilay
Legend

Status Indicator is single query with Trellis Layout? Or is it <html> panel?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

welderbuilder
Explorer

Each status indicator is created using 

<viz type="status_indicator_app.status_indicator">
...
<query>...</query>
...
</viz>

 so, each status indicator has a different query

0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.