aurora-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ma...@apache.org
Subject git commit: Add config grouping visualisation to job page
Date Thu, 15 May 2014 23:29:05 GMT
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 <david@dmclaughlin.com>
Authored: Thu May 15 16:27:22 2014 -0700
Committer: Suman Karumuri <skarumuri@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


Mime
View raw message