Trying to build a simple HTML dashboard but there seems to be some foundational thing I'm not understanding. I've created a simple dashboard and converted to HTML, in the editor I've narrowed it down to just this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test HTML | Splunk</title>
<link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
</head>
<body>
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="span 12 dashboard-header clearfix">
<h2>test HTML</h2>
</div>
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="panel-head">
<p>panel-head</p>
</div>
<div class="panel-body">
<p>panel-body</p>
<div class="splunk-view" id="single1"></div>
</div>
</div>
</div>
</div>
</div>
<!--
END LAYOUT
-->
<script type="text/javascript">
var deps = [
"splunkjs/mvc",
"splunkjs/mvc/singleview",
"splunkjs/mvc/searchmanager"
];
require(deps, function() {
var SingleView = require("splunkjs/mvc/singleview");
var SearchManager = require("splunkjs/mvc/searchmanager");
new SingleView({
id: "single1",
managerid: "search1",
beforeLabel: "count of Events",
el: $("#single1")
});
new SearchManager({
id: "search1",
earliest_time: "-15m",
latest_time: "now",
search: "index=_internal | stats count"
});
});
</script>
</body>
</html>
But it's just an empty page with just panel-head and panel-body showing up, the styles seem to be all messed up too. I suspect that I must create a new Splunk app and build the dashboards html pages in my custom app. Is that what I'm missing?
What my code is trying to accomplish, a working dashboard (minimal code) using the example code from the Web Framework Toolkit for the SingleView form component.
What I'm trying to accomplish, understanding how to start a Dashboard using a sample / examples from the documentation / web framework toolkit with minimum amount of required code.
... View more