Arranging Dashboard elements

[mmelnick]

I'm trying to figure out if there's a nifty way to arrange the panels in a dashboard in a manner different than the rows and columns view. At a minimum, some way to set the div's position absolutely with css styles would work. Or is this an example of where one would build an App using Splunk's SDK?

(Imagine that inside each of the boxes below is a Splunk chart or gauge)

[Drainy · Accepted solution]

You can to an extent. I will paste my example code I shared to someone recently and then explain a bit more;

/* Ok, so we define this class explicitly. If you pop a space in then its looking for a combination of classes, but these can be inherited across if I recall correctly */
.layoutCell.firstCell {
        width:20% !important;
}

/* same again */
.layoutCell.lastCell {
        width:40% !important;
}

/* Now, because the above two have been defined explicitly and are technically made up of the two class names this one can sit happily in the middle as whatever you want. If you wanted to extend
this you could include the panel_row_etc bit before them for each row */
.layoutCell {
    width:40% !important;
}

So if you have a three column setup the first cell is referred to as firstCell. If you define it as above that is explicit and will look for that first cell, the second code snippet will then set the detail for the last of the 3 cells.
The final part sets the detail for the middle cell which is referred to singly as layoutCell.
Each row is contained within another DIV, panel_row1_col, panel_row2_col etc so you can incorporate these into the above to define specifics for each row.

So in summary, yes you could play with the positioning and layouts of the panels within the constraints of the existing system. You can define your own floats or sizes inside each definition.

EDIT: I should probably mention these are all defined in application.css inside of;

/opt/splunk/etc/apps/APPNAME/appserver/static/application.css

The !important keyword is needed to override the template defaults for the panels.

[Drainy]

The CSS should be refreshed every time you refresh the page, sometimes I have noticed browsers seem to get stuck on it during a login session. With most browsers you can force a reload by doing something like holding shift while clicking reload

[mmelnick]

Yeehaw, I finally got it to work. I had to restart my SplunkWeb process to get it to pick up. Thanks a bunch!

[Drainy]

Don't forget to specify some kind of width as you need to override the default, Splunk will arrange them as normal otherwise. Don't forget to accept as an answer if it works for you 🙂

[mmelnick]

Ah, ok, so if I put in position:absolute; and left: xxx px; and top: xxx px; it would shuffle them around into position? I'll experiment with that and see if I can make it go. Thanks