From 72ade82609b78dab2cd134eab73f5fbe5137b51e Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Thu, 6 Apr 2017 18:53:52 -0700 Subject: [PATCH] Accordions and Container create --- app/components/accordion-row/component.js | 13 ++ app/components/accordion-row/template.hbs | 21 +++ .../cloud-host-add-or-edit/component.js | 9 +- .../container/form-ports/component.js | 8 +- .../container/form-ports/template.hbs | 175 +++++++++--------- .../container/form-scale/template.hbs | 18 +- .../container/new-edit/template.hbs | 101 ++++++---- app/components/form-command/template.hbs | 20 -- app/components/form-key-value/template.hbs | 31 ++-- app/styles/_rancher.scss | 1 + app/styles/components/_accordion.scss | 8 + app/styles/components/_tables.scss | 7 +- translations/en-us.yaml | 33 ++-- 13 files changed, 260 insertions(+), 185 deletions(-) create mode 100644 app/components/accordion-row/component.js create mode 100644 app/components/accordion-row/template.hbs create mode 100644 app/styles/components/_accordion.scss diff --git a/app/components/accordion-row/component.js b/app/components/accordion-row/component.js new file mode 100644 index 000000000..16eca3a53 --- /dev/null +++ b/app/components/accordion-row/component.js @@ -0,0 +1,13 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + projects: Ember.inject.service(), + classNames: ['accordion'], + expanded: false, + + actions: { + toggle() { + this.toggleProperty('expanded'); + }, + }, +}); diff --git a/app/components/accordion-row/template.hbs b/app/components/accordion-row/template.hbs new file mode 100644 index 000000000..5c07788f0 --- /dev/null +++ b/app/components/accordion-row/template.hbs @@ -0,0 +1,21 @@ + + + + + + + + + + +
+ + {{title}} + + {{status}} +
+

{{detail}}

