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">
+      <i class="icon-linux"></i> ALMA <small class="text-muted">CentOS 6</small><div class="pull-right"><i class="icon-play "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-windows"></i> ALMA <small class="text-muted">Windows 7</small><div class="pull-right"><i class="icon-play "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-linux"></i> ALMA <small class="text-muted">Gentoo</small><div class="pull-right"><i class="icon-play "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-linux"></i> ALMA <small class="text-muted">Ubuntu 12.04 LTS</small><div class="pull-right"><i class="icon-play "></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-windows"></i> ALMA <small class="text-muted">Windows 7</small><div class="pull-right"><i class="icon-play "></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-vm.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-desktop"></i> Virtual machines
+    </h3>
+  </div>
+  <div class="list-group" id="vm-list-view">
+    <a href="vm/442" class="list-group-item">
+      <i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
+    </a>
+    <a href="vm/443" class="list-group-item">
+      <i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
+    </a>
+    <a href="#" class="list-group-item">
+      <i class="icon-off"></i> ALMA <div class="pull-right"><i class="icon-star-empty text-muted"></i></div>
+    </a>
+    <div href="#" class="list-group-item list-group-footer">
+      <div class="row">
+        <div class="col-sm-6 input-group input-group-sm">
+          <input type="text" class="form-control" placeholder="Search..." />
+          <div class="input-group-btn">
+            <button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
+          </div>
+        </div>
+        <div class="col-sm-6 text-right">
+          <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong>  more  </a>
+          <a class="btn btn-success btn-xs"><i class="icon-plus-sign"></i> new </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="panel-body" id="vm-graph-view" style="display: none">
+    <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="100" data-height="100" data-readOnly="true" value="22"></p>
+    <p><span class="bigbig"><big>13</big> running </span>
+      <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> cseresznye</li>
+      </ul>
+    </p>
+    <p class="big text-warning"><big>10</big> stopped</p>
+    <p>Total: $3000 </p>
+
+    <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.html

+{% extends "dashboard/base.html" %}
+{% load i18n %}
+
+{% block content %}
+<!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+  <h1>Hello, world!</h1>
+  <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+  <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+</div>
+
+<div class="body-content dashboard-index">
+  <div class="row">
+
+    <div class="col-lg-4 col-md-6">
+      {% include "dashboard/index-vm.html" %}
+    </div>
+
+    <div class="col-lg-4 col-md-6">
+      {% include "dashboard/index-groups.html" %}
+    </div>
+
+    <div class="col-lg-4 col-md-6">
+      {% include "dashboard/index-files.html" %}
+    </div>
+
+    <div class="col-lg-4 col-md-6">
+      {% include "dashboard/index-templates.html" %}
+    </div>
+
+    <div class="col-lg-4 col-md-6">
+      {% include "dashboard/index-nodes.html" %}
+    </div>
+  </div>
+</div>
+
+
+{% endblock %}

circle/dashboard/templates/dashboard/vm-detail-access.html

+{% load i18n %}
+<h3>{% trans "Owner" %}</h3>
+<p>
+  {% blocktrans %}You are the current owner of this instance.{% endblocktrans %}
+  <a href="#" class="btn btn-link">{% trans "Transfer ownership..." %}</a>
+</p>
+<h3>{% trans "Permissions"|capfirst %}</h3>
+  <table class="table table-striped table-with-form-fields">
+    <thead><tr><th></th><th>{% trans "Who" %}</th><th>{% trans "What" %}</th><th></th></tr></thead>
+    <tbody>
+      <tr><td><i class="icon-user"></i></td><td>NEP123 (Gipsz Jakab)</td><td><select class="form-control"><option>owner</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+      <tr><td><i class="icon-user"></i></td><td>NEP123 (Gipsz Jakab)</td><td><select class="form-control"><option>control</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+      <tr><td><i class="icon-group"></i></td><td>Cloud-fejlesztők</td><td><select class="form-control"><option>view</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+      <tr><td><i class="icon-plus"></i></td><td><input type="text" class="form-control"></td>
+          <td><select class="form-control"><option>owner</option></select></td><td></td></tr>
+  </tbody>
+  </table>
+  <div class="form-actions">
+    <button type="submit" class="btn btn-success">{% trans "Save" %}</button>
+  </div>

circle/dashboard/templates/dashboard/vm-detail-activity.html

+{% load i18n %}
+<h3>{% trans "Activity" %}</h3>
+<div class="timeline">
+  <div><span class="timeline-icon timeline-warning"><i class="icon-remove"></i></span> <strong>Removing</strong> 2013-11-21 15:32</div>
+  <div><span class="timeline-icon timeline-warning"><i class="icon-pause"></i></span> <strong>Suspending</strong> 2013-09-21 15:32</div>
+  <div><span class="timeline-icon"><i class="icon-ellipsis-vertical"></i></span> <strong>(now)</strong></div>
+  <div><span class="timeline-icon"><i class="icon-truck"></i></span> <strong>Migrated to mega5</strong> 2013-04-21 15:32, ABC123</div>
+  <div><span class="timeline-icon"><i class="icon-refresh"></i></span> <strong>Forced reboot</strong> 2013-04-21 15:32, ABC123</div>
+  <div><span class="timeline-icon"><i class="icon-plus"></i></span> <strong>Created</strong> 2013-04-21 15:32, ABC123</div>
+</div>

