All Apps and Add-ons

Dashboard Help - Sideview PostProcess + HTML

ronaldmexico
Explorer

I really could use some help building a basic dashboard.

To make a long story short and get to the meat of this post, I'm new to splunk and said I could deliver a dashboard without knowing if I could. I'm really close but I'm stuck. Minus a night of sleep, I have been at this for almost 48 hours straight. I've read probably 100 posts from sideview (you = awesome), all of the relevant documentation within his app and tons of splunk.com documentation.

What I am trying to do is create a dashboard that displays the status of ping and port scan for a group of hosts and ports. I used the Asset Discovery app to generate the data within Splunk and it's working fine. I have all my fields and life is good there.

First, I used Splunk 6 Dashboard examples app and saw the Single Value color changing example. I built this using Simple XML using a search for each value. Needless to say that didn't quite work. I then went into SideViews Utils and read the HTML Module doc and tried using the PostProcess to replace Single Values example as a basis for my dashboard. After many failures, I think I have my search mostly working. I am not using any transforming commands but I have it limited to only the last 3 minutes of data, so it should always be under the 10,000 row limit. I had issues at first but once I explicitly told it what fields to return, it seems to be OK.

My problem is on the display and specifically the CSS. I am not a web designer and I apologize for my ignorance on that front.

Here's my dashboard code - h t t p://pastebin.com/0pYH7xnR

For the CSS I modified the Search app application.css to include the bit from the Sideview XML source. Here it is: h t t p://pastebin.com/MEgSR2aS

What I get when creating this is just a single "row" and only the first two searches show up. I get the name ($results[0].dest_host$), the range ($results[0].range$") and the IP ($results[0].dest_ip$). The range coloring is not working but I'm sure that has to do with the search string and I can figure that out after I get it actually displaying the data. Here is a screenshot: h t t p://imgur.com/SVZ8CdB

I do not know why this is happening as I've meticulously compared what I have to the SideView example. Is it because I am using this as part of the "Search" app? Am I supposed to make my own app and put it in there so it doesn't inherit CSS settings from the default search app?

PLEASE help!

1 Solution

sideview
SplunkTrust
SplunkTrust

1) I think one big problem is that you're missing the closing dollar sign on $results[0].dest_port_state$

Since there's no closing dollar sign, the code unfortunately eats up the entire rest of the HTML param, so it never gets displayed. Not the first time a user has lost some hours to this problem. I might change the code so that it generates an error if it ever sees an unclosed dollar sign... Presumably the behavior of a big red error message is preferable to the behavior where part of the intended HTML randomly vanishes.

2) As to the CSS, I this is the application.css file and I assume that the only change you added is the first line including the <style> tags?
If that's the case, then the problem is that you can't put <style> tags inside a CSS file. It'll ignore the tag and its content. <style> tags are only for embedding CSS inside HTML.

Remove those tags and then the zero padding on HTML modules contained in dashboardCells will start taking effect, and that should make the HTML modules line up better.

View solution in original post

0 Karma

sideview
SplunkTrust
SplunkTrust

1) I think one big problem is that you're missing the closing dollar sign on $results[0].dest_port_state$

Since there's no closing dollar sign, the code unfortunately eats up the entire rest of the HTML param, so it never gets displayed. Not the first time a user has lost some hours to this problem. I might change the code so that it generates an error if it ever sees an unclosed dollar sign... Presumably the behavior of a big red error message is preferable to the behavior where part of the intended HTML randomly vanishes.

2) As to the CSS, I this is the application.css file and I assume that the only change you added is the first line including the <style> tags?
If that's the case, then the problem is that you can't put <style> tags inside a CSS file. It'll ignore the tag and its content. <style> tags are only for embedding CSS inside HTML.

Remove those tags and then the zero padding on HTML modules contained in dashboardCells will start taking effect, and that should make the HTML modules line up better.

0 Karma

sideview
SplunkTrust
SplunkTrust

Hm. I think I understand. But if you use the grp1, grp2 and grp3 layoutPanels, they are basically designed to split the available width. ie if you have three they will each be 33% width etc.. If that's unwanted it may make more sense to leave them in the same layoutPanel but then use CSS to arrange them with float and margin styles?

eg: this would line the HTML modules up left to right, but without splitting the full width.

.splView-pingstatus .panel_row1_col .HTML {
    float:left;
    margin-left:20px;
}

I'm assuming here that your view is called "pingstatus"

0 Karma

ronaldmexico
Explorer

OK so I made progress. I got the rangemap working fine once I actually used the right fields from the eval statement. That's working.

With the HTML, it looks like you can specify the same grp# regardless of the parent (as long as the row/col match)? I am still having a problem though. The two fields that are in the valueDisplay div are showing up in the right spot but the $results[0].dest_host$ token for the 2nd and 3rd hosts are offset to the right. Any thoughts on how to align that properly with the first?

Thanks much for all your posts on here. I would be 100% screwed if not for you

0 Karma

ronaldmexico
Explorer

thank you very much! of course it was something simple like that. 😞 with respect to the CSS issue, if you could be more precise in your example text for noobs like myself you probably wont have to answer a question like this again.

now i have two more things to figure out:

1) can i group these results all in one "div"/section? i know about the panel_row#_col#_grp# attribute but the documentation indicates it needs to be all under the same parent that specifies the group. with multiple PostProcess nodes that doesnt seem possible?

2) the rangemap isnt working.. no clue why...any ideas?

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...