From 96f2cc2c136d590770134b948e36926be13f9aab Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@rancher.com>
Date: Fri, 18 Aug 2017 19:09:13 -0700
Subject: [PATCH] Header tweaks

---
 app/components/cluster-box/template.hbs       | 56 +++++++++----------
 .../page-header-environment/component.js      | 11 +++-
 .../page-header-environment/template.hbs      | 42 ++++++++------
 app/components/page-header/template.hbs       |  2 +-
 app/services/projects.js                      |  4 +-
 app/styles/components/_page-header.scss       |  4 +-
 6 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/app/components/cluster-box/template.hbs b/app/components/cluster-box/template.hbs
index b37bf48f5..5d504ce67 100644
--- a/app/components/cluster-box/template.hbs
+++ b/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,30 +60,28 @@
 </div>
 {{/if}}
 
-<div class="p-20">
-  {{#sortable-table
-    tableClassNames="bordered"
-    bulkActions=true
-    rightActions=true
-    paging=true
-    pagingLabel="pagination.project"
-    search=true
-    sortBy=sortBy
-    descending=descending
-    headers=headers
-    body=model.projects
-    fullRows=true
-    stickyHeader=false
-    as |sortable kind p dt|
-  }}
-    {{#if (eq kind "row")}}
-      {{project-row model=p dt=dt}}
-    {{else if (eq kind "nomatch")}}
-      <tr><td colspan="{{sortable.fullColspan}}" class="text-center text-muted lacsso pt-20 pb-20">{{t 'clusterBox.noMatch'}}</td></tr>
-    {{else if (eq kind "norows")}}
-      <tr><td colspan="{{sortable.fullColspan}}" class="text-center text-muted lacsso pt-20 pb-20">{{t 'clusterBox.noData'}}</td></tr>
-    {{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
+  tableClassNames="bordered"
+  bulkActions=true
+  rightActions=true
+  paging=true
+  pagingLabel="pagination.project"
+  search=true
+  sortBy=sortBy
+  descending=descending
+  headers=headers
+  body=model.projects
+  fullRows=true
+  stickyHeader=false
+  as |sortable kind p dt|
+}}
+  {{#if (eq kind "row")}}
+    {{project-row model=p dt=dt}}
+  {{else if (eq kind "nomatch")}}
+    <tr><td colspan="{{sortable.fullColspan}}" class="text-center text-muted lacsso pt-20 pb-20">{{t 'clusterBox.noMatch'}}</td></tr>
+  {{else if (eq kind "norows")}}
+    <tr><td colspan="{{sortable.fullColspan}}" class="text-center text-muted lacsso pt-20 pb-20">{{t 'clusterBox.noData'}}</td></tr>
+  {{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}}
diff --git a/app/components/page-header-environment/component.js b/app/components/page-header-environment/component.js
index 531c60d31..fcd3714e2 100644
--- a/app/components/page-header-environment/component.js
+++ b/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);
       }
 
-      entry.projects.push(project);
+      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() {
diff --git a/app/components/page-header-environment/template.hbs b/app/components/page-header-environment/template.hbs
index c54ce4e15..d48566908 100644
--- a/app/components/page-header-environment/template.hbs
+++ b/app/components/page-header-environment/template.hbs
@@ -1,28 +1,25 @@
 {{~#if project~}}
   <li class="dropdown pull-right">
     {{#if (gt byCluster.length 1)}}
-
-
-          <ul class="list-unstyled pr-40" style="padding: 4px;">
-          <li>
+      <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'}}">
             <i class="icon icon-cluster icon-fw"></i>
             {{project.cluster.displayName}}
             <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
           </a>
-          </li>
+        </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'}}">
-          <i class="{{project.icon}} project-icon icon-fw"></i>
+          <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>
-        </ul>
-
+        <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)}}
+        {{#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}}
-        <li role="presentation" class="dropdown-header">
-          {{#if accessEnabled}}
-            {{t 'nav.environment.your'}}
-          {{else}}
-            {{t 'nav.environment.all'}}
-          {{/if}}
-        </li>
         {{#each projectChoices as |p|}}
           <li class="{{if p.active 'active selected'}}">
             <a href="#" {{action "switchProject" p.id}} class="clip">
diff --git a/app/components/page-header/template.hbs b/app/components/page-header/template.hbs
index 6b629c481..734f04ca9 100644
--- a/app/components/page-header/template.hbs
+++ b/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}}
diff --git a/app/services/projects.js b/app/services/projects.js
index a5c33c789..2462e9556 100644
--- a/app/services/projects.js
+++ b/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() {
diff --git a/app/styles/components/_page-header.scss b/app/styles/components/_page-header.scss
index 55c4bdf41..2762e6817 100644
--- a/app/styles/components/_page-header.scss
+++ b/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%;