diff --git a/mod/dashboard/app/index.html b/mod/dashboard/app/index.html index 4792eb2df..80bf899b9 100644 --- a/mod/dashboard/app/index.html +++ b/mod/dashboard/app/index.html @@ -19,16 +19,16 @@

etcd Dashboard

-
+
- + @@ -41,6 +41,7 @@ + @@ -52,11 +53,9 @@ - - - + diff --git a/mod/dashboard/app/scripts/app.js b/mod/dashboard/app/scripts/app.js index fb1a7fca9..9cc8b5575 100644 --- a/mod/dashboard/app/scripts/app.js +++ b/mod/dashboard/app/scripts/app.js @@ -27,10 +27,10 @@ app.config(function($routeProvider, $locationProvider, urlPrefix) { controller: 'HomeCtrl', templateUrl: prefixUrl('/views/home.html') }) - //.when(prefixUrl('/stats'), { - //controller: 'StatsCtrl', - //templateUrl: prefixUrl('/views/stats.html') - //}) + .when(prefixUrl('/stats'), { + controller: 'StatsCtrl', + templateUrl: prefixUrl('/views/stats.html') + }) .when(prefixUrl('/browser'), { controller: 'BrowserCtrl', templateUrl: prefixUrl('/views/browser.html') diff --git a/mod/dashboard/app/scripts/common/directives/highlight.js b/mod/dashboard/app/scripts/common/directives/highlight.js index 5f9e3ee87..7942a8cb7 100644 --- a/mod/dashboard/app/scripts/common/directives/highlight.js +++ b/mod/dashboard/app/scripts/common/directives/highlight.js @@ -1,11 +1,17 @@ 'use strict'; angular.module('etcdControlPanel') -.directive('highlight', function() { +.directive('highlight', function(keyPrefix) { return { - restrict: 'A', + restrict: 'E', + scope: { + highlightBase: '=', + highlightCurrent: '=' + }, link: function(scope, element, attrs) { - if('#' + scope.etcdPath === attrs.href) { + var base = _.str.strRight(scope.highlightBase, keyPrefix), + current = _.str.trim(scope.highlightCurrent, '/'); + if (base === current) { element.parent().parent().addClass('etcd-selected'); } } diff --git a/mod/dashboard/app/scripts/controllers/browser.js b/mod/dashboard/app/scripts/controllers/browser.js index c026e1f53..6a0790dde 100644 --- a/mod/dashboard/app/scripts/controllers/browser.js +++ b/mod/dashboard/app/scripts/controllers/browser.js @@ -1,22 +1,39 @@ 'use strict'; angular.module('etcdControlPanel') -.controller('BrowserCtrl', function ($scope, $location, $window, EtcdV2, keyPrefix, $, _, moment) { +.controller('BrowserCtrl', function ($scope, $window, EtcdV2, keyPrefix, $, _, moment) { $scope.save = 'etcd-save-hide'; $scope.preview = 'etcd-preview-hide'; $scope.enableBack = true; $scope.writingNew = false; - $scope.key = ''; + $scope.key = null; $scope.list = []; // etcdPath is the path to the key that is currenly being looked at. $scope.etcdPath = keyPrefix; + $scope.inputPath = keyPrefix; + + $scope.resetInputPath = function() { + $scope.inputPath = $scope.etcdPath; + }; $scope.setActiveKey = function(key) { $scope.etcdPath = keyPrefix + _.str.trim(key, '/'); + $scope.resetInputPath(); }; - $scope.$watch('etcdPath', function() { + $scope.stripPrefix = function(path) { + return _.str.strRight(path, keyPrefix); + }; + + $scope.onEnter = function() { + var path = $scope.stripPrefix($scope.inputPath); + if (path !== '') { + $scope.setActiveKey(path); + } + }; + + $scope.updateCurrentKey = function() { function etcdPathKey() { return pathKey($scope.etcdPath); } @@ -28,7 +45,6 @@ angular.module('etcdControlPanel') } return parts[1]; } - // Notify everyone of the update localStorage.setItem('etcdPath', $scope.etcdPath); $scope.enableBack = true; @@ -36,9 +52,10 @@ angular.module('etcdControlPanel') if ($scope.etcdPath === keyPrefix) { $scope.enableBack = false; } - $scope.key = EtcdV2.getKey(etcdPathKey($scope.etcdPath)); - }); + }; + + $scope.$watch('etcdPath', $scope.updateCurrentKey); $scope.$watch('key', function() { if ($scope.writingNew === true) { @@ -68,20 +85,18 @@ angular.module('etcdControlPanel') //back button click $scope.back = function() { $scope.etcdPath = $scope.key.getParent().path(); - //$scope.syncLocation(); + $scope.resetInputPath(); $scope.preview = 'etcd-preview-hide'; $scope.writingNew = false; }; - //$scope.syncLocation = function() { - //$location.path($scope.etcdPath); - //}; - $scope.showSave = function() { $scope.save = 'etcd-save-reveal'; }; $scope.saveData = function() { + $scope.setActiveKey($scope.stripPrefix($scope.inputPath)); + $scope.updateCurrentKey(); // TODO: fixup etcd to allow for empty values $scope.key.set($scope.singleValue || ' ').then(function(response) { $scope.save = 'etcd-save-hide'; @@ -93,7 +108,9 @@ angular.module('etcdControlPanel') }); }; - $scope.deleteKey = function() { + $scope.deleteKey = function(key) { + $scope.setActiveKey(key); + $scope.updateCurrentKey(); $scope.key.deleteKey().then(function(response) { //TODO: remove loader $scope.save = 'etcd-save-hide'; @@ -128,9 +145,9 @@ angular.module('etcdControlPanel') return $($window).height(); }; - $scope.$watch($scope.getHeight, function() { - $('.etcd-body').css('height', $scope.getHeight()-45); - }); + //$scope.$watch($scope.getHeight, function() { + ////$('.etcd-container.etcd-browser etcd-body').css('height', $scope.getHeight()-45); + //}); $window.onresize = function(){ $scope.$apply(); diff --git a/mod/dashboard/app/scripts/controllers/stats.js b/mod/dashboard/app/scripts/controllers/stats.js index d15ac117d..34862d675 100644 --- a/mod/dashboard/app/scripts/controllers/stats.js +++ b/mod/dashboard/app/scripts/controllers/stats.js @@ -2,7 +2,7 @@ angular.module('etcdControlPanel') -.controller('StatsCtrl', ['$scope', 'EtcdV2', 'statsVega', function ($scope, EtcdV2, statsVega) { +.controller('StatsCtrl', function ($scope, $rootScope, $interval, EtcdV2, statsVega) { $scope.graphContainer = '#latency'; $scope.graphVisibility = 'etcd-graph-show'; $scope.tableVisibility = 'etcd-table-hide'; @@ -74,10 +74,10 @@ angular.module('etcdControlPanel') $scope.getWidth = function() { return $(window).width(); }; - $scope.$watch($scope.getHeight, function() { - $('.etcd-body').css('height', $scope.getHeight()-5); - readStats(); - }); + //$scope.$watch($scope.getHeight, function() { + ////$('.etcd-container.etcd-stats .etcd-body').css('height', $scope.getHeight()-5); + //readStats(); + //}); $scope.$watch($scope.getWidth, function() { readStats(); }); @@ -85,12 +85,31 @@ angular.module('etcdControlPanel') $scope.$apply(); }; - // Update the graphs live - setInterval(function() { - readStats(); - $scope.$apply(); - }, 500); -}]) + $scope.pollPromise = null; + + $scope.startPolling = function() { + // Update the graphs live + if ($scope.pollPromise) { + return; + } + $scope.pollPromise = $interval(function() { + readStats(); + }, 500); + }; + + $scope.stopPolling = function() { + $interval.cancel($scope.pollPromise); + $scope.pollPromise = null; + }; + + // Stop polling when navigating away from a view with this controller. + $rootScope.$on('$routeChangeStart', function () { + $scope.stopPolling(); + }); + + $scope.startPolling(); + +}) /* statsVega returns the vega configuration for the stats dashboard */ diff --git a/mod/dashboard/app/styles/browser.css b/mod/dashboard/app/styles/browser.css index 82a427f35..5c7883cfa 100644 --- a/mod/dashboard/app/styles/browser.css +++ b/mod/dashboard/app/styles/browser.css @@ -1,4 +1,10 @@ .etcd-container.etcd-browser { + width: 100%; + height: 500px; +} + +.home-container .etcd-container.etcd-browser { + height: 400px; } .etcd-container.etcd-browser .etcd-header { diff --git a/mod/dashboard/app/styles/etcd-widgets.css b/mod/dashboard/app/styles/etcd-widgets.css index b04db8c93..e97d9e60a 100644 --- a/mod/dashboard/app/styles/etcd-widgets.css +++ b/mod/dashboard/app/styles/etcd-widgets.css @@ -16,6 +16,8 @@ body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; + margin: 20px 0; + height: 100%; } a { @@ -167,8 +169,7 @@ h2 { top: 0px; left: 0px; position: relative; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden; height: 100%; width: 100%; box-sizing: border-box; diff --git a/mod/dashboard/app/styles/main.css b/mod/dashboard/app/styles/main.css index 4b5443286..7eb1bb8d2 100644 --- a/mod/dashboard/app/styles/main.css +++ b/mod/dashboard/app/styles/main.css @@ -1,9 +1,14 @@ +html { + height: 100%; +} + body { background: #fafafa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; padding: 30px; margin: 0px; + height: 100%; } h1 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/mod/dashboard/app/styles/stats.css b/mod/dashboard/app/styles/stats.css index 74e120a54..92fb3f18f 100644 --- a/mod/dashboard/app/styles/stats.css +++ b/mod/dashboard/app/styles/stats.css @@ -1,8 +1,10 @@ -.etcd-stats { - width: 100%; height: 400px; +.etcd-container.etcd-stats { + width: 100%; + height: 500px; } -.etcd-container.etcd-stats { +.home-container .etcd-container.etcd-stats { + height: 400px; } .etcd-container.etcd-stats h2 { diff --git a/mod/dashboard/app/views/browser.html b/mod/dashboard/app/views/browser.html index f97745220..01f67c164 100644 --- a/mod/dashboard/app/views/browser.html +++ b/mod/dashboard/app/views/browser.html @@ -16,7 +16,7 @@
- +
@@ -33,7 +33,9 @@ - {{key.key}} + + {{key.key}} +
—
@@ -41,7 +43,7 @@
- +
diff --git a/mod/dashboard/app/views/home.html b/mod/dashboard/app/views/home.html index 687018913..e65106bd7 100644 --- a/mod/dashboard/app/views/home.html +++ b/mod/dashboard/app/views/home.html @@ -1,2 +1,4 @@ - -
+stats only +
+browser only +
diff --git a/mod/dashboard/app/views/stats.html b/mod/dashboard/app/views/stats.html index 8243d3617..5baecca6a 100644 --- a/mod/dashboard/app/views/stats.html +++ b/mod/dashboard/app/views/stats.html @@ -1,4 +1,4 @@ -
+