Mailing-List: contact commits-help@aurora.incubator.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@aurora.incubator.apache.org
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: mansu@apache.org
To: commits@aurora.incubator.apache.org
Date: Fri, 17 Jan 2014 01:03:24 -0000
Message-Id: <48d10b1a6bb9475aaf938a6fb2b861cc@git.apache.org>
Subject: [1/6] Scheduler home page new using AngularJS and UI client

Updated Branches:
  refs/heads/master b493027e7 -> 35fcc545a


http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/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 a3faf6b..60ce15c 100644
--- a/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
+++ b/src/main/java/org/apache/aurora/scheduler/http/ServletModule.java
@@ -81,18 +81,20 @@ public class ServletModule extends AbstractModule {
       @Override protected void configureServlets() {
         bind(HttpStatsFilter.class).in(Singleton.class);
         filter("/scheduler*").through(HttpStatsFilter.class);
+        // Servlets may assign a special meaning to trailing /, but this confuses AngularJS's
+        // resource loader. So, removing them for /scheduler* URLs using a UIRedirectFilter.
+        // TODO (skarumuri): Remove UIRedirectFilter when the /scheduler servlets are removed.
+        bind(UIRedirectFilter.class).in(Singleton.class);
+        filter("/scheduler*").through(UIRedirectFilter.class);
         bind(LeaderRedirectFilter.class).in(Singleton.class);
+
         registerJerseyEndpoint("/cron", Cron.class);
         registerJerseyEndpoint("/maintenance", Maintenance.class);
         registerJerseyEndpoint("/mname", Mname.class);
         registerJerseyEndpoint("/offers", Offers.class);
         registerJerseyEndpoint("/pendingtasks", PendingTasks.class);
         registerJerseyEndpoint("/quotas", Quotas.class);
-        registerJerseyEndpoint(
-            "/scheduler",
-            SchedulerzHome.class,
-            SchedulerzRole.class,
-            SchedulerzJob.class);
+        registerJerseyEndpoint("/scheduler/", SchedulerzRole.class, SchedulerzJob.class);
         registerJerseyEndpoint("/slaves", Slaves.class);
         registerJerseyEndpoint("/structdump", StructDump.class);
         registerJerseyEndpoint("/utilization", Utilization.class);
@@ -146,6 +148,8 @@ public class ServletModule extends AbstractModule {
         "assets/datatables/js/dataTables.htmlNumberType.js",
         "/js/dataTables.htmlNumberType.js");
 
+    registerUIClient();
+
     bind(LeaderRedirect.class).in(Singleton.class);
     LifecycleModule.bindStartupAction(binder(), RedirectMonitor.class);
   }
@@ -170,12 +174,34 @@ public class ServletModule extends AbstractModule {
         false);
   }
 
