visage-app 1.0.0 → 2.0.0

data/lib/visage-app/public/stylesheets/message.css

@@ -0,0 +1,61 @@
+@charset "utf-8";
+/* CSS Document */
+
+/* Message Boxes */
+.msgBox{
+	font-family:Arial, Helvetica, sans-serif;
+	opacity: 0;
+	position:absolute;
+	top:-1000px;
+	left:0px;
+	max-width: 250px;
+	min-width: 150px;
+	color:#aaa;
+	background: rgb(0, 0, 0); /* compatibility fallback */
+	background: rgba(0, 0, 0, 0.8);
+	padding: 10px;
+	border-radius: 15px;
+	box-shadow: 2px 2px 6px #666;
+	-moz-border-radius: 15px;
+	-webkit-border-radius: 15px;
+	-moz-box-shadow: 2px 2px 6px #666;
+	-webkit-box-shadow: 2px 2px 5px #666;
+	z-index:-1;
+}
+
+.msgBoxImage{
+	width: 40px;
+	height: 40px;
+}
+
+.msgBoxIcon{
+	float:left;
+	width: 40px;
+	height: 40px;
+	padding-right: 7px;
+}
+
+.msgBoxTitle{
+	float:left;
+	color: #FFFFFF;
+}
+
+.msgBoxContent{ 
+	float:left;
+	max-width: 80%;
+	font-size:12px;
+}
+
+.msgBoxMessage{		float:left;}
+.msgBoxLink{		color:#6699CC;}
+.msgBoxLink:hover{	color:#FF9900;}
+
+.msgEditable{
+	font-family:Arial, Helvetica, sans-serif;
+	font-size:12px;
+	width:250px;
+	background: rgb(0, 0, 0); /* compatibility fallback */
+	background: rgba(255, 255, 255, 0.1);
+	border:#000;
+	color:#FFF;
+}

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

@@ -12,6 +12,10 @@ a {
   text-decoration: none;
 }
 
+input:focus {
+  outline: none;
+}
+
 /* styles */
 
 a               { color: #3465a4; padding: 2px 0px; }
@@ -124,10 +128,9 @@ background-image: -moz-linear-gradient(
 );
 }
 
-p.error {
-  color: red;
-  font-size: 80%;
-}
+/*
+ * BUILDER
+ */
 
 div.builder {
   float: left;
@@ -145,25 +148,49 @@ div.builder input.text {
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 }
 
-div.builder input.text:focus {
-  border: 1px solid #666;
+div.builder div.tokenWrapper {
+  border: 1px solid #bbb;
+  font-size: 16px;
+  padding: 4px;
+  padding-top: 0;
+  width: 350px;
+  height: 20px;
+  -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.builder input.submit {
-  opacity: 0;
+div.builder div.tokenWrapper div.token {
+  float:       left;
+  margin:      2px 4px 2px 0px;
+  font-family: Lucida Grande, sans-serif;
+  font-size:   16px;
 }
 
-div.builder ul {
-  margin-top: 16px;
+div.builder div.tokenWrapper div.token.finalized {
+  padding: 0 2px;
+  background-color: #D1E5FF;
+  color: black;
+  border: 1px solid #2F5A92;
+  font-size: 14px;
 }
 
-div.builder img.icon {
-  float: right;
+div.builder div.tokenWrapper div.token.finalized.selected {
+  background-color: #2F5A92;
+  color: white;
 }
 
-div.builder li {
-  list-style-type: none;
-  padding: 4px 8px;
+div.builder div.tokenWrapper div.token input.token {
+  border: 0;
+  font-size: 16px;
+  width: 80px;
+}
+
+div.builder input.text:focus {
+  border: 1px solid #666;
+}
+
+div.builder img.icon {
+  float: right;
 }
 
 div.builder h5 {
@@ -171,43 +198,48 @@ div.builder h5 {
   margin-left: 8px;
 }
 
-div.builder ul.available {
-  margin-top: 4px;
+div.builder ul.results {
+  font-family: Lucida Grande, sans-serif;
+  font-size:   16px;
+  position:    absolute;
+  z-index:     10;
 }
 
-div.builder ul.selected {
-  background-color: #fffaba;
+div.builder ul.results li {
+  list-style-type: none;
+  padding:         4px 5px;
+  border-left:      1px #BBBBBB solid;
+  border-right:     1px #BBBBBB solid;
+  border-bottom:    1px #BBBBBB solid;
+  background-color: white;
+  width: 348px;
 }
 
-div.builder li:hover {
-  /*background-color: #fffaba;*/
+div.builder ul.results li.active {
+  background-color: #4C94F0;
+  color:            white;
 }
 
-div.builder li td {
-  padding: 4px;
+div.builder ul.results li.all {
+  color: gray;
 }
 
-div.builder li td.name {
-  width: 350px;
+div.builder ul.results li.all.active {
+  background-color: #A0BD29;
+  color:            white;
 }
 
-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;
-}
+
+/*
+ * GRAPHS + PROFILE VIEWER
+ */
 
 div#graphs {
+  clear: both;
   padding: 0 2em;
-  border-top: 1px dashed #babdb6;
-  margin-top: 2em;
+  /* border-top: 1px dashed #babdb6; */
+  margin: 16px 0;
 }
 
 div.graph {
@@ -235,6 +267,21 @@ h1 span.project-name {
   color: white;
 }
 
+a#edit {
+  float: right;
+  display: block;
+}
+
+div#chart-builder-slider {
+  clear: both;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+div#profile {
+  clear: both;
+}
+
 h2#profile_name {
   margin: 36px 0;
 }
@@ -331,3 +378,67 @@ div#shortcuts table td, div#shortcuts table th {
 div#shortcuts table th {
   text-align: left;
 }
+
+
+.button {
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  background-color: #637020;
+  background-repeat: repeat-x;
+  background: -moz-linear-gradient(100% 100% 90deg, #244671, #4C94F0);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C94F0), to(#244671));
+  border: medium none;
+  color: white;
+  cursor: pointer;
+  font-family: Lucida Grande,sans-serif;
+  font-weight: bold;
+  padding: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
+}
+
+.button:hover, .button:focus {
+  text-shadow: 0 2px 1px rgba(255,255,255,0.1);
+  background: -webkit-gradient(linear, left top, left bottom, from(#529EFF), to(#274C7A));
+  background: -moz-linear-gradient(top, #529EFF, #274C7A);
+  outline:    none;
+}
+
+input#show {
+  float: right;
+  font-size: 80%;
+  padding: 4px 8px;
+  font-family: 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
+  margin-bottom: 16px;
+  margin-left:   16px;
+}
+
+input#save {
+  float: right;
+  font-size: 80%;
+  padding: 4px 8px;
+  font-family: 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
+  margin-bottom: 16px;
+  margin-left:   16px;
+}
+
+button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner {
+    border: none;
+}
+
+input#profile_name {
+  border: 1px solid #bbb;
+  font-size: 16px;
+  padding: 4px;
+  padding-top: 0;
+  width: 200px;
+  height: 20px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+  float: right;
+}

data/lib/visage-app/version.rb

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+module Visage
+  VERSION = "2.0.0"
+end

data/lib/visage-app/views/builder.haml

@@ -1,52 +1,41 @@
 - 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
+- require_js "builder"
+:javascript
+  window.addEvent('domready', function() {
+      new ChartBuilder('chart-builder');
+  });
+
+%div#chart-builder
+  %div#hosts.builder
+    %h2 Hosts
+    %img{:src => link_to("/images/hosts.png"), :class => "icon hosts"}
+    %div.search
+
+  %div#metrics.builder
+    %h2 Metrics
+    %img{:src => link_to("/images/metrics.png"), :class => "icon metrics"}
+    %div.search
+
+  %input#show{:value => "Show graphs", :type => "button", :class => "button"}
+
+  %div{:style => "text-align: left; margin-left: 24px;"}
+    %strong{:style => "font-family: sans-serif; font-size: 12px;"}
+      Global Time Period:
+    <select id="timescale" class="date timescale" style="margin-bottom: 3px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); "><option value="start=1321692809">last 1 hour</option><option value="start=1321689209">last 2 hours</option><option value="start=1321674809">last 6 hours</option><option value="start=1321653209">last 12 hours</option><option value="start=1321610009">last 1 day</option><option value="start=1321523609">last 2 days</option><option value="start=1321437209">last 3 days</option><option value="start=1321091609">last 1 week</option><option value="start=1320486809">last 2 weeks</option><option value="start=1318910009">last 1 month</option><option value="start=1290160409">last 1 year</option><option value="start=1258624409">last 2 years</option></select>
+    :javascript
+      window.addEvent('domready', function() {
+        var timescale = $('timescale');
+        timescale.addEvent('change', function(e) {
+          e.stop();
+          window.Graphs.each(function(graph) {
+            var selected = timescale.getSelected()[0]
+
+            graph.setTimePeriodTo(selected);
+          });
+
+        });
+      });
+
+  %div#graphs
 
 

data/lib/visage-app/views/builder_form.haml

@@ -0,0 +1,14 @@
+%div#chart-builder
+  %div#hosts.builder
+    %h2 Hosts
+    %img{:src => link_to("/images/hosts.png"), :class => "icon hosts"}
+    %div.search
+
+  %div#metrics.builder
+    %h2 Metrics
+    %img{:src => link_to("/images/metrics.png"), :class => "icon metrics"}
+    %div.search
+
+  %input#show{:value => "Show graphs", :type => "button", :class => "button"}
+
+  %div#graph

data/lib/visage-app/views/layout.haml

@@ -4,11 +4,14 @@
     %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 => link_to("/javascripts/mootools-1.2.3-core.js")}
-    %script{:type => "text/javascript", :src => link_to("/javascripts/mootools-1.2.5.1-more.js")}
+    %link{:rel => 'stylesheet', :href => '/stylesheets/message.css', :type => 'text/css'}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/mootools-core-1.4.0-full-compat.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/mootools-more-1.4.0.1.js")}
     %script{:type => "text/javascript", :src => link_to("/javascripts/highcharts.js")}
     %script{:type => "text/javascript", :src => link_to("/javascripts/graph.js")}
     %script{:type => "text/javascript", :src => link_to("/javascripts/keyboard.js")}
+    %script{:type => "text/javascript", :src => link_to("/javascripts/message.js")}
+    = include_required_js
 
   %body
     %div#wrapper

data/lib/visage-app/views/profile.haml

@@ -1,33 +1,52 @@
 - profile_name = @profile.options[:profile_name]
 - page_title(profile_name)
+- require_js "builder"
+
+%a{:href=>"#edit", :id => "edit"} edit profile
+%div#chart-builder-slider
+  = haml :builder_form
+
+:javascript
+  window.addEvent('domready', function() {
+    var builder = new ChartBuilder('chart-builder', {
+      hosts:   ['#{@profile.options[:hosts].join("','")   }'],
+      metrics: ['#{@profile.options[:metrics].join("','") }']
+    });
+
+    $('chart-builder-slider').fade('hide').setStyle('height', '0');
+
+    $('edit').addEvent('click', function(e) {
+      e.stop();
+      $('chart-builder-slider').setStyle('height', 'auto').fade('in');
+      e.target.destroy();
+    });
+  });
 
 %div#profile
-  %h2#profile_name= profile_name
-  - @profile.graphs.each do |graph|
-    - id       = URI.escape(graph.id)
-    - host     = URI.escape(graph.host)
-    - plugin   = URI.escape(graph.plugin)
-    - instance = URI.escape(graph.instances.join(','))
-    %div{:id => id, :class => 'graph'}
-      %img{:src => link_to("/images/loader.gif")}
-      :javascript
-        window.addEvent('domready', function() {
-          var graph = new visageGraph('#{id}', '#{host}', '#{plugin}', {
-            pluginInstance: '#{instance}',
-            start:          '#{@start}',
-            finish:         '#{@finish}',
-            live:           #{@live},
-            #{ "baseurl: '" + ENV['BASE_URL'].gsub(/^\//, '') if ENV['BASE_URL'] }
+  %h2#name= profile_name
+  %div#graphs
+    - @profile.graphs.each do |graph|
+      - id       = URI.escape(graph.id)
+      - host     = URI.escape(graph.host)
+      - plugin   = URI.escape(graph.plugin)
+      - instance = URI.escape(graph.instances.join(','))
+      %div{:id => id, :class => 'graph'}
+        %img{:src => link_to("/images/loader.gif")}
+        :javascript
+          window.addEvent('domready', function() {
+            var graph = new VisageGraph('#{id}', '#{host}', '#{plugin}', {
+              pluginInstance: '#{instance}',
+              #{ "baseurl: '" + ENV['BASE_URL'].gsub(/^\//, '') if ENV['BASE_URL'] }
+            });
           });
-        });
-  - if @profile.graphs.size == 0
-    %div.graph
-      %h4.error Oops! Looks like there aren't any graphs matching the specified patterns.
-      %p These are the patterns:
-      %pre
-        :preserve
-          Host:    #{@profile.options[:hosts]}
-          Metrics: #{@profile.options[:metrics]}
+    - if @profile.graphs.size == 0
+      %div.graph
+        %h4.error Oops! Looks like there aren't any graphs matching the specified patterns.
+        %p These are the patterns:
+        %pre
+          :preserve
+            Host:    #{@profile.options[:hosts]}
+            Metrics: #{@profile.options[:metrics]}
 
   %div#bottom_nav
     %a{:href => link_to("/profiles")} ← Back to profiles