Ember 1.13: Service edit

app/applications-tab/index/route.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   beforeModel: function() {
-    var main = this.modelFor('stacks-tab');
+    var main = this.modelFor('applications-tab');
     if ( main.get('services.length') )
     {
       this.transitionTo('environments');

app/authenticated/controller.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import C from 'ui/utils/constants';
 
 export default Ember.Controller.extend({
   needs: ['application'],

app/authenticated/index/route.js

@@ -2,6 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   beforeModel: function() {
-    this.replaceWith('stacks-tab');
+    this.replaceWith('applications-tab');
   }
 });

app/components/edit-container/component.js

@@ -31,7 +31,7 @@ export default Ember.Component.extend(EditContainer, {
       this.get('store').findAll('host'), // Need inactive ones in case a link points to an inactive host
     ]).then((results) => {
       var model = Ember.Object.create({
-        instance: instance,
+        instance: instance.clone(),
         ports: results[0],
         instanceLinks: results[1],
         allHosts: results[2],

app/components/edit-service/component.js

@@ -0,0 +1,72 @@
+import Ember from 'ember';
+import NewOrEdit from 'ui/mixins/new-or-edit';
+import EditService from 'ui/mixins/edit-service';
+import EditTargetIp from 'ui/mixins/edit-targetip';
+import C from 'ui/utils/constants';
+import { addAction } from 'ui/utils/add-view-action';
+
+export default Ember.Component.extend(NewOrEdit, EditService, EditTargetIp, {
+  editing: true,
+  loading: true,
+
+  actions: {
+    addServiceLink:        addAction('addServiceLink',  '.service-link'),
+    addTargetIp:           addAction('addTargetIp',     '.target-ip'),
+
+    outsideClick: function() {},
+
+    cancel: function() {
+      this.sendAction('dismiss');
+    }
+  },
+
+  didInsertElement: function() {
+    Ember.run.next(this, 'loadDependencies');
+  },
+
+  loadDependencies: function() {
+    var service = this.get('originalModel');
+
+    this.get('store').find('environment', service.get('environmentId')).then((env) => {
+      env.importLink('services').then(() => {
+        var model = Ember.Object.create({
+          service: service.clone(),
+          selectedEnvironment: env
+        });
+
+        this.setProperties({
+          originalModel: service,
+          model: model,
+          service: model.service,
+          environment: model.selectedEnvironment,
+        });
+
+        this.initFields();
+        this.set('loading', false);
+      });
+    });
+  },
+
+  canScale: function() {
+    if ( ['service','loadbalancerservice'].indexOf(this.get('service.type').toLowerCase()) >= 0 )
+    {
+      return !this.getLabel(C.LABEL.SCHED_GLOBAL);
+    }
+    else
+    {
+      return false;
+    }
+  }.property('service.type'),
+
+  hasServiceLinks: function() {
+    return this.get('service.type').toLowerCase() !== 'externalservice';
+  }.property('service.type'),
+
+  hasTargetIp: function() {
+    return this.get('service.type').toLowerCase() === 'externalservice';
+  }.property('service.type'),
+
+  doneSaving: function() {
+    this.sendAction('dismiss');
+  }
+});

app/components/edit-service/template.hbs

@@ -0,0 +1,47 @@
+{{#liquid-if loading}}
+  <div class="text-center">
+    <p>
+      <i class="fa fa-circle-o-notch fa-spin"></i> Loading...
+    </p>
+  </div>
+{{else}}
+  <section class="horizontal-form container-fluid">
+    <h2>{{#if editing}}Edit{{else}}Add{{/if}} Service</h2>
+    {{top-errors errors=errors}}
+
+    {{partial "container/edit-name"}}
+
+    {{#if canScale}}
+      {{partial "form-divider"}}
+
+      <div class="row">
+        <div class="col-sm-12 col-md-2 form-label">
+          <label>Scale</label>
+        </div>
+        {{#if isGlobal}}
+          <div class="col-sm-10 col-md-8">
+            <span class="text-muted">Always run one instance of this container on every host</span>
+          </div>
+        {{else}}
+          <div class="col-sm-2 col-md-1">
+            {{service.scale}}
+          </div>
+          <div class="col-sm-10 col-md-7">
+            {{input-slider value=service.scale valueMin=1 valueMax=11 scaleMin=0 scaleMax=12}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+
+    {{partial "form-divider"}}
+
+    {{#if hasServiceLinks}}
+      {{partial "container/edit-services"}}
+    {{/if}}
+    {{#if hasTargetIp}}
+      {{partial "container/edit-targetip"}}
+    {{/if}}
+  </section>
+
+  {{partial "save-cancel"}}
+{{/liquid-if}}

app/components/host-pod/component.js

@@ -9,7 +9,7 @@ export default Ember.Component.extend(ReadLabels,{
 
   actions: {
     newContainer: function() {
-      this.sendAction('newContainer', this.get('model.id'))
+      this.sendAction('newContainer', this.get('model.id'));
     },
   },
 

app/components/page-header/component.js

@@ -28,11 +28,11 @@ export default Ember.Component.extend({
   }.property('project.id','projectChoices.@each.id'),
 
   isInfrastructure: function() {
-    return this.get('currentPath').indexOf('authenticated.infrastructure') === 0;
+    return this.get('currentPath').indexOf('authenticated.infrastructure-tab') === 0;
   }.property('currentPath'),
 
-  isStacks: function() {
-    return this.get('currentPath').indexOf('authenticated.stacks') === 0;
+  isApplications: function() {
+    return this.get('currentPath').indexOf('authenticated.applications-tab') === 0;
   }.property('currentPath'),
 
   actions: {

app/components/page-header/template.hbs

@@ -2,7 +2,7 @@
   <div class="logo" {{action "showAbout"}}></div>
   <nav>
     {{#if project}}
-      {{#link-to "stacks-tab"}}Stacks{{/link-to}}
+      {{#link-to "applications-tab"}}Applications{{/link-to}}
       {{#link-to "infrastructure-tab"}}Infrastructure{{/link-to}}
     {{/if}}
   </nav>
@@ -129,7 +129,7 @@
       {{#link-to "hosts"}}<i class="ss-database"></i> Hosts{{/link-to}}
       {{#link-to "containers"}}<i class="ss-box"></i> Containers{{/link-to}}
     {{/if}}
-    {{#if isStacks}}
+    {{#if isApplications}}
       {{#link-to "environments"}}<i class="ss-globe"></i> Stacks{{/link-to}}
 
       <div class="btn-group pull-right">

app/components/service-pod/template.hbs

@@ -19,18 +19,16 @@
   <div class="pod-info clearfix">
     <div class="pod-info-line">
       {{#each model.consumedServicesWithNames as |map|}}
-        {{#with map.service controller="service" as |service|}}
         <div class="pod-info-item">
-            {{#link-to "service" service.environmentId service.id}}
-              <i class="{{service.activeIcon}}"></i>
-              {{#if (eq map.name service.displayName)}}
+          {{#link-to "service" map.service.environmentId map.service.id}}
+            <i class="{{map.service.activeIcon}}"></i>
+            {{#if (eq map.name map.service.displayName)}}
               {{map.name}}
             {{else}}
-                {{service.displayName}}{{#if map.name}} <span class="text-muted">(as {{map.name}})</span>{{/if}}
+              {{map.service.displayName}}{{#if map.name}} <span class="text-muted">(as {{map.name}})</span>{{/if}}
             {{/if}}
           {{/link-to}}
         </div>
-        {{/with}}
       {{/each}}
     </div>
     {{#if model.externalIpAddresses.length}}

app/components/stack-section/template.hbs

@@ -1,7 +1,9 @@
 <div class="pod-state {{model.stateBackground}}"><span>{{model.displayState}}</span></div>
 
 <div class="right">
-  {{resource-actions-menu model=model choices=model.availableActions}}
+  {{#with model controller="environment" as |ctrl|}}
+    {{resource-actions-menu model=ctrl choices=ctrl.availableActions parentController=this}}
+  {{/with}}
   &nbsp;
   <a href="{{dom-id model pound=true}}" data-toggle="collapse" class="btn btn-link collapser" aria-expanded="true"></a>
 </div>

app/environment/controller.js

@@ -16,7 +16,7 @@ export default Ember.Controller.extend(CattleTransitioningController, {
     },
 
     addService: function() {
-      this.transitionToRoute('service.new', {
+      this.get('controllers.application').transitionToRoute('service.new', {
         queryParams: {
           environmentId: this.get('model.id'),
         },
@@ -24,7 +24,7 @@ export default Ember.Controller.extend(CattleTransitioningController, {
     },
 
     addBalancer: function() {
-      this.transitionToRoute('service.new-balancer', {
+      this.get('controllers.application').transitionToRoute('service.new-balancer', {
         queryParams: {
           environmentId: this.get('model.id'),
         },
@@ -44,11 +44,11 @@ export default Ember.Controller.extend(CattleTransitioningController, {
     },
 
     viewCode: function() {
-      this.transitionToRoute('environment.code', this.get('model.id'));
+      this.get('controllers.application').transitionToRoute('environment.code', this.get('model.id'));
     },
 
     viewGraph: function() {
-      this.transitionToRoute('environment.graph', this.get('model.id'));
+      this.get('controllers.application').transitionToRoute('environment.graph', this.get('model.id'));
     },
 
     delete: function() {

app/host/model.js

@@ -1,4 +1,3 @@
-import Ember from 'ember';
 import Resource from 'ember-api-store/models/resource';
 
 var Host = Resource.extend({

app/mixins/edit-service.js

@@ -8,7 +8,7 @@ export default Ember.Mixin.create(EditLabels, {
 
   actions: {
     addServiceLink: function() {
-      this.get('serviceLinksArray').pushObject(Ember.Object.create({serviceId: null, linkName: null}));
+      this.get('serviceLinksArray').pushObject(Ember.Object.create({name: '', serviceId: null}));
     },
     removeServiceLink: function(obj) {
       this.get('serviceLinksArray').removeObject(obj);
@@ -25,7 +25,7 @@ export default Ember.Mixin.create(EditLabels, {
   // Services
   // ----------------------------------
   serviceChoices: function() {
-    var env = this.get('selectedEnvironment');
+    var env = this.get('model.selectedEnvironment');
     var group = 'Stack: ' + (env.get('name') || '('+env.get('id')+')');
 
     var list = (env.get('services')||[]).map((service) => {
@@ -47,7 +47,6 @@ export default Ember.Mixin.create(EditLabels, {
   }.property('environment.services.@each.{id,name,state}'),
 
   serviceLinksArray: null,
-  serviceLinksAsMap: null,
   initServiceLinks: function() {
     var out = [];
     var links;
@@ -63,11 +62,11 @@ export default Ember.Mixin.create(EditLabels, {
     }
 
     links.forEach(function(obj) {
-      var linkName = obj.get('name');
+      var name = obj.get('name');
       var service = obj.get('service');
 
       out.push(Ember.Object.create({
-        linkName: (linkName === service.get('name') ? '' : linkName),
+        name: (name === service.get('name') ? '' : name),
         obj: service,
         serviceId: service.get('id'),
       }));
@@ -77,31 +76,7 @@ export default Ember.Mixin.create(EditLabels, {
   },
 
   serviceLinksDidChange: function() {
-    // Sync with the actual environment
-    var out = {};
-    this.get('serviceLinksArray').forEach((row) => {
-      if ( row.serviceId )
-      {
-        var name = row.linkName;
-        if ( !name )
-        {
-          // If no name is given, use the name of the service
-          var service = this.get('serviceChoices').filterProperty('id', row.serviceId)[0];
-          if ( service )
-          {
-            name = service.get('obj.name');
-          }
-        }
-
-        if ( name )
-        {
-          out[name] = row.serviceId;
-        }
-      }
-    });
-
-    this.set('serviceLinksAsMap', out);
-  }.observes('serviceLinksArray.@each.{linkName,serviceId}'),
+  }.observes('serviceLinksArray.@each.{name,serviceId}'),
 
   // ----------------------------------
   // Scheduling
@@ -144,7 +119,15 @@ export default Ember.Mixin.create(EditLabels, {
     var type = service.get('type').toLowerCase();
     if ( type === 'service' )
     {
-      return service.doAction('setservicelinks', {serviceLinks: this.get('serviceLinksAsMap')});
+      var ary = []
+      this.get('serviceLinksArray').forEach((row) => {
+        if ( row.serviceId )
+        {
+          ary.push({name: row.name, serviceId: row.serviceId});
+        }
+      });
+
+      return service.doAction('setservicelinks', {serviceLinks: ary});
     }
     else if ( ['dnsservice','loadbalancerservice'].indexOf(type) >= 0 )
     {
@@ -152,5 +135,4 @@ export default Ember.Mixin.create(EditLabels, {
       return service.doAction('setservicelinks', {serviceIds: ids});
     }
   },
-
 });

app/mixins/sortable.js

@@ -35,7 +35,7 @@ export default Ember.Mixin.create({
   }.property('sortBy','sorts.@each.{name}'),
 
   arranged: function(){
-    var content = this.get('sortableContent');
+    var content = this.get('sortableContent')||[];
     var currentSort = this.get('currentSort');
     var out;
     if ( currentSort )

app/router.js

@@ -85,7 +85,7 @@ Router.map(function() {
     });
 
     // Applications
-    this.resource('stacks-tab', {path: '/stacks'}, function() {
+    this.resource('applications-tab', {path: '/apps'}, function() {
       this.resource('splash', {path: '/welcome'});
       this.resource('service.new', {path: '/add-service'});
       this.resource('service.new-balancer', {path: '/add-balancer'});

app/service/controller.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 import CattleTransitioningController from 'ui/mixins/cattle-transitioning-controller';
 
 var ServiceController = Ember.Controller.extend(CattleTransitioningController, {
-  needs: ['environment'],
+  needs: ['environment','application'],
   environment: Ember.computed.alias('controllers.environment.model'),
 
   actions: {
@@ -15,7 +15,10 @@ var ServiceController = Ember.Controller.extend(CattleTransitioningController, {
     },
 
     edit: function() {
-      this.transitionToRoute('service.edit', this.get('environmentId'), this.get('model.id'));
+      this.get('controllers.application').setProperties({
+        editService: true,
+        originalModel: this.get('model'),
+      });
     },
 
     scaleUp: function() {

app/service/edit/controller.js

@@ -1,32 +0,0 @@
-import Ember from 'ember';
-import Cattle from 'ui/utils/cattle';
-import EditService from 'ui/mixins/edit-service';
-import EditTargetIp from 'ui/mixins/edit-targetip';
-import C from 'ui/utils/constants';
-
-export default Ember.ObjectController.extend(Cattle.LegacyNewOrEditMixin, EditService, EditTargetIp, {
-  editing: true,
-
-  canScale: function() {
-    if ( ['service','loadbalancerservice'].indexOf(this.get('service.type').toLowerCase()) >= 0 )
-    {
-      return !this.getLabel(C.LABEL.SCHED_GLOBAL);
-    }
-    else
-    {
-      return false;
-    }
-  }.property('service.type'),
-
-  hasServiceLinks: function() {
-    return this.get('service.type').toLowerCase() !== 'externalservice';
-  }.property('service.type'),
-
-  hasTargetIp: function() {
-    return this.get('service.type').toLowerCase() === 'externalservice';
-  }.property('service.type'),
-
-  doneSaving: function() {
-    this.send('goToPrevious');
-  }
-});

app/service/edit/route.js

@@ -1,39 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-  model: function(/*params, transition*/) {
-    var store = this.get('store');
-    var service = this.modelFor('service');
-
-    var dependencies = [
-      store.find('environment', service.get('environmentId')).then(function(env) {
-        return env.importLink('services');
-      })
-    ];
-
-    return Ember.RSVP.all(dependencies, 'Load service dependencies').then((results) => {
-      return Ember.Object.create({
-        service: service,
-        selectedEnvironment: results[0],
-      });
-    });
-  },
-
-  setupController: function(controller, model) {
-    var service = model.get('service');
-    model.set('service', service.clone());
-    controller.set('originalModel', service);
-    controller.set('model', model);
-    controller.initFields();
-  },
-
-  renderTemplate: function() {
-    this.render('service/edit', {into: 'application', outlet: 'overlay'});
-  },
-
-  actions: {
-    cancel: function() {
-      this.goToPrevious();
-    },
-  }
-});

app/service/edit/template.hbs

@@ -1,39 +0,0 @@
-<section class="horizontal-form container-fluid">
-  <h2>{{#if editing}}Edit{{else}}Add{{/if}} Service</h2>
-  {{top-errors errors=errors}}
-
-  {{partial "container/edit-name"}}
-
-  {{#if canScale}}
-    {{partial "form-divider"}}
-
-    <div class="row">
-      <div class="col-sm-12 col-md-2 form-label">
-        <label>Scale</label>
-      </div>
-      {{#if isGlobal}}
-        <div class="col-sm-10 col-md-8">
-          <span class="text-muted">Always run one instance of this container on every host</span>
-        </div>
-      {{else}}
-        <div class="col-sm-2 col-md-1">
-          {{service.scale}}
-        </div>
-        <div class="col-sm-10 col-md-7">
-          {{input-slider value=service.scale valueMin=1 valueMax=11 scaleMin=0 scaleMax=12}}
-        </div>
-      {{/if}}
-    </div>
-  {{/if}}
-
-  {{partial "form-divider"}}
-
-  {{#if hasServiceLinks}}
-    {{partial "container/edit-services"}}
-  {{/if}}
-  {{#if hasTargetIp}}
-    {{partial "container/edit-targetip"}}
-  {{/if}}
-</section>
-
-{{partial "save-cancel"}}

app/service/edit/view.js

@@ -1,17 +0,0 @@
-import Overlay from "ui/overlay/view";
-import { addAction } from 'ui/utils/add-view-action';
-
-export default Overlay.extend({
-  actions: {
-    addServiceLink:        addAction('addServiceLink',  '.service-link'),
-    addTargetIp:           addAction('addTargetIp',     '.target-ip'),
-
-    overlayClose: function() {
-      this.get('controller').send('cancel');
-    },
-
-    overlayEnter: function() {
-      this.get('controller').send('save');
-    },
-  }
-});

app/service/model.js

@@ -16,7 +16,7 @@ var Service = Resource.extend(ReadLabels, {
   consumedServicesUpdated: 0,
   serviceLinks: null, // Used for clone
   reservedKeys: ['_allMaps','consumedServicesUpdated','serviceLinks'],
-  labelResource: Ember.computed.alias('model.launchConfig'),
+  labelResource: Ember.computed.alias('launchConfig'),
 
   init: function() {
     this._super();
@@ -163,7 +163,7 @@ var Service = Resource.extend(ReadLabels, {
   }.property('type'),
 
   activeIcon: function() {
-    return activeIcon(this.get('model'));
+    return activeIcon(this);
   }.property('type'),
 
 });

app/services/endpoint.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import Util from 'ui/utils/util';
+import C from 'ui/utils/constants';
 
 export default Ember.Service.extend({
   cookies: Ember.inject.service(),

app/templates/container/edit-links.hbs

@@ -7,7 +7,7 @@
     {{#unless editing}}
       <div>
         {{#if containersOnRequestedHostIfUnmanaged.length}}
-          <button class="btn-circle-plus" {{action "addLink" target="view"}}></button>
+          <button class="btn-circle-plus" {{action "addLink"}}></button>
         {{else}}
           <span class="text-muted">There are no other containers to link to.</span>
         {{/if}}
@@ -39,9 +39,9 @@
             </td>
             <td>
               {{#if link.existing}}
-                <p class="form-control-static input-sm text-muted">{{link.linkName}}</p>
+                <p class="form-control-static input-sm text-muted">{{link.name}}</p>
               {{else}}
-                {{input class="form-control input-sm" type="text" value=link.linkName placeholder="e.g. database"}}
+                {{input class="form-control input-sm" type="text" value=link.name placeholder="e.g. database"}}
               {{/if}}
             </td>
             <td class="text-right">

app/templates/container/edit-services.hbs

@@ -39,7 +39,7 @@
                 <p class="form-control-static"><i class="ss-right"></i></p>
               </td>
               <td>
-                {{input class="form-control input-sm" type="text" value=link.linkName placeholder="e.g. database"}}
+                {{input class="form-control input-sm" type="text" value=link.name placeholder="e.g. database"}}
               </td>
             {{/if}}
             <td class="text-right">

app/utils/add-view-action.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export function addAction(action, selector) {
   return function() {
-    this.get('controller').send(action);
+    this._super();
     Ember.run.next(this, function() {
       this.$(selector).last().focus();
     });