circle/dashboard/templates/dashboard/vm-detail-console.html

+CONSOLE

circle/dashboard/templates/dashboard/vm-detail-home.html

+<div class="row">
+  <div class="col-md-4">
+    <dl>
+      <dt>System:</dt>
+      <dd><i class="icon-linux"></i> Uhu Binux Optikai Rendszer</dd>
+      <dt>Description:</dt>
+      <dd><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est libero, hendrerit at posuere sed, molestie congue quam. </small></dd>
+    </dl>
+  </div>
+  <div class="col-md-8">
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+<img src="/static/grafikon.png" style="width:45%"/>
+  </div>
+</div>

circle/dashboard/templates/dashboard/vm-detail-network.html

+{% load i18n %}
+<h2><a href="#" class="btn btn-success pull-right"><i class="icon-plus"></i> add interface</a>
+
+Interfaces</h2>
+
+<h3 class="list-group-item-heading"><i class="icon-globe"></i> vmnet </h3>
+    <div class="row">
+      <div class="col-md-5">
+        <dl>
+        <dt>IPv4 address:</dt> <dd>10.9.8.7</dd>
+        <dt>IPv6 address:</dt> <dd> 2001:2001:2001:2001:2001:2001::</dd>
+        <dt>DNS name:</dt> <dd>550.vm.ik.bme.hu</dd>
+        </dl>
+      </div>
+      <div class="col-md-7">
+        <ul class="nav nav-pills pull-right">
+          <li class="active"><a href="#ipv4" data-toggle="pill" class="text-center">IPv4</a></li>
+          <li><a href="#ipv6" data-toggle="pill" class="text-center">IPv6</a></li>
+        </ul>
+        <h4>Port access</h4>
+        <div class="tab-content">
+          <div class="tab-pane active" id="ipv4">
+            <table class="table table-striped rule-table">
+              <thead>
+                <tr><th>
+                  <i class="icon-globe icon-2x"></i>
+                  <i class="icon-long-arrow-right icon-2x"></i>
+                  </th><th>
+                  <i class="icon-shield icon-2x"></i>
+                  </th><th colspan="2">
+                  <i class="icon-long-arrow-right icon-2x"></i>
+                  <i class="icon-desktop icon-2x"></i>
+                </th></tr>
+              </thead>
+              <tbody>
+                <tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="ssh">22</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+                <tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td>12344/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+                <tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="http-alt">8080</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+              </tbody>
+              <tfoot>
+                <tr><td><i class="icon-plus"></i> <i class="icon-long-arrow-right"></i></td><td colspan="2">
+                  <div class="input-group input-group-sm">
+                  <input type="text" class="form-control" size="5" />
+                  <span class="input-group-addon">/</span>
+                  <select class="form-control"><option>tcp</option><option>udp</option></select>
+                  </div>
+                  </td><td><button type="submit" class="btn btn-success btn-sm">Add</button></td></tr>
+              </tfoot>
+            </table>
+          </div> <!-- /ipv4 -->
+          <div class="tab-pane" id="ipv6">
+            <table class="table table-striped rule-table">
+              <thead>
+                <tr><th>
+                  <i class="icon-globe icon-2x"></i>
+                </th><th>
+                  <i class="icon-long-arrow-right icon-2x"></i>
+                </th><th colspan="2">
+                  <i class="icon-desktop icon-2x"></i>
+                </th></tr>
+              </thead>
+              <tbody>
+                <tr><td>550.vm.ik.bme.hu:22</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="ssh">22</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+                <tr><td>550.vm.ik.bme.hu:12344</td><td><i class="icon-long-arrow-right"></i></td><td>12344/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+                <tr><td>550.vm.ik.bme.hu:8080</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="http-alt">8080</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+              </tbody>
+              <tfoot>
+                <tr><td><i class="icon-plus"></i> <i class="icon-long-arrow-right"></i></td><td colspan="2">
+                  <div class="input-group input-group-sm">
+                  <input type="text" class="form-control" size="5" />
+                  <span class="input-group-addon">/</span>
+                  <select class="form-control"><option>tcp</option><option>udp</option></select>
+                  </div>
+                  </td><td><button type="submit" class="btn btn-success btn-sm">Add</button></td></tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+<h3 class="list-group-item-heading"><i class="icon-link"></i> grid (unmanaged) <a href="#" class="btn btn-danger btn-xs">remove</a></h3>
+<h3 class="list-group-item-heading"><i class="icon-link"></i> asdasd (unmanaged) <a href="#" class="btn btn-danger btn-xs">remove</a></h3>

circle/dashboard/templates/dashboard/vm-detail-resources.html

