dashboard: merge from dashboard

circle/circle/settings/base.py

@@ -229,6 +229,7 @@ LOCAL_APPS = (
     'storage',
     'firewall',
     'network',
+    'dashboard',
 )
 
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps

circle/circle/urls.py

@@ -15,4 +15,5 @@ urlpatterns = patterns('',
 
     url(r'^admin/', include(admin.site.urls)),
     url(r'^network/', include('network.urls')),
+    url(r'^dashboard/', include('dashboard.urls')),
 )

circle/dashboard/models.py

+from django.db import models
+
+# Create your models here.

circle/dashboard/static/dashboard/dashboard.css

+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+}
+
+/* Set widths on the navbar form inputs since otherwise they're 100% wide */
+.navbar-form input[type="text"],
+.navbar-form input[type="password"] {
+  width: 180px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Let the jumbotron breathe */
+  .container > :first-child {
+    margin-top: 20px;
+  }
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+}
+.no-margin {
+  margin: 0!important;
+}
+
+.list-group .list-group-footer {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.big {
+  font-size: 2em;
+}
+.bigbig {
+  font-size: 3em;
+}
+
+.timeline {
+  border-left: 4px #428bca solid;
+  margin-left: 20px;
+  padding-left: 20px;
+}
+
+.timeline > div {
+  margin: 0;
+  padding: 0;
+  margin-left: -34px;
+  margin-bottom: .5em;
+  line-height: 24px;
+}
+.timeline > div:last-child {
+  margin-bottom: 0;
+}
+
+.timeline .timeline-icon {
+  margin: 0;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: #428bca;
+  color: #fff;
+}
+
+.timeline-icon.timeline-warning {
+  border-color: #c09853;
+  border-style: solid;
+  border-width: 2px;
+  background-color: white;
+  color: #c09853;
+  line-height: 20px;
+}
+.timeline .timeline-icon.timeline-nobg {
+  background-color: transparent;
+}
+.table-with-form-fields tbody tr td {
+  line-height: 34px;
+}
+#vm-detail-panel .panel-body {
+  min-height: 20em;
+}
+
+:link i:before:hover {
+  text-decoration: none !important;
+}
+
+.slider {
+    display: inline-block;
+}
+.slider .track {
+    height: 20px;
+    top: 50%;
+}
+.slider > .dragger, .slider > .dragger:hover {
+    border-radius: 0px;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    width: 8px;
+    height: 24px;
+    margin-top: -12px!important;
+    text-shadow: 0 1px 0 #fff;
+    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
+    background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
+    background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
+    background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
+    background-repeat: repeat-x;
+    border-color: #2d6ca2;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
+}
+.slider > .dragger:hover {
+    background-color: #3071a9;
+    background-image: none;
+    border-color: #2d6ca2;
+}
+
+.slider > .highlight-track {
+    height: 20px;
+    top: 50%;
+}
+.slider + .output {
+
+}
+.rule-table tr >:nth-child(1) {
+    text-align: right;
+}
+.rule-table tr >:nth-child(2) {
+    text-align: center;
+}
+
+.dashboard-index .panel {
+    height: 300px;
+}

circle/dashboard/static/dashboard/dashboard.js

+$(function () {
+  $('[href=#vm-graph-view]').click(function (e) {
+    $('#vm-list-view').hide();
+    $('#vm-graph-view').show();
+    $('[href=#vm-list-view]').removeClass('disabled');
+    $('[href=#vm-graph-view]').addClass('disabled');
+    e.stopImmediatePropagation();
+    return false;
+  });
+  $('[href=#vm-list-view]').click(function (e) {
+    $('#vm-graph-view').hide();
+    $('#vm-list-view').show();
+    $('[href=#vm-list-view]').addClass('disabled');
+    $('[href=#vm-graph-view]').removeClass('disabled');
+    e.stopImmediatePropagation();
+    return false;
+  }).addClass('disabled');
+  $('[title]').tooltip();
+  $(':input[title]').tooltip({trigger: 'focus', placement: 'auto right'});
+  $(".knob").knob();
+  $("[data-slider]")
+    .each(function () {
+      var input = $(this);
+      $("<span>")
+        .addClass("output")
+        .html($(this).val())
+        .insertAfter(input);
+    })
+    .bind("slider:ready slider:changed", function (event, data) {
+      $(this)
+        .nextAll(".output:first")
+          .html(data.value.toFixed(3));
+    });
+    $("[data-mark]")
+        .each(function () {
+            var value=$(this).attr('data-mark').parseFloat();
+
+
+        });
+});
+

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/.gitignore

