dashboard: merge from dashboard

circle/circle/settings/base.py

@@ -229,6 +229,7 @@ LOCAL_APPS = (
     'storage',
     'storage',
     'firewall',
     'firewall',
     'network',
     'network',
+    'dashboard',
 )
 )
 
 
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps
 # 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'^admin/', include(admin.site.urls)),
     url(r'^network/', include('network.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/js/jquery.knob.js

+/*!jQuery Knob*/
+/**
+ * Downward compatible, touchable dial
+ *
+ * Version: 1.2.0 (15/07/2012)
+ * Requires: jQuery v1.7+
+ *
+ * Copyright (c) 2012 Anthony Terrien
+ * Under MIT and GPL licenses:
+ *  http://www.opensource.org/licenses/mit-license.php
+ *  http://www.gnu.org/licenses/gpl.html
+ *
+ * Thanks to vor, eskimoblood, spiffistan, FabrizioC
+ */
+(function($) {
+
+    /**
+     * Kontrol library
+     */
+    "use strict";
+
+    /**
+     * Definition of globals and core
+     */
+    var k = {}, // kontrol
+        max = Math.max,
+        min = Math.min;
+
+    k.c = {};
+    k.c.d = $(document);
+    k.c.t = function (e) {
+        return e.originalEvent.touches.length - 1;
+    };
+
+    /**
+     * Kontrol Object
+     *
+     * Definition of an abstract UI control
+     *
+     * Each concrete component must call this one.
+     * <code>
+     * k.o.call(this);
+     * </code>
+     */
+    k.o = function () {
+        var s = this;
+
+        this.o = null; // array of options
+        this.$ = null; // jQuery wrapped element
+        this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
+        this.g = null; // 2D graphics context for 'pre-rendering'
+        this.v = null; // value ; mixed array or integer
+        this.cv = null; // change value ; not commited value
+        this.x = 0; // canvas x position
+        this.y = 0; // canvas y position
+        this.$c = null; // jQuery canvas element
+        this.c = null; // rendered canvas context
+        this.t = 0; // touches index
+        this.isInit = false;
+        this.fgColor = null; // main color
+        this.pColor = null; // previous color
+        this.dH = null; // draw hook
+        this.cH = null; // change hook
+        this.eH = null; // cancel hook
+        this.rH = null; // release hook
+        this.scale = 1; // scale factor
+
+        this.run = function () {
+            var cf = function (e, conf) {
+                var k;
+                for (k in conf) {
+                    s.o[k] = conf[k];
+                }
+                s.init();
+                s._configure()
+                 ._draw();
+            };
+
+            if(this.$.data('kontroled')) return;
+            this.$.data('kontroled', true);
+
+            this.extend();
+            this.o = $.extend(
+                {
+                    // Config
+                    min : this.$.data('min') || 0,
+                    max : this.$.data('max') || 100,
+                    stopper : true,
+                    readOnly : this.$.data('readonly'),
+
+                    // UI
+                    cursor : (this.$.data('cursor') === true && 30)
+                                || this.$.data('cursor')
+                                || 0,
+                    thickness : this.$.data('thickness') || 0.35,
+                    lineCap : this.$.data('linecap') || 'butt',
+                    width : this.$.data('width') || 200,
+                    height : this.$.data('height') || 200,
+                    displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
+                    displayPrevious : this.$.data('displayprevious'),
+                    fgColor : this.$.data('fgcolor') || '#87CEEB',
+                    inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB',
+                    inline : false,
+                    step : this.$.data('step') || 1,
+
+                    // Hooks
+                    draw : null, // function () {}
+                    change : null, // function (value) {}
+                    cancel : null, // function () {}
+                    release : null, // function (value) {}
+                    error : null // function () {}
+                }, this.o
+            );
+
+            // routing value
+            if(this.$.is('fieldset')) {
+
+                // fieldset = array of integer
+                this.v = {};
+                this.i = this.$.find('input')
+                this.i.each(function(k) {
+                    var $this = $(this);
+                    s.i[k] = $this;
+                    s.v[k] = $this.val();
+
+                    $this.bind(
+                        'change'
+                        , function () {
+                            var val = {};
+                            val[k] = $this.val();
+                            s.val(val);
+                        }
+                    );
+                });
+                this.$.find('legend').remove();
+
+            } else {
+                // input = integer
+                this.i = this.$;
+                this.v = this.$.val();
+                (this.v == '') && (this.v = this.o.min);
+
+                this.$.bind(
+                    'change'
+                    , function () {
+                        s.val(s._validate(s.$.val()));
+                    }
+                );
+            }
+
+            (!this.o.displayInput) && this.$.hide();
+
+            this.$c = $('<canvas width="' +
+                            this.o.width + 'px" height="' +
+                            this.o.height + 'px"></canvas>');
+            
+            this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null;
+			
+            if (!this.c) {
+                this.o.error && this.o.error();
+                return;
+            }
+
+            this.$
+                .wrap($('<div style="' + (this.o.inline ? 'display:inline;' : '') +
+                        'width:' + this.o.width + 'px;height:' +
+                        this.o.height + 'px;"></div>'))
+                .before(this.$c);
+
+            this.scale = (window.devicePixelRatio || 1) /
+                        (
+                            this.c.webkitBackingStorePixelRatio ||
+                            this.c.mozBackingStorePixelRatio ||
+                            this.c.msBackingStorePixelRatio ||
+                            this.c.oBackingStorePixelRatio ||
+                            this.c.backingStorePixelRatio || 1
+                        );
+            if (this.scale !== 1) {
+                this.$c[0].width = this.$c[0].width * this.scale;
+                this.$c[0].height = this.$c[0].height * this.scale;
+                this.$c.width(this.o.width);
+                this.$c.height(this.o.height);
+            }
+
+            if (this.v instanceof Object) {
+                this.cv = {};
+                this.copy(this.v, this.cv);
+            } else {
+                this.cv = this.v;
+            }
+
+            this.$
+                .bind("configure", cf)
+                .parent()
+                .bind("configure", cf);
+
+            this._listen()
+                ._configure()
+                ._xy()
+                .init();
+
+            this.isInit = true;
+
+            this._draw();
+
+            return this;
+        };
+
+        this._draw = function () {
+
+            // canvas pre-rendering
+            var d = true,
+                c = document.createElement('canvas');
+
+            c.width = s.o.width * s.scale;
+            c.height = s.o.height * s.scale;
+
+            s.g = c.getContext('2d');
+
+            s.clear();
+
+            s.dH
+            && (d = s.dH());
+
+            (d !== false) && s.draw();
+
+            s.c.drawImage(c, 0, 0);
+            c = null;
+        };
+
+        this._touch = function (e) {
+
+            var touchMove = function (e) {
+
+                var v = s.xy2val(
+                            e.originalEvent.touches[s.t].pageX,
+                            e.originalEvent.touches[s.t].pageY
+                            );
+
+                if (v == s.cv) return;
+
+                if (
+                    s.cH
+                    && (s.cH(v) === false)
+                ) return;
+
+
+                s.change(s._validate(v));
+                s._draw();
+            };
+
+            // get touches index
+            this.t = k.c.t(e);
+
+            // First touch
+            touchMove(e);
+
+            // Touch events listeners
+            k.c.d
+                .bind("touchmove.k", touchMove)
+                .bind(
+                    "touchend.k"
+                    , function () {
+                        k.c.d.unbind('touchmove.k touchend.k');
+
+                        if (
+                            s.rH
+                            && (s.rH(s.cv) === false)
+                        ) return;
+
+                        s.val(s.cv);
+                    }
+                );
+
+            return this;
+        };
+
+        this._mouse = function (e) {
+
+            var mouseMove = function (e) {
+                var v = s.xy2val(e.pageX, e.pageY);
+                if (v == s.cv) return;
+
+                if (
+                    s.cH
+                    && (s.cH(v) === false)
+                ) return;
+
+                s.change(s._validate(v));
+                s._draw();
+            };
+
+            // First click
+            mouseMove(e);
+
+            // Mouse events listeners
+            k.c.d
+                .bind("mousemove.k", mouseMove)
+                .bind(
+                    // Escape key cancel current change
+                    "keyup.k"
+                    , function (e) {
+                        if (e.keyCode === 27) {
+                            k.c.d.unbind("mouseup.k mousemove.k keyup.k");
+
+                            if (
+                                s.eH
+                                && (s.eH() === false)
+                            ) return;
+
+                            s.cancel();
+                        }
+                    }
+                )
+                .bind(
+                    "mouseup.k"
+                    , function (e) {
+                        k.c.d.unbind('mousemove.k mouseup.k keyup.k');
+
+                        if (
+                            s.rH
+                            && (s.rH(s.cv) === false)
+                        ) return;
+
+                        s.val(s.cv);
+                    }
+                );
+
+            return this;
+        };
+
+        this._xy = function () {
+            var o = this.$c.offset();
+            this.x = o.left;
+            this.y = o.top;
+            return this;
+        };
+
+        this._listen = function () {
+
+            if (!this.o.readOnly) {
+                this.$c
+                    .bind(
+                        "mousedown"
+                        , function (e) {
+                            e.preventDefault();
+                            s._xy()._mouse(e);
+                         }
+                    )
+                    .bind(
+                        "touchstart"
+                        , function (e) {
+                            e.preventDefault();
+                            s._xy()._touch(e);
+                         }
+                    );
+                this.listen();
+            } else {
+                this.$.attr('readonly', 'readonly');
+            }
+
+            return this;
+        };
+
+        this._configure = function () {
+
+            // Hooks
+            if (this.o.draw) this.dH = this.o.draw;
+            if (this.o.change) this.cH = this.o.change;
+            if (this.o.cancel) this.eH = this.o.cancel;
+            if (this.o.release) this.rH = this.o.release;
+
+            if (this.o.displayPrevious) {
+                this.pColor = this.h2rgba(this.o.fgColor, "0.4");
+                this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
+            } else {
+                this.fgColor = this.o.fgColor;
+            }
+
+            return this;
+        };
+
+        this._clear = function () {
+            this.$c[0].width = this.$c[0].width;
+        };
+
+        this._validate = function(v) {
+            return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
+        };
+
+        // Abstract methods
+        this.listen = function () {}; // on start, one time
+        this.extend = function () {}; // each time configure triggered
+        this.init = function () {}; // each time configure triggered
+        this.change = function (v) {}; // on change
+        this.val = function (v) {}; // on release
+        this.xy2val = function (x, y) {}; //
+        this.draw = function () {}; // on change / on release
+        this.clear = function () { this._clear(); };
+
+        // Utils
+        this.h2rgba = function (h, a) {
+            var rgb;
+            h = h.substring(1,7)
+            rgb = [parseInt(h.substring(0,2),16)
+                   ,parseInt(h.substring(2,4),16)
+                   ,parseInt(h.substring(4,6),16)];
+            return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
+        };
+
+        this.copy = function (f, t) {
+            for (var i in f) { t[i] = f[i]; }
+        };
+    };
+
+
+    /**
+     * k.Dial
+     */
+    k.Dial = function () {
+        k.o.call(this);
+
+        this.startAngle = null;
+        this.xy = null;
+        this.radius = null;
+        this.lineWidth = null;
+        this.cursorExt = null;
+        this.w2 = null;
+        this.PI2 = 2*Math.PI;
+
+        this.extend = function () {
+            this.o = $.extend(
+                {
+                    bgColor : this.$.data('bgcolor') || '#EEEEEE',
+                    angleOffset : this.$.data('angleoffset') || 0,
+                    angleArc : this.$.data('anglearc') || 360,
+                    inline : true
+                }, this.o
+            );
+        };
+
+        this.val = function (v) {
+            if (null != v) {
+                this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
+                this.v = this.cv;
+                this.$.val(this.v);
+                this._draw();
+            } else {
+                return this.v;
+            }
+        };
+
+        this.xy2val = function (x, y) {
+            var a, ret;
+
+            a = Math.atan2(
+                        x - (this.x + this.w2)
+                        , - (y - this.y - this.w2)
+                    ) - this.angleOffset;
+
+            if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
+                // if isset angleArc option, set to min if .5 under min
+                a = 0;
+            } else if (a < 0) {
+                a += this.PI2;
+            }
+
+            ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
+                    + this.o.min;
+
+            this.o.stopper
+            && (ret = max(min(ret, this.o.max), this.o.min));
+
+            return ret;
+        };
+
+        this.listen = function () {
+            // bind MouseWheel
+            var s = this,
+                mw = function (e) {
+                            e.preventDefault();
+                            var ori = e.originalEvent
+                                ,deltaX = ori.detail || ori.wheelDeltaX
+                                ,deltaY = ori.detail || ori.wheelDeltaY
+                                ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
+
+                            if (
+                                s.cH
+                                && (s.cH(v) === false)
+                            ) return;
+
+                            s.val(v);
+                        }
+                , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
+
+            this.$
+                .bind(
+                    "keydown"
+                    ,function (e) {
+                        var kc = e.keyCode;
+
+                        // numpad support
+                        if(kc >= 96 && kc <= 105) {
+                            kc = e.keyCode = kc - 48;
+                        }
+
+                        kval = parseInt(String.fromCharCode(kc));
+
+                        if (isNaN(kval)) {
+
+                            (kc !== 13)         // enter
+                            && (kc !== 8)       // bs
+                            && (kc !== 9)       // tab
+                            && (kc !== 189)     // -
+                            && e.preventDefault();
+
+                            // arrows
+                            if ($.inArray(kc,[37,38,39,40]) > -1) {
+                                e.preventDefault();
+
+                                var v = parseInt(s.$.val()) + kv[kc] * m;
+
+                                s.o.stopper
+                                && (v = max(min(v, s.o.max), s.o.min));
+
+                                s.change(v);
+                                s._draw();
+
+                                // long time keydown speed-up
+                                to = window.setTimeout(
+                                    function () { m*=2; }
+                                    ,30
+                                );
+                            }
+                        }
+                    }
+                )
+                .bind(
+                    "keyup"
+                    ,function (e) {
+                        if (isNaN(kval)) {
+                            if (to) {
+                                window.clearTimeout(to);
+                                to = null;
+                                m = 1;
+                                s.val(s.$.val());
+                            }
+                        } else {
+                            // kval postcond
+                            (s.$.val() > s.o.max && s.$.val(s.o.max))
+                            || (s.$.val() < s.o.min && s.$.val(s.o.min));
+                        }
+
+                    }
+                );
+
+            this.$c.bind("mousewheel DOMMouseScroll", mw);
+            this.$.bind("mousewheel DOMMouseScroll", mw)
+        };
+
+        this.init = function () {
+
+            if (
+                this.v < this.o.min
+                || this.v > this.o.max
+            ) this.v = this.o.min;
+
+            this.$.val(this.v);
+            this.w2 = this.o.width / 2;
+            this.cursorExt = this.o.cursor / 100;
+            this.xy = this.w2 * this.scale;
+            this.lineWidth = this.xy * this.o.thickness;
+            this.lineCap = this.o.lineCap;
+            this.radius = this.xy - this.lineWidth / 2;
+
+            this.o.angleOffset
+            && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
+
+            this.o.angleArc
+            && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
+
+            // deg to rad
+            this.angleOffset = this.o.angleOffset * Math.PI / 180;
+            this.angleArc = this.o.angleArc * Math.PI / 180;
+
+            // compute start and end angles
+            this.startAngle = 1.5 * Math.PI + this.angleOffset;
+            this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
+
+            var s = max(
+                            String(Math.abs(this.o.max)).length
+                            , String(Math.abs(this.o.min)).length
+                            , 2
+                            ) + 2;
+
+            this.o.displayInput
+                && this.i.css({
+                        'width' : ((this.o.width / 2 + 4) >> 0) + 'px'
+                        ,'height' : ((this.o.width / 3) >> 0) + 'px'
+                        ,'position' : 'absolute'
+                        ,'vertical-align' : 'middle'
+                        ,'margin-top' : ((this.o.width / 3) >> 0) + 'px'
+                        ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px'
+                        ,'border' : 0
+                        ,'background' : 'none'
+                        ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial'
+                        ,'text-align' : 'center'
+                        ,'color' : this.o.inputColor || this.o.fgColor
+                        ,'padding' : '0px'
+                        ,'-webkit-appearance': 'none'
+                        })
+                || this.i.css({
+                        'width' : '0px'
+                        ,'visibility' : 'hidden'
+                        });
+        };
+
+        this.change = function (v) {
+            this.cv = v;
+            this.$.val(v);
+        };
+
+        this.angle = function (v) {
+            return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
+        };
+
+        this.draw = function () {
+
+            var c = this.g,                 // context
+                a = this.angle(this.cv)    // Angle
+                , sat = this.startAngle     // Start angle
+                , eat = sat + a             // End angle
+                , sa, ea                    // Previous angles
+                , r = 1;
+
+            c.lineWidth = this.lineWidth;
+
+            c.lineCap = this.lineCap;
+
+            this.o.cursor
+                && (sat = eat - this.cursorExt)
+                && (eat = eat + this.cursorExt);
+
+            c.beginPath();
+                c.strokeStyle = this.o.bgColor;
+                c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true);
+            c.stroke();
+
+            if (this.o.displayPrevious) {
+                ea = this.startAngle + this.angle(this.v);
+                sa = this.startAngle;
+                this.o.cursor
+                    && (sa = ea - this.cursorExt)
+                    && (ea = ea + this.cursorExt);
+
+                c.beginPath();
+                    c.strokeStyle = this.pColor;
+                    c.arc(this.xy, this.xy, this.radius, sa, ea, false);
+                c.stroke();
+                r = (this.cv == this.v);
+            }
+
+            c.beginPath();
+                c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
+                c.arc(this.xy, this.xy, this.radius, sat, eat, false);
+            c.stroke();
+        };
+
+        this.cancel = function () {
+            this.val(this.v);
+        };
+    };
+
+    $.fn.dial = $.fn.knob = function (o) {
+        return this.each(
+            function () {
+                var d = new k.Dial();
+                d.o = o;
+                d.$ = $(this);
+                d.run();
+            }
+        ).parent();
+    };
+
+})(jQuery);
\ No newline at end of file

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.coffee

