mouth 0.8.0

data/lib/mouth/endoscope.rb

@@ -0,0 +1,120 @@
+require 'sinatra/base'
+require 'erb'
+require 'yajl'
+
+require 'mouth/sequence'
+require 'mouth/record'
+require 'mouth/graph'
+require 'mouth/dashboard'
+require 'mouth/source'
+
+module Mouth
+  class Endoscope < Sinatra::Base
+    
+    dir = File.dirname(File.expand_path(__FILE__))
+
+    set :views, "#{dir}/endoscope/views"
+    set :public_folder, "#{dir}/endoscope/public"
+    
+    get '/' do
+      erb :dashboard
+    end
+    
+    ##
+    ## Dashboard API
+    ##
+    
+    # Returns all dashboards and all associated graphs.
+    # If a dashboard does not exist, creates one
+    get '/dashboards' do
+      dashboards = Dashboard.all
+      if dashboards.length == 0
+        dashboards = [Dashboard.create(:name => "Main")]
+      end
+      
+      render_json(dashboards)
+    end
+    
+    get '/dashboards/:id' do
+      erb :dashboard
+    end
+    
+    post '/dashboards' do
+      d = Dashboard.create(json_input)
+      render_json(d)
+    end
+    
+    put '/dashboards/:id' do
+      d = Dashboard.find(params[:id])
+      d.update(json_input)
+      render_json(d)
+    end
+    
+    delete '/dashboards/:id' do
+      d = Dashboard.find(params[:id])
+      d.destroy
+      render_json(d)
+    end
+    
+    ##
+    ## Graph API
+    ##
+    
+    post '/graphs' do
+      g = Graph.create(json_input)
+      render_json(g)
+    end
+    
+    put '/graphs/:id' do
+      g = Graph.find(params[:id])
+      g.update(json_input)
+      render_json(g)
+    end
+    
+    get '/graphs/:id/data' do
+      opts = {
+        :start_time => params[:start_time] ? Time.at(params[:start_time].to_i) : Time.now - (119 * 60),
+        :end_time => params[:end_time] ? Time.at(params[:end_time].to_i) : Time.now,
+        :granularity_in_minutes => params[:granularity_in_minutes] ? params[:granularity_in_minutes].to_i : 1
+      }
+      
+      d = Graph.find(params[:id]).data(opts)
+      content_type 'application/json'
+      Yajl::Encoder.encode(d)
+    end
+    
+    delete '/graphs/:id' do
+      g = Graph.find(params[:id])
+      g.destroy
+      render_json(g)
+    end
+    
+    ##
+    ## Data
+    ##
+    
+    get '/sources' do
+      s = Source.all
+      render_json(s)
+    end
+    
+    ##
+    ## Helpers
+    ##
+    
+    def json_input
+      Yajl::Parser.parse(request.env["rack.input"].read)
+    end
+    
+    def render_json(attributables)
+      content_type 'application/json'
+      encodable = if attributables.is_a?(Array)
+        attributables.collect(&:all_attributes)
+      else
+        attributables.all_attributes
+      end
+      Yajl::Encoder.encode(encodable)
+    end
+    
+  end
+end

data/lib/mouth/endoscope/public/application.css