+node_modules/
+*.zip
+gh-pages
\ No newline at end of file

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/README.md

+jQuery Simple Slider: Unobtrusive Numerical Slider
+==================================================
+
+SimpleSlider is a jQuery plugin for turning your text inputs into draggable 
+numerical sliders.
+
+It has no external dependencies other than jQuery, and you don't need to write
+a single line of JavaScript to get it to work.
+
+
+How to Use
+-----------
+
+Include the javascript file in your page:
+
+    <script src="simple-slider.js"></script>
+    
+Turn your text input into a slider:
+
+    <input type="text" data-slider="true">
+
+
+Documentation, Features and Demos
+---------------------------------
+Full details and documentation can be found on the project page here:
+
+<http://loopj.com/jquery-simple-slider/>
\ No newline at end of file

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/css/simple-slider.css

+.slider {
+  width: 300px;
+}
+
+.slider > .dragger {
+  background: #8DCA09;
+  background: -webkit-linear-gradient(top, #8DCA09, #72A307);
+  background: -moz-linear-gradient(top, #8DCA09, #72A307);
+  background: linear-gradient(top, #8DCA09, #72A307);
+
+  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
+  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
+  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
+
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+
+  border: 1px solid #496805;
+  width: 16px;
+  height: 16px;
+}
+
+.slider > .dragger:hover {
+  background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
+}
+
+
+.slider > .track, .slider > .highlight-track {
+  background: #ccc;
+  background: -webkit-linear-gradient(top, #bbb, #ddd);
+  background: -moz-linear-gradient(top, #bbb, #ddd);
+  background: linear-gradient(top, #bbb, #ddd);
+
+  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+
+  border: 1px solid #aaa;
+  height: 4px;
+}
+
+.slider > .highlight-track {
+	background-color: #8DCA09;
+	background: -webkit-linear-gradient(top, #8DCA09, #72A307);
+	background: -moz-linear-gradient(top, #8DCA09, #72A307);
+	background: linear-gradient(top, #8DCA09, #72A307);
+	
+	border-color: #496805;
+}
+

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/demo.html

+<html>
+<head>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
+  <script src="js/simple-slider.js"></script>
+
+  <link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
+  <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />  
+  
+  <!-- These styles are only used for this page, not required for the slider -->
+  <style>
+  body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+  [class^=slider] { display: inline-block; margin-bottom: 30px; }
+  .output { color: #888; font-size: 14px; padding-top: 1px; margin-left: 5px; vertical-align: top;}
+  h1 { font-size: 20px; }
+  h2 { clear: both; margin: 0; margin-bottom: 5px; font-size: 16px; }
+  p { font-size: 15px; margin-bottom: 30px; }
+  h2:first-of-type { margin-top: 0; }
+  </style>
+</head>
+
+<body>
+  <h1>jQuery Simple Slider Examples</h1>
+  <p>
+    Here are a few examples of the functionality available in Simple Slider.
+  </p>
+
+
+  <h2>Basic Example</h2>
+  <input type="text" data-slider="true">
+
+  <h2>Basic Example (Themed)</h2>
+  <input type="text" data-slider="true" data-slider-theme="volume">
+
+  <h2>Predefined Value</h2>
+  <input type="text" value="0.2" data-slider="true">
+
+  <h2>Steps</h2>
+  <input type="text" data-slider="true" data-slider-step="0.1">
+
+  <h2>Range</h2>
+  <input type="text" data-slider="true" data-slider-range="10,1000">
+
+  <h2>Range &amp; Steps</h2>
+  <input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100">
+
+  <h2>Range, Steps &amp; Snap</h2>
+  <input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100" data-slider-snap="true">
+
+  <h2>Predefined List of Values</h2>
+  <input type="text" data-slider="true" data-slider-values="0,100,500,800,2000">
+
+  <h2>Predefined List &amp; Snap</h2>
+  <input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-snap="true">
+
+  <h2>Predefined List, Equal Steps &amp; Snap</h2>
+  <input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-equal-steps="true" data-slider-snap="true">
+
+  <h2>Highlighted</h2>
+  <input type="text" data-slider="true" value="0.8" data-slider-highlight="true">
+
+  <h2>Highlighted (Themed)</h2>
+  <input type="text" data-slider="true" value="0.4" data-slider-highlight="true" data-slider-theme="volume">
+
+  <script>
+  $("[data-slider]")
+    .each(function () {
+      var input = $(this);
+      $("<span>")
+        .addClass("output")
+        .insertAfter($(this));
+    })
+    .bind("slider:ready slider:changed", function (event, data) {
+      $(this)
+        .nextAll(".output:first")
+          .html(data.value.toFixed(3));
+    });
+  </script>
+</body>
+</html>

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/grunt.js

+module.exports = function(grunt) { 
+  grunt.initConfig({
+    pkg: '<json:package.json>',
+
+    meta: {
+      banner:
+        '/*\n' + 
+        ' * <%= pkg.title || pkg.name %>: <%= pkg.description %>\n' +
+        ' * Version <%= pkg.version %>\n' + 
+        ' *\n' +
+        ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> (<%= pkg.author.url %>)\n' +
+        ' *\n' +
+        ' * Licensed under the <%= pkg.licenses[0].type %> license (<%= pkg.licenses[0].url %>)\n' +
+        ' *\n' + 
+        ' */\n'
+    },
+
+    coffee: {
+      compile: {
+        files: {
+          'js/<%= pkg.name %>.js': 'js/*.coffee'
+        },
+
+        options: {
+          bare: true
+        }
+      }
+    },
+
+    watch: {
+      coffee: {
+        files: ['js/*.coffee'],
+        tasks: 'coffee growl:coffee'
+      }
+    },
+
+    growl: {
+      coffee: {
+        title: 'CoffeeScript',
+        message: 'Compiled successfully'
+      }
+    },
+
+    min: {
+      dist: {
+        src: ['<banner:meta.banner>', 'js/<%= pkg.name %>.js'],
+        dest: 'js/<%= pkg.name %>.min.js'
+      }
+    },
+    
+    compress: {
+      zip: {
+        files: {
+          "<%= pkg.name %>-<%= pkg.version %>.zip": ["js/**", "demo.html", "README.md"]
+        }
+      }
+    }
+  });
+
+  // Lib tasks.
+  grunt.loadNpmTasks('grunt-contrib');
+  grunt.loadNpmTasks('grunt-growl');
+
+  // Default task.
+  grunt.registerTask('build', 'coffee min');
+  grunt.registerTask('serve', 'server watch:coffee');
+  grunt.registerTask('default', 'build');
+};
\ No newline at end of file

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/js/simple-slider.min.js

+/*
+ * jQuery Simple Slider: Unobtrusive Numerical Slider
+ * Version 1.0.0
+ *
+ * Copyright (c) 2013 James Smith (http://loopj.com)
+ *
+ * Licensed under the MIT license (http://mit-license.org/)
+ *
+ */
+
+var __slice=[].slice,__indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++)if(t in this&&this[t]===e)return t;return-1};(function(e,t){var n;return n=function(){function t(t,n){var r,i=this;this.input=t,this.defaultOptions={animate:!0,snapMid:!1,classPrefix:null,classSuffix:null,theme:null,highlight:!1},this.settings=e.extend({},this.defaultOptions,n),this.settings.theme&&(this.settings.classSuffix="-"+this.settings.theme),this.input.hide(),this.slider=e("<div>").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input),this.input.attr("id")&&this.slider.attr("id",this.input.attr("id")+"-slider"),this.track=this.createDivElement("track").css({width:"100%"}),this.settings.highlight&&(this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})),this.dragger=this.createDivElement("dragger"),this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2}),this.track.css({marginTop:this.track.outerHeight()/-2}),this.settings.highlight&&this.highlightTrack.css({marginTop:this.track.outerHeight()/-2}),this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2}),this.track.mousedown(function(e){return i.trackEvent(e)}),this.settings.highlight&&this.highlightTrack.mousedown(function(e){return i.trackEvent(e)}),this.dragger.mousedown(function(e){if(e.which!==1)return;return i.dragging=!0,i.dragger.addClass("dragging"),i.domDrag(e.pageX,e.pageY),!1}),e("body").mousemove(function(t){if(i.dragging)return i.domDrag(t.pageX,t.pageY),e("body").css({cursor:"pointer"})}).mouseup(function(t){if(i.dragging)return i.dragging=!1,i.dragger.removeClass("dragging"),e("body").css({cursor:"auto"})}),this.pagePos=0,this.input.val()===""?(this.value=this.getRange().min,this.input.val(this.value)):this.value=this.nearestValidValue(this.input.val()),this.setSliderPositionFromValue(this.value),r=this.valueToRatio(this.value),this.input.trigger("slider:ready",{value:this.value,ratio:r,position:r*this.slider.outerWidth(),el:this.slider})}return t.prototype.createDivElement=function(t){var n;return n=e("<div>").addClass(t).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),n},t.prototype.setRatio=function(e){var t;return e=Math.min(1,e),e=Math.max(0,e),t=this.ratioToValue(e),this.setSliderPositionFromValue(t),this.valueChanged(t,e,"setRatio")},t.prototype.setValue=function(e){var t;return e=this.nearestValidValue(e),t=this.valueToRatio(e),this.setSliderPositionFromValue(e),this.valueChanged(e,t,"setValue")},t.prototype.trackEvent=function(e){if(e.which!==1)return;return this.domDrag(e.pageX,e.pageY,!0),this.dragging=!0,!1},t.prototype.domDrag=function(e,t,n){var r,i,s;n==null&&(n=!1),r=e-this.slider.offset().left,r=Math.min(this.slider.outerWidth(),r),r=Math.max(0,r);if(this.pagePos!==r)return this.pagePos=r,i=r/this.slider.outerWidth(),s=this.ratioToValue(i),this.valueChanged(s,i,"domDrag"),this.settings.snap?this.setSliderPositionFromValue(s,n):this.setSliderPosition(r,n)},t.prototype.setSliderPosition=function(e,t){t==null&&(t=!1);if(t&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight)return this.highlightTrack.animate({width:e},200)}else{this.dragger.css({left:e});if(this.settings.highlight)return this.highlightTrack.css({width:e})}},t.prototype.setSliderPositionFromValue=function(e,t){var n;return t==null&&(t=!1),n=this.valueToRatio(e),this.setSliderPosition(n*this.slider.outerWidth(),t)},t.prototype.getRange=function(){return this.settings.allowedValues?{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}:this.settings.range?{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}:{min:0,max:1}},t.prototype.nearestValidValue=function(t){var n,r,i,s;return i=this.getRange(),t=Math.min(i.max,t),t=Math.max(i.min,t),this.settings.allowedValues?(n=null,e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)<Math.abs(n-t))return n=this}),n):this.settings.step?(r=(i.max-i.min)/this.settings.step,s=Math.floor((t-i.min)/this.settings.step),(t-i.min)%this.settings.step>this.settings.step/2&&s<r&&(s+=1),s*this.settings.step+i.min):t},t.prototype.valueToRatio=function(e){var t,n,r,i,s,o,u,a;if(this.settings.equalSteps){a=this.settings.allowedValues;for(i=o=0,u=a.length;o<u;i=++o){t=a[i];if(typeof n=="undefined"||n===null||Math.abs(t-e)<Math.abs(n-e))n=t,r=i}return this.settings.snapMid?(r+.5)/this.settings.allowedValues.length:r/(this.settings.allowedValues.length-1)}return s=this.getRange(),(e-s.min)/(s.max-s.min)},t.prototype.ratioToValue=function(e){var t,n,r,i,s;return this.settings.equalSteps?(s=this.settings.allowedValues.length,i=Math.round(e*s-.5),t=Math.min(i,this.settings.allowedValues.length-1),this.settings.allowedValues[t]):(n=this.getRange(),r=e*(n.max-n.min)+n.min,this.nearestValidValue(r))},t.prototype.valueChanged=function(t,n,r){var i;if(t.toString()===this.value.toString())return;return this.value=t,i={value:t,ratio:n,position:n*this.slider.outerWidth(),trigger:r,el:this.slider},this.input.val(t).trigger(e.Event("change",i)).trigger("slider:changed",i)},t}(),e.extend(e.fn,{simpleSlider:function(){var t,r,i;return i=arguments[0],t=2<=arguments.length?__slice.call(arguments,1):[],r=["setRatio","setValue"],e(this).each(function(){var s,o;return i&&__indexOf.call(r,i)>=0?(s=e(this).data("slider-object"),s[i].apply(s,t)):(o=i,e(this).data("slider-object",new n(e(this),o)))})}}),e(function(){return e("[data-slider]").each(function(){var t,n,r,i;return t=e(this),r={},n=t.data("slider-values"),n&&(r.allowedValues=function(){var e,t,r,s;r=n.split(","),s=[];for(e=0,t=r.length;e<t;e++)i=r[e],s.push(parseFloat(i));return s}()),t.data("slider-range")&&(r.range=t.data("slider-range").split(",")),t.data("slider-step")&&(r.step=t.data("slider-step")),r.snap=t.data("slider-snap"),r.equalSteps=t.data("slider-equal-steps"),t.data("slider-theme")&&(r.theme=t.data("slider-theme")),t.attr("data-slider-highlight")&&(r.highlight=t.data("slider-highlight")),t.data("slider-animate")!=null&&(r.animate=t.data("slider-animate")),t.simpleSlider(r)})})})(this.jQuery||this.Zepto,this);
\ No newline at end of file

circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/package.json

+{
+  "name"            : "simple-slider",
+  "title"           : "jQuery Simple Slider",
+  "description"     : "Unobtrusive Numerical Slider",
+  "version"         : "1.0.0",
+  "homepage"        : "http://loopj.com/jquery-simple-slider",
+  "keywords"        : [],
+  "author"          : {
+    "name"  : "James Smith",
+    "email" : "james@loopj.com",
+    "url"   : "http://loopj.com"
+  },
+  "repository" : {
+    "type" : "git",
+    "url"  : "https://github.com/loopj/jquery-simple-slider.git"
+  },
+  "bugs" : {
+    "url" : "https://github.com/loopj/jquery-simple-slider/issues"
+  },
+  "licenses": [{
+    "type": "MIT",
+    "url" : "http://mit-license.org/"
+  }],
+  "devDependencies" : {
+    "grunt" : "0.3.x",
+    "grunt-contrib": "0.2.x",
+    "grunt-growl": "git://github.com/loopj/grunt-growl.git#master"
+  },
+  "scripts": {
+    "test": "grunt"
+  }
+}
\ No newline at end of file

circle/dashboard/templates/dashboard/base.html

+<!DOCTYPE html>
+<html lang="{{lang}}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Jumbotron Template for Bootstrap</title>
+
+    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+    <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
+    <link href="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/css/simple-slider.css" rel="stylesheet">
+    <script src="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/js/simple-slider.min.js"></script>
+
+    <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
+    <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container">
+        <a class="navbar-brand" href="/dashboard/">Project name</a>
+      </div>
+    </div>
+
+    <div class="container">
+{% block content %}
+      <h1 class="alert alert-error">Please override "content" block.</h1>
+{% endblock %}
+      <hr />
+      <footer>
+        <p>&copy; Company 2013</p>
+      </footer>
+    </div> <!-- /container -->
+
+  </body>
+</html>

