Repository: tez Updated Branches: refs/heads/TEZ-2980 3fb2a657a -> 46d181bfd
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/46d181bf Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/46d181bf Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/46d181bf Branch: refs/heads/TEZ-2980 Commit: 46d181bfdd29567fd471eeb6cce6358713eb9ae4 Parents: 3fb2a65 Author: Sreenath Somarajapuram <[email protected]> Authored: Thu Feb 4 14:52:31 2016 +0530 Committer: Sreenath Somarajapuram <[email protected]> Committed: Thu Feb 4 14:52:31 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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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/46d181bf/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
