From c904c2e41739b74edc14f73114c689d1ff30a527 Mon Sep 17 00:00:00 2001 From: Vasu Date: Tue, 5 Dec 2017 15:11:00 +0530 Subject: [PATCH 01/10] Filter queues by partition --- .../main/webapp/app/components/queue-navigator.js | 10 +++++-- .../main/webapp/app/components/tree-selector.js | 33 +++++++++++++++++----- .../webapp/app/models/yarn-queue/capacity-queue.js | 1 + .../app/serializers/yarn-queue/capacity-queue.js | 1 + .../app/templates/components/queue-navigator.hbs | 9 +++++- 5 files changed, 44 insertions(+), 10 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js index 4b741b886279..30c469157cfb 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js @@ -16,7 +16,13 @@ * limitations under the License. */ -import Ember from 'ember'; +import Ember from "ember"; export default Ember.Component.extend({ -}); \ No newline at end of file + actions: { + filterQueuesByPartition(filter) { + this.set('filteredPartition', filter); + this.set('selected', this.model.get('firstObject').get('id')); + } + } +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js index 4645a481406f..f45115c88f77 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js @@ -42,6 +42,11 @@ export default Ember.Component.extend({ used: undefined, max: undefined, + didUpdateAttrs: function({oldAttrs, newAttrs}) { + if (oldAttrs.filteredPartition.value !== newAttrs.filteredPartition.value) { + this.reDraw(); + } + }, // Init data initData: function() { this.map = { }; @@ -83,7 +88,7 @@ export default Ember.Component.extend({ initQueue: function(queueName, depth, node) { if ((!queueName) || (!this.map[queueName])) { // Queue is not existed - return; + return false; } if (depth > this.maxDepth) { this.maxDepth = this.maxDepth + 1; @@ -91,6 +96,10 @@ export default Ember.Component.extend({ var queue = this.map[queueName]; + if (this.filteredPartition && !queue.get('partitions').contains(this.filteredPartition)) { + return false; + } + var names = this.getChildrenNamesArray(queue); node.name = queueName; @@ -103,11 +112,17 @@ export default Ember.Component.extend({ names.forEach(function(name) { var childQueueData = {}; node.children.push(childQueueData); - this.initQueue(name, depth + 1, childQueueData); + const status = this.initQueue(name, depth + 1, childQueueData); + if (!status) { + node.children.pop(); + } + }.bind(this)); } else { this.numOfLeafQueue = this.numOfLeafQueue + 1; } + + return true; }, update: function(source, root, tree, diagonal) { @@ -274,13 +289,17 @@ export default Ember.Component.extend({ var height = treeHeight + margin.top + margin.bottom; if (this.mainSvg) { - this.mainSvg.remove(); + this.mainSvg.selectAll("*").remove(); + } else { + this.mainSvg = d3 + .select("#" + this.get("parentId")) + .append("svg") + .attr("width", width) + .attr("height", height) + .attr("class", "tree-selector"); } - this.mainSvg = d3.select("#" + this.get("parentId")).append("svg") - .attr("width", width) - .attr("height", height) - .attr("class", "tree-selector") + this.mainSvg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js index f892c2baf0da..9438aa4f4339 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js @@ -24,6 +24,7 @@ export default DS.Model.extend({ children: DS.attr('array'), parent: DS.attr('string'), capacity: DS.attr('number'), + partitions: DS.attr('array'), maxCapacity: DS.attr('number'), usedCapacity: DS.attr('number'), absCapacity: DS.attr('number'), diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js index 7626598e0921..4a024d0d6898 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js @@ -73,6 +73,7 @@ export default DS.JSONAPISerializer.extend({ numPendingApplications: payload.numPendingApplications, numActiveApplications: payload.numActiveApplications, resources: payload.resources, + partitions: payload.capacities.queueCapacitiesByPartition.map(cap => cap.partitionName || 'All queues'), type: "capacity", }, // Relationships diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs index e3b0a90ed74c..f0746be741d9 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs @@ -23,7 +23,14 @@
Scheduler: {{model.firstObject.type}}
- {{tree-selector model=model parentId="tree-selector-container" selected=selected used=used max=max}} + {{#if (eq model.firstObject.type "capacity")}} + + {{/if}} + {{tree-selector model=model parentId="tree-selector-container" selected=selected used=used max=max filteredPartition=filteredPartition}} From 26f7c982a4aff3bdb473347243a81f741f350f8d Mon Sep 17 00:00:00 2001 From: Vasu Date: Wed, 6 Dec 2017 11:24:50 +0530 Subject: [PATCH 02/10] Add label to the filter --- .../app/serializers/yarn-queue/capacity-queue.js | 2 +- .../src/main/webapp/app/styles/app.scss | 1 + .../src/main/webapp/app/styles/yarn-queues.scss | 29 ++++++++++++++++++++++ .../app/templates/components/queue-navigator.hbs | 19 +++++++++----- 4 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js index 4a024d0d6898..d836bdb0a560 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js @@ -73,7 +73,7 @@ export default DS.JSONAPISerializer.extend({ numPendingApplications: payload.numPendingApplications, numActiveApplications: payload.numActiveApplications, resources: payload.resources, - partitions: payload.capacities.queueCapacitiesByPartition.map(cap => cap.partitionName || 'All queues'), + partitions: payload.capacities.queueCapacitiesByPartition.map(cap => cap.partitionName || 'All partitions'), type: "capacity", }, // Relationships diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss index 87ee9a9391a5..32c3d46eee81 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss @@ -2,6 +2,7 @@ @import 'layout.scss'; @import 'yarn-app.scss'; @import './compose-box.scss'; +@import './yarn-queues.scss'; /** * Licensed to the Apache Software Foundation (ASF) under one diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss new file mode 100644 index 000000000000..0cb491a3825c --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss @@ -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. + */ + +.filter-partitions { + text-align: right; + + label { + font-weight: 500; + } + select { + display: inline-block; + max-width: 350px; + } +} diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs index f0746be741d9..75e7a451d2a2 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs @@ -21,14 +21,21 @@
- Scheduler: {{model.firstObject.type}} + {{#if filteredPartition}} + Scheduler: {{model.firstObject.type}} for partition {{lower filteredPartition}} + {{else}} + Scheduler: {{model.firstObject.type}} for all partitions + {{/if}}
{{#if (eq model.firstObject.type "capacity")}} - +
+ + +
{{/if}} {{tree-selector model=model parentId="tree-selector-container" selected=selected used=used max=max filteredPartition=filteredPartition}}
From 9abf3da64010396243d6c0ed32c4ca608753854d Mon Sep 17 00:00:00 2001 From: Vasu Date: Wed, 6 Dec 2017 11:28:05 +0530 Subject: [PATCH 03/10] if the selected queue does not have the filtered partition, reset the selection to root. --- .../src/main/webapp/app/components/queue-navigator.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js index 30c469157cfb..c3cecfab0dcb 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js @@ -22,7 +22,13 @@ export default Ember.Component.extend({ actions: { filterQueuesByPartition(filter) { this.set('filteredPartition', filter); - this.set('selected', this.model.get('firstObject').get('id')); + // if the selected queue does not have the filtered partition, reset the selection to root. + if (!(filter && this + .get("selected") + .get("partitions") + .contains(filter))) { + this.set("selected", this.model.get("firstObject").get("id")); + } } } }); From 47f9b52ec990f444ecf08b319dc0a9ec0a9bf5e9 Mon Sep 17 00:00:00 2001 From: Vasu Date: Wed, 6 Dec 2017 15:44:56 +0530 Subject: [PATCH 04/10] Pass the filtered partition to the controller --- .../main/webapp/app/components/queue-navigator.js | 10 ++-- .../src/main/webapp/app/constants.js | 4 +- .../src/main/webapp/app/controllers/yarn-queues.js | 27 +++++++--- .../webapp/app/models/yarn-queue/capacity-queue.js | 57 +++++++++++++--------- .../app/serializers/yarn-queue/capacity-queue.js | 7 ++- .../src/main/webapp/app/styles/yarn-queues.scss | 3 +- .../components/yarn-queue/capacity-queue.hbs | 2 +- .../src/main/webapp/app/templates/yarn-queues.hbs | 3 +- 8 files changed, 69 insertions(+), 44 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js index c3cecfab0dcb..309cce69db18 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js @@ -22,13 +22,9 @@ export default Ember.Component.extend({ actions: { filterQueuesByPartition(filter) { this.set('filteredPartition', filter); - // if the selected queue does not have the filtered partition, reset the selection to root. - if (!(filter && this - .get("selected") - .get("partitions") - .contains(filter))) { - this.set("selected", this.model.get("firstObject").get("id")); - } + this.sendAction('setFilter', filter); + + this.set("selected", this.model.get("firstObject").get("id")); } } }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/constants.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/constants.js index 29ad4bc2d939..ccb41b949b84 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/constants.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/constants.js @@ -34,4 +34,6 @@ export const Entities = { Memory:'memory', Resource: 'resource', Unit: 'unit' -} \ No newline at end of file +} + +export const PARTITION_LABEL = 'All partitions'; \ No newline at end of file diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js index 9658ded0ca28..aedab502f48e 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js @@ -17,19 +17,30 @@ */ import Ember from 'ember'; +import {PARTITION_LABEL} from '../constants'; export default Ember.Controller.extend({ needReload: true, selectedQueue: undefined, showLoading: true, + filteredPartition: PARTITION_LABEL, - breadcrumbs: [{ - text: "Home", - routeName: 'application' - }, { - text: "Queues", - routeName: 'yarn-queues', - model: 'root' - }] + breadcrumbs: [ + { + text: "Home", + routeName: "application" + }, + { + text: "Queues", + routeName: "yarn-queues", + model: "root" + } + ], + actions: { + setFilter(partition) { + console.log(partition); + this.set("filteredPartition", partition); + } + } }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js index 9438aa4f4339..c123989882cd 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js @@ -20,25 +20,26 @@ import DS from 'ember-data'; import Converter from 'yarn-ui/utils/converter'; export default DS.Model.extend({ - name: DS.attr('string'), - children: DS.attr('array'), - parent: DS.attr('string'), - capacity: DS.attr('number'), - partitions: DS.attr('array'), - maxCapacity: DS.attr('number'), - usedCapacity: DS.attr('number'), - absCapacity: DS.attr('number'), - absMaxCapacity: DS.attr('number'), - absUsedCapacity: DS.attr('number'), - state: DS.attr('string'), - userLimit: DS.attr('number'), - userLimitFactor: DS.attr('number'), - preemptionDisabled: DS.attr('number'), - numPendingApplications: DS.attr('number'), - numActiveApplications: DS.attr('number'), - users: DS.hasMany('YarnUser'), - type: DS.attr('string'), - resources: DS.attr('object'), + name: DS.attr("string"), + children: DS.attr("array"), + parent: DS.attr("string"), + capacity: DS.attr("number"), + partitions: DS.attr("array"), + partitionMap: DS.attr("object"), + maxCapacity: DS.attr("number"), + usedCapacity: DS.attr("number"), + absCapacity: DS.attr("number"), + absMaxCapacity: DS.attr("number"), + absUsedCapacity: DS.attr("number"), + state: DS.attr("string"), + userLimit: DS.attr("number"), + userLimitFactor: DS.attr("number"), + preemptionDisabled: DS.attr("number"), + numPendingApplications: DS.attr("number"), + numActiveApplications: DS.attr("number"), + users: DS.hasMany("YarnUser"), + type: DS.attr("string"), + resources: DS.attr("object"), isLeafQueue: function() { var len = this.get("children.length"); @@ -54,21 +55,29 @@ export default DS.Model.extend({ { label: "Absolute Used", style: "primary", - value: this.get("name") === "root" ? floatToFixed(this.get("usedCapacity")) : floatToFixed(this.get("absUsedCapacity")) + value: + this.get("name") === "root" + ? floatToFixed(this.get("usedCapacity")) + : floatToFixed(this.get("absUsedCapacity")) }, { label: "Absolute Capacity", style: "primary", - value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity")) + value: + this.get("name") === "root" + ? 100 + : floatToFixed(this.get("absCapacity")) }, { label: "Absolute Max Capacity", style: "secondary", - value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity")) + value: + this.get("name") === "root" + ? 100 + : floatToFixed(this.get("absMaxCapacity")) } ]; }.property("absCapacity", "usedCapacity", "absMaxCapacity"), - userUsagesDonutChartData: function() { var data = []; if (this.get("users")) { @@ -98,5 +107,5 @@ export default DS.Model.extend({ value: this.get("numActiveApplications") || 0 } ]; - }.property("numPendingApplications", "numActiveApplications"), + }.property("numPendingApplications", "numActiveApplications") }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js index d836bdb0a560..b171c6e5888b 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/capacity-queue.js @@ -17,6 +17,7 @@ */ import DS from 'ember-data'; +import {PARTITION_LABEL} from '../../constants'; export default DS.JSONAPISerializer.extend({ @@ -73,7 +74,11 @@ export default DS.JSONAPISerializer.extend({ numPendingApplications: payload.numPendingApplications, numActiveApplications: payload.numActiveApplications, resources: payload.resources, - partitions: payload.capacities.queueCapacitiesByPartition.map(cap => cap.partitionName || 'All partitions'), + partitions: payload.capacities.queueCapacitiesByPartition.map(cap => cap.partitionName || PARTITION_LABEL), + partitionMap: payload.capacities.queueCapacitiesByPartition.reduce((init, cap) => { + init[cap.partitionName || PARTITION_LABEL] = cap; + return init; + }, {}), type: "capacity", }, // Relationships diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss index 0cb491a3825c..5c5739555cd8 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss @@ -18,7 +18,8 @@ .filter-partitions { text-align: right; - + padding: 15px; + label { font-weight: 500; } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs index bb9a87ea07fa..ceea23a6e4dc 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs @@ -17,7 +17,7 @@ }} {{queue-navigator model=model.queues selected=model.selected - used="usedCapacity" max="absMaxCapacity"}} + used="usedCapacity" max="absMaxCapacity" setFilter=(action setFilter)}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs index b3165d53e2ec..ede29946f0cc 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs @@ -18,9 +18,10 @@
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
+
{{#if (eq model.queues.firstObject.type "capacity")}} - {{yarn-queue.capacity-queue model=model}} + {{yarn-queue.capacity-queue model=model setFilter=(action "setFilter") filteredPartition=filteredPartition}} {{else if (eq model.queues.firstObject.type "fair")}} {{yarn-queue.fair-queue model=model}} {{else}} From 2b6d721d9887b0129943a8bb4996266219da8c3d Mon Sep 17 00:00:00 2001 From: Vasu Date: Wed, 6 Dec 2017 16:26:32 +0530 Subject: [PATCH 05/10] Moves queue capacity details to a separate component --- .../yarn-queue-partition-capacity-labels.js | 20 ++++++++++++ .../yarn-queue-partition-capacity-labels.hbs | 36 ++++++++++++++++++++++ .../components/yarn-queue/capacity-queue.hbs | 32 ++----------------- .../yarn-queue-partition-capacity-labels-test.js | 25 +++++++++++++++ 4 files changed, 83 insertions(+), 30 deletions(-) create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js new file mode 100644 index 000000000000..ccf6c65d6db6 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js @@ -0,0 +1,20 @@ +import Ember from "ember"; +import { PARTITION_LABEL } from "../constants"; + +export default Ember.Component.extend({ + filteredCapacity: Ember.computed("content", function() { + const queue = this.get("queue"); + const partitionMap = this.get("partitionMap"); + const filteredParition = this.get("filteredParition") || PARTITION_LABEL; + const userLimit = queue.get("userLimit"); + const userLimitFactor = queue.get("userLimitFactor"); + const isLeafQueue = queue.get("isLeafQueue"); + + return { + ...partitionMap[filteredParition], + userLimit, + userLimitFactor, + isLeafQueue + }; + }) +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs new file mode 100644 index 000000000000..ac485d28f4d2 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs @@ -0,0 +1,36 @@ +
+ + absolute used + {{filteredCapacity.absoluteUsedCapacity}}% + + + absolute capacity + {{filteredCapacity.absoluteCapacity}}% + + + absolute max capacity + {{filteredCapacity.absoluteMaxCapacity}}% + +
+
+ + configured capacity + {{filteredCapacity.capacity}}% + + + configured max capacity + {{filteredCapacity.maxCapacity}}% + +
+{{#if filteredCapacity.isLeafQueue}} +
+ + user limit + {{filteredCapacity.userLimit}}% + + + user limit factor + {{filteredCapacity.userLimitFactor}} + +
+{{/if}} \ No newline at end of file diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs index ceea23a6e4dc..9ad2a6f1a5d0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs @@ -31,36 +31,8 @@ {{em-table-simple-status-cell content=model.selectedQueue.state}}
{{/if}} -
- {{#each model.selectedQueue.capacitiesBarChartData as |item|}} - - {{lower item.label}} - {{item.value}}% - - {{/each}} -
-
- - configured capacity - {{model.selectedQueue.capacity}}% - - - configured max capacity - {{model.selectedQueue.maxCapacity}}% - -
- {{#if model.selectedQueue.isLeafQueue}} -
- - user limit - {{model.selectedQueue.userLimit}}% - - - user limit factor - {{model.selectedQueue.userLimitFactor}} - -
- {{/if}} + + {{yarn-queue-partition-capacity-labels partitionMap=model.selectedQueue.partitionMap queue=model.selectedQueue filteredPartition=filteredPartition}}
Running Apps
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js new file mode 100644 index 000000000000..578988b731f4 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js @@ -0,0 +1,25 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('yarn-queue-partition-capacity-labels', 'Integration | Component | yarn queue partition capacity labels', { + integration: true +}); + +test('it renders', function(assert) { + + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL + + + this.render(hbs`{{yarn-queue-partition-capacity-labels}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage:" + EOL + + this.render(hbs` + {{#yarn-queue-partition-capacity-labels}} + template block text + {{/yarn-queue-partition-capacity-labels}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); From ef8db4c56e69f4e4754a883c78795990ec06cc23 Mon Sep 17 00:00:00 2001 From: Vasu Date: Thu, 7 Dec 2017 12:10:13 +0530 Subject: [PATCH 06/10] Recompute queue props when attributes change --- .../yarn-queue-partition-capacity-labels.js | 19 +++++++++++++++---- .../src/main/webapp/app/controllers/yarn-queues.js | 1 - .../yarn-queue-partition-capacity-labels.hbs | 16 ++++++++-------- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js index ccf6c65d6db6..3603fe3076b0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js @@ -2,19 +2,30 @@ import Ember from "ember"; import { PARTITION_LABEL } from "../constants"; export default Ember.Component.extend({ - filteredCapacity: Ember.computed("content", function() { + didUpdateAttrs: function({oldAttrs, newAttrs}) { + this._super(...arguments); + this.set('data', this.initData()); + }, + + init() { + this._super(...arguments); + this.set('data', this.initData()); + }, + + initData() { const queue = this.get("queue"); const partitionMap = this.get("partitionMap"); - const filteredParition = this.get("filteredParition") || PARTITION_LABEL; + const filteredParition = this.get("filteredPartition") || PARTITION_LABEL; const userLimit = queue.get("userLimit"); const userLimitFactor = queue.get("userLimitFactor"); const isLeafQueue = queue.get("isLeafQueue"); - + return { ...partitionMap[filteredParition], userLimit, userLimitFactor, isLeafQueue }; - }) + } + }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js index aedab502f48e..32353ddc1fcc 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js @@ -39,7 +39,6 @@ export default Ember.Controller.extend({ actions: { setFilter(partition) { - console.log(partition); this.set("filteredPartition", partition); } } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs index ac485d28f4d2..b00cbe58bc47 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs @@ -1,36 +1,36 @@
absolute used - {{filteredCapacity.absoluteUsedCapacity}}% + {{data.absoluteUsedCapacity}}% absolute capacity - {{filteredCapacity.absoluteCapacity}}% + {{data.absoluteCapacity}}% absolute max capacity - {{filteredCapacity.absoluteMaxCapacity}}% + {{data.absoluteMaxCapacity}}%
configured capacity - {{filteredCapacity.capacity}}% + {{data.capacity}}% configured max capacity - {{filteredCapacity.maxCapacity}}% + {{data.maxCapacity}}%
-{{#if filteredCapacity.isLeafQueue}} +{{#if data.isLeafQueue}}
user limit - {{filteredCapacity.userLimit}}% + {{data.userLimit}}% user limit factor - {{filteredCapacity.userLimitFactor}} + {{data.userLimitFactor}}
{{/if}} \ No newline at end of file From 0a15eeb4db42ed2a64e1800cd2c1a4441db38c69 Mon Sep 17 00:00:00 2001 From: Vasu Date: Thu, 7 Dec 2017 12:37:55 +0530 Subject: [PATCH 07/10] Reset filter to root if the selected queue does not have the partition --- .../src/main/webapp/app/components/queue-navigator.js | 2 -- .../src/main/webapp/app/controllers/yarn-queues.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js index 309cce69db18..af0c93702e36 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js @@ -23,8 +23,6 @@ export default Ember.Component.extend({ filterQueuesByPartition(filter) { this.set('filteredPartition', filter); this.sendAction('setFilter', filter); - - this.set("selected", this.model.get("firstObject").get("id")); } } }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js index 32353ddc1fcc..6cc87675b50c 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queues.js @@ -40,6 +40,16 @@ export default Ember.Controller.extend({ actions: { setFilter(partition) { this.set("filteredPartition", partition); + const model = this.get('model'); + const {selectedQueue} = model; + // If the selected queue does not have the filtered partition + // reset it to root + if (!selectedQueue.get('partitions').contains(partition)) { + const root = model.queues.get('firstObject'); + document.location.href = "#/yarn-queues/" + root.get("id") + "!"; + this.set("model.selectedQueue", root); + this.set("model.selected", root.get('id')); + } } } }); From 2089cf4319f9e4830649a2ce6496d093a01e6488 Mon Sep 17 00:00:00 2001 From: Vasu Date: Thu, 7 Dec 2017 14:16:04 +0530 Subject: [PATCH 08/10] Fix svg positon issue --- .../main/webapp/app/components/tree-selector.js | 280 ++++++++++++--------- .../app/templates/components/queue-navigator.hbs | 4 +- 2 files changed, 168 insertions(+), 116 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js index f45115c88f77..6a37c7da9d96 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js @@ -16,19 +16,19 @@ * limitations under the License. */ -import Ember from 'ember'; +import Ember from "ember"; const INBETWEEN_HEIGHT = 130; export default Ember.Component.extend({ // Map: - map : undefined, + map: undefined, // Normalized data for d3 treeData: undefined, // folded queues, folded[] == true means is folded - foldedQueues: { }, + foldedQueues: {}, // maxDepth maxDepth: 0, @@ -42,22 +42,23 @@ export default Ember.Component.extend({ used: undefined, max: undefined, - didUpdateAttrs: function({oldAttrs, newAttrs}) { + didUpdateAttrs: function({ oldAttrs, newAttrs }) { if (oldAttrs.filteredPartition.value !== newAttrs.filteredPartition.value) { this.reDraw(); } }, // Init data initData: function() { - this.map = { }; - this.treeData = { }; + this.map = {}; + this.treeData = {}; this.maxDepth = 0; this.numOfLeafQueue = 0; - this.get("model") - .forEach(function(o) { + this.get("model").forEach( + function(o) { this.map[o.id] = o; - }.bind(this)); + }.bind(this) + ); // var selected = this.get("selected"); this.used = this.get("used"); @@ -86,7 +87,7 @@ export default Ember.Component.extend({ // Init queues initQueue: function(queueName, depth, node) { - if ((!queueName) || (!this.map[queueName])) { + if (!queueName || !this.map[queueName]) { // Queue is not existed return false; } @@ -96,7 +97,10 @@ export default Ember.Component.extend({ var queue = this.map[queueName]; - if (this.filteredPartition && !queue.get('partitions').contains(this.filteredPartition)) { + if ( + this.filteredPartition && + !queue.get("partitions").contains(this.filteredPartition) + ) { return false; } @@ -109,15 +113,16 @@ export default Ember.Component.extend({ if (names.length > 0) { node.children = []; - names.forEach(function(name) { - var childQueueData = {}; - node.children.push(childQueueData); - const status = this.initQueue(name, depth + 1, childQueueData); - if (!status) { - node.children.pop(); - } - - }.bind(this)); + names.forEach( + function(name) { + var childQueueData = {}; + node.children.push(childQueueData); + const status = this.initQueue(name, depth + 1, childQueueData); + if (!status) { + node.children.pop(); + } + }.bind(this) + ); } else { this.numOfLeafQueue = this.numOfLeafQueue + 1; } @@ -134,141 +139,187 @@ export default Ember.Component.extend({ var links = tree.links(nodes); // Normalize for fixed-depth. - nodes.forEach(function(d) { d.y = d.depth * 200; }); + nodes.forEach(function(d) { + d.y = d.depth * 200; + }); // Update the nodes… - var node = this.mainSvg.selectAll("g.node") - .data(nodes, function(d) { return d.id || (d.id = ++i); }); + var node = this.mainSvg.selectAll("g.node").data(nodes, function(d) { + return d.id || (d.id = ++i); + }); // Enter any new nodes at the parent's previous position. - var nodeEnter = node.enter().append("g") + var nodeEnter = node + .enter() + .append("g") .attr("class", "node") - .attr("transform", function() { return "translate(" + source.y0 + "," + source.x0 + ")"; }) - .on("click", function(d){ - if (d.queueData.get("name") !== this.get("selected")) { - document.location.href = "#/yarn-queues/" + d.queueData.get("name") + "!"; - } - - Ember.run.later(this, function () { - var treeWidth = this.maxDepth * 200; - var treeHeight = this.numOfLeafQueue * INBETWEEN_HEIGHT; - var tree = d3.layout.tree().size([treeHeight, treeWidth]); - var diagonal = d3.svg.diagonal() - .projection(function(d) { return [d.y, d.x]; }); - - this.update(this.treeData, this.treeData, tree, diagonal); - }, 100); - - }.bind(this)) - .on("dblclick", function (d) { - document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/apps"; - }); + .attr("transform", function() { + return `translate(${source.y0 + 50}, ${source.x0})`; + }) + .on( + "click", + function(d) { + if (d.queueData.get("name") !== this.get("selected")) { + document.location.href = + "#/yarn-queues/" + d.queueData.get("name") + "!"; + } + + Ember.run.later( + this, + function() { + var treeWidth = this.maxDepth * 200; + var treeHeight = this.numOfLeafQueue * INBETWEEN_HEIGHT; + var tree = d3.layout.tree().size([treeHeight, treeWidth]); + var diagonal = d3.svg.diagonal().projection(function(d) { + return [d.y + 50, d.x]; + }); + + this.update(this.treeData, this.treeData, tree, diagonal); + }, + 100 + ); + }.bind(this) + ) + .on("dblclick", function(d) { + document.location.href = + "#/yarn-queue/" + d.queueData.get("name") + "/apps"; + }); - nodeEnter.append("circle") + nodeEnter + .append("circle") .attr("r", 1e-6) - .style("fill", function(d) { - var maxCap = d.queueData.get(this.max); - maxCap = maxCap === undefined ? 100 : maxCap; - var usedCap = d.queueData.get(this.used) / maxCap * 100.0; - if (usedCap <= 60.0) { - return "mediumaquamarine"; - } else if (usedCap <= 100.0) { - return "coral"; - } else { - return "salmon"; - } - }.bind(this)); + .style( + "fill", + function(d) { + var maxCap = d.queueData.get(this.max); + maxCap = maxCap === undefined ? 100 : maxCap; + var usedCap = d.queueData.get(this.used) / maxCap * 100.0; + if (usedCap <= 60.0) { + return "mediumaquamarine"; + } else if (usedCap <= 100.0) { + return "coral"; + } else { + return "salmon"; + } + }.bind(this) + ); // append percentage - nodeEnter.append("text") - .attr("x", function() { return 0; }) + nodeEnter + .append("text") + .attr("x", function() { + return 0; + }) .attr("dy", ".35em") .attr("fill", "white") - .attr("text-anchor", function() { return "middle"; }) - .text(function(d) { - var maxCap = d.queueData.get(this.max); - maxCap = maxCap === undefined ? 100 : maxCap; - var usedCap = d.queueData.get(this.used) / maxCap * 100.0; - if (usedCap >= 100.0) { - return usedCap.toFixed(0) + "%"; - } else { - return usedCap.toFixed(1) + "%"; - } - }.bind(this)) + .attr("text-anchor", function() { + return "middle"; + }) + .text( + function(d) { + var maxCap = d.queueData.get(this.max); + maxCap = maxCap === undefined ? 100 : maxCap; + var usedCap = d.queueData.get(this.used) / maxCap * 100.0; + if (usedCap >= 100.0) { + return usedCap.toFixed(0) + "%"; + } else { + return usedCap.toFixed(1) + "%"; + } + }.bind(this) + ) .style("fill-opacity", 1e-6); // append queue name - nodeEnter.append("text") + nodeEnter + .append("text") .attr("x", "0px") .attr("dy", "45px") .attr("text-anchor", "middle") - .text(function(d) { return d.name; }) + .text(function(d) { + return d.name; + }) .style("fill-opacity", 1e-6); // Transition nodes to their new position. - var nodeUpdate = node.transition() + var nodeUpdate = node + .transition() .duration(duration) - .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); + .attr("transform", function(d) { + return `translate(${d.y + 50}, ${d.x})`; + }); - nodeUpdate.select("circle") + nodeUpdate + .select("circle") .attr("r", 30) - .attr("href", + .attr("href", function(d) { + return "#/yarn-queues/" + d.queueData.get("name"); + }) + .style( + "stroke-width", function(d) { - return "#/yarn-queues/" + d.queueData.get("name"); - }) - .style("stroke-width", function(d) { - if (d.queueData.get("name") === this.get("selected")) { - return 7; - } else { - return 2; - } - }.bind(this)) - .style("stroke", function(d) { - if (d.queueData.get("name") === this.get("selected")) { - return "gray"; - } else { - return "gray"; - } - }.bind(this)); - - nodeUpdate.selectAll("text") - .style("fill-opacity", 1); + if (d.queueData.get("name") === this.get("selected")) { + return 7; + } else { + return 2; + } + }.bind(this) + ) + .style( + "stroke", + function(d) { + if (d.queueData.get("name") === this.get("selected")) { + return "gray"; + } else { + return "gray"; + } + }.bind(this) + ); + + nodeUpdate.selectAll("text").style("fill-opacity", 1); // Transition exiting nodes to the parent's new position. - var nodeExit = node.exit().transition() + var nodeExit = node + .exit() + .transition() .duration(duration) - .attr("transform", function() { return "translate(" + source.y + "," + source.x + ")"; }) + .attr("transform", function() { + return `translate(${source.y}, ${source.x})`; + }) .remove(); - nodeExit.select("circle") - .attr("r", 1e-6); + nodeExit.select("circle").attr("r", 1e-6); - nodeExit.select("text") - .style("fill-opacity", 1e-6); + nodeExit.select("text").style("fill-opacity", 1e-6); // Update the links… - var link = this.mainSvg.selectAll("path.link") - .data(links, function(d) { return d.target.id; }); + var link = this.mainSvg.selectAll("path.link").data(links, function(d) { + return d.target.id; + }); // Enter any new links at the parent's previous position. - link.enter().insert("path", "g") + link + .enter() + .insert("path", "g") .attr("class", "link") .attr("d", function() { - var o = {x: source.x0, y: source.y0}; - return diagonal({source: o, target: o}); + var o = { x: source.x0, y: source.y0 + 50 }; + return diagonal({ source: o, target: o }); }); // Transition links to their new position. - link.transition() + link + .transition() .duration(duration) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. - link.exit().transition() + link + .exit() + .transition() .duration(duration) .attr("d", function() { - var o = {x: source.x, y: source.y}; - return diagonal({source: o, target: o}); + var o = { x: source.x, y: source.y }; + return diagonal({ source: o, target: o }); }) .remove(); @@ -282,7 +333,7 @@ export default Ember.Component.extend({ reDraw: function() { this.initData(); - var margin = {top: 20, right: 120, bottom: 20, left: 120}; + var margin = { top: 20, right: 120, bottom: 20, left: 120 }; var treeWidth = this.maxDepth * 200; var treeHeight = this.numOfLeafQueue * INBETWEEN_HEIGHT; var width = treeWidth + margin.left + margin.right; @@ -305,8 +356,9 @@ export default Ember.Component.extend({ var tree = d3.layout.tree().size([treeHeight, treeWidth]); - var diagonal = d3.svg.diagonal() - .projection(function(d) { return [d.y, d.x]; }); + var diagonal = d3.svg.diagonal().projection(function(d) { + return [d.y + 50, d.x]; + }); var root = this.treeData; root.x0 = height / 2; @@ -318,6 +370,6 @@ export default Ember.Component.extend({ }, didInsertElement: function() { - this.reDraw(); + this.reDraw(); } }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs index 75e7a451d2a2..32a0e1d35a3a 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs @@ -22,9 +22,9 @@
{{#if filteredPartition}} - Scheduler: {{model.firstObject.type}} for partition {{lower filteredPartition}} + {{model.firstObject.type}} scheduler - Showing queues from partition {{lower filteredPartition}} {{else}} - Scheduler: {{model.firstObject.type}} for all partitions + {{model.firstObject.type}} scheduler - Showing queues from all partitions {{/if}}
{{#if (eq model.firstObject.type "capacity")}} From 76a330a0f9cf36d6530f94ae83d96f87336c0382 Mon Sep 17 00:00:00 2001 From: Vasu Date: Mon, 11 Dec 2017 14:46:24 +0530 Subject: [PATCH 09/10] Makes queues list searchable --- .../main/webapp/app/components/queue-navigator.js | 21 ++++++++++++++++++--- .../src/main/webapp/app/styles/yarn-queues.scss | 5 ++--- .../app/templates/components/queue-navigator.hbs | 16 +++++++++------- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js index af0c93702e36..8269c3bd0992 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-navigator.js @@ -18,11 +18,26 @@ import Ember from "ember"; -export default Ember.Component.extend({ +export default Ember.Component.extend(Ember.TargetActionSupport,{ actions: { filterQueuesByPartition(filter) { - this.set('filteredPartition', filter); - this.sendAction('setFilter', filter); + this.set("filteredPartition", filter); + this.sendAction("setFilter", filter); } + }, + didInsertElement: function() { + $(".js-filter-queue-by-labels").select2({ + width: "350px", + multiple: false + }); + + $(".js-filter-queue-by-labels").on("select2:select", e => { + debugger; + this.triggerAction({ + action: "filterQueuesByPartition", + target: this, + actionContext: e.params.data.text + }); + }); } }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss index 5c5739555cd8..88522706a530 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-queues.scss @@ -17,13 +17,12 @@ */ .filter-partitions { - text-align: right; padding: 15px; - + margin-left: auto; label { font-weight: 500; } - select { + .filter-queue-by-labels { display: inline-block; max-width: 350px; } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs index 32a0e1d35a3a..b063aae8eda1 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/queue-navigator.hbs @@ -28,13 +28,15 @@ {{/if}}
{{#if (eq model.firstObject.type "capacity")}} -
- - +
+
+ + +
{{/if}} {{tree-selector model=model parentId="tree-selector-container" selected=selected used=used max=max filteredPartition=filteredPartition}} From 792a5034b5e796b6fef15f2cabf78ddfedab4e8c Mon Sep 17 00:00:00 2001 From: Vasu Date: Tue, 12 Dec 2017 16:00:19 +0530 Subject: [PATCH 10/10] Fix ASF warning --- .../yarn-queue-partition-capacity-labels.js | 18 ++++++++++++++++++ .../yarn-queue-partition-capacity-labels.hbs | 18 ++++++++++++++++++ .../yarn-queue-partition-capacity-labels-test.js | 20 +++++++++++++++++++- 3 files changed, 55 insertions(+), 1 deletion(-) diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js index 3603fe3076b0..6b146a6440a2 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/yarn-queue-partition-capacity-labels.js @@ -1,3 +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"; import { PARTITION_LABEL } from "../constants"; diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs index b00cbe58bc47..fdecb2de310b 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue-partition-capacity-labels.hbs @@ -1,3 +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. +}} +
absolute used diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js index 578988b731f4..e235175d37e6 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/yarn-queue-partition-capacity-labels-test.js @@ -1,4 +1,22 @@ -import { moduleForComponent, test } from 'ember-qunit'; +/** + * 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('yarn-queue-partition-capacity-labels', 'Integration | Component | yarn queue partition capacity labels', {