circle/dashboard/templates/dashboard/index-files.html

+<div class="panel panel-default">
+  <div class="panel-heading">
+    <ul class="list-inline pull-right">
+      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
+      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
+    </ul>
+    <h3 class="no-margin"><i class="icon-briefcase"></i> Files
+    </h3>
+  </div>
+  <div class="list-group" id="vm-list-view">
+    <a href="#" class="list-group-item">
+      <i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <div href="#" class="list-group-item list-group-footer text-right">
+      <p>
+        <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more  </a>
+        <a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload  </a>
+      </p>
+    </div>
+  </div>
+</div>

circle/dashboard/templates/dashboard/index-groups.html

+<div class="panel panel-default">
+  <div class="panel-heading">
+    <ul class="list-inline pull-right">
+      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
+      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
+    </ul>
+    <h3 class="no-margin"><i class="icon-group"></i> Groups
+    </h3>
+  </div>
+  <div class="list-group" id="vm-list-view">
+    <a href="#" class="list-group-item">
+      <i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+    </a>
+    <div href="#" class="list-group-item list-group-footer text-right">
+      <p>
+        <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more  </a>
+        <a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload  </a>
+      </p>
+    </div>
+  </div>
+</div>

circle/dashboard/templates/dashboard/index-nodes.html

+{% load i18n %}
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <div class="pull-right toolbar">
+      <div class="btn-group">
+        <a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
+        <a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
+      </div>
+      <span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.  "><i class="icon-info-sign"></i></span>
+    </div>
+    <h3 class="no-margin">
+      <i class="icon-sitemap"></i> {% trans "Compute nodes" %}
+    </h3>
+  </div>
+  <div class="panel-body" id="vm-graph-view" style="">
+    <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="68"></p>
+    <p><span class="big"><big>13</big> running </span>
+    + <big>3</big> off + <big>3</big> missing</p>
+      <ul class="list-inline">
+        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
+        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
+        <li class="label label-warning"><i class="icon-off"></i> szilva</li>
+        <li class="label label-warning"><i class="icon-off"></i> korte</li>
+        <li class="label label-warning"><i class="icon-off"></i> korte</li>
+        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
+        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
+        <li class="label label-danger"><i class="icon-question"></i> szilva</li>
+      </ul>
+
+    <div class="clearfix"></div>
+    <div class="text-right">
+      <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong>  more  </a> 
+    </div>
+  </div>
+</div>

circle/dashboard/templates/dashboard/index-templates.html

+<div class="panel panel-default">
+  <div class="panel-heading">
+    <ul class="list-inline pull-right">
+      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
+      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
+    </ul>
+    <h3 class="no-margin"><i class="icon-puzzle-piece"></i> Templates
+    </h3>
+  </div>
+  <div class="list-group" id="vm-list-view">
+    <a href="#" class="list-group-item">