TTY, LXC, Memory options on container create

2014-12-18 15:46:04 -07:00 · 2014-12-18 15:46:04 -07:00 · a9b6e5a1cd
parent 1851d4c22a
commit a9b6e5a1cd
7 changed files with 187 additions and 27 deletions
--- a/app/pods/hosts/container-new/controller.js
+++ b/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}'),
+
 });
--- a/app/pods/hosts/container-new/template.hbs
+++ b/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>
-              {{input id="cpuSet" type="text" value=cpuSet classNames="form-control" placeholder="e.g. 0,1,3"}}
+              <label {{bind-attr class=":block privileged:text-muted"}}>Add Capability</label>
+              {{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/>
-
-        <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>
+        {{partial "container/edit-lxc"}}
        <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>
+          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/man5/lxc.container.conf.5.html" target="_blank">More information</a>
        </span>
      </div>

--- a/app/pods/hosts/container-new/view.js
+++ b/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')
 });
--- a/app/pods/hosts/item/template.hbs
+++ b/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>
--- a/app/styles/bootstrap-tweak.scss
+++ b/app/styles/bootstrap-tweak.scss
@ -110,3 +110,7 @@ HR {
 .block {
  display: block;
 }
+
+.input-group-addon {
+  padding: 10px;
+}
--- a/app/templates/container/edit-lxc.hbs
+++ b/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}}
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
  "private": true,
  "directories": {
    "doc": "doc",