Merge pull request #86 from vincent99/add-container

Add Container redesign

Author: vincent99

app/pods/components/device-permissions/template.hbs

@@ -1 +1 @@
-{{!view "select" class="form-control" content=view.choices selection=view.selection multiple="true" optionValuePath="content.value" optionLabelPath="content.label"}}
+{{view "select" class="form-control" content=view.choices selection=view.selection multiple="true" optionValuePath="content.value" optionLabelPath="content.label"}}

app/pods/container/edit/new-or-edit.js

@@ -70,26 +70,31 @@ export default Ember.Mixin.create(Cattle.NewOrEditMixin, {
   },
 
   // Links
+  allHosts: function() {
+    return this.get('store').all('host');
+  }.property(),
+
   containerChoices: function() {
     var list = [];
     var id = this.get('id');
-    this.get('controllers.hosts').forEach(function(host) {
+
+    this.get('allHosts').map((host) => {
       var containers = (host.get('instances')||[]).filter(function(instance) {
         // You can't link to yourself, or to other types of instances
         return instance.get('id') !== id && instance.get('kind') === 'container';
       });
 
       list.pushObjects(containers.map(function(container) {
         return {
-          group: host.get('displayName'),
+          group: host.get('name') || '('+host.get('id')+')',
           id: container.get('id'),
           name: container.get('name')
         };
       }));
     });
 
-    return list;
-  }.property('controllers.hosts.@each.[]','controllers.hosts[email protected]').volatile(),
+    return list.sortBy('group','name','id');
+  }.property('allHosts[email protected]').volatile(),
 
   linksArray: null,
   linksAsStrArray: null,

app/pods/container/edit/template.hbs

@@ -1,4 +1,4 @@
-<h1>{{#if editing}}Edit{{else}}Add{{/if}} Container</h1>
+<h1>Edit Container</h1>
 
 {{#if error}}
   <div class="alert alert-danger">
@@ -7,75 +7,40 @@
   </div>
 {{/if}}
 
-<div class="row">
-  <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"}}
-    </div>
-    <div class="form-group">
-      <label for="description">Description</label>
-      {{textarea id="description" value=description classNames="form-control no-resize" rows="5" placeholder="e.g. It serves the webs"}}
-    </div>
-  </div>
-
-  <div class="col-md-6">
-    {{#if editing}}
-      <label>Port Bindings</label>
-      <div class="well">
-        {{partial "container/edit-ports"}}
-      </div>
-
-      <label>Links</label>
-      <div class="well">
-        {{partial "container/edit-links"}}
+<form>
+  <div class="row">
+    <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"}}
       </div>
-    {{else}}
       <div class="form-group">
-        <label for="networkId"><i class="ss-headphones"></i> Network</label>
-        {{view "select"
-          class="form-control"
-          disabled=editing
-          id="networkId"
-          content=networks
-          optionLabelPath="content.displayName"
-          optionValuePath="content.id"
-          value=networkId
-          prompt="Select a Network to join the Instance to..."
-        }}
+        <label for="description">Description</label>
+        {{textarea id="description" value=description classNames="form-control no-resize" rows="5" placeholder="e.g. It serves the webs"}}
       </div>
-      {{partial "container/edit-image"}}
-    {{/if}}
-  </div>
-</div>
-
-{{#unless editing}}
-  <div class="row">
-    <div class="col-md-6">
-      {{partial "container/edit-ports"}}
     </div>
 
     <div class="col-md-6">
-      {{partial "container/edit-links"}}
-    </div>
-  </div>
-
-  <div class="advanced-toggle">
-    <a href="#" {{action "showAdvanced" target=view}}>Advanced options</a>
-  </div>
-  <div class="advanced" style="display: none">
-    <div class="row">
-
-      <div class="col-md-6">
-        {{partial "container/edit-command"}}
+      <label>Port Bindings</label>
+      <div class="well">
+        {{#if portsArray.length}}
+          {{partial "container/edit-ports"}}
+        {{else}}
+          <span class="text-muted">This container has no ports.</span>
+        {{/if}}
       </div>
 
-      <div class="col-md-6">
-        {{partial "container/edit-environment"}}
+      <label>Links</label>
+      <div class="well">
+        {{#if linksArray.length}}
+          {{partial "container/edit-links"}}
+        {{else}}
+          <span class="text-muted">This container has no links.</span>
+        {{/if}}
       </div>
     </div>
   </div>
-{{/unless}}
 
-{{partial "save-cancel"}}
+  {{partial "save-cancel"}}
+</form>
 {{partial "overlay-close"}}

app/pods/containers/new/controller.js

@@ -3,7 +3,7 @@ import NewOrEditContainer from 'ui/pods/container/edit/new-or-edit';
 
 export default Ember.ObjectController.extend(NewOrEditContainer, {
   queryParams: ['tab','hostId'],
-  tab: 'basic',
+  tab: 'command',
   hostId: null,
   editing: false,
   saving: false,
@@ -279,30 +279,27 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
 
   // Volumes From
   hostContainerChoices: function() {
-    var self = this;
     var list = [];
 
-    this.get('controllers.hosts').forEach(function(host) {
-      // You can only mount volumes from the host the container will go on
-      if ( host.get('id') === self.get('requestedHostId'))
-      {
-        var containers = (host.get('instances')||[]).filter(function(instance) {
-          // You can't mount volumes from other types of instances
-          return instance.get('type') === 'container';
-        });
-
-        list.pushObjects(containers.map(function(container) {
-          return {
-            group: host.get('displayName'),
-            id: container.get('id'),
-            name: container.get('name')
-          };
-        }));
-      }
+    this.get('allHosts').filter((host) => {
+      return host.get('id') === this.get('requestedHostId');
+    }).map((host) => {
+      var containers = (host.get('instances')||[]).filter(function(instance) {
+        // You can't mount volumes from other types of instances
+        return instance.get('type') === 'container';
+      });
+
+      list.pushObjects(containers.map(function(container) {
+        return {
+          group: host.get('name') || '('+host.get('id')+')',
+          id: container.get('id'),
+          name: container.get('name')
+        };
+      }));
     });
 
-    return list.sortBy('group','container.name','container.id');
-  }.property('controllers.hosts.@each.[]','controllers.hosts[email protected]').volatile(),
+    return list.sortBy('group','name','id');
+  }.property('allHosts[email protected]').volatile(),
 
   volumesFromArray: null,
   initVolumesFrom: function() {
@@ -388,12 +385,6 @@ export default Ember.ObjectController.extend(NewOrEditContainer, {
 
   // 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' );

app/pods/containers/new/route.js

@@ -1,7 +1,10 @@
 import Ember from 'ember';
-import OverlayRoute from 'ui/pods/overlay/route';
 
-export default OverlayRoute.extend({
+export default Ember.Route.extend({
+  activate: function() {
+    this.send('setPageLayout', {label: 'Back', backPrevious: true});
+  },
+
   actions: {
     cancel: function() {
       this.send('goToPrevious');
@@ -12,7 +15,8 @@ export default OverlayRoute.extend({
     var self = this;
 
     var dependencies = [
-      this.get('store').find('network')
+      this.get('store').find('network'),
+      this.get('store').find('host')
     ];
 
     return Ember.RSVP.all(dependencies, 'Load container dependencies').then(function(results) {
@@ -52,8 +56,4 @@ export default OverlayRoute.extend({
     controller.set('model', model);
     controller.initFields();
   },
-
-  renderTemplate: function() {
-    this.render('containers/new', {into: 'application', outlet: 'overlay'});
-  },
 });