All Apps and Add-ons

Not centering when in a panel

david_casey
Path Finder

I want the globe to be next to another panel in a dashboard (side by side). Unfortunately the globe will not center on the panel. It is half off the screen on the right and the legend sitting on top of it. is this a bug or is there something I can tweak in the app?

Tags (1)
0 Karma

david_casey
Path Finder

alt text

0 Karma

paulstout
Path Finder

Thank you, David. I'll look into this and get back to you by Monday.

0 Karma

david_casey
Path Finder

Here is the code from that page so you have all the details when researching a fix. This is running on our Enterprise Security Splunk instance in a special overview dashboard we run on large monitors. As you can see it is running a stylesheet. It's possible something in there is causing this alignment problem.

Why do I say that? Because the same globe code is running on another Splunk instance that is not using a stylesheet and it works perfectly. I have it running twice next to each other and its fine. Screenshot attached.

<dashboard stylesheet="dark_no_bar.css" hideSplunkBar="true" hideFooter="true" hideEdit="true">
  <label>IT SecOps:  Security IoC Overview</label>
  <description></description>
  <row>
    <panel>
      <title>External Notable Security Events by Geolocation (4h)</title>
      <viz type="missile_map.missile_map">
        <search>
          <query>index=notable threat_group!=sans | `missile_map(true)`</query>
          <earliest>-4h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>15m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="drilldown">none</option>
        <option name="missile_map.missile_map.lineThickness">1</option>
        <option name="missile_map.missile_map.mapLatitude">30</option>
        <option name="missile_map.missile_map.mapLongitude">-5</option>
        <option name="missile_map.missile_map.mapZoom">2</option>
        <option name="missile_map.missile_map.staticColor">#FF0000</option>
        <option name="missile_map.missile_map.tileSet">dark_tiles</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
    <panel>
      <title>Global Blocks by Country</title>
      <viz type="webgl_globe.globe">
        <search>
          <query>| from datamodel:"Network_Traffic"."Blocked_Traffic" 
| search dest_ip="xxx.xxx.*.*" 
| stats count as count by src_ip 
| where count > 100 
| iplocation src_ip 
| where Country!="United States" 
| geostats count by Country</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <refresh>10m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="webgl_globe.globe.globeAnimate">true</option>
        <option name="webgl_globe.globe.globeAnimateSpeed">30</option>
        <option name="webgl_globe.globe.globeBackground">true</option>
        <option name="webgl_globe.globe.globeColor">color</option>
        <option name="webgl_globe.globe.globeControls">false</option>
        <option name="webgl_globe.globe.globeLegend">true</option>
      </viz>
    </panel>
  </row>
0 Karma

david_casey
Path Finder

Apparently I need more karma to post another picture. LOL

0 Karma

david_casey
Path Finder

Here is the .css file:

body,.dashboard-body,.footer,.header,.dashboard-cell { 
    background: #333 !important; 
    color: lightgrey;
}
body, .main-section-body, .footer {
    background-image: url('images/px_by_Gre3g_@2X.png') !important;
}
.dashboard-cell {
    background: none;
}
.dashboard-panel {
    background: #666 !important;
}
.dashboard-row label, .dashboard-row a {
    color: #fff;
}
a:hover {
    color: #fff;
}
.dashboard-row .dashboard-panel .refresh-time-indicator {
    color: #FFF;
}
.dashboard-header h2, p.description, .nav-footer>li>a { 
    color: #ddd; 
    text-shadow: none; 
}
.dashboard-row .dashboard-panel {
    border: none;
}
.dashboard-row .dashboard-panel .panel-head h3 {
    color: #FFF;
    text-shadow: 0 2px 0 #681111;
}
.table-chrome > thead > tr > th a {
    background-image: none !important;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { 
    background-color: #414141 !important; 
}
.table {
    background-color: none;
}
.table .table, .table-striped>tbody>tr>td {
    color: white;
}
.table .table, .table-striped>tbody>tr:nth-child(even)>td {
    background-color: #696969 !important;
}
.table-chrome > thead > tr > th, .table-chrome > thead > tr > th a {
    background-image: linear-gradient(to bottom, #888, #666);
    color: white !important;
    text-shadow: none;
}
.table-chrome .sorts a {
    text-decoration: none;
    color: #ddd;
}
.table-chrome .sorts:hover {
    background: none;
    background-color: #333;
}
svg>rect {
    fill: #333 !important;
}
svg text { 
    fill: #fff !important; 
}
.single-value .single-result {
    color: #fff;
}
.splunk-paginator a.selected { 
    background: #000; 
}
#minion {
    height: 100px;
}
h6 {
    color: lightgrey;
}
.splunk-header {
     display: none;
}

.panel-body {
    text-align: center;
}
0 Karma

paulstout
Path Finder

David, I agree that it's likely a conflict between the globe's stylesheet and your dashboard stylesheet. The only thing that stands out to me is the .panel-body class being set to text-align:center. This is apparent knowing this property is not set by Splunk default, the globe seems to be half cut off meaning the entire webgl canvas may be centered and the overflow-x obscured, and the legend entries are centered and this is not usually how they render.

Can you disable this in the CSS, hit the _bump endpoint, and let me know if that clears up the alignment issue? If that does work, it may make sense to use another or more specific selector than .panel-body

Otherwise I will reconstruct a dashboard with the CSS you've provided and troubleshoot from there.

0 Karma

david_casey
Path Finder

No joy Paul. No change at all in the page rendering after a reload. Next steps?

0 Karma

david_casey
Path Finder

Stand corrected. I had to close and clear out my cache on Chrome and it displayed correctly. Seems to be working as intended and I see no side effects of hiding the code in the .css.

Thank you Sir!!

0 Karma

puffaluffagus85
New Member

Hello,

I have been running into an issue where the image files in webgl_globe\appserver\static\ are not loading like starfield.jpg and the globe textures. The controls on theupper left hand load fine.

This is in splunk 7.0.1

0 Karma

paulstout
Path Finder

David, I will look into this. I have an idea of what may be causing this issue. Could you post a screenshot of your issue for me? Thank you!

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...