Dashboards & Visualizations

How to implement/ to assimilate my list to html?

yaghobieh
New Member

Hi I came from Angular, NodeJs And PHP code. so, plz forgive me about the foolish questions.

I want take my info from Dashboard on my localhost, and like ng-reapet in angular or for loop
Create a Front page.

This is the code for example:

<div></div>

I want create this div by the info from the splunk and duplication like the number of loops in the DB (Dashboard).

Thank you all 🙂

Tags (1)
0 Karma

woodcock
Esteemed Legend

What do you mean "implement to my Front page I built"? Do you mean "make this the landing page of Splunk when I login"? If so, you can put your stuff in an app and then edit your user settings and make this new app your Default app. Also check out this app:
https://splunkbase.splunk.com/app/2991/

0 Karma

niketn
Legend

You will have to do this in HTML Dashboard since Angular Controller does not seem to work in Simple XML dashboard. (Refer to documented steps with output: https://wiki.splunk.com/User_talk:Niketnilay#Topic_4:_Using_Angular_JS_in_Splunk_HTML_dashboard)

Step 1:
Create HTML panel in Splunk Simple XML dashboard (note it will not work right away):

 <row>
   <panel>
     <html>
        <!-- ng-controller will work only in HTML Dashboard-->
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1 ng-repeat="x in records">{{x}}</h1>
        </div>
     </html>
   </panel>
</row>

Step 2:
Create a script for Angular code say angular_dashboard_names.js:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "Dashboard1",
        "Dashboard2",
        "Dashboard3",
        "Dashboard4"
    ]
});

Step 3:
Get local copy of angular.min.js and save to your appserver/static folder(you might have to create one if it does not exist).
Depending on your Splunk App name, path may be something like the following:

$SPLUNK_HOME/etc/app/<YourAppName>/appserver/static

Add JS script files to root node of your dashboard (depending on whether the view is dashboard or form)

<dashboard script="angular.min.js,angular_dashboard_names.js">

Step 4:
Convert the dashboard from Simple XML to HTML using Convert to HTML option

PS: If it does not work you might have to bump Splunk and try ( i.e. restart Splunk and refresh browser history and check.)

alt text

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

yaghobieh
New Member

If I have dashboard like this:
http://imgur.com/a/18nxE

And I want implement to my Front page i built
How can I do it?

0 Karma

woodcock
Esteemed Legend

Please give much more detail and if possible, have somebody else proofread your translation. I don't see how your question could be understood as it is now.

0 Karma

yaghobieh
New Member

If I have dashboard like this:
http://imgur.com/a/18nxE

And I want implement to my Front page i built
How can I do it?

0 Karma
Get Updates on the Splunk Community!

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...