YARN-7546. Layout changes in Queue UI to show queue details on right pane. Contributed by Vasudevan Skm.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/4653aa3e Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/4653aa3e Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/4653aa3e Branch: refs/heads/HDFS-7240 Commit: 4653aa3eb31fb23fa19136173685464d71f86613 Parents: 60fd0d7 Author: Sunil G <[email protected]> Authored: Fri Dec 1 13:26:01 2017 +0530 Committer: Sunil G <[email protected]> Committed: Fri Dec 1 13:26:01 2017 +0530 ---------------------------------------------------------------------- .../main/webapp/app/components/tree-selector.js | 2 +- .../main/webapp/app/controllers/yarn-queue.js | 6 +- .../webapp/app/controllers/yarn-queue/apps.js | 6 +- .../app/models/yarn-queue/capacity-queue.js | 11 ++- .../src/main/webapp/app/styles/app.scss | 58 +++++++++++++- .../src/main/webapp/app/styles/compose-box.scss | 39 ++++++++++ .../src/main/webapp/app/styles/layout.scss | 4 + .../src/main/webapp/app/styles/variables.scss | 3 +- .../yarn-queue/capacity-queue-info.hbs | 51 +++--------- .../components/yarn-queue/capacity-queue.hbs | 81 +++++++++++--------- .../components/yarn-queue/fair-queue.hbs | 66 ++++++++-------- .../components/yarn-queue/fifo-queue.hbs | 43 ++++++----- .../main/webapp/app/templates/yarn-queue.hbs | 73 ++++++++++++------ .../webapp/app/templates/yarn-queue/apps.hbs | 15 +++- .../webapp/app/templates/yarn-queue/info.hbs | 17 ++-- .../main/webapp/app/templates/yarn-queues.hbs | 5 +- 16 files changed, 300 insertions(+), 180 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js ---------------------------------------------------------------------- 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 7a9d53b..4645a48 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") http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js ---------------------------------------------------------------------- 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 3a72b60..e9f945b 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 }); http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js ---------------------------------------------------------------------- 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 905d96d..c10624e 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 () { http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js ---------------------------------------------------------------------- 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 1d162e9..f892c2b 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 @@ -51,15 +51,18 @@ export default DS.Model.extend({ 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")) } ]; http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss ---------------------------------------------------------------------- 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 471e346..87ee9a9 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; + } +} http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss ---------------------------------------------------------------------- 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 0000000..0bfadb0 --- /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 http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss ---------------------------------------------------------------------- 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 d31f145..587df66 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; +} http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss ---------------------------------------------------------------------- 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 8226770..e25b482 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 http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs ---------------------------------------------------------------------- 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 7d44e69..a7260bc 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. }} -<div class="row"> - - <div class="col-lg-6 container-fluid"> +<div> + <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-heading"> - Queue Capacities: {{model.selected}} + Running Apps: {{model.selected}} </div> - <div class="container-fluid" id="capacity-bar-chart"> - <br/> - {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=170 - ratio=0.55 + <div id="numapplications-donut-chart"> + {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 maxHeight=350}} </div> </div> </div> - <div class="col-lg-6 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Information: {{model.selected}} - </div> - {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}} - </div> - </div> - -</div> - -<div class="row"> - - <div class="col-lg-6 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Running Apps: {{model.selected}} - </div> - <div class="container-fluid" id="numapplications-donut-chart"> - {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} - </div> - </div> - </div> - {{#if model.selectedQueue.hasUserUsages}} - <div class="col-lg-6 container-fluid"> + <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-heading"> User Usages: {{model.selected}} </div> - <div class="container-fluid" id="userusage-donut-chart"> + <div id="userusage-donut-chart"> {{donut-chart data=model.selectedQueue.userUsagesDonutChartData showLabels=true parentId="userusage-donut-chart" http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs ---------------------------------------------------------------------- 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 8b63b66..bb9a87e 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"}} -<div class="row"> - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Information: {{model.selected}} +<div class="yarn-compose-box yarn-queues-container"> + <div> + <h3> + <a href="#/yarn-queue/{{model.selected}}/apps"> + {{model.selected}} + </a> + </h3> + {{#if model.selectedQueue.state}} + <div> + {{em-table-simple-status-cell content=model.selectedQueue.state}} </div> - {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}} + {{/if}} + <div class="top-1"> + {{#each model.selectedQueue.capacitiesBarChartData as |item|}} + <span class="yarn-label {{item.style}}"> + <span class="label-key"> {{lower item.label}}</span> + <span class="label-value">{{item.value}}%</span> + </span> + {{/each}} </div> - </div> - - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Capacities: {{model.selected}} - </div> - <div class="container-fluid" id="capacity-bar-chart"> - <br/> - {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} - </div> + <div class="top-1"> + <span class="yarn-label secondary"> + <span class="label-key">configured capacity</span> + <span class="label-value">{{model.selectedQueue.capacity}}%</span> + </span> + <span class="yarn-label secondary"> + <span class="label-key">configured max capacity</span> + <span class="label-value">{{model.selectedQueue.maxCapacity}}%</span> + </span> </div> + {{#if model.selectedQueue.isLeafQueue}} + <div class="top-1"> + <span class="yarn-label secondary"> + <span class="label-key">user limit</span> + <span class="label-value">{{model.selectedQueue.userLimit}}%</span> + </span> + <span class="yarn-label secondary"> + <span class="label-key">user limit factor</span> + <span class="label-value">{{model.selectedQueue.userLimitFactor}}</span> + </span> + </div> + {{/if}} </div> - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Running Apps: {{model.selected}} - </div> - <div class="container-fluid" id="numapplications-donut-chart"> - {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} - </div> - </div> + <h5> Running Apps </h5> + <div id="numapplications-donut-chart"> + {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 + maxHeight=350}} </div> </div> http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs ---------------------------------------------------------------------- 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 6d0e994..dcc80c1 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"}} -<div class="row"> - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Information: {{model.selected}} +<div class="yarn-compose-box"> + <div class="panel-heading"> + Queue Information: {{model.selected}} + </div> + <div class="panel-body"> + <div class="container-fluid"> + <div class="panel panel-default"> + {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}} </div> - {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}} </div> - </div> - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Capacities: {{model.selected}} - </div> - <div class="container-fluid" id="capacity-bar-chart"> - <br/> - {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} + <div class="container-fluid"> + <div class="panel panel-default"> + <div class="panel-heading"> + Queue Capacities: {{model.selected}} + </div> + <div class="container-fluid" id="capacity-bar-chart"> + <br/> + {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=175 + ratio=0.55 + maxHeight=350}} + </div> </div> </div> - </div> - <div class="col-lg-4 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Running Apps: {{model.selected}} - </div> - <div class="container-fluid" id="numapplications-donut-chart"> - {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} + <div class="container-fluid"> + <div class="panel panel-default"> + <div class="panel-heading"> + Running Apps: {{model.selected}} + </div> + <div class="container-fluid" id="numapplications-donut-chart"> + {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLabels=true + parentId="numapplications-donut-chart" + ratio=0.6 + maxHeight=350}} + </div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs ---------------------------------------------------------------------- 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 90cbd27..98db5cb 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"}} -<div class="row"> - <div class="col-lg-6 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Information: {{model.selected}} - </div> - {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}} - </div> +<div class="yarn-compose-box"> + <div class="panel-heading"> + Queue Information: {{model.selected}} </div> - - <div class="col-lg-6 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Queue Capacities: {{model.selected}} + <div class="panel-body"> + <div class="container-fluid"> + <div class="panel panel-default"> + {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}} </div> - <div class="container-fluid" id="capacity-bar-chart"> - <br/> - {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} + </div> + <div class="container-fluid"> + <div class="panel panel-default"> + <div class="panel-heading"> + Queue Capacities: {{model.selected}} + </div> + <div class="container-fluid" id="capacity-bar-chart"> + <br/> + {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=175 + ratio=0.55 + maxHeight=350}} + </div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs ---------------------------------------------------------------------- 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 ef2d285..87b596e 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}} -<div class="col-md-12 container-fluid"> - <div class="row"> - - <div class="col-md-2 container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - <h4>Queue</h4> +<div class="panel-group"> + <div class="panel panel-default"> + <div class="yarn-app-header"> + <div class="flex"> + <div class="top-1"> + <h3>{{model.selected}}</h3> + {{#if model.selectedQueue.state}} + <div> + {{em-table-simple-status-cell content=model.selectedQueue.state}} + </div> + {{/if}} + <div class="top-1"> + <span class="yarn-label secondary"> + <span class="label-key">configured capacity</span> + <span class="label-value">{{model.selectedQueue.capacity}}%</span> + </span> + <span class="yarn-label secondary"> + <span class="label-key">configured max capacity</span> + <span class="label-value">{{model.selectedQueue.maxCapacity}}%</span> + </span> + {{#if model.selectedQueue.isLeafQueue}} + <span class="yarn-label secondary"> + <span class="label-key">user limit</span> + <span class="label-value">{{model.selectedQueue.userLimit}}%</span> + </span> + <span class="yarn-label secondary"> + <span class="label-key">user limit factor</span> + <span class="label-value">{{model.selectedQueue.userLimitFactor}}</span> + </span> + {{/if}} + </div> </div> - <div class="panel-body"> - <ul class="nav nav-pills nav-stacked" id="stacked-menu"> - <ul class="nav nav-pills nav-stacked collapse in"> - {{#link-to 'yarn-queue.info' tagName="li"}} - {{#link-to 'yarn-queue.info' model.selected}}Information - {{/link-to}} - {{/link-to}} - {{#link-to 'yarn-queue.apps' tagName="li"}} - {{#link-to 'yarn-queue.apps' model.selected}}Applications List - {{/link-to}} - {{/link-to}} - </ul> - </ul> + <div class="flex-right"> + {{#each model.selectedQueue.capacitiesBarChartData as |item|}} + <span class="yarn-label primary"> + <span class="label-key"> {{lower item.label}}</span> + <span class="label-value">{{item.value}}%</span> + </span> + {{/each}} </div> </div> </div> - - <div class="col-md-10 container-fluid"> + <div class="panel-heading"> + <div class="clearfix"> + <ul class="nav nav-pills"> + <ul class="nav nav-pills collapse in"> + {{#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}} + </ul> + </ul> + </div> + </div> + <div class="panel-body yarn-app-body"> {{outlet}} </div> - </div> </div> http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs ---------------------------------------------------------------------- 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 4a508c1..6417910 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 @@ }} <div class="row"> - <div class="col-lg-12 container-fluid"> + <div class="col-lg-12"> + <div class="row"> + {{#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}} + </div> + </div> + <div class="col-lg-12 yarn-applications-container"> {{#if model.apps}} - {{em-table columns=columns rows=model.apps}} + {{em-table columns=columns rows=model.apps definition=tableDefinitio}} {{else}} <h4 align = "center">Could not find any applications from this cluster</h4> {{/if}} http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs ---------------------------------------------------------------------- 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 2f138a7..b84425a 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}} +<div class="row"> + {{#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}} +</div> http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs ---------------------------------------------------------------------- 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 fccdb5b..b3165d5 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}} +<div class="queue-page-breadcrumb"> + {{breadcrumb-bar breadcrumbs=breadcrumbs}} +</div> <div class="container-fluid"> {{#if (eq model.queues.firstObject.type "capacity")}} {{yarn-queue.capacity-queue model=model}} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