@@ -0,0 +1,464 @@
+/* reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q, blockquote {
+  quotes: none;
+}
+
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+a img {
+  border: none;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}
+
+/* typography/_vertical_rhythm.scss */
+body {
+  font-size: 87.5%;
+  line-height: 1.571em;
+}
+
+/* typography/_vertical_rhythm.scss */
+html > body {
+  font-size: 14px;
+}
+
+body {
+  font-family: sans-serif;
+  font-weight: 400;
+  color: #555;
+  background: #032b36;
+}
+
+/* jQuery resizeable styles */
+.ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  z-index: 99999;
+  display: block;
+}
+
+.ui-resizable-e {
+  cursor: e-resize;
+  width: 7px;
+  right: -5px;
+  top: 0;
+  height: 100%;
+}
+
+.ui-resizable-s {
+  cursor: s-resize;
+  height: 7px;
+  width: 100%;
+  bottom: -5px;
+  left: 0;
+}
+
+.ui-icon-gripsmall-diagonal-se {
+  width: 16px;
+  height: 16px;
+  background-image: url(/222222_256x240_icons_icons.png);
+  background-position: -64px -224px;
+  cursor: se-resize;
+  right: 1px;
+  bottom: 1px;
+  text-indent: -99999px;
+  overflow: hidden;
+  background-repeat: no-repeat;
+}
+
+#mouth-header {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #241200), color-stop(50%, #331a00), color-stop(100%, #241200));
+  background-image: -webkit-linear-gradient(top center, #241200, #331a00, #241200);
+  background-image: -moz-linear-gradient(top center, #241200, #331a00, #241200);
+  background-image: -o-linear-gradient(top center, #241200, #331a00, #241200);
+  background-image: -ms-linear-gradient(top center, #241200, #331a00, #241200);
+  background-image: linear-gradient(top center, #241200, #331a00, #241200);
+  color: #eee8d5;
+  padding: 5px 20px;
+/*  overflow: hidden;*/
+  *zoom: 1;
+}
+
+#mouth-header h1 {
+  float: left;
+  font-size: 1.429em;
+  line-height: 2.2em;
+  margin-right: 20px;
+}
+
+.add-dashboard {
+  color: #f2f2f2;
+  font-size: 1.429em;
+  line-height: 2.2em;
+  text-decoration: none;
+  text-shadow: 0 1px 0 black;
+}
+
+#dashboards ul {
+  float: left;
+}
+
+.dashboard-item {
+  float: left;
+  margin-right: 20px;
+}
+
+.dashboard-item-edit {
+    background-color: white;
+    border: 2px solid #212a3d;
+    position: relative;
+    height: 45px;
+    z-index: 3;
+    padding: 5px;
+    color: #555;
+}
+
+.dashboard-item-edit input {
+  border: 1px solid #CCCCCC;
+  border-radius: 3px 3px 3px 3px;
+  color: #555555;
+  display: inline-block;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.dashboard-item-edit .delete {
+    position:absolute;
+    height: 15px;
+    right: 3px;
+    bottom: 0px;
+    font-size: 11px;
+    line-height: 11px;
+    color: #222222;
+    text-decoration: underline;
+    text-shadow: none;
+}
+
+.dashboard-item-edit .cancel {
+    font-size: 12px;
+    line-height: 12px;
+    color: #222222;
+    text-decoration: underline;
+    text-shadow: none;
+}
+
+.dashboard-item a, .dashboard-item span {
+  color: #f2f2f2;
+  font-size: 1.429em;
+  line-height: 2.2em;
+  text-decoration: none;
+  text-shadow: 0 1px 0 black;
+}
+
+.dashboard-item.selected span {
+    color: #EEE8D5;
+}
+
+.dashboard-item .chooser {
+    cursor:pointer;
+}
+
+#info-panel {
+  border-top: 1px solid black;
+  position: absolute;
+  top: 53px;
+  left: 0;
+  bottom: 0;
+  width: 150px;
+  background-color: tan;
+}
+
+#date-range-picker .if-current {
+    display:none;
+}
+#date-range-picker .unless-current {
+    display:block;
+}
+
+#date-range-picker.current .if-current {
+    display:block;
+}
+#date-range-picker.current .unless-current {
+    display:none;
+}
+
+#date-range-picker {
+    -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      padding: 4px;
+      color: black;
+}
+
+#date-range-picker h2 {
+    font-weight: bolder;
+}
+
+#date-range-picker .example {
+    font-size: 11px;
+    color: #666;
+}
+
+#current-dashboard {
+  border-top: 1px solid black;
+  position: absolute;
+  top: 53px;
+  left: 150px;
+  right: 0;
+  bottom: 0;
+  -moz-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.5);
+  -o-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.5);
+}
+
+#current-dashboard #grid {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+#grid .graph {
+    background: white;   
+    background: #2e3a4f;
+    background: -moz-linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+}
+
+#grid .graph.dimmed {
+    opacity: 0.7;
+}
+
+.graph-inner {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    bottom: 2px;
+    right: 2px;
+    background: white;
+    
+}
+
+.graph-header {
+  cursor: move;
+  color: #330000;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+  padding: 4px;
+  position: relative;
+}
+
+.graph-header .edit {
+  cursor: default;
+  position: absolute;
+  right: 5px;
+  text-decoration: none;
+  color: #222222;
+}
+
+.graph-body, .graph-back {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow:hidden;
+}
+
+.graph-body {
+}
+
+.graph-back .kind {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 20px;
+}
+
+.graph-back .graph-sources {
+    position: absolute;
+    top: 20px; left: 0; width: 100%; bottom: 0px;
+}
+
+.graph-back .kind .kind-label, .graph-back .graph-sources .graph-sources-label {
+    float: left;
+    width: 70px;
+    text-align:right;
+    padding-right:10px;
+}
+.graph-back .kind .kind-value {
+    float: left;
+}
+
+.graph-back .graph-sources ul {
+    overflow-y: auto;
+    position:absolute;
+    min-width: 200px;
+    top: 0;
+    bottom: 20px;
+    left: 80px;
+    clear:both;
+}
+
+.graph-back .graph-sources .pick-item {
+}
+
+.graph-back .delete {
+    position: absolute;
+    height: 22px;
+    left: 0;
+    bottom: 0;
+    width: 60px;
+}
+
+.add-graph {
+  display: block;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  text-decoration: none;
+  color: #eee8d5;
+}
+
+.source-list {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 2px solid #212a3d;
+  display: block;
+  position: absolute;
+  top: 0px;
+  width: 40%;
+  min-height: 200px;
+  background-color: white;
+  color: #555;
+}
+
+.source-list.left {
+  left: 0;
+}
+.source-list.right {
+  right: 0;
+}
+
+.source-list .head {
+    position: relative;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 4px;
+    height: 26px;
+}
+
+.source-list .head  h2 {
+
+}
+
+.source-list a.cancel {
+    display: block;
+    position: absolute;
+    width: 23px;
+    height: 23px;
+    padding-right: 4px;
+    text-align: right;
+    top: 0;
+    right: 0;
+}
+
+
+.source-list .head input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 1px solid #CCCCCC;
+    border-radius: 3px 3px 3px 3px;
+    color: #555555;
+    display: inline-block;
+    font-size: 13px;
+    height: 26px;
+    line-height: 18px;
+    padding: 4px;
+    width: 100%;
+}
+
+.source-list ul {
+    overflow-y: auto;
+    position: absolute;
+    width: 100%;
+    top: 26px;
+    bottom: 30px;
+}
+
+.source-list ul .source-item {
+    padding: 2px;
+}
+
+.source-list ul .source-item.no-data {
+    padding: 6px;
+    color: #CCC;
+}
+
+
+.source-list ul label {
+    display: block;
+}
+.source-list ul label:hover {
+    background-color: #DDF;
+}
+
+.source-list .foot {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 30px;
+    padding: 4px;
+}
+
+.source-list .foot button {
+    float: right;
+}