tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From s...@apache.org
Subject [37/45] tez git commit: TEZ-3092. Tez UI 2: Tuneups & Improvements (sree)
Date Wed, 24 Feb 2016 22:41:16 GMT
TEZ-3092. Tez UI 2: Tuneups & Improvements (sree)


Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/628f8b85
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/628f8b85
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/628f8b85

Branch: refs/heads/master
Commit: 628f8b85c3d6d3ffddb5144f12a028ec2b94ec9c
Parents: 08e55ce
Author: Sreenath Somarajapuram <sree@apache.org>
Authored: Thu Feb 4 14:52:31 2016 +0530
Committer: Sreenath Somarajapuram <sree@apache.org>
Committed: Thu Feb 25 03:32:53 2016 +0530

----------------------------------------------------------------------
 TEZ-2980-CHANGES.txt                            |  1 +
 tez-ui2/README.md                               | 83 +++++++++++++++-----
 tez-ui2/src/main/webapp/README.md               | 44 +++++++----
 .../main/webapp/app/components/caller-info.js   |  2 +
 tez-ui2/src/main/webapp/app/router.js           |  3 +-
 tez-ui2/src/main/webapp/app/services/hosts.js   |  3 +-
 .../src/main/webapp/app/services/pollster.js    |  7 +-
 tez-ui2/src/main/webapp/app/styles/app.less     |  1 +
 .../src/main/webapp/app/styles/caller-info.less | 26 ++++++
 .../webapp/app/styles/dags-page-search.less     | 49 ++++++++----
 .../src/main/webapp/app/styles/page-layout.less |  7 +-
 tez-ui2/src/main/webapp/app/styles/shared.less  |  6 +-
 tez-ui2/src/main/webapp/config/build-info.js    | 32 ++++++++
 tez-ui2/src/main/webapp/config/configs.env      | 29 ++++++-
 .../src/main/webapp/config/default-app-conf.js  |  4 +-
 tez-ui2/src/main/webapp/config/environment.js   |  3 +-
 16 files changed, 239 insertions(+), 61 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/TEZ-2980-CHANGES.txt
----------------------------------------------------------------------
diff --git a/TEZ-2980-CHANGES.txt b/TEZ-2980-CHANGES.txt
index b653e42..bc74ffd 100644
--- a/TEZ-2980-CHANGES.txt
+++ b/TEZ-2980-CHANGES.txt
@@ -33,3 +33,4 @@ ALL CHANGES:
   TEZ-3058. Tez UI 2: Add download data functionality
   TEZ-3084. Tez UI 2: Display caller type and info
   TEZ-3080. Tez UI 2: Ensure UI 2 is in-line with UI 1
+  TEZ-3092. Tez UI 2: Tuneups & Improvements

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/README.md
----------------------------------------------------------------------
diff --git a/tez-ui2/README.md b/tez-ui2/README.md
index 3ec46de..6a009ee 100644
--- a/tez-ui2/README.md
+++ b/tez-ui2/README.md
@@ -1,30 +1,76 @@
+<!--
+   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.
+-->
+
 # Tez-ui
 
-The Tez UI is an ember based web application that provides visualization of Tez applications
-running on the Apache Hadoop YARN framework.
+The Tez UI is an ember based web-app that provides visualization of Tez applications running
on the Apache Hadoop YARN framework.
+
+For more information on Tez and the Tez UI - Check the [Tez homepage](http://tez.apache.org/
"Apache Tez Homepage").
+
+## Configurations
+
+### In tez-site.xml
+  * `tez.runtime.convert.user-payload.to.history-text` : Should be enabled to get the configuration
options in. If enabled, the config options are set as userpayload per input/output.
+
+### In yarn-site.xml
+  * `yarn.timeline-service.http-cross-origin.enabled` : Enable CORS in timeline.
+  * `yarn.resourcemanager.system-metrics-publisher.enabled` : Enable generic history service
in timeline server
+  * `yarn.timeline-service.enabled` : Enabled the timeline server for logging details
+  * `yarn.timeline-service.webapp.address` : Value must be the IP:PORT on which timeline
server is running
+
+### In configs.env
+  This environment configuration file can be found at `./src/main/webapp/config/configs.env`
+
+  * `ENV.hosts.timeline` : Timeline Server Address. By default TEZ UI looks for timeline
server at http://localhost:8188.
+  * `ENV.hosts.rm` : Resource Manager Address. By default RM REST APIs are expected to be
at http://localhost:8088.
+  * `ENV.hosts.rmProxy` : This is options. Value configured as RM host will be taken as proxy
address by default. Use this configuration when RM web proxy is configured at a different
address than RM.
+  * `ENV.timeZone` : Time Zone in which dates are displayed in the UI. If not set, local
time zone will be used. Refer http://momentjs.com/timezone/docs/ for valid entries.
 
