visage-app 0.1.8 → 0.2.0

data/lib/visage/public/stylesheets/screen.css

@@ -8,7 +8,7 @@ body {
   padding: 0;
 }
 
-a { 
+a {
   text-decoration: none;
 }
 
@@ -24,33 +24,168 @@ p {
   margin: 0 0 1em;
 }
 
-li {
-  margin: 0.55em 0 0.55em 1em; 
-  list-style-type: none;
-}
-
 body {
   font-family: Bitstream Vera Serif, Baskerville, Garamond, serif;
   font-size: 1.2em;
 }
 
 div#header {
+  height: 40px;
+  background-color: #3465a4;
+  margin-bottom: 16px;
+  border-bottom: 6px solid #c5d6ed;
+}
+
+div#nav {
+  padding-top: 10px;
+  color: white;
+  font-family: sans-serif;
+  text-align: right;
+  font-size: 16px;
+}
+
+div#nav a {
+  margin-top: 8px;
+  margin-left: 12px;
+  color: white;
+  font-weight: bold;
+}
+
+div#nav a:hover {
+  text-shadow: 0 1px 6px rgba(115,157,211,0.9);
+  background-color: #3465a4;
+}
+
+div#content, div#nav {
+  width: 950px;
+  margin: auto;
+}
+
+div#hosts {
+  clear: left;
+}
+
+div#profile-meta, div#profile-preview {
   float: left;
+  margin-left: 25px;
+  width: 450px;
+}
+
+div#profile-meta input.text {
+  border: 1px solid #bbb;
+  font-size: 16px;
+  padding: 4px;
   width: 20em;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 }
 
-div.nav {
+div#profile-meta input.create.profile {
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+  background: #888;
+  color: white;
+  padding: 5px 10px 6px;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+  border-bottom: 1px solid rgba(0,0,0,0.25);
+  position: relative;
+  cursor: pointer;
+font-weight: bold;
+background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0.1, rgb(136,136,136)),
+    color-stop(0.5, rgb(153,153,153))
+);
+background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(136,136,136) 10%,
+    rgb(153,153,153) 50%
+);
+}
+
+p.error {
+  color: red;
+  font-size: 80%;
+}
+
+div.builder {
   float: left;
-  margin: 1em;
-  margin-right: 2em;
+  margin-left: 25px;
+  width: 450px;
+  margin-bottom: 24px;
 }
 
-div.nav li {
-  margin-left: 2px;
+div.builder input.text {
+  border: 1px solid #bbb;
+  font-size: 16px;
+  padding: 4px;
+  width: 20em;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 }
 
-div#header {
-  margin: 1em 0.5em;
+div.builder input.text:focus {
+  border: 1px solid #666;
+}
+
+div.builder input.submit {
+  opacity: 0;
+}
+
+div.builder ul {
+  margin-top: 16px;
+}
+
+div.builder img.icon {
+  float: right;
+}
+
+div.builder li {
+  list-style-type: none;
+  padding: 4px 8px;
+}
+
+div.builder h5 {
+  margin-top: 8px;
+  margin-left: 8px;
+}
+
+div.builder ul.available {
+  margin-top: 4px;
+}
+
+div.builder ul.selected {
+  background-color: #fffaba;
+}
+
+div.builder li:hover {
+  /*background-color: #fffaba;*/
+}
+
+div.builder li td {
+  padding: 4px;
+}
+
+div.builder li td.name {
+  width: 350px;
+}
+
+div.builder li td.meta {
+  width: 80px;
+  text-align: right;
+  padding-right: 8px;
+}
+
+span.glob.example {
+  display: block;
+  font-size: 80%;
+  font-style: italic;
+  margin-top: 8px;
 }
 
 div#graphs {
@@ -69,8 +204,11 @@ h1, h2, h3, h4, h5 {
   font-family: Bitstream Vera Sans, Helvetica Neue, sans-serif;
 }
 
-h2, h3, h4, h5 {
-  /*text-transform: uppercase;*/
+h2 {
+  font-weight: bold;
+  color: #666;
+  border-bottom: 4px solid #888;
+  margin-bottom: 12px;
 }
 
 h1 {
@@ -94,3 +232,22 @@ div#nothing {
   margin-top: 1em;
 }
 
+
+div#profiles {
+  float: left;
+  margin-left: 25px;
+  width: 450px;
+}
+
+div#profiles ul li {
+  margin-bottom: 8px;
+  list-style-type: none;
+}
+
+div#profiles ul {
+  margin-bottom: 16px;
+}
+
+div#profiles p.create {
+  font-size: 85%;
+}

data/lib/visage/views/builder.haml

