Our code so far looks very similar to the code from the HTML dashboard that we have been working on in the previous chapters. One major difference that you need to note is that we need to set up authentication with our Splunk environment to allow communication to take place. In our previous chapters, this was not an issue as we were using our Splunk environment as our development platform, but now when we move our web pages off Splunk, this needs to be taken into consideration.
This is one of the great features of SplunkJS. By using the config.js JavaScript file, it allows us to easily authenticate without the need for any complicated coding. It's now time to implement our authentication as part of our website, so let's continue with our coding:
- We should already have our
company_site.htmlfile open and we can start by moving down to the bottom of the file, where we will start to add the JavaScript section of our code:64 <!-- JavaScript section of the code --> 65 <script src="../static/splunkjs/config.js"></script> 66 <script>Our code has a dependency on SplunkJS-specifically on the
config.jsfile. This is where we have added this as a source for our code to be able to use. - We can now use the config function within our code and the following lines set up our configuration to then authenticate with our Splunk environment:
67 splunkjs.config({ 68 proxyPath: '/proxy', 69 scheme: 'https', 70 host: 'splunkdev', 71 port: 8089, 72 authenticate: {username: 'admin', password: 'notchangeme'} 73 }); 74 </script>It looks a little simple, but that's all you need to do to now communicate and query data from your Splunk environment. You will remember that these credentials match the proxy server that we set up in Nginx earlier.
Tip
In the preceding code, we are providing our username and password in plain text, which does bring up some security issues. We have done this to display the ease of connecting to our Splunk server, but in a publically accessible website, we would ensure that our username and passwords were encrypted or add a username and password HTML input to allow the user to enter their details when needed.
- If you remember in our previous chapters when we worked with the HTML dashboards, there were a number of libraries that we needed to use to implement our search queries and our visualizations. We set up the
baseUrllocation so that we can simplify the loading of all the required libraries that we needed:76 <script> 77 require.config({baseUrl: "../static/"}); 78 </script> - We can now provide a list of all the libraries that we need to use and associate them back with variables, which can then be used in our functions later in the code:
80 <script> 81 require([ 82 "jquery", 83 "splunkjs/mvc/searchmanager", 84 "splunkjs/splunk", 85 "splunkjs/ready!", 86 "splunkjs/mvc/singleview", 87 "splunkjs/mvc/chartview", 88 ], function( 89 $, 90 SearchManager, 91 sdk, 92 mvc, 93 SingleView, 94 ChartView) 95 {The number of functions may seem a little small compared to our previous work, but remember that we do not need to worry about all the Splunk-related libraries that are needed for things such as the header and footer specific for Splunk HTML dashboards.
- This now allows us to set up the code to create search managers for our queries and our visualizations. Our first search manager is in the following code:
97 var manager = new SearchManager({ 98 id: "search1", 99 search: "source="*yhoostock.csv" | chart max(Close) AS close | eval Yahoo=round(close,2) | table Yahoo", 100 earliest_time: "-1y@y" 101 });As you can see, it is the same as we would implement a search manager in a HTML dashboard. The preceding code will provide the highest closing value for our previous year.
- We only have one of our searches set up. Let's now implement the search managers for the rest of the queries that we want to run. We need to have a query to provide the average closing value, and we will also set up a timechart query for our chart, which we are going to place at the bottom of our web page:
103 var manager = new SearchManager({ 104 id: "search2", 105 search: "source="*yhoostock.csv" | chart avg(Close) AS close | eval Yahoo=round(close,2) | table Yahoo", 106 earliest_time: "-1y@y" 107 }); 108 109 var manager = new SearchManager({ 110 id: "search3", 111 search: "source="*yhoostock.csv" | timechart span=1d values(Close) AS YahooClose", 112 earliest_time: "-1y@y" 113 }); - We can now set up visualizations for our searches. We have two searches that would use a
SingleViewvisualization if we were implementing this in Splunk directly. As a result, we will utilize theSingleViewfunction that we imported as part of SplunkJS:115 // Single View and Charts 116 var single1 = new SingleView({ 117 id:"maximum-single", 118 managerid: "search1", 119 el: $("#maxsingle1") 120 }).render(); 121 122 var single2 = new SingleView({ 123 id:"average-single2", 124 managerid: "search2", 125 el: $("#avgsingle2") 126 }).render();Simply, we create a variable for each of the visualizations using the
SingleViewfunction. We use one of the searches that we defined in the previous code and then provide it with an element ID (el), which can then be used as part of our HTML div elements. - The interesting thing is that JavaScript allows us to use SplunkJS functions without the need to assign them to a variable. Let's try that out in the next part of the code, where we want to set up a chart element that will be displayed at the bottom of our page:
128 new ChartView({ 129 managerid: 'search3', 130 el: $('#yearchart').append('<div></div>'), 131 "charting.legend.placement": "bottom" 132 }).render();As you can see, we can specify the use of
ChartViewwithout needing to assign it to a variable. - Finally, we can close off our code, including the
script,body, andhtmlelements:134 }); 135 </script> 136 137 </body> 138 </html> - Save your file, and because we have Nginx already running, there is no need to reload the Splunkcache or anything like that. It is now the moment of truth. We have put a lot of work into our new company website, and if you have set up your web server with the domain of localhost, you can go to the following URL and see if your page loads:
http://localhost:8080/company_site.html.
If you have been working through the examples so far, I hope you're excited with what we have come up with. Our stock broking website has come up looking nice and clean, and I think gives users some excellent insights into the Yahoo! historical stock market values over 2015.
We have been able to use Bootstrap styles to make a clean and user-friendly interface. We extracted values directly from our Splunk index using the search managers that we created in our code, and finally, we used a Splunk visualization in the form of a chart to show the historical closing stock market values over one year.
The question we need to ask though is: does this work with a mobile browser on a smartphone or tablet? If we use a smartphone emulator, we see can that our jumbotron heading will scale to the size of our browser, our maximum and average stock value elements will move and display underneath each other, and our chart will fit in nicely down the bottom of the web page:
The emulator doesn't give us the full details of how the page is scaled for a smaller browser.
As you can see, when we shrink the width of the browser, the rows that we set up to display the highest and average closing values are now stacked on top of each other to fit into our smaller screen. The headings also scale to a nicer size, and our chart at the bottom of the screen fits into the width as well.