-For more information on Tez and the Tez UI - the [tez homepage](http://tez.apache.org/ "Apache
Tez Homepage").
+## Package & deploy
 
-## Prerequisites
+### Get war package
+  * Tez UI is distributed as a war package.
+  * To build & package UI without running test cases, run `mvn clean package -DskipTests`
in this directory.
+  * This would give you a war file in `./target`.
+  * UI build is part of tez build, refer BUILDING.txt for more info.
+
+### Using UI war
+##### Remotely:
+  Use webfront tomcat manager to upload & deploy your war remotely.
+##### Manually:
+  The war can be added to any tomcat instance.
+  1. Remove any old deployments in `$TOMCAT_HOME/webapps`
+  2. Copy the war to `$TOMCAT_HOME/webapps`
+  3. Restart tomcat and the war will get deployed. The content of the war would be available
in
+     `$TOMCAT_HOME/webapps/tez-ui-[version]` directory.
+
+## Development
+
+All the following commands must be run inside `src/main/webapp`.
+
+### Prerequisites
 
 You will need the following things properly installed on your computer.
 
 * [Git](http://git-scm.com/)
 * [Node.js](http://nodejs.org/) (with NPM)
 * [Ember CLI](http://www.ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
 
-## Installation
-
-* `git clone <repository-url>` this repository
-* In tez/tez-ui2/src/main/webapp
-* `npm install`
-
-## Configuring
-* By default timeline is expected at localhost:8188 & RM at localhost:8088
-* You can point the UI to custom locations by setting the environment variables in src/main/webapp/config/configs.env
-
-## Running / Development
+### Running UI
 
 * `ember server`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
@@ -32,9 +78,10 @@ You will need the following things properly installed on your computer.
 ### Running Tests
 
 * `ember test`
-* `ember test --server`
 
-### Building
+### Building UI manually
 
 * `ember build` (development)
 * `ember build --environment production` (production)
+
+Files would be stored in "dist/"

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/README.md
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/README.md b/tez-ui2/src/main/webapp/README.md
index fb8128e..a86e7da 100644
--- a/tez-ui2/src/main/webapp/README.md
+++ b/tez-ui2/src/main/webapp/README.md
@@ -1,9 +1,32 @@
+<!--
+   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.
+-->
+
 # Tez-ui
 
-The Tez UI is an ember based web application that provides visualization of Tez applications
-running on the Apache Hadoop YARN framework.
+The Tez UI is an ember based web-app that provides visualization of Tez applications running
on the Apache Hadoop YARN framework.
+
+For more information on Tez and the Tez UI - Check the [Tez homepage](http://tez.apache.org/
"Apache Tez Homepage").
+
+## Configurations
 
-For more information on Tez and the Tez UI - the [tez homepage](http://tez.apache.org/ "Apache
Tez Homepage").
+* By default timeline is expected at localhost:8188 & RM at localhost:8088
+* You can point the UI to custom locations by setting the environment variables in `src/main/webapp/config/configs.env`
+
+## Development
 
 ## Prerequisites
 
@@ -12,23 +35,12 @@ You will need the following things properly installed on your computer.
 * [Git](http://git-scm.com/)
 * [Node.js](http://nodejs.org/) (with NPM)
 * [Ember CLI](http://www.ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
-
-## Installation
 
-* `git clone <repository-url>` this repository
-* change into the new directory
-* `npm install`
-
-## Running / Development
+## Running UI
 
 * `ember server`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 
-### Code Generators
-
-Make use of the many generators for code, try `ember help generate` for more details
-
 ### Running Tests
 
 * `ember test`
@@ -38,3 +50,5 @@ Make use of the many generators for code, try `ember help generate` for
more det
 
 * `ember build` (development)
 * `ember build --environment production` (production)
+
+Files would be stored in "dist/"

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/components/caller-info.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/caller-info.js b/tez-ui2/src/main/webapp/app/components/caller-info.js
index 3680049..ece33ac 100644
--- a/tez-ui2/src/main/webapp/app/components/caller-info.js
+++ b/tez-ui2/src/main/webapp/app/components/caller-info.js
@@ -28,6 +28,8 @@ export default Ember.Component.extend({
 
   codeMirror: null,
 
+  classNames: ['caller-info'],
+
   mode: Ember.computed("type", function () {
     switch(this.get("type")) {
       case 'Hive':

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/router.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/router.js b/tez-ui2/src/main/webapp/app/router.js
index eb3afb3..4196675 100644
--- a/tez-ui2/src/main/webapp/app/router.js
+++ b/tez-ui2/src/main/webapp/app/router.js
@@ -30,7 +30,7 @@ Router.map(function() {
     this.route('tasks');
     this.route('attempts');
     this.route('counters');
-    this.route('index', function() {});
+    this.route('index', {path: '/'}, function() {});
     this.route('graphical');
   });
   this.route('vertex', {path: '/vertex/:vertex_id'}, function() {
@@ -45,6 +45,7 @@ Router.map(function() {
   this.route('attempt', {path: '/attempt/:attempt_id'}, function () {
     this.route('counters');
   });
+  this.route('app', {path: '/tez-app/:app_id'}, function () {}); // Alias for backward compatibility
with Tez UI V1
   this.route('app', {path: '/app/:app_id'}, function () {
     this.route('dags');
     this.route('configs');

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/services/hosts.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/services/hosts.js b/tez-ui2/src/main/webapp/app/services/hosts.js
index 0da7fe5..c9e7d25 100644
--- a/tez-ui2/src/main/webapp/app/services/hosts.js
+++ b/tez-ui2/src/main/webapp/app/services/hosts.js
@@ -64,7 +64,8 @@ export default Ember.Service.extend({
   }),
 
   am: Ember.computed(function () {
-    return this.normalizeURL(this.get("env.app.hosts.rm"));
+    var url = this.get("env.app.hosts.rmProxy") || this.get("env.app.hosts.rm");
+    return this.normalizeURL(url);
   }),
 
 });

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/services/pollster.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/services/pollster.js b/tez-ui2/src/main/webapp/app/services/pollster.js
index 00a0c6c..7e41fa1 100644
--- a/tez-ui2/src/main/webapp/app/services/pollster.js
+++ b/tez-ui2/src/main/webapp/app/services/pollster.js
@@ -38,8 +38,13 @@ export default Ember.Service.extend({
   pollCount: 0,
 
   initState: Ember.on("init", function () {
+    var state = this.get("localStorage").get(STATE_STORAGE_KEY);
+
+    if(state === undefined || state === null) {
+      state = true;
+    }
     Ember.run.later(this, function () {
-      this.set("active", this.get("localStorage").get(STATE_STORAGE_KEY));
+      this.set("active", state);
     });
   }),
   stateObserver: Ember.observer("active", function () {

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/styles/app.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/app.less b/tez-ui2/src/main/webapp/app/styles/app.less
index 11c611c..a832446 100644
--- a/tez-ui2/src/main/webapp/app/styles/app.less
+++ b/tez-ui2/src/main/webapp/app/styles/app.less
@@ -27,6 +27,7 @@
 @import "dags-page-search";
 @import "table-controls";
 @import "error-bar";
+@import "caller-info";
 
 // Modals
 @import "column-selector";

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/styles/caller-info.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/caller-info.less b/tez-ui2/src/main/webapp/app/styles/caller-info.less
new file mode 100644
index 0000000..2dc78f1
--- /dev/null
+++ b/tez-ui2/src/main/webapp/app/styles/caller-info.less
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+.caller-info {
+  .panel-info {
+    overflow: hidden;
+  }
+  .CodeMirror {
+    height: auto;
+  }
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/styles/dags-page-search.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/dags-page-search.less b/tez-ui2/src/main/webapp/app/styles/dags-page-search.less
index ec64d11..25a470d 100644
--- a/tez-ui2/src/main/webapp/app/styles/dags-page-search.less
+++ b/tez-ui2/src/main/webapp/app/styles/dags-page-search.less
@@ -16,6 +16,39 @@
  * limitations under the License.
  */
 
+.dags-page-search {
+  text-align: justify;
+
+  margin-bottom: 5px;
+
+  .search-element {
+    display: inline-block;
+    width: 16.66%;
+
+    padding-left: 3px;
+
+    label {
+      margin-bottom: 2px;
+    }
+
+    select {
+      top: -1px;
+      position: relative;
+    }
+  }
+
+  .dag-name {
+    padding-left: 0px;
+  }
+}
+
+.all-dags-table {
+  .pagination-ui, .table-controls {
+    margin-top: -5px;
+    margin-bottom: 5px;
+  }
+}
+
 @media screen and (min-width: 1300px) {
   .dags-page-search{
     float: left;
@@ -32,19 +65,3 @@
     }
   }
 }
-
-.dags-page-search {
-  text-align: justify;
-
-
-  .search-element {
-    display: inline-block;
-    width: 16.66%;
-
-    padding-left: 3px;
-  }
-
-  .dag-name {
-    padding-left: 0px;
-  }
-}

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/styles/page-layout.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/page-layout.less b/tez-ui2/src/main/webapp/app/styles/page-layout.less
index 0411fa0..ee62535 100644
--- a/tez-ui2/src/main/webapp/app/styles/page-layout.less
+++ b/tez-ui2/src/main/webapp/app/styles/page-layout.less
@@ -43,11 +43,13 @@ body, html {
         position: absolute;
         left: 70px;
         right: 20px;
-        top: 9px;
+        top: 6px;
 
         .breadcrumb {
           .no-border;
 
+          font-size: 1.2em;
+
           background-color: transparent;
           margin-bottom: 0px;
 
@@ -60,6 +62,7 @@ body, html {
         position: absolute;
         right: 0px;
         top: 0px;
+        height: 27px;
 
         span {
           .left-delim;
@@ -108,7 +111,7 @@ body, html {
 
     border-top: 1px @border-color solid;
 
-    font-size: .8em;
+    font-size: .9em;
 
     .ui-info {
       background-color: @white;

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/app/styles/shared.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/shared.less b/tez-ui2/src/main/webapp/app/styles/shared.less
index a96636f..5f4b8f4 100644
--- a/tez-ui2/src/main/webapp/app/styles/shared.less
+++ b/tez-ui2/src/main/webapp/app/styles/shared.less
@@ -48,6 +48,8 @@ b {
   }
 }
 
-.CodeMirror {
-  height: auto;
+.em-table {
+  .em-progress-container {
+    padding-top: 1px;
+  }
 }

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/config/build-info.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/config/build-info.js b/tez-ui2/src/main/webapp/config/build-info.js
new file mode 100644
index 0000000..ae2b33d
--- /dev/null
+++ b/tez-ui2/src/main/webapp/config/build-info.js
@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+const POM_FILE = "../../../pom.xml";
+var fs = require('fs');
+
+function fetchVersion() {
+  try {
+    var fileData = fs.readFileSync(POM_FILE, 'ascii');
+    // Feel this is better than parsing the whole xml
+    return fileData.substring(fileData.indexOf("<version>") + 9, fileData.indexOf("</version>"));
+  }catch(e){}
+}
+
+module.exports = {
+  version: fetchVersion()
+};

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/config/configs.env
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/config/configs.env b/tez-ui2/src/main/webapp/config/configs.env
index 60421fd..a0d2198 100644
--- a/tez-ui2/src/main/webapp/config/configs.env
+++ b/tez-ui2/src/main/webapp/config/configs.env
@@ -1,6 +1,31 @@
 ENV = {
   hosts: {
+    /*
+     * Timeline Server Address:
+     * By default TEZ UI looks for timeline server at http://localhost:8188, uncomment and
change
+     * the following value for pointing to a different address.
+     */
     //timeline: "http://localhost:8188",
-    //rm: "http://localhost:8088"
-  }
+
+    /*
+     * Resource Manager Address:
+     * By default RM REST APIs are expected to be at http://localhost:8088, uncomment and
change
+     * the following value to point to a different address.
+     */
+    //rm: "http://localhost:8088",
+
+    /*
+     * Resource Manager Web Proxy Address:
+     * Optional - By default, value configured as RM host will be taken as proxy address
+     * Use this configuration when RM web proxy is configured at a different address than
RM.
+     */
+    //rmProxy: "http://localhost:8088",
+  },
+
+  /*
+   * Time Zone in which dates are displayed in the UI:
+   * If not set, local time zone will be used.
+   * Refer http://momentjs.com/timezone/docs/ for valid entries.
+   */
+  //timeZone: "UTC",
 };

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/config/default-app-conf.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/config/default-app-conf.js b/tez-ui2/src/main/webapp/config/default-app-conf.js
index 084e9b7..c53e4d7 100644
--- a/tez-ui2/src/main/webapp/config/default-app-conf.js
+++ b/tez-ui2/src/main/webapp/config/default-app-conf.js
@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
+var buildInfo = require('./build-info');
+
 module.exports = { // Tez App configurations
-  buildVersion: "",
+  buildVersion: buildInfo.version || "",
   isStandalone: true, // Must be set false while running in wrapped mode
   rowLoadLimit: 9007199254740991,
   pollingInterval: 3000,

http://git-wip-us.apache.org/repos/asf/tez/blob/628f8b85/tez-ui2/src/main/webapp/config/environment.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/config/environment.js b/tez-ui2/src/main/webapp/config/environment.js
index c08549f..0c755ac 100644
--- a/tez-ui2/src/main/webapp/config/environment.js
+++ b/tez-ui2/src/main/webapp/config/environment.js
@@ -24,8 +24,7 @@ module.exports = function(environment) {
   var ENV = {
     modulePrefix: 'tez-ui',
     environment: environment,
-    baseURL: '/',
-    locationType: 'auto',
+    locationType: 'hash',
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build


Mime
View raw message