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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...