Start add/edit container/service

app/components/backups-section/component.js

@@ -1,4 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-});

app/components/backups-section/template.hbs

@@ -1 +0,0 @@
-{{yield}}

app/components/container/new-edit/component.js

@@ -389,21 +389,27 @@ export default Ember.Component.extend(NewOrEdit, SelectTab, {
     this.sendAction('done');
   },
 
-  headerLabel: function() {
+  headerToken: function() {
     let k = 'newContainer.';
     k += (this.get('isUpgrade') ? 'upgrade' : 'add') + '.';
     if ( this.get('isService') ) {
       k += 'service';
-    } else if ( this.get('isVm') ) {
-      k += 'vm';
     } else {
       k += 'container';
     }
 
-    let count = this.get('service.secondaryLaunchConfigs.length') + 1;
+    return k;
+  }.property('isUpgrade','isService'),
 
-    return this.get('intl').t(k, {numServices: count});
-  }.property('intl._locale','isUpgrade','isService','isVm','service.secondaryLaunchConfigs.length'),
+  nameToken: function() {
+    let k = 'newContainer.name.label.';
+    if ( this.get('isService') ) {
+      k += 'service';
+    } else {
+      k += 'container';
+    }
+    return k;
+  }.property('isService'),
 
   supportsSecrets: function() {
     return !!this.get('store').getById('schema','secret');

app/components/container/new-edit/template.hbs

@@ -0,0 +1,191 @@
+<section class="header clearfix">
+  <h1>{{t headerToken}}</h1>
+</section>
+
+{{#if isService}}
+  <section class="horizontal-form well">
+      {{#if isUpgrade}}
+        {{form-upgrade
+          switch=(action 'selectLaunchConfig')
+          optionsChanged=(action 'setUpgrade')
+          choices=launchConfigChoices
+          index=activeLaunchConfigIndex
+        }}
+      {{/if}}
+
+      {{form-scale
+        initialLabels=launchConfig.labels
+        initialScale=service.scale
+        isGlobal=isGlobal
+        errors=scaleErrors
+        setLabels=(action 'setLabels' 'scale')
+        setGlobal=(action 'setGlobal')
+        setScale=(action  'setScale')
+        classNames=(if isUpgrade 'hide')
+      }}
+  </section>
+{{/if}}
+
+<section class="horizontal-form well">
+  {{#unless isUpgrade}}
+    {{form-name-description
+      model=primaryResource
+      nameLabel=nameToken
+      namePlaceholder="newContainer.name.placeholder"
+      descriptionPlaceholder="newContainer.description.placeholder"
+    }}
+  {{/unless}}
+
+  {{form-image
+    initialValue=launchConfig.imageUuid
+    errors=imageErrors
+    changed=(action 'setImage')
+    initialLabels=launchConfig.labels
+    setLabels=(action 'setLabels' 'image')
+  }}
+
+  {{form-ports
+    initialPorts=launchConfig.ports
+    errors=portErrors
+    changedStr=(action (mut launchConfig.ports))
+    portsAsStrArray=launchConfig.ports
+  }}
+
+  {{#if (and isService (not isSidekick))}}
+    {{form-service-links
+      service=service
+      changed=(action 'setServiceLinks')
+    }}
+  {{/if}}
+</section>
+
+  <section>
+  <div class="tabs">
+    <ul class="tab-header shadowed" style="display: inline-block" role="tablist">
+      <li role="tab" aria-controls="panel" class="tab" data-section="command" {{action "selectTab" "command"}}>
+        <a href="#">{{t 'newContainer.tabs.command'}}</a>
+      </li>
+      <li role="tab" aria-controls="panel" class="tab" data-section="volumes" {{action "selectTab" "volumes"}}>
+        <a href="#">{{t 'newContainer.tabs.volumes'}}</a>
+      </li>
+      <li role="tab" aria-controls="panel" class="tab" data-section="network" {{action "selectTab" "network"}}>
+        <a href="#">{{t 'newContainer.tabs.networking'}}</a>
+      </li>
+      <li role="tab" aria-controls="panel" class="tab" data-section="security" {{action "selectTab" "security"}}>
+        <a href="#">{{t 'newContainer.tabs.security'}}</a>
+      </li>
+
+      {{#if supportsSecrets}}
+        <li role="tab" aria-controls="panel" class="tab" data-section="secrets" {{action "selectTab" "secrets"}}><a href="#">{{t 'newContainer.tabs.secrets'}}</a></li>
+      {{/if}}
+
+      <li role="tab" aria-controls="panel" class="tab" data-section="healthcheck" {{action "selectTab" "healthcheck"}}>
+        <a href="#">{{t 'newContainer.tabs.healthCheck'}}</a>
+      </li>
+
+      <li role="tab" aria-controls="panel" class="tab" data-section="labels" {{action "selectTab" "labels"}}>
+        <a href="#">{{t 'newContainer.tabs.labels'}}</a>
+      </li>
+      <li role="tab" aria-controls="panel" class="tab" data-section="scheduling" {{action "selectTab" "scheduling"}}>
+        <a href="#">{{t 'newContainer.tabs.scheduling'}}</a>
+      </li>
+
+      {{#if (and false isService)}}
+        <li role="tab" aria-controls="panel" class="tab" data-section="balancing" {{action "selectTab" "balancing"}}><a href="#">{{t 'newContainer.tabs.balancing'}}</a></li>
+      {{/if}}
+    </ul>
+  </div>
+  <div class="horizontal-form well" role="tabpanel">
+    <div class="section" data-section="command">
+      {{form-command
+        instance=launchConfig
+        initialLabels=launchConfig.labels
+        errors=commandErrors
+        isService=isService
+        setLabels=(action 'setLabels' 'command')
+      }}
+    </div>
+
+    <div class="section" data-section="volumes">
+      {{form-volumes
+        instance=launchConfig
+        isService=isService
+        service=service
+        primaryService=primaryService
+        launchConfigIndex=launchConfigIndex
+        errors=volumeErrors
+        allHosts=allHosts}}
+    </div>
+
+    <div class="section" data-section="network">
+      {{form-networking
+        editing=true
+        instance=launchConfig
+        errors=networkingErrors
+        allHosts=allHosts
+        service=service
+        isService=isService
+        isSidekick=isSidekick
+        initialLabels=launchConfig.labels
+        isUpgrade=isUpgrade
+        setLabels=(action 'setLabels' 'networking')
+      }}
+    </div>
+
+    <div class="section" data-section="security">
+      {{form-security instance=launchConfig errors=securityErrors editing=true}}
+    </div>
+
+    {{#if supportsSecrets}}
+      <div class="section" data-section="secrets">
+        {{form-secrets
+          secrets=launchConfig.secrets
+          errors=secretErrors
+          editing=true}}
+      </div>
+    {{/if}}
+
+    <div class="section" data-section="healthcheck">
+      {{form-healthcheck
+        isService=isService
+        healthCheck=launchConfig.healthCheck
+        errors=healthCheckErrors
+        editing=true}}
+    </div>
+
+    <div class="section" data-section="labels">
+      {{form-user-labels
+        initialLabels=launchConfig.labels
+        setLabels=(action 'setLabels' 'user')
+      }}
+    </div>
+
+    <div class="section" data-section="scheduling">
+      {{form-scheduling
+        isService=isService
+        isGlobal=isGlobal
+        initialHostId=launchConfig.requestedHostId
+        initialLabels=launchConfig.labels
+        errors=schedulingErrors
+        editing=true
+        allHosts=allHosts
+        setLabels=(action 'setLabels' 'scheduling')
+        setGlobal=(action 'setGlobal')
+        setRequestedHost=(action 'setRequestedHostId')
+      }}
+    </div>
+
+    {{#if (and false isService)}}
+      <div class="section" data-section="balancing">
+        {{form-balancer-rules
+          service=service
+          showListeners=false
+        }}
+      </div>
+    {{/if}}
+
+  </div>
+</section>
+
+{{top-errors errors=errors}}
+{{save-cancel saveDisabled=noLaunchConfigsEnabled createLabel=(if isUpgrade 'newContainer.saveUpgrade' 'newContainer.saveNew') save="save" cancel="cancel"}}

app/components/form-security/component.js

@@ -49,7 +49,7 @@ export default Ember.Component.extend({
 
   didInsertElement() {
     if ( ! this.get('projects.current.isWindows') ) {
-      this.initMultiselect();
+//      this.initMultiselect();
       this.privilegedDidChange();
     }
   },
@@ -249,12 +249,12 @@ export default Ember.Component.extend({
           });
         }
 
-        this.$select.multiselect('refresh');
+//        this.$select.multiselect('refresh');
       }
     };
 
-    this.$('.select-cap-add').multiselect(opts);
-    this.$('.select-cap-drop').multiselect(opts);
+//    this.$('.select-cap-add').multiselect(opts);
+//    this.$('.select-cap-drop').multiselect(opts);
   },
 
   privilegedDidChange: function() {
@@ -264,13 +264,13 @@ export default Ember.Component.extend({
     {
       if ( this.get('instance.privileged') )
       {
-        add.multiselect('disable');
-        drop.multiselect('disable');
+//        add.multiselect('disable');
+//        drop.multiselect('disable');
       }
       else
       {
-        add.multiselect('enable');
-        drop.multiselect('enable');
+//        add.multiselect('enable');
+//        drop.multiselect('enable');
       }
     }
   }.observes('instance.privileged'),

app/components/host-pod/template.hbs

@@ -1,6 +1,5 @@
 <div class="pod-header clearfix">
-
-  <div class="pull-left pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div>
+  {{badge-state classNames="pull-left pod-state" model=model}}
   <div class="pull-right">{{action-menu model=model}}</div>
 </div>
   <div class="pod-name">

app/components/new-container/template.hbs

@@ -1,241 +0,0 @@
-{{#unless isSidekick}}
-  <section class="header clearfix">
-    <h1>{{headerLabel}}</h1>
-  </section>
-
-{{#if isService}}
-  <section class="horizontal-form well">
-      {{#if isUpgrade}}
-        {{form-upgrade
-          switch=(action 'selectLaunchConfig')
-          optionsChanged=(action 'setUpgrade')
-          choices=launchConfigChoices
-          index=activeLaunchConfigIndex
-        }}
-      {{/if}}
-
-      {{form-scale
-        initialLabels=launchConfig.labels
-        initialScale=service.scale
-        isGlobal=isGlobal
-        errors=scaleErrors
-        setLabels=(action 'setLabels' 'scale')
-        setGlobal=(action 'setGlobal')
-        setScale=(action  'setScale')
-        isVm=isVm
-        classNames=(if isUpgrade 'hide')
-      }}
-
-      {{form-launch-config-switch
-        index=activeLaunchConfigIndex
-        choices=launchConfigChoices
-        add=(action 'addSidekick')
-        switch=(action 'selectLaunchConfig')
-        showAdd=(not isUpgrade)
-      }}
-  </section>
-{{/if}}
-
-{{/unless}}
-
-{{#if noLaunchConfigsEnabled}}
-  <div class="text-muted text-center">{{t 'newContainer.selectUpgrade'}}</div>
-{{/if}}
-
-<div data-launchindex="{{if isSidekick '' '-1'}}">
-  <section class="horizontal-form well">
-    {{#unless isUpgrade}}
-      {{form-name-description
-        model=primaryResource
-        namePlaceholder="newContainer.name.placeholder"
-        descriptionPlaceholder="newContainer.description.placeholder"
-      }}
-    {{/unless}}
-
-    {{form-image
-      isVm=isVm
-      initialValue=launchConfig.imageUuid
-      errors=imageErrors
-      changed=(action 'setImage')
-      initialLabels=launchConfig.labels
-      setLabels=(action 'setLabels' 'image')
-    }}
-
-    {{#if isVm}}
-      {{form-virtualmachine launchConfig=launchConfig}}
-    {{/if}}
-
-    {{form-ports
-      initialPorts=launchConfig.ports
-      errors=portErrors
-      changedStr=(action (mut launchConfig.ports))
-      portsAsStrArray=launchConfig.ports
-    }}
-
-    {{#if (and isService (not isSidekick))}}
-      {{form-service-links
-        service=service
-        changed=(action 'setServiceLinks')
-      }}
-    {{/if}}
-  </section>
-
-  <section>
-  <div class="tabs">
-    <ul class="tab-header shadowed" style="display: inline-block" role="tablist">
-      {{#if isVm}}
-        <li role="tab" aria-controls="panel" class="tab" data-section="disks" {{action "selectTab" "disks"}}><a href="#">{{t 'newContainer.tabs.disks'}}</a></li>
-        <li role="tab" aria-controls="panel" class="tab" data-section="userdata" {{action "selectTab" "userdata"}}><a href="#">{{t 'newContainer.tabs.userData'}}</a></li>
-      {{else}}
-        <li role="tab" aria-controls="panel" class="tab" data-section="command" {{action "selectTab" "command"}}><a href="#">{{t 'newContainer.tabs.command'}}</a></li>
-        <li role="tab" aria-controls="panel" class="tab" data-section="volumes" {{action "selectTab" "volumes"}}><a href="#">{{t 'newContainer.tabs.volumes'}}
-</a></li>
-        <li role="tab" aria-controls="panel" class="tab" data-section="network" {{action "selectTab" "network"}}><a href="#">{{t 'newContainer.tabs.networking'}}</a></li>
-        <li role="tab" aria-controls="panel" class="tab" data-section="security" {{action "selectTab" "security"}}><a href="#">{{t 'newContainer.tabs.security'}}</a></li>
-      {{/if}}
-
-      {{#if supportsSecrets}}
-        <li role="tab" aria-controls="panel" class="tab" data-section="secrets" {{action "selectTab" "secrets"}}><a href="#">{{t 'newContainer.tabs.secrets'}}</a></li>
-      {{/if}}
-      <li role="tab" aria-controls="panel" class="tab" data-section="healthcheck" {{action "selectTab" "healthcheck"}}><a href="#">{{t 'newContainer.tabs.healthCheck'}}</a></li>
-      <li role="tab" aria-controls="panel" class="tab" data-section="labels" {{action "selectTab" "labels"}}><a href="#">{{t 'newContainer.tabs.labels'}}</a></li>
-      <li role="tab" aria-controls="panel" class="tab" data-section="scheduling" {{action "selectTab" "scheduling"}}><a href="#">{{t 'newContainer.tabs.scheduling'}}</a></li>
-      {{#if (and false isService)}}
-        <li role="tab" aria-controls="panel" class="tab" data-section="balancing" {{action "selectTab" "balancing"}}><a href="#">{{t 'newContainer.tabs.balancing'}}</a></li>
-      {{/if}}
-    </ul>
-  
-  <div class="tab-content" role="tabpanel">
-    {{#if isVm}}
-      <div class="section" data-section="disks">
-        {{form-disks instance=launchConfig availableDrivers=storageDriverChoices errors=diskErrors}}
-      </div>
-
-      <div class="section" data-section="userdata">
-        {{form-userdata instance=launchConfig}}
-      </div>
-    {{else}}
-      <div class="section" data-section="command">
-        {{form-command
-          instance=launchConfig
-          initialLabels=launchConfig.labels
-          errors=commandErrors
-          isService=isService
-          setLabels=(action 'setLabels' 'command')
-        }}
-      </div>
-
-      <div class="section" data-section="volumes">
-        {{form-volumes
-          instance=launchConfig
-          isService=isService
-          service=service
-          primaryService=primaryService
-          launchConfigIndex=launchConfigIndex
-          errors=volumeErrors
-          allHosts=allHosts}}
-      </div>
-
-      <div class="section" data-section="network">
-        {{form-networking
-          editing=true
-          instance=launchConfig
-          errors=networkingErrors
-          allHosts=allHosts
-          service=service
-          isService=isService
-          isSidekick=isSidekick
-          initialLabels=launchConfig.labels
-          isUpgrade=isUpgrade
-          setLabels=(action 'setLabels' 'networking')
-        }}
-      </div>
-
-      <div class="section" data-section="security">
-        {{form-security instance=launchConfig errors=securityErrors editing=true}}
-      </div>
-    {{/if}}
-
-    {{#if supportsSecrets}}
-      <div class="section" data-section="secrets">
-        {{form-secrets
-          secrets=launchConfig.secrets
-          errors=secretErrors
-          editing=true}}
-      </div>
-    {{/if}}
-
-    <div class="section" data-section="healthcheck">
-      {{form-healthcheck
-        isService=isService
-        healthCheck=launchConfig.healthCheck
-        errors=healthCheckErrors
-        editing=true}}
-    </div>
-
-    <div class="section" data-section="labels">
-      {{form-user-labels
-        initialLabels=launchConfig.labels
-        setLabels=(action 'setLabels' 'user')
-      }}
-    </div>
-
-    <div class="section" data-section="scheduling">
-      {{form-scheduling
-        isService=isService
-        isGlobal=isGlobal
-        isVm=isVm
-        initialHostId=launchConfig.requestedHostId
-        initialLabels=launchConfig.labels
-        errors=schedulingErrors
-        editing=true
-        allHosts=allHosts
-        setLabels=(action 'setLabels' 'scheduling')
-        setGlobal=(action 'setGlobal')
-        setRequestedHost=(action 'setRequestedHostId')
-      }}
-    </div>
-
-    {{#if (and false isService)}}
-      <div class="section" data-section="balancing">
-        {{form-balancer-rules
-          service=service
-          showListeners=false
-        }}
-      </div>
-    {{/if}}
-
-  </div>
-  </div>
-  </section>
-</div>
-
-{{#if (and isService (not isSidekick))}}
-  {{#each service.secondaryLaunchConfigs as |slc index|}}
-    <div data-launchindex="{{index}}" class="hide">
-      {{new-container
-        isService=true
-        isSidekick=true
-        isUpgrade=isUpgrade
-        isVm=(eq slc.kind 'virtualMachine')
-        launchConfig=slc
-        service=slc
-        primaryResource=slc
-        primaryService=primaryService
-        launchConfigIndex=index
-        allHosts=allHosts
-        allStoragePools=allStoragePools
-      }}
-    </div>
-  {{/each}}
-{{/if}}
-
-
-{{#unless isSidekick}}
-  {{top-errors errors=errors}}
-  {{#save-cancel saveDisabled=noLaunchConfigsEnabled createLabel=(if isUpgrade 'newContainer.saveUpgrade' 'newContainer.saveNew') save="save" cancel="cancel"}}
-    {{#if (and (not isUpgrade) (not-eq activeLaunchConfigIndex -1))}}
-      <button class="btn bg-default" {{action "removeSidekick"}}>{{t 'newContainer.removeSidekick'}}</button>
-    {{/if}}
-  {{/save-cancel}}
-{{/unless}}

app/components/page-header-environment/template.hbs

@@ -1,7 +1,6 @@
 {{~#if project~}}
   <li class="dropdown project-btn pl-0">
     <a href="#" id='environment-dropdown' role="button" class="btn bg-transparent dropdown-toggle text-left" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.environment.label'}}">
-      <label>{{t 'nav.environment.label'}}</label>
       <span class="clip">
         <i class="{{project.icon}} project-icon icon-fw"></i>&nbsp;{{project.displayName}}
       </span>

app/components/page-header-user/component.js

@@ -1,27 +0,0 @@
-import Ember from 'ember';
-import C from 'ui/utils/constants';
-
-export default Ember.Component.extend({
-  tagName: '',
-
-  access: Ember.inject.service(),
-  modalService: Ember.inject.service('modal'),
-
-  accessEnabled    : Ember.computed.alias('access.enabled'),
-
-  isLocalAuth: function() {
-    return this.get('access.enabled') && this.get('access.provider') === 'localauthconfig';
-  }.property('access.{enabled,provider}'),
-
-  actions: {
-    changePassword() {
-      let us = this.get('userStore');
-
-      us.findAll('password').then(() => {
-        us.find('account', this.get('session.'+C.SESSION.ACCOUNT_ID)).then((account) => {
-          this.get('modalService').toggleModal('edit-account', account);
-        });
-      });
-    },
-  },
-});

app/components/page-header-user/template.hbs

@@ -1,39 +0,0 @@
-<a class="dropdown-toggle user-toggle bg-transparent" href="#" role="button" id="user-dropdown" aria-haspopup="true" aria-expanded="false" aria-label={{t 'nav.user.label' username=session.user}}>
-  {{#if accessEnabled}}
-    {{identity-avatar link=false identity=access.identity}}
-    <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
-    <i class="icon icon-chevron-down"></i>
-  {{else}}
-    <div class="gh-avatar">
-      <div class="gh-placeholder">
-        <i class="icon icon-user"></i>
-      </div>
-    </div>
-    <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
-    <i class="icon icon-chevron-down"></i>
-  {{/if}}
-</a>
-<ul class="dropdown-menu dropdown-menu-right user-menu" role="menu" data-dropdown-id="user">
-  {{#if accessEnabled}}
-    <li role="presentation" class="user-auth">
-      {{identity-block avatar=false identity=access.identity}}
-      {{#link-to "logout" class="user-logout"}}<i class="icon icon-logout"></i> {{t 'nav.user.logout'}}{{/link-to}}
-    </li>
-  {{/if}}
-
-  {{#if isLocalAuth}}
-    <li role="presentation" class="dropdown-header">
-      {{t 'nav.user.yourAccount'}}
-    </li>
-
-    <li role="presentation">
-      <a {{action "changePassword"}} role="menuitem">{{t 'nav.user.changePassword'}}</a>
-    </li>
-
-  {{/if}}
-
-  <li class="dropdown-header">{{t 'nav.user.theme'}}</li>
-  <li role="presentation" class="theme-toggle text-center btn-group">
-    {{theme-toggle}}
-  </li>
-</ul>

app/components/page-header/template.hbs

@@ -1,7 +1,7 @@
 <nav class="clearfix" role="navigation">
   <button class="nav-logo logo-{{app.mode}} btn bg-transparent"><span class="sr-only">{{settings.appName}}</span></button>
 
-  <ul class="nav-middle">
+  <ul class="nav-main">
     {{#if (or isOss (gt projects.active.length 1))}}
       {{~page-header-environment
         currentPath=currentPath

app/components/page-numbers/template.hbs

@@ -0,0 +1,13 @@
+<div class="pagination-container">
+  {{#if (gte content.page 2)}}
+    <div class="lacsso btn-group btn-group-sm">
+      <a class="lacsso arrow prev enabled-arrow btn bg-default" disabled={{unless (gte content.page 2) 'disabled'}} {{action "pageClicked" 1}}><span class="icon icon-chevron-beginning"></span></a>
+      <a class="lacsso arrow prev enabled-arrow btn bg-default" disabled={{unless canStepBackward 'disabled'}} {{action "incrementPage" -1}}><span class="icon icon-chevron-left"></span></a>
+      <div class="overview-text lacsso btn bg-default" style="border: 0;">{{t 'pagination.multi' pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div>
+      <a class="lacsso arrow next enabled-arrow btn bg-default" disabled={{unless canStepForward 'disabled'}} {{action "incrementPage" 1}}><span class="icon icon-chevron-right"></span></a>
+      <a class="lacsso arrow prev enabled-arrow btn bg-default" disabled={{if (gte content.page content.totalPages) 'disabled'}} {{action "pageClicked" content.totalPages}}><span class="icon icon-chevron-end"></span></a>
+    </div>
+  {{else}}
+    <div class="overview-text" style="border: 0;">{{t 'pagination.multi' pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div>
+  {{/if}}
+</div>

app/components/select-dot/component.js

@@ -1,6 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  model: null,
-  tagName: 'span',
-});

app/components/select-dot/template.hbs

@@ -1 +0,0 @@
-<span class="clip"><i class="{{model.stateIcon}} {{model.stateColor}}" ></i> {{model.displayName}}</span>

app/components/sortable-table/template.hbs

@@ -48,7 +48,7 @@
             </div>
           {{/if}}
         </div>
-        <div class="col span-4">
+        <div class="col span-4 text-right">
           {{#if search}}
             <div class="row inline-form gutless">
               <span class="col span-3 input-label bg-default input-sm">
@@ -63,11 +63,6 @@
             </div>
           {{/if}}
         </div>
-        <div class="col span-4">
-          {{#if paging}}
-            {{page-numbers content=pagedContent class="pull-right no-select" indexTo=indexTo indexFrom=indexFrom totalCount=filtered.length}}
-          {{/if}}
-        </div>
       </div>
     {{/if}}
 
@@ -121,3 +116,8 @@
     {{/if}}
   </tbody>
 </table>
+<div class="text-center">
+  {{#if paging}}
+    {{page-numbers content=pagedContent class="pull-right no-select" indexTo=indexTo indexFrom=indexFrom totalCount=filtered.length}}
+  {{/if}}
+</div>

app/containers/new/template.hbs

@@ -1,4 +1,4 @@
-{{new-container
+{{container/new-edit
   isStandalone=true
   isService=false
   isSidekick=false

app/service/new-virtualmachine/controller.js

@@ -1,19 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Controller.extend({
-  queryParams: ['stackId','serviceId','virtualMachineId','upgrade'],
-  stackId: null,
-  serviceId: null,
-  virtualMachineId: null,
-  upgrade: null,
-
-  actions: {
-    done() {
-      return this.transitionToRoute('stack', this.get('model.service.stackId'));
-    },
-
-    cancel() {
-      this.send('goToPrevious');
-    },
-  },
-});

app/service/new-virtualmachine/route.js

@@ -1,114 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-  model: function(params/*, transition*/) {
-    var store = this.get('store');
-
-    var dependencies = {
-      allHosts: store.findAll('host'), // Need inactive ones in case a link points to an inactive host
-      allStoragePools: store.findAll('storagepool'),
-    };
-
-    if ( params.serviceId )
-    {
-      dependencies.service = store.find('service', params.serviceId);
-    }
-    else if ( params.virtualMachineId )
-    {
-      dependencies.vm = store.find('virtualmachine', params.virtualMachineId, {include: ['ports']});
-    }
-
-    return Ember.RSVP.hash(dependencies, 'Load VM dependencies').then((results) => {
-      var store = this.get('store');
-      var serviceOrVm = results.service || results.vm;
-      var serviceLinks = [];
-      var secondaryLaunchConfigs = [];
-
-      if ( params.upgrade )
-      {
-        return Ember.Object.create({
-          service: serviceOrVm.clone(),
-          allHosts: results.allHosts,
-          allStoragePools: results.allStoragePools,
-        });
-      }
-
-      var instanceData, serviceData, healthCheckData;
-      if ( serviceOrVm )
-      {
-        if ( serviceOrVm.get('type') === 'service' )
-        {
-          serviceData = serviceOrVm.serializeForNew();
-          serviceLinks = serviceOrVm.get('consumedServicesWithNames');
-          instanceData = serviceData.launchConfig;
-          delete serviceData.launchConfig;
-          delete serviceData.instances;
-
-          (serviceOrVm.secondaryLaunchConfigs||[]).forEach((slc) => {
-            var data = slc.serializeForNew();
-            secondaryLaunchConfigs.push(store.createRecord(data));
-          });
-
-          delete serviceData.secondaryLaunchConfigs;
-        }
-        else
-        {
-          instanceData = serviceOrVm.serializeForNew();
-        }
-
-        healthCheckData = instanceData.healthCheck;
-      }
-      else
-      {
-        instanceData = {
-          type: 'launchConfig',
-          kind: 'virtualMachine',
-          memoryMb: 512,
-          tty: true,
-          stdinOpen: true,
-          restartPolicy: {name: 'always'},
-        };
-      }
-
-      if ( !serviceData )
-      {
-        serviceData = {
-          type: 'service',
-          stackId: params.stackId,
-          scale: 1,
-          startOnCreate: true,
-        };
-      }
-
-      var instance = store.createRecord(instanceData);
-      var service = store.createRecord(serviceData);
-      service.set('serviceLinks', serviceLinks);
-
-      if ( healthCheckData )
-      {
-        // The type isn't set on an existing one
-        healthCheckData.type = 'instanceHealthCheck';
-        instance.set('healthCheck', store.createRecord(healthCheckData));
-      }
-
-      service.set('launchConfig', instance);
-      service.set('secondaryLaunchConfigs', secondaryLaunchConfigs);
-
-      return Ember.Object.create({
-        service: service,
-        allHosts: results.allHosts,
-        allStoragePools: results.allStoragePools,
-      });
-    });
-  },
-
-  resetController: function (controller, isExiting/*, transition*/) {
-    if (isExiting)
-    {
-      controller.set('stackId', null);
-      controller.set('serviceId', null);
-      controller.set('virtualMachineId', null);
-      controller.set('upgrade', null);
-    }
-  }
-});

app/service/new-virtualmachine/template.hbs

@@ -1,13 +0,0 @@
-{{new-container
-  isService=true
-  isUpgrade=upgrade
-  isSidekick=false
-  isVm=true
-  launchConfig=model.service.launchConfig
-  service=model.service
-  primaryResource=model.service
-  allHosts=model.allHosts
-  allStoragePools=model.allStoragePools
-  done=(action 'done')
-  cancel=(action 'cancel')
-}}

app/service/new/template.hbs

@@ -1,4 +1,4 @@
-{{new-container
+{{container/new-edit
   editing=false
   isService=true
   isUpgrade=upgrade

app/styles/components/_badge-state.scss

@@ -16,9 +16,7 @@
 }
 
 .grid TD.state {
-  &::after {
-    @include clearfix;
-  }
+  @include clearfix;
 
   .badge-state {
     @include clip;

app/styles/components/_page-header.scss

@@ -21,6 +21,14 @@
     padding: 0;
   }
 
+  .project-btn {
+    @include clip;
+
+    max-width: 150px;
+    padding-left: 10px;
+    background-color: white;
+  }
+
   ul.nav-middle {
     display:table-cell;
     vertical-align: middle;

app/styles/lacsso/_lacsso.scss

@@ -19,6 +19,7 @@
 @import "app/styles/lacsso/base/color";
 @import "app/styles/lacsso/base/typography";
 @import "app/styles/lacsso/base/helpers";
+@import "app/styles/lacsso/base/icons";
 
 // 4. Layout-related sections
 @import "app/styles/lacsso/layout/header";

app/styles/lacsso/base/_helpers.scss

@@ -5,16 +5,28 @@
 /**
  * Clear inner floats
  */
-@mixin clearfix {
-  clear: both;
-  content: '';
-  display: table;
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
 }
 
-.clearfix::after {
+.clearfix {
   @include clearfix;
 }
 
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+
 /**
  * Main content containers
  * 1. Make the container full-width with a maximum width

app/styles/lacsso/base/_icons.scss

@@ -0,0 +1,105 @@
+// Animated Icons
+// --------------------------
+.icon-spin {
+  -webkit-animation: icon-spin 2s infinite steps(8);
+          animation: icon-spin 2s infinite steps(8);
+}
+
+//.icon-pulse {
+//  -webkit-animation: icon-spin 1s infinite steps(8);
+//          animation: icon-spin 1s infinite steps(8);
+//}
+
+@-webkit-keyframes icon-spin {
+  0% {
+    -webkit-transform: rotateZ(0deg);
+            transform: rotateZ(0deg);
+  }
+  100% {
+    -webkit-transform: rotateZ(360deg);
+            transform: rotateZ(360deg);
+  }
+}
+
+@keyframes icon-spin {
+  0% {
+    -webkit-transform: rotateZ(0deg);
+            transform: rotateZ(0deg);
+  }
+  100% {
+    -webkit-transform: rotateZ(360deg);
+            transform: rotateZ(360deg);
+  }
+}
+
+// FontAwesomness
+$icon-li-width:         (30em / 14) !default;
+$icon-inverse:          #fff !default;
+
+.icon {
+  display: inline-block;
+}
+
+// Sizes
+.icon-fw {
+  width: (18em/14);
+  text-align: center;
+}
+
+.icon-sm {
+  font-size: (1em*0.8);
+}
+
+.icon-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.icon-2x { font-size: 2em; }
+.icon-3x { font-size: 3em; }
+.icon-4x { font-size: 4em; }
+.icon-5x { font-size: 5em; }
+
+// Stacked
+.icon-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.icon-stack-1x, .icon-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.icon-stack-1x { line-height: inherit; }
+.icon-stack-2x { font-size: 2em; }
+.icon-inverse { color: $icon-inverse; }
+
+// List
+.icon-ul {
+  padding-left: 0;
+  margin-left: $icon-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+
+.icon-li {
+  position: absolute;
+  left: -$icon-li-width;
+  width: $icon-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.icon-lg {
+    left: -$icon-li-width + (4em / 14);
+  }
+}
+
+.icon-rotate-90  { @include icon-rotate(90deg, 1);  }
+.icon-rotate-180 { @include icon-rotate(180deg, 2); }
+.icon-rotate-270 { @include icon-rotate(270deg, 3); }
+.icon-flip-horizontal { @include icon-flip(-1, 1, 0); }
+.icon-flip-vertical   { @include icon-flip(1, -1, 2); }

app/styles/rancher/components/_badge-state.scss

@@ -16,9 +16,7 @@
 }
 
 .grid TD.state {
-  &::after {
-    @include clearfix;
-  }
+  @include clearfix;
 
   .badge-state {
     @include clip;

translations/en-us.yaml

@@ -2855,20 +2855,10 @@ newCatalog:
 newContainer:
   add:
     container: Add Container
-    vm: Add Virtual Machine
-    service: |
-      Add {numServices, plural,
-        =1 {Service}
-        other {Services}
-      }
+    service: Add Service
   upgrade:
     container: Upgrade Container
-    vm: Upgrade Virtual Machine
-    service: |
-      Upgrade {numServices, plural,
-        =1 {Service}
-        other {# Services}
-      }
+    service: Upgrade Service
   tabs:
     disks: Disks
     userData: User Data
@@ -2886,6 +2876,9 @@ newContainer:
   saveNew: Create
   removeSidekick: Remove this Sidekick
   name:
+    label:
+      container: Container Name
+      service: Service Name
     placeholder: e.g. myapp
   description:
     placeholder: e.g. My Application