Container labeling

app/containers/new/controller.js

@@ -1,7 +1,8 @@
 import Ember from 'ember';
 import EditContainer from 'ui/mixins/edit-container';
+import EditLabels from 'ui/mixins/edit-labels';
 
-export default Ember.ObjectController.extend(EditContainer, {
+export default Ember.ObjectController.extend(EditContainer, EditLabels, {
   queryParams: ['environmentId','containerId'],
   environmentId: null,
   containerId: null,

app/containers/new/view.js

@@ -19,6 +19,7 @@ export default Ember.View.extend({
     addDns:         addAction('addDns',         '.dns-value'),
     addDnsSearch:   addAction('addDnsSearch',   '.dns-search-value'),
     addDevice:      addAction('addDevice',      '.device-host'),
+    addLabel:       addAction('addLabel',      '.label-key'),
 
     selectTab: function(name) {
       this.set('context.tab',name);

app/host/controller.js

@@ -70,7 +70,7 @@ var HostController = Cattle.TransitioningResourceController.extend(DownloadMachi
       out.push({ label: 'Clone',         icon: 'ss-copier',           action: 'clone',        enabled: true });
     }
 
-    out.push({ label: 'Edit',          icon: 'ss-write',            action: 'edit',         enabled: !!a.update })
+    out.push({ label: 'Edit',          icon: 'ss-write',            action: 'edit',         enabled: !!a.update });
 
     return out;
   }.property('actions.{activate,deactivate,remove,purge,update}','machine','machine.links.config'),

app/mixins/edit-container.js

@@ -823,32 +823,6 @@ export default Ember.Mixin.create(Cattle.NewOrEditMixin, {
   }.observes('strEntryPoint'),
 
   // ----------------------------------
-  // Labels
-  // ----------------------------------
-  labelsArray: null,
-  initLabels: function() {
-    var obj = this.get('instance.labels')||{};
-    var keys = Object.keys(obj);
-    var out = [];
-    keys.forEach(function(key) {
-      out.push({ key: key, value: obj[key] });
-    });
-
-    this.set('labelsArray', out);
-  },
-
-  labelsChanged: function() {
-    // Sync with the actual environment object
-    var out = {};
-    this.get('labelsArray').forEach(function(row) {
-      if ( row.key )
-      {
-        out[row.key] = row.value;
-      }
-    });
-    this.set('instance.labels', out);
-  }.observes('labelsArray.@each.{key,value}'),
-
   // ----------------------------------
   // Save
   // ----------------------------------

app/mixins/edit-labels.js

@@ -3,18 +3,69 @@ import Ember from 'ember';
 export default Ember.Mixin.create({
   actions: {
     addLabel: function() {
-      this.get('labelsArray').pushObject({
+      this.get('labelArray').pushObject({
         key: '',
         value: '',
       });
     },
 
     removeLabel: function(obj) {
-      this.get('labelsArray').removeObject(obj);
+      this.get('labelArray').removeObject(obj);
+    },
+
+    pastedLabels: function(str, target) {
+      var ary = this.get('labelArray');
+      str = str.trim();
+      if ( str.indexOf('=') === -1 )
+      {
+        // Just pasting a key
+        $(target).val(str);
+        return;
+      }
+
+      var lines = str.split(/\r?\n/);
+      lines.forEach((line) => {
+        line = line.trim();
+        if ( !line )
+        {
+          return;
+        }
+
+        var idx = line.indexOf('=');
+        var key = '';
+        var val = '';
+        if ( idx > 0 )
+        {
+          key = line.substr(0,idx).trim();
+          val = line.substr(idx+1).trim();
+        }
+        else
+        {
+          key = line.trim();
+          val = '';
+        }
+
+        var existing = ary.filterProperty('key',key)[0];
+        if ( existing )
+        {
+          Ember.set(existing,'value',val);
+        }
+        else
+        {
+          ary.pushObject({key: key, value: val});
+        }
+      });
+
+      ary.forEach((item) => {
+        if ( !item.key && !item.value )
+        {
+          ary.removeObject(item);
+        }
+      });
     },
   },
 
-  labelsArray: null,
+  labelArray: null,
 
   initFields: function() {
     this._super();
@@ -22,5 +73,26 @@ export default Ember.Mixin.create({
   },
 
   initLabels: function() {
-  }
+    var obj = this.get('primaryResource.labels')||{};
+    var keys = Object.keys(obj);
+    var out = [];
+    keys.forEach(function(key) {
+      out.push({ key: key, value: obj[key] });
+    });
+
+    this.set('labelArray', out);
+  },
+
+  labelsChanged: function() {
+    // Sync with the actual environment object
+    var out = {};
+    this.get('labelArray').forEach(function(row) {
+      if ( row.key )
+      {
+        out[row.key] = row.value;
+      }
+    });
+    this.set('primaryResource.labels', out);
+  }.observes('labelArray.@each.{key,value}'),
+
 });

app/styles/layout.scss

@@ -299,6 +299,7 @@ UL.list-lines {
 **********/
 .footer-actions {
   margin: 20px 0;
+  padding-bottom: 20px;
   text-align: center;
 }
 

app/templates/container/new-advanced.hbs

@@ -9,6 +9,7 @@
       <li role="presentation" class="tab" data-section="volumes" {{action "selectTab" "volumes" target=view}}><a>Volumes</a></li>
       <li role="presentation" class="tab" data-section="network" {{action "selectTab" "network" target=view}}><a>Networking</a></li>
       <li role="presentation" class="tab" data-section="security" {{action "selectTab" "security" target=view}}><a>Security/Host</a></li>
+      <li role="presentation" class="tab" data-section="labels" {{action "selectTab" "labels" target=view}}><a>Labels</a></li>
     </ul>
   </section>
 
@@ -28,5 +29,16 @@
     <div class="section" data-section="security">
       {{partial "container/new-security"}}
     </div>
+
+    <div class="section" data-section="labels">
+      <div class="row form-group">
+        <div class="col-sm-12 col-md-2 form-label">
+          <label class="form-control-static">Labels</label>
+        </div>
+        <div class="col-sm-12 col-md-8">
+          {{partial "edit-labels"}}
+        </div>
+      </div>
+    </div>
   </section>
 </div>

app/templates/container/new-command.hbs

@@ -121,7 +121,7 @@
         {{/each}}
       </table>
       <div class="text-muted" style="font-size: 12px; margin-top: -20px; margin-bottom: 12px;">
-        ProTip: Paste one or more lines of key=value pairs into any name field for easy bulk entry.
+        ProTip: Paste one or more lines of name=value pairs into any name field for easy bulk entry.
       </div>
     {{/if}}
   </div>

app/templates/edit-labels.hbs

@@ -0,0 +1,36 @@
+<div class="form-control-static">
+  <button class="btn-circle-plus" {{action "addLabel" target="view"}}></button>
+</div>
+
+{{#if labelArray.length}}
+  <table class="table fixed no-lines no-top-padding tight small">
+    <tr class="text-muted">
+      <th>Key</th>
+      <th width="30">&nbsp;</th>
+      <th>Value</th>
+      <th width="30">&nbsp;</th>
+    </tr>
+    {{#each label in labelArray}}
+      <tr>
+        <td>
+          {{input-paste pasted="pastedLabels" class="form-control input-sm label-key" type="text" value=label.key placeholder="e.g. foo"}}
+        </td>
+
+        <td class="text-center">
+          <p class="form-control-static input-sm">=</p>
+        </td>
+
+        <td>
+          {{input class="form-control input-sm" type="text" value=label.value placeholder="e.g. bar"}}
+        </td>
+
+        <td class="text-right">
+          <button {{action "removeLabel" label}} class="btn-circle-x" type="button" tabindex="-1"></button>
+        </td>
+      </tr>
+    {{/each}}
+  </table>
+    <div class="text-muted" style="font-size: 12px; margin-top: -20px; margin-bottom: 12px;">
+      ProTip: Paste one or more lines of key=value pairs into any key field for easy bulk entry.
+    </div>
+{{/if}}