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 7a9d53b148..4645a48140 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 @@ -146,7 +146,7 @@ export default Ember.Component.extend({ }.bind(this)) .on("dblclick", function (d) { - document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/info"; + document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/apps"; }); nodeEnter.append("circle") diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js index 3a72b606fe..e9f945ba72 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js @@ -33,15 +33,11 @@ export default Ember.Controller.extend({ text: "Queues", routeName: 'yarn-queues', model: 'root' - }, { - text: `Queue [ ${queueName} ]`, - routeName: 'yarn-queue.info', - model: queueName }]; if (path && path === "yarn-queue.apps") { crumbs.push({ - text: "Applications", + text: `Queue [ ${queueName} ]`, routeName: 'yarn-queue.apps', model: queueName }); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js index 905d96daf3..c10624e413 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js @@ -21,8 +21,10 @@ import TableDefinition from 'em-table/utils/table-definition'; import AppTableController from '../app-table-columns'; export default AppTableController.extend({ - // Your custom instance of table definition - tableDefinition: TableDefinition.create(), + tableDefinition: TableDefinition.create({ + enableFaceting: true, + rowCount: 25 + }), // Search text alias, any change in controller's searchText would affect the table's searchText, and vice-versa. _selectedObserver: Ember.on("init", Ember.observer("model.selected", function () { 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 1d162e9f1c..f892c2baf0 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 @@ -50,16 +50,19 @@ export default DS.Model.extend({ capacitiesBarChartData: function() { var floatToFixed = Converter.floatToFixed; return [ - { - label: "Absolute Capacity", - value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity")) - }, { label: "Absolute Used", + style: "primary", 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")) + }, { label: "Absolute Max Capacity", + style: "secondary", value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity")) } ]; 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 471e3467bb..87ee9a9391 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 @@ -1,6 +1,7 @@ @import 'variables.scss'; @import 'layout.scss'; @import 'yarn-app.scss'; +@import './compose-box.scss'; /** * Licensed to the Apache Software Foundation (ASF) under one @@ -191,7 +192,7 @@ table.dataTable thead .sorting_desc_disabled { .breadcrumb { padding-bottom: 3px; - background-color: none; + background: none; } .navbar-default .navbar-nav > li > a { @@ -744,4 +745,57 @@ div.service-action-mask img { background: none; border: none; box-shadow: none; -} \ No newline at end of file +} + +.queue-page-breadcrumb, +#tree-selector-container { + width: calc(100% - #{$compose-box-width}); +} + +#tree-selector-container { + overflow: scroll; +} + +.flex { + display: flex; +} + +.yarn-label { + border-radius: 3px; + margin-bottom: 5px; + border: 1px solid $yarn-panel-bg; + font-size: 12px; + > span { + padding: 5px; + } + &.primary { + display: inline-grid; + .label-key { + color: $yarn-panel-bg; + background: #666; + } + .label-value { + color: $yarn-panel-bg; + background: $yarn-success-border; + } + } + &.secondary { + display: inline-table; + .label-key { + color: $yarn-panel-bg; + background: #999; + } + + .label-value { + color: $yarn-panel-bg; + background: yellowgreen; + } + } +} + +.yarn-queues-container { + padding: 15px; + h3 { + margin-top: 0; + } +} diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss new file mode 100644 index 0000000000..0bfadb0616 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss @@ -0,0 +1,39 @@ +/** + * 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 'variables.scss'; + +.yarn-compose-box { + position: fixed; + bottom: 0; + top: 0px; + right: 0px; + background-color: $yarn-panel-bg; + border: 1px solid $yarn-border-color; + border-radius: 3px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + max-width: $compose-box-width; + overflow: scroll; + + .panel-heading { + background-color: $yarn-header-bg !important; + border-color: $yarn-border-color; + border-radius: 3px; + } +} \ No newline at end of file diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss index d31f145107..587df66c1d 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss @@ -40,3 +40,7 @@ .tail-2 { margin-right: 10px } + +.top-1 { + margin-top: 5px; +} diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss index 8226770909..e25b4826c0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss @@ -37,8 +37,7 @@ $yarn-warn-border: $color-yellow-secondary; $yarn-warn-bg: $color-yellow-primary; $yarn-gray-icon: $color-gray-40; - $yarn-muted-text: $color-gray-60; - +$compose-box-width: 400px; //shadows diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs index 7d44e69aee..a7260bcf89 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs @@ -16,60 +16,29 @@ * limitations under the License. }} -
- -
+
+
- Queue Capacities: {{model.selected}} + Running Apps: {{model.selected}}
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=170 - ratio=0.55 +
+ {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 maxHeight=350}}
-
-
-
- Queue Information: {{model.selected}} -
- {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}} -
-
- -
- -
- -
-
-
- Running Apps: {{model.selected}} -
-
- {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} -
-
-
- {{#if model.selectedQueue.hasUserUsages}} -
+
User Usages: {{model.selected}}
-
+
{{donut-chart data=model.selectedQueue.userUsagesDonutChartData showLabels=true parentId="userusage-donut-chart" 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 8b63b661bb..bb9a87ea07 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 @@ -19,45 +19,56 @@ {{queue-navigator model=model.queues selected=model.selected used="usedCapacity" max="absMaxCapacity"}} -
-
-
-
- Queue Information: {{model.selected}} +
+
+

+ + {{model.selected}} + +

+ {{#if model.selectedQueue.state}} +
+ {{em-table-simple-status-cell content=model.selectedQueue.state}}
- {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}} + {{/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}}
-
-
-
- Queue Capacities: {{model.selected}} -
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} -
-
-
- -
-
-
- Running Apps: {{model.selected}} -
-
- {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} -
-
+
Running Apps
+
+ {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 + maxHeight=350}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs index 6d0e994091..dcc80c10b3 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs @@ -19,44 +19,46 @@ {{queue-navigator model=model.queues selected=model.selected used="usedResources.memory" max="clusterResources.memory"}} -
-
-
-
- Queue Information: {{model.selected}} -
- {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}} -
+
+
+ Queue Information: {{model.selected}}
- -
-
-
- Queue Capacities: {{model.selected}} -
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} +
+
+
+ {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
-
-
-
-
- Running Apps: {{model.selected}} +
+
+
+ Queue Capacities: {{model.selected}} +
+
+
+ {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=175 + ratio=0.55 + maxHeight=350}} +
-
- {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} +
+ +
+
+
+ Running Apps: {{model.selected}} +
+
+ {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 + maxHeight=350}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs index 90cbd2798b..98db5cb415 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs @@ -19,29 +19,30 @@ {{queue-navigator model=model.queues selected=model.selected used="usedNodeCapacity" max="totalNodeCapacity"}} -
-
-
-
- Queue Information: {{model.selected}} -
- {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}} -
+
+
+ Queue Information: {{model.selected}}
- -
-
-
- Queue Capacities: {{model.selected}} +
+
+
+ {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} +
+
+
+
+ Queue Capacities: {{model.selected}} +
+
+
+ {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=175 + ratio=0.55 + maxHeight=350}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs index ef2d285de8..87b596e1a0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs @@ -18,34 +18,61 @@ {{breadcrumb-bar breadcrumbs=breadcrumbs}} -
-
- -
-
-
-

Queue

+
+
+
+
+
+

{{model.selected}}

+ {{#if model.selectedQueue.state}} +
+ {{em-table-simple-status-cell content=model.selectedQueue.state}} +
+ {{/if}} +
+ + 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}} +
-
- +
+ {{#each model.selectedQueue.capacitiesBarChartData as |item|}} + + {{lower item.label}} + {{item.value}}% + + {{/each}}
- -
+
+
+
    +
      + {{#link-to 'yarn-queue.apps' tagName="li" class=(if (eq target.currentPath 'yarn-queue.apps') "active")}} + {{#link-to 'yarn-queue.apps' appId (query-params service=model.serviceName)}}Applications{{/link-to}} + {{/link-to}} +
    +
+
+
+
{{outlet}}
-
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs index 4a508c116a..6417910e3b 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs @@ -17,9 +17,20 @@ }}
-
+
+
+ {{#if (eq model.queues.firstObject.type "capacity")}} + {{yarn-queue.capacity-queue-info model=model}} + {{else if (eq model.queues.firstObject.type "fair")}} + {{yarn-queue.fair-queue-info model=model}} + {{else}} + {{yarn-queue.fifo-queue-info model=model}} + {{/if}} +
+
+
{{#if model.apps}} - {{em-table columns=columns rows=model.apps}} + {{em-table columns=columns rows=model.apps definition=tableDefinitio}} {{else}}

Could not find any applications from this cluster

{{/if}} diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs index 2f138a7eba..b84425ae6f 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs @@ -15,11 +15,12 @@ * See the License for the specific language governing permissions and * limitations under the License. }} - -{{#if (eq model.queues.firstObject.type "capacity")}} - {{yarn-queue.capacity-queue-info model=model}} -{{else if (eq model.queues.firstObject.type "fair")}} - {{yarn-queue.fair-queue-info model=model}} -{{else}} - {{yarn-queue.fifo-queue-info model=model}} -{{/if}} +
+ {{#if (eq model.queues.firstObject.type "capacity")}} + {{yarn-queue.capacity-queue-info model=model}} + {{else if (eq model.queues.firstObject.type "fair")}} + {{yarn-queue.fair-queue-info model=model}} + {{else}} + {{yarn-queue.fifo-queue-info model=model}} + {{/if}} +
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 fccdb5b62c..b3165d53e2 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 @@ -15,8 +15,9 @@ * See the License for the specific language governing permissions and * limitations under the License. }} - -{{breadcrumb-bar breadcrumbs=breadcrumbs}} +
+ {{breadcrumb-bar breadcrumbs=breadcrumbs}} +
{{#if (eq model.queues.firstObject.type "capacity")}} {{yarn-queue.capacity-queue model=model}}