Splunk Enterprise

How to merge the single viz and table vis in same row in Splunk dashboard XML?

kartm2020
Communicator

Hi,

 

Can someone help me to provide the solution same as like in attached image.

Labels (1)
Tags (3)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

My take on your rather brief question is 

a) wider table than single value viz
b) multiple single values, stacked horizontally/vertically

See this example - it makes the table width 70% and the SV panel 30%.

The multiple SV visualisations are stacked horizontally by default, but the empty HTML viz in the middle of the 4 will break the next SV onto a new row.

<dashboard>
  <label>Panel Width</label>
  <row depends="$showformat$">
    <panel>
      <html>
      <style>
        #example_id .dashboard-cell:nth-child(1) {
          width:70% !important;
        }
        #example_id .dashboard-cell:nth-child(2) {
          width:30% !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row id="example_id">
    <panel>
      <title>Status</title>
      <table>
        <search>
          <query>| makeresults count=5
          | fields - _time
          | eval "Out-of-band Managent Address" = (random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1)
          | eval "Fabric MAC address"=printf("%04x%04x%04x", random() % 65536, random() % 65536, random() % 65536)
          | eval name="Name:".(mvindex(split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", ""), random() % 26))
          | eval "APIC Health"="fully-fit"
          | eval "Operational Status"="Available"
          | table "Out-of-band Managent Address" "Fabric MAC address" name "APIC Health" "Operational Status"</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <html/>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</dashboard>

 

View solution in original post

0 Karma

bowesmana
SplunkTrust
SplunkTrust

My take on your rather brief question is 

a) wider table than single value viz
b) multiple single values, stacked horizontally/vertically

See this example - it makes the table width 70% and the SV panel 30%.

The multiple SV visualisations are stacked horizontally by default, but the empty HTML viz in the middle of the 4 will break the next SV onto a new row.

<dashboard>
  <label>Panel Width</label>
  <row depends="$showformat$">
    <panel>
      <html>
      <style>
        #example_id .dashboard-cell:nth-child(1) {
          width:70% !important;
        }
        #example_id .dashboard-cell:nth-child(2) {
          width:30% !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row id="example_id">
    <panel>
      <title>Status</title>
      <table>
        <search>
          <query>| makeresults count=5
          | fields - _time
          | eval "Out-of-band Managent Address" = (random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1)
          | eval "Fabric MAC address"=printf("%04x%04x%04x", random() % 65536, random() % 65536, random() % 65536)
          | eval name="Name:".(mvindex(split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", ""), random() % 26))
          | eval "APIC Health"="fully-fit"
          | eval "Operational Status"="Available"
          | table "Out-of-band Managent Address" "Fabric MAC address" name "APIC Health" "Operational Status"</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <html/>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</dashboard>

 

0 Karma

kartm2020
Communicator

Thanks a lot for your answer. it is working as expected. Can i able to remove the white space in the table by reducing the single value size ? if yes, how can i reduce the size of single value viz.

Tags (1)
0 Karma

bowesmana
SplunkTrust
SplunkTrust

If you want to play around with single value viz that has lots of options, I recommend @chrisyounger app - number viz, which allows you to specify various sizes.

https://splunkbase.splunk.com/app/4537

However, it you want to change the SV standard viz sizes and play around with the UI layout, you will need to use CSS changes. You would add those CSS changes to the <style> section in the XML dashboard.

If you are not so knowledgable with CSS, I recommend looking at posts made by @niketn who has made some excellent posts on CSS and how to do some great stuff with extending the standard visualisations.

https://community.splunk.com/t5/forums/searchpage/tab/message?filter=location,authorId&q=css&noSynon...

 

ITWhisperer
SplunkTrust
SplunkTrust

Do you mean like this?

 

...
  <row>
    <panel>
       <table>
...
       </table>
    </panel>
    <panel>
      <single>
...
      </single>
    </panel>
  </row>
...

 

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...