YARN-6184. Introduce loading icon in each page of new YARN UI. Contributed by Akhil PB.
This commit is contained in:
parent
003ae00693
commit
f1c9cafefc
@ -128,7 +128,7 @@ export default Ember.Component.extend({
|
|||||||
.attr("transform", function() { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
.attr("transform", function() { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
||||||
.on("mouseover", function(d){
|
.on("mouseover", function(d){
|
||||||
if (d.queueData.get("name") !== this.get("selected")) {
|
if (d.queueData.get("name") !== this.get("selected")) {
|
||||||
document.location.href = "#/yarn-queues/" + d.queueData.get("name");
|
document.location.href = "#/yarn-queues/" + d.queueData.get("name") + "!";
|
||||||
}
|
}
|
||||||
|
|
||||||
Ember.run.later(this, function () {
|
Ember.run.later(this, function () {
|
||||||
@ -143,7 +143,7 @@ export default Ember.Component.extend({
|
|||||||
|
|
||||||
}.bind(this))
|
}.bind(this))
|
||||||
.on("click", function (d) {
|
.on("click", function (d) {
|
||||||
document.location.href = "#/yarn-queue/" + d.queueData.get("name");
|
document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/info";
|
||||||
});
|
});
|
||||||
|
|
||||||
nodeEnter.append("circle")
|
nodeEnter.append("circle")
|
||||||
|
@ -22,10 +22,11 @@ export default Ember.Controller.extend({
|
|||||||
needReload: true,
|
needReload: true,
|
||||||
selectedQueue: undefined,
|
selectedQueue: undefined,
|
||||||
|
|
||||||
breadcrumbs: Ember.computed("model.selected", function () {
|
breadcrumbs: Ember.computed("model.selected", "target.currentPath", function () {
|
||||||
var queueName = this.get("model.selected");
|
var queueName = this.get("model.selected");
|
||||||
|
var path = this.get("target.currentPath");
|
||||||
|
|
||||||
return [{
|
var crumbs = [{
|
||||||
text: "Home",
|
text: "Home",
|
||||||
routeName: 'application'
|
routeName: 'application'
|
||||||
}, {
|
}, {
|
||||||
@ -34,11 +35,19 @@ export default Ember.Controller.extend({
|
|||||||
model: 'root'
|
model: 'root'
|
||||||
}, {
|
}, {
|
||||||
text: `Queue [ ${queueName} ]`,
|
text: `Queue [ ${queueName} ]`,
|
||||||
routeName: 'yarn-queue',
|
routeName: 'yarn-queue.info',
|
||||||
model: queueName
|
model: queueName
|
||||||
}];
|
}];
|
||||||
|
|
||||||
}),
|
if (path && path === "yarn-queue.apps") {
|
||||||
|
crumbs.push({
|
||||||
|
text: "Applications",
|
||||||
|
routeName: 'yarn-queue.apps',
|
||||||
|
model: queueName
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return crumbs;
|
||||||
|
})
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -21,6 +21,7 @@ import Ember from 'ember';
|
|||||||
export default Ember.Controller.extend({
|
export default Ember.Controller.extend({
|
||||||
needReload: true,
|
needReload: true,
|
||||||
selectedQueue: undefined,
|
selectedQueue: undefined,
|
||||||
|
showLoading: true,
|
||||||
|
|
||||||
breadcrumbs: [{
|
breadcrumbs: [{
|
||||||
text: "Home",
|
text: "Home",
|
||||||
|
@ -32,6 +32,10 @@ Router.map(function() {
|
|||||||
this.route('table');
|
this.route('table');
|
||||||
this.route('heatmap');
|
this.route('heatmap');
|
||||||
});
|
});
|
||||||
|
this.route('yarn-queue', {path: '/yarn-queue/:queue_name'}, function() {
|
||||||
|
this.route('info');
|
||||||
|
this.route('apps');
|
||||||
|
});
|
||||||
this.route('yarn-nodes-heatmap');
|
this.route('yarn-nodes-heatmap');
|
||||||
this.route('yarn-node', { path: '/yarn-node/:node_id/:node_addr' });
|
this.route('yarn-node', { path: '/yarn-node/:node_id/:node_addr' });
|
||||||
this.route('yarn-node-apps', { path: '/yarn-node-apps/:node_id/:node_addr' });
|
this.route('yarn-node-apps', { path: '/yarn-node-apps/:node_id/:node_addr' });
|
||||||
@ -43,7 +47,6 @@ Router.map(function() {
|
|||||||
{ path: '/yarn-node-container/:node_id/:node_addr/:container_id' });
|
{ path: '/yarn-node-container/:node_id/:node_addr/:container_id' });
|
||||||
this.route('yarn-container-log', { path:
|
this.route('yarn-container-log', { path:
|
||||||
'/yarn-container-log/:node_id/:node_addr/:container_id/:filename' });
|
'/yarn-container-log/:node_id/:node_addr/:container_id/:filename' });
|
||||||
this.route('yarn-queue', { path: '/yarn-queue/:queue_name' });
|
|
||||||
|
|
||||||
this.route('cluster-overview');
|
this.route('cluster-overview');
|
||||||
this.route('yarn-app', { path: '/yarn-app/:app_id' });
|
this.route('yarn-app', { path: '/yarn-app/:app_id' });
|
||||||
@ -52,7 +55,6 @@ Router.map(function() {
|
|||||||
this.route('notfound', { path: '*:' });
|
this.route('notfound', { path: '*:' });
|
||||||
this.route('yarn-app-attempts', { path: '/yarn-app-attempts/:app_id' });
|
this.route('yarn-app-attempts', { path: '/yarn-app-attempts/:app_id' });
|
||||||
this.route('yarn-queues', { path: '/yarn-queues/:queue_name' });
|
this.route('yarn-queues', { path: '/yarn-queues/:queue_name' });
|
||||||
this.route('yarn-queue-apps', { path: '/yarn-queue-apps/:queue_name' });
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Router;
|
export default Router;
|
||||||
|
@ -23,7 +23,7 @@ import AbstractRoute from './abstract';
|
|||||||
export default AbstractRoute.extend({
|
export default AbstractRoute.extend({
|
||||||
model() {
|
model() {
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
clusterMetrics: this.store.findAll('ClusterMetric'),
|
clusterMetrics: this.store.findAll('ClusterMetric', {reload: true}),
|
||||||
apps: this.store.query('yarn-app',
|
apps: this.store.query('yarn-app',
|
||||||
{
|
{
|
||||||
state: "RUNNING"
|
state: "RUNNING"
|
||||||
|
@ -23,7 +23,7 @@ import AbstractRoute from './abstract';
|
|||||||
export default AbstractRoute.extend({
|
export default AbstractRoute.extend({
|
||||||
model(param) {
|
model(param) {
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
attempt: this.store.findRecord('yarn-app-attempt', param.app_attempt_id),
|
attempt: this.store.findRecord('yarn-app-attempt', param.app_attempt_id, {reload: true}),
|
||||||
|
|
||||||
rmContainers: this.store.query('yarn-container',
|
rmContainers: this.store.query('yarn-container',
|
||||||
{
|
{
|
||||||
|
@ -23,8 +23,8 @@ import AbstractRoute from './abstract';
|
|||||||
export default AbstractRoute.extend({
|
export default AbstractRoute.extend({
|
||||||
model() {
|
model() {
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
apps: this.store.findAll('yarn-app'),
|
apps: this.store.findAll('yarn-app', {reload: true}),
|
||||||
clusterMetrics: this.store.findAll('ClusterMetric'),
|
clusterMetrics: this.store.findAll('ClusterMetric', {reload: true}),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -25,8 +25,8 @@ export default AbstractRoute.extend({
|
|||||||
// Fetches data from both NM and RM. RM is queried to get node usage info.
|
// Fetches data from both NM and RM. RM is queried to get node usage info.
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
nodeInfo: { id: param.node_id, addr: param.node_addr },
|
nodeInfo: { id: param.node_id, addr: param.node_addr },
|
||||||
node: this.store.findRecord('yarn-node', param.node_addr),
|
node: this.store.findRecord('yarn-node', param.node_addr, {reload: true}),
|
||||||
rmNode: this.store.findRecord('yarn-rm-node', param.node_id)
|
rmNode: this.store.findRecord('yarn-rm-node', param.node_id, {reload: true})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -23,8 +23,8 @@ import AbstractRoute from './abstract';
|
|||||||
export default AbstractRoute.extend({
|
export default AbstractRoute.extend({
|
||||||
model() {
|
model() {
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
nodes: this.store.findAll('yarn-rm-node'),
|
nodes: this.store.findAll('yarn-rm-node', {reload: true}),
|
||||||
clusterMetrics: this.store.findAll('ClusterMetric'),
|
clusterMetrics: this.store.findAll('ClusterMetric', {reload: true}),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -26,13 +26,12 @@ export default AbstractRoute.extend({
|
|||||||
selected : param.queue_name,
|
selected : param.queue_name,
|
||||||
queues: this.store.query('yarn-queue', {}),
|
queues: this.store.query('yarn-queue', {}),
|
||||||
selectedQueue : undefined,
|
selectedQueue : undefined,
|
||||||
apps: undefined, // apps of selected queue
|
apps: this.store.findAll('yarn-app', {reload: true})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
afterModel(model) {
|
afterModel(model) {
|
||||||
model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
|
model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
|
||||||
model.apps = this.store.findAll('yarn-app');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
unloadAll() {
|
unloadAll() {
|
||||||
|
@ -18,29 +18,5 @@
|
|||||||
|
|
||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
export default Ember.Controller.extend({
|
export default Ember.Route.extend({
|
||||||
needReload: true,
|
|
||||||
selectedQueue: undefined,
|
|
||||||
|
|
||||||
breadcrumbs: Ember.computed("model.selected", function () {
|
|
||||||
var queueName = this.get("model.selected");
|
|
||||||
|
|
||||||
return [{
|
|
||||||
text: "Home",
|
|
||||||
routeName: 'application'
|
|
||||||
}, {
|
|
||||||
text: "Queues",
|
|
||||||
routeName: 'yarn-queues',
|
|
||||||
model: 'root'
|
|
||||||
}, {
|
|
||||||
text: `Queue [ ${queueName} ]`,
|
|
||||||
routeName: 'yarn-queue',
|
|
||||||
model: queueName
|
|
||||||
}, {
|
|
||||||
text: "Applications",
|
|
||||||
}];
|
|
||||||
|
|
||||||
}),
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
@ -18,25 +18,5 @@
|
|||||||
|
|
||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
import AbstractRoute from './abstract';
|
export default Ember.Route.extend({
|
||||||
|
|
||||||
export default AbstractRoute.extend({
|
|
||||||
model(param) {
|
|
||||||
return Ember.RSVP.hash({
|
|
||||||
selected : param.queue_name,
|
|
||||||
queues: this.store.findAll('yarn-queue'),
|
|
||||||
selectedQueue : undefined,
|
|
||||||
apps: undefined, // apps of selected queue
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
afterModel(model) {
|
|
||||||
model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
|
|
||||||
model.apps = this.store.findAll('yarn-app');
|
|
||||||
},
|
|
||||||
|
|
||||||
unloadAll() {
|
|
||||||
this.store.unloadAll('yarn-queue');
|
|
||||||
this.store.unloadAll('yarn-app');
|
|
||||||
}
|
|
||||||
});
|
});
|
@ -22,21 +22,50 @@ import AbstractRoute from './abstract';
|
|||||||
|
|
||||||
export default AbstractRoute.extend({
|
export default AbstractRoute.extend({
|
||||||
model(param) {
|
model(param) {
|
||||||
|
var queueName = param.queue_name? param.queue_name.split('!')[0] : 'root';
|
||||||
|
if (param.queue_name && param.queue_name.split('!').length > 1) {
|
||||||
|
this.controllerFor('yarn-queues').set('showLoading', false);
|
||||||
|
} else {
|
||||||
|
this.controllerFor('yarn-queues').set('showLoading', true);
|
||||||
|
}
|
||||||
return Ember.RSVP.hash({
|
return Ember.RSVP.hash({
|
||||||
selected : param.queue_name,
|
selected : queueName,
|
||||||
queues: this.store.query('yarn-queue', {}),
|
queues: this.store.query('yarn-queue', {}),
|
||||||
selectedQueue : undefined,
|
selectedQueue : undefined,
|
||||||
apps: undefined, // apps of selected queue
|
apps: this.store.findAll('yarn-app', {reload: true})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
afterModel(model) {
|
afterModel(model) {
|
||||||
model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
|
model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
|
||||||
model.apps = this.store.findAll('yarn-app');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
unloadAll() {
|
unloadAll() {
|
||||||
this.store.unloadAll('yarn-queue');
|
this.store.unloadAll('yarn-queue');
|
||||||
this.store.unloadAll('yarn-app');
|
this.store.unloadAll('yarn-app');
|
||||||
|
},
|
||||||
|
|
||||||
|
refreshModel() {
|
||||||
|
var param = this.paramsFor('yarn-queues');
|
||||||
|
var queueName = param.queue_name? param.queue_name.split('!')[0] : 'root';
|
||||||
|
if (queueName !== param.queue_name) {
|
||||||
|
this.transitionTo('yarn-queues', queueName);
|
||||||
|
} else {
|
||||||
|
this.refresh();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
refresh: function () {
|
||||||
|
this.unloadAll();
|
||||||
|
this.refreshModel();
|
||||||
|
},
|
||||||
|
|
||||||
|
loading() {
|
||||||
|
if (!this.controllerFor('yarn-queues').get('showLoading')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -137,6 +137,14 @@ div.tooltip {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Loading icon styles
|
||||||
|
*/
|
||||||
|
.loading-mask > img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Data table
|
* Data table
|
||||||
*/
|
*/
|
||||||
|
@ -0,0 +1,23 @@
|
|||||||
|
{{!
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
}}
|
||||||
|
|
||||||
|
<div class="col-md-12 container-fluid">
|
||||||
|
<div class="loading-mask">
|
||||||
|
<img src="assets/images/spinner.gif" alt="Loading...">
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -0,0 +1,23 @@
|
|||||||
|
{{!
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
}}
|
||||||
|
|
||||||
|
<div class="col-md-12 container-fluid">
|
||||||
|
<div class="loading-mask">
|
||||||
|
<img src="assets/images/spinner.gif" alt="Loading...">
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -1,64 +0,0 @@
|
|||||||
{{!
|
|
||||||
* 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.
|
|
||||||
}}
|
|
||||||
|
|
||||||
{{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>Application</h4>
|
|
||||||
</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' tagName="li"}}
|
|
||||||
{{#link-to 'yarn-queue' 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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-10 container-fluid">
|
|
||||||
<!-- timeline view of children -->
|
|
||||||
<div class="row">
|
|
||||||
|
|
||||||
<div class="col-lg-12 container-fluid">
|
|
||||||
{{#if model.apps}}
|
|
||||||
{{app-table table-id="apps-table" arr=model.apps}}
|
|
||||||
{{simple-table table-id="apps-table" bFilter=true colTypes="elapsed-time" colTargets="7"}}
|
|
||||||
{{else}}
|
|
||||||
<h4 align = "center">Could not find any applications from this cluster</h4>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{outlet}}
|
|
@ -24,17 +24,17 @@
|
|||||||
<div class="col-md-2 container-fluid">
|
<div class="col-md-2 container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h4>Application</h4>
|
<h4>Queue</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
|
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
|
||||||
<ul class="nav nav-pills nav-stacked collapse in">
|
<ul class="nav nav-pills nav-stacked collapse in">
|
||||||
{{#link-to 'yarn-queue' tagName="li"}}
|
{{#link-to 'yarn-queue.info' tagName="li"}}
|
||||||
{{#link-to 'yarn-queue' model.selected}}Information
|
{{#link-to 'yarn-queue.info' model.selected}}Information
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
{{#link-to 'yarn-queue-apps' tagName="li"}}
|
{{#link-to 'yarn-queue.apps' tagName="li"}}
|
||||||
{{#link-to 'yarn-queue-apps' model.selected}}Applications List
|
{{#link-to 'yarn-queue.apps' model.selected}}Applications List
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
</ul>
|
</ul>
|
||||||
@ -44,65 +44,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-10 container-fluid">
|
<div class="col-md-10 container-fluid">
|
||||||
<!-- timeline view of children -->
|
{{outlet}}
|
||||||
<div class="row">
|
|
||||||
|
|
||||||
<div class="col-lg-4 container-fluid">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
Queue Information
|
|
||||||
</div>
|
|
||||||
{{queue-configuration-table queue=model.selectedQueue}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-lg-4 container-fluid">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
Queue Capacities
|
|
||||||
</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
|
|
||||||
maxHeight=350}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{#if model.selectedQueue.hasUserUsages}}
|
|
||||||
<div class="col-lg-4 container-fluid" id="userusage-donut-chart">
|
|
||||||
{{donut-chart data=model.selectedQueue.userUsagesDonutChartData
|
|
||||||
title="User Usages"
|
|
||||||
showLabels=true
|
|
||||||
parentId="userusage-donut-chart"
|
|
||||||
type="memory"
|
|
||||||
ratio=0.6
|
|
||||||
maxHeight=350}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<div class="col-lg-4 container-fluid">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
Running Apps
|
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{outlet}}
|
|
||||||
|
@ -0,0 +1,28 @@
|
|||||||
|
{{!
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
}}
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12 container-fluid">
|
||||||
|
{{#if model.apps}}
|
||||||
|
{{app-table table-id="apps-table" arr=model.apps}}
|
||||||
|
{{simple-table table-id="apps-table" bFilter=true colTypes="elapsed-time" colTargets="7"}}
|
||||||
|
{{else}}
|
||||||
|
<h4 align = "center">Could not find any applications from this cluster</h4>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -0,0 +1,84 @@
|
|||||||
|
{{!
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
}}
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-lg-6 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=170
|
||||||
|
ratio=0.55
|
||||||
|
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>
|
||||||
|
{{queue-configuration-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="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
User Usages: {{model.selected}}
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid" id="userusage-donut-chart">
|
||||||
|
{{donut-chart data=model.selectedQueue.userUsagesDonutChartData
|
||||||
|
showLabels=true
|
||||||
|
parentId="userusage-donut-chart"
|
||||||
|
type="memory"
|
||||||
|
ratio=0.6
|
||||||
|
maxHeight=350}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
</div>
|
@ -26,7 +26,7 @@
|
|||||||
<div class="col-lg-4 container-fluid">
|
<div class="col-lg-4 container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
Queue Information
|
Queue Information: {{model.selected}}
|
||||||
</div>
|
</div>
|
||||||
{{queue-configuration-table queue=model.selectedQueue}}
|
{{queue-configuration-table queue=model.selectedQueue}}
|
||||||
</div>
|
</div>
|
||||||
@ -35,7 +35,7 @@
|
|||||||
<div class="col-lg-4 container-fluid">
|
<div class="col-lg-4 container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
Queue Capacities
|
Queue Capacities: {{model.selected}}
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="capacity-bar-chart">
|
<div class="container-fluid" id="capacity-bar-chart">
|
||||||
<br/>
|
<br/>
|
||||||
@ -52,7 +52,7 @@
|
|||||||
<div class="col-lg-4 container-fluid">
|
<div class="col-lg-4 container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
Running Apps
|
Running Apps: {{model.selected}}
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="numapplications-donut-chart">
|
<div class="container-fluid" id="numapplications-donut-chart">
|
||||||
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
||||||
|
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
import { moduleFor, test } from 'ember-qunit';
|
import { moduleFor, test } from 'ember-qunit';
|
||||||
|
|
||||||
moduleFor('route:yarn-queue-apps', 'Unit | Route | yarn queue apps', {
|
moduleFor('route:yarn-queue/apps', 'Unit | Route | yarn queue/apps', {
|
||||||
// Specify the other units that are required for this test.
|
// Specify the other units that are required for this test.
|
||||||
// needs: ['controller:foo']
|
// needs: ['controller:foo']
|
||||||
});
|
});
|
@ -18,13 +18,12 @@
|
|||||||
|
|
||||||
import { moduleFor, test } from 'ember-qunit';
|
import { moduleFor, test } from 'ember-qunit';
|
||||||
|
|
||||||
moduleFor('controller:yarn-queue-apps', 'Unit | Controller | yarn queue apps', {
|
moduleFor('route:yarn-queue/info', 'Unit | Route | yarn queue/info', {
|
||||||
// Specify the other units that are required for this test.
|
// Specify the other units that are required for this test.
|
||||||
// needs: ['controller:foo']
|
// needs: ['controller:foo']
|
||||||
});
|
});
|
||||||
|
|
||||||
// Replace this with your real tests.
|
|
||||||
test('it exists', function(assert) {
|
test('it exists', function(assert) {
|
||||||
let controller = this.subject();
|
let route = this.subject();
|
||||||
assert.ok(controller);
|
assert.ok(route);
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user