forked from splunk/splunk-sdk-javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
310 lines (288 loc) · 12.1 KB
/
Copy pathindex.html
File metadata and controls
310 lines (288 loc) · 12.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Splunk SDK for JavaScript</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="resources/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
body {
}
section {
padding-top: 10px;
padding-bottom: 10px;
border-top: 2px solid #DDD
}
.code {
font-family: Monaco, 'Andale Mono', 'Courier New', monospace;
}
button.run {
float: right;
}
pre {
overflow-x: auto;
}
code {
font-size: 12px!important;
background-color: ghostWhite!important;
color: #444!important;
padding: 0 .2em!important;
border: 1px solid #DEDEDE!important;
}
img.example {
width: 220px;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
min-width: 940px;
padding-top: 60px;
}
.jumbotron .inner {
background: transparent #111 top center;
padding: 20px 0;
-webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
.jumbotron h1,
.jumbotron p {
margin-bottom: 9px;
color: #fff;
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.jumbotron h1 {
font-size: 45px;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.jumbotron p {
font-weight: 300;
}
.jumbotron .lead {
font-size: 20px;
line-height: 27px;
}
.jumbotron p a {
color: #fff;
font-weight: bold;
}
/* Specific jumbotrons
------------------------- */
/* main docs page */
.masthead {
background-color: #111;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
background-image: -webkit-linear-gradient(#222, #000);
background-image: -moz-linear-gradient(#222, #000);
background-image: -o-linear-gradient(top, #222, #000);
background-image: -khtml-gradient(linear, left top, left bottom, from(#222), to(#000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0); /* IE8 and down */
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script type="text/javascript" src="resources/jquery.min.js"></script>
<script type="text/javascript" src="resources/bootstrap.tabs.js"></script>
<script type="text/javascript" src="../../client/splunk.js"></script>
<script>
</script>
</head>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#">SDK Examples</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#simple">Simple</a></li>
<li><a href="#ui">UI Components</a></li>
<li><a href="#3viz">3rd Party Viz</a></li>
<li><a href="#minisplunk">Minisplunk</a></li>
</ul>
</div>
</div>
</div>
<header class="jumbotron masthead" id="overview">
<div class="inner">
<div class="container">
<h1>Splunk SDK for JavaScript</h1>
<p class="lead">
The Splunk SDK for JavaScript allows you to build complex applications and visualizations.<br>This page is your launchpad to the browser-side examples included in the Splunk SDK for JavaScript.
</p>
</div>
</div>
</header>
<div class="container">
<section>
<div class="page-header">
<h1>
Examples <small>... to show you the way</small>
</h1>
</div>
<div class="row">
<div class="span2">
<img src="resources/images/splunk.png">
</div>
<div class="span14">
<p>
We believe examples are key to increasing understanding and expertise of our SDKs. This page provides
a gateway to all of the browser-side examples, which take you from the simple stuff (listing apps and creating searches) to
more complicated use cases (integrating with third-party visualization tools), and finally to MiniSplunk, an example that
clones some of Splunk's core features.
</p>
<p>
A few notes:
<ul>
<li>
<p>
All of the examples (except MiniSplunk) provide you with code snippets and the
ability to run that code. They run against your own installation of Splunk (log in at the top
of the page). Don't just scan the code, go ahead and run the examples!
</p>
</li>
<li>
<p>
The JavaScript SDK communicates with splunkd, but it's not on the same host
as the web server that is serving your page. Due to the browser's Single Origin Policy, we can't communicate with it directly.
So, the examples provide all of the parameters to the example web server, which then proxies it to splunkd
(that's what those <code>ProxyHttp</code> lines are all about).
</p>
</li>
<li>
<p>
We highly recommend you open up the developer console while running the examples to see which requests the SDK
is making. It can be quite educational.
</p>
</li>
</ul>
</p>
</div>
</div>
</section>
<section id="simple">
<div class="row">
<div class="span4">
<a href="helloworld/index.html">
<img class="example" src="resources/images/simple.png">
</a>
</div>
<div class="span12">
<a href="helloworld/index.html"><h3>Simple examples ("Hello, world"-style)</h3></a>
<p>
These examples are meant to show off single, simple aspects of the SDK. These examples have nearly no configuration,
and are mirror images of the respective server-side examples. Here, you'll see how to list applications,
list saved searches and their queries, and create various types of searches (including real-time searches) and
display the results.
</p>
<p>
You can run each of these examples in your browser, and you'll see the output in a dedicated output
pane. Some examples have multiple versions—for example, some provide code with and without the
<code>splunkjs.Async</code> library.
</p>
</div>
</div>
</section>
<section id="ui">
<div class="row">
<div class="span4">
<a href="ui/index.html">
<img class="example" src="resources/images/ui.png">
</a>
</div>
<div class="span12">
<a href="ui/index.html"><h3>UI examples (with pretty pictures)</h3></a>
<p>
Splunk has always had very strong visualization capabilities, both for displaying an overview of your event
timeline, as well as charting your queries in meaningful ways. We're excited to be able to give
you access to the Splunk Timeline control and the Splunk Charting control, which are the
same controls that are included with Splunk 4.3+ (no Flash!). We didn't exclude or limit them in any way, and we hope
that you find them useful to better visualize your data.
</p>
<p>
These examples show how to use the Timeline and Charting controls with the SDK. They run a simple
search on Splunk and visualize the data as it becomes available.
</p>
<p>
<strong>Note:</strong> While the controls work best with the SDK (because it provides data in the expected formats), the
SDK itself is not required. You can use the minimal module (<code>splunk.ui.{min}.js</code>), which contains just the
asynchronous script loader to bring up the UI controls you want.
</p>
</div>
</div>
</section>
<section id="3viz">
<div class="row">
<div class="span4">
<a href="viz/index.html">
<img class="example" src="resources/images/3viz.png">
</a>
</div>
<div class="span12">
<a href="viz/index.html"><h3>Integration with third-party visualization tools (you might have other friends)</h3></a>
<p>
As we said, Splunk has extremely strong visualization tools. However, we simply can't think of (or
implement) every type of visualization out there. But now, with the JavaScript SDK, visualizing your Splunk
data in new and exciting ways has never been easier.
</p>
<p>
These examples show how to integrate Splunk search results with a couple of visualization libraries:
<ul>
<li>
<p>
<a href="http://code.google.com/apis/chart/" target="_blank"><strong>Google Charts</strong></a>—a simple, yet powerful
charting library provided by Google.
</p>
</li>
<li>
<p>
<a href="http://shutterstock.github.com/rickshaw/" target="_blank"><strong>Rickshaw</strong></a>—a
time-series visualization library, based on the extremely powerful <a href="http://mbostock.github.com/d3/" target="_blank">
d3</a> library.
</p>
<p>
<strong>Note:</strong> Due to browser limitations, the Rickshaw example doesn't work in Internet Explorer 9 or earlier.
</p>
</ul>
</p>
</div>
</div>
</section>
<section id="minisplunk">
<div class="row">
<div class="span4">
<a href="minisplunk/index.html">
<img class="example" src="resources/images/minisplunk.png">
</a>
</div>
<div class="span12">
<a href="minisplunk/index.html"><h3>MiniSplunk (the whole shebang)</h3></a>
<p>
As you can imagine, Splunk Web is the most complex Splunk application and biggest user of the REST API.
Given that premise, we thought it was important to show that our JavaScript SDK can
build a similar application—and so MiniSplunk was born.
</p>
<p>
MiniSplunk is the first example we wrote, and also the most complex. It shows how to build a full
application using the JavaScript SDK. You can search, manage jobs, and even map your search results (if they
include geodata). We will keep updating the example with additional advanced features as time goes on.
</p>
</div>
</div>
</section>
<footer>
<p>© Splunk 2011-2012</p>
</footer>
</div> <!-- /container -->
</body>
</html>