Header i18n & bugs (#637)

app/admin-tab/ha/controller.js

@@ -42,10 +42,6 @@ rancher/server:${version}`;
       Util.download(this.get('model.haConfig').linkFor('dbdump'));
     },
 
-    readFile(field, text) {
-      this.set('model.createScript.'+field, text.trim());
-    },
-
     promptPanic() {
       this.set('confirmPanic', true);
       Ember.run.later(() => {

app/authenticated/route.js

@@ -193,6 +193,7 @@ export default Ember.Route.extend(Subscribe, {
     },
 
     switchProject(projectId, transition=true) {
+      this.disconnectSubscribe();
       this.reset();
       if ( transition ) {
         this.intermediateTransitionTo('authenticated');

app/certificates/new/controller.js

@@ -8,10 +8,6 @@ export default Ember.Controller.extend(NewOrEdit,{
   }.property('model.key'),
 
   actions: {
-    readFile(field, text) {
-      this.set('model.'+field, text.trim());
-    },
-
     cancel() {
       this.transitionToRoute('certificates');
     },

app/components/edit-certificate/component.js

@@ -17,10 +17,6 @@ export default Ember.Component.extend(NewOrEdit, {
     cancel() {
       this.sendAction('dismiss');
     },
-
-    readFile(field, text) {
-      this.set('model.'+field, text.trim());
-    },
   },
 
   doneSaving() {

app/components/language-dropdown/template.hbs

@@ -1,7 +1,7 @@
 <a class="dropdown-toggle hand btn btn-sm btn-link lang-select" data-toggle="dropdown" aria-expanded="false">
   <i class="icon icon-globe"></i> {{selectedLabel}} <i class="icon icon-chevron-down"></i>
 </a>
-<ul class="dropdown-menu dropdown-menu-right" role="menu">
+<ul class="dropdown-menu dropdown-menu-right text-right" role="menu">
   {{#each-in locales as |lang label|}}
     <li class="{{if (eq selected lang) 'disabled selected'}}">
       <a {{action 'selectLanguage' lang}}>

app/components/orchestration/wait-kubernetes/component.js

@@ -7,9 +7,13 @@ export default Ember.Component.extend({
 
   timer: null,
   currentStep: 0,
+  services: null,
 
   didInitAttrs() {
     this.updateStep();
+    this.get('store').findAllUnremoved('service').then((services) => {
+      this.set('services', services);
+    });
   },
 
   willDestroyElement() {
@@ -25,7 +29,7 @@ export default Ember.Component.extend({
     'Creating Namespace',
   ],
 
-  updateStep: debouncedObserver('model.hosts.@each.state','model.stacks.@each.{state,externalId}', function() {
+  updateStep: debouncedObserver('model.hosts.@each.state','model.stacks.@each.{state,externalId}','services.@each.state', function() {
     if ( (this.get('model.hosts.length') + this.get('model.machines.length')) === 0 )
     {
       this.set('currentStep', 0);
@@ -56,7 +60,7 @@ export default Ember.Component.extend({
       return;
     }
 
-    var services = this.get('model.services').filterBy('environmentId', stack.get('id'));
+    var services = this.get('services').filterBy('environmentId', stack.get('id'));
     var num = services.get('length');
     var active = services.filterBy('state','active').get('length');
     if ( num === 0 || active < num )

app/components/page-footer/template.hbs

@@ -14,10 +14,13 @@
     <a class="dropdown-toggle hand btn btn-sm btn-link" data-toggle="dropdown" aria-expanded="false">
       <i class="icon icon-download"></i> {{t 'pageFooter.download.link'}} <i class="icon icon-chevron-down"></i>
     </a>
-    <ul class="dropdown-menu text-right" role="menu" style="min-width: 0">
+    <ul class="dropdown-menu dropdown-menu-right text-right" role="menu" style="min-width: 0">
       <li><a {{action "composeDownload" "darwin"}}>{{t 'pageFooter.download.mac'}} <i class="icon icon-fw icon-apple"></i></a></li>
       <li><a {{action "composeDownload" "windows"}}>{{t 'pageFooter.download.windows'}} <i class="icon icon-fw icon-windows"></i></a></li>
       <li><a {{action "composeDownload" "linux"}}>{{t 'pageFooter.download.linux'}} <i class="icon icon-fw icon-linux"></i></a></li>
     </ul>
   </div>
 </div>
+<div class="pull-right">
+  {{language-dropdown}}
+</div>

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

@@ -3,16 +3,16 @@
     <button role="button" class="btn btn-link dropdown-toggle text-left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="clip"><i class="{{project.icon}} icon-fw"></i>&nbsp;{{project.displayName}}</span>
       <i class="icon icon-chevron-down"></i>
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
-      <label>Environment</label>
+      <label>{{t 'nav.environment.label'}}</label>
     </button>
     <ul class="dropdown-menu project-menu" role="menu">
       {{#if projectChoices.length}}
         <li role="presentation" class="dropdown-header">
           {{#if accessEnabled}}
-            Your Environments
+            {{t 'nav.environment.your'}}
           {{else}}
-            All Environments
+            {{t 'nav.environment.all'}}
           {{/if}}
         </li>
         {{#each projectChoices as |p|}}
@@ -29,7 +29,7 @@
         <li role="presentation" class="divider"></li>
       {{/if}}
       {{#if projectIsMissing}}
-        <li role="presentation" class="dropdown-header">Selected Environment:</li>
+        <li role="presentation" class="dropdown-header">{{t 'nav.environment.selected'}}</li>
         <li class="{{if project.active 'disabled selected'}}">
           <a href="#" {{action "switchProject" project.id}} class="clip">
             <i class="icon {{project.icon}}"></i>
@@ -39,7 +39,7 @@
         </li>
         <li role="presentation" class="divider"></li>
       {{/if}}
-      <li>{{#link-to "settings.projects"}}Manage Environments{{/link-to}}</li>
+      <li>{{#link-to "settings.projects"}}{{t 'nav.environment.manage'}}{{/link-to}}</li>
     </ul>
   </div>
 {{/if}}
@@ -51,8 +51,8 @@
         <i class="icon icon-thumbnails icon-fw"></i>&nbsp;{{k8s.namespace.displayName}}
       </span>
       <i class="icon icon-chevron-down"></i>
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="sr-only">{{nav.srToggleDropdown}}</span>
-      <label>Namespace</label>
+      <label>{{t 'nav.namespace.label'}}</label>
     </button>
     <ul class="dropdown-menu project-menu" role="menu">
       {{#if k8s.namespaces.length}}
@@ -82,7 +82,7 @@
         {{/each}}
         <li role="presentation" class="divider"></li>
       {{/if}}
-      <li>{{#link-to "k8s-tab.namespaces"}}Manage Namespaces{{/link-to}}</li>
+      <li>{{#link-to "k8s-tab.namespaces"}}{{t 'nav.namespace.manage'}}{{/link-to}}</li>
     </ul>
   </div>
 {{/if}}

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

@@ -1,6 +1,7 @@
 <button class="dropdown user-toggle btn-link" role="button" id="user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="User Menu: {{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">
@@ -8,6 +9,7 @@
         <i class="icon icon-user"></i>
       </div>
     </div>
+    <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
     <i class="icon icon-chevron-down"></i>
   {{/if}}
 </button>
@@ -15,24 +17,23 @@
   {{#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> Log Out{{/link-to}}
+      {{#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">
-      Your Account
+      {{t 'nav.user.yourAccount'}}
     </li>
 
     <li role="presentation">
-      <a {{action "changePassword"}} role="menuitem">Change Password</a>
+      <a {{action "changePassword"}} role="menuitem">{{t 'nav.user.changePassword'}}</a>
     </li>
 
   {{/if}}
 
-  <li class="dropdown-header">Theme</li>
+  <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/component.js

@@ -106,6 +106,8 @@ export default Ember.Component.extend({
   hasSwarm:         Ember.computed.alias('project.orchestrationState.hasSwarm'),
   hasKubernetes:    Ember.computed.alias('project.orchestrationState.hasKubernetes'),
   hasMesos:         Ember.computed.alias('project.orchestrationState.hasMesos'),
+  swarmReady:       Ember.computed.alias('project.orchestrationState.swarmReady'),
+  mesosReady:       Ember.computed.alias('project.orchestrationState.mesosReady'),
 
   kubernetesReady: function() {
     return this.get('hasKubernetes') &&

app/components/page-header/template.hbs

@@ -2,7 +2,7 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
+        <span class="sr-only">{{t 'nav.srToggleNav'}}</span>
         <i class="icon icon-ellipsis"></i>
       </button>
       <a class="navbar-brand logo"></a>
@@ -17,7 +17,7 @@
         {{#each navTree as |item|}}
           {{#if item.url}}
             <li>
-              <a href="{{item.url}}" target="{{item.target}}">{{item.label}}</a>
+              <a href="{{item.url}}" target="{{item.target}}">{{#if item.localizedLabel}}{{t item.localizedLabel}}{{else}}{{item.label}}{{/if}}</a>
             </li>
           {{else}}
             {{#if item.submenu.length}}
@@ -35,7 +35,7 @@
                   aria-haspopup="true"
                   aria-expanded="false"
                 }}
-                  {{item.label}} <span class="icon icon-chevron-down"/>
+                  {{#if item.localizedLabel}}{{t item.localizedLabel}}{{else}}{{item.label}}{{/if}} <span class="icon icon-chevron-down"/>
                 {{/link-to-as-attrs}}
                 <ul class="dropdown-menu">
                   {{#each item.submenu as |subitem|}}
@@ -45,7 +45,7 @@
                       {{#if subitem.url}}
                         <li>
                           <a href="{{subitem.url}}" target="{{subitem.target}}">
-                            <i class="icon {{subitem.icon}}"/> {{subitem.label}}
+                            <i class="icon {{subitem.icon}}"/> {{#if subitem.localizedLabel}}{{t subitem.localizedLabel}}{{else}}{{subitem.label}}{{/if}}
                           </a>
                         </li>
                       {{else}}
@@ -57,7 +57,7 @@
                             activeParent=true
                             moreCurrentWhen=subitem.moreCurrentWhen
                           }}
-                            <i class="icon {{subitem.icon}}"/> {{subitem.label}}
+                            <i class="icon {{subitem.icon}}"/> {{#if subitem.localizedLabel}}{{t subitem.localizedLabel}}{{else}}{{subitem.label}}{{/if}}
                           {{/link-to-as-attrs}}
                         </li>
                       {{/if}}
@@ -75,7 +75,7 @@
                   activeParent=true
                   moreCurrentWhen=item.moreCurrentWhen
                 }}
-                  {{item.label}}
+                  {{#if item.localizedLabel}}{{t item.localizedLabel}}{{else}}{{item.label}}{{/if}}
                 {{/link-to-as-attrs}}
               </li>
             {{/if}}
@@ -84,7 +84,6 @@
       </ul>
 
       <ul class="nav navbar-nav navbar-right">
-        <li>{{language-dropdown}}</li>
         <li>{{page-header-user}}</li>
       </ul>
     </div>

app/components/stack-section/template.hbs

@@ -114,7 +114,7 @@
         </tbody>
       </table>
     {{else}}
-      {{hero-add-service environmentId=model.id}}
+      <div class="text-muted text-center r-p10">No Services</div>
     {{/if}}
   </div>
 {{/liquid-if}}

app/components/theme-toggle/template.hbs

@@ -1,5 +1,5 @@
-<button class="btn btn-default {{if (eq theme 'ui-light') 'active' ''}}" {{action 'changeTheme' 'ui-light'}} role="button">Light</button>
+<button class="btn btn-default {{if (eq theme 'ui-light') 'active' ''}}" {{action 'changeTheme' 'ui-light'}} role="button">{{t 'nav.user.themeLight'}}</button>
 
-<button class="btn btn-default {{if (eq theme 'ui-auto') 'active' ''}}" {{action 'changeTheme' 'ui-auto'}} role="button"><i class="icon icon-history"></i> Auto</button>
+<button class="btn btn-default {{if (eq theme 'ui-auto') 'active' ''}}" {{action 'changeTheme' 'ui-auto'}} role="button"><i class="icon icon-history"></i> {{t 'nav.user.themeAuto'}}</button>
 
-<button class="btn btn-default {{if (eq theme 'ui-dark') 'active' ''}}" {{action 'changeTheme' 'ui-dark'}} role="button">Dark</button>
+<button class="btn btn-default {{if (eq theme 'ui-dark') 'active' ''}}" {{action 'changeTheme' 'ui-dark'}} role="button">{{t 'nav.user.themeDark'}}</button>

app/environments/index/controller.js

@@ -9,7 +9,6 @@ export default Ember.Controller.extend(Sortable, {
   prefs: Ember.inject.service(),
 
   which: Ember.computed.alias('environments.which'),
-  single: null,
   showAddtlInfo: false,
   selectedService: null,
 
@@ -72,17 +71,12 @@ export default Ember.Controller.extend(Sortable, {
     name: ['name','id']
   },
 
-  showAdd: function() {
+  addSystem: function() {
-    if ( this.get('single') )
+    return [C.EXTERNALID.KIND_USER,C.EXTERNALID.KIND_ALL].indexOf(this.get('which')) === -1;
-    {
+  }.property('which'),
-      return false;
-    }
-
-    return !this.get('showWitch');
-  }.property('single','showWitch'),
 
   showWhich: function() {
     return [C.EXTERNALID.KIND_NOT_KUBERNETES,C.EXTERNALID.KIND_NOT_SWARM,C.EXTERNALID.KIND_USER].indexOf(this.get('which')) === -1;
-  }.property('single','which'),
+  }.property('which'),
 
 });

app/environments/index/template.hbs

@@ -3,9 +3,7 @@
     {{#if showWhich}}{{uc-first which}} {{/if}}Stacks
   </h1>
 
-  {{#if showAdd}}
+  {{#link-to "environments.new" (query-params system=addSystem) classNames="btn btn-sm btn-primary"}}Add Stack{{/link-to}}
-    {{#link-to "environments.new" classNames="btn btn-sm btn-primary"}}Add Stack{{/link-to}}
-  {{/if}}
 
   <div class="pull-right">
     <label class="text-muted r-pr5" style="font-size: 13px;">Sort By: </label>
@@ -20,8 +18,12 @@
   <div>
     {{#each arranged as |stack|}}
       {{stack-section model=stack showAddtlInfo='showAddtlInfo'}}
+    {{else}}
+      {{#if addSystem}}
+        <div class="r-m20 text-center text-muted">No System Stacks</div>
       {{else}}
         {{hero-add-service}}
+      {{/if}}
     {{/each}}
   </div>
 </section>

app/environments/new/controller.js

@@ -1,19 +1,27 @@
 import Ember from 'ember';
 import NewOrEdit from 'ui/mixins/new-or-edit';
+import C from 'ui/utils/constants';
 
 export default Ember.Controller.extend(NewOrEdit, {
-  queryParams: ['githubRepo','githubBranch','composeFiles'],
+  queryParams: ['githubRepo','githubBranch','composeFiles','system'],
   githubRepo: null,
   githubBranch: null,
   composeFiles: null,
+  system: false,
 
   error: null,
   editing: false,
 
-  actions: {
+  willSave: function() {
-    readFile(field, text) {
+    let out = this._super(...arguments);
-      this.get('primaryResource').set(field,text);
+    let externalId = '';
-    },
+    if ( this.get('system') )
+    {
+      externalId = C.EXTERNALID.KIND_SYSTEM + C.EXTERNALID.KIND_SEPARATOR + 'user';
+    }
+
+    this.set('primaryResource.externalId', externalId);
+    return out;
   },
 
   doneSaving: function() {

app/environments/new/route.js

@@ -79,6 +79,7 @@ export default Ember.Route.extend({
         githubRepo: null,
         githubBranch: null,
         composeFiles: null,
+        system: false,
       });
     }
   },

app/guide/template.hbs

@@ -342,12 +342,6 @@
         <span class="state badge text-info bg-info"><i class="icon icon-spinner icon-spin"></i> Activating</span>
         <span class="state badge text-warning bg-warning"><i class="icon icon-circle"></i> Initializing</span>
         <span class="state badge text-danger bg-danger"><i class="icon icon-alert"></i> Inactive</span>
-
-        <li class="link-admin">
-          <a id="admin-tab" href="/admin" class="ember-view">Admin</a>
-            
-            <div id="ember1359" role="tooltip" class="tooltip-warning ember-view inline-block"><a id="ember1360" href="/admin/access" data-placement="bottom" class="ember-view">!</a></div>        
-          </li>
       </div>
 
       <!--banners and alerts -->

app/models/environment.js

@@ -4,6 +4,20 @@ import { parseExternalId } from 'ui/utils/parse-externalid';
 import C from 'ui/utils/constants';
 import Util from 'ui/utils/util';
 
+export function activeIcon(env)
+{
+  let kind = env.get('externalIdInfo.kind');
+
+  if ( C.EXTERNALID.SYSTEM_KINDS.indexOf(kind) >= 0 )
+  {
+    return 'icon icon-network';
+  }
+  else
+  {
+    return 'icon icon-layers';
+  }
+}
+
 var Environment = Resource.extend({
   type: 'environment',
 
@@ -199,7 +213,7 @@ var Environment = Resource.extend({
 
 Environment.reopenClass({
   stateMap: {
-    'active':             {icon: 'icon icon-layers',          color: 'text-success'},
+    'active':             {icon: activeIcon,          color: 'text-success'},
     'canceled-rollback':  {icon: 'icon icon-life-ring',       color: 'text-info'},
     'canceled-upgrade':   {icon: 'icon icon-life-ring',       color: 'text-info'},
     'canceling-rollback': {icon: 'icon icon-life-ring',       color: 'text-info'},

app/styles/layout/_header.scss

@@ -1,48 +1,25 @@
 /**********
  * Header (top bar)
  **********/
-
-/*navbar*/
-.navbar-toggle {
-  padding: 11px;
-  margin: 0;
-  background: $logo-bg;
-  color: white;
-  position: relative;
-
-  &.navbar-toggle:before {
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    border-width: 8px;
-    border-right-color: $logo-bg;
-    position: absolute;
-    left: -15px;
-    top: 12px;
-  }
-}
-
-  .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
-    background-repeat: transparent!important;
- }
-
-@media (min-width: $screen-md) {
-  UL.nav LI.dropdown:hover UL.dropdown-menu {
-    display: block;
-    margin-top: 0;
-
-    li a {
-      text-transform: none;
-    }
-  }
-}
-
 @media (max-width: $screen-sm-max) {
   UL.nav LI.dropdown UL.dropdown-menu {
     display: block;
   }
 }
 
+
+@media (min-width: $screen-md) {
+  UL.nav LI.dropdown:hover UL.dropdown-menu,
+  UL.nav LI.dropdown:focus UL.dropdown-menu {
+    display: block;
+    margin-top: 0;
+
+    LI A {
+      text-transform: none;
+    }
+  }
+}
+
 HEADER {
   position : relative;
   z-index  : 5;
@@ -63,22 +40,45 @@ HEADER {
     color: $lightTeal;
   }
 
-  NAV {
+  NAV.navbar {
     background-color: $top-row;
     min-height: $navbar-height;
+    border: 0;
+    margin: 0;
     padding: 0;
     font-size : 14px;
 
+    .navbar-toggle {
+      padding: 11px;
+      margin: 0;
+      background: $logo-bg;
+      color: white;
+      position: relative;
+
+      &.navbar-toggle:before {
+        content: "";
+        border-color: transparent;
+        border-style: solid;
+        border-width: 8px;
+        border-right-color: $logo-bg;
+        position: absolute;
+        left: -15px;
+        top: 12px;
+      }
+    }
+
+    .navbar-collapse {
+      padding: 0;
+    }
 
     .nav > LI {
-      list-style: none;
+      list-style       : none;
       display          : inline-block;
 
-      & > A,
+      & > A {
-      & > .link-admin > A {
         min-height     : $navbar-height;
         line-height    : $navbar-height;
-        padding        : 0 20px;
+        padding        : 0 13px;
         font-weight    : normal;
         text-transform : uppercase;
         color          : $lightGray;
@@ -106,6 +106,10 @@ HEADER {
           }
         }
       }
+
+      &:first-of-type > A {
+        padding-left: 20px;
+      }
     }
 
     .user-menu {
@@ -116,10 +120,6 @@ HEADER {
       background: #fff;
       color: #334851;
       margin: 0;
-      border-radius: 0 0 2px 2px;
-    }
-
-    .user-menu {
       padding-top: 0;
       border-radius: 2px;
 
@@ -132,7 +132,6 @@ HEADER {
       }
     }
 
-
    .user-btn {
       vertical-align: top;
     }
@@ -268,6 +267,13 @@ HEADER {
         }
       }
     }
-
   }
 }
+
+@media (min-width: $screen-lg) {
+  HEADER NAV.navbar .nav > LI > A {
+    padding: 0 20px;
+  }
+}
+
+

app/styles/vendors/_bootstrap-tweak.scss

@@ -52,30 +52,6 @@ H1, H2, H3, H4, H5, H6, SECTION.header {
   }
 }
 
-/*navbar*/
-.navbar-toggle {
-  padding: 10px;
-  margin: 0;
-  background: $logo-bg;
-  color: white;
-  position: relative;
-
-  &.navbar-toggle:before {
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    border-width: 8px;
-    border-right-color: $logo-bg;
-    position: absolute;
-    left: -15px;
-    top: 12px;
-  }
-}
-
-.navbar-collapse {
-  padding: 0;
-}
-
 /**********
 * alerts and banners
 **********/
@@ -342,11 +318,6 @@ fieldset[disabled] .btn {
   border: 1px solid $lightGray;
 }
 
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  z-index: 9;
-}
-
 .nav LI {
   cursor: pointer;
   cursor: hand;

app/utils/constants.js

@@ -191,7 +191,6 @@ var C = {
     API_HOST:         'api$host',
     CATALOG_URL:      'catalog$url',
     VM_ENABLED:       'vm$enabled',
-    HELP_ENABLED:     'help$enabled',
     SWARM_PORT:       'swarm$tls$port',
     ENGINE_URL:       'engine$install$url',
   },

app/utils/digitalocean-choices.js

@@ -1,295 +1,17 @@
+// curl -H 'Authorization: Bearer <your token>' https://api.digitalocean.com/v2/regions
 export let Regions = {
-  "regions": [{
+  "regions":[
-    "name": "New York 1",
+    {"name":"New York 1","slug":"nyc1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "slug": "nyc1",
+    {"name":"San Francisco 1","slug":"sfo1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "sizes": [],
+    {"name":"New York 2","slug":"nyc2","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "features": ["virtio", "backups"],
+    {"name":"Amsterdam 2","slug":"ams2","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "available": false
+    {"name":"Singapore 1","slug":"sgp1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-  }, {
+    {"name":"London 1","slug":"lon1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "name": "New York 2",
+    {"name":"New York 3","slug":"nyc3","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "slug": "nyc2",
+    {"name":"Amsterdam 3","slug":"ams3","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
+    {"name":"Frankfurt 1","slug":"fra1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true},
-    "features": ["virtio", "private_networking", "backups"],
+    {"name":"Toronto 1","slug":"tor1","sizes":["32gb","16gb","2gb","1gb","4gb","8gb","512mb","64gb","48gb"],"features":["private_networking","backups","ipv6","metadata"],"available":true}
-    "available": true
+  ],
-  }, {
+  "links":{},
-    "name": "New York 3",
+  "meta":{"total":10}
-    "slug": "nyc3",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "Amsterdam 1",
-    "slug": "ams1",
-    "sizes": [],
-    "features": ["virtio", "backups"],
-    "available": false
-  }, {
-    "name": "Amsterdam 2",
-    "slug": "ams2",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "Amsterdam 3",
-    "slug": "ams3",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "San Francisco 1",
-    "slug": "sfo1",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "Singapore 1",
-    "slug": "sgp1",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "London 1",
-    "slug": "lon1",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }, {
-    "name": "Frankfurt 1",
-    "slug": "fra1",
-    "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
-    "features": ["virtio", "private_networking", "backups", "ipv6", "metadata"],
-    "available": true
-  }],
-  "links": {},
-  "meta": {
-    "total": 10
-  }
-};
-
-export let Images = {
-  "images": [{
-    "id": 11374310,
-    "name": "647.0.0 (alpha)",
-    "distribution": "CoreOS",
-    "slug": "coreos-alpha",
-    "public": true,
-    "regions": ["sfo1", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-04-09T17:29:01Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 11420434,
-    "name": "633.1.0 (stable)",
-    "distribution": "CoreOS",
-    "slug": "coreos-stable",
-    "public": true,
-    "regions": ["sfo1", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-04-14T19:29:27Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 11434448,
-    "name": "647.0.0 (beta)",
-    "distribution": "CoreOS",
-    "slug": "coreos-beta",
-    "public": true,
-    "regions": ["sfo1", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-04-15T17:24:29Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6370882,
-    "name": "20 x64",
-    "distribution": "Fedora",
-    "slug": "fedora-20-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T15:29:01Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6370885,
-    "name": "20 x32",
-    "distribution": "Fedora",
-    "slug": "fedora-20-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T15:29:18Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6372321,
-    "name": "5.10 x64",
-    "distribution": "CentOS",
-    "slug": "centos-5-8-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T16:40:18Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6372425,
-    "name": "5.10 x32",
-    "distribution": "CentOS",
-    "slug": "centos-5-8-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T16:45:29Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6372581,
-    "name": "6.0 x64",
-    "distribution": "Debian",
-    "slug": "debian-6-0-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T16:56:00Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 6372662,
-    "name": "6.0 x32",
-    "distribution": "Debian",
-    "slug": "debian-6-0-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2014-09-26T17:00:21Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 9640922,
-    "name": "21 x64",
-    "distribution": "Fedora",
-    "slug": "fedora-21-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-02T19:06:09Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 9801948,
-    "name": "14.04 x32",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-14-04-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-08T18:40:58Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 9801950,
-    "name": "14.04 x64",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-14-04-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-08T18:41:13Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 9801951,
-    "name": "14.10 x32",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-14-10-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-08T18:41:22Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 9801954,
-    "name": "14.10 x64",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-14-10-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-08T18:41:29Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10144573,
-    "name": "10.1",
-    "distribution": "FreeBSD",
-    "slug": "freebsd-10-1-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-20T20:04:34Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10321756,
-    "name": "12.04.5 x64",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-12-04-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T15:50:38Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10321777,
-    "name": "12.04.5 x32",
-    "distribution": "Ubuntu",
-    "slug": "ubuntu-12-04-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T15:54:17Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10322059,
-    "name": "7.0 x64",
-    "distribution": "Debian",
-    "slug": "debian-7-0-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T16:09:29Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10322378,
-    "name": "7.0 x32",
-    "distribution": "Debian",
-    "slug": "debian-7-0-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T16:23:04Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10322623,
-    "name": "7 x64",
-    "distribution": "CentOS",
-    "slug": "centos-7-0-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T16:36:06Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10325922,
-    "name": "6.5 x64",
-    "distribution": "CentOS",
-    "slug": "centos-6-5-x64",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T20:20:28Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }, {
-    "id": 10325992,
-    "name": "6.5 x32",
-    "distribution": "CentOS",
-    "slug": "centos-6-5-x32",
-    "public": true,
-    "regions": ["nyc1", "ams1", "sfo1", "nyc2", "ams2", "sgp1", "lon1", "nyc3", "ams3", "fra1"],
-    "created_at": "2015-01-28T20:26:38Z",
-    "min_disk_size": 20,
-    "type": "snapshot"
-  }],
-  "links": {},
-  "meta": {
-    "total": 22
-  }
 };

app/utils/navigation-tree.js

@@ -34,7 +34,7 @@ const navTree = [
   // Kubernetes
   {
     id: 'k8s',
-    label: 'Kubernetes',
+    localizedLabel: 'nav.k8s.tab',
     route: 'k8s-tab',
     ctx: [getProjectId],
     condition: function() { return this.get('hasKubernetes'); },
@@ -42,7 +42,7 @@ const navTree = [
     submenu: [
       {
         id: 'k8s-services',
-        label: 'Services',
+        localizedLabel: 'nav.k8s.services',
         icon: 'icon icon-compass',
         route: 'k8s-tab.namespace.services',
         ctx: [getProjectId, getNamespaceId],
@@ -50,7 +50,7 @@ const navTree = [
       },
       {
         id: 'k8s-rcs',
-        label: 'Replication Controllers',
+        localizedLabel: 'nav.k8s.rcs',
         icon: 'icon icon-tachometer',
         route: 'k8s-tab.namespace.rcs',
         ctx: [getProjectId, getNamespaceId],
@@ -58,7 +58,7 @@ const navTree = [
       },
       {
         id: 'k8s-pods',
-        label: 'Pods',
+        localizedLabel: 'nav.k8s.pods',
         icon: 'icon icon-containers',
         route: 'k8s-tab.namespace.pods',
         ctx: [getProjectId, getNamespaceId],
@@ -66,27 +66,35 @@ const navTree = [
       },
       {
         id: 'k8s-cli',
-        label: 'Kubectl',
+        localizedLabel: 'nav.k8s.cli',
         icon: 'icon icon-terminal',
         route: 'k8s-tab.kubectl',
         ctx: [getProjectId],
         condition: k8sReady,
       },
+      {
+        id: 'k8s-system',
+        localizedLabel: 'nav.k8s.system',
+        icon: 'icon icon-network',
+        route: 'environments',
+        ctx: [getProjectId],
+        queryParams: {which: 'not-kubernetes'},
+      },
     ],
   },
 
   // Swarm
   {
     id: 'swarm',
-    label: 'Swarm',
+    localizedLabel: 'nav.swarm.tab',
     condition: function() { return this.get('hasProject') && this.get('hasSwarm'); },
     route: 'swarm-tab',
     ctx: [getProjectId],
-    moreCurrentWhen: ['authenticated.project.waiting'],
+    moreCurrentWhen: ['authenticated.project.waiting','environments'],
     submenu: [
       {
         id: 'swarm-projects',
-        label: 'Projects',
+        localizedLabel: 'nav.swarm.projects',
         icon: 'icon icon-layeredgroup',
         route: 'swarm-tab.projects',
         ctx: [getProjectId],
@@ -94,7 +102,7 @@ const navTree = [
       },
       {
         id: 'swarm-services',
-        label: 'Services',
+        localizedLabel: 'nav.swarm.services',
         icon: 'icon icon-layers',
         route: 'swarm-tab.services',
         ctx: [getProjectId],
@@ -102,145 +110,144 @@ const navTree = [
       },
       {
         id: 'swarm-cli',
-        label: 'CLI',
+        localizedLabel: 'nav.swarm.cli',
         icon: 'icon icon-terminal',
         route: 'swarm-tab.console',
         ctx: [getProjectId],
         condition: swarmReady,
       },
+      {
+        id: 'swarm-system',
+        localizedLabel: 'nav.swarm.system',
+        icon: 'icon icon-network',
+        route: 'environments',
+        ctx: [getProjectId],
+        queryParams: {which: 'not-swarm'},
+      },
     ]
   },
 
   // Mesos
   {
     id: 'mesos',
-    label: 'Mesos',
+    localizedLabel: 'nav.mesos.tab',
     condition: function() { return this.get('hasProject') && this.get('hasMesos'); },
     route: 'mesos-tab',
     ctx: [getProjectId],
     moreCurrentWhen: ['authenticated.project.waiting'],
-  },
+    submenu: [
-
-  // Cattle Stacks
-  {
-    id: 'cattle-stacks',
-    label: 'Stacks',
-    route: 'environments',
-    ctx: [getProjectId],
-    moreCurrentWhen: ['authenticated.project.waiting'],
-    condition: function() { return this.get('hasProject') && !this.get('hasKubernetes') && !this.get('hasSwarm'); },
-  },
-
-  // Cattle System
-  {
-    id: 'cattle-system',
-    label: 'System',
-    route: 'environments',
-    ctx: [getProjectId],
-    queryParams: {which: 'system'},
-    condition: function() {
-      return this.get('hasProject') &&
-      this.get('hasCattleSystem') &&
-      !this.get('hasKubernetes') &&
-      !this.get('hasSwarm');
-    },
-  },
-
-  // K8s System
-  {
-    id: 'k8s-system',
-    label: 'System',
-    route: 'environments',
-    ctx: [getProjectId],
-    queryParams: {which: 'not-kubernetes'},
-    condition: function() {
-      return this.get('hasProject') &&
-      this.get('hasKubernetes');
-    },
-  },
-
-  // Swarm System
-  {
-    id: 'swarm-system',
-    label: 'System',
-    route: 'environments',
-    ctx: [getProjectId],
-    queryParams: {which: 'not-swarm'},
-    condition: function() { return this.get('hasProject') && this.get('hasSwarm'); },
-  },
-
-  // Mesos System
       {
         id: 'mesos-system',
-    label: 'System',
+        localizedLabel: 'nav.mesos.system',
+        icon: 'icon icon-network',
         route: 'environments',
         ctx: [getProjectId],
         queryParams: {which: 'not-mesos'},
-    condition: function() { return this.get('hasProject') && this.get('hasMesos'); },
+      },
+    ],
+  },
+
+  // Cattle
+  {
+    id: 'cattle',
+    localizedLabel: 'nav.cattle.tab',
+    route: 'environments',
+    queryParams: {which: 'all'},
+    ctx: [getProjectId],
+    moreCurrentWhen: ['authenticated.project.waiting'],
+    condition: function() { return this.get('hasProject') && !this.get('hasKubernetes') && !this.get('hasSwarm'); },
+    submenu: [
+      {
+        id: 'cattle-all',
+        localizedLabel: 'nav.cattle.all',
+        icon: 'icon icon-globe',
+        route: 'environments',
+        ctx: [getProjectId],
+        queryParams: {which: 'all'},
+      },
+      {divider: true},
+      {
+        id: 'cattle-user',
+        localizedLabel: 'nav.cattle.user',
+        icon: 'icon icon-layers',
+        route: 'environments',
+        ctx: [getProjectId],
+        queryParams: {which: 'user'},
+      },
+      {
+        id: 'cattle-system',
+        localizedLabel: 'nav.cattle.system',
+        icon: 'icon icon-network',
+        route: 'environments',
+        ctx: [getProjectId],
+        queryParams: {which: 'system'},
+      },
+    ],
   },
 
   // Catalog
   {
     id: 'catalog',
-    label: 'Catalog',
+    localizedLabel: 'nav.catalog.tab',
     route: 'catalog-tab',
     ctx: [getProjectId],
     condition: function() {
       return this.get('hasProject') &&
       this.get(`settings.${C.SETTING.CATALOG_URL}`) &&
       (!this.get('hasSwarm') || this.get('swarmReady')) &&
-      (!this.get('hasKubernetes') || this.get('kubernetesReady'));
+      (!this.get('hasKubernetes') || this.get('kubernetesReady')) &&
+      (!this.get('hasMesos') || this.get('mesosReady'));
     },
     submenu: getCatalogSubtree,
   },
 
   // Infrastructure
   {
-    id: 'infrastructure',
+    id: 'infra',
-    label: 'Infrastructure',
+    localizedLabel: 'nav.infra.tab',
     route: 'infrastructure-tab',
     ctx: [getProjectId],
     condition: function() { return this.get('hasProject'); },
     submenu: [
       {
-        id: 'infrastructure-hosts',
+        id: 'infra-hosts',
-        label: 'Hosts',
+        localizedLabel: 'nav.infra.hosts',
         icon: 'icon icon-host',
         route: 'hosts',
         ctx: [getProjectId],
       },
       {
-        id: 'infrastructure-containers',
+        id: 'infra-containers',
-        label: 'Containers',
+        localizedLabel: 'nav.infra.containers',
         icon: 'icon icon-box',
         route: 'containers',
         ctx: [getProjectId],
       },
       {
-        id: 'infrastructure-vms',
+        id: 'infra-vms',
-        label: 'Virtual Machines',
+        localizedLabel: 'nav.infra.vms',
         icon: 'icon icon-vm',
         route: 'virtualmachines',
         ctx: [getProjectId],
         condition: function() { return this.get('settings.hasVm'); },
       },
       {
-        id: 'infrastructure-storagepools',
+        id: 'infra-storagepools',
-        label: 'Storage Pools',
+        localizedLabel: 'nav.infra.storagePools',
         icon: 'icon icon-hdd',
         route: 'storagepools',
         ctx: [getProjectId],
       },
       {
-        id: 'infrastructure-certificates',
+        id: 'infra-certificates',
-        label: 'Certificates',
+        localizedLabel: 'nav.infra.certificates',
         icon: 'icon icon-certificate',
         route: 'certificates',
         ctx: [getProjectId],
       },
       {
-        id: 'infrastructure-registries',
+        id: 'infra-registries',
-        label: 'Registries',
+        localizedLabel: 'nav.infra.registries',
         icon: 'icon icon-database',
         route: 'registries',
         ctx: [getProjectId],
@@ -251,44 +258,43 @@ const navTree = [
   // Admin
   {
     id: 'admin',
-    label: 'Admin',
+    localizedLabel: 'nav.admin.tab',
     route: 'admin-tab',
     condition: function() { return this.get('isAdmin'); },
     submenu: [
       {
         id: 'admin-audit',
-        label: 'Audit Log',
+        localizedLabel: 'nav.admin.audit',
         icon: 'icon icon-folder-open',
         route: 'admin-tab.audit-logs',
       },
       {
         id: 'admin-processes',
-        label: 'Processes',
+        localizedLabel: 'nav.admin.processes',
         icon: 'icon icon-processes',
         route: 'admin-tab.processes',
       },
       {
         id: 'admin-accounts',
-        label: 'Accounts',
+        localizedLabel: 'nav.admin.accounts',
         icon: 'icon icon-users',
         route: 'admin-tab.accounts',
       },
-      { divider: true },
       {
         id: 'admin-access',
-        label: 'Access Control',
+        localizedLabel: 'nav.admin.access',
         icon: 'icon icon-key',
         route: 'admin-tab.auth',
       },
       {
         id: 'admin-settings',
-        label: 'Settings',
+        localizedLabel: 'nav.admin.settings',
         icon: 'icon icon-network',
         route: 'admin-tab.settings',
       },
       {
         id: 'admin-ha',
-        label: 'High-Availability',
+        localizedLabel: 'nav.admin.ha',
         icon: 'icon icon-umbrella',
         route: 'admin-tab.ha',
       },
@@ -298,7 +304,7 @@ const navTree = [
   // API
   {
     id: 'api',
-    label: 'API',
+    localizedLabel: 'nav.api.tab',
     icon: 'icon icon-terminal',
     route: 'authenticated.project.apikeys',
     ctx: [getProjectId],
@@ -348,7 +354,7 @@ function getCatalogSubtree() {
   if ( showAll ) {
     out.push({
       id: 'catalog-all',
-      label: 'All',
+      localizedLabel: 'nav.catalog.all',
       icon: 'icon icon-globe',
       route: 'catalog-tab',
       ctx: [getProjectId],
@@ -363,7 +369,7 @@ function getCatalogSubtree() {
 
     out.push({
       id: 'catalog-library',
-      label: 'Library',
+      localizedLabel: 'nav.catalog.library',
       icon: 'icon icon-catalog',
       route: 'catalog-tab',
       ctx: [getProjectId],

translations/en-us.yaml

@@ -304,6 +304,7 @@ highAvailabilityPage:
 
 pageFooter:
   notARelease: (Not a Release)
+  help: Help
   documentation: Documentation
   faq: FAQs
   issues: File an Issue
@@ -432,3 +433,69 @@ loginUserPass:
 
 # Utils
 
+# Navigation
+nav:
+  srToggleNav: Toggle Navigation
+  srToggleDropdown: Toggle Dropdown
+  environment:
+    label: Environment
+    all: All Environments
+    your: Your Environments
+    selected: Selected Environment
+    manage: Manage Environments
+  namespace:
+    label: Namespace
+    manage: Manage Namespaces
+  k8s:
+    tab: Kubernetes
+    services: Services
+    rcs: Replication Controllers
+    pods: Pods
+    cli: Kubectl
+    system: System
+  swarm:
+    tab: Swarm
+    projects: Projects
+    services: Services
+    cli: CLI
+    system: System
+  mesos:
+    tab: Mesos
+    system: System
+  cattle:
+    tab: Applications
+    all: All
+    user: Stacks
+    system: System
+  catalog:
+    tab: Catalog
+    all: All
+    library: Library
+  infra:
+    tab: Infrastructure
+    hosts: Hosts
+    containers: Containers
+    vms: Virtual Machines
+    storagePools: Storage Pools
+    certificates: Certificates
+    registries: Registries
+  admin:
+    tab: Admin
+    audit: Audit Log
+    processes: Processes
+    accounts: Accounts
+    access: Access Control
+    settings: Settings
+    ha: High-Availability
+  api:
+    tab: API
+  user:
+    logout: Log Out
+    yourAccount: Your Account
+    changePassword: Change Password
+    theme: Theme
+    themeLight: Light
+    themeAuto: Auto
+    themeDark: Dark
+
+