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!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...