TEZ-3084. Tez UI 2: Display caller type and info (sree)
Project: http://git-wip-us.apache.org/repos/asf/tez/repo Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/94599693 Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/94599693 Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/94599693 Branch: refs/heads/master Commit: 94599693c05d276df850f10dffdedcc8d275e9e6 Parents: c6ce4ec Author: Sreenath Somarajapuram <s...@apache.org> Authored: Tue Feb 2 01:41:24 2016 +0530 Committer: Sreenath Somarajapuram <s...@apache.org> Committed: Thu Feb 25 03:32:53 2016 +0530 ---------------------------------------------------------------------- TEZ-2980-CHANGES.txt | 1 + .../src/main/webapp/app/adapters/timeline.js | 2 +- .../main/webapp/app/components/caller-info.js | 76 ++++++++++++++++++++ .../webapp/app/components/dags-page-search.js | 4 +- .../src/main/webapp/app/controllers/app/dags.js | 4 +- tez-ui2/src/main/webapp/app/controllers/dags.js | 18 +++-- tez-ui2/src/main/webapp/app/models/dag.js | 6 +- tez-ui2/src/main/webapp/app/routes/dags.js | 14 ++-- tez-ui2/src/main/webapp/app/serializers/dag.js | 27 ++++++- .../app/templates/components/caller-info.hbs | 24 +++++++ .../templates/components/dags-page-search.hbs | 6 +- .../src/main/webapp/app/templates/dag/index.hbs | 4 ++ tez-ui2/src/main/webapp/bower.json | 3 +- tez-ui2/src/main/webapp/ember-cli-build.js | 5 ++ .../integration/components/caller-info-test.js | 42 +++++++++++ 15 files changed, 212 insertions(+), 24 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/TEZ-2980-CHANGES.txt ---------------------------------------------------------------------- diff --git a/TEZ-2980-CHANGES.txt b/TEZ-2980-CHANGES.txt index e4ab014..38f474a 100644 --- a/TEZ-2980-CHANGES.txt +++ b/TEZ-2980-CHANGES.txt @@ -31,3 +31,4 @@ ALL CHANGES: TEZ-3069. Tez UI 2: Make error bar fully functional TEZ-3062. Tez UI 2: Integrate graphical view TEZ-3058. Tez UI 2: Add download data functionality + TEZ-3084. Tez UI 2: Display caller type and info http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/adapters/timeline.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/adapters/timeline.js b/tez-ui2/src/main/webapp/app/adapters/timeline.js index 82faed8..1a341f7 100644 --- a/tez-ui2/src/main/webapp/app/adapters/timeline.js +++ b/tez-ui2/src/main/webapp/app/adapters/timeline.js @@ -37,7 +37,7 @@ export default AbstractAdapter.extend({ dagName: 'dagName', user: "user", status: "status", - contextID: "callerId" + callerID: "callerId" }, stringifyFilters: function (filters) { http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/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 new file mode 100644 index 0000000..3680049 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/components/caller-info.js @@ -0,0 +1,76 @@ +/*global CodeMirror*/ +/** + * 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. + */ + +// Must be convert into an ember addon + +import Ember from 'ember'; + +export default Ember.Component.extend({ + + type: null, + info: null, + + codeMirror: null, + + mode: Ember.computed("type", function () { + switch(this.get("type")) { + case 'Hive': + return 'text/x-hive'; + case 'Pig': + return 'text/x-pig'; + default: + return 'text/x-sql'; + } + }), + + _init: Ember.on('didInsertElement', function() { + var element = Ember.$(this.get('element')).find('textarea')[0], + codeMirror = CodeMirror.fromTextArea(element, { + theme: 'default', + indentUnit: 2, + smartIndent: true, + tabSize: 4, + electricChars: true, + lineWrapping: true, + lineNumbers: true, + readOnly: true, + autofocus: false, + dragDrop: false, + }); + + this.set('codeMirror', codeMirror); + + this._modeChanged(); + this._infoChanged(); + }), + + _modeChanged: Ember.observer("mode", function() { + this.get('codeMirror').setOption("mode", this.get("mode")); + }), + + _infoChanged: Ember.observer("info", function() { + var codeMirror = this.get('codeMirror'), + info = this.get('info') || ''; + + if (this.get('codeMirror').getValue() !== info) { + codeMirror.setValue(info); + } + }) + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/components/dags-page-search.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/components/dags-page-search.js b/tez-ui2/src/main/webapp/app/components/dags-page-search.js index c9c01e3..f95a901 100644 --- a/tez-ui2/src/main/webapp/app/components/dags-page-search.js +++ b/tez-ui2/src/main/webapp/app/components/dags-page-search.js @@ -37,8 +37,8 @@ export default Ember.Component.extend({ appIDChanged: function (value) { this.get('targetObject.targetObject').send('searchChanged', 'appID', value); }, - contextIDChanged: function (value) { - this.get('targetObject.targetObject').send('searchChanged', 'contextID', value); + callerIDChanged: function (value) { + this.get('targetObject.targetObject').send('searchChanged', 'callerID', value); }, } }); http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/controllers/app/dags.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/controllers/app/dags.js b/tez-ui2/src/main/webapp/app/controllers/app/dags.js index b3e855a..6510e93 100644 --- a/tez-ui2/src/main/webapp/app/controllers/app/dags.js +++ b/tez-ui2/src/main/webapp/app/controllers/app/dags.js @@ -83,9 +83,9 @@ export default MultiTableController.extend({ headerTitle: 'Queue', contentPath: 'queue' },{ - id: 'contextID', + id: 'callerID', headerTitle: 'Context ID', - contentPath: 'contextID' + contentPath: 'callerID' },{ id: 'logs', headerTitle: 'Logs', http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/controllers/dags.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/controllers/dags.js b/tez-ui2/src/main/webapp/app/controllers/dags.js index 021a1e0..1a760d1 100644 --- a/tez-ui2/src/main/webapp/app/controllers/dags.js +++ b/tez-ui2/src/main/webapp/app/controllers/dags.js @@ -24,27 +24,27 @@ import TableDefinition from 'em-table/utils/table-definition'; export default TableController.extend({ - queryParams: ["dagName", "dagID", "submitter", "status", "appID", "contextID", "pageNo"], + queryParams: ["dagName", "dagID", "submitter", "status", "appID", "callerID", "pageNo"], dagName: "", dagID: "", submitter: "", status: "", appID: "", - contextID: "", + callerID: "", pageNo: 1, breadcrumbs: [], headerComponentNames: ['dags-page-search', 'table-controls', 'dags-pagination-ui'], - definition: Ember.computed("dagName", "dagID", "submitter", "status", "appID", "contextID", "pageNo", function () { + definition: Ember.computed("dagName", "dagID", "submitter", "status", "appID", "callerID", "pageNo", function () { return TableDefinition.create({ dagName: this.get("dagName"), dagID: this.get("dagID"), submitter: this.get("submitter"), status: this.get("status"), appID: this.get("appID"), - contextID: this.get("contextID"), + callerID: this.get("callerID"), pageNum: this.get("pageNo"), rowCountOptions: [5, 10, 25, 50, 100, 250, 500] @@ -121,9 +121,13 @@ export default TableController.extend({ headerTitle: 'Queue', contentPath: 'queue' },{ - id: 'contextID', - headerTitle: 'Context ID', - contentPath: 'contextID' + id: 'callerID', + headerTitle: 'Caller ID', + contentPath: 'callerID' + },{ + id: 'callerType', + headerTitle: 'Caller Type', + contentPath: 'callerType' },{ id: 'logs', headerTitle: 'Logs', http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/models/dag.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/models/dag.js b/tez-ui2/src/main/webapp/app/models/dag.js index 4c4cd96..7114a7c 100644 --- a/tez-ui2/src/main/webapp/app/models/dag.js +++ b/tez-ui2/src/main/webapp/app/models/dag.js @@ -44,7 +44,6 @@ export default AMTimelineModel.extend({ name: DS.attr("string"), submitter: DS.attr("string"), - contextID: DS.attr("string"), // Serialize when required vertices: DS.attr('object'), @@ -58,4 +57,9 @@ export default AMTimelineModel.extend({ }), vertexIdNameMap: DS.attr("object"), + + callerID: DS.attr("string"), + callerType: DS.attr("string"), + callerInfo: DS.attr("string"), + }); http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/routes/dags.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/routes/dags.js b/tez-ui2/src/main/webapp/app/routes/dags.js index 45fd25d..4902460 100644 --- a/tez-ui2/src/main/webapp/app/routes/dags.js +++ b/tez-ui2/src/main/webapp/app/routes/dags.js @@ -31,7 +31,7 @@ export default AbstractRoute.extend({ submitter: REFRESH, status: REFRESH, appID: REFRESH, - contextID: REFRESH, + callerID: REFRESH, pageNo: REFRESH, rowCount: REFRESH, @@ -43,7 +43,7 @@ export default AbstractRoute.extend({ user: "submitter", status: "status", appID: "appID", - contextID: "contextID", + callerID: "callerID", pageNo: "pageNo", limit: "rowCount", @@ -62,7 +62,7 @@ export default AbstractRoute.extend({ submitter: query.submitter, status: query.status, appID: query.appID, - contextID: query.contextID + callerID: query.callerID }; return records.filter(function (record) { @@ -90,7 +90,13 @@ export default AbstractRoute.extend({ } return loader.then(function (records) { - return that.filterRecords(records, query); + records = that.filterRecords(records, query); + records.forEach(function (record) { + if(record.get("status") === "RUNNING") { + that.get("loader").loadNeed(record, "am", {reload: true}); + } + }); + return records; }); }, http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/serializers/dag.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/serializers/dag.js b/tez-ui2/src/main/webapp/app/serializers/dag.js index f7d2f21..b5cc42c 100644 --- a/tez-ui2/src/main/webapp/app/serializers/dag.js +++ b/tez-ui2/src/main/webapp/app/serializers/dag.js @@ -107,7 +107,6 @@ export default TimelineSerializer.extend({ name: 'primaryfilters.dagName.0', submitter: 'primaryfilters.user.0', - contextID: 'primaryfilters.callerId.0', atsStatus: getStatus, // progress @@ -125,6 +124,28 @@ export default TimelineSerializer.extend({ // queue containerLogs: getContainerLogs, - vertexIdNameMap: getIdNameMap - } + vertexIdNameMap: getIdNameMap, + + callerID: 'primaryfilters.callerId.0', + callerType: 'callerType', + callerInfo: 'callerInfo', + }, + + extractAttributes: function (modelClass, resourceHash) { + var data = resourceHash.data, + dagInfo = Ember.get(resourceHash, "data.otherinfo.dagPlan.dagInfo"); + + if(dagInfo) { + let infoObj = {}; + try{ + infoObj = JSON.parse(dagInfo); + }catch(e){} + + data.callerType = Ember.get(infoObj, "context"); + data.callerInfo = Ember.get(infoObj, "description") || Ember.get(dagInfo, "blob") || dagInfo; + } + + return this._super(modelClass, resourceHash); + }, + }); http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/templates/components/caller-info.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/caller-info.hbs b/tez-ui2/src/main/webapp/app/templates/components/caller-info.hbs new file mode 100644 index 0000000..72a52db --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/components/caller-info.hbs @@ -0,0 +1,24 @@ +{{! + * 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. +}} + +<div class="panel panel-info"> + <div class="panel-heading"> + Additional Info from {{type}} + </div> + <textarea></textarea> +</div> http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/templates/components/dags-page-search.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/dags-page-search.hbs b/tez-ui2/src/main/webapp/app/templates/components/dags-page-search.hbs index 0c118e4..94015dc 100644 --- a/tez-ui2/src/main/webapp/app/templates/components/dags-page-search.hbs +++ b/tez-ui2/src/main/webapp/app/templates/components/dags-page-search.hbs @@ -63,12 +63,12 @@ value={{tableDefinition.appID}} onchange={{action "appIDChanged" value="target.value"}}> </div><div class="search-element"> - <label for="pwd">Context ID:</label> + <label for="pwd">Caller ID:</label> <input type="text" class="form-control input-sm" placeholder="Search..." - value={{tableDefinition.contextID}} - onchange={{action "contextIDChanged" value="target.value"}}> + value={{tableDefinition.callerID}} + onchange={{action "callerIDChanged" value="target.value"}}> </div> </div> http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/app/templates/dag/index.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/dag/index.hbs b/tez-ui2/src/main/webapp/app/templates/dag/index.hbs index 59bb6a9..7ea00c5 100644 --- a/tez-ui2/src/main/webapp/app/templates/dag/index.hbs +++ b/tez-ui2/src/main/webapp/app/templates/dag/index.hbs @@ -74,6 +74,10 @@ </tbody> </table> + {{#if model.callerInfo}} + {{caller-info type=model.callerType info=model.callerInfo}} + {{/if}} + {{outlet}} {{else}} http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/bower.json ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/bower.json b/tez-ui2/src/main/webapp/bower.json index 8d23c02..f0fec1a 100644 --- a/tez-ui2/src/main/webapp/bower.json +++ b/tez-ui2/src/main/webapp/bower.json @@ -20,6 +20,7 @@ "snippet-ss": "~1.11.0", "jquery-mousewheel": "~3.1.13", "FileSaver": "#230de7d", - "zip.js": "#1bead0a" + "zip.js": "#1bead0a", + "codemirror": "~5.11.0" } } http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/ember-cli-build.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/ember-cli-build.js b/tez-ui2/src/main/webapp/ember-cli-build.js index 24c24fb..6068ee4 100644 --- a/tez-ui2/src/main/webapp/ember-cli-build.js +++ b/tez-ui2/src/main/webapp/ember-cli-build.js @@ -52,5 +52,10 @@ module.exports = function(defaults) { app.import('bower_components/FileSaver/FileSaver.js'); app.import('bower_components/zip.js/WebContent/zip.js'); + app.import('bower_components/codemirror/lib/codemirror.js'); + app.import('bower_components/codemirror/mode/sql/sql.js'); + app.import('bower_components/codemirror/mode/pig/pig.js'); + app.import('bower_components/codemirror/lib/codemirror.css'); + return app.toTree(new MergeTrees([configEnv, zipWorker])); }; http://git-wip-us.apache.org/repos/asf/tez/blob/94599693/tez-ui2/src/main/webapp/tests/integration/components/caller-info-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/integration/components/caller-info-test.js b/tez-ui2/src/main/webapp/tests/integration/components/caller-info-test.js new file mode 100644 index 0000000..20f787c --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/integration/components/caller-info-test.js @@ -0,0 +1,42 @@ +/** + * 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. + */ + +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('caller-info', 'Integration | Component | caller info', { + integration: true +}); + +test('Basic creation test', function(assert) { + var testType = "Typ", + heading = "Additional Info from " + testType; + + this.set("type", testType); + + this.render(hbs`{{caller-info type=type}}`); + assert.equal(this.$(".panel-heading").text().trim(), heading); + + // Template block usage:" + EOL + + this.render(hbs` + {{#caller-info type=type}} + template block text + {{/caller-info}} + `); + assert.equal(this.$(".panel-heading").text().trim(), heading); +});