+  /**
+   * A function to handle all assets related to the UI client.
+   */
+  private void registerUIClient() {
+    registerAsset("bower_components/smart-table/Smart-Table.debug.js", "/js/smartTable.js", false);
+    registerAsset("bower_components/angular/angular.js", "/js/angular.js", false);
+
+    registerAsset("ReadOnlyScheduler.js", "/js/readOnlyScheduler.js", false);
+    registerAsset("api_types.js", "/js/apiTypes.js", false);
+    registerAsset("thrift.js", "/js/thrift.js", false);
+
+    registerAsset("ui/index.html", "/scheduler");
+    registerAsset("ui/roleLink.html", "/roleLink.html");
+
+    registerAsset("ui/css/app.css", "/css/app.css");
+
+    registerAsset("ui/js/app.js", "/js/app.js");
+    registerAsset("ui/js/controllers.js", "/js/controllers.js");
+    registerAsset("ui/js/directives.js", "/js/directives.js");
+    registerAsset("ui/js/services.js", "/js/services.js");
+  }
+
   private void registerAsset(String resourceLocation, String registerLocation) {
     registerAsset(resourceLocation, registerLocation, true);
   }
 
   private void registerAsset(String resourceLocation, String registerLocation, boolean isRelative) {
-    String mediaType = getMediaType(registerLocation).toString();
+    String mediaType = getMediaType(resourceLocation).toString();
 
     if (isRelative) {
       Registration.registerHttpAsset(

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/java/org/apache/aurora/scheduler/http/UIRedirectFilter.java
----------------------------------------------------------------------
diff --git a/src/main/java/org/apache/aurora/scheduler/http/UIRedirectFilter.java b/src/main/java/org/apache/aurora/scheduler/http/UIRedirectFilter.java
new file mode 100644
index 0000000..b35aad8
--- /dev/null
+++ b/src/main/java/org/apache/aurora/scheduler/http/UIRedirectFilter.java
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2013 Apache Software Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.apache.aurora.scheduler.http;
+
+import java.io.IOException;
+
+import javax.servlet.FilterChain;
+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+import com.twitter.common.net.http.filters.AbstractHttpFilter;
+
+/**
+ * A filter that maps string template servlet paths to UI client pages. This is needed because
+ * AngularJS's resource loader is confused when there is a trailing / at the end of URL's.
+ */
+public class UIRedirectFilter extends AbstractHttpFilter {
+
+  @Override
+  public void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
+      throws IOException, ServletException {
+
+    if ("/scheduler/".equals(request.getRequestURI())) {
+      response.sendRedirect("/scheduler");
+    } else {
+      chain.doFilter(request, response);
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/resources/org/apache/aurora/scheduler/http/schedulerzhome.st
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/schedulerzhome.st b/src/main/resources/org/apache/aurora/scheduler/http/schedulerzhome.st
deleted file mode 100644
index 5e540f3..0000000
--- a/src/main/resources/org/apache/aurora/scheduler/http/schedulerzhome.st
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="google" value="notranslate">
-    <link rel="icon" href="/images/aurora.png" type="image/png" />
-    <title>Aurora $cluster_name$ scheduler</title>
-    <link href="/css/bootstrap.min.css" rel="stylesheet" />
-    <link href="/css/jquery.dataTables.css" rel="stylesheet" />
-    <script type="text/javascript" src="/js/jquery.min.js"></script>
-    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
-    <script type="text/javascript" src="/js/dataTables.bootstrap.js"></script>
-    <script type="text/javascript" src="/js/dataTables.localstorage.js"></script>
-  </head>
-  <body>
-    <div class="container-fluid">
-      <div class="row-fluid">
-        <center>
-          <h2>Scheduled Jobs</h2>
-        </center>
-      </div>
-      
-      <table id="jobs-table" class="table table-bordered table-striped table-condensed table-hover">
-        <thead>
-          <th>Role
-          <th>Jobs
-          <th>Cron Jobs
-        </thead>
-        <tbody>
-          $owners:{ owner |
-          <tr>
-            <td><a href="/scheduler/$owner.role$">$owner.role$</a>
-            <td>$owner.jobCount$
-            <td>$owner.cronJobCount$
-          </tr>
-          }$
-        </tbody>
-      </table>
-      $if(exception)$
-        <font color='red'>Exception: $exception$</font>
-      $endif$
-    </div>
-    
-    <script type="text/javascript">
-      jQuery(function(){
-        jQuery('#jobs-table').dataTable({
-          'bStateSave': true
-        });
-      });
-    </script>
-  </body>
-</html>

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/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
new file mode 100644
index 0000000..9a2fdf1
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/css/app.css
@@ -0,0 +1,9 @@
+/* app css stylesheet */
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}
+
+.pagination {
+  text-align: center;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/resources/org/apache/aurora/scheduler/http/ui/index.html
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/index.html b/src/main/resources/org/apache/aurora/scheduler/http/ui/index.html
new file mode 100644
index 0000000..c6706c1
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en" ng-app="auroraUI">
+<head>
+  <meta charset="utf-8">
+  <title>Aurora UI</title>
+  <link rel="stylesheet" href="/css/app.css"/>
+</head>
+<body class='ng-cloak'>
+
+<div class='container'>
+  <div ng-controller='JobSummaryController'>
+    <div class='page-header'>
+      <h2 class="text-center">{{title}}</h2>
+    </div>
+    <div>
+      <smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"
+                   class='table table-striped table-hover table-bordered table-condensed'>
+      </smart-table>
+    </div>
+  </div>
+</div>
+
+<!-- Thrift -->
+<script src="/js/thrift.js"></script>
+<script src="/js/apiTypes.js"></script>
+<script src="/js/readOnlyScheduler.js"></script>
+
+<!-- Angular -->
+<script src="/js/angular.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/controllers.js"></script>
+<script src="/js/directives.js"></script>
+<script src="/js/services.js"></script>
+
+<!-- Bootstrap -->
+<script src="/js/bootstrap.min.js"></script>
+<link href="/css/bootstrap.min.css" rel="stylesheet">
+<link href="/js/jquery.min.js" rel="stylesheet">
+
+<!--smart table-->
+<script src="/js/smartTable.js"></script>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/resources/org/apache/aurora/scheduler/http/ui/js/app.js
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/app.js b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/app.js
new file mode 100644
index 0000000..db6ea99
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/app.js
@@ -0,0 +1,4 @@
+'use strict';
+
+// Declare app level module which depends on filters, and services
+var auroraUI = angular.module('auroraUI', ['auroraUI.controllers', 'smartTable.table']);

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/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
new file mode 100644
index 0000000..f1333f1
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/controllers.js
@@ -0,0 +1,24 @@
+'use strict';
+
+/* Controllers */
+
+angular.module('auroraUI.controllers', []).
+    controller('JobSummaryController',
+    function ($scope, $window, auroraClient) {
+      $scope.title = 'Scheduled Jobs Summary';
+
+      $scope.columnCollection = [
+        {label : 'Role', map: 'role', cellTemplateUrl: 'roleLink.html'},
+        {label : 'Jobs', map: 'jobCount'},
+        {label : 'Cron Jobs', map: 'cronJobCount'}
+      ];
+
+      $scope.rowCollection = auroraClient.getJobSummary().summaries;
+
+      $scope.globalConfig = {
+        isGlobalSearchActivated: true,
+        isPaginationEnabled: true,
+        itemsByPage: 25,
+        maxSize: 8
+      };
+   });

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/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
new file mode 100644
index 0000000..d2b2017
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/directives.js
@@ -0,0 +1,8 @@
+'use strict';
+
+auroraUI.directive('roleLink', function () {
+  return {
+    restrict: 'C',
+    template: "<a ng-href='/scheduler/{{formatedValue}}'>{{formatedValue}}</a>"
+  };
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/resources/org/apache/aurora/scheduler/http/ui/js/services.js
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/js/services.js b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/services.js
new file mode 100644
index 0000000..16f22a7
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/js/services.js
@@ -0,0 +1,24 @@
+'use strict';
+
+auroraUI.factory(
+  'auroraClient',
+  function () {
+    return {
+      getJobSummary: function () {
+        var client = this.makeSchedulerClient();
+
+        var response;
+        console.log("querying server");
+        response = client.getJobSummary();
+        console.log(response);
+        return response.result.jobSummaryResult;
+      },
+
+      makeSchedulerClient: function () {
+        var transport = new Thrift.Transport("/api/");
+        var protocol = new Thrift.Protocol(transport);
+        return new ReadOnlySchedulerClient(protocol);
+      }
+    };
+  }
+);

http://git-wip-us.apache.org/repos/asf/incubator-aurora/blob/35fcc545/src/main/resources/org/apache/aurora/scheduler/http/ui/roleLink.html
----------------------------------------------------------------------
diff --git a/src/main/resources/org/apache/aurora/scheduler/http/ui/roleLink.html b/src/main/resources/org/apache/aurora/scheduler/http/ui/roleLink.html
new file mode 100644
index 0000000..fc25526
--- /dev/null
+++ b/src/main/resources/org/apache/aurora/scheduler/http/ui/roleLink.html
@@ -0,0 +1 @@
+<div class="role-link"></div>
\ No newline at end of file