AMBARI-16103. Tez View : Equip the tez view shim to work with both version 1 & 2 of Tez UI. (Sreenath Somarajapuram via hitesh)

contrib/views/tez/pom.xml

@@ -103,12 +103,36 @@
                  <outputDirectory>target/classes</outputDirectory>
                </artifactItem>
              </artifactItems>
-             <includes>fonts/**/*, img/**/*, scripts/**/*, styles/**/*</includes>
+             <includes>fonts/**/*, img/**/*, scripts/**/*, assets/**/*, config/**/*, styles/**/*, index.html</includes>
            </configuration>
          </execution>
        </executions>
       </plugin>
 
+      <!-- Adds init view script to the UI -->
+      <plugin>
+        <groupId>com.google.code.maven-replacer-plugin</groupId>
+        <artifactId>replacer</artifactId>
+        <version>1.5.3</version>
+        <executions>
+          <execution>
+            <phase>process-resources</phase>
+            <goals>
+              <goal>replace</goal>
+            </goals>
+          </execution>
+        </executions>
+        <configuration>
+          <file>target/classes/index.html</file>
+          <replacements>
+            <replacement>
+              <token>&lt;/body&gt;</token>
+              <value>&lt;script src="ambari-scripts/init-view.js"&gt;&lt;/script&gt;&lt;/body&gt;</value>
+            </replacement>
+          </replacements>
+        </configuration>
+      </plugin>
+
       <plugin>
         <groupId>org.vafer</groupId>
         <artifactId>jdeb</artifactId>
@@ -133,8 +157,7 @@
         <directory>src/main/resources/ui</directory>
         <filtering>false</filtering>
         <includes>
