Header tweaks

app/components/cluster-box/template.hbs

@@ -1,5 +1,5 @@
 <section class="clearfix pt-20">
-  <h4 class="pull-left">{{t 'generic.cluster'}}: {{model.displayName}}</h4>
+  <h4 class="pull-left m-0 pr-10 pt-5">{{t 'generic.cluster'}}: {{model.displayName}}</h4>
   {{#unless (eq model.state 'active')}}
     {{badge-state model=model}}
   {{/unless}}
@@ -19,7 +19,7 @@
 </section>
 <hr/>
 
-{{#if (not-eq model.state 'inactive')}}
+{{#if (eq model.state 'active')}}
 <div class="row">
   <div class="col span-3">
     <div class="banner bg-info">
@@ -60,8 +60,7 @@
 </div>
 {{/if}}
 
-<div class="p-20">
-  {{#sortable-table
+{{#sortable-table
   tableClassNames="bordered"
   bulkActions=true
   rightActions=true
@@ -75,7 +74,7 @@
   fullRows=true
   stickyHeader=false
   as |sortable kind p dt|
-  }}
+}}
   {{#if (eq kind "row")}}
     {{project-row model=p dt=dt}}
   {{else if (eq kind "nomatch")}}
@@ -85,5 +84,4 @@
   {{else if (eq kind "right-actions")}}
     {{#link-to "authenticated.clusters.new-project" (query-params clusterId=model.id) class="btn btn-sm bg-primary"}}{{t 'clustersPage.newProject'}}{{/link-to}}
   {{/if}}
-  {{/sortable-table}}
-</div>
+{{/sortable-table}}

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

@@ -24,14 +24,19 @@ export default Ember.Component.extend({
       let clusterId = cluster.get('id');
       let entry = out.findBy('clusterId', clusterId);
       if ( !entry ) {
-        entry = {clusterId: clusterId, cluster: cluster, projects: []};
+        entry = {clusterId: clusterId, cluster: cluster, projects: [], show: false};
         out.push(entry);
       }
 
+      if ( project.get('clusterOwner') ) {
+        entry.system = project;
+      } else {
         entry.projects.push(project);
+        entry.show = true;
+      }
     });
 
-    return out;
+    return out.filterBy('show',true);;
   }.property('projectChoices.@each.clusterId'),
 
   projectIsMissing: function() {

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

@@ -1,8 +1,6 @@
 {{~#if project~}}
   <li class="dropdown pull-right">
     {{#if (gt byCluster.length 1)}}
-
-
       <ul class="list-unstyled pr-40" style="padding: 4px;">
         <li>
           <a href="#" role="button" class="text-white dropdown-toggle clip" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.cluster.label'}}">
@@ -13,16 +11,15 @@
         </li>
 
         <li class="pl-15 text-small text-muted">
-          <a href="#" role="button" class="color-white dropdown-toggle clip" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.environment.label'}}">
+          <a href="#" role="button" class="text-white dropdown-toggle clip" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.environment.label'}}">
             <i class="{{project.icon}} project-icon icon-fw"></i>
             {{project.displayName}}
             <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
           </a>
         </li>
 
-        <i class="icon icon-chevron-down project-chevron ml-10" style="position: absolute; right: 20px; top: 20px;"></i>
+        <i class="icon icon-chevron-down project-chevron ml-10 text-white" style="position: absolute; right: 20px; top: 20px;"></i>
       </ul>
-
     {{else}}
       <span class="environment-dropdown">
         <i class="{{project.icon}} project-icon icon-fw"></i>
@@ -36,14 +33,25 @@
 
     <ul class="dropdown-menu project-menu" role="menu" data-dropdown-id="enviroment">
       {{#if (gt byCluster.length 1)}}
-      {{else if projectChoices.length}}
-        <li role="presentation" class="dropdown-header">
-          {{#if accessEnabled}}
-            {{t 'nav.environment.your'}}
-          {{else}}
-            {{t 'nav.environment.all'}}
-          {{/if}}
+        {{#each byCluster as |entry|}}
+          <li class="{{if entry.system.active 'active selected'}}">
+            <a href="#" {{action "switchProject" entry.system.id}} class="clip">
+              <i class="icon icon-cluster"></i>
+              &nbsp;
+              {{entry.cluster.displayName}}
+            </a>
           </li>
+          {{#each entry.projects as |p|}}
+            <li class="{{if p.active 'active selected'}}">
+              <a href="#" {{action "switchProject" p.id}} class="clip pl-40">
+                <i class="icon {{p.icon}}"></i>
+                &nbsp;
+                {{p.displayName}}
+              </a>
+            </li>
+          {{/each}}
+        {{/each}}
+      {{else if projectChoices.length}}
         {{#each projectChoices as |p|}}
           <li class="{{if p.active 'active selected'}}">
             <a href="#" {{action "switchProject" p.id}} class="clip">

app/components/page-header/template.hbs

@@ -94,7 +94,7 @@
 
   <ul class="nav-user dropdown">
     <li>
-      <a class="btn dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" aria-label={{t 'nav.user.label' username=session.user}}>
+      <a class="btn dropdown-toggle" style="height: 51px; padding-top: 8px;" role="button" aria-haspopup="true" aria-expanded="false" aria-label={{t 'nav.user.label' username=session.user}}>
         {{#if accessEnabled}}
           {{identity-avatar link=false identity=access.identity}}
         {{else}}

app/services/projects.js

@@ -33,7 +33,9 @@ export default Ember.Service.extend({
       opt.filter = {all: 'true'};
     }
 
-    return this.get('userStore').find('project', null, opt);
+    return this.get('userStore').find('project', null, opt).then(() => {
+      return this.get('userStore').all('project');
+    });
   },
 
   refreshAll: function() {

app/styles/components/_page-header.scss

@@ -136,8 +136,8 @@ $user-btn                            : darken($header, 10%) !default;
 
   .bg-error.badge-xs {
     position: absolute;
-    right: 2px;
-    top: 10px;
+    right: 4px;
+    top: 15px;
     text-align: center;
     width: 19px;
     border-radius: 90%;