You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by sr...@apache.org on 2016/02/24 23:35:14 UTC
[37/45] tez git commit: TEZ-3092. Tez UI 2: Tuneups & Improvements
(sree)
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/TEZ-2980
Commit: 628f8b85c3d6d3ffddb5144f12a028ec2b94ec9c
Parents: 08e55ce
Author: Sreenath Somarajapuram <sr...@apache.org>
Authored: Thu Feb 4 14:52:31 2016 +0530
Committer: Sreenath Somarajapuram <sr...@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