Merge pull request #2 from vincent99/master

TTY, LXC, Memory options on container create

app/pods/hosts/container-new/controller.js

@@ -65,6 +65,13 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
     removeDnsSearch: function(obj) {
       this.get('dnsSearchArray').removeObject(obj);
     },
+
+    addLxc: function() {
+      this.get('lxcArray').pushObject({key: '', value: ''});
+    },
+    removeLxc: function(obj) {
+      this.get('lxcArray').removeObject(obj);
+    },
   },
 
   validate: function() {
@@ -85,6 +92,7 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
     this.initDns();
     this.initDnsSearch();
     this.initCapability();
+    this.initLxc();
     this.userImageUuidDidChange();
   },
 
@@ -112,7 +120,7 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
   // Environment Vars
   environmentArray: null,
   initEnvironment: function() {
-    var obj = this.get('environment')||[];
+    var obj = this.get('environment')||{};
     var keys = Object.keys(obj);
     var out = [];
     keys.forEach(function(key) {
@@ -324,4 +332,61 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
     this.set('capAdd',[]);
     this.set('capDrop',[]);
   },
+
+  // Memory
+  memoryDidChange: function() {
+    // The actual parameter we're interested in is 'memorySwap', in bytes.
+    var mem = parseInt(this.get('memoryMb'),10);
+    if ( isNaN(mem) )
+    {
+      this.set('memoryMb','');
+      this.set('memorySwap',null);
+    }
+    else
+    {
+      this.set('memorySwap', mem * 1024 * 1024);
+    }
+  }.observes('memoryMb'),
+
+  // Terminal
+  terminal: 'both',
+  terminalChoices: [
+    {label: 'Yes (-i and -t)', value: 'both'},
+    {label: 'Interactive (-i)', value: 'interactive'},
+    {label: 'TTY (-t)', value: 'terminal'},
+    {label: 'No', value: 'none'},
+  ],
+  terminalDidChange: function() {
+    var val = this.get('terminal');
+    var stdinOpen = ( val === 'interactive' || val === 'both' );
+    var tty = (val === 'tty' || val === 'both');
+    this.set('tty', tty);
+    this.set('stdinOpen', stdinOpen);
+  }.observes('terminal'),
+
+  // LXC Config
+  lxcArray: null,
+  initLxc: function() {
+    var obj = this.get('lxcConf')||{};
+    var keys = Object.keys(obj);
+    var out = [];
+    keys.forEach(function(key) {
+      out.push({ key: key, value: obj[key] });
+    });
+
+    this.set('lxcArray', out);
+  },
+
+  lxcChanged: function() {
+    // Sync with the actual environment object
+    var out = {};
+    this.get('lxcArray').forEach(function(row) {
+      if ( row.key )
+      {
+        out[row.key] = row.value;
+      }
+    });
+    this.set('lxcConf', out);
+  }.observes('lxcArray.@each.{key,value}'),
+
 });

app/pods/hosts/container-new/template.hbs

@@ -11,14 +11,14 @@
   <div class="row">
     <div class="col-sm-3" style="padding-left: 0">
       <div class="list-group">
-        <!-- @TODO: department of redundancy department -->
+        {{! @TODO: department of redundancy department }}
         <a href="#" class="tab list-group-item" data-section="basic" {{action "selectTab" "basic" target=view}}>The Basics</a>
         <a href="#" class="tab list-group-item" data-section="ports" {{action "selectTab" "ports" target=view}}>Ports</a>
         <a href="#" class="tab list-group-item" data-section="command" {{action "selectTab" "command" target=view}}>Command</a>
         <a href="#" class="tab list-group-item" data-section="links" {{action "selectTab" "links" target=view}}>Links</a>
         <a href="#" class="tab list-group-item" data-section="volumes" {{action "selectTab" "volumes" target=view}}>Volumes</a>
         <a href="#" class="tab list-group-item" data-section="dns" {{action "selectTab" "dns" target=view}}>DNS</a>
