Move log options

app/components/container/form-command/component.js

@@ -18,6 +18,13 @@ export default Ember.Component.extend(ManageLabels, {
     this.initTerminal();
     this.initStartOnce();
     this.initRestart();
+    this.initLogging();
+  },
+
+  actions: {
+    setLogDriver: function(driver) {
+      this.set('instance.logConfig.driver', driver);
+    },
   },
 
   updateLabels(labels) {
@@ -155,4 +162,39 @@ export default Ember.Component.extend(ManageLabels, {
     this.set('statusClass', classForStatus(k));
     return this.get('intl').t(`${STATUS_INTL_KEY}.${k}`);
   }.property('instance.{command,entryPoint,workingDir}','errors.length'),
+
+  // ----------------------------------
+  // Logging
+  // ----------------------------------
+  initLogging: function() {
+    if (!this.get('instance.logConfig') ) {
+      this.set('instance.logConfig', {});
+    }
+
+    if (!this.get('instance.logConfig.driver') ) {
+      this.set('instance.logConfig.driver', '');
+    }
+
+    if (!this.get('instance.logConfig.config') ) {
+      this.set('instance.logConfig.config', {});
+    }
+  },
+
+  logDriverChoices: [
+    'none',
+    'json-file',
+    'awslogs',
+    'etwlogs',
+    'fluentd',
+    'gcplogs',
+    'gelf',
+    'journald',
+    'splunk',
+    'syslog',
+  ],
+
+  hasLogConfig: Ember.computed('instance.logConfig.config', function() {
+    return Ember.isEmpty(this.get('instance.logConfig.config'));
+  }),
+
 });

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

@@ -106,4 +106,30 @@
       {{/if}}
     </div>
   </div>
+
+  <div class="row inline-form">
+    <div class="col span-6">
+      <div class="col-inline">
+        <label>{{t 'formCommand.logDriver.label'}}</label>
+      </div>
+      {{#input-or-display editable=editing value=instance.logConfig.driver}}
+        {{input-suggest
+          value=instance.logConfig.driver
+          choices=logDriverChoices
+          placeholder=(t 'formCommand.logDriver.placeholder')
+        }}
+      {{/input-or-display}}
+    </div>
+    <div class="col span-6 col-inline">
+      <label>{{t 'formCommand.logConfig.label'}}</label>
+      {{form-key-value
+        initialMap=instance.logConfig.config
+        changed=(action (mut instance.logConfig.config))
+        addActionLabel="formCommand.logConfig.addActionLabel"
+        keyPlaceholder="formCommand.logConfig.keyPlaceholder"
+        valuePlaceholder="formCommand.logConfig.valuePlaceholder"
+        editing=editing
+      }}
+    </div>
+  </div>
 {{/accordion-row}}

app/components/container/form-networking/component.js

@@ -17,6 +17,8 @@ export default Ember.Component.extend(ManageLabels, ContainerChoices,{
   retainWasSetOnInit:  false,
   editing:             true,
 
+  classNames: ['accordion-wrapper'],
+
   init() {
     this._super(...arguments);
     this.initLabels(this.get('initialLabels'), null, [C.LABEL.DNS, C.LABEL.HOSTNAME_OVERRIDE, C.LABEL.REQUESTED_IP]);

app/components/container/form-security/component.js

@@ -5,6 +5,8 @@ import ManageLabels from 'ui/mixins/manage-labels';
 export default Ember.Component.extend(ManageLabels, {
   projects: Ember.inject.service(),
 
+  classNames: ['accordion-wrapper'],
+
   // Inputs
   instance: null,
   editing: true,
@@ -20,10 +22,6 @@ export default Ember.Component.extend(ManageLabels, {
       this.get('devicesArray').removeObject(obj);
     },
 
-    setLogDriver: function(driver) {
-      this.set('instance.logConfig.driver', driver);
-    },
-
     modifyCapabilities: function(type, select) {
       let options = Array.prototype.slice.call(select.target.options, 0);
       let selectedOptions = [];
@@ -44,15 +42,12 @@ export default Ember.Component.extend(ManageLabels, {
     var pull = this.getLabel(C.LABEL.PULL_IMAGE) === C.LABEL.PULL_IMAGE_VALUE;
     this.set('pullImage', pull);
 
-    if ( this.get('projects.current.isWindows') ) {
-    } else {
+    if ( !this.get('projects.current.isWindows') ) {
       this.initCapability();
       this.initDevices();
       this.initMemory();
       this.initPidMode();
     }
-
-    this.initLogging();
   },
 
   // ----------------------------------
@@ -200,37 +195,6 @@ export default Ember.Component.extend(ManageLabels, {
     out.endPropertyChanges();
   }.observes('devicesArray.@each.{host,container,permissions}'),
 
-  initLogging: function() {
-    if (!this.get('instance.logConfig') ) {
-      this.set('instance.logConfig', {});
-    }
-
-    if (!this.get('instance.logConfig.driver') ) {
-      this.set('instance.logConfig.driver', '');
-    }
-
-    if (!this.get('instance.logConfig.config') ) {
-      this.set('instance.logConfig.config', {});
-    }
-  },
-
-  logDriverChoices: [
-    'none',
-    'json-file',
-    'awslogs',
-    'etwlogs',
-    'fluentd',
-    'gcplogs',
-    'gelf',
-    'journald',
-    'splunk',
-    'syslog',
-  ],
-
-  hasLogConfig: Ember.computed('instance.logConfig.config', function() {
-    return Ember.isEmpty(this.get('instance.logConfig.config'));
-  }),
-
   isolationChoices: function() {
     return [
       {label: 'formSecurity.isolation.default', value: 'default'},

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

@@ -6,7 +6,16 @@
 }}
   <div class="row">
     <div class="col span-12 radio r-mb0">
-      <label class="form-control-static r-pl0">{{input type="checkbox" checked=pullImage}} {{t 'formImage.pullImage.label'}}</label>
+      <label>{{t 'formSecurity.pullImage.label'}}</label>
+      {{#if editing}}
+        <div class="radio small mt-10">
+          <label>{{radio-button selection=pullImage value=false}} {{t 'formSecurity.pullImage.disable'}}</label>
+        </div>
+        <div class="radio small mt-10">
+          <label>{{radio-button selection=pullImage value=true}} {{t 'formSecurity.pullImage.enable'}}</label>
+        </div>
+      {{else}}
+      {{/if}}
     </div>
   </div>
 
@@ -262,43 +271,4 @@
       </div>
     </div>
   {{/if}}
-
-  <div class="row">
-    <div class="col span-2 col-inline">
-      <label>{{t 'formSecurity.logDriver.label'}}</label>
-    </div>
-
-    <div class="col span-8">
-      {{#input-or-display editable=editing value=instance.logConfig.driver}}
-        <div class="input-group">
-          {{input type="text" value=instance.logConfig.driver classNames="form-control" placeholder=(t 'formSecurity.logDriver.placeholder')}}
-          <div class="input-group-btn">
-            <button type="button" class="btn bg-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon icon-chevron-down"></i></button>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu">
-              {{#each logDriverChoices as |value|}}
-                <li><a {{action "setLogDriver" value}}>{{value}}</a></li>
-              {{/each}}
-            </ul>
-          </div>
-        </div>
-      {{/input-or-display}}
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col span-2 col-inline">
-      <label>{{t 'formSecurity.logOptions.label'}}</label>
-    </div>
-
-    <div class="col span-8">
-      {{form-key-value
-        initialMap=instance.logConfig.config
-        changed=(action (mut instance.logConfig.config))
-        addActionLabel="formSecurity.logConfig.addActionLabel"
-        keyPlaceholder="formSecurity.logConfig.keyPlaceholder"
-        valuePlaceholder="formSecurity.logConfig.valuePlaceholder"
-        editing=editing
-      }}
-    </div>
-  </div>
 {{/accordion-row}}

app/styles/components/_forms.scss

@@ -39,12 +39,14 @@ select {
     font-size: 15px;
     transition: all ease-in-out .3s;
     -webkit-appearance: none;
-    position: relative;
-    background-image: url(images/dropdown-arrow.svg);
-    background-repeat: no-repeat;
-    background-size: 15px 10px;
-    background-position: calc(100% - 10px) center;
     line-height: 24px;
+    &:not([multiple]) {
+      position: relative;
+      background-image: url(images/dropdown-arrow.svg);
+      background-repeat: no-repeat;
+      background-size: 15px 10px;
+      background-position: calc(100% - 10px) center;
+    }
 }
 
 form {

translations/en-us.yaml

@@ -1803,6 +1803,14 @@ formCommand:
         other {times}
       }
     always: Always
+  logDriver:
+    label: Log Driver
+    placeholder: "e.g. syslog; Default: The driver configured on the host daemon"
+  logConfig:
+    label: Log Options
+    addActionLabel: Add Option
+    keyPlaceholder: e.g. syslog-facility
+    valuePlaceholder: e.g. daemon
 
 formContainerLinks:
   label: Links
@@ -2085,12 +2093,12 @@ formSecrets:
     suffix: ""
 
 formSecurity:
-  title: Security
+  title: Security & Host Config
   detail: Grant or limit the abilities of the container to affect the host it is running on.
-  logConfig:
-    addActionLabel: Add Option
-    keyPlaceholder: e.g. syslog-facility
-    valuePlaceholder: e.g. daemon
+  pullImage:
+    label: Pull Image
+    enable: Every time a new container is created
+    disable: Only if not already present on the host
   privileged:
     label: Privileged
     disable: Disabled
@@ -2133,11 +2141,6 @@ formSecurity:
     permissions:
       label: Permissions
       placeholder: "e.g. 0,3; Default: All"
-  logDriver:
-    label: Log Driver
-    placeholder: e.g. syslog
-  logOptions:
-    label: Log Options
   memoryReservation:
     label: Memory Reservation
   milliCpuReservation: