GlobalNOC SNAPP Frontend

IU GlobalNOC Systems Engineering http://globalnoc.iu.edu


            2711 E 10th Street
            Bloomington, IN
            47408
            USA
        

3.0.11


Table of Contents

1. Introduction
2. Getting Started
Searching
Browsing
Saved
Advanced
3. Interaction
Zooming
Graph Updates
Selecting Collections
Aggregation
Types of Aggregation
All Graphs Side by Side
Saving the Current View
Resizing
Graph Averages
4. Parameters and Terminology
Time Interval
RRA
Display
Collections
95th Percentile
Viewable Data Sources
Standardize Y-Axis

Chapter 1. Introduction

The GlobalNOC SNAPP Frontend is a set of visualization tools designed to interact with the SNAPP backend in a way that provides users an easy method of creating visually appealing graphs representing their network devices' statistics. This guide is intended to give a brief rundown of the features of the frontend for new users and provide a couple of examples.

Chapter 2. Getting Started

When visiting the frontend for the first time, you will be presented with a page like the following, which is the default SNAPP home page. On future visits, the SNAPP frontend will remember your place and will return you to the same area where you last left off. From here you can begin to navigate, find, and visualize the data in a number of ways.

Searching

If you are looking for one specific collection, searching is the almost always the best way to find it. Simply type in the search term you are looking for and pick the result out of the set of matches that appears. You can also type in several terms separated by a space and the resulting matches will only include ones that match all of the terms.

Browsing

Collections are also organized into hierarchical categories generated from the GRNOC Database. Browsing lets you navigate these categories and perform actions on individual or groups of collections. Selecting an option in the dropdown will drill down into that category, narrowing down your results list and offering the possibility to drill down even further if the option is available. You can further filter the results based on the Type of Data dropdown, for example opting to only show CPU information or Interfaces. As with searching, clicking on a row in the result set will show you information for that collection.

Saved

The Saved tab is an easy to access and view location that only shows custom categories that have been created by users manually. It has the same feature set as browsing or searching, including the ability to make new custom categories based on collections in existing custom categories.

Advanced

The Advanced tab currently hosts the Custom Category management section, which allows you to create, delete or edit custom categories based on whatever collections you want. These categories become immediately visible under the "Custom" top level category in the Browse hierarchy or in the Saved tab. When creating a new custom category, first give the category a name. Add or remove collections from this custom category using the arrows between the tables. Filter the Available Collections table by using the category browser exactly as if on the Browse tab to help narrow down the results, or search through the table with the provided Search bar.

When adding collections using the filters, the table on the left will populate with corresponding values and can be added to the table on the right with the >> arrows button. When adding from the search, the item will be added automatically when clicked from the presented dropdown list. To remove a collection from the category, select it and click the << arrows button. When done, click the Submit button to save the changes.

Chapter 3. Interaction

Zooming

When viewing an individual graph or an aggregate graph, you can zoom in to a specific section by clicking and dragging on the larger, main graph. The overlay graph underneath the main graph will update to reflect the section that you have zoomed in on. Once zoomed you can use the Zoom Out button to go back one zoom history level or the Reset button to return to the original state. Note that when zoomed, certain peaks that were not visible previously may become visible as the need to average the data points to fit within the available space lessens.

Graph Updates

By default, all of the non Custom Timeframe graphs SNAPP generates automatically poll the server for new information and update themselves. The small dot at the top right corner of each graph

Selecting Collections

Within a table of collections such as those made when browsing or searching you can select arbitrary collections using standard keyboard modifier keys, such as the control key (command key on Macs) and the shift key. If you are currently viewing the large, interactive graph these additional graphs will be added into the aggregate graph. If you are currently viewing side by side graphs, this will add more graphs to the side by side mode. You can toggle between these by either clicking the "Show This View Side by Side" link when viewing an aggregate or clicking the aggregate graph when viewing side by side.

Aggregation

An aggregrate graph can be constructed of all the collections in the current view. In order to make an aggregate graph, all of the searched collections must be of the same type such as Interfaces. Simply pressing the "Aggregate Graph" button will generate the aggregate graph. There is a hard cap of 3000 collections that are permissible to be in one aggregate graph, at which point it will fail to draw. Naturally, the more collections and larger the time span, the more time the graph will take to be rendered.

Types of Aggregation

In addition to the default aggregate view, two other options are provided for aggregate views. The first is "Overlay", which makes collections in the aggregate individually layered upon one another. The other is "Stacked" in which individual collections are displayed but stacked one upon the other, effectively showing the same data as the default aggregate view but showing what collections comprise which amount. By clicking the "Parameters" button underneath the graph and then the "Display" option, the view can be toggled. A maximum of two viewable datasources is possible when using stacked or overlay graphs, with the second one being displayed under the Y-Axis. Both of these options are best suited to aggregate graphs containing relatively few collections. An example stacked graph:

