rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update remaining details pages (#813) 

update machine drivers (rancher/rancher#5156)
This commit is contained in:
Westly Wright 2016-08-11 13:33:28 -07:00 committed by Vincent Fiduccia
parent feb208bab0
commit 8aff75f902
8 changed files with 370 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/admin-tab/machine/controller.js
View File

@ -53,15 +53,7 @@ export default Ember.Controller.extend(Sortable, {
this.get('store').request({url: template.versionLinks[template.defaultVersion]}).then((driver) =>{
let newDriver = {
type : 'machineDriver',
description : (driver.description || null),
checksum : (driver.files.checksum||'').trim() || null,
uiUrl : (driver.files.uiUrl||'').trim() || null,
url : (driver.files.url||'').trim() || null,
externalId : driver.id,
activateOnCreate: true,
};
let newDriver = this.createNewDriver(driver);
this.get('userStore').createRecord(newDriver).save().then((result) => {
this.get('model.drivers').pushObject(result);
@ -76,14 +68,11 @@ export default Ember.Controller.extend(Sortable, {
let templateVersion = version;
this.set('upgrading', true);
// find latest version of driver
this.get('store').request({url: this.get('app.catalogEndpoint')+'/templateversions/'+driver.externalId}).then((template) => {
this.get('store').request({url: template.upgradeVersionLinks[templateVersion]}).then((item) => {
driver.setProperties({
url : item.files.url,
checksum : item.files.checksum,
uiUrl : item.files.uiUrl,
});
driver.setProperties(this.createNewDriver(item));
driver.save().then(() => {
this.set('upgrading', false);
}).catch((err) => {
@ -95,7 +84,19 @@ export default Ember.Controller.extend(Sortable, {
}
},
sortableContent: Ember.computed('model.drivers.@each', 'model.catalogDrivers.@each', function() {
createNewDriver: function(driver) {
return {
type : 'machineDriver',
description : (driver.description || null),
checksum : (driver.files.checksum||'').trim() || null,
uiUrl : (driver.files.uiUrl||'').trim() || null,
url : (driver.files.url||'').trim() || null,
externalId : driver.id,
activateOnCreate: true,
};
},
sortableContent: Ember.computed('model.drivers.[]', 'model.catalogDrivers.[]', function() {
// possibly add some search here
let cDrivers = this.get('model.catalogDrivers.catalog');
let drivers = this.get('model.drivers.content');
@ -109,18 +110,25 @@ export default Ember.Controller.extend(Sortable, {
let extId = driver.externalId.split(':');
extId = extId.slice(0, extId.length - 1).join(':');
if (cDriver.id === extId) {
this.get('store').request({url: this.get('app.catalogEndpoint')+'/templateversions/'+ driver.externalId}).then((upgradeInfo) => {
if (upgradeInfo.id === driver.externalId) {
return false;
}
if (upgradeInfo.upgradeVersionLinks && Object.keys(upgradeInfo.upgradeVersionLinks).length) {
driver.set('upgradeAvailable', true);
driver.set('upgradeVersionLinks', upgradeInfo.upgradeVersionLinks);
}
});
driver.set('fullVersionInfo', null);
return true;
if (cDriver.id === extId) {
this.get('store').request({url: `${this.get('app.catalogEndpoint')}/templateversions/${cDriver.id}`}).then((fullUpdgradeInfo) => {
driver.set('fullVersionInfo', fullUpdgradeInfo.versionLinks);
driver.set('currentVersion', getCurrentVersion(fullUpdgradeInfo.versionLinks, driver.externalId));
this.get('store').request({url: this.get('app.catalogEndpoint')+'/templateversions/'+ driver.externalId}).then((upgradeInfo) => {
if (upgradeInfo.upgradeVersionLinks && Object.keys(upgradeInfo.upgradeVersionLinks).length) {
driver.set('upgradeAvailable', true);
}
return true;
});
});
}
}
@ -132,6 +140,14 @@ export default Ember.Controller.extend(Sortable, {
}
});
var getCurrentVersion = function(driverList, externalId) {
for (var key in driverList) {
if (driverList[key].indexOf(externalId) > -1) {
return key;
}
}
};
newContent = newContent.concat(drivers);
return newContent;

36
app/admin-tab/machine/template.hbs
View File

@ -40,24 +40,36 @@
<div class="machine-catalog-icon generic"></div>
{{/if}}
</div>
<h5 class="r-mb10">{{driver.name}}</h5>
{{#if driver.upgradeAvailable}}
<h5>{{driver.name}}</h5>
{{#if driver.fullVersionInfo}}
<div class="btn-group r-mt5">
<button type="button" class="btn btn-warning btn-xs">
{{#if upgrading}}
<i class="icon icon-spinner icon-spin"></i> {{t 'machinePage.upgrading'}}
{{else}}
{{t 'machinePage.upgradeAvailable'}}
{{/if}}
</button>
{{#if driver.upgradeAvailable}}
<button type="button" class="btn btn-warning btn-xs">
{{#if upgrading}}
<i class="icon icon-spinner icon-spin"></i> {{t 'machinePage.upgrading'}}
{{else}}
{{t 'machinePage.upgradeAvailable'}}
{{/if}}
</button>
{{else}}
<button type="button" class="btn btn-warning btn-xs">
{{#if upgrading}}
<i class="icon icon-spinner icon-spin"></i> {{t 'machinePage.upgrading'}}
{{else}}
{{driver.currentVersion}}
{{/if}}
</button>
{{/if}}
<button type="button" class="btn btn-warning btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<i class="icon icon-fw icon-chevron-down"></i>
<span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<ul class="dropdown-menu dropdown-menu-right r-p10" role="menu">
{{!-- each over versions --}}
{{#each-in driver.upgradeVersionLinks as |version path|}}
<li class='hand' {{action "upgradeDriver" driver version path}}>{{version}}</li>
{{#each-in driver.fullVersionInfo as |version path|}}
<li class='hand r-mt5 r-mb5' {{action "upgradeDriver" driver version path}}>
<span class="{{if (eq driver.currentVersion version) 'btn-warning'}}">{{version}}</span>
</li>
{{/each-in}}
</ul>
</div>

5
app/components/info-multi-stats/template.hbs
View File

@ -1,8 +1,3 @@
{{#if showMultiStat}}
<div class="container-multi-stat">
{{yield}}
</div>
{{/if}}
{{#if showGraphs}}
<div class="row">
<div class="row-same-height row-full-height">

2
app/container/template.hbs
View File

@ -71,7 +71,7 @@
</div>
<div class="col-md-9">
<div class="row">
{{info-multi-stats model=model linkName="containerStats" single=true showMultiStat=false}}
{{info-multi-stats model=model linkName="containerStats" single=true}}
</div>
<div class="row r-p15">
<ul class="nav nav-tabs nav-tabs-well shadowed">

188
app/host/template.hbs
View File

@ -17,101 +17,123 @@
</section>
<section>
{{#info-multi-stats model=host linkName="hostStats" single=true}}
<div class="container-flex bordered">
<div class="col-flex">
<div class="row">
<div class="col-md-3 rm-mb15">
{{#if host.description}}
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.description'}} </label>
<div>{{host.description}}</div>
</div>
<hr>
{{/if}}
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.ip'}}</label>
{{format-ip ip=host.displayIp showCopy=true}}
<div>{{format-ip ip=host.displayIp showCopy=true}}</div>
</div>
<div class="col-flex">
{{#if host.cpuBlurb}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label>
<div>
{{host.cpuBlurb}}
{{#if host.cpuTooltip}}
{{#tooltip-element type='tooltip-basic' model=host tooltipTemplate='tooltip-cpu'}}
<i class="icon icon-info"></i>
{{/tooltip-element}}
{{/if}}
{{#tooltip-element type='tooltip-basic' model=host tooltipTemplate='tooltip-cpu'}}
<i class="icon icon-info"></i>
{{/tooltip-element}}
{{/if}}
</div>
<div class="col-flex">
{{#if host.memoryBlurb}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label>
{{host.memoryBlurb}}
{{else}}
<span class="text-muted">{{t 'generic.unknown'}}</span>
{{/if}}
</div>
<div class="col-flex">
{{#if host.diskBlurb}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label>
{{#if host.diskDetail}}
{{#each host.diskDetail as |disk|}}
<span style="display: inline-block; padding-right: 10px;">{{disk.value}}
</div>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label>
{{#if host.memoryBlurb}}
<div>{{host.memoryBlurb}}</div>
{{else}}
<div class="text-muted">{{t 'generic.unknown'}}</div>
{{/if}}
</div>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label>
{{#if host.diskBlurb}}
{{#if host.diskDetail}}
{{#each host.diskDetail as |disk|}}
<div>{{disk.value}}
{{#tooltip-element type='tooltip-basic' tooltipTemplate='tooltip-basic-literal' model=disk}}
<i class="icon icon-info"></i>
{{/tooltip-element}}
</span>
{{/each}}
{{else}}
{{host.diskBlurb}} (total)
{{/if}}
</div>
{{/each}}
{{else}}
<span class="text-muted">{{t 'generic.unknown'}}</span>
<div>{{host.diskBlurb}} (total)</div>
{{/if}}
</div>
{{else}}
<div class="text-muted">{{t 'generic.unknown'}}</div>
{{/if}}
</div>
<div class="container-flex bordered">
<div class="col-flex">
<label>{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label>
{{#if host.machine}}
{{host.machine.driver}}
{{else}}
<span class="text-muted">{{t 'hostsPage.hostPage.infoMultiStats.provider.noHost'}}</span>
{{/if}}
</div>
<div class="col-flex">
{{#if host.info.osInfo.kernelVersion}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label>
{{host.info.osInfo.kernelVersion}}
{{/if}}
</div>
<div class="col-flex">
{{#if host.dockerBlurb}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label>
{{host.dockerBlurb}}
{{else}}
<span class="text-muted">{{t 'generic.unknown'}}</span>
{{/if}}
</div>
<div class="col-flex">
{{#if host.osDetail}}
<label>{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label>
{{host.osDetail}}
{{else}}
<span class="text-muted">{{t 'generic.unknown'}}</span>
{{/if}}
</div>
</div>
{{#if host.description}}
<div class="row multi-stats">
<div class="col-xs-12 description">
<label>{{t 'hostsPage.hostPage.infoMultiStats.description'}} </label>
<span>{{host.description}}</span>
</div>
</div>
{{/if}}
{{/info-multi-stats}}
</section>
<section>
<ul class="nav nav-tabs nav-tabs-well shadowed" role="tablist" style="display:inline-block;">
{{#link-to "host.containers" tagName="li" href=false}}<a href="#"><i class="icon icon-box"></i> {{t 'hostsPage.hostPage.navTabs.containers'}}</a>{{/link-to}}
{{#link-to "host.ports" tagName="li" href=false}}<a href="#"><i class="icon icon-share"></i> {{t 'hostsPage.hostPage.navTabs.ports'}}</a>{{/link-to}}
{{#link-to "host.labels" tagName="li" href=false}}<a href="#"><i class="icon icon-tag"></i> {{t 'hostsPage.hostPage.navTabs.labels'}}</a>{{/link-to}}
{{#link-to "host.storage" tagName="li" href=false}}<a href="#"><i class="icon icon-hdd"></i> {{t 'hostsPage.hostPage.navTabs.storage'}}</a>{{/link-to}}
</ul>
<div class="table-flat well">
{{outlet}}
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label>
{{#if host.machine}}
<div>{{host.machine.driver}}</div>
{{else}}
<div class="text-muted">{{t 'hostsPage.hostPage.infoMultiStats.provider.noHost'}}</div>
{{/if}}
</div>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label>
<div>{{host.info.osInfo.kernelVersion}}</div>
</div>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label>
{{#if host.dockerBlurb}}
<div>{{host.dockerBlurb}}</div>
{{else}}
<div class="text-muted">{{t 'generic.unknown'}}</div>
{{/if}}
</div>
<hr>
<div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label>
{{#if host.osDetail}}
<div>{{host.osDetail}}</div>
{{else}}
<div class="text-muted">{{t 'generic.unknown'}}</div>
{{/if}}
</div>
</div>
<div class="col-md-9">
<div class="row">
{{info-multi-stats model=host linkName="hostStats" single=true}}
</div>
<div class="row r-p15">
<ul class="nav nav-tabs nav-tabs-well shadowed" role="tablist" style="display:inline-block;">
{{#link-to "host.containers" tagName="li" href=false}}<a href="#"><i class="icon icon-box"></i> {{t 'hostsPage.hostPage.navTabs.containers'}}</a>{{/link-to}}
{{#link-to "host.ports" tagName="li" href=false}}<a href="#"><i class="icon icon-share"></i> {{t 'hostsPage.hostPage.navTabs.ports'}}</a>{{/link-to}}
{{#link-to "host.labels" tagName="li" href=false}}<a href="#"><i class="icon icon-tag"></i> {{t 'hostsPage.hostPage.navTabs.labels'}}</a>{{/link-to}}
{{#link-to "host.storage" tagName="li" href=false}}<a href="#"><i class="icon icon-hdd"></i> {{t 'hostsPage.hostPage.navTabs.storage'}}</a>{{/link-to}}
</ul>
<div class="table-flat well">
{{outlet}}
</div>
</div>
</div>
</div>
</section>

264
app/mixins/hover-dropdowns.js
View File

@ -1,55 +1,90 @@
import Ember from 'ember';
import C from 'ui/utils/constants';
const DROPDOWNCLOSETIMER = 250;
const SELECTOR = '.navbar .dropdown';
const WINDOW_SM = 694;
let timerObj = null;
let dropdown = null;
export default Ember.Mixin.create({
dropdownSelector: '.navbar .dropdown',
didInsertElement: function() {
const dropdownCloseTimer = 250;
let dropdown = null;
let timerObj = null;
let selector = this.get('dropdownSelector');
let $body = Ember.$('BODY');
this.$().on('click', selector, (e) => {
let anchor = Ember.$(e.target).closest('A');
if ( anchor.hasClass('dropdown-toggle') && anchor[0].href.match(/#$/) ) {
e.preventDefault();
e.stopPropagation();
return false;
}
if ($body.hasClass('touch') && Ember.$(window).width() <= WINDOW_SM) {
timerObj = null;
dropdown = null;
// below iphone 6plus vertical width no need for dropdown logic
this.$().on('click', SELECTOR, () => {
Ember.$('#navbar').collapse('toggle');
});
let collapsedNav = Ember.$('#navbar');
} else if ($body.hasClass('touch') && Ember.$(window).width() > WINDOW_SM) {
if (collapsedNav.hasClass('in')) {
collapsedNav.collapse('toggle');
}
this.clearHeaderMenus();
});
this.$().on('mouseenter', selector, (e) => {
let anchor = Ember.$(e.currentTarget).find('a:first');
Ember.run.cancel(timerObj);
timerObj = null;
if (dropdown) { // dropdown open alread
if (dropdown.data('dropdown-id') !== Ember.$(e.currentTarget).find('ul').data('dropdown-id')) { // not the same dropdown
this.clearHeaderMenus();
dropdown = null;
dropdown = Ember.$(e.currentTarget).find('ul');
if (dropdown) {
this.showMenu(anchor, dropdown);
}
// ipad/tablet width
$body.on('touchend', (e) => {
let $el = $(e.target);
if ($el.closest('.navbar').length < 1) {
Ember.run.later(() => {
this.clearHeaderMenus();
});
}
} else { // no dropdown open
});
this.$().on('touchstart', SELECTOR, (e) => {
let $el = $(e.currentTarget).find('a.dropdown-toggle');
if ($el.attr('aria-expanded') === 'false') {
e.preventDefault();
e.stopPropagation();
this.enterHandler(e);
}
});
this.$().on('click', SELECTOR, (e) => {
let $el = $(e.currentTarget).find('a.dropdown-toggle');
if ($el.attr('aria-expanded') === 'true') {
Ember.run.next(() => {
this.clearHeaderMenus();
});
}
});
} else {
// desktop width
this.$().on('click', SELECTOR, (e) => {
this.onClickHandler(e, false);
});
this.$().on('mouseenter', SELECTOR, (e) => {
this.enterHandler(e, false);
});
this.$().on('mouseleave', SELECTOR, () => {
this.leaveHandler();
});
this.$().on('keydown', `${SELECTOR} a`, (e) => {
this.keydownHandler(e);
});
}
},
enterHandler(e) {
let anchor = Ember.$(e.currentTarget).find('a:first');
Ember.run.cancel(timerObj);
timerObj = null;
if (dropdown) { // dropdown open alread
if (dropdown.data('dropdown-id') !== Ember.$(e.currentTarget).find('ul').data('dropdown-id')) { // not the same dropdown
this.clearHeaderMenus();
dropdown = Ember.$(e.currentTarget).find('ul');
@ -57,77 +92,106 @@ export default Ember.Mixin.create({
this.showMenu(anchor, dropdown);
}
}
} else { // no dropdown open
});
dropdown = Ember.$(e.currentTarget).find('ul');
this.$().on('mouseleave', selector, () => {
timerObj = Ember.run.later(() => {
if (dropdown) {
this.showMenu(anchor, dropdown);
}
}
if (dropdown) {
},
this.clearHeaderMenus();
leaveHandler() {
timerObj = Ember.run.later(() => {
dropdown = null;
timerObj = null;
}
if (dropdown) {
}, dropdownCloseTimer);
});
this.clearHeaderMenus();
this.$().on('keydown', `${selector} a`, (e) => {
let items = this.get('items');
let currentIndex = 0;
let element = Ember.$(e.currentTarget);
let dropdownMenu = element.siblings('ul').length ? element.siblings('ul') : element.parent().parent('ul'); // if we're not in the top link we're in the ul links
if (dropdownMenu) {
items = dropdownMenu.find('li > a');
currentIndex = items.index(e.currentTarget);
if (currentIndex < 0) {
currentIndex = 0;
}
timerObj = null;
}
switch (e.which) {
case C.KEY.ESCAPE:
this.clearHeaderMenus();
element.focus();
break;
case C.KEY.SPACE:
}, DROPDOWNCLOSETIMER);
},
onClickHandler(e) {
let anchor = Ember.$(e.target).closest('A');
if ( anchor.hasClass('dropdown-toggle') && anchor[0].href.match(/#$/) ) {
e.preventDefault();
e.stopPropagation();
return false;
}
timerObj = null;
let collapsedNav = Ember.$('#navbar');
if (collapsedNav.hasClass('in')) {
collapsedNav.collapse('toggle');
}
this.clearHeaderMenus();
},
keydownHandler(e) {
let items = this.get('items');
let currentIndex = 0;
let element = Ember.$(e.currentTarget);
let dropdownMenu = element.siblings('ul').length ? element.siblings('ul') : element.parent().parent('ul'); // if we're not in the top link we're in the ul links
if (dropdownMenu) {
items = dropdownMenu.find('li > a');
currentIndex = items.index(e.currentTarget);
if (currentIndex < 0) {
currentIndex = 0;
}
}
switch (e.which) {
case C.KEY.ESCAPE:
this.clearHeaderMenus();
element.focus();
break;
case C.KEY.SPACE:
this.clearHeaderMenus();
this.showMenu(element, dropdownMenu);
break;
case C.KEY.UP:
if (currentIndex > 0) {
currentIndex--;
}
items.eq(currentIndex).focus();
break;
case C.KEY.DOWN:
let $currentTarget = $(e.currentTarget);
if (dropdownMenu && !$currentTarget.parent().parent('ul.dropdown-menu').length) {
this.clearHeaderMenus();
this.showMenu(element, dropdownMenu);
break;
case C.KEY.UP:
if (currentIndex > 0) {
currentIndex--;
dropdownMenu.addClass('block');
if (element.attr('aria-expanded') === false) {
element.attr('aria-expanded', true);
}
items.eq(currentIndex).focus();
break;
case C.KEY.DOWN:
let $currentTarget = $(e.currentTarget);
if (dropdownMenu && !$currentTarget.parent().parent('ul.dropdown-menu').length) {
this.clearHeaderMenus();
this.showMenu(element, dropdownMenu);
dropdownMenu.addClass('block');
if (element.attr('aria-expanded') === false) {
element.attr('aria-expanded', true);
}
} else {
if (currentIndex < items.length -1) {
currentIndex++;
}
} else {
if (currentIndex < items.length -1) {
currentIndex++;
}
items.eq(currentIndex).focus();
break;
default:
break;
}
});
}
items.eq(currentIndex).focus();
break;
default:
break;
}
},
showMenu: function(el, drpd) {
let body = Ember.$('BODY');
if (body.hasClass('touch')) {
Ember.$('BODY').addClass('nav-dropdown-open');
}
drpd.addClass('block');
if (el.attr('aria-expanded')) {
el.attr('aria-expanded', true);
@ -135,8 +199,14 @@ export default Ember.Mixin.create({
},
clearHeaderMenus: function() {
let body = Ember.$('BODY');
if (body.hasClass('touch')) {
Ember.$('BODY').removeClass('nav-dropdown-open');
}
const navbar = Ember.$('.navbar');
dropdown = null;
navbar.find('.dropdown-menu.block').removeClass('block');
navbar.find('a.dropdown-toggle[aria-expanded=true]').attr('aria-expanded', false);
}

2
app/styles/pages/_catalog.scss
View File

@ -79,7 +79,7 @@ $play-button-height-width: 60px;
&.machine {
font-size: 12px;
height: 220px;
height: 225px;
&.inactive-driver {
background-color: $table-bg-accent;

57
app/virtualmachine/template.hbs
View File

@ -17,9 +17,16 @@
</section>
<section>
{{#info-multi-stats model=model.vm linkName="containerStats" single=true showGraphs=false}}
<div class="container-flex bordered">
<div class="col-flex">
<div class="row">
<div class="col-md-3">
{{#if model.vm.description}}
<div>
<label>{{t 'virtualMachinePage.multistat.description'}} </label>
<span>{{model.vm.description}}</span>
</div>
<hr>
{{/if}}
<div>
<label>{{t 'virtualMachinePage.multistat.host'}}</label>
{{#if model.vm.primaryHost}}
{{#link-to "host" model.vm.primaryHost.id}}{{model.vm.primaryHost.displayName}}{{/link-to}}
@ -27,43 +34,39 @@
<span class="text-muted">Unknown</span>
{{/if}}
</div>
<div class="col-flex">
<hr>
<div>
<label>{{t 'virtualMachinePage.multistat.hostIp'}}</label>
{{format-ip ip=model.vm.primaryHost.displayIp noIp='formatIp.unknownIp' showCopy=true}}
</div>
<div class="col-flex">
<hr>
<div>
<label>{{t 'virtualMachinePage.multistat.vmIp'}}</label>
{{format-ip ip=model.vm.displayIp showCopy=true}}
</div>
</div>
<div class="container-flex bordered">
<div class="col-flex">
<hr>
<div>
<label>{{t 'virtualMachinePage.multistat.image'}}</label>
<span class="force-wrap">
{{model.vm.displayImage}} {{copy-to-clipboard clipboardText=model.vm.displayImage size="small"}}
</span>
</div>
<div class="col-flex">
</div>
<div class="col-flex">
</div>
</div>
{{#if model.vm.description}}
<div class="container-flex bordered">
<div class="col-flex">
<label>{{t 'virtualMachinePage.multistat.description'}} </label>
<span>{{model.vm.description}}</span>
<div class="col-md-9">
<div class="row r-p15">
<ul class="nav nav-tabs nav-tabs-well shadowed">
{{#link-to "virtualmachine.labels" tagName="li" href=false}}<a href="#"><i class="icon icon-tag"></i> {{t 'virtualMachinePage.navTabs.labels'}}</a>{{/link-to}}
</ul>
<div class="table-flat well">
{{outlet}}
</div>
</div>
{{/if}}
{{/info-multi-stats}}
</section>
<section>
<ul class="nav nav-tabs nav-tabs-well shadowed">
{{#link-to "virtualmachine.labels" tagName="li" href=false}}<a href="#"><i class="icon icon-tag"></i> {{t 'virtualMachinePage.navTabs.labels'}}</a>{{/link-to}}
</ul>
<div class="table-flat well">
{{outlet}}
</div>
</div>
</section>