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.
Get Updates on the Splunk Community!

Thanks for the Memories! Splunk University, .conf25, and our Community

Thank you to everyone in the Splunk Community who joined us for .conf25, which kicked off with our iconic ...

Data Persistence in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. What happens if the OpenTelemetry collector ...

Introducing Splunk 10.0: Smarter, Faster, and More Powerful Than Ever

Now On Demand Whether you're managing complex deployments or looking to future-proof your data ...