Book Image

Learning Splunk Web Framework

By : Vincent Sesto
Book Image

Learning Splunk Web Framework

By: Vincent Sesto

Overview of this book

Building rich applications on the Web using Splunk is now simpler than ever before with the Splunk Web Framework. It empowers developers to build their own web applications with custom dashboards, tables, charts, form searches, and other functionalities in the datasets at their disposal. The book will start with the fundamentals of the Splunk Web Framework, teaching you the secrets of building interesting and user-friendly applications. In the first application, you will learn to analyze and monitor traffic hitting the NASA website and learn to create dashboards for it. You will then learn additional, and more detailed, techniques to enhance the functionalities of the app such as dashboards and forms, editing simple XML, using simple XML extensions, tokens, post-process searches, dynamic drill-downs, the Splunk Web Framework and REST API, and much more. The second app will use historical stock market data and will create custom dashboards using Splunk Web Framework; the book will now cover important topics such as creating HTML dashboards, enhancing the visual appeal of the app using CSS, and moving your app with SplunkJS. The book will provide different and interesting examples instead of the usual “Log, Index, Search, and Graph” so that Splunk will be the first tool readers think of to resolve a problem.
Table of Contents (15 chapters)
Learning Splunk Web Framework
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Customizing JavaScript Modules in HTML


We are going to add a table to the bottom of the page to show the data for the highest open values for our stock market data. The table will be simple and only have two rows, but our changes to our JavaScript code will then allow the row to be expanded and display a timechart of the opening stock values.

  1. You should still be in the html directory of your Splunk App. Open up the stock_market_historical_overview_html.html file in your text editor. We will start by adding in the div elements that will set up the table that will be displayed at the bottom of the page. Move down to line 62 of our code and add the following lines:

          62     <div id="row3" class="dashboard-row dashboard-row3"> 
          63         <div id="panel1" class="dashboard-cell"
                     style="width: 100%;"> 
          64             <div class="dashboard-panel clearfix"> 
          65  
          66                 <div class="panel-element...