All Graphs Side by Side

It is also possible to see all the individual graphs side by side by clicking the "All Graphs Side by Side" button when searching or browsing. This will bring up a page containing all the graphs in the current view. Unlike Aggregate Graphing, all types of data can be viewed simultaneously in the Side by Side mode.

Saving the Current View

The "Save Current View" button functions exactly like adding a custom category, but it creates one based on all the collections you are currently looking at. This new custom category will be viewable under the Saved tab or under "Custom" when browsing and is editable and deletable via the Advanced tab under Manage Custom Categories. When clicking the button you will be prompted to name this custom category after which it will be saved.

Resizing

In order to get a better view of certain things, parts of the SNAPP frontend are resizeable. By clicking the collapse button, for example, the entire left hand navigation panel can be hidden. Clicking this button again will return it to its former size.

Besides collapsing, the left hand menu can be expanded to allow for more data to be shown within in. This is accomplished by clicking on the handle on the middle of the right hand side of the panel and then dragging to the desired width.

Graph Averages

When viewing the graph of a particular collection, the average sampling interval used for the data of that graph is listed at the top. For instance, the following graph is using 14 minute averages in its sampling interval:

The underlying data for this graph is sampled at 10 seconds, but there would be too many data points to properly fit them on the graph. Therefore, the 10 second data was further averaged at an interval that would scale properly to the horizontal size of the graph, in this case 14 minute averages. Depending upon your requested time period for the graph, the underlying data used may be at a lower resolution. For instance, if you asked to graph a month's worth of data, you may end up using the 1 hour RRA instead of the highest resolution of 10 seconds. The graph could average the data even further in order to properly fit the data points in the graph. The sampling interval used for a graph is therefore a combination of both the time period of the data requested as well as the horizontal width of the graph.

Chapter 4. Parameters and Terminology

In the graphing sections, you can specifiy what parameters are used to create the graphs from simple dropdowns and buttons. This section is designed to help explain what they mean and do.

Time Interval

The "Time Interval" option indicates what length of time the graph spans. For all values except "Custom Time Frame", the end time is assumed to be now and the start time is however far back the option you have selected goes. For example, the "Day" option refers to all data from 24 hours ago up to now.

The "Custom Time Frame" lets you specify a specific time in the past to get data from. Using the calendar widgets presented, pick a start and end day. Additionally, you can pick specific hour and minutes using the dropdowns below the calendars. Once you have the desired date range, click "Graph It" to render the graph.

RRA

RRA indicates which Round Robin Archive the backend should be using when fetching data. There is no general rule to using this as it varies greatly from instance to instance and depends on how it was originally set up. Generally speaking, however, MAX RRAs store the maximum value for a given period of time, AVERAGE RRAs store the average value, LAST RRAs store the last value in the set, and MIN RRAs store the lowest value.

Display

The Display option allows you to toggle which version of an aggregate graph you are viewing. Your graph must consist of at least 2 collections for this to be relevant. Overlay graphs have all the collections laid transparently on top of one another. Stacked graphs look like the standard aggregate graphs, but with different colors denoting what amount each collection takes up in the graph.

Collections

Clicking the Collections button brings up a searchable menu where you can add collections at will to the current graph. After searching, click the checkbox in the "Active" column to add it to the graph, or uncheck it to remove it.

95th Percentile

The 95th Percentile dropdown controls how the 95th percentile line is calculated. The default is Graph Points, which as the name suggests uses the points the make up the graph to determine what the 95th percentile is. This is generally faster and makes more sense visually but is not always 100% accurate. If the graph you are viewing is not using the highest resolution data, the points on the graph will be averaged to make them fit. By selecting a specific resolution for 95th percentile, you can force it to be calcuated using the raw values instead of the graph points.

Viewable Data Sources

The Viewable Data Sources is a list of all the types data being collected for this particular class of collection. By toggling the buttons on or off you can adjust what components are presently visible. At this time, the 95th percentile is always based on the highest datasource.

Standardize Y-Axis

When viewing all graphs side by side, it is possible to cause each graph to have a standard Y-Axis range. Type in the value, select the units, and click "Apply" and all the graphs should update to reflect the new range. This has the effect of being able to see how each graph compares to one another visually and at a glance. Keep in mind that it is possible that a graph's data extends beyond the selected range. To change the axis back to auto calculating, set the units to "None" and click Apply.