You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@aurora.apache.org by ma...@apache.org on 2014/05/16 01:29:05 UTC
git commit: Add config grouping visualisation to job page
Repository: incubator-aurora
Updated Branches:
refs/heads/master 301617852 -> 17a3a5d9d
Add config grouping visualisation to job page
Replace the button to show/hide configs with a bar when there are multiple.
Tidied up the display of the configuration data.
Bugs closed: AURORA-378
Reviewed at https://reviews.apache.org/r/21247/
Project: http://git-wip-us.apache.org/repos/asf/incubator-aurora/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-aurora/commit/17a3a5d9
Tree: http://git-wip-us.apache.org/repos/asf/incubator-aurora/tree/17a3a5d9
Diff: http://git-wip-us.apache.org/repos/asf/incubator-aurora/diff/17a3a5d9
Branch: refs/heads/master
Commit: 17a3a5d9d05904398847dfe32e30fb84447c043a
Parents: 3016178
Author: David McLaughlin <da...@dmclaughlin.com>
Authored: Thu May 15 16:27:22 2014 -0700
Committer: Suman Karumuri <sk...@twitter.com>
Committed: Thu May 15 16:27:22 2014 -0700
----------------------------------------------------------------------
.../aurora/scheduler/http/ServletModule.java | 2 +
.../aurora/scheduler/http/ui/configSummary.html | 44 +++++++++++++
.../apache/aurora/scheduler/http/ui/css/app.css | 67 ++++++++++++++++++++
.../aurora/scheduler/http/ui/groupSummary.html | 24 +++++++
.../apache/aurora/scheduler/http/ui/job.html | 17 +----
.../aurora/scheduler/http/ui/js/controllers.js | 56 ++++++++--------
.../aurora/scheduler/http/ui/js/directives.js | 46 +++++++++++++-
7 files changed, 211 insertions(+), 45 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
----------------------------------------------------------------------
diff --git a/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java b/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
index effd48a..f7da8c6 100644
--- a/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
+++ b/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
@@ -169,6 +169,8 @@ public class ServletModule extends AbstractModule {
registerAsset("ui/taskStatus.html", "/taskStatus.html");
registerAsset("ui/taskLink.html", "/taskLink.html");
registerAsset("ui/schedulingDetail.html", "/schedulingDetail.html");
+ registerAsset("ui/groupSummary.html", "/groupSummary.html");
+ registerAsset("ui/configSummary.html", "/configSummary.html");
registerAsset("ui/css/app.css", "/css/app.css");
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/configSummary.html
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/configSummary.html b/src/main/resources/org/apache/aurora/scheduler/http/ui/configSummary.html
new file mode 100644
index 0000000..52eeb77
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/configSummary.html
@@ -0,0 +1,44 @@
+<table class="table table-bordered configDetails" style="border-left:5px solid {{group.color}}">
+ <tr>
+ <th colspan="3">
+ configuration details for instances {{group.label}}
+ </th>
+ <tr>
+ <td class="cellLabel" rowspan="3">resources</td>
+ <td>cpu</td>
+ <td>{{group.summary.schedulingDetail.numCpus | toCores}}</td>
+ </tr>
+ <tr>
+ <td>ram</td>
+ <td>{{group.summary.schedulingDetail.ramMb | scaleMb}}</td>
+ </tr>
+ <tr>
+ <td>disk</td>
+ <td>{{group.summary.schedulingDetail.diskMb | scaleMb}}</td>
+ </tr>
+ <tr>
+ <td class="cellLabel">constraints</td>
+ <td colspan="2">{{group.summary.schedulingDetail.constraints}}</td>
+ </tr>
+ <tr>
+ <td class="cellLabel">production</td>
+ <td colspan="2">{{group.summary.schedulingDetail.production}}</td>
+ </tr>
+ <tr>
+ <td class="cellLabel">service</td>
+ <td colspan="2">{{group.summary.schedulingDetail.isService}}</td>
+ </tr>
+ <tr ng-if='group.summary.schedulingDetail.ports'>
+ <td class="cellLabel">ports</td>
+ <td colspan="2">{{group.summary.schedulingDetail.ports}}</td>
+ </tr>
+ <tr ng-if='group.summary.schedulingDetail.metadata'>
+ <td class="cellLabel">metadata</td>
+ <td colspan="2">{{group.summary.schedulingDetail.metadata}}</td>
+ </tr>
+ <tr ng-if='group.summary.schedulingDetail.contact'>
+ <td class="cellLabel">contact</td>
+ <td colspan="2">{{group.summary.schedulingDetail.contact}}
+ </td>
+ </tr>
+</table>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css b/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css
index d64c5b4..c9a95ad 100644
--- a/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css
@@ -47,3 +47,70 @@ ul.breadcrumb {
right: 10px;
position: fixed;
}
+
+.groupSummary {
+ float: left;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.activeGroup {
+ margin-top: 10px;
+}
+
+.activeGroup .unstyled {
+ padding: 1em;
+}
+
+.instanceGroups:after, .visibleGroups:after{
+ clear: both;
+ content: "";
+ display: block;
+}
+
+.groupLabel {
+ padding: 0.5em 1em;
+ border-right: 1px dashed white;
+ color: white;
+ cursor: pointer;
+ font-size: 12px;
+ display: block;
+}
+
+.groupLabel:hover, .groupLabel:active {
+ color: white;
+}
+
+.groupSummary:last-of-type .groupLabel {
+ border-right: 0;
+}
+
+.groupHeader {
+ color: white;
+ padding: 0.5em 1em;
+}
+
+.configDetails {
+ width: 350px;
+ font-size: 12px;
+}
+
+.configDetails td {
+ padding: 3px 8px;
+}
+
+.configDetails .cellLabel {
+ font-weight: bold;
+}
+
+.visibleGroups {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.visibleGroups li {
+ padding: 0;
+ margin-right: 5px;
+ float: left;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/groupSummary.html
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/groupSummary.html b/src/main/resources/org/apache/aurora/scheduler/http/ui/groupSummary.html
new file mode 100644
index 0000000..129235f
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/groupSummary.html
@@ -0,0 +1,24 @@
+<div class='container-fluid'>
+ <h3>Configuration Overview</h3>
+ <div class="instanceGroups">
+ <div ng-repeat="g in groups" class="groupSummary" style="width:{{g.percentage}}%;background-color:{{g.color}}">
+ <a title="view instances {{g.label}}" class="groupLabel" ng-click="toggleVisibleGroup($index)">
+ {{g.label}}
+ </a>
+ </div>
+ </div>
+ <ul class="visibleGroups" ng-if="visibleGroups.length > 0">
+ <li ng-repeat="index in visibleGroups">
+ <div class='activeGroup'>
+ <config-summary group="groups[index]"></config-summary>
+ </div>
+ </li>
+ </ul>
+ <a ng-click="showAllGroups()" ng-if="visibleGroups.length < groups.length">
+ show <span ng-if="groups.length > 1">all</span><span ng-if="groups.length === 1">config</span>
+ </a>
+ <span ng-if="visibleGroups.length < groups.length && visibleGroups.length > 0"> | </span>
+ <a ng-if="visibleGroups.length > 0" ng-click="hideAllGroups()">
+ hide <span ng-if="groups.length > 1">all</span><span ng-if="groups.length === 1">config</span>
+ </a>
+</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/job.html
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/job.html b/src/main/resources/org/apache/aurora/scheduler/http/ui/job.html
index 284c2bc..8437d30 100644
--- a/src/main/resources/org/apache/aurora/scheduler/http/ui/job.html
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/job.html
@@ -44,22 +44,7 @@
</div>
</div>
- <div class='container-fluid'>
- <button class="btn summaryButton" ng-click='toggleSummaryVisibility()'>
- {{summaryButtonText}}
- </button>
- <div ng-if='showSummary'>
- <div class='row'>
- <div class='span8'>
- <smart-table config='taskSummaryTableConfig'
- columns='taskSummaryTableColumns'
- rows='taskSummary'
- class='table table-striped table-hover table-bordered table-condensed'>
- </smart-table>
- </div>
- </div>
- </div>
- </div>
+ <group-summary groups="groupSummary"></group-summary>
<div class='container-fluid'>
<h3>Active tasks</h3>
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js
index c13a88f..1fa1cea 100644
--- a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js
@@ -232,34 +232,6 @@ auroraUIControllers.controller('JobController',
$scope.environment = $routeParams.environment;
$scope.job = $routeParams.job;
- $scope.taskSummary = [];
- $scope.taskSummaryTableColumns = [
- {label: 'Instances',
- map: 'range',
- isSortable: false,
- formatFunction: function (range) {
- return range.start === range.end ? range.start : range.start + '-' + range.end;
- }
- },
- {label: 'Details',
- map: 'schedulingDetail',
- isSortable: false,
- cellTemplateUrl: '/schedulingDetail.html'
- }
- ];
-
- $scope.taskSummaryTableConfig = summaryTableConfig;
-
- var showSummary = 'Show Summary';
- var hideSummary = 'Hide Summary';
- $scope.summaryButtonText = showSummary;
- $scope.showSummary = false;
-
- $scope.toggleSummaryVisibility = function () {
- $scope.showSummary = !$scope.showSummary;
- $scope.summaryButtonText = $scope.showSummary ? hideSummary : showSummary;
- };
-
var taskTableConfig = {
isGlobalSearchActivated: false,
isPaginationEnabled: true,
@@ -319,6 +291,33 @@ auroraUIControllers.controller('JobController',
$scope.activeTasks = getTasksForJob($scope.role, $scope.environment, $scope.job);
+ function buildGroupSummary($scope) {
+ var colors = [
+ 'steelblue',
+ 'indianred',
+ 'darkseagreen',
+ 'sandybrown',
+ 'plum'
+ ];
+
+ var total = _.reduce($scope.taskSummary, function(m, n) {
+ return m + ((n.range.end - n.range.start) + 1);
+ }, 0);
+
+ $scope.groupSummary = $scope.taskSummary.map(function(summary, i) {
+ var count = (summary.range.end - summary.range.start) + 1;
+ var percentage = (count / total) * 100;
+
+ return {
+ label: summary.range.start + '-' + summary.range.end,
+ value: count,
+ percentage: percentage,
+ summary: summary,
+ color: colors[i % colors.length]
+ }
+ });
+ }
+
function getTasksForJob(role, environment, job) {
var response = auroraClient.getTasks(role, environment, job);
@@ -330,6 +329,7 @@ auroraUIControllers.controller('JobController',
$scope.jobDashboardUrl = getJobDashboardUrl(response.statsUrlPrefix);
$scope.taskSummary = taskUtil.summarizeActiveTaskConfigs(response.tasks);
+ buildGroupSummary($scope);
var tasks = _.map(response.tasks, function (task) {
return summarizeTask(task);
http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/17a3a5d9/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js
index a79276d..890cb44 100644
--- a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js
@@ -82,4 +82,48 @@ auroraUI.directive('schedulingDetail', function () {
return {
restrict: 'C'
};
-})
+});
+
+auroraUI.directive('groupSummary', function() {
+ return {
+ restrict: 'E',
+ templateUrl: '/groupSummary.html',
+ scope: {
+ 'groups': '=',
+ 'visibleGroups': '=?'
+ },
+ replace: true,
+ link: function(scope) {
+ scope.visibleGroups = scope.visibleGroups || [];
+
+ scope.toggleVisibleGroup = function(index) {
+ var i = _.indexOf(scope.visibleGroups, index, true);
+ if (i > -1) {
+ scope.visibleGroups.splice(i, 1);
+ } else {
+ scope.visibleGroups.push(index);
+ scope.visibleGroups.sort();
+ }
+ }
+
+ scope.showAllGroups = function() {
+ scope.visibleGroups = _.range(scope.groups.length);
+ }
+
+ scope.hideAllGroups = function() {
+ scope.visibleGroups = [];
+ }
+ }
+ };
+});
+
+auroraUI.directive('configSummary', function() {
+ return {
+ restrict: 'E',
+ scope: {
+ 'group': '='
+ },
+ templateUrl: '/configSummary.html',
+ replace: true
+ }
+});
\ No newline at end of file