ifttt-gdash 0.0.2a

data/public/lib/variables.less

@@ -0,0 +1,60 @@
+/* Variables.less
+ * Variables to customize the look and feel of Bootstrap
+ * ----------------------------------------------------- */
+
+
+// Links
+@linkColor:         #0069d6;
+@linkColorHover:    darken(@linkColor, 15);
+
+// Grays
+@black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 75%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+// Accent Colors
+@blue:              #049CDB;
+@blueDark:          #0064CD;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+
+// Baseline grid
+@basefont:          13px;
+@baseline:          18px;
+
+// Griditude
+// Modify the grid styles in mixins.less
+@gridColumns:       16;
+@gridColumnWidth:   60px;
+@gridGutterWidth:   10px;
+@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
+@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Color Scheme
+// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
+@baseColor:         @blue;                  // Set a base color
+@complement:        spin(@baseColor, 180);  // Determine a complementary color
+@split1:            spin(@baseColor, 158);  // Split complements
+@split2:            spin(@baseColor, -158);
+@triad1:            spin(@baseColor, 135);  // Triads colors
+@triad2:            spin(@baseColor, -135);
+@tetra1:            spin(@baseColor, 90);   // Tetra colors
+@tetra2:            spin(@baseColor, -90);
+@analog1:           spin(@baseColor, 22);   // Analogs colors
+@analog2:           spin(@baseColor, -22);
+
+
+
+// More variables coming soon:
+// - @basefont to @baseFontSize
+// - @baseline to @baseLineHeight
+// - @baseFontFamily
+// - @primaryButtonColor
+// - anything else? File an issue on GitHub

data/sample/README.md

@@ -0,0 +1,5 @@
+A sample dashboard, place these files in _graph_templates/dashboards/email_ and
+you will see a new dashboard in the UI
+
+2 sample images are included, one of the normal dashboard and one of the full
+screen view

data/sample/email/cpu.graph

@@ -0,0 +1,19 @@
+title       "Combined CPU Usage"
+vtitle      "percent"
+area        :stacked
+description "The combined CPU usage for all Exim Anti Spam servers"
+
+field :iowait, :scale => 0.001,
+               :color => "red",
+               :alias => "IO Wait",
+               :data  => "sumSeries(derivative(mw*.munin.cpu.iowait))"
+
+field :system, :scale => 0.001,
+               :color => "orange",
+               :alias => "System",
+               :data  => "sumSeries(derivative(mw*.munin.cpu.system))"
+
+field :user, :scale => 0.001,
+             :color => "yellow",
+             :alias => "User",
+             :data  => "sumSeries(derivative(mw*.munin.cpu.user))"

data/sample/email/dash.yaml

@@ -0,0 +1,2 @@
+:name: Email Metrics
+:description: Hourly metrics for the email system

data/sample/email/io.graph

@@ -0,0 +1,12 @@
+title   "Combined IO"
+area    :first
+vtitle  "blocks"
+
+field :down, :color => "blue",
+               :alias => "Writes",
+               :data  => "sumSeries(derivative(mw*.munin.iostat.dev*_write))"
+
+field :up, :color => "green",
+               :alias => "Reads",
+               :data  => "sumSeries(derivative(mw*.munin.iostat.dev*_read))"
+

data/sample/email/load.graph

@@ -0,0 +1,6 @@
+title   "Combined Load"
+area    :all
+
+field :up, :color => "green",
+               :alias => "Up",
+               :data  => "sumSeries(mw*.munin.load.load)"

data/sample/email/network.graph

@@ -0,0 +1,11 @@
+title   "Combined Network Usage"
+vtitle  "bps"
+area    :first
+
+field :up, :color => "green",
+               :alias => "Up",
+               :data  => "sumSeries(nonNegativeDerivative(mw*.munin.if_*.up))"
+
+field :down, :color => "blue",
+               :alias => "Down",
+               :data  => "sumSeries(nonNegativeDerivative(mw*.munin.if_*.down))"

data/views/README.md

