All Apps and Add-ons

Why is the position of the water gauge custom viz overlay in a panel changing based on search length time?

Communicator

I pieced together a custom dashboard based on the Splunk 6.x Dashboard Examples app, that overlays a custom viz (water gauge - cuvizwatergauge.water_gauge) on top of a background image within a panel. It worked fine in demo mode when the search used to generate the viz data was dummy data (so the search result was nearly instantaneous).

However, now I've swapped out the search with a complex formulation, which takes a few seconds to run (e.g., 3-5 seconds to read from an ITSI summary index and compute a weighted service health score for select KPIs within a Service). Weirdly, when the search completes, the water gauge is now somewhere around 20-50 pixels lower than what it was when the search ran instantaneously. If I swap the search back to the fast dummy search, it puts it back in the correct location that I figured out by trial and error tweaking the pixels.

I think it's related to the viz title, which I didn't include (no title tag in the XML): It's as if the underlying position reserved for a title of the custom viz is preserved on the page so that the custom viz is moved downwards to account for a title if there actually was one. For example, if I leave the search as a fast dummy search (instantaneous) but instead additionally include a title in the XML, then the viz is moved downwards to make room for the title, and ends up at the same location as it does when I run the slow search without a title.

My guess is that this is some behavior related to timing: if the search goes quickly and there isn't a title tag, the viz will be placed at the uppermost position provided in the CSS. But if the search goes slowly, somehow the title space is preserved, and the viz ends up at a lower position. I'm at a loss though.

Is there a way to force no title so that, irrespective of the search speed, there will never be space preserved for a title?

I've attached some of the CSS below that I use to set positions.

.ingestion_pipeline {
    position: relative;
    width: 817px;
    height: 500px;
}


#image_overlay_panel_sm #image_back {
    background: transparent 50% 50% no-repeat url('/static/app/itoa_test/Background3.png');
    background-color: #FFFFFF ;
    position: absolute;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
}

/* 1st gauge - Infrastructure water gauge image location */
#image_overlay_panel_sm #infra {
   position: absolute;
   top: 71px;
   left: 131px;
}

/* 2nd gauge - Apps water gauge image location */
#image_overlay_panel_sm #apps {
   position: absolute;
   top: 197px;
   left: 12px;
}

/* 3rd gauge - Process water gauge image location */
#image_overlay_panel_sm #process {
   position: absolute;
   top: 364px;
   left: 12px;
}
0 Karma
1 Solution

Communicator

I realized the problem - there was a warning in Splunk (yellow triangle), that for some reason forced the water gauge to move. Once we addressed the warning (missing an add-on for an eventtype), it was back in the proper place.

View solution in original post

Communicator

I realized the problem - there was a warning in Splunk (yellow triangle), that for some reason forced the water gauge to move. Once we addressed the warning (missing an add-on for an eventtype), it was back in the proper place.

View solution in original post

Communicator

Playing with this, it's just not the title causing the shift - when I look at it closely, it shifts downwards for a slow search, further than what it shifts downwards if you include a title for a fast search.

Why would the absolute position be changing depending on the speed of the search? Is it due to automatic page resizing as searches complete on a page? Is there a better way to do the CSS position (relative or absolute?) to keep the image always at the same location relative to the background image?

0 Karma