+###
+ jQuery Simple Slider
+
+ Copyright (c) 2012 James Smith (http://loopj.com)
+
+ Licensed under the MIT license (http://mit-license.org/)
+###
+
+(($, window) ->
+
+  #
+  # Main slider class
+  #
+
+  class SimpleSlider
+    # Build a slider object.
+    # Exposed via el.numericalSlider(options)
+    constructor: (@input, options) ->
+      # Load in the settings
+      @defaultOptions =
+        animate: true
+        snapMid: false
+        classPrefix: null
+        classSuffix: null
+        theme: null
+        highlight: false
+
+      @settings = $.extend({}, @defaultOptions, options)
+      @settings.classSuffix = "-#{@settings.theme}" if @settings.theme
+
+      # Hide the original input
+      @input.hide()
+
+      # Create the slider canvas
+      @slider = $("<div>")
+        .addClass("slider"+(@settings.classSuffix || ""))
+        .css
+          position: "relative"
+          userSelect: "none"
+          boxSizing: "border-box"
+        .insertBefore @input
+      @slider.attr("id", @input.attr("id") + "-slider") if @input.attr("id")
+      
+      @track = @createDivElement("track")
+        .css
+          width: "100%"
+      
+      if @settings.highlight
+        # Create the highlighting track on top of the track
+        @highlightTrack = @createDivElement("highlight-track")
+          .css
+            width: "0"
+      
+      # Create the slider drag target
+      @dragger = @createDivElement("dragger")
+
+      # Adjust dimensions now elements are in the DOM
+      @slider.css
+        minHeight: @dragger.outerHeight()
+        marginLeft: @dragger.outerWidth()/2
+        marginRight: @dragger.outerWidth()/2
+
+      @track.css
+        marginTop: @track.outerHeight()/-2
+  
+      if @settings.highlight
+        @highlightTrack.css
+          marginTop: @track.outerHeight()/-2
+
+      @dragger.css
+        marginTop: @dragger.outerWidth()/-2
+        marginLeft: @dragger.outerWidth()/-2
+
+      # Hook up drag/drop mouse events
+      @track
+        .mousedown (e) =>
+          @trackEvent(e)
+
+      if @settings.highlight
+        @highlightTrack
+          .mousedown (e) =>
+            @trackEvent(e)
+
+      @dragger
+        .mousedown (e) =>
+          return unless e.which == 1
+
+          # We've started moving
+          @dragging = true
+          @dragger.addClass "dragging"
+
+          # Update the slider position
+          @domDrag(e.pageX, e.pageY)
+
+          false
+
+      $("body")
+        .mousemove (e) =>
+          if @dragging
+            # Update the slider position
+            @domDrag(e.pageX, e.pageY)
+
+            # Always show a pointer when dragging
+            $("body").css cursor: "pointer"
+
+
+        .mouseup (e) =>
+          if @dragging
+            # Finished dragging
+            @dragging = false
+            @dragger.removeClass "dragging"
+
+            # Revert the cursor
+            $("body").css cursor: "auto"
+
+      # Set slider initial position
+      @pagePos = 0
+      
+      # Fill in initial slider value
+      if @input.val() == ""
+        @value = @getRange().min
+        @input.val(@value)
+      else
+        @value = @nearestValidValue(@input.val())
+
+      @setSliderPositionFromValue(@value)
+
+      # We are ready to go
+      ratio = @valueToRatio(@value)
+      @input.trigger "slider:ready", 
+        value: @value
+        ratio: ratio
+        position: ratio * @slider.outerWidth()
+        el: @slider
+
+    # Create the basis of the track-div(s)
+    createDivElement: (classname) ->
+      item = $("<div>")
+        .addClass(classname)
+        .css
+          position: "absolute"
+          top: "50%"
+          userSelect: "none"
+          cursor: "pointer"
+        .appendTo @slider
+      return item
+    
+
+    # Set the ratio (value between 0 and 1) of the slider.
+    # Exposed via el.slider("setRatio", ratio)
+    setRatio: (ratio) ->
+      # Range-check the ratio
+      ratio = Math.min(1, ratio)
+      ratio = Math.max(0, ratio)
+
+      # Work out the value
+      value = @ratioToValue(ratio)
+
+      # Update the position of the slider on the screen
+      @setSliderPositionFromValue(value)
+
+      # Trigger value changed events
+      @valueChanged(value, ratio, "setRatio")
+
+    # Set the value of the slider
+    # Exposed via el.slider("setValue", value)
+    setValue: (value) ->
+      # Snap value to nearest step or allowedValue
+      value = @nearestValidValue(value)
+
+      # Work out the ratio
+      ratio = @valueToRatio(value)
+
+      # Update the position of the slider on the screen
+      @setSliderPositionFromValue(value)
+
+      # Trigger value changed events
+      @valueChanged(value, ratio, "setValue")
+
+    # Respond to an event on a track
+    trackEvent: (e) -> 
+      return unless e.which == 1
+
+      @domDrag(e.pageX, e.pageY, true)
+      @dragging = true
+      false
+
+    # Respond to a dom drag event
+    domDrag: (pageX, pageY, animate=false) ->
+      # Normalize position within allowed range
+      pagePos = pageX - @slider.offset().left
+      pagePos = Math.min(@slider.outerWidth(), pagePos)
+      pagePos = Math.max(0, pagePos)
+
+      # If the element position has changed, do stuff
+      if @pagePos != pagePos
+        @pagePos = pagePos
+
+        # Set the percentage value of the slider
+        ratio = pagePos / @slider.outerWidth()
+
+        # Trigger value changed events
+        value = @ratioToValue(ratio)
+        @valueChanged(value, ratio, "domDrag")
+
+        # Update the position of the slider on the screen
+        if @settings.snap
+          @setSliderPositionFromValue(value, animate)
+        else
+          @setSliderPosition(pagePos, animate)
+          
+    # Set the slider position given a slider canvas position
+    setSliderPosition: (position, animate=false) ->
+      if animate and @settings.animate
+        @dragger.animate left: position, 200
+        @highlightTrack.animate width: position, 200 if @settings.highlight
+      else
+        @dragger.css left: position
+        @highlightTrack.css width: position if @settings.highlight
+
+    # Set the slider position given a value
+    setSliderPositionFromValue: (value, animate=false) ->
+      # Get the slide ratio from the value
+      ratio = @valueToRatio(value)
+      
+      # Set the slider position
+      @setSliderPosition(ratio * @slider.outerWidth(), animate)
+
+    # Get the valid range of values
+    getRange: ->
+      if @settings.allowedValues
+        min: Math.min(@settings.allowedValues...)
+        max: Math.max(@settings.allowedValues...)
+      else if @settings.range
+        min: parseFloat(@settings.range[0])
+        max: parseFloat(@settings.range[1])
+      else
+        min: 0
+        max: 1
+
+    # Find the nearest valid value, checking allowedValues and step settings
+    nearestValidValue: (rawValue) ->
+      range = @getRange()
+
+      # Range-check the value
+      rawValue = Math.min(range.max, rawValue)
+      rawValue = Math.max(range.min, rawValue)
+
+      # Apply allowedValues or step settings
+      if @settings.allowedValues
+        closest = null
+        $.each @settings.allowedValues, ->
+          if closest == null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)
+            closest = this
+        
+        return closest
+      else if @settings.step
+        maxSteps = (range.max - range.min) / @settings.step
+        steps = Math.floor((rawValue - range.min) / @settings.step)
+        steps += 1 if (rawValue - range.min) % @settings.step > @settings.step / 2 and steps < maxSteps
+
+        return steps * @settings.step + range.min
+      else
+        return rawValue
+
+    # Convert a value to a ratio
+    valueToRatio: (value) ->
+      if @settings.equalSteps        
+        # Get slider ratio for equal-step
+        for allowedVal, idx in @settings.allowedValues
+          if !closest? || Math.abs(allowedVal - value) < Math.abs(closest - value)
+            closest = allowedVal
+            closestIdx = idx
+
+        if @settings.snapMid
+          (closestIdx+0.5)/@settings.allowedValues.length
+        else
+          (closestIdx)/(@settings.allowedValues.length - 1)
+        
+      else
+        # Get slider ratio for continuous values
+        range = @getRange()
+        (value - range.min) / (range.max - range.min)
+
+    # Convert a ratio to a valid value
+    ratioToValue: (ratio) ->
+      if @settings.equalSteps
+        steps = @settings.allowedValues.length
+        step = Math.round(ratio * steps - 0.5)
+        idx = Math.min(step, @settings.allowedValues.length - 1)
+
+        @settings.allowedValues[idx]
+      else
+        range = @getRange()
+        rawValue = ratio * (range.max - range.min) + range.min
+
+        @nearestValidValue(rawValue)
+
+    # Trigger value changed events
+    valueChanged: (value, ratio, trigger) ->
+      return if value.toString() == @value.toString()
+
+      # Save the new value
+      @value = value
+
+      # Construct event data and fire event
+      eventData = 
+        value: value
+        ratio: ratio
+        position: ratio * @slider.outerWidth()
+        trigger: trigger
+        el: @slider
+
+      @input
+        .val(value)
+        .trigger($.Event("change", eventData))
+        .trigger("slider:changed", eventData)
+
+
+  #
+  # Expose as jQuery Plugin
+  #
+
+  $.extend $.fn, simpleSlider: (settingsOrMethod, params...) ->
+    publicMethods = ["setRatio", "setValue"]
+
+    $(this).each ->
+      if settingsOrMethod and settingsOrMethod in publicMethods
+        obj = $(this).data("slider-object")
+        
+        obj[settingsOrMethod].apply(obj, params)
+      else
+        settings = settingsOrMethod
+        $(this).data "slider-object", new SimpleSlider($(this), settings)
+
+
+  #
+  # Attach unobtrusive JS hooks
+  #
+
+  $ ->
+    $("[data-slider]").each ->
+      $el = $(this)
+
+      # Build options object from data attributes
+      settings = {}
+
+      allowedValues = $el.data "slider-values"
+      settings.allowedValues = (parseFloat(x) for x in allowedValues.split(",")) if allowedValues
+      settings.range = $el.data("slider-range").split(",") if $el.data("slider-range")
+      settings.step = $el.data("slider-step") if $el.data("slider-step")
+      settings.snap = $el.data("slider-snap")
+      settings.equalSteps = $el.data("slider-equal-steps")
+      settings.theme = $el.data("slider-theme") if $el.data("slider-theme")
+      settings.highlight = $el.data("slider-highlight") if $el.attr("data-slider-highlight")
+      settings.animate = $el.data("slider-animate") if $el.data("slider-animate")?
+
+      # Activate the plugin
+      $el.simpleSlider settings
+
+) @jQuery or @Zepto, this

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

+/*
+ jQuery Simple Slider
+
+ Copyright (c) 2012 James Smith (http://loopj.com)
+
+ Licensed under the MIT license (http://mit-license.org/)
+*/
+
+var __slice = [].slice,
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+(function($, window) {
+  var SimpleSlider;
+  SimpleSlider = (function() {
+
+    function SimpleSlider(input, options) {
+      var ratio,
+        _this = this;
+      this.input = input;
+      this.defaultOptions = {
+        animate: true,
+        snapMid: false,
+        classPrefix: null,
+        classSuffix: null,
+        theme: null,
+        highlight: false
+      };
+      this.settings = $.extend({}, this.defaultOptions, options);
+      if (this.settings.theme) {
+        this.settings.classSuffix = "-" + this.settings.theme;
+      }
+      this.input.hide();
+      this.slider = $("<div>").addClass("slider" + (this.settings.classSuffix || "")).css({
+        position: "relative",
+        userSelect: "none",
+        boxSizing: "border-box"
+      }).insertBefore(this.input);
+      if (this.input.attr("id")) {
+        this.slider.attr("id", this.input.attr("id") + "-slider");
+      }
+      this.track = this.createDivElement("track").css({
+        width: "100%"
+      });
+      if (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
+      });
+      if (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 _this.trackEvent(e);
+      });
+      if (this.settings.highlight) {
+        this.highlightTrack.mousedown(function(e) {
+          return _this.trackEvent(e);
+        });
+      }
+      this.dragger.mousedown(function(e) {
+        if (e.which !== 1) {
+          return;
+        }
+        _this.dragging = true;
+        _this.dragger.addClass("dragging");
+        _this.domDrag(e.pageX, e.pageY);
+        return false;
+      });
+      $("body").mousemove(function(e) {
+        if (_this.dragging) {
+          _this.domDrag(e.pageX, e.pageY);
+          return $("body").css({
+            cursor: "pointer"
+          });
+        }
+      }).mouseup(function(e) {
+        if (_this.dragging) {
+          _this.dragging = false;
+          _this.dragger.removeClass("dragging");
+          return $("body").css({
+            cursor: "auto"
+          });
+        }
+      });
+      this.pagePos = 0;
+      if (this.input.val() === "") {
+        this.value = this.getRange().min;
+        this.input.val(this.value);
+      } else {
+        this.value = this.nearestValidValue(this.input.val());
+      }
+      this.setSliderPositionFromValue(this.value);
+      ratio = this.valueToRatio(this.value);
+      this.input.trigger("slider:ready", {
+        value: this.value,
+        ratio: ratio,
+        position: ratio * this.slider.outerWidth(),
+        el: this.slider
+      });
+    }
+
+    SimpleSlider.prototype.createDivElement = function(classname) {
+      var item;
+      item = $("<div>").addClass(classname).css({
+        position: "absolute",
+        top: "50%",
+        userSelect: "none",
+        cursor: "pointer"
+      }).appendTo(this.slider);
+      return item;
+    };
+
+    SimpleSlider.prototype.setRatio = function(ratio) {
+      var value;
+      ratio = Math.min(1, ratio);
+      ratio = Math.max(0, ratio);
+      value = this.ratioToValue(ratio);
+      this.setSliderPositionFromValue(value);
+      return this.valueChanged(value, ratio, "setRatio");
+    };
+
+    SimpleSlider.prototype.setValue = function(value) {
+      var ratio;
+      value = this.nearestValidValue(value);
+      ratio = this.valueToRatio(value);
+      this.setSliderPositionFromValue(value);
+      return this.valueChanged(value, ratio, "setValue");
+    };
+
+    SimpleSlider.prototype.trackEvent = function(e) {
+      if (e.which !== 1) {
+        return;
+      }
+      this.domDrag(e.pageX, e.pageY, true);
+      this.dragging = true;
+      return false;
+    };
+
+    SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
+      var pagePos, ratio, value;
+      if (animate == null) {
+        animate = false;
+      }
+      pagePos = pageX - this.slider.offset().left;
+      pagePos = Math.min(this.slider.outerWidth(), pagePos);
+      pagePos = Math.max(0, pagePos);
+      if (this.pagePos !== pagePos) {
+        this.pagePos = pagePos;
+        ratio = pagePos / this.slider.outerWidth();
+        value = this.ratioToValue(ratio);
+        this.valueChanged(value, ratio, "domDrag");
+        if (this.settings.snap) {
+          return this.setSliderPositionFromValue(value, animate);
+        } else {
+          return this.setSliderPosition(pagePos, animate);
+        }
+      }
+    };
+
+    SimpleSlider.prototype.setSliderPosition = function(position, animate) {
+      if (animate == null) {
+        animate = false;
+      }
+      if (animate && this.settings.animate) {
+        this.dragger.animate({
+          left: position
+        }, 200);
+        if (this.settings.highlight) {
+          return this.highlightTrack.animate({
+            width: position
+          }, 200);
+        }
+      } else {
+        this.dragger.css({
+          left: position
+        });
+        if (this.settings.highlight) {
+          return this.highlightTrack.css({
+            width: position
+          });
+        }
+      }
+    };
+
+    SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) {
+      var ratio;
+      if (animate == null) {
+        animate = false;
+      }
+      ratio = this.valueToRatio(value);
+      return this.setSliderPosition(ratio * this.slider.outerWidth(), animate);
+    };
+
+    SimpleSlider.prototype.getRange = function() {
+      if (this.settings.allowedValues) {
+        return {
+          min: Math.min.apply(Math, this.settings.allowedValues),
+          max: Math.max.apply(Math, this.settings.allowedValues)
+        };
+      } else if (this.settings.range) {
+        return {
+          min: parseFloat(this.settings.range[0]),
+          max: parseFloat(this.settings.range[1])
+        };
+      } else {
+        return {
+          min: 0,
+          max: 1
+        };
+      }
+    };
+
+    SimpleSlider.prototype.nearestValidValue = function(rawValue) {
+      var closest, maxSteps, range, steps;
+      range = this.getRange();
+      rawValue = Math.min(range.max, rawValue);
+      rawValue = Math.max(range.min, rawValue);
+      if (this.settings.allowedValues) {
+        closest = null;
+        $.each(this.settings.allowedValues, function() {
+          if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) {
+            return closest = this;
+          }
+        });
+        return closest;
+      } else if (this.settings.step) {
+        maxSteps = (range.max - range.min) / this.settings.step;
+        steps = Math.floor((rawValue - range.min) / this.settings.step);
+        if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) {
+          steps += 1;
+        }
+        return steps * this.settings.step + range.min;
+      } else {
+        return rawValue;
+      }
+    };
+
+    SimpleSlider.prototype.valueToRatio = function(value) {
+      var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref;
+      if (this.settings.equalSteps) {
+        _ref = this.settings.allowedValues;
+        for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
+          allowedVal = _ref[idx];
+          if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) {
+            closest = allowedVal;
+            closestIdx = idx;
+          }
+        }
+        if (this.settings.snapMid) {
+          return (closestIdx + 0.5) / this.settings.allowedValues.length;
+        } else {
+          return closestIdx / (this.settings.allowedValues.length - 1);
+        }
+      } else {
+        range = this.getRange();
+        return (value - range.min) / (range.max - range.min);
+      }
+    };
+
+    SimpleSlider.prototype.ratioToValue = function(ratio) {
+      var idx, range, rawValue, step, steps;
+      if (this.settings.equalSteps) {
+        steps = this.settings.allowedValues.length;
+        step = Math.round(ratio * steps - 0.5);
+        idx = Math.min(step, this.settings.allowedValues.length - 1);
+        return this.settings.allowedValues[idx];
+      } else {
+        range = this.getRange();
+        rawValue = ratio * (range.max - range.min) + range.min;
+        return this.nearestValidValue(rawValue);
+      }
+    };
+
+    SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) {
+      var eventData;
+      if (value.toString() === this.value.toString()) {
+        return;
+      }
+      this.value = value;
+      eventData = {
+        value: value,
+        ratio: ratio,
+        position: ratio * this.slider.outerWidth(),
+        trigger: trigger,
+        el: this.slider
+      };
+      return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
+    };
+
+    return SimpleSlider;
+
+  })();
+  $.extend($.fn, {
+    simpleSlider: function() {
+      var params, publicMethods, settingsOrMethod;
+      settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+      publicMethods = ["setRatio", "setValue"];
+      return $(this).each(function() {
+        var obj, settings;
+        if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) {
+          obj = $(this).data("slider-object");
+          return obj[settingsOrMethod].apply(obj, params);
+        } else {
+          settings = settingsOrMethod;
+          return $(this).data("slider-object", new SimpleSlider($(this), settings));
+        }
+      });
+    }
+  });
+  return $(function() {
+    return $("[data-slider]").each(function() {
+      var $el, allowedValues, settings, x;
+      $el = $(this);
+      settings = {};
+      allowedValues = $el.data("slider-values");
+      if (allowedValues) {
+        settings.allowedValues = (function() {
+          var _i, _len, _ref, _results;
+          _ref = allowedValues.split(",");
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            x = _ref[_i];
+            _results.push(parseFloat(x));
+          }
+          return _results;
+        })();
+      }
+      if ($el.data("slider-range")) {
+        settings.range = $el.data("slider-range").split(",");
+      }
+      if ($el.data("slider-step")) {
+        settings.step = $el.data("slider-step");
+      }
+      settings.snap = $el.data("slider-snap");
+      settings.equalSteps = $el.data("slider-equal-steps");
+      if ($el.data("slider-theme")) {
+        settings.theme = $el.data("slider-theme");
+      }
+      if ($el.attr("data-slider-highlight")) {
+        settings.highlight = $el.data("slider-highlight");
+      }
+      if ($el.data("slider-animate") != null) {
+        settings.animate = $el.data("slider-animate");
+      }
+      return $el.simpleSlider(settings);
+    });
+  });
+})(this.jQuery || this.Zepto, this);

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"