<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basic Page</title>
<link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
</head>
<body>
<h4>A chart and an events viewer displaying results of a search</h4>
<div id="mychart"></div>
<div id="myeventsviewer"></div>
<script src="static/splunkjs/config.js"></script>
<script>
// Configure SplunkJS Stack
splunkjs.config({
scheme: "https",
host: "192.168.1.6",
port: 8089,
authenticate: function(done) {
// TO DO: Get a session key from Splunk
// This example assumes you've stored it and the username in cookies
require([
"jquery",
"jquery.cookie"
], function($) {
// Retrieve the session key and username from cookies
var splunkSessionKey = $.cookie("splunk_sessionkey");
var splunkCurrentUser = $.cookie("splunk_username");
// Log in using the session key and username
if (splunkSessionKey) {
done(null, {sessionKey: splunkSessionKey, username: splunkCurrentUser});
}
else {
// TO DO: Get a session key from Splunk
}
});
}
});
// Configure the web site's base URL
require.config({
baseUrl: "static/"
});
// Set up the Web Framework components
var deps = [
"splunkjs/ready!",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/chartview",
"splunkjs/mvc/eventsviewerview"
];
require(deps, function(mvc) {
// Load individual components
var SearchManager = require("splunkjs/mvc/searchmanager");
var ChartView = require("splunkjs/mvc/chartview");
var EventsViewerView = require("splunkjs/mvc/eventsviewerview");
// Instantiate the views and search manager
var mysearch = new SearchManager({
id: "search1",
preview: true,
cache: true,
status_buckets: 300,
search: "index=_internal | head 1000 | stats count by sourcetype"
});
var mychart = new ChartView ({
id: "chart1",
managerid: "search1",
type: "bar",
el: $("#mychart")
}).render();
var myeventsviewer = new EventsViewerView ({
id: "eviewer1",
managerid: "search1",
el: $("#myeventsviewer")
}).render();
});
</script>
</body>
</html>