-          <include>scripts/*</include>
-          <include>index.html</include>
+          <include>ambari-scripts/*</include>
         </includes>
       </resource>
 

contrib/views/tez/src/main/resources/ui/scripts/init-ambari-view.js → contrib/views/tez/src/main/resources/ui/ambari-scripts/init-view.js

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-App.deferReadiness();
-
 var PATH_PARAM_NAME = "viewPath";
 
 /**
@@ -128,6 +126,7 @@ function redirectionCheck() {
   }
 }
 
+// Force Ambari iframe to support fullscreen
 function allowFullScreen() {
   if(window.parent) {
     var arrFrames = parent.document.getElementsByTagName("IFRAME"),
@@ -145,6 +144,7 @@ function allowFullScreen() {
   }
 }
 
+// Replace Ambari's url on view URL change
 function onPathChange() {
   var path = window.location.hash.substr(2).trim(),
       pathParts = path.split('?'),
@@ -164,11 +164,14 @@ function onPathChange() {
   );
 }
 
-function scheduleChangeHandler(arguments) {
+function scheduleChangeHandler() {
+  if(typeof this._super === 'function') {
+    this._super.apply(this, arguments);
+  }
   setTimeout(onPathChange, 100);
 }
 
-function setConfigs(parameters) {
+function getConfigs(parameters) {
   var host = window.location.protocol +
       "//" +
       window.location.hostname +
@@ -182,48 +185,103 @@ function setConfigs(parameters) {
 
   parameters = parameters || {};
 
+  return {
+    host: host,
+    yarnProtocol: parameters["yarn.protocol"],
+    resourcesPrefix: resourcesPrefix,
+    namespaces: {
+      webService: {
+        timeline: '%@atsproxy/ws/v1/timeline'.fmt(resourcesPrefix),
+        appHistory: '%@atsproxy/ws/v1/applicationhistory'.fmt(resourcesPrefix),
+        rm: '%@rmproxy/ws/v1/cluster'.fmt(resourcesPrefix),
+        am: '%@rmproxy/proxy/{app_id}/ws/v2/tez'.fmt(resourcesPrefix)
+      },
+      web: {
+        rm: '%@rmredirect/cluster'.fmt(resourcesPrefix)
+      },
+    }
+  };
+}
+
+function setUI1Configs(parameters) {
+  var configs = getConfigs(parameters);
+
   $.extend(true, App.Configs, {
     envDefaults: {
       isStandalone: false,
-      timelineBaseUrl: host,
-      RMWebUrl: host,
-      yarnProtocol: parameters["yarn.protocol"]
+      timelineBaseUrl: configs.host,
+      RMWebUrl: configs.host,
+      yarnProtocol: configs.yarnProtocol,
     },
     restNamespace: {
-      timeline: '%@atsproxy/ws/v1/timeline'.fmt(resourcesPrefix),
-      applicationHistory: '%@atsproxy/ws/v1/applicationhistory'.fmt(resourcesPrefix),
+      timeline: configs.namespaces.webService.timeline,
+      applicationHistory: configs.namespaces.webService.appHistory,
 
-      aminfo: '%@rmproxy/proxy/__app_id__/ws/v1/tez'.fmt(resourcesPrefix),
-      aminfoV2: '%@rmproxy/proxy/__app_id__/ws/v2/tez'.fmt(resourcesPrefix),
-      cluster: '%@rmproxy/ws/v1/cluster'.fmt(resourcesPrefix)
+      aminfo: '%@rmproxy/proxy/__app_id__/ws/v1/tez'.fmt(configs.resourcesPrefix),
+      aminfoV2: '%@rmproxy/proxy/__app_id__/ws/v2/tez'.fmt(configs.resourcesPrefix),
+      cluster: configs.namespaces.webService.rm
     },
     otherNamespace: {
-      cluster: '%@rmredirect/cluster'.fmt(resourcesPrefix)
+      cluster: configs.namespaces.web.rm
     }
   });
 
   App.TimelineRESTAdapter.reopen({
     namespace: App.Configs.restNamespace.timeline
   });
-
-  App.advanceReadiness();
 }
 
-function loadParams() {
-  getStatus().always(function(status) {
-    status = status || {};
-    setConfigs(status.parameters);
+function setUI2Configs(parameters) {
+  var configs = getConfigs(parameters);
+
+  $.extend(true, ENV, {
+    isStandalone: false,
+    yarnProtocol: configs.yarnProtocol,
+    hosts: {
+      timeline: configs.host,
+      rm: configs.host,
+    },
+    namespaces: configs.namespaces
   });
-}
+};
 
-if(!redirectionCheck()) {
-  App.ApplicationRoute.reopen({
+function setAppRoute(AppRoute) {
+  AppRoute.reopen({
     actions: {
       didTransition: scheduleChangeHandler,
       queryParamsDidChange: scheduleChangeHandler
     }
   });
+}
+
+function loadParams(app, callBack) {
+  app.deferReadiness();
+  getStatus().always(function(status) {
+    callBack(status || {});
+    app.advanceReadiness();
+  });
+}
+
+if(!redirectionCheck()) {
+  var initializerOptions = {
+        name: 'configs',
+      },
+      App = window.App;
+
+  if(App) {
+    initializerOptions.initialize = function () {
+      setAppRoute(App.ApplicationRoute);
+      loadParams(App, setUI1Configs);
+    };
+  }
+  else {
+    initializerOptions.before = 'env';
+    initializerOptions.initialize = function (app) {
+      setAppRoute(app.get("__container__").lookup('route:application'));
+      loadParams(app, setUI2Configs);
+    };
+  }
+  Ember.Application.initializer(initializerOptions);
 
   allowFullScreen();
-  loadParams();
 }

contrib/views/tez/src/main/resources/ui/index.html

@@ -1,50 +0,0 @@
-<!--
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you 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.
--->
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Tez UI</title>
-
-    <link rel="shortcut icon" href="img/tez-favicon.png" type="image/x-icon">
-
-    <link rel="stylesheet" href="styles/main.css">
-  </head>
-
-  <body>
-    <script src="scripts/components.js"></script>
-    <script src="scripts/templates.js"></script>
-    <script src="scripts/main.js"></script>
-    <script src="scripts/configs.js"></script>
-
-    <script src="scripts/init-ambari-view.js"></script>
-
-    <div class="error-bar" style="border: none;">
-      <div class="main-container">
-        <div class="message-container">
-          <span class="error-icon"></span>&nbsp;
-          <span class="message"></span>
-        </div><div class="close-container">
-          <div class="close">&#65516;</div>
-        </div>
-        <div class="details"></div>
-      </div>
-    </div>
-
-  </body>
-</html>