Accordions and Container create

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');
+    },
+  },
+});

app/components/accordion-row/template.hbs

@@ -0,0 +1,21 @@
+<table width="100%" class="hand" {{action "toggle"}}>
+  <tbody>
+    <tr>
+      <td class="pl-10">
+        <i role="button" class="icon icon-play eased text-small text-muted {{if expanded 'icon-rotate-90'}}"></i>
+        {{title}}
+      </td>
+      <td rowspan="2" class="pr-10 text-right {{statusClass}}">
+        {{status}}
+      </td>
+    </tr>
+    <tr>
+      <td class="pl-10">
+        <p class="help-block">{{detail}}</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="p-10 {{unless expanded 'hide'}}">
+  {{yield}}
+</div>

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);
+      }
     });
   }
 });

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) {

app/components/container/form-ports/template.hbs

@@ -1,27 +1,28 @@
-<div class="row inline-form">
-  <div class="col span-12">
-    {{#unless editing}}
-      <div>
-        <button class="btn bg-link icon-btn" {{action "addPort"}}>
-          <i class="icon icon-plus text-small"/> 
-          <span>{{t 'formPorts.addAction'}}</span>
-        </button>
+<div class="clearfix">
+  <label>{{t 'formPorts.header'}}</label>
+  {{#if (and portsArray.length (not showIp))}}
+    <div class="pull-right text-small">
+      <a role="button" class="btn bg-transparent p-0" {{action "showIp"}}>
+        {{t 'formPorts.showIpLink'}}
+      </a>
     </div>
-    {{/unless}}
-    {{#if portsArray.length}}
-      <table class="table fixed no-lines no-top-padding small">
-        <thead>
+  {{/if}}
+</div>
+
+{{#if portsArray.length}}
+  <table class="table fixed no-lines small mt-10">
     <tr class="text-muted hidden-sm">
       {{#if showIp}}
         <th>{{t 'formPorts.bindAddress.label'}}</th>
+        <th width="10"></th>
       {{/if}}
       <th>{{t 'formPorts.public.label'}}</th>
+      <th width="10"></th>
       <th>{{t 'formPorts.private.label'}}</th>
+      <th width="10"></th>
       <th width="80">{{t 'formPorts.protocol.label'}}</th>
       <th width="40">&nbsp;</th>
     </tr>
-        </thead>
-        <tbody>
     {{#each portsArray as |port|}}
       <tr>
         {{#if showIp}}
@@ -36,11 +37,13 @@
               {{input class="form-control input-sm" type="text" value=port.bindAddress placeholder=(t 'formPorts.bindAddress.placeholder')}}
             {{/if}}
           </td>
+          <td>&nbsp;</td>
         {{/if}}
 
         <td data-title="{{t 'formPorts.public.label'}}">
-                {{input-integer class="form-control input-sm" min="1" max="65535" value=port.public placeholder=(t 'formPorts.public.placeholder')}}
+          {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.public placeholder=(t 'formPorts.public.placeholder')}}
         </td>
+        <td>&nbsp;</td>
 
         <td data-title="{{t 'formPorts.private.label'}}">
           {{#if port.existing}}
@@ -49,6 +52,7 @@
             {{input-integer class="form-control input-sm" min="1" max="65535" value=port.private placeholder=(t 'formPorts.private.placeholder')}}
           {{/if}}
         </td>
+        <td>&nbsp;</td>
 
         <td data-title="{{t 'formPorts.protocol.label'}}">
           {{#if port.existing}}
@@ -65,22 +69,23 @@
           {{#if port.existing}}
             &nbsp;
           {{else}}
-                  <button class="btn bg-primary btn-sm" {{action "removePort" port}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
+            <button class="btn bg-primary btn-sm" {{action "removePort" port}}>
+              <i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span>
+            </button>
           {{/if}}
         </td>
       </tr>
     {{/each}}
-        </tbody>
   </table>
-      {{#unless showIp}}
-        <a href="#" class="text-small" {{action "showIp"}}>
-          {{t 'formPorts.showIpLink'}}
-        </a>
-      {{/unless}}
-    {{else}}
+{{else}}
   {{#if editing}}
     <span class="text-center text-muted">{{t 'formPorts.noPorts'}}</span>
   {{/if}}
-    {{/if}}
-  </div>
+{{/if}}
+
+<div class="pt-10">
+  <button class="btn bg-link icon-btn p-0" {{action "addPort"}}>
+    <i class="icon icon-plus text-small"/>
+    <span>{{t 'formPorts.addAction'}}</span>
+  </button>
 </div>

app/components/container/form-scale/template.hbs

@@ -17,6 +17,7 @@
 </div>
 
 {{#if showAdvanced}}
+  <div class="pt-10">
     <div class="radio">
       <label>{{radio-button selection=mode value="container"}} {{t 'formScale.mode.container' scale=asInteger}}</label>
     </div>
@@ -26,4 +27,5 @@
     <div class="radio">
       <label>{{radio-button selection=mode value="global"}} {{t 'formScale.mode.global' scale=asInteger}}</label>
     </div>
+  </div>
 {{/if}}

app/components/container/new-edit/template.hbs

@@ -2,8 +2,8 @@
   <h1>{{t headerToken}}</h1>
 </section>
 
-<section class="row">
-  <div class="col span-6">
+<div class="row">
+  <div class="col span-11-of-24">
     {{form-name-description
       model=primaryResource
       nameLabel=nameToken
@@ -22,7 +22,8 @@
       changed=(action 'setImage')
     }}
   </div>
-<div class="col span-5 offset-1">
+
+  <div class="col span-11-of-24 offset-1-of-24">
     {{container/form-scale
       initialLabels=launchConfig.labels
       initialScale=service.scale
@@ -39,10 +40,12 @@
       errors=stackErrors
     }}
   </div>
-</section>
+</div>
 
-<section class="row">
-  <div class="col span-6">
+<hr/>
+
+<div class="row">
+  <div class="col span-11-of-24">
     {{container/form-ports
       initialPorts=launchConfig.ports
       errors=portErrors
@@ -50,18 +53,62 @@
       portsAsStrArray=launchConfig.ports
     }}
   </div>
+  <div class="col span-11-of-24 offset-1-of-24">
+    {{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"
+    }}
+  </div>
+</div>
 
-  <div class="col span-6">
+<hr/>
+
+{{#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}}
+
+<hr/>
+
+<div class="col span-11-of-24 offset-1-of-24">
   {{#if (and isService (not isSidekick))}}
     {{form-service-links
       service=service
       changed=(action 'setServiceLinks')
     }}
   {{/if}}
-  </div>
-</section>
+</div>
 
-  <section>
+<section>
   <div class="tabs">
     <ul class="tab-header" style="display: inline-block" role="tablist">
       <li role="tab" aria-controls="panel" class="tab" data-section="command" {{action "selectTab" "command"}}>
@@ -81,13 +128,6 @@
         <li role="tab" aria-controls="panel" class="tab" data-section="secrets" {{action "selectTab" "secrets"}}><a href="#">{{t 'newContainer.tabs.secrets'}}</a></li>
       {{/if}}
 
-      <li role="tab" aria-controls="panel" class="tab" data-section="healthcheck" {{action "selectTab" "healthcheck"}}>
-        <a href="#">{{t 'newContainer.tabs.healthCheck'}}</a>
-      </li>
-
-      <li role="tab" aria-controls="panel" class="tab" data-section="labels" {{action "selectTab" "labels"}}>
-        <a href="#">{{t 'newContainer.tabs.labels'}}</a>
-      </li>
       <li role="tab" aria-controls="panel" class="tab" data-section="scheduling" {{action "selectTab" "scheduling"}}>
         <a href="#">{{t 'newContainer.tabs.scheduling'}}</a>
       </li>
@@ -147,21 +187,6 @@
       </div>
     {{/if}}
 
-    <div class="section" data-section="healthcheck">
-      {{form-healthcheck
-        isService=isService
-        healthCheck=launchConfig.healthCheck
-        errors=healthCheckErrors
-        editing=true}}
-    </div>
-
-    <div class="section" data-section="labels">
-      {{form-user-labels
-        initialLabels=launchConfig.labels
-        setLabels=(action 'setLabels' 'user')
-      }}
-    </div>
-
     <div class="section" data-section="scheduling">
       {{form-scheduling
         isService=isService

app/components/form-command/template.hbs

@@ -161,23 +161,3 @@
     </div>
   {{/if}}
 {{/if}}
-
-<div class="row">
-  <div class="col span-2 col-inline">
-    <label>{{t 'formCommand.environment.label'}}</label>
-  </div>
-
-  <div class="col span-8">
-    {{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
-    }}
-  </div>
-</div>

app/components/form-key-value/template.hbs

@@ -1,17 +1,11 @@
 <div class="clearfix">
   {{#if header}}
-    <label style="margin-top: 8px;">{{header}}</label>
-  {{/if}}
-  {{#if editing}}
-    <button class="btn bg-link icon-btn {{if header 'pull-right'}}" {{action "add"}}>
-      <i class="icon icon-plus text-small"/>
-      <span>{{t addActionLabel}}</span>
-    </button>
+    <label>{{header}}</label>
   {{/if}}
 </div>
 
 {{#if ary.length}}
-  <table class="table fixed no-lines mt-20">
+  <table class="table fixed no-lines small mt-10">
     <tr class="text-muted hidden-xs hidden-sm">
       <th>{{t keyLabel}}</th>
       <th width="30">&nbsp;</th>
@@ -30,7 +24,7 @@
 
         <td class="valign-top text-center">
           {{#if editing}}
-            <p class="input-sm">{{t 'formKeyValue.separator'}}</p>
+            {{t 'formKeyValue.separator'}}
           {{/if}}
         </td>
 
@@ -54,13 +48,22 @@
       </tr>
     {{/each}}
   </table>
-  {{#if editing}}
-    <div class="text-info" style="font-size: 12px; margin-bottom: 12px;">
-      {{t 'formKeyValue.protip'}}
-    </div>
-  {{/if}}
 {{else}}
   {{#unless editing}}
     <div>{{t 'generic.none'}}</div>
   {{/unless}}
 {{/if}}
+
+{{#if editing}}
+  <div class="pt-10">
+    <button class="btn bg-link icon-btn p-0" {{action "add"}}>
+      <i class="icon icon-plus text-small"/>
+      <span>{{t addActionLabel}}</span>
+    </button>
+    {{#if ary.length}}
+      <div class="help-block">
+        {{t 'formKeyValue.protip'}}
+      </div>
+    {{/if}}
+  </div>
+{{/if}}

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.

app/styles/components/_accordion.scss

@@ -0,0 +1,8 @@
+.accordion {
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

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;
         }
     }
 

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