Repository: tez Updated Branches: refs/heads/master 42b61f43f -> 8e969abf9
TEZ-3160. Tez UI 2: Swimlane - Create swimlane page & component (sree) Project: http://git-wip-us.apache.org/repos/asf/tez/repo Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/8e969abf Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/8e969abf Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/8e969abf Branch: refs/heads/master Commit: 8e969abf90274ecb03b304c91b6ff13cf547619d Parents: 42b61f4 Author: Sreenath Somarajapuram <[email protected]> Authored: Thu Mar 17 20:48:20 2016 +0530 Committer: Sreenath Somarajapuram <[email protected]> Committed: Thu Mar 17 20:48:20 2016 +0530 ---------------------------------------------------------------------- CHANGES.txt | 1 + .../webapp/app/components/em-swimlane-event.js | 33 ++++++ .../app/components/em-swimlane-process-name.js | 28 +++++ .../components/em-swimlane-process-visual.js | 81 ++++++++++++++ .../main/webapp/app/components/em-swimlane.js | 37 +++++++ tez-ui2/src/main/webapp/app/controllers/dag.js | 3 + .../main/webapp/app/controllers/dag/swimlane.js | 43 ++++++++ tez-ui2/src/main/webapp/app/models/timeline.js | 2 + tez-ui2/src/main/webapp/app/router.js | 4 +- .../src/main/webapp/app/routes/dag/swimlane.js | 37 +++++++ .../src/main/webapp/app/serializers/timeline.js | 2 + tez-ui2/src/main/webapp/app/styles/app.less | 2 + .../src/main/webapp/app/styles/em-swimlane.less | 109 +++++++++++++++++++ .../main/webapp/app/styles/swimlane-page.less | 71 ++++++++++++ .../templates/components/em-swimlane-event.hbs | 20 ++++ .../components/em-swimlane-process-name.hbs | 19 ++++ .../components/em-swimlane-process-visual.hbs | 27 +++++ .../app/templates/components/em-swimlane.hbs | 33 ++++++ .../main/webapp/app/templates/dag/swimlane.hbs | 35 ++++++ .../main/webapp/app/utils/process-definition.js | 21 ++++ .../components/em-swimlane-event-test.js | 53 +++++++++ .../components/em-swimlane-process-name-test.js | 45 ++++++++ .../em-swimlane-process-visual-test.js | 69 ++++++++++++ .../integration/components/em-swimlane-test.js | 50 +++++++++ .../tests/unit/controllers/dag/swimlane-test.js | 41 +++++++ .../tests/unit/routes/dag/swimlane-test.js | 46 ++++++++ .../tests/unit/utils/process-definition-test.js | 29 +++++ 27 files changed, 940 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index c45ce37..78228c4 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -1880,6 +1880,7 @@ ALL CHANGES TEZ-648. Fix Notice file. (hitesh) TEZ-642. Fix poms for release. (hitesh) TEZ-643. Change getProgress APIs to return some form of progress and 1.0f once the map or reduce phase complete. (sseth) + TEZ-3160. Tez UI 2: Swimlane - Create swimlane page & component (sree) Release 0.2.0-incubating: 2013-11-30 http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js new file mode 100644 index 0000000..a292085 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js @@ -0,0 +1,33 @@ +/** + * 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 Ember from 'ember'; + +export default Ember.Component.extend({ + + title: null, + position: 0, + time: 0, + + classNames: ["em-swimlane-event"], + + didInsertElement: Ember.observer("position", function () { + this.$().css("left", this.get("position") + "%"); + }) + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/components/em-swimlane-process-name.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-process-name.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-name.js new file mode 100644 index 0000000..f2b7ca9 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-name.js @@ -0,0 +1,28 @@ +/** + * 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 Ember from 'ember'; + +export default Ember.Component.extend({ + + process: null, + definition: null, + + classNames: ["em-swimlane-process-name"], + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/components/em-swimlane-process-visual.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-process-visual.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-visual.js new file mode 100644 index 0000000..b21eadb --- /dev/null +++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-visual.js @@ -0,0 +1,81 @@ +/** + * 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 Ember from 'ember'; + +export default Ember.Component.extend({ + process: null, + definition: null, + + startTime: 0, + endTime: 0, + timeWindow: 0, + + events: [], + startEvent: null, + endEvent: null, + + classNames: ["em-swimlane-process-visual"], + + didInsertElement: function () { + Ember.run.later(this, "normalizeEvents"); + }, + + normalizeEvents: Ember.observer("[email protected]", "startTime", "timeWindow", function () { + var events = Ember.get(this.get("process"), "events") || [], + startEvent, + endEvent, + + startTime = this.get("startTime"), + timeWindow = this.get("timeWindow"); + + events = events.map(function (event) { + var position = ((event.timestamp - startTime) / timeWindow) * 100; + + event = { + name: event.name, + text: event.text || event.name, + pos: position, + time: event.time + }; + + if(!startEvent || startEvent.pos > position) { + startEvent = event; + } + if(!endEvent || endEvent.pos < position) { + endEvent = event; + } + + return event; + }); + + this.setProperties({ + events: events, + startEvent: startEvent, + endEvent: endEvent + }); + }), + + drawEventWindow: Ember.observer("startEvent.pos", "endEvent.pos", function () { + this.$(".event-window-line").css({ + left: this.get("startEvent.pos") + "%", + right: (100 - this.get("endEvent.pos")) + "%", + }); + }) + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/components/em-swimlane.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane.js b/tez-ui2/src/main/webapp/app/components/em-swimlane.js new file mode 100644 index 0000000..93a2cff --- /dev/null +++ b/tez-ui2/src/main/webapp/app/components/em-swimlane.js @@ -0,0 +1,37 @@ +/** + * 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 Ember from 'ember'; + +import ProcessDefinition from '../utils/process-definition'; + +export default Ember.Component.extend({ + + classNames: ["em-swimlane"], + + processes: [], + processDefinition: ProcessDefinition.create(), + + startTime: null, + endTime: null, + + timeWindow: Ember.computed("startTime", "endTime", function () { + return Math.max(0, this.get("endTime") - this.get("startTime")); + }) + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/controllers/dag.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/controllers/dag.js b/tez-ui2/src/main/webapp/app/controllers/dag.js index 2ef4fac..46200b8 100644 --- a/tez-ui2/src/main/webapp/app/controllers/dag.js +++ b/tez-ui2/src/main/webapp/app/controllers/dag.js @@ -49,5 +49,8 @@ export default ParentController.extend({ }, { text: "All Task Attempts", routeName: "dag.attempts" + }, { + text: "Vertex Swimlane", + routeName: "dag.swimlane" }] }); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/controllers/dag/swimlane.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/controllers/dag/swimlane.js b/tez-ui2/src/main/webapp/app/controllers/dag/swimlane.js new file mode 100644 index 0000000..1028a2c --- /dev/null +++ b/tez-ui2/src/main/webapp/app/controllers/dag/swimlane.js @@ -0,0 +1,43 @@ +/** + * 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 Ember from 'ember'; + +import MultiTableController from '../multi-table'; +import ColumnDefinition from 'em-table/utils/column-definition'; + +import fullscreen from 'em-tgraph/utils/fullscreen'; + +export default MultiTableController.extend({ + breadcrumbs: [{ + text: "Vertex Swimlane", + routeName: "dag.swimlane", + }], + + columns: ColumnDefinition.make([]), + + actions: { + toggleFullscreen: function () { + var swimlaneElement = Ember.$(".swimlane-page")[0]; + if(swimlaneElement){ + fullscreen.toggle(swimlaneElement); + } + } + }, + +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/models/timeline.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/models/timeline.js b/tez-ui2/src/main/webapp/app/models/timeline.js index a739ec4..a0b83e2 100644 --- a/tez-ui2/src/main/webapp/app/models/timeline.js +++ b/tez-ui2/src/main/webapp/app/models/timeline.js @@ -86,4 +86,6 @@ export default AbstractModel.extend({ diagnostics: DS.attr('string'), + events: DS.attr('object'), + }); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/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 4196675..98a456a 100644 --- a/tez-ui2/src/main/webapp/app/router.js +++ b/tez-ui2/src/main/webapp/app/router.js @@ -32,6 +32,7 @@ Router.map(function() { this.route('counters'); this.route('index', {path: '/'}, function() {}); this.route('graphical'); + this.route('swimlane'); }); this.route('vertex', {path: '/vertex/:vertex_id'}, function() { this.route('tasks'); @@ -45,7 +46,8 @@ 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 + // Alias for backward compatibility with Tez UI V1 + this.route('app', {path: '/tez-app/:app_id'}, function () {}); this.route('app', {path: '/app/:app_id'}, function () { this.route('dags'); this.route('configs'); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/routes/dag/swimlane.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/routes/dag/swimlane.js b/tez-ui2/src/main/webapp/app/routes/dag/swimlane.js new file mode 100644 index 0000000..f8010f3 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/routes/dag/swimlane.js @@ -0,0 +1,37 @@ +/** + * 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 Ember from 'ember'; +import MultiAmPollsterRoute from '../multi-am-pollster'; + +export default MultiAmPollsterRoute.extend({ + title: "Vertex Swimlane", + + loaderNamespace: "dag", + + setupController: function (controller, model) { + this._super(controller, model); + Ember.run.later(this, "startCrumbBubble"); + }, + + load: function (value, query, options) { + return this.get("loader").query('vertex', { + dagID: this.modelFor("dag").get("id") + }, options); + } +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/serializers/timeline.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/serializers/timeline.js b/tez-ui2/src/main/webapp/app/serializers/timeline.js index c258c64..ba5614e 100644 --- a/tez-ui2/src/main/webapp/app/serializers/timeline.js +++ b/tez-ui2/src/main/webapp/app/serializers/timeline.js @@ -47,6 +47,8 @@ export default LoaderSerializer.extend({ diagnostics: getDiagnostics, + events: 'events', + _counterGroups: 'otherinfo.counters.counterGroups' } }); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/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 88dc47a..0202486 100644 --- a/tez-ui2/src/main/webapp/app/styles/app.less +++ b/tez-ui2/src/main/webapp/app/styles/app.less @@ -29,6 +29,7 @@ @import "error-bar"; @import "caller-info"; @import "date-formatter"; +@import "em-swimlane"; // Modals @import "column-selector"; @@ -37,3 +38,4 @@ // Pages @import "page-layout"; @import "details-page"; +@import "swimlane-page"; http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/styles/em-swimlane.less ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/styles/em-swimlane.less b/tez-ui2/src/main/webapp/app/styles/em-swimlane.less new file mode 100644 index 0000000..5087e8f --- /dev/null +++ b/tez-ui2/src/main/webapp/app/styles/em-swimlane.less @@ -0,0 +1,109 @@ +/** + * 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. + */ + +@process-height: 30px; + +.em-swimlane { + position: relative; + + margin: 5px 0px 5px 0px; + + .process-names { + width: 100px; + } + .process-visuals { + position: absolute; + left: 100px; + right: 0px; + top: 0px; + + border-left: 1px solid @border-color; + } +} + +.em-swimlane-process-name { + text-align: right; + padding-right: 5px; + padding-top: 5px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + height: 30px; +} + +.em-swimlane-process-visual { + position: relative; + height: 30px; + + cursor: pointer; + + .base-line { + position: relative; + height: 1px; + top: unit(unit(@process-height) * 0.5, get-unit(@process-height)); + border-top: 1px dotted @border-color; + } + + .event-window-line { + position: absolute; + top: unit(unit(@process-height) * 0.5, get-unit(@process-height)); + border-top: 1px solid; + height: 1px; + } +} + +.em-swimlane-event { + position: absolute; + top: unit(unit(@process-height) * 0.5, get-unit(@process-height)); + + .event-bar { + position: absolute; + top: -10px; + height: 20px; + border-left: 1px solid; + } + + .event-bubble { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + -webkit-transition: top .2s, right .2s, bottom .2s, left .2s; /* Safari */ + transition: top .2s, right .2s, bottom .2s, left .2s; + transition-timing-function: cubic-bezier(.87,-.41,.19,1.44); + + border-radius: 5px; + + background-color: black; + } +} + +.em-swimlane-process-visual { + &:hover { + .event-bubble { + top: -5px; + right: -6px; + bottom: -6px; + left: -5px; + } + } +} http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/styles/swimlane-page.less ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/styles/swimlane-page.less b/tez-ui2/src/main/webapp/app/styles/swimlane-page.less new file mode 100644 index 0000000..e31371f --- /dev/null +++ b/tez-ui2/src/main/webapp/app/styles/swimlane-page.less @@ -0,0 +1,71 @@ +/** + * 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. + */ + +.swimlane-page { + .button-panel { + .no-select; + + text-align: right; + + height: 30px; + + .fa { + font-size: 20px; + + border-radius: 5px; + + cursor: pointer; + + border-color: @border-lite; + background-color: @bg-lite; + + &:hover { + color: @bg-lite; + background-color: @text-color; + } + } + } + + .fa-compress { + display: none; + } + + .fullscreen { + height: 100%; + width: 100%; + + padding: 10px; + + .fa-compress { + display: inline-block; + } + .fa-expand { + .no-display; + } + } + + &:-webkit-full-screen { + .fullscreen; + } + &:fullscreen { + .fullscreen; + } + &:-moz-full-screen { + .fullscreen; + } +} http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-event.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-event.hbs b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-event.hbs new file mode 100644 index 0000000..0211466 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-event.hbs @@ -0,0 +1,20 @@ +{{! + * 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="event-bar"></div> +<div class="event-bubble"></div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-name.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-name.hbs b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-name.hbs new file mode 100644 index 0000000..98ef757 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-name.hbs @@ -0,0 +1,19 @@ +{{! + * 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. +}} + +{{process.name}} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-visual.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-visual.hbs b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-visual.hbs new file mode 100644 index 0000000..6a3a7b9 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-process-visual.hbs @@ -0,0 +1,27 @@ +{{! + * 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="base-line"></div> +{{#each events as |event|}} + {{em-swimlane-event + title=event.text + position=event.pos + time=event.time + }} +{{/each}} +<div class="event-window-line"></div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/templates/components/em-swimlane.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane.hbs b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane.hbs new file mode 100644 index 0000000..a9ab876 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane.hbs @@ -0,0 +1,33 @@ +{{! + * 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="process-names"> + {{#each processes as |process|}} + {{em-swimlane-process-name process=process definition=processDefinition}} + {{/each}} +</div><div class="process-visuals"> + {{#each processes as |process|}} + {{em-swimlane-process-visual + process=process + definition=processDefinition + startTime=startTime + endTime=endTime + timeWindow=timeWindow + }} + {{/each}} +</div> http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/templates/dag/swimlane.hbs ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/templates/dag/swimlane.hbs b/tez-ui2/src/main/webapp/app/templates/dag/swimlane.hbs new file mode 100644 index 0000000..adb8586 --- /dev/null +++ b/tez-ui2/src/main/webapp/app/templates/dag/swimlane.hbs @@ -0,0 +1,35 @@ +{{! + * 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. +}} + +{{#if loaded}} + <div class="swimlane-page"> + <div class="button-panel"> + <i class='fa fa-expand fa-border' {{action 'toggleFullscreen'}} title="Toggle fullscreen"></i> + <i class='fa fa-compress fa-border' {{action 'toggleFullscreen'}} title="Toggle fullscreen"></i> + </div> + + {{em-swimlane + columns=visibleColumns + processes=model + startTime=model.firstObject.dag.startTime + endTime=model.firstObject.dag.endTime + }} + </div> +{{else}} + {{partial "loading"}} +{{/if}} http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/app/utils/process-definition.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/app/utils/process-definition.js b/tez-ui2/src/main/webapp/app/utils/process-definition.js new file mode 100644 index 0000000..d86119e --- /dev/null +++ b/tez-ui2/src/main/webapp/app/utils/process-definition.js @@ -0,0 +1,21 @@ +/** + * 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 Ember from 'ember'; + +export default Ember.Object.extend({ +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-event-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-event-test.js b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-event-test.js new file mode 100644 index 0000000..9e9764e --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-event-test.js @@ -0,0 +1,53 @@ +/** + * 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'; + +import wait from 'ember-test-helpers/wait'; + +moduleForComponent('em-swimlane-event', 'Integration | Component | em swimlane event', { + integration: true +}); + +test('Basic creation test', function(assert) { + + this.render(hbs`{{em-swimlane-event}}`); + + assert.ok(this.$(".event-bar")); + assert.ok(this.$(".event-window")); + + // Template block usage:" + EOL + + this.render(hbs` + {{#em-swimlane-event}} + template block text + {{/em-swimlane-event}} + `); + + assert.ok(this.$(".event-bar")); + assert.ok(this.$(".event-window")); +}); + +test('Event position test', function(assert) { + + this.render(hbs`{{em-swimlane-event position=60}}`); + + return wait().then(() => { + assert.equal(this.$(".em-swimlane-event").attr("style").trim(), "left: 60%;", "em-swimlane-event"); + }); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-name-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-name-test.js b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-name-test.js new file mode 100644 index 0000000..8117529 --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-name-test.js @@ -0,0 +1,45 @@ +/** + * 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('em-swimlane-process-name', 'Integration | Component | em swimlane process name', { + integration: true +}); + +test('Basic creation test', function(assert) { + var testName = "TestName"; + + this.set("process", { + name: testName + }); + + this.render(hbs`{{em-swimlane-process-name process=process}}`); + + assert.equal(this.$().text().trim(), testName); + + // Template block usage:" + EOL + + this.render(hbs` + {{#em-swimlane-process-name process=process}} + template block text + {{/em-swimlane-process-name}} + `); + + assert.equal(this.$().text().trim(), testName); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-visual-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-visual-test.js b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-visual-test.js new file mode 100644 index 0000000..5a180bb --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-process-visual-test.js @@ -0,0 +1,69 @@ +/** + * 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'; + +import wait from 'ember-test-helpers/wait'; + +moduleForComponent('em-swimlane-process-visual', 'Integration | Component | em swimlane process visual', { + integration: true +}); + +test('Basic creation test', function(assert) { + this.set("process", { + events: [] + }); + + this.render(hbs`{{em-swimlane-process-visual process=process}}`); + + assert.ok(this.$(".base-line")); + assert.ok(this.$(".event-window")); + + // Template block usage:" + EOL + + this.render(hbs` + {{#em-swimlane-process-visual process=process}} + template block text + {{/em-swimlane-process-visual}} + `); + + assert.ok(this.$(".base-line")); + assert.ok(this.$(".event-window")); +}); + +test('Events test', function(assert) { + this.set("process", { + events: [{ + timestamp: 5 + }, { + timestamp: 7 + }] + }); + + this.render(hbs`{{em-swimlane-process-visual process=process startTime=0 timeWindow=10}}`); + + return wait().then(() => { + var events = this.$(".em-swimlane-event"); + + assert.equal(events.length, 2); + assert.equal(events.eq(0).attr("style").trim(), "left: 50%;", "em-swimlane-event 1 left"); + assert.equal(events.eq(1).attr("style").trim(), "left: 70%;", "em-swimlane-event 2 left"); + + assert.equal(this.$(".event-window-line").eq(0).attr("style").trim(), "left: 50%; right: 30%;", "event-window-line"); + }); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-test.js b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-test.js new file mode 100644 index 0000000..1e4c938 --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-test.js @@ -0,0 +1,50 @@ +/** + * 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('em-swimlane', 'Integration | Component | em swimlane', { + integration: true +}); + +test('Basic creation test', function(assert) { + var testName1 = "TestName1", + testName2 = "TestName2"; + + this.set("processes", [{ + name: testName1 + }, { + name: testName2 + }]); + + this.render(hbs`{{em-swimlane processes=processes}}`); + + assert.equal(this.$().text().trim().indexOf(testName1), 0); + assert.notEqual(this.$().text().trim().indexOf(testName2), -1); + + // Template block usage:" + EOL + + this.render(hbs` + {{#em-swimlane processes=processes}} + template block text + {{/em-swimlane}} + `); + + assert.equal(this.$().text().trim().indexOf(testName1), 0); + assert.notEqual(this.$().text().trim().indexOf(testName2), -1); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/unit/controllers/dag/swimlane-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/unit/controllers/dag/swimlane-test.js b/tez-ui2/src/main/webapp/tests/unit/controllers/dag/swimlane-test.js new file mode 100644 index 0000000..7886251 --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/unit/controllers/dag/swimlane-test.js @@ -0,0 +1,41 @@ +/** + * 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 Ember from 'ember'; + +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:dag/swimlane', 'Unit | Controller | dag/swimlane', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +test('Basic creation test', function(assert) { + let controller = this.subject({ + send: Ember.K, + beforeSort: {bind: Ember.K}, + initVisibleColumns: Ember.K, + getCounterColumns: function () { + return []; + } + }); + + assert.ok(controller); + assert.ok(controller.breadcrumbs); + assert.ok(controller.columns); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/unit/routes/dag/swimlane-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/unit/routes/dag/swimlane-test.js b/tez-ui2/src/main/webapp/tests/unit/routes/dag/swimlane-test.js new file mode 100644 index 0000000..8d0197f --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/unit/routes/dag/swimlane-test.js @@ -0,0 +1,46 @@ +/** + * 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 { moduleFor, test } from 'ember-qunit'; + +moduleFor('route:dag/swimlane', 'Unit | Route | dag/swimlane', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +test('Basic creation test', function(assert) { + let route = this.subject(); + + assert.ok(route); + assert.ok(route.title); + assert.ok(route.loaderNamespace); + assert.ok(route.setupController); + assert.ok(route.load); +}); + +test('setupController test', function(assert) { + assert.expect(1); + + let route = this.subject({ + startCrumbBubble: function () { + assert.ok(true); + } + }); + + route.setupController({}, {}); +}); http://git-wip-us.apache.org/repos/asf/tez/blob/8e969abf/tez-ui2/src/main/webapp/tests/unit/utils/process-definition-test.js ---------------------------------------------------------------------- diff --git a/tez-ui2/src/main/webapp/tests/unit/utils/process-definition-test.js b/tez-ui2/src/main/webapp/tests/unit/utils/process-definition-test.js new file mode 100644 index 0000000..44e952e --- /dev/null +++ b/tez-ui2/src/main/webapp/tests/unit/utils/process-definition-test.js @@ -0,0 +1,29 @@ +/** + * 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 ProcessDefinition from '../../../utils/process-definition'; +import { module, test } from 'qunit'; + +module('Unit | Utility | process definition'); + +test('Basic creation test', function(assert) { + let definition = ProcessDefinition.create(); + + assert.ok(definition); + +});