@@ -0,0 +1,52 @@
+- page_title "Profile builder"
+
+%div#builder
+  %form{:action => "/builder", :method => :get}
+
+    - if @profile.selected_hosts.size > 0 && @profile.selected_metrics.size > 0
+      %div#profile-preview
+        %h2 Preview
+        %div#graph
+          %p Coming soon!
+      %div#profile-meta
+        %h2 Profile name
+        %p
+          %input{:name => "profile_name", :value => params[:profile_name], :type => "text", :class => "text"}
+        %p.error
+          = @profile.errors[:profile_name]
+        %p
+          %input{:type => "submit", :value => "create", :class => "create", :name => "submit"}
+
+    %div#hosts.builder
+      %h2 Hosts
+      %input{:name => "hosts", :type => "text", :class => "text", :value => params[:hosts]}
+      %input{:name => "submit", :type => "submit", :class => "submit", :value => "hosts"}
+      %img{:src => link_to("/images/hosts.png"), :class => "icon hosts"}
+      %span{:class => "glob example"} e.g. “charlie”, “*.bravo*”, “echo, foxtrot*”
+
+      %ul.selected
+        - @profile.selected_hosts.each do |name|
+          %li= name
+
+      %h5 Available
+      %ul.available
+        - @profile.hosts.each do |name|
+          %li= name
+
+    %div#metrics.builder
+      %h2 Metrics
+      %input{:name => "metrics", :type => "text", :class => "text", :value => params[:metrics]}
+      %input{:name => "submit", :type => "submit", :class => "submit", :value => "metrics"}
+      %img{:src => link_to("/images/metrics.png"), :class => "icon metrics"}
+      %span{:class => "glob example"} e.g. “cpu*/*”, “disk*/*ops, disk*/*time”
+
+      %ul.selected
+        - @profile.selected_metrics.each do |name|
+          %li= name
+
+      %h5 Available
+      %ul.available
+        - @profile.metrics.each do |name|
+          %li= name
+
+

data/lib/visage/views/layout.haml

@@ -1,22 +1,24 @@
-!!! 
+!!!
 %html
   %head
-    %title Visage
+    %title= include_page_title
     %link{:rel => "icon", :type => "image/gif", :href => "/favicon.gif"}
     %link{:rel => 'stylesheet', :href => '/stylesheets/screen.css', :type => 'text/css'}
-    %script{:type => "text/javascript", :src => "/javascripts/raphael-min.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/g.raphael.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/g.line.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/mootools-1.2.3-core.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/mootools-1.2.3.1-more.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/graph.js"}
-    %script{:type => "text/javascript", :src => "/javascripts/application.js"}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/raphael.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/g.raphael.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/g.line.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/mootools-1.2.3-core.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/mootools-1.2.3.1-more.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/graph.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/application.js")}
 
   %body
     %div#wrapper
       %div#header
-        %h1.project
-          %span.project-name Visage
+        %div#nav
+          %a{:href => link_to("/profiles")} profiles
+          %a{:href => link_to("/builder")} builder
+
       %div#content
         = yield
 

data/lib/visage/views/profile.haml

@@ -0,0 +1,18 @@
+- page_title @profile.options[:profile_name]
+
+%div#profile
+  - @profile.graphs.each do |graph|
+    %div{:id => graph.id, :class => 'graph'}
+      :javascript
+        window.addEvent('domready', function() {
+          var graph = new visageGraph('#{graph.id}', '#{graph.host}', '#{graph.plugin}', {
+            width: 900,
+            height: 220,
+            gridWidth: 800,
+            gridHeight: 200,
+            shade: false,
+            pluginInstance: '#{graph.instances.join(',')}',
+            name: '#{graph.plugin} on #{graph.host}'
+          });
+        });
+

data/lib/visage/views/profiles.haml

@@ -0,0 +1,13 @@
+- page_title 'Profiles'
+
+%div#profiles
+  %h2 Profiles
+
+  %ul
+    - @profiles.each do |prof|
+      %li
+        %a{:href => link_to("/profiles/#{prof.url}")}= prof.profile_name
+
+  %p.create
+    %a{:href => link_to("/builder")} Create a new profile.
+

data/lib/visage-app.rb

@@ -4,78 +4,113 @@ require 'pathname'
 @root = Pathname.new(File.dirname(__FILE__)).parent.expand_path
 $: << @root.to_s
 
-require 'sinatra'
-require 'errand'
-require 'yajl'
+require 'sinatra/base'
 require 'haml'
+require 'lib/visage/profile'
 require 'lib/visage/config'
 require 'lib/visage/helpers'
 require 'lib/visage/config/init'
+require 'lib/visage/collectd/rrds'
 require 'lib/visage/collectd/json'
+require 'yajl/json_gem'
 
-set :public, @root.join('lib/visage/public')
-set :views,  @root.join('lib/visage/views')
+module Visage
+  class Application < Sinatra::Base
+    @root = Pathname.new(File.dirname(__FILE__)).parent.expand_path
+    set :public, @root.join('lib/visage/public')
+    set :views,  @root.join('lib/visage/views')
 
-configure do
-  CollectdJSON.rrddir = Visage::Config.rrddir
-  Visage::Config::Profiles.profiles = Visage::Config.profiles
-end
+    helpers Sinatra::LinkToHelper
+    helpers Sinatra::PageTitleHelper
+  end
+
+  class Profiles < Application
+    get '/' do
+      redirect '/profiles'
+    end
 
-# infrastructure for embedding
-get '/javascripts/visage.js' do
-  javascript = ""
-  %w{raphael-min g.raphael g.line mootools-1.2.3-core mootools-1.2.3.1-more graph}.each do |js|
-    javascript += File.read(File.join(__DIR__, 'public', 'javascripts', "#{js}.js"))
+    get '/profiles/:url' do
+      @profile = Visage::Profile.get(params[:url])
+      raise Sinatra::NotFound unless @profile
+      haml :profile
+    end
+
+    get '/profiles' do
+      @profiles = Visage::Profile.all
+      haml :profiles
+    end
   end
-  javascript
-end
 
-# user facing
-get '/' do
-  @hosts = CollectdJSON.hosts
-  haml :index
-end
 
-get '/:host' do
-  @hosts = CollectdJSON.hosts
-  @profiles = Visage::Config::Profiles.all
+  class Builder < Application
 
-  haml :index
-end
+    get "/builder" do
+      if params[:submit] == "create"
+        @profile = Visage::Profile.new(params)
 
-get '/:host/:profile' do
-  @hosts = CollectdJSON.hosts
-  @profiles = Visage::Config::Profiles.all
-  @profile = Visage::Config::Profiles.get(params[:profile])
+        if @profile.save
+          redirect "/profiles/#{@profile.url}"
+        else
+          haml :builder
+        end
+      else
+        @profile = Visage::Profile.new(params)
 
-  haml :index
-end
+        haml :builder
+      end
+    end
 
-# JSON data backend
-
-# /data/:host/:plugin/:optional_plugin_instance
-get %r{/data/([^/]+)/([^/]+)((/[^/]+)*)} do
-  host = params[:captures][0]
-  plugin = params[:captures][1]
-  plugin_instances = params[:captures][2]
-
-  collectd = CollectdJSON.new(:rrddir => Visage::Config.rrddir,
-                              :fallback_colors => Visage::Config.fallback_colors)
-  json = collectd.json(:host => host,
-                       :plugin => plugin,
-                       :plugin_instances => plugin_instances,
-                       :start => params[:start],
-                       :finish => params[:finish],
-                       :plugin_colors => Visage::Config.plugin_colors)
-  # if the request is cross-domain, we need to serve JSONP
-  maybe_wrap_with_callback(json)
-end
+    # infrastructure for embedding
+    get '/javascripts/visage.js' do
+      javascript = ""
+      %w{raphael-min g.raphael g.line mootools-1.2.3-core mootools-1.2.3.1-more graph}.each do |js|
+        javascript += File.read(@root.join('lib/visage/public/javascripts', "#{js}.js"))
+      end
+      javascript
+    end
+
+  end
+
+  class JSON < Application
+
+    # JSON data backend
+
+    # /data/:host/:plugin/:optional_plugin_instance
+    get %r{/data/([^/]+)/([^/]+)((/[^/]+)*)} do
+      host = params[:captures][0]
+      plugin = params[:captures][1]
+      plugin_instances = params[:captures][2]
+
+      collectd = CollectdJSON.new(:rrddir => Visage::Config.rrddir,
+                                  :fallback_colors => Visage::Config.fallback_colors)
+      json = collectd.json(:host => host,
+                           :plugin => plugin,
+                           :plugin_instances => plugin_instances,
+                           :start => params[:start],
+                           :finish => params[:finish],
+                           :plugin_colors => Visage::Config.plugin_colors)
+      # if the request is cross-domain, we need to serve JSONP
+      maybe_wrap_with_callback(json)
+    end
+
+    get %r{/data/([^/]+)} do
+      host = params[:captures][0]
+      metrics = Visage::Collectd::RRDs.metrics(:host => host)
+
+      json = { host => metrics }.to_json
+      maybe_wrap_with_callback(json)
+    end
+
+    get %r{/data(/)*} do
+      hosts = Visage::Collectd::RRDs.hosts
+      json = { :hosts => hosts }.to_json
+      maybe_wrap_with_callback(json)
+    end
+
+    # wraps json with a callback method that JSONP clients can call
+    def maybe_wrap_with_callback(json)
+      params[:callback] ? params[:callback] + '(' + json + ')' : json
+    end
 
-# wraps json with a callback method that JSONP clients can call
-def maybe_wrap_with_callback(json)
-  if params[:callback]
-    params[:callback] + '(' + json + ')'
-  else
-    json
   end
 end

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 1
-  - 8
-  version: 0.1.8
+  - 2
+  - 0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Lindsay Holmwood
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-06-25 00:00:00 -07:00
+date: 2010-06-27 00:00:00 +10:00
 default_executable: visage
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -113,18 +113,26 @@ files:
 - lib/visage-app.rb
 - lib/visage/collectd/json.rb
 - lib/visage/collectd/profile.rb
+- lib/visage/collectd/rrds.rb
 - lib/visage/config.rb
 - lib/visage/config.ru
 - lib/visage/config/fallback-colors.yaml
 - lib/visage/config/init.rb
 - lib/visage/config/plugin-colors.yaml
-- lib/visage/config/profiles.yaml
 - lib/visage/config/profiles.yaml.sample
+- lib/visage/graph.rb
 - lib/visage/helpers.rb
 - lib/visage/patches.rb
+- lib/visage/profile.rb
 - lib/visage/public/favicon.gif
+- lib/visage/public/images/add.png
+- lib/visage/public/images/hosts.png
+- lib/visage/public/images/metrics.png
+- lib/visage/public/images/search.png
 - lib/visage/public/javascripts/application.js
+- lib/visage/public/javascripts/g.line-min.js
 - lib/visage/public/javascripts/g.line.js
+- lib/visage/public/javascripts/g.raphael-min.js
 - lib/visage/public/javascripts/g.raphael.js
 - lib/visage/public/javascripts/graph.js
 - lib/visage/public/javascripts/mootools-1.2.3-core.js
@@ -132,8 +140,10 @@ files:
 - lib/visage/public/javascripts/raphael-min.js
 - lib/visage/public/javascripts/raphael.js
 - lib/visage/public/stylesheets/screen.css
-- lib/visage/views/index.haml
+- lib/visage/views/builder.haml
 - lib/visage/views/layout.haml
+- lib/visage/views/profile.haml
+- lib/visage/views/profiles.haml
 has_rdoc: true
 homepage: http://auxesis.github.com/visage
 licenses: []

data/lib/visage/config/profiles.yaml

@@ -1,35 +0,0 @@
----
-profiles:
-  CPU + Load:
-    plugins:
-      - cpu-0/cpu-user/cpu-system/cpu-idle/cpu-wait/cpu-interrupt
-      - cpu-1
-      - load/load
-      - battery-0
-    splat: cpu+load
-    order: 1
-  Memory:
-    plugins:
-      - memory
-      - swap
-    splat: memory
-    order: 2
-  Disk Usage:
-    plugins:
-      - df/df-root
-      - disk-sda
-    splat: disk+usage
-    order: 3
-  Networking:
-    plugins:
-      - tcpconns-9393-local
-      - tcpconns-80-local
-      - tcpconns-22-local
-    splat: network
-    order: 4
-  Processes:
-    plugins:
-      - processes
-      - processes-collectd
-    splat: processes
-    order: 5

data/lib/visage/views/index.haml

@@ -1,48 +0,0 @@
-%div#nav
-  %div#hosts.nav
-    %h2 Hosts
-    %ul
-      - if !Visage::Config.rrddir
-        %li
-          You need to specify <strong>rrddir</strong> in config/init.rb!
-      - elsif @hosts.empty?
-        %li
-          No hosts found. Please check <strong>rrddir</strong> in config/init.rb!
-      - else
-        - @hosts.each do |host|
-          %li
-            %a{:href => link_to("/#{host}")}= host
-
-  - if host = params[:host]
-    %div#profiles.nav
-      %h2 Profiles
-
-      %ul
-        - @profiles.each do |profile|
-          %li
-            %a{:href => link_to("/#{host}/#{profile.splat}")}= profile.name
-
-%div#graphs
-  - if @profile && @profile.plugins
-    - @profile.plugins.each do |graph|
-      - plugin, plugin_instances =  graph.split('/', 2)
-      - graph_id = "graph#{graph.gsub(/[^\w+]/, '_')}"
-      %div.graph
-        %div{:id => graph_id}
-        :javascript
-          window.addEvent('domready', function() {
-            var graph = new visageGraph('#{graph_id}', '#{params[:host]}', '#{plugin}', {
-              width: 900,
-              height: 220,
-              gridWidth: 800,
-              gridHeight: 200,
-              shade: #{Visage::Config.shade || false},
-              pluginInstance: '#{plugin_instances || ''}',
-              name: '#{plugin} on #{host}'
-            });
-          });
-
-  - else
-    %div#nothing
-      Sorry, nothing to display!
-