+
+
+ {{yield}} +
diff --git a/app/components/cloud-host-add-or-edit/component.js b/app/components/cloud-host-add-or-edit/component.js index a45b5fe15..06cb011bd 100644 --- a/app/components/cloud-host-add-or-edit/component.js +++ b/app/components/cloud-host-add-or-edit/component.js @@ -57,8 +57,15 @@ export default Ember.Component.extend(Driver, { } }); + let errors = []; return modelOut.save().catch((err) => { - this.get('errors').pushObject(err); + errors.pushObject(err); + }).finally(() => { + if ( errors.length ) { + this.set('errors', errors); + } else { + this.set('errors', null); + } }); } }); diff --git a/app/components/container/form-ports/component.js b/app/components/container/form-ports/component.js index d90b62010..e34dbcd0c 100644 --- a/app/components/container/form-ports/component.js +++ b/app/components/container/form-ports/component.js @@ -14,7 +14,6 @@ export default Ember.Component.extend({ // Ignore the ID and force each initial port to be considered 'new' (for clone) editing : false, - tagName : '', portsArray : null, portsAsStrArray : null, protocolOptions : protocolOptions, @@ -85,6 +84,13 @@ export default Ember.Component.extend({ actions: { addPort() { this.get('portsArray').pushObject({public: '', private: '', protocol: 'tcp'}); + Ember.run.next(() => { + if ( this.isDestroyed || this.isDestroying ) { + return; + } + + this.$('INPUT.public').last()[0].focus(); + }); }, removePort(obj) { diff --git a/app/components/container/form-ports/template.hbs b/app/components/container/form-ports/template.hbs index f5db87201..53eebed69 100644 --- a/app/components/container/form-ports/template.hbs +++ b/app/components/container/form-ports/template.hbs @@ -1,86 +1,91 @@ -
-
- {{#unless editing}} -
- -
- {{/unless}} - {{#if portsArray.length}} - - - - {{#if showIp}} - - {{/if}} - - - - - - - - {{#each portsArray as |port|}} - - {{#if showIp}} - - {{/if}} - - - - - - - - - - {{/each}} - -
- {{#if port.existing}} - {{#if port.bindAddress}} - {{port.bindAddress}} - {{else}} - {{t 'generic.any'}} - {{/if}} - {{else}} - {{input class="form-control input-sm" type="text" value=port.bindAddress placeholder=(t 'formPorts.bindAddress.placeholder')}} - {{/if}} - - {{input-integer class="form-control input-sm" min="1" max="65535" value=port.public placeholder=(t 'formPorts.public.placeholder')}} - - {{#if port.existing}} -
{{port.private}}
- {{else}} - {{input-integer class="form-control input-sm" min="1" max="65535" value=port.private placeholder=(t 'formPorts.private.placeholder')}} - {{/if}} - 		- {{#if port.existing}} -
{{upper-case port.protocol}}
- {{else}} - {{new-select - class="form-control input-sm" - content=protocolOptions - value=port.protocol}} - {{/if}} - 		- {{#if port.existing}} -   - {{else}} - - {{/if}} -
- {{#unless showIp}} - - {{t 'formPorts.showIpLink'}} - - {{/unless}} - {{else}} - {{#if editing}} - {{t 'formPorts.noPorts'}} - {{/if}} - {{/if}} -
+
+ + {{#if (and portsArray.length (not showIp))}} +
+ + {{t 'formPorts.showIpLink'}} + +
+ {{/if}} +
+ +{{#if portsArray.length}} + + + {{#if showIp}} + + + {{/if}} + + + + + + + + {{#each portsArray as |port|}} + + {{#if showIp}} + + + {{/if}} + + + + + + + + + + + + {{/each}} +
+ {{#if port.existing}} + {{#if port.bindAddress}} + {{port.bindAddress}} + {{else}} + {{t 'generic.any'}} + {{/if}} + {{else}} + {{input class="form-control input-sm" type="text" value=port.bindAddress placeholder=(t 'formPorts.bindAddress.placeholder')}} + {{/if}} +   + {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.public placeholder=(t 'formPorts.public.placeholder')}} +   + {{#if port.existing}} +
{{port.private}}
+ {{else}} + {{input-integer class="form-control input-sm" min="1" max="65535" value=port.private placeholder=(t 'formPorts.private.placeholder')}} + {{/if}} + 		  + {{#if port.existing}} +
{{upper-case port.protocol}}
+ {{else}} + {{new-select + class="form-control input-sm" + content=protocolOptions + value=port.protocol}} + {{/if}} + 		+ {{#if port.existing}} +   + {{else}} + + {{/if}} +
+{{else}} + {{#if editing}} + {{t 'formPorts.noPorts'}} + {{/if}} +{{/if}} + +
+
diff --git a/app/components/container/form-scale/template.hbs b/app/components/container/form-scale/template.hbs index dbe367e35..27bd52504 100644 --- a/app/components/container/form-scale/template.hbs +++ b/app/components/container/form-scale/template.hbs @@ -17,13 +17,15 @@
{{#if showAdvanced}} -
- -
-
- -
-
- +
+
+ +
+
+ +
+
+ +
{{/if}} diff --git a/app/components/container/new-edit/template.hbs b/app/components/container/new-edit/template.hbs index 2ce3f5673..230120550 100644 --- a/app/components/container/new-edit/template.hbs +++ b/app/components/container/new-edit/template.hbs @@ -2,8 +2,8 @@

{{t headerToken}}

-
-
+
+
{{form-name-description model=primaryResource nameLabel=nameToken @@ -22,7 +22,8 @@ changed=(action 'setImage') }}
-
+ +
{{container/form-scale initialLabels=launchConfig.labels initialScale=service.scale @@ -39,10 +40,12 @@ errors=stackErrors }}
-
+
-
-
+
+ +
+
{{container/form-ports initialPorts=launchConfig.ports errors=portErrors @@ -50,18 +53,62 @@ portsAsStrArray=launchConfig.ports }}
- -
- {{#if (and isService (not isSidekick))}} - {{form-service-links - service=service - changed=(action 'setServiceLinks') - }} - {{/if}} +
+ {{form-key-value + initialMap=launchConfig.environment + changed=(action (mut launchConfig.environment)) + allowEmptyValue=true + editing=true + header=(t 'newContainer.environment.label') + addActionLabel="newContainer.environment.addAction" + keyLabel="newContainer.environment.keyLabel" + keyPlaceholder="newContainer.environment.keyPlaceholder" + valueLabel="newContainer.environment.valueLabel" + valuePlaceholder="newContainer.environment.valuePlaceholder" + }}
-
+ -
+
+ +{{#accordion-row + title="Health Check" + status=(if launchConfig.healthCheck (if healthCheckErrors.length "Incomplete" "Configured") "Not Configured") + statusClass=(if launchConfig.healthCheck (if healthCheckErrors.length "text-bold text-error" "text-bold text-success") "text-muted") + detail="A health check allows Rancher to know whether your container is healthy. For scaling groups, an unhealthy container can be automatically replaced with a new one." +}} + {{form-healthcheck + isService=isService + healthCheck=launchConfig.healthCheck + errors=healthCheckErrors + editing=true + }} +{{/accordion-row}} + +{{#accordion-row + title="Labels" + status=(if userLabels.length (concat-str userLabels.length "Configured") "None") + statusClass=(if userLabels.length "text-bold text-success" "text-muted") + detail="Labels are key/value pairs that can be used to annotate containers and make scheduling decisions." +}} + {{form-user-labels + initialLabels=launchConfig.labels + setLabels=(action 'setLabels' 'user') + }} +{{/accordion-row}} + +
+ +
+ {{#if (and isService (not isSidekick))}} + {{form-service-links + service=service + changed=(action 'setServiceLinks') + }} + {{/if}} +
+ +
{{/if}} -
- {{form-healthcheck - isService=isService - healthCheck=launchConfig.healthCheck - errors=healthCheckErrors - editing=true}} -
- -
- {{form-user-labels - initialLabels=launchConfig.labels - setLabels=(action 'setLabels' 'user') - }} -
-
{{form-scheduling isService=isService diff --git a/app/components/form-command/template.hbs b/app/components/form-command/template.hbs index a7f50bd2a..310b6399c 100644 --- a/app/components/form-command/template.hbs +++ b/app/components/form-command/template.hbs @@ -161,23 +161,3 @@
{{/if}} {{/if}} - -
-
- -
- -
- {{form-key-value - initialMap=instance.environment - changed=(action (mut instance.environment)) - addActionLabel="formCommand.environment.addAction" - keyLabel="formCommand.environment.keyLabel" - keyPlaceholder="formCommand.environment.keyPlaceholder" - valueLabel="formCommand.environment.valueLabel" - valuePlaceholder="formCommand.environment.valuePlaceholder" - allowEmptyValue=true - editing=editing - }} -
-
diff --git a/app/components/form-key-value/template.hbs b/app/components/form-key-value/template.hbs index 6bbe7bf05..0bbb170c6 100644 --- a/app/components/form-key-value/template.hbs +++ b/app/components/form-key-value/template.hbs @@ -1,17 +1,11 @@
{{#if header}} - - {{/if}} - {{#if editing}} - + {{/if}}
{{#if ary.length}} - +
@@ -30,7 +24,7 @@ @@ -54,13 +48,22 @@ {{/each}}
- {{#if editing}} -
- {{t 'formKeyValue.protip'}} -
- {{/if}} {{else}} {{#unless editing}}
{{t 'generic.none'}}
{{/unless}} {{/if}} + +{{#if editing}} +
+ + {{#if ary.length}} +
+ {{t 'formKeyValue.protip'}} +
+ {{/if}} +
+{{/if}} diff --git a/app/styles/_rancher.scss b/app/styles/_rancher.scss index e342cb9a2..a8ee6ec73 100644 --- a/app/styles/_rancher.scss +++ b/app/styles/_rancher.scss @@ -85,6 +85,7 @@ @import "app/styles/components/page-header"; @import "app/styles/components/nav"; @import "app/styles/components/over-hr"; +@import "app/styles/components/accordion"; // Pages // Pages that have their own styles. diff --git a/app/styles/components/_accordion.scss b/app/styles/components/_accordion.scss new file mode 100644 index 000000000..1445e0426 --- /dev/null +++ b/app/styles/components/_accordion.scss @@ -0,0 +1,8 @@ +.accordion { + margin-bottom: 10px; + border: 1px solid #ddd; + + &:last-child { + margin-bottom: 0; + } +} diff --git a/app/styles/components/_tables.scss b/app/styles/components/_tables.scss index 19c72400a..781b59788 100644 --- a/app/styles/components/_tables.scss +++ b/app/styles/components/_tables.scss @@ -200,8 +200,12 @@ TABLE { transition: all ease-in-out .2s; &.fixed-header { background: $link-color; - TH .btn { + TH { + color: white; + + .btn { color: white; + } } } > TH { @@ -212,7 +216,6 @@ TABLE { transition: all ease-in-out .3s; text-align: left; font-weight: normal; - color: white; } } diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 40748e802..452a122c7 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -1759,7 +1759,7 @@ formCommand: label: Command placeholder: e.g. /usr/sbin/httpd -f httpd.conf entryPoint: - label: Entry Point + label: Entrypoint placeholder: e.g. /bin/sh workingDir: label: Working Dir @@ -1786,13 +1786,6 @@ formCommand: other {times} } always: Always - environment: - label: Environment - addAction: Add Environment Variable - keyLabel: Variable - keyPlaceholder: e.g. FOO - valueLabel: Value - valuePlaceholder: e.g. bar formContainerLinks: label: Links @@ -1918,7 +1911,7 @@ formKeyValue: value: label: Value placeholder: Value - protip: 'ProTip: Paste one or more lines of key=value pairs into any key field for easy bulk entry.' + protip: 'ProTip: Paste lines of key=value pairs into any key field for easy bulk entry.' formImage: label: Docker Image @@ -1982,15 +1975,16 @@ formNetwork: addActionLabel: Add Domain formPorts: - addAction: Port Map + header: Port Mapping + addAction: Add Port bindAddress: - label: Public Host IP - placeholder: "e.g. 1.2.3.4; Default: any" + label: Host IP + placeholder: "Default: All" public: - label: Public Host Port + label: Host Port placeholder: "e.g. 80" private: - label: Private Container Port + label: Container Port placeholder: "e.g. 8080" protocol: label: Protocol @@ -2004,10 +1998,10 @@ formPorts: formScale: label: Scale - showAdvanced: Other scaling options + showAdvanced: More scaling options mode: container: "{scale, plural, =1 {Just create a container} other {Create # separate containers}}" - service: "Create a scaling group with scale of {scale}" + service: "Create a scaling group with a scale of {scale}" global: "Create a global scaling group with {scale, plural, =1 {# container} other {# containers}} per host" formScheduling: @@ -3106,6 +3100,13 @@ newContainer: placeholder: e.g. myapp description: placeholder: e.g. My Application + environment: + label: Environment Variables + addAction: Add Variable + keyLabel: Variable + keyPlaceholder: e.g. FOO + valueLabel: Value + valuePlaceholder: e.g. bar emptyPrimaryService: "(Primary Service)" emptySidekick: "(Sidekick #{num})" addSidekickContainer: Add Sidekick Container