+<p class="row">
+    <div class="col-sm-3">
+        <label for="cpu-priority-slider"><i class="icon-trophy"></i> CPU priority</label>
+    </div>
+    <div class="col-sm-9">
+        <input type="text" data-slider="true" data-slider-highlight="true" data-slider-snap="true" id="cpu-priority-slider" value="0.25">
+    </div>
+</p>
+
+
+<p class="row">
+    <div class="col-sm-3">
+        <label for="cpu-count-slider"><i class="icon-cogs"></i> CPU count</label>
+    </div>
+    <div class="col-sm-9">
+        <input type="text" value="1" data-slider="true" data-slider-highlight="true" data-slider-range="0,8" data-slider-snap="true" data-slider-step="1" id="cpu-count-slider">
+    </div>
+</p>
+
+
+<p class="row">
+    <div class="col-sm-3">
+        <label for="ram-slider"><i class="icon-ticket"></i> RAM amount</label>
+    </div>
+    <div class="col-sm-9">
+        <input type="text" data-slider="true" data-slider-highlight="true" id="ram-slider" data-slider-range="128,4096" data-slider-snap="true" data-slider-step="128"> MiB
+    </div>
+</p>
+

circle/dashboard/templates/dashboard/vm-detail.html

+{% extends "dashboard/base.html" %}
+{% load i18n %}
+
+{% block content %}
+<div class="body-content">
+  <div class="page-header">
+    <h1>devenv <small>550.vm.ik.bme.hu</small></h1>
+  </div>
+  <div class="row">
+    <div class="col-md-4">
+      <div class="big">
+        <span class="label label-success ">RUNNING</span>
+        <div class="btn-group">
+          <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
+            <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
+            <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+          </ul>
+        </div>
+      </div>
+      <h3>{% trans "Connection" %}</h3>
+      <input type="text" value="ssh cloud@vm.ik.bme.hu -p22312" class="form-control" readonly />
+      <dl class="dl-horizontal">
+        <dt>Etiam at felis:</dt>
+        <dd>condimentum lig igulaulal ulaligula vel</dd>
+        <dt>Vivamus nec:</dt>
+        <dd>ac metus interdum, tincidunt</dd>
+      </dl>
+    </div>
+    <div class="col-md-8">
+      <div class="panel panel-default" id="vm-detail-panel">
+        <ul class="nav nav-pills panel-heading">
+          <li class="active">
+            <a href="#home" data-toggle="pill" class="text-center">
+              <i class="icon-compass icon-2x"></i><br>
+              {% trans "Home" %}</a></li>
+          <li>
+            <a href="#resources" data-toggle="pill" class="text-center">
+              <i class="icon-tasks icon-2x"></i><br>
+              {% trans "Resources" %}</a></li>
+          <li>
+            <a href="#console" data-toggle="pill" class="text-center">
+              <i class="icon-desktop icon-2x"></i><br>
+              {% trans "Console" %}</a></li>
+          <li>
+            <a href="#access" data-toggle="pill" class="text-center">
+              <i class="icon-group icon-2x"></i><br>
+              {% trans "Access" %}</a></li>
+          <li>
+            <a href="#network" data-toggle="pill" class="text-center">
+              <i class="icon-globe icon-2x"></i><br>
+              {% trans "Network" %}</a></li>
+          <li>
+            <a href="#activity" data-toggle="pill" class="text-center">
+              <i class="icon-time icon-2x"></i><br>
+              {% trans "Activity" %}</a></li>
+        </ul>
+
+        <div class="tab-content panel-body">
+          <div class="tab-pane active" id="home">{% include "dashboard/vm-detail-home.html" %}</div>
+          <div class="tab-pane" id="resources">{% include "dashboard/vm-detail-resources.html" %}</div>
+          <div class="tab-pane" id="console">{% include "dashboard/vm-detail-console.html" %}</div>
+          <div class="tab-pane" id="access">{% include "dashboard/vm-detail-access.html" %} </div>
+          <div class="tab-pane" id="network">{% include "dashboard/vm-detail-network.html" %}</div>
+          <div class="tab-pane" id="activity">{% include "dashboard/vm-detail-activity.html" %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}

circle/dashboard/tests.py

+"""
+This file demonstrates writing tests using the unittest module. These will pass
+when you run "manage.py test".
+
+Replace this with more appropriate tests for your application.
+"""
+
+from django.test import TestCase
+
+
+class SimpleTest(TestCase):
+    def test_basic_addition(self):
+        """
+        Tests that 1 + 1 always equals 2.
+        """
+        self.assertEqual(1 + 1, 2)

circle/dashboard/urls.py

+from django.conf.urls import patterns, include, url
+
+from .views import IndexView, VmDetailView
+
+urlpatterns = patterns('',
+                       url(r'^$', IndexView.as_view()),
+                       url(r'^vm/\d+/$', VmDetailView.as_view()),
+)

circle/dashboard/views.py

+from django.views.generic import TemplateView
+
+
+class IndexView(TemplateView):
+    template_name="dashboard/index.html"
+
+
+class VmDetailView(TemplateView):
+    template_name="dashboard/vm-detail.html"