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

Merge pull request #1190 from lvuch/appspage 

apps page and details
This commit is contained in:
Vincent Fiduccia 2017-05-22 11:05:29 -07:00 committed by GitHub
parent d1afe6e148 f20404bcce
commit e234dfb492
9 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/page-numbers/template.hbs
View File

@ -3,7 +3,7 @@
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<a class="arrow prev enabled-arrow btn bg-default" disabled={{unless (gte content.page 2) 'disabled'}} {{action "pageClicked" 1}}><span class="icon icon-chevron-beginning"></span></a> <a class="arrow prev enabled-arrow btn bg-default" disabled={{unless (gte content.page 2) 'disabled'}} {{action "pageClicked" 1}}><span class="icon icon-chevron-beginning"></span></a>
<a class="arrow prev enabled-arrow btn bg-default" disabled={{unless canStepBackward 'disabled'}} {{action "incrementPage" -1}}><span class="icon icon-chevron-left"></span></a> <a class="arrow prev enabled-arrow btn bg-default" disabled={{unless canStepBackward 'disabled'}} {{action "incrementPage" -1}}><span class="icon icon-chevron-left"></span></a>
<div class="overview-text inline-block ml-5 mr-5">{{t textLabel pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div> <div class="overview-text btn ml-5 mr-5">{{t textLabel pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div>
<a class="arrow next enabled-arrow btn bg-default" disabled={{unless canStepForward 'disabled'}} {{action "incrementPage" 1}}><span class="icon icon-chevron-right"></span></a> <a class="arrow next enabled-arrow btn bg-default" disabled={{unless canStepForward 'disabled'}} {{action "incrementPage" 1}}><span class="icon icon-chevron-right"></span></a>
<a class="arrow prev enabled-arrow btn bg-default" disabled={{if (gte content.page content.totalPages) 'disabled'}} {{action "pageClicked" content.totalPages}}><span class="icon icon-chevron-end"></span></a> <a class="arrow prev enabled-arrow btn bg-default" disabled={{if (gte content.page content.totalPages) 'disabled'}} {{action "pageClicked" content.totalPages}}><span class="icon icon-chevron-end"></span></a>
</div> </div>

13
app/components/stack-app/template.hbs
View File

@ -2,14 +2,15 @@
<div class="catalog-icon"> <div class="catalog-icon">
<img src="{{app.baseAssets}}assets/images/generic-catalog.svg" data-src={{model.catalogTemplateInfo.links.icon}}/> <img src="{{app.baseAssets}}assets/images/generic-catalog.svg" data-src={{model.catalogTemplateInfo.links.icon}}/>
</div> </div>
<div class="stack-info-row"> <div class="stack-info-row box">
<div class="stack-info-top box-borderless"> <div class="stack-info-top">
{{action-menu model=model classNames="pull-right"}} {{action-menu model=model classNames="pull-right"}}
<h2> <div>
{{#link-to "stack" projects.current.id model.id}}{{model.displayName}}{{/link-to}} {{#link-to "stack" projects.current.id model.id}}{{model.displayName}}{{/link-to}}
</h2> </div>
</div> </div>
<div class="stack-info-bottom box-borderless"> <hr>
<div class="stack-info-bottom">
<div class="multi-bar"> <div class="multi-bar">
{{progress-bar-multi {{progress-bar-multi
labelKey="state" labelKey="state"
@ -30,4 +31,4 @@
</div> </div>
</div> </div>
{{#if expanded}} {{#if expanded}}
{{/if}} {{/if}}

10
app/container/template.hbs
View File

@ -21,13 +21,13 @@
<section> <section>
<div class="row banner bg-info pl-10 pr-10"> <div class="row banner bg-info pl-10 pr-10">
<div class="col"> <div class="col">
<label class="inline-label">{{t 'generic.image'}}:</label> <label class="acc-label p-0">{{t 'generic.image'}}:</label>
{{#copy-inline clipboardText=model.container.displayImage}} {{#copy-inline clipboardText=model.container.displayImage}}
{{model.container.displayImage}} {{model.container.displayImage}}
{{/copy-inline}} {{/copy-inline}}
</div> </div>
<div class="col"> <div class="col">
<label class="inline-label">{{t 'generic.ipAddress'}}:</label> <label class="acc-label p-0">{{t 'generic.ipAddress'}}:</label>
{{#if model.container.displayIp}} {{#if model.container.displayIp}}
{{#copy-inline clipboardText=model.container.displayIp}} {{#copy-inline clipboardText=model.container.displayIp}}
{{model.container.displayIp}} {{model.container.displayIp}}
@ -38,19 +38,19 @@
</div> </div>
{{#if model.container.stack}} {{#if model.container.stack}}
<div class="col"> <div class="col">
<label class="inline-label">{{t 'generic.stack'}}:</label> <label class="acc-label p-0">{{t 'generic.stack'}}:</label>
{{#link-to "stack" projects.current.id model.container.stack.id}}{{model.container.stack.displayName}}{{/link-to}} {{#link-to "stack" projects.current.id model.container.stack.id}}{{model.container.stack.displayName}}{{/link-to}}
</div> </div>
{{/if}} {{/if}}
{{#if model.container.primaryHost}} {{#if model.container.primaryHost}}
<div class="col"> <div class="col">
<label class="inline-label">{{t 'generic.host'}}:</label> <label class="acc-label p-0">{{t 'generic.host'}}:</label>
{{#link-to "host" model.container.primaryHost.id}}{{model.container.primaryHost.displayName}}{{/link-to}} {{#link-to "host" model.container.primaryHost.id}}{{model.container.primaryHost.displayName}}{{/link-to}}
</div> </div>
{{/if}} {{/if}}
{{#if model.container.displayExternalId}} {{#if model.container.displayExternalId}}
<div class="col"> <div class="col">
<label class="inline-label">{{t 'generic.dockerId'}}:</label> <label class="acc-label p-0">{{t 'generic.dockerId'}}:</label>
{{#copy-inline clipboardText=model.container.externalId}} {{#copy-inline clipboardText=model.container.externalId}}
{{model.container.displayExternalId}} {{model.container.displayExternalId}}
{{/copy-inline}} {{/copy-inline}}

38
app/host/template.hbs
View File

@ -32,13 +32,13 @@
<section> <section>
<div class="row banner bg-info pl-10 pr-10"> <div class="row banner bg-info pl-10 pr-10">
<div class="col"> <div class="col">
<label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.ip'}}</label> <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.ip'}}</label>
{{#copy-inline clipboardText=host.displayIp}} {{#copy-inline clipboardText=host.displayIp}}
{{host.displayIp}} {{host.displayIp}}
{{/copy-inline}} {{/copy-inline}}
</div> </div>
<div class="col"> <div class="col">
<label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label> <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label>
{{#if host.dockerEngineVersion}} {{#if host.dockerEngineVersion}}
{{host.dockerEngineVersion}} {{host.dockerEngineVersion}}
{{else}} {{else}}
@ -46,7 +46,7 @@
{{/if}} {{/if}}
</div> </div>
<div class="col"> <div class="col">
<label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label> <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label>
{{#if host.driver}} {{#if host.driver}}
{{host.driver}} {{host.driver}}
{{else}} {{else}}
@ -70,7 +70,7 @@
}} }}
<div class="row"> <div class="row">
<div class="col span-6"> <div class="col span-6">
<label>{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label> <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label>
<div> <div>
{{#if host.osDetail}} {{#if host.osDetail}}
{{host.osDetail}} {{host.osDetail}}
@ -80,7 +80,7 @@
</div> </div>
</div> </div>
<div class="col span-6"> <div class="col span-6">
<label>{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label> <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label>
<div> <div>
{{host.info.osInfo.kernelVersion}} {{host.info.osInfo.kernelVersion}}
</div> </div>
@ -88,10 +88,10 @@
</div> </div>
<hr/> <hr/>
<div class="row"> <div class="row">
<div class="col span-6"> <div class="col span-6 box">
<h2>{{t 'generic.hardware'}}: </h2> <h2>{{t 'generic.hardware'}}: </h2>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label> <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label>
<div> <div>
{{host.cpuBlurb}} {{host.cpuBlurb}}
</div> </div>
@ -101,8 +101,8 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label> <label class="acc-label pt-20">{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label>
<div> <div>
{{#if host.memoryBlurb}} {{#if host.memoryBlurb}}
{{host.memoryBlurb}} {{host.memoryBlurb}}
@ -111,8 +111,8 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label> <label class="acc-label pt-20">{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label>
<div> <div>
{{#if host.diskBlurb}} {{#if host.diskBlurb}}
{{#if host.diskDetail}} {{#if host.diskDetail}}
@ -129,22 +129,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col span-6"> <div class="col span-6 box">
<h2>{{t 'generic.limits'}}: </h2> <h2>{{t 'generic.limits'}}: </h2>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.limits.cpu'}}</label> <label class="acc-label">{{t 'hostsPage.hostPage.limits.cpu'}}</label>
<div> <div>
{{host.milliCpu}} {{t 'hostsPage.hostPage.infoMultiStats.milliCpu.labelText'}} {{host.milliCpu}} {{t 'hostsPage.hostPage.infoMultiStats.milliCpu.labelText'}}
</div> </div>
</div> </div>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.limits.memory'}}</label> <label class="acc-label pt-20">{{t 'hostsPage.hostPage.limits.memory'}}</label>
<div> <div>
{{host.memoryLimitBlurb}} {{host.memoryLimitBlurb}}
</div> </div>
</div> </div>
<div class="col span-12"> <div>
<label>{{t 'hostsPage.hostPage.limits.storage'}}</label> <label class="acc-label pt-20">{{t 'hostsPage.hostPage.limits.storage'}}</label>
<div> <div>
{{host.localStorageBlurb}} {{host.localStorageBlurb}}
</div> </div>

4
app/styles/abstracts/_mixins.scss
View File

@ -6,11 +6,11 @@
///Sets base color and darkens bg on hover ///Sets base color and darkens bg on hover
@mixin bg-color($bg) { @mixin bg-color($bg) {
background: $bg; background: $bg;
&.btn:hover, a:hover { &.btn:hover{
background:darken($bg,10%); background:darken($bg,10%);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
&.btn:active, a:focus { &.btn:active {
background:darken($bg,25%); background:darken($bg,25%);
} }
} }

4
app/styles/components/_accordion.scss
View File

@ -63,10 +63,6 @@ $accordion-header-border: $bg-default;
.physical-attrs { .physical-attrs {
.accordion-content { .accordion-content {
label,
h2 {
@extend .text-muted;
}
> .row > .col.span-6 > .col.span-12 { > .row > .col.span-6 > .col.span-12 {
padding: 10px; padding: 10px;
border-bottom: 1px solid $accent-border; border-bottom: 1px solid $accent-border;

10
app/styles/components/_stack-app.scss
View File

@ -1,6 +1,5 @@
.stack-app { .stack-app {
margin-bottom: 20px; margin-bottom: 20px;
border: 2px solid $table-border-color;
position: relative; position: relative;
float: left; float: left;
width: calc(50% - 15px); width: calc(50% - 15px);
@ -15,17 +14,19 @@
} }
.catalog-icon { .catalog-icon {
@include catalog-img(transparent); @include catalog-img(transparent);
border-right: 1px solid $border; border: 1px solid $accent-border;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
width: 105px; width: 120px;
padding: 0 10px;
} }
.stack-info-row { .stack-info-row {
display: table-cell; display: table-cell;
margin: 0 10px;
padding: 0 20px;
.stack-info-top, .stack-info-top,
.stack-info-bottom { .stack-info-bottom {
height: calc(105px/2); height: calc(105px/2);
padding: 10px;
} }
.stack-info-bottom { .stack-info-bottom {
.multi-bar { .multi-bar {
@ -36,7 +37,6 @@
} }
.stack-info-top { .stack-info-top {
padding-top: 20px; padding-top: 20px;
border-bottom: 1px solid $border;
} }
} }
} }

1
app/styles/pages/_host.scss
View File

@ -200,6 +200,7 @@ ol > li {
padding: 10px 20px; padding: 10px 20px;
list-style: none; list-style: none;
background: $accent-bg; background: $accent-bg;
border: solid $accent-border 1px;
} }
ol > li::before { ol > li::before {
content: counter(li); content: counter(li);

4
translations/en-us.yaml
View File

@ -792,9 +792,9 @@ hostsPage:
provider: provider:
labelText: 'Provider:' labelText: 'Provider:'
noHost: Custom noHost: Custom
kernel: 'Kernel:' kernel: 'Kernel'
docker: 'Docker:' docker: 'Docker:'
os: 'OS:' os: 'OS'
description: 'Description:' description: 'Description:'
milliCpu: milliCpu:
labelText: mCPU labelText: mCPU