From 06f990236ca3068bedca1e51d6e968ac3b987836 Mon Sep 17 00:00:00 2001 From: Ed Rooth Date: Tue, 4 Feb 2014 11:13:18 -0800 Subject: [PATCH] refactor(dashboard): Restructured front-end dashboard code. --- mod/dashboard/README.md | 2 + mod/dashboard/app/.buildignore | 1 - mod/dashboard/app/browser.html | 50 - mod/dashboard/app/img/add.svg | 7 + mod/dashboard/app/img/back.svg | 6 + mod/dashboard/app/img/delete.svg | 7 + mod/dashboard/app/img/logo.svg | 46 + mod/dashboard/app/index.html | 171 +-- mod/dashboard/app/scripts/app.js | 42 + .../app/scripts/common/directives/enter.js | 16 + .../scripts/common/directives/highlight.js | 13 + .../app/scripts/common/services/prefix-url.js | 10 + .../app/scripts/controllers/browser.js | 90 +- mod/dashboard/app/scripts/controllers/home.js | 3 + mod/dashboard/app/scripts/controllers/root.js | 7 + .../app/scripts/controllers/stats.js | 14 +- mod/dashboard/app/scripts/directives.js | 3 + mod/dashboard/app/scripts/shims.js | 32 + mod/dashboard/app/stats.html | 50 - mod/dashboard/app/styles/browser.css | 180 +++ mod/dashboard/app/styles/etcd-widgets.css | 1027 ++++++----------- mod/dashboard/app/styles/main.css | 61 +- mod/dashboard/app/styles/stats.css | 142 +++ mod/dashboard/app/views/browser.html | 160 ++- mod/dashboard/app/views/home.html | 2 + mod/dashboard/bower.json | 4 +- mod/dashboard/package.json | 2 - 27 files changed, 1048 insertions(+), 1100 deletions(-) delete mode 100644 mod/dashboard/app/.buildignore delete mode 100644 mod/dashboard/app/browser.html create mode 100644 mod/dashboard/app/img/add.svg create mode 100644 mod/dashboard/app/img/back.svg create mode 100644 mod/dashboard/app/img/delete.svg create mode 100644 mod/dashboard/app/img/logo.svg create mode 100644 mod/dashboard/app/scripts/app.js create mode 100644 mod/dashboard/app/scripts/common/directives/enter.js create mode 100644 mod/dashboard/app/scripts/common/directives/highlight.js create mode 100644 mod/dashboard/app/scripts/common/services/prefix-url.js create mode 100644 mod/dashboard/app/scripts/controllers/home.js create mode 100644 mod/dashboard/app/scripts/controllers/root.js create mode 100644 mod/dashboard/app/scripts/directives.js create mode 100644 mod/dashboard/app/scripts/shims.js delete mode 100644 mod/dashboard/app/stats.html create mode 100644 mod/dashboard/app/styles/browser.css create mode 100644 mod/dashboard/app/styles/stats.css create mode 100644 mod/dashboard/app/views/home.html diff --git a/mod/dashboard/README.md b/mod/dashboard/README.md index b41fff050..d212a9622 100644 --- a/mod/dashboard/README.md +++ b/mod/dashboard/README.md @@ -22,6 +22,8 @@ bower install ### View in Browser +run `export ETCD_DASHBOARD_DIR=/absolute/path/to/coreos/etcd/mod/dashboard/app` + Run etcd like you normally would and afterward browse to: http://localhost:4001/mod/dashboard/ diff --git a/mod/dashboard/app/.buildignore b/mod/dashboard/app/.buildignore deleted file mode 100644 index fc98b8eb5..000000000 --- a/mod/dashboard/app/.buildignore +++ /dev/null @@ -1 +0,0 @@ -*.coffee \ No newline at end of file diff --git a/mod/dashboard/app/browser.html b/mod/dashboard/app/browser.html deleted file mode 100644 index dcb769bd3..000000000 --- a/mod/dashboard/app/browser.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - etcd Browser - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - diff --git a/mod/dashboard/app/img/add.svg b/mod/dashboard/app/img/add.svg new file mode 100644 index 000000000..d84c9ecb8 --- /dev/null +++ b/mod/dashboard/app/img/add.svg @@ -0,0 +1,7 @@ + + + + diff --git a/mod/dashboard/app/img/back.svg b/mod/dashboard/app/img/back.svg new file mode 100644 index 000000000..0acbe5653 --- /dev/null +++ b/mod/dashboard/app/img/back.svg @@ -0,0 +1,6 @@ + + + diff --git a/mod/dashboard/app/img/delete.svg b/mod/dashboard/app/img/delete.svg new file mode 100644 index 000000000..fef624237 --- /dev/null +++ b/mod/dashboard/app/img/delete.svg @@ -0,0 +1,7 @@ + + + + diff --git a/mod/dashboard/app/img/logo.svg b/mod/dashboard/app/img/logo.svg new file mode 100644 index 000000000..4a9177062 --- /dev/null +++ b/mod/dashboard/app/img/logo.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + diff --git a/mod/dashboard/app/index.html b/mod/dashboard/app/index.html index e3995e6d1..4792eb2df 100644 --- a/mod/dashboard/app/index.html +++ b/mod/dashboard/app/index.html @@ -1,8 +1,6 @@ - - - - - + + + @@ -11,124 +9,55 @@ - - - +

etcd Dashboard