@@ -0,0 +1,177 @@
+What?
+=====
+
+A simple Graphite dashboard built using Twitter's Bootstrap.
+
+Adding new dashboards is very easy and individual graphs are
+described using a small DSL.
+
+See the _sample_ directory for a sample dashboard configuration.
+
+![Sample dashboard](https://github.com/ripienaar/gdash/raw/master/sample/email.png)
+
+Config?
+-------
+
+This dashboard is a Sinatra application, I suggest deploying it
+in Passenger or other Sinatra application server.
+
+A sample _gdash.yaml-sample_ is included, you should rename it to
+_gdash.yaml_ and adjust the url to your Graphite etc in there.
+
+The SinatraApp class take two required arguments:
+
+    * Where graphite is installed
+    * The directory that has your _dashboards_ directory full of templates
+
+and additional options:
+
+    * The title to show at the top of your Graphite
+    * A prefix to prepend to all URLs in the dashboard
+    * How many columns of graphs to create, 2 by default.
+    * How often dashboard page is refreshed, 60 sec by default.
+    * The width of the graphs, 500 by default
+    * The height of the graphs, 250 by default
+    * Where your whisper files are stored - future use
+    * Optional interval quick filters
+
+Creating Dashboards?
+--------------------
+
+You can have multiple top level categories of dashboard.  Just create directories
+in the _templatedir_ for each top level category.
+
+In each top level category create a sub directory with a short name for each new dashboard.
+
+You need a file called _dash.yaml_ for each dashboard, here is a sample:
+
+    :name: Email Metrics
+    :description: Hourly metrics for the email system
+
+Then create descriptions in files like _cpu.graph_ in the same directory, here
+is a sample:
+
+    title       "Combined CPU Usage"
+    vtitle      "percent"
+    area        :stacked
+    description "The combined CPU usage for all Exim Anti Spam servers"
+
+    field :iowait, :scale => 0.001,
+                   :color => "red",
+                   :alias => "IO Wait",
+                   :data  => "sumSeries(derivative(mw*munin.cpu.iowait))"
+
+    field :system, :scale => 0.001,
+                   :color => "orange",
+                   :alias => "System",
+                   :data  => "sumSeries(derivative(mw*.munin.cpu.system))"
+
+    field :user, :scale => 0.001,
+                 :color => "yellow",
+                 :alias => "User",
+                 :data  => "sumSeries(derivative(mw*.munin.cpu.user))"
+
+The dashboard will use the _description_ field to show popup information bubbles
+when someone hovers over a graph with their mouse for 2 seconds.
+
+The graphs are described using a DSL that has its own project and documented
+over at https://github.com/ripienaar/graphite-graph-dsl/wiki
+
+At the moment we do not support the _Related Items_ feature of the DSL.
+
+Template Directory Layout?
+--------------------------
+
+The directory layout is such that you can have many groupins of dashboards each with
+many dashboards underneath it, an example layout of your templates dir would be:
+
+        graph_templates
+        `-- virtualization
+            |-- dom0
+            |   |-- dash.yaml
+            |   |-- iowait.graph
+            |   |-- load.graph
+            |   |-- system.graph
+            |   |-- threads.graph
+            |   `-- user.graph
+            `-- kvm1
+                |-- dash.yaml
+                |-- disk_read.graph
+                |-- disk_write.graph
+                |-- ssd_read.graph
+                `-- ssd_write.graph
+
+Here we have a group of dashboards called 'virtualization' with 2 dashboards inside it
+each with numerous graphs.
+
+You can create as many groups as you want each with many dashboards inside.
+
+Custom Time Intervals?
+--------------------
+
+You can reuse your dashboards and adjust the time interval by using the following url
+structure:
+
+    http://gdash.example.com/dashboard/email/time/-8d/-7d
+
+or
+
+    http://gdash.example.com/dashboard/email/?from=-8d&until=-7d
+    http://gdash.example.com/dashboard/email/full/2/600/300?from=-8d&until=-7d
+
+This will display the _email_ dashboard with a time interval same day last week.
+If you hit */dashboard/email/time/* it will default to the past hour (*-1hour*)
+See http://graphite.readthedocs.org/en/1.0/url-api.html#from-until for more info
+acceptable *from* and *until* values.
+
+Quick interval filters shown in interface are configurable in _gdash.yaml_ options sections. Eg:
+
+	:options:
+           :interval_filters:
+             - :label: Last Hour
+               :from: -1h
+               :to: now
+             - :label: Last Day
+               :from: -1day
+             - :label: Current Week
+               :from: monday
+               :to: now
+
+Quick filter is not shown when *interval_filters* section is missing in configuration file.
+
+Time Intervals Display?
+-----------------------
+
+If you configure time intervals in the config file you can click on any graph in
+the main dashboard view and get a view with different time intervals of the same
+graph
+
+	:options:
+	  :intervals:
+	    - [ "-1hour", "1 hour" ]
+	    - [ "-2hour", "2 hour" ]
+	    - [ "-1day", "1 day" ]
+	    - [ "-1month", "1 month" ]
+	    - [ "-1year", "1 year" ]
+
+With this in place in the _config.yaml_ clicking on a graph will show the 5 intervals
+defined above of that graph
+
+Full Screen Displays?
+---------------------
+
+You can reuse your dashboards for big displays against a wall in your NOC or office
+by using the following url structure:
+
+    http://gdash.example.com/dashboard/email/full/4/600/300
+    http://gdash.example.com/dashboard/email/full/4?width=600&height=300
+
+This will display the _email_ dashboard in _4_ columns each graph with a width of
+_600_ and a height of _300_
+
+The screen will refresh every minute
+
+Contact?
+--------
+
+R.I.Pienaar / rip@devco.net / http://www.devco.net/ / @ripienaar

data/views/_interval_filter.erb

@@ -0,0 +1,5 @@
+<ul class="pills" style="margin-bottom: 0px;">
+  <% @interval_filters.each do |options| %>
+  <li<%= ' class="active"' if options[:from] == @dashboard.graph_from %>><%= link_to_interval(options) %></li>
+  <% end %>
+</ul>

data/views/dashboard.erb

@@ -0,0 +1,44 @@
+<% unless @error %>
+<h1><%= @dashboard.name %>&nbsp;<small><%= @dashboard.description %></small></h1>
+<%= erb :_interval_filter, :layout => false unless @interval_filters.empty? %>
+<div class="row">
+    <table>
+    <% row = 1 %>
+    <% grouped_graphs = @dashboard.graphs.in_groups_of(@graph_columns) %>
+    <% grouped_graphs.each do |graphs| %>
+        <tr>
+        <% graphs.each do |graph| %>
+            <% i = grouped_graphs.rindex(graphs) * @graph_columns + graphs.rindex(graph) %>
+            <td>
+            <% if graph %>
+                <% if graph[:graphite][:description] %>
+                    <a href='<%= [@prefix, params[:category], @params[:dash], 'details', i].join "/" %>'>
+                    <img src='<%= [@top_level[@params[:category]].graphite_render, graph[:graphite][:url]].join "?" %>' rel="<%= row == 1 ? 'popover-below' : 'popover-above' %>" title="<%= graph[:graphite][:title] %>" data-content="<%= graph[:graphite][:description] %>"></a>
+                <% else %>
+                    <a href='<%= [@prefix, params[:category], @params[:dash], 'details', i].join "/" %>'>
+                    <img src='<%= [@top_level[@params[:category]].graphite_render, graph[:graphite][:url]].join "?" %>'></a>
+                <% end %>
+            <% end %>
+            </td>
+        <% end %>
+        </tr>
+    <% row += 1 %>
+    <% end %>
+    </table>
+</div>
+<script>
+    $(function () {
+      $("img[rel=popover-above]")
+        .popover({
+          placement: "above", delayIn: 1000
+        })
+    })
+
+    $(function () {
+      $("img[rel=popover-below]")
+        .popover({
+          placement: "below", delayIn: 1000
+        })
+    })
+</script>
+<% end %>

data/views/detailed_dashboard.erb

@@ -0,0 +1,45 @@
+<% unless @error %>
+<h1><%= @dashboard.name %>&nbsp;<small><%= @dashboard.description %></small></h1>
+<div class="row">
+    <table>
+        <% row = 1 %>
+        <% @graphs.in_groups_of(@graph_columns) do |graphrows| %>
+          <tr>
+          <% graphrows.each do |graph| %>
+            <td>
+            <% if graph %>
+                <% if graph[:description] %>
+                    <img src='<%= [@top_level[@params[:category]].graphite_render, graph[:url]].join "?" %>' rel="<%= row == 1 ? 'popover-below' : 'popover-above' %>" title="<%= graph[:title] %>" data-content="<%= graph[:description] %>">
+                <% else %>
+                    <img src='<%= [@top_level[@params[:category]].graphite_render, graph[:url]].join "?" %>'>
+                <% end %>
+            <% end %>
+            </td>
+          <% end %>
+	  </tr>
+          <% row += 1 %>
+        <% end %>
+    </table>
+</div>
+<script>
+    $(function () {
+      $("img[rel=popover-above]")
+        .popover({
+          placement: "above", delayIn: 1000
+        })
+        .click(function(e) {
+          e.preventDefault()
+        })
+    })
+
+    $(function () {
+      $("img[rel=popover-below]")
+        .popover({
+          placement: "below", delayIn: 1000
+        })
+        .click(function(e) {
+          e.preventDefault()
+        })
+    })
+</script>
+<% end %>

data/views/full_size_dashboard.erb

@@ -0,0 +1,36 @@
+<html>
+<head>
+    <script src="<%= @prefix %>/js/jquery-1.5.2.min.js"></script>
+</head>
+<% if @error %>
+   <h2><%= @error %></h2>
+<% else %>
+<body bgcolor="black">
+<table width="100%" height="100%">
+    <% @dashboard.graphs.in_groups_of(params["columns"]) do |graphs| %>
+        <tr>
+        <% graphs.each do |graph| %>
+            <td valign="middle" align="center">
+            <% if graph %>
+                <img src='<%= [@top_level[@params[:category]].graphite_render, graph[:graphite][:url]].join "?" %>'>
+            <% end %>
+            </td>
+        <% end %>
+        </tr>
+    <% end %>
+</table>
+<script>
+    $(document).ready(function() {
+        setInterval(reloadDash, <%= @refresh_rate * 1000 %>);
+    });
+    function reloadDash() {
+        var now = new Date();
+        $('img').each(function(index) {
+            var url = $(this).attr('src').replace(/&\d+$/, '');
+            $(this).attr('src', url + '&' + now.getTime());
+        });
+    }
+</script>
+</body>
+<% end %>
+</html>