-        <a href="#" class="tab list-group-item" data-section="security" {{action "selectTab" "security" target=view}}>Security</a>
+        <a href="#" class="tab list-group-item" data-section="security" {{action "selectTab" "security" target=view}}>Security/Host</a>
       </div>
     </div>
 
@@ -27,7 +27,7 @@
         <div class="col-md-6">
           <div class="form-group">
             <label for="name">Name</label>
-            {{input id="name" type="text" value=name classNames="form-control" placeholder="e.g. web01"}}
+            {{input id="name" type="text" value=name classNames="form-control" placeholder="e.g. app01"}}
           </div>
           <div class="form-group">
             <label for="description">Description</label>
@@ -38,11 +38,22 @@
         <div class="col-md-6">
           {{partial "container/edit-image"}}
 
+          <div class="form-group">
+            <label>Console</label>
+            {{view "select"
+              class="form-control"
+              id="terminal"
+              content=terminalChoices
+              optionLabelPath="content.label"
+              optionValuePath="content.value"
+              value=terminal
+            }}
+          </div>
+
           <div class="form-group">
             <label for="networkId">Network</label>
             {{view "select"
               class="form-control"
-              disabled=editing
               id="networkId"
               content=networks
               optionLabelPath="content.displayName"
@@ -95,34 +106,48 @@
       <div class="section" data-section="security">
         <div class="row">
           <div class="col-md-6">
-            <label for="privileged">Privileged</label>
+            <div class="form-group">
+              <label for="memoryMb">Limit Memory Usage</label>
+              <div class="input-group">
+                {{input id="memoryMb" type="number" min="1" step="1" value=memoryMb classNames="form-control" placeholder="No limit"}}
+                <div class="input-group-addon">MB</div>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="cpuSet">Pin to Physical CPU(s)</label>
+              {{input id="cpuSet" type="text" value=cpuSet classNames="form-control" placeholder="e.g. 0,1,3"}}
+            </div>
+
+          </div>
+          <div class="col-md-6">
+            <label>Privileged</label>
             <div class="checkbox">
               <label for="privileged">{{input type="checkbox" id="privileged" checked=privileged}} Give the container full access to the host</label>
             </div>
-          </div>
+
-          <div class="col-md-6">
             <div class="form-group">
-              <label for="cpuSet">Restrict to CPUs</label>
+              <label {{bind-attr class=":block privileged:text-muted"}}>Add Capability</label>
-              {{input id="cpuSet" type="text" value=cpuSet classNames="form-control" placeholder="e.g. 0,1,3"}}
+              {{view "select" class="form-control select-cap-add" content=capabilityChoices selection=capAdd multiple="true" optionValuePath="content" optionLabelPath="content"}}
             </div>
+
+            <div class="form-group">
+              <label {{bind-attr class=":block privileged:text-muted"}}>Drop Capability</label>
+              {{view "select" class="form-control select-cap-drop" content=capabilityChoices selection=capDrop multiple="true" optionValuePath="content" optionLabelPath="content"}}
+            </div>
+
+            <span class="help-block">
+              Capabilities allow you to provide fine-grained control over superuser privileges available to the container.
+              <a href="http://man7.org/linux/man-pages/man7/capabilities.7.html" target="_blank">More information</a>
+            </span>
           </div>
         </div>
 
         <hr/>
-
+        {{partial "container/edit-lxc"}}
-        <div class="row">
-          <div class="col-md-6">
-            <label class="block">Add Capability</label>
-            {{view "select" class="form-control select-cap-add" content=capabilityChoices selection=capAdd multiple="true" optionValuePath="content" optionLabelPath="content"}}
-          </div>
-          <div class="col-md-6">
-            <label class="block">Drop Capability</label>
-            {{view "select" class="form-control select-cap-drop" content=capabilityChoices selection=capDrop multiple="true" optionValuePath="content" optionLabelPath="content"}}
-          </div>
-        </div>
         <span class="help-block">
-          Capabilities allow you to provide fine-grained control over superuser privileges available to the container.
+          This allows you to directly set or override any low-level options for the container.  Do not include the leading &quot;lxc.&quot;
-          <a href="http://man7.org/linux/man-pages/man7/capabilities.7.html" target="_blank">More information</a>
+          <a href="http://man7.org/linux/man-pages/man5/lxc.container.conf.5.html" target="_blank">More information</a>
         </span>
       </div>
 

app/pods/hosts/container-new/view.js

@@ -69,6 +69,14 @@ export default OverlayEdit.extend({
       });
     },
 
+    addLxc: function() {
+      var self = this;
+      this.controller.send('addLxc');
+      Ember.run.next(function() {
+        self.$('.lxc-key').last().focus();
+      });
+    },
+
     selectTab: function(name) {
       this.set('context.tab',name);
       this.$('.tab').removeClass('active');
@@ -86,7 +94,7 @@ export default OverlayEdit.extend({
 
     var opts = {
       maxHeight: 200,
-      buttonClass: 'btn btn-default btn-sm',
+      buttonClass: 'btn btn-default',
       buttonWidth: '100%',
       numberDisplayed: 2,
 
@@ -134,5 +142,23 @@ export default OverlayEdit.extend({
 
     this.$('.select-cap-add').multiselect(opts);
     this.$('.select-cap-drop').multiselect(opts);
+  },
+
+  priviligedDidChange: function() {
+    var add = this.$('.select-cap-add');
+    var drop = this.$('.select-cap-drop');
+    if ( add && drop )
+    {
+      if ( this.get('controller.privileged') )
+      {
+        add.multiselect('disable');
+        drop.multiselect('disable');
       }
+      else
+      {
+        add.multiselect('enable');
+        drop.multiselect('enable');
+      }
+    }
+  }.observes('controller.privileged')
 });

app/pods/hosts/item/template.hbs

@@ -18,7 +18,7 @@
   <div class="text-center text-muted">No containers yet.</div>
 {{/each}}
 
-{{#link-to "hosts.containerNew" this.id tagName="div" classNames="add-to-host" tooltip="Create Container"}}
+{{#link-to "hosts.containerNew" this.id (query-params tab="basic") tagName="div" classNames="add-to-host" tooltip="Create Container"}}
   <span class="fa-stack fa-lg">
     <i class="fa fa-circle-thin fa-stack-2x"></i>
     <i class="fa fa-plus fa-stack-1x"></i>

app/styles/bootstrap-tweak.scss

@@ -110,3 +110,7 @@ HR {
 .block {
   display: block;
 }
+
+.input-group-addon {
+  padding: 10px;
+}

app/templates/container/edit-lxc.hbs

@@ -0,0 +1,40 @@
+<label>
+  LXC Configuration
+  <button class="btn btn-link btn-sm" {{action "addLxc" target="view"}}><i class="fa fa-plus"></i> Add</button>
+</label>
+{{#if lxcArray.length}}
+  <table class="table fixed no-lines no-top-padding tight">
+    <tr class="text-muted">
+      <th width="45%">Key</th>
+      <th>&nbsp;</th>
+      <th width="45%">Value</th>
+      <th>&nbsp;</th>
+    </tr>
+    {{#each obj in lxcArray}}
+      <tr>
+        <td>
+          {{input class="form-control input-sm lxc-key" type="text" value=obj.key placeholder="e.g. aa_profile"}}
+        </td>
+
+        <td class="text-center">
+          <p class="form-control-static input-sm">=</p>
+        </td>
+
+        <td>
+          {{input class="form-control input-sm" type="text" value=obj.value placeholder="e.g. unconfined"}}
+        </td>
+
+        <td class="text-right">
+          <button {{action "removeLxc" obj}} class="btn btn-default btn-sm" type="button" tooltip="Remove this configuration" tabindex="-1">
+            <i class="fa fa-times"></i>
+          </button>
+          </div>
+        </td>
+      </tr>
+    {{/each}}
+  </table>
+{{else}}
+  <div class="text-muted text-italic">
+    None
+  </div>
+{{/if}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": true,
   "directories": {
     "doc": "doc",