- - + +
+ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/mod/dashboard/app/scripts/app.js b/mod/dashboard/app/scripts/app.js new file mode 100644 index 000000000..fb1a7fca9 --- /dev/null +++ b/mod/dashboard/app/scripts/app.js @@ -0,0 +1,42 @@ +'use strict'; + +var app = angular.module('etcdControlPanel', [ + 'ngRoute', + 'ngResource', + 'etcd', + 'etcdDirectives', + 'timeRelative', + 'underscore', + 'jquery', + 'moment' +]); + +app.constant('urlPrefix', '/mod/dashboard'); +app.constant('keyPrefix', '/v2/keys/'); + +app.config(function($routeProvider, $locationProvider, urlPrefix) { + + function prefixUrl(url) { + return urlPrefix + url; + } + + $locationProvider.html5Mode(true); + + $routeProvider + .when(prefixUrl('/'), { + controller: 'HomeCtrl', + templateUrl: prefixUrl('/views/home.html') + }) + //.when(prefixUrl('/stats'), { + //controller: 'StatsCtrl', + //templateUrl: prefixUrl('/views/stats.html') + //}) + .when(prefixUrl('/browser'), { + controller: 'BrowserCtrl', + templateUrl: prefixUrl('/views/browser.html') + }) + .otherwise({ + templateUrl: prefixUrl('/404.html') + }); + +}); diff --git a/mod/dashboard/app/scripts/common/directives/enter.js b/mod/dashboard/app/scripts/common/directives/enter.js new file mode 100644 index 000000000..3aac7351d --- /dev/null +++ b/mod/dashboard/app/scripts/common/directives/enter.js @@ -0,0 +1,16 @@ +'use strict'; + +angular.module('etcdControlPanel') +.directive('ngEnter', function() { + return function(scope, element, attrs) { + element.bind('keydown keypress', function(event) { + if(event.which === 13) { + scope.$apply(function(){ + scope.$eval(attrs.ngEnter); + }); + + event.preventDefault(); + } + }); + }; +}); diff --git a/mod/dashboard/app/scripts/common/directives/highlight.js b/mod/dashboard/app/scripts/common/directives/highlight.js new file mode 100644 index 000000000..5f9e3ee87 --- /dev/null +++ b/mod/dashboard/app/scripts/common/directives/highlight.js @@ -0,0 +1,13 @@ +'use strict'; + +angular.module('etcdControlPanel') +.directive('highlight', function() { + return { + restrict: 'A', + link: function(scope, element, attrs) { + if('#' + scope.etcdPath === attrs.href) { + element.parent().parent().addClass('etcd-selected'); + } + } + }; +}); diff --git a/mod/dashboard/app/scripts/common/services/prefix-url.js b/mod/dashboard/app/scripts/common/services/prefix-url.js new file mode 100644 index 000000000..1a95e1e68 --- /dev/null +++ b/mod/dashboard/app/scripts/common/services/prefix-url.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('etcdControlPanel') +.factory('prefixUrl', function(urlPrefix) { + + return function(url) { + return urlPrefix + url; + } + +}); diff --git a/mod/dashboard/app/scripts/controllers/browser.js b/mod/dashboard/app/scripts/controllers/browser.js index 6d0af80c7..c026e1f53 100644 --- a/mod/dashboard/app/scripts/controllers/browser.js +++ b/mod/dashboard/app/scripts/controllers/browser.js @@ -1,31 +1,20 @@ 'use strict'; -angular.module('etcdBrowser', ['ngRoute', 'etcd', 'timeRelative']) - -.constant('keyPrefix', '/v2/keys/') - -.config(['$routeProvider', 'keyPrefix', function ($routeProvider, keyPrefix) { - //read localstorage - var previousPath = localStorage.getItem('etcd_path'); - - $routeProvider - .when('/', { - redirectTo: keyPrefix - }) - .otherwise({ - templateUrl: 'views/browser.html', - controller: 'MainCtrl' - }); -}]) - -.controller('MainCtrl', ['$scope', '$location', 'EtcdV2', 'keyPrefix', function ($scope, $location, EtcdV2, keyPrefix) { +angular.module('etcdControlPanel') +.controller('BrowserCtrl', function ($scope, $location, $window, EtcdV2, keyPrefix, $, _, moment) { $scope.save = 'etcd-save-hide'; $scope.preview = 'etcd-preview-hide'; $scope.enableBack = true; $scope.writingNew = false; + $scope.key = ''; + $scope.list = []; // etcdPath is the path to the key that is currenly being looked at. - $scope.etcdPath = $location.path(); + $scope.etcdPath = keyPrefix; + + $scope.setActiveKey = function(key) { + $scope.etcdPath = keyPrefix + _.str.trim(key, '/'); + }; $scope.$watch('etcdPath', function() { function etcdPathKey() { @@ -44,7 +33,7 @@ angular.module('etcdBrowser', ['ngRoute', 'etcd', 'timeRelative']) localStorage.setItem('etcdPath', $scope.etcdPath); $scope.enableBack = true; //disable back button if at root (/v2/keys/) - if($scope.etcdPath === keyPrefix) { + if ($scope.etcdPath === keyPrefix) { $scope.enableBack = false; } @@ -63,7 +52,7 @@ angular.module('etcdBrowser', ['ngRoute', 'etcd', 'timeRelative']) $scope.list = data.node.nodes; $scope.preview = 'etcd-preview-hide'; } else { - $scope.singleValue = data.value; + $scope.singleValue = data.node.value; $scope.preview = 'etcd-preview-reveal'; $scope.key.getParent().get().success(function(data) { $scope.list = data.node.nodes; @@ -79,14 +68,14 @@ angular.module('etcdBrowser', ['ngRoute', 'etcd', 'timeRelative']) //back button click $scope.back = function() { $scope.etcdPath = $scope.key.getParent().path(); - $scope.syncLocation(); + //$scope.syncLocation(); $scope.preview = 'etcd-preview-hide'; $scope.writingNew = false; }; - $scope.syncLocation = function() { - $location.path($scope.etcdPath); - }; + //$scope.syncLocation = function() { + //$location.path($scope.etcdPath); + //}; $scope.showSave = function() { $scope.save = 'etcd-save-reveal'; @@ -136,56 +125,15 @@ angular.module('etcdBrowser', ['ngRoute', 'etcd', 'timeRelative']) }; $scope.getHeight = function() { - return $(window).height(); + return $($window).height(); }; + $scope.$watch($scope.getHeight, function() { $('.etcd-body').css('height', $scope.getHeight()-45); }); - window.onresize = function(){ + + $window.onresize = function(){ $scope.$apply(); }; -}]) - -.directive('ngEnter', function() { - return function(scope, element, attrs) { - element.bind('keydown keypress', function(event) { - if(event.which === 13) { - scope.$apply(function(){ - scope.$eval(attrs.ngEnter); - }); - - event.preventDefault(); - } - }); - }; -}) - -.directive('highlight', function() { - return { - restrict: 'A', - link: function(scope, element, attrs) { - if('#' + scope.etcdPath === attrs.href) { - element.parent().parent().addClass('etcd-selected'); - } - } - }; -}); - -moment.lang('en', { - relativeTime : { - future: 'Expires in %s', - past: 'Expired %s ago', - s: 'seconds', - m: 'a minute', - mm: '%d minutes', - h: 'an hour', - hh: '%d hours', - d: 'a day', - dd: '%d days', - M: 'a month', - MM: '%d months', - y: 'a year', - yy: '%d years' - } }); diff --git a/mod/dashboard/app/scripts/controllers/home.js b/mod/dashboard/app/scripts/controllers/home.js new file mode 100644 index 000000000..a0f4b9ed3 --- /dev/null +++ b/mod/dashboard/app/scripts/controllers/home.js @@ -0,0 +1,3 @@ +angular.module('etcdControlPanel') +.controller('HomeCtrl', function($scope) { +}); diff --git a/mod/dashboard/app/scripts/controllers/root.js b/mod/dashboard/app/scripts/controllers/root.js new file mode 100644 index 000000000..d23e95059 --- /dev/null +++ b/mod/dashboard/app/scripts/controllers/root.js @@ -0,0 +1,7 @@ +angular.module('etcdControlPanel') +.controller('RootCtrl', function($rootScope, prefixUrl) { + + // Expose prefixUrl() function to all. + $rootScope.prefixUrl = prefixUrl; + +}); diff --git a/mod/dashboard/app/scripts/controllers/stats.js b/mod/dashboard/app/scripts/controllers/stats.js index 614cfd78c..d15ac117d 100644 --- a/mod/dashboard/app/scripts/controllers/stats.js +++ b/mod/dashboard/app/scripts/controllers/stats.js @@ -1,19 +1,7 @@ 'use strict'; -angular.module('etcdStats', ['ngRoute', 'etcd']) - -.config(['$routeProvider', function ($routeProvider) { - $routeProvider - .when('/', { - templateUrl: 'views/stats.html', - controller: 'StatsCtrl' - }) - .otherwise({ - templateUrl: 'views/stats.html', - controller: 'StatsCtrl' - }); -}]) +angular.module('etcdControlPanel') .controller('StatsCtrl', ['$scope', 'EtcdV2', 'statsVega', function ($scope, EtcdV2, statsVega) { $scope.graphContainer = '#latency'; $scope.graphVisibility = 'etcd-graph-show'; diff --git a/mod/dashboard/app/scripts/directives.js b/mod/dashboard/app/scripts/directives.js new file mode 100644 index 000000000..f2714552d --- /dev/null +++ b/mod/dashboard/app/scripts/directives.js @@ -0,0 +1,3 @@ +'use strict'; + +angular.module('etcdDirectives', []); diff --git a/mod/dashboard/app/scripts/shims.js b/mod/dashboard/app/scripts/shims.js new file mode 100644 index 000000000..81f9e7afb --- /dev/null +++ b/mod/dashboard/app/scripts/shims.js @@ -0,0 +1,32 @@ +'use strict'; + +angular.module('underscore', []).factory('_', function($window) { + return $window._; +}); + +angular.module('jquery', []).factory('$', function($window) { + return $window.$; +}); + +angular.module('moment', []).factory('moment', function($window) { + + $window.moment.lang('en', { + relativeTime : { + future: 'Expires in %s', + past: 'Expired %s ago', + s: 'seconds', + m: 'a minute', + mm: '%d minutes', + h: 'an hour', + hh: '%d hours', + d: 'a day', + dd: '%d days', + M: 'a month', + MM: '%d months', + y: 'a year', + yy: '%d years' + } + }); + + return $window.moment; +}); diff --git a/mod/dashboard/app/stats.html b/mod/dashboard/app/stats.html deleted file mode 100644 index 6056a7512..000000000 --- a/mod/dashboard/app/stats.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - etcd Browser - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - diff --git a/mod/dashboard/app/styles/browser.css b/mod/dashboard/app/styles/browser.css new file mode 100644 index 000000000..82a427f35 --- /dev/null +++ b/mod/dashboard/app/styles/browser.css @@ -0,0 +1,180 @@ +.etcd-container.etcd-browser { +} + +.etcd-container.etcd-browser .etcd-header { + height: 37px; +} + +.etcd-container.etcd-browser.etcd-preview-reveal .etcd-back { + display: block; +} + +.etcd-container.etcd-browser.etcd-preview-hide .etcd-back { + display: block; +} + +.etcd-container.etcd-browser.etcd-preview-reveal .etcd-add { +} + +.etcd-container.etcd-browser.etcd-preview-hide .etcd-add { +} + +.etcd-container.etcd-browser .etcd-header .etcd-browser-path { + position: absolute; + left: 72px; + right: 0px; + top: 0; + margin: 6px 5px 6px 5px; +} + +.etcd-container.etcd-browser .etcd-header .etcd-browser-path input { + width: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + +.etcd-container.etcd-browser .etcd-header .etcd-save { + position: absolute; + width: 54px; + right: -55px; + margin: 6px 0; +} + +.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-save { + right: 7px; +} + +.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-browser-path { + right: 62px; +} + +.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-save { + right: -55px; +} + +.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-browser-path { + right: 0px; +} + +.etcd-container.etcd-browser .etcd-preview { + position: absolute; + left: 100%; + min-height: 100%; + overflow-y: auto; + overflow-x: hidden; + top: 0px; + box-sizing: border-box; + -moz-box-sizing: border-box; + background-color: #fff; + width: 100%; + border-left: 1px solid #ddd; +} + +.etcd-container.etcd-browser .etcd-preview pre, .etcd-container.etcd-browser .etcd-preview textarea { + padding: 20px 20px 20px 20px; + margin: 0px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + height: 100%; + width: 100%; + white-space: pre-wrap; + position: absolute; + font-size: 13px; + border: 1px; + outline: none; + box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview textarea { + display: block; +} + +.etcd-container.etcd-browser .etcd-preview .etcd-empty { + top: 0px; + bottom: 0px; + width: 100%; + text-align: center; + position: absolute; +} + +.etcd-container.etcd-browser.etcd-preview-reveal .etcd-empty { + display: none; +} + +.etcd-container.etcd-browser .etcd-preview .etcd-empty-message { + margin-top: 25%; + color: #999; +} + +/* Single Column Positioning */ +@media (max-width: 700px) { + .etcd-container.etcd-browser .etcd-list { + width: 100%; + } + + .etcd-container.etcd-browser.etcd-preview-reveal .etcd-list { + left: -100%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + + .etcd-container.etcd-browser.etcd-preview-hide .etcd-list { + left: 0%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + + .etcd-container.etcd-browser .etcd-preview { + left: 100%; + } + + .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { left: -1px; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + + .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { + left: 100%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } +} + + +/* Double Column Positioning */ +@media (min-width: 700px) { + .etcd-container.etcd-browser .etcd-list { + width: 50%; + } + + .etcd-container.etcd-browser .etcd-preview { + left: 50%; + width: 50%; + } + + .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { + left: 50%; /* does nothing */ + } + + .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview .etcd-empty { + display: none; + } + + .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { + left: 50%; /* does nothing */ + } + + .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview .etcd-empty { + display: block; + } + + .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview textarea { + display: none; + } +} + diff --git a/mod/dashboard/app/styles/etcd-widgets.css b/mod/dashboard/app/styles/etcd-widgets.css index 0ed4deb51..b04db8c93 100644 --- a/mod/dashboard/app/styles/etcd-widgets.css +++ b/mod/dashboard/app/styles/etcd-widgets.css @@ -1,713 +1,380 @@ body { - margin: 0px; + margin: 0px; } + .etcd-container { - background-color: #fff; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - overflow: hidden; - box-sizing: border-box; - -moz-box-sizing: border-box; - position: relative; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + overflow: hidden; + box-sizing: border-box; + -moz-box-sizing: border-box; + position: relative; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } - a { - color: #2176AC; - text-decoration: none; - } - - a:hover, a:active { - text-decoration: underline; - } - - input[type=text] { - box-shadow: inset 0 1px 2px rgba(0,0,0,.5); - border: none; - border-radius: 3px; - font-size: 13px; - padding-left: 5px; - padding-right: 5px; - height: 25px; - } - - input[type=text]:focus { - - } - - h2 { - font-size: 22px; - font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - margin: 0 0 20px 0; - padding: 0; - } - - .etcd-button { - display:inline-block; - padding:6px 12px; - margin-bottom:0; - font-size:14px; - font-weight:normal; - line-height:1.428571429; - text-align:center; - white-space:nowrap; - vertical-align:middle; - cursor:pointer; - border:1px solid transparent; - border-radius:4px; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - -o-user-select:none; - user-select:none; - margin: 0px; - border: none; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.25); - } - - .etcd-button.etcd-button-small { - height: 25px; - padding: 0 10px; - font-size: 13px; - } - - .etcd-button-primary { - background-color: #428BCA; - color: #fff; - text-shadow: 0 0 3px rgba(0,0,0,0.25); - } - - .etcd-button-primary:active { - background-color: #2276ad; - } - - .etcd-popover { - background: #333; - border-radius: 3px; - padding: 15px; - position: absolute; - top: 39px; - z-index: 9999; - color: #fff; - font-size: 13px; - box-shadow: 0px 2px 10px rgba(0,0,0,.5); - display: none; - } - - .etcd-popover-error .etcd-popover-content { - color: #FF3C43; - font-weight: bold; - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - } - - .etcd-popover-notch { - width: 14px; - height: 14px; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - position: absolute; - margin-top: -5px; - margin-left: 3px; - background: #333; - top: 0px; - right: 15px; - } - - .etcd-popover.etcd-popover-right { - left: 77px; - } - - .etcd-popover-right .etcd-popover-notch { - left: 15px; - } - - .etcd-popover.etcd-popover-left { - right: 10px; - } - - .etcd-popover-left .etcd-popover-notch { - right: 15px; - } - - .etcd-popover-confirm { - margin-top: 10px; - } - - .etcd-popover-confirm button { - - } - - .etcd-header { - width: 100%; - position: relative; - box-sizing: border-box; - -moz-box-sizing: border-box; - } - .etcd-header.solid { - background: #eeeeee; - background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); - background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%); - background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%); - background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%); - background: linear-gradient(to bottom, #eeeeee 0%,#dddddd 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); - } - - .etcd-body { - top: 0px; - left: 0px; - position: relative; - overflow-y: auto; - overflow-x: hidden; - height: 100%; - width: 100%; - box-sizing: border-box; - -moz-box-sizing: border-box; - } - - .etcd-body table { - width: 100%; - box-sizing: border-box; - -moz-box-sizing: border-box; - } - - .etcd-body table thead td { - text-transform: uppercase; - font-size: 11px; - line-height: 20px; - border-bottom: 1px solid #ddd; - padding-top: 0px; - padding-right: 10px; - padding-bottom: 0px; - padding-left: 0px; - color: #666; - } - - .etcd-body table tbody td { - line-height: 18px; - border-bottom: 1px solid #ddd; - padding-top: 6px; - padding-right: 10px; - padding-bottom: 6px; - padding-left: 0px; - vertical-align: text-top; - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - } - - .etcd-body table .etcd-ttl-header { - width: 33%; - } - - .etcd-body table tbody .etcd-ttl { - font-size: 13px; - } - - .etcd-body table tbody .etcd-ttl .etcd-ttl-none { - color: #999; - font-weight: 100; - } - - .etcd-body table .etcd-actions-header { - width: 30px; - } - - .etcd-body table thead td:first-child, .etcd-body table tbody td:first-child { - padding-left: 10px; - } - - .etcd-body table thead td:last-child, .etcd-body table tbody td:last-child { - padding-right: 10px; - } - - .etcd-container .etcd-preview .etcd-dialog { - background: #333; - position: absolute; - right: 0px; - left: 0px; - padding: 20px; - color: #fff; - font-size: 14px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - bottom: 0px; - opacity: 0; - min-height: 110px; /* REMOVE ME! */ - transition-property: all; - transition-duration: 150ms; - transition-timing-function: ease-in-out; - } - - .etcd-container .etcd-preview .etcd-dialog .etcd-dialog-message { - margin-bottom: 20px; - } - - .etcd-container .etcd-preview .etcd-dialog .etcd-dialog-buttons a { - line-height: 34px; - color: #fff; - vertical-align: middle; - margin-left: 10px; - } - - /*.etcd-container .etcd-preview .etcd-dialog.etcd-reveal { - opacity: 1; - } - - .etcd-container .etcd-preview .etcd-dialog.etcd-hide { - opacity: 0; - }*/ - - .etcd-body .etcd-list { - padding: 20px; - box-sizing: border-box; - -moz-box-sizing: border-box; - overflow: auto; - height: 100%; - position: absolute; - } - - .etcd-body .etcd-list .etcd-selected { - background-color: #EAF3FF; - } - - .etcd-body .etcd-list a.directory { - font-weight: bold; - } - - .etcd-body .etcd-list tr:hover .etcd-delete svg { - 1visibility: visible; - fill: #ff0000; - } - - .etcd-body .etcd-list .etcd-delete { - height: 20px; - width: 25px; - vertical-align: middle; - margin: 0px; - display: inline-block; - } - - .etcd-body .etcd-list .etcd-delete svg { - height: 20px; - fill: #eee; - } - - .etcd-body .etcd-list .etcd-selected .etcd-delete svg { - height: 20px; - fill: #ddd; - } - - .etcd-body .etcd-list .etcd-delete:hover svg { - cursor: pointer; - fill: #ff0000; - } - - -.etcd-container.etcd-browser { - +a { + color: #2176AC; + text-decoration: none; } - .etcd-container.etcd-browser .etcd-header { - height: 37px; - } - - .etcd-back { - height: 37px; - width: 37px; - vertical-align: middle; - margin: 0px; - position: absolute; - top: 0px; - left: 3px; - display: none; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-back { - display: block; - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-back { - display: block; - } - - .etcd-back svg { - height: 20px; - padding: 8px 6px; - } - - .etcd-back:hover svg { - cursor: pointer; - fill: #428bca; - } - - .etcd-back.etcd-disabled svg { - fill: #bbb; - } - - .etcd-add { - height: 37px; - width: 37px; - vertical-align: middle; - margin: 0px; - position: absolute; - top: 0px; - left: 36px; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-add { - - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-add { - - } - - .etcd-add svg { - height: 22px; - padding: 7px 6px; - } - - .etcd-add:hover svg { - cursor: pointer; - fill: #428bca; - } - - .etcd-add.etcd-disabled svg { - fill: #bbb; - } - - .etcd-container.etcd-browser .etcd-header .etcd-browser-path { - position: absolute; - left: 72px; - right: 0px; - top: 0; - margin: 6px 5px 6px 5px; - } - - .etcd-container.etcd-browser .etcd-header .etcd-browser-path input { - width: 100%; - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - } - - .etcd-container.etcd-browser .etcd-header .etcd-save { - position: absolute; - width: 54px; - right: -55px; - margin: 6px 0; - } - - .etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-save { - right: 7px; - } - - .etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-browser-path { - right: 62px; - } - - .etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-save { - right: -55px; - } - - .etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-browser-path { - right: 0px; - } - - .etcd-container.etcd-browser .etcd-preview { - position: absolute; - left: 100%; - min-height: 100%; - overflow-y: auto; - overflow-x: hidden; - top: 0px; - box-sizing: border-box; - -moz-box-sizing: border-box; - background-color: #fff; - width: 100%; - border-left: 1px solid #ddd; - } - - .etcd-container.etcd-browser .etcd-preview pre, .etcd-container.etcd-browser .etcd-preview textarea { - padding: 20px 20px 20px 20px; - margin: 0px; - font-family: Consolas, "Liberation Mono", Courier, monospace; - height: 100%; - width: 100%; - white-space: pre-wrap; - position: absolute; - font-size: 13px; - border: 1px; - outline: none; - box-sizing: border-box; - -moz-box-sizing: border-box; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview textarea { - display: block; - } - - .etcd-container.etcd-browser .etcd-preview .etcd-empty { - top: 0px; - bottom: 0px; - width: 100%; - text-align: center; - position: absolute; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-empty { - display: none; - } - - .etcd-container.etcd-browser .etcd-preview .etcd-empty-message { - margin-top: 25%; - color: #999; - } - - /* Single Column Positioning */ - @media (max-width: 700px) { - .etcd-container.etcd-browser .etcd-list { - width: 100%; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-list { - left: -100%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-list { - left: 0%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - - .etcd-container.etcd-browser .etcd-preview { - left: 100%; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { - left: -1px; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { - left: 100%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - } - - - /* Double Column Positioning */ - @media (min-width: 700px) { - .etcd-container.etcd-browser .etcd-list { - width: 50%; - } - - .etcd-container.etcd-browser .etcd-preview { - left: 50%; - width: 50%; - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { - left: 50%; /* does nothing */ - } - - .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview .etcd-empty { - display: none; - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { - left: 50%; /* does nothing */ - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview .etcd-empty { - display: block; - } - - .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview textarea { - display: none; - } - } - -.etcd-container.etcd-stats { - +a:hover, a:active { + text-decoration: underline; } - .etcd-container.etcd-stats h2 { - margin-top: -7px; - } +input[type=text] { + box-shadow: inset 0 1px 2px rgba(0,0,0,.5); + border: none; + border-radius: 3px; + font-size: 13px; + padding-left: 5px; + padding-right: 5px; + height: 25px; +} - .etcd-format-selector { - position: absolute; - top: 12px; - right: 16px; - z-index: 999; - } +input[type=text]:focus { +} - .etcd-format-selector .etcd-selector-item { - display: inline-block; - height: 12px; - width: 12px; - padding: 8px 4px; - } +h2 { + font-size: 22px; + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 500; + margin: 0 0 20px 0; + padding: 0; +} - .etcd-format-selector .etcd-selector-item:hover { - cursor: pointer; - } +.etcd-button { + display:inline-block; + padding:6px 12px; + margin-bottom:0; + font-size:14px; + font-weight:normal; + line-height:1.428571429; + text-align:center; + white-space:nowrap; + vertical-align:middle; + cursor:pointer; + border:1px solid transparent; + border-radius:4px; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + -o-user-select:none; + user-select:none; + margin: 0px; + border: none; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.25); +} - .etcd-format-selector .etcd-selector-item svg { - fill: #333; - } +.etcd-button.etcd-button-small { + height: 25px; + padding: 0 10px; + font-size: 13px; +} - .etcd-container.etcd-stats .etcd-graph { - box-sizing: border-box; - -moz-box-sizing: border-box; - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - padding: 20px; - } +.etcd-button-primary { + background-color: #428BCA; + color: #fff; + text-shadow: 0 0 3px rgba(0,0,0,0.25); +} - .etcd-container.etcd-stats .etcd-graph .etcd-graph-container { - position: absolute; - top: 60px; - bottom: 20px; - left: 20px; - right: 20px; - box-sizing: border-box; - -moz-box-sizing: border-box; - } +.etcd-button-primary:active { + background-color: #2276ad; +} - .etcd-container.etcd-stats table .etcd-latency { - width: 50%; - } +.etcd-popover { + background: #333; + border-radius: 3px; + padding: 15px; + position: absolute; + top: 39px; + z-index: 9999; + color: #fff; + font-size: 13px; + box-shadow: 0px 2px 10px rgba(0,0,0,.5); + display: none; +} - .etcd-container.etcd-stats .etcd-list { - position: absolute; - left: 100%; - min-height: 100%; - overflow-y: auto; - overflow-x: hidden; - top: 0px; - box-sizing: border-box; - -moz-box-sizing: border-box; - background-color: #fff; - width: 100%; - border-left: 1px solid #ddd; - } +.etcd-popover-error .etcd-popover-content { + color: #FF3C43; + font-weight: bold; + user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; +} - .etcd-container.etcd-stats .etcd-list .etcd-square { - height: 10px; - width: 10px; - display: inline-block; - margin-right: 5px; - } +.etcd-popover-notch { + width: 14px; + height: 14px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + position: absolute; + margin-top: -5px; + margin-left: 3px; + background: #333; + top: 0px; + right: 15px; +} - .etcd-container.etcd-stats .etcd-list .etcd-square-red { - background-color: #c40022; - } +.etcd-popover.etcd-popover-right { + left: 77px; +} - .etcd-container.etcd-stats .etcd-list .etcd-square-orange { - background-color: #FFC000; - } +.etcd-popover-right .etcd-popover-notch { + left: 15px; +} - .etcd-container.etcd-stats .etcd-list .etcd-square-green { - background-color: #00DB24; - } +.etcd-popover.etcd-popover-left { + right: 10px; +} - .etcd-container.etcd-stats .etcd-list .etcd-peer-type { - color: #999; - padding-left: 3px; - font-size: 13px; - line-height: 100%; - } +.etcd-popover-left .etcd-popover-notch { + right: 15px; +} - .etcd-container.etcd-stats .etcd-list .etcd-latency-value { - display: inline-block; - } +.etcd-popover-confirm { + margin-top: 10px; +} - /* Single Column Positioning */ - @media (max-width: 700px) { - .etcd-container.etcd-stats .etcd-list { - width: 100%; - left: 100%; - } +.etcd-popover-confirm button { +} - .etcd-container.etcd-stats .etcd-graph { - left: 0%; - } +.etcd-header { + width: 100%; + position: relative; + box-sizing: border-box; + -moz-box-sizing: border-box; +} +.etcd-header.solid { + background: #eeeeee; + background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); + background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%); + background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%); + background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%); + background: linear-gradient(to bottom, #eeeeee 0%,#dddddd 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); +} - .etcd-container.etcd-stats.etcd-table-reveal .etcd-graph { - left: -100%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - .etcd-container.etcd-stats.etcd-table-hide .etcd-graph { - left: 0%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; +.etcd-body { + top: 0px; + left: 0px; + position: relative; + overflow-y: auto; + overflow-x: hidden; + height: 100%; + width: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; +} - } - .etcd-container.etcd-stats.etcd-table-hide .etcd-format-selector .etcd-selector-graph svg * { - fill: #428bca; - } +.etcd-body table { + width: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; +} - .etcd-container.etcd-stats.etcd-table-hide .etcd-list { - left: 100%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - .etcd-container.etcd-stats.etcd-table-reveal .etcd-list { - left: 0%; - transition-property: all; - transition-duration: 250ms; - transition-timing-function: ease-in-out; - } - .etcd-container.etcd-stats.etcd-table-reveal .etcd-format-selector .etcd-selector-table svg * { - fill: #428bca; - } +.etcd-body table thead td { + text-transform: uppercase; + font-size: 11px; + line-height: 20px; + border-bottom: 1px solid #ddd; + padding-top: 0px; + padding-right: 10px; + padding-bottom: 0px; + padding-left: 0px; + color: #666; +} - } - +.etcd-body table tbody td { + line-height: 18px; + border-bottom: 1px solid #ddd; + padding-top: 6px; + padding-right: 10px; + padding-bottom: 6px; + padding-left: 0px; + vertical-align: text-top; + user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; +} - /* Double Column Positioning */ - @media (min-width: 700px) { - .etcd-container.etcd-stats .etcd-list { - width: 50%; - left: 50%; - } +.etcd-body table .etcd-ttl-header { + width: 33%; +} - .etcd-container.etcd-stats .etcd-graph { - left: 0%; - width: 50%; - } +.etcd-body table tbody .etcd-ttl { + font-size: 13px; +} - .etcd-container.etcd-stats .etcd-format-selector { - display: none; - } +.etcd-body table tbody .etcd-ttl .etcd-ttl-none { + color: #999; + font-weight: 100; +} + +.etcd-body table .etcd-actions-header { + width: 30px; +} + +.etcd-body table thead td:first-child, .etcd-body table tbody td:first-child { + padding-left: 10px; +} + +.etcd-body table thead td:last-child, .etcd-body table tbody td:last-child { + padding-right: 10px; +} + +.etcd-container .etcd-preview .etcd-dialog { + background: #333; + position: absolute; + right: 0px; + left: 0px; + padding: 20px; + color: #fff; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + bottom: 0px; + opacity: 0; + min-height: 110px; /* REMOVE ME! */ + transition-property: all; + transition-duration: 150ms; + transition-timing-function: ease-in-out; +} + +.etcd-container .etcd-preview .etcd-dialog .etcd-dialog-message { + margin-bottom: 20px; +} + +.etcd-container .etcd-preview .etcd-dialog .etcd-dialog-buttons a { + line-height: 34px; + color: #fff; + vertical-align: middle; + margin-left: 10px; +} + +.etcd-body .etcd-list { + padding: 20px; + box-sizing: border-box; + -moz-box-sizing: border-box; + overflow: auto; + height: 100%; + position: absolute; +} + +.etcd-body .etcd-list .etcd-selected { + background-color: #EAF3FF; +} + +.etcd-body .etcd-list a.directory { + font-weight: bold; +} + +.etcd-list tr:hover .etcd-delete { + visibility: visible; + fill: #ff0000; +} + +.etcd-delete { + height: 20px; + width: 25px; + vertical-align: middle; + margin: 0px; + display: inline-block; +} + +.etcd-delete { + height: 20px; + fill: #eee; +} + +.etcd-selected .etcd-delete { + height: 20px; + fill: #ddd; +} + +.etcd-delete:hover { + cursor: pointer; + fill: #ff0000; +} + +.etcd-back { + height: 37px; + width: 37px; + vertical-align: middle; + margin: 0px; + position: absolute; + top: 0px; + left: 3px; + display: none; +} + + +.etcd-back svg { + height: 20px; + padding: 8px 6px; +} + +.etcd-back:hover svg { + cursor: pointer; + fill: #428bca; +} + +.etcd-back.etcd-disabled svg { + fill: #bbb; +} + +.etcd-add { + height: 37px; + width: 37px; + vertical-align: middle; + margin: 0px; + position: absolute; + top: 0px; + left: 36px; +} + + +.etcd-add svg { + height: 22px; + padding: 7px 6px; +} + +.etcd-add:hover svg { + cursor: pointer; + fill: #428bca; +} + +.etcd-add.etcd-disabled svg { + fill: #bbb; +} + +.etcd-format-selector { + position: absolute; + top: 12px; + right: 16px; + z-index: 999; +} + +.etcd-format-selector .etcd-selector-item { + display: inline-block; + height: 12px; + width: 12px; + padding: 8px 4px; +} + +.etcd-format-selector .etcd-selector-item:hover { + cursor: pointer; +} + +.etcd-format-selector .etcd-selector-item svg { + fill: #333; +} - } diff --git a/mod/dashboard/app/styles/main.css b/mod/dashboard/app/styles/main.css index c754fddc3..4b5443286 100644 --- a/mod/dashboard/app/styles/main.css +++ b/mod/dashboard/app/styles/main.css @@ -1,22 +1,51 @@ body { - background: #fafafa; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #333; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + padding: 30px; + margin: 0px; +} +h1 { + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 400; + margin: 0px 0px 20px 0px; + padding: 0px; } -.hero-unit { - margin: 50px auto 0 auto; - width: 300px; - font-size: 18px; - font-weight: 200; - line-height: 30px; - background-color: #eee; - border-radius: 6px; - padding: 60px; +a { + color: #1e6ec1; + text-decoration: none; } -.hero-unit h1 { - font-size: 60px; - line-height: 1; - letter-spacing: -1px; +a:hover { + text-decoration: underline; +} + +#footer { + width: 100%; + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-top: 20px; +} + +#coreos-logo { + margin: 10px auto 0 auto; + height: 30px; + width: 80px; +} + +#coreos-logo svg { + fill: #999; + MAX-WIDTH: 100PX; + DISPLAY: INLINE-BLOCK; + VERTICAL-ALIGN: MIDDLE; +} + +#POWERED-BY { + FONT-SIZE: 12PX; + COLOR: #333; + WIDTH: 100%; + DISPLAY: INLINE-BLOCK; + VERTICAL-ALIGN: MIDDLE; + LINE-HEIGHT: 190%; + TEXT-ALIGN: CENTER; } diff --git a/mod/dashboard/app/styles/stats.css b/mod/dashboard/app/styles/stats.css new file mode 100644 index 000000000..74e120a54 --- /dev/null +++ b/mod/dashboard/app/styles/stats.css @@ -0,0 +1,142 @@ +.etcd-stats { + width: 100%; height: 400px; +} + +.etcd-container.etcd-stats { +} + +.etcd-container.etcd-stats h2 { + margin-top: -7px; +} + +.etcd-container.etcd-stats table .etcd-latency { + width: 50%; +} + +.etcd-container.etcd-stats .etcd-list { + position: absolute; + left: 100%; + min-height: 100%; + overflow-y: auto; + overflow-x: hidden; + top: 0px; + box-sizing: border-box; + -moz-box-sizing: border-box; + background-color: #fff; + width: 100%; + border-left: 1px solid #ddd; +} + +.etcd-container.etcd-stats .etcd-list .etcd-square { + height: 10px; + width: 10px; + display: inline-block; + margin-right: 5px; +} + +.etcd-container.etcd-stats .etcd-list .etcd-square-red { + background-color: #c40022; +} + +.etcd-container.etcd-stats .etcd-list .etcd-square-orange { + background-color: #FFC000; +} + +.etcd-container.etcd-stats .etcd-list .etcd-square-green { + background-color: #00DB24; +} + +.etcd-container.etcd-stats .etcd-list .etcd-peer-type { + color: #999; + padding-left: 3px; + font-size: 13px; + line-height: 100%; +} + +.etcd-container.etcd-stats .etcd-list .etcd-latency-value { + display: inline-block; +} + +.etcd-container.etcd-stats .etcd-graph { + box-sizing: border-box; + -moz-box-sizing: border-box; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + padding: 20px; +} + +.etcd-container.etcd-stats .etcd-graph .etcd-graph-container { + position: absolute; + top: 60px; + bottom: 20px; + left: 20px; + right: 20px; + box-sizing: border-box; + -moz-box-sizing: border-box; +} + + +/* Single Column Positioning */ +@media (max-width: 700px) { + .etcd-container.etcd-stats .etcd-list { + width: 100%; + left: 100%; + } + + .etcd-container.etcd-stats .etcd-graph { + left: 0%; + } + + .etcd-container.etcd-stats.etcd-table-reveal .etcd-graph { + left: -100%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + .etcd-container.etcd-stats.etcd-table-hide .etcd-graph { + left: 0%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + + } + .etcd-container.etcd-stats.etcd-table-hide .etcd-format-selector .etcd-selector-graph svg * { + fill: #428bca; + } + + .etcd-container.etcd-stats.etcd-table-hide .etcd-list { + left: 100%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + .etcd-container.etcd-stats.etcd-table-reveal .etcd-list { + left: 0%; + transition-property: all; + transition-duration: 250ms; + transition-timing-function: ease-in-out; + } + .etcd-container.etcd-stats.etcd-table-reveal .etcd-format-selector .etcd-selector-table svg * { + fill: #428bca; + } +} + +/* Double Column Positioning */ +@media (min-width: 700px) { + .etcd-container.etcd-stats .etcd-list { + width: 50%; + left: 50%; + } + + .etcd-container.etcd-stats .etcd-graph { + left: 0%; + width: 50%; + } + + .etcd-container.etcd-stats .etcd-format-selector { + display: none; + } +} diff --git a/mod/dashboard/app/views/browser.html b/mod/dashboard/app/views/browser.html index b40dc38dc..f97745220 100644 --- a/mod/dashboard/app/views/browser.html +++ b/mod/dashboard/app/views/browser.html @@ -1,99 +1,71 @@ -
- -
-
-
- Error: -
-
-
-
-
- Error: -
-
-
- - - - - - +
- - - - - -
- -
- +
+
+
Error:
+
+ +
+
+
Error:
+
+ +
+ + + + +
+
-
-
- - - - - - - - - - - - - -
NameTTL 
{{key.key}} -
-
—
- 		-
-
- - - - -
-
-
-
-
-
- -
-
{{preview_message}}
+ +
+ + +
+ +
+ + + + + + + + + + + + + +
NameTTL 
{{key.key}} +
+
—
+ 		+
+
+ +
+
-
-
- Save and replicate this change? -
-
- - Cancel -
-
- +
+ +
+ +
+
{{preview_message}}
+
+
+
Save and replicate this change?
+
+ + Cancel +
+
+
+
+ +
+
diff --git a/mod/dashboard/app/views/home.html b/mod/dashboard/app/views/home.html new file mode 100644 index 000000000..687018913 --- /dev/null +++ b/mod/dashboard/app/views/home.html @@ -0,0 +1,2 @@ + +
diff --git a/mod/dashboard/bower.json b/mod/dashboard/bower.json index 881b4e7e7..894aaeb91 100644 --- a/mod/dashboard/bower.json +++ b/mod/dashboard/bower.json @@ -12,11 +12,11 @@ "angular-cookies": "~1.2.0-rc.2", "angular-sanitize": "~1.2.0-rc.2", "d3": "~3.3.6", - "moment": "~2.3.0" + "moment": "~2.3.0", + "underscore.string": "~2.3.3" }, "devDependencies": { "angular-mocks": "~1.2.0-rc.2", - "angular-scenario": "~1.2.0-rc.2", "underscore": "~1.5.2" } } diff --git a/mod/dashboard/package.json b/mod/dashboard/package.json index 84d591766..2bda778d9 100644 --- a/mod/dashboard/package.json +++ b/mod/dashboard/package.json @@ -11,7 +11,6 @@ "grunt-contrib-compass": "~0.5.0", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-cssmin": "~0.6.0", - "grunt-contrib-connect": "~0.3.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-imagemin": "~0.2.0", @@ -23,7 +22,6 @@ "grunt-open": "~0.2.0", "grunt-concurrent": "~0.3.0", "load-grunt-tasks": "~0.1.0", - "connect-livereload": "~0.2.0", "grunt-google-cdn": "~0.2.0", "grunt-ngmin": "~0.0.2", "time-grunt": "~0.1.0",