diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..e67e2ef --- /dev/null +++ b/.bowerrc @@ -0,0 +1 @@ +{ "directory": "stackviz/static/components/" } diff --git a/.gitignore b/.gitignore index 09014fb..66b3bf6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ -node_modules -stackviz/static/bundle.js *.pyc -.idea \ No newline at end of file +.idea +stackviz/static/components/* diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e047256 --- /dev/null +++ b/bower.json @@ -0,0 +1,30 @@ +{ + "name": "stackviz", + "version": "0.0.0", + "authors": [ + "Tim Buckley ", + "Austin Clark " + ], + "description": "A performance visualization utility for DevStack and Tempest", + "license": "Apache 2.0", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "bootstrap": "~3.3.1", + "datatables": "~1.10.4", + "datatables-plugins": "~1.0.1", + "flot": "~0.8.3", + "font-awesome": "~4.2.0", + "holderjs": "~2.4.1", + "metisMenu": "~1.1.3", + "morrisjs": "~0.5.1", + "datatables-responsive": "~1.0.3", + "bootstrap-social": "~4.8.0", + "flot.tooltip": "~0.8.4" + } +} diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 387ced5..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,65 +0,0 @@ -var gulp = require('gulp'); -var gutil = require('gulp-util'); -var path = require('path'); -var sourcemaps = require('gulp-sourcemaps'); -var source = require('vinyl-source-stream'); -var buffer = require('vinyl-buffer'); -var browserify = require('browserify'); -var watchify = require('watchify'); - -function configure() { - return browserify('./stackviz/static/js/app.js', { - debug: true - }) -} - -function rebundle(bundler) { - return bundler.bundle() - .on('error', function(err) { - console.error(err); - this.emit('end'); - }) - .pipe(source('bundle.js')) - .pipe(buffer()) - .pipe(sourcemaps.init({ loadMaps: true })) - .pipe(sourcemaps.write()) - .pipe(gulp.dest('./stackviz/static/')); -} - -function compile() { - return rebundle(configure()); -} - -var _count = 1; - -function watch() { - bundler = watchify(configure()); - - bundler.on('update', function(ids) { - var files = []; - ids.forEach(function(id) { - files.push(path.basename(id)); - }); - - var s = '[watch #' + _count + ']'; - gutil.log(gutil.colors.blue(s), - 'building...', - gutil.colors.gray('(', files.join(', '), ')')); - - rebundle(bundler); - }); - - bundler.on('log', function(msg) { - var s = '[watch #' + _count + ']'; - gutil.log(gutil.colors.blue(s), 'finished: ', msg); - - _count++; - }) - - return rebundle(bundler); -}; - -gulp.task('build', function() { return compile(); }); -gulp.task('watch', function() { return watch(); }); - -gulp.task('default', ['build']); diff --git a/package.json b/package.json deleted file mode 100644 index 79e998d..0000000 --- a/package.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "stackviz", - "version": "0.0.0", - "private": true, - "description": "A performance visualization utility for DevStack and Tempest", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "Apache 2.0", - "devDependencies": { - "browserify": "^10.2.6", - "d3": "^3.5.6", - "gulp": "^3.9.0", - "vinyl-buffer": "^1.0.0", - "vinyl-source-stream": "^1.1.0", - "watchify": "^3.2.1" - } -} diff --git a/stackviz/static/css/sb-admin-2.css b/stackviz/static/css/sb-admin-2.css new file mode 100644 index 0000000..e8be396 --- /dev/null +++ b/stackviz/static/css/sb-admin-2.css @@ -0,0 +1,354 @@ +/*! + * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ + +body { + background-color: #f8f8f8; +} + +#wrapper { + width: 100%; +} + +#page-wrapper { + padding: 0 15px; + min-height: 568px; + background-color: #fff; +} + +@media(min-width:768px) { + #page-wrapper { + position: inherit; + margin: 0 0 0 250px; + padding: 0 30px; + border-left: 1px solid #e7e7e7; + } +} + +.navbar-top-links { + margin-right: 0; +} + +.navbar-top-links li { + display: inline-block; +} + +.navbar-top-links li:last-child { + margin-right: 15px; +} + +.navbar-top-links li a { + padding: 15px; + min-height: 50px; +} + +.navbar-top-links .dropdown-menu li { + display: block; +} + +.navbar-top-links .dropdown-menu li:last-child { + margin-right: 0; +} + +.navbar-top-links .dropdown-menu li a { + padding: 3px 20px; + min-height: 0; +} + +.navbar-top-links .dropdown-menu li a div { + white-space: normal; +} + +.navbar-top-links .dropdown-messages, +.navbar-top-links .dropdown-tasks, +.navbar-top-links .dropdown-alerts { + width: 310px; + min-width: 0; +} + +.navbar-top-links .dropdown-messages { + margin-left: 5px; +} + +.navbar-top-links .dropdown-tasks { + margin-left: -59px; +} + +.navbar-top-links .dropdown-alerts { + margin-left: -123px; +} + +.navbar-top-links .dropdown-user { + right: 0; + left: auto; +} + +.sidebar .sidebar-nav.navbar-collapse { + padding-right: 0; + padding-left: 0; +} + +.sidebar .sidebar-search { + padding: 15px; +} + +.sidebar ul li { + border-bottom: 1px solid #e7e7e7; +} + +.sidebar ul li a.active { + background-color: #eee; +} + +.sidebar .arrow { + float: right; +} + +.sidebar .fa.arrow:before { + content: "\f104"; +} + +.sidebar .active>a>.fa.arrow:before { + content: "\f107"; +} + +.sidebar .nav-second-level li, +.sidebar .nav-third-level li { + border-bottom: 0!important; +} + +.sidebar .nav-second-level li a { + padding-left: 37px; +} + +.sidebar .nav-third-level li a { + padding-left: 52px; +} + +@media(min-width:768px) { + .sidebar { + z-index: 1; + position: absolute; + width: 250px; + margin-top: 51px; + } + + .navbar-top-links .dropdown-messages, + .navbar-top-links .dropdown-tasks, + .navbar-top-links .dropdown-alerts { + margin-left: auto; + } +} + +.btn-outline { + color: inherit; + background-color: transparent; + transition: all .5s; +} + +.btn-primary.btn-outline { + color: #428bca; +} + +.btn-success.btn-outline { + color: #5cb85c; +} + +.btn-info.btn-outline { + color: #5bc0de; +} + +.btn-warning.btn-outline { + color: #f0ad4e; +} + +.btn-danger.btn-outline { + color: #d9534f; +} + +.btn-primary.btn-outline:hover, +.btn-success.btn-outline:hover, +.btn-info.btn-outline:hover, +.btn-warning.btn-outline:hover, +.btn-danger.btn-outline:hover { + color: #fff; +} + +.chat { + margin: 0; + padding: 0; + list-style: none; +} + +.chat li { + margin-bottom: 10px; + padding-bottom: 5px; + border-bottom: 1px dotted #999; +} + +.chat li.left .chat-body { + margin-left: 60px; +} + +.chat li.right .chat-body { + margin-right: 60px; +} + +.chat li .chat-body p { + margin: 0; +} + +.panel .slidedown .glyphicon, +.chat .glyphicon { + margin-right: 5px; +} + +.chat-panel .panel-body { + height: 350px; + overflow-y: scroll; +} + +.login-panel { + margin-top: 25%; +} + +.flot-chart { + display: block; + height: 400px; +} + +.flot-chart-content { + width: 100%; + height: 100%; +} + +.dataTables_wrapper { + position: relative; + clear: both; +} + +table.dataTable thead .sorting, +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc, +table.dataTable thead .sorting_asc_disabled, +table.dataTable thead .sorting_desc_disabled { + background: 0 0; +} + +table.dataTable thead .sorting_asc:after { + content: "\f0de"; + float: right; + font-family: fontawesome; +} + +table.dataTable thead .sorting_desc:after { + content: "\f0dd"; + float: right; + font-family: fontawesome; +} + +table.dataTable thead .sorting:after { + content: "\f0dc"; + float: right; + font-family: fontawesome; + color: rgba(50,50,50,.5); +} + +.btn-circle { + width: 30px; + height: 30px; + padding: 6px 0; + border-radius: 15px; + text-align: center; + font-size: 12px; + line-height: 1.428571429; +} + +.btn-circle.btn-lg { + width: 50px; + height: 50px; + padding: 10px 16px; + border-radius: 25px; + font-size: 18px; + line-height: 1.33; +} + +.btn-circle.btn-xl { + width: 70px; + height: 70px; + padding: 10px 16px; + border-radius: 35px; + font-size: 24px; + line-height: 1.33; +} + +.show-grid [class^=col-] { + padding-top: 10px; + padding-bottom: 10px; + border: 1px solid #ddd; + background-color: #eee!important; +} + +.show-grid { + margin: 15px 0; +} + +.huge { + font-size: 40px; +} + +.panel-green { + border-color: #5cb85c; +} + +.panel-green .panel-heading { + border-color: #5cb85c; + color: #fff; + background-color: #5cb85c; +} + +.panel-green a { + color: #5cb85c; +} + +.panel-green a:hover { + color: #3d8b3d; +} + +.panel-red { + border-color: #d9534f; +} + +.panel-red .panel-heading { + border-color: #d9534f; + color: #fff; + background-color: #d9534f; +} + +.panel-red a { + color: #d9534f; +} + +.panel-red a:hover { + color: #b52b27; +} + +.panel-yellow { + border-color: #f0ad4e; +} + +.panel-yellow .panel-heading { + border-color: #f0ad4e; + color: #fff; + background-color: #f0ad4e; +} + +.panel-yellow a { + color: #f0ad4e; +} + +.panel-yellow a:hover { + color: #df8a13; +} \ No newline at end of file diff --git a/stackviz/static/css/timeline.css b/stackviz/static/css/timeline.css new file mode 100644 index 0000000..92161eb --- /dev/null +++ b/stackviz/static/css/timeline.css @@ -0,0 +1,180 @@ +.timeline { + position: relative; + padding: 20px 0 20px; + list-style: none; +} + +.timeline:before { + content: " "; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 3px; + margin-left: -1.5px; + background-color: #eeeeee; +} + +.timeline > li { + position: relative; + margin-bottom: 20px; +} + +.timeline > li:before, +.timeline > li:after { + content: " "; + display: table; +} + +.timeline > li:after { + clear: both; +} + +.timeline > li:before, +.timeline > li:after { + content: " "; + display: table; +} + +.timeline > li:after { + clear: both; +} + +.timeline > li > .timeline-panel { + float: left; + position: relative; + width: 46%; + padding: 20px; + border: 1px solid #d4d4d4; + border-radius: 2px; + -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); + box-shadow: 0 1px 6px rgba(0,0,0,0.175); +} + +.timeline > li > .timeline-panel:before { + content: " "; + display: inline-block; + position: absolute; + top: 26px; + right: -15px; + border-top: 15px solid transparent; + border-right: 0 solid #ccc; + border-bottom: 15px solid transparent; + border-left: 15px solid #ccc; +} + +.timeline > li > .timeline-panel:after { + content: " "; + display: inline-block; + position: absolute; + top: 27px; + right: -14px; + border-top: 14px solid transparent; + border-right: 0 solid #fff; + border-bottom: 14px solid transparent; + border-left: 14px solid #fff; +} + +.timeline > li > .timeline-badge { + z-index: 100; + position: absolute; + top: 16px; + left: 50%; + width: 50px; + height: 50px; + margin-left: -25px; + border-radius: 50% 50% 50% 50%; + text-align: center; + font-size: 1.4em; + line-height: 50px; + color: #fff; + background-color: #999999; +} + +.timeline > li.timeline-inverted > .timeline-panel { + float: right; +} + +.timeline > li.timeline-inverted > .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline > li.timeline-inverted > .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline-badge.primary { + background-color: #2e6da4 !important; +} + +.timeline-badge.success { + background-color: #3f903f !important; +} + +.timeline-badge.warning { + background-color: #f0ad4e !important; +} + +.timeline-badge.danger { + background-color: #d9534f !important; +} + +.timeline-badge.info { + background-color: #5bc0de !important; +} + +.timeline-title { + margin-top: 0; + color: inherit; +} + +.timeline-body > p, +.timeline-body > ul { + margin-bottom: 0; +} + +.timeline-body > p + p { + margin-top: 5px; +} + +@media(max-width:767px) { + ul.timeline:before { + left: 40px; + } + + ul.timeline > li > .timeline-panel { + width: calc(100% - 90px); + width: -moz-calc(100% - 90px); + width: -webkit-calc(100% - 90px); + } + + ul.timeline > li > .timeline-badge { + top: 16px; + left: 15px; + margin-left: 0; + } + + ul.timeline > li > .timeline-panel { + float: right; + } + + ul.timeline > li > .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; + } + + ul.timeline > li > .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; + } +} \ No newline at end of file diff --git a/stackviz/static/js/sb-admin-2.js b/stackviz/static/js/sb-admin-2.js new file mode 100644 index 0000000..5be2c88 --- /dev/null +++ b/stackviz/static/js/sb-admin-2.js @@ -0,0 +1,36 @@ +$(function() { + + $('#side-menu').metisMenu(); + +}); + +//Loads the correct sidebar on window load, +//collapses the sidebar on window resize. +// Sets the min-height of #page-wrapper to window size +$(function() { + $(window).bind("load resize", function() { + topOffset = 50; + width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width; + if (width < 768) { + $('div.navbar-collapse').addClass('collapse'); + topOffset = 100; // 2-row-menu + } else { + $('div.navbar-collapse').removeClass('collapse'); + } + + height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1; + height = height - topOffset; + if (height < 1) height = 1; + if (height > topOffset) { + $("#page-wrapper").css("min-height", (height) + "px"); + } + }); + + var url = window.location; + var element = $('ul.nav a').filter(function() { + return this.href == url || url.href.indexOf(this.href) == 0; + }).addClass('active').parent().parent().addClass('in').parent(); + if (element.is('li')) { + element.addClass('active'); + } +}); diff --git a/stackviz/templates/index.html b/stackviz/templates/index.html index facd502..2950ccd 100644 --- a/stackviz/templates/index.html +++ b/stackviz/templates/index.html @@ -1,12 +1,550 @@ - - - - - +{% extends 'template.html' %} - - - +{% block title %}Index{% endblock %} - - +{% block body %} + +
+
+

Overview

+
+ +
+ + + + +
+
+
+
+ Area Chart Example +
+
+ + +
+
+
+ +
+
+
+ +
+ +
+
+ Bar Chart Example +
+
+ + +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DateTimeAmount
332610/21/20133:29 PM$321.33
332510/21/20133:20 PM$234.34
332410/21/20133:03 PM$724.17
332310/21/20133:00 PM$23.71
332210/21/20132:49 PM$8345.23
332110/21/20132:23 PM$245.12
332010/21/20132:15 PM$5663.54
331910/21/20132:13 PM$943.45
+
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+ Responsive Timeline +
+ +
+
    +
  • +
    +
    +
    +
    +

    Lorem ipsum dolor

    +

    11 hours ago via Twitter +

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas suscipit facere rem dicta, debitis.

    +
    +
    +
    • +
  • +
    +
    +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia repellendus.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.

    +
    +
    +
    • +
  • +
    +
    +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni commodi quisquam.

    +
    +
    +
    • +
  • +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero, omnis ut debitis!

    +
    +
    +
    • +
  • +
    +
    +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui! Laborum, atque.

    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure expedita, incidunt unde quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur nostrum sequi. Consequuntur, commodi.

    +
    +
    +
    • +
  • +
    +
    +
    +
    +

    Lorem ipsum dolor

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt quisquam maxime neque eaque.

    +
    +
    +
    • +
+
+ +
+ +
+ +
+
+
+ Notifications Panel +
+ +
+
+ + New Comment + 4 minutes ago + + + + 3 New Followers + 12 minutes ago + + + + Message Sent + 27 minutes ago + + + + New Task + 43 minutes ago + + + + Server Rebooted + 11:32 AM + + + + Server Crashed! + 11:13 AM + + + + Server Not Responding + 10:57 AM + + + + New Order Placed + 9:49 AM + + + + Payment Received + Yesterday + + +
+ + View All Alerts +
+ +
+ +
+
+ Donut Chart Example +
+
+
+ View Details +
+ +
+ +
+
+ + Chat +
+ + +
+
+ +
+
    +
  • + + User Avatar + +
    +
    + Jack Sparrow + + 12 mins ago + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. +

    +
    +
    • +
  • + + User Avatar + +
    +
    + + 13 mins ago + Bhaumik Patel +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. +

    +
    +
    • +
  • + + User Avatar + +
    +
    + Jack Sparrow + + 14 mins ago +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. +

    +
    +
    • +
  • + + User Avatar + +
    +
    + + 15 mins ago + Bhaumik Patel +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. +

    +
    +
    • +
+
+ +
+
+ + + + +
+
+ +
+ +
+ +
+ + +{% endblock %} diff --git a/stackviz/templates/menu.html b/stackviz/templates/menu.html new file mode 100644 index 0000000..ea39ca4 --- /dev/null +++ b/stackviz/templates/menu.html @@ -0,0 +1,49 @@ +
+ +
+ diff --git a/stackviz/templates/template.html b/stackviz/templates/template.html new file mode 100644 index 0000000..57df832 --- /dev/null +++ b/stackviz/templates/template.html @@ -0,0 +1,297 @@ +{% load staticfiles %} + + + + + + + + + + + + {% block title %}{% endblock %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/stackviz/views/__init__.py b/stackviz/views/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/stackviz/views/index.py b/stackviz/views/index.py new file mode 100644 index 0000000..729eebe --- /dev/null +++ b/stackviz/views/index.py @@ -0,0 +1,4 @@ +from django.views.generic import TemplateView + +class IndexView(TemplateView): + template_name = 'index.html'