Update icons for all CF side navs

cloudfoundry · nwmac · Dec 13, 2018 · Dec 13, 2018 · Dec 13, 2018 · Dec 14, 2018
commit e861a04968ecd5e8f52fd8db7f2b78d81c2cc061
diff --git a/...tures/applications/application/application-tabs-base/application-tabs-base.component.html b/...tures/applications/application/application-tabs-base/application-tabs-base.component.html
@@ -1,4 +1,4 @@
-<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks">
+<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks" tabsHeader="Applications">
   <h1>{{ (applicationService.application$ | async)?.app?.entity?.name }} </h1>
   <div class="page-header-right">
     <a class="app-page-header__anchor" mat-icon-button *ngIf="(applicationService.applicationUrl$ | async) != null && (applicationService.application$ | async)?.app.entity.state === 'STARTED'"

diff --git a/...eatures/applications/application/application-tabs-base/application-tabs-base.component.ts b/...eatures/applications/application/application-tabs-base/application-tabs-base.component.ts
@@ -10,7 +10,6 @@ import { EntityService } from '../../../../core/entity-service';
 import { ConfirmationDialogConfig } from '../../../../shared/components/confirmation-dialog.config';
 import { ConfirmationDialogService } from '../../../../shared/components/confirmation-dialog.service';
 import { IHeaderBreadcrumb } from '../../../../shared/components/page-header/page-header.types';
-import { ISubHeaderTabs } from '../../../../shared/components/page-subheader/page-subheader.types';
 import { ENTITY_SERVICE } from '../../../../shared/entity.tokens';
 import { AppMetadataTypes, GetAppStatsAction, GetAppSummaryAction } from '../../../../store/actions/app-metadata.actions';
 import { ResetPagination } from '../../../../store/actions/pagination.actions';
@@ -32,6 +31,7 @@ import {
   getActionsFromExtensions,
   StratosActionType
 } from '../../../../core/extension/extension-service';
+import { IPageSideNavTab } from '../../../dashboard/page-side-nav/page-side-nav.component';
 
 // Confirmation dialogs
 const appStopConfirmation = new ConfirmationDialogConfig(
@@ -129,15 +129,15 @@ export class ApplicationTabsBaseComponent implements OnInit, OnDestroy {
   autoRefreshing$ = this.entityService.updatingSection$.pipe(map(
     update => update[this.autoRefreshString] || { busy: false }
   ));
-
-  tabLinks: ISubHeaderTabs[] = [
-    { link: 'summary', label: 'Summary' },
-    { link: 'instances', label: 'Instances' },
-    { link: 'routes', label: 'Routes' },
-    { link: 'log-stream', label: 'Log Stream' },
-    { link: 'services', label: 'Services' },
-    { link: 'variables', label: 'Variables' },
-    { link: 'events', label: 'Events' }
+  header = 'Applications';
+  tabLinks: IPageSideNavTab[] = [
+    { link: 'summary', label: 'Summary', matIcon: 'description' },
+    { link: 'instances', label: 'Instances', matIcon: 'library_books' },
+    { link: 'routes', label: 'Routes', matIconFont: 'stratos-icons', matIcon: 'network_route' },
+    { link: 'log-stream', label: 'Log Stream', matIcon: 'featured_play_list' },
+    { link: 'services', label: 'Services', matIconFont: 'stratos-icons', matIcon: 'service' },
+    { link: 'variables', label: 'Variables', matIcon: 'lock' },
+    { link: 'events', label: 'Events', matIcon: 'watch_later' }
   ];
 
   private getBreadcrumbs(

diff --git a/...dry-cells/cloud-foundry-cell/cloud-foundry-cell-base/cloud-foundry-cell-base.component.ts b/...dry-cells/cloud-foundry-cell/cloud-foundry-cell-base/cloud-foundry-cell-base.component.ts
@@ -1,14 +1,13 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
-
 import { IHeaderBreadcrumb } from '../../../../../../shared/components/page-header/page-header.types';
-import { ISubHeaderTabs } from '../../../../../../shared/components/page-subheader/page-subheader.types';
 import { entityFactory, metricSchemaKey } from '../../../../../../store/helpers/entity-factory';
+import { IPageSideNavTab } from '../../../../../dashboard/page-side-nav/page-side-nav.component';
 import { getActiveRouteCfCellProvider } from '../../../../cf.helpers';
 import { CloudFoundryEndpointService } from '../../../../services/cloud-foundry-endpoint.service';
 import { CloudFoundryCellService } from '../cloud-foundry-cell.service';
-import { CfUserService } from '../../../../../../shared/data-services/cf-user.service';
+
 
 @Component({
   selector: 'app-cloud-foundry-cell-base',
@@ -23,10 +22,11 @@ export class CloudFoundryCellBaseComponent {
 
   static AppsLinks = 'apps';
 
-  tabLinks: ISubHeaderTabs[] = [
+  tabLinks: IPageSideNavTab[] = [
     {
       link: 'summary',
-      label: 'Summary'
+      label: 'Summary',
+      matIcon: 'description'
     },
     {
       link: 'charts',

diff --git a/...anizations/cloud-foundry-organization-base/cloud-foundry-organization-base.component.html b/...anizations/cloud-foundry-organization-base/cloud-foundry-organization-base.component.html
@@ -1,16 +1,11 @@
-<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks">
+<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks" tabsHeader="Organization">
   <h1> {{ name$ | async }}</h1>
   <div class="page-header-right">
     <button mat-icon-button name="edit-org" *appUserPermission="permsOrgEdit;endpointGuid:cfEndpointService.cfGuid"
       routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/organizations/{{cfOrgService.orgGuid}}/edit-org"
       matTooltip="Edit Organization">
       <mat-icon>mode_edit</mat-icon>
     </button>
-    <button mat-icon-button name="add-space" *appUserPermission="permsSpaceCreate;endpointGuid:cfEndpointService.cfGuid;organizationGuid:cfOrgService.orgGuid"
-      routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/organizations/{{cfOrgService.orgGuid}}/add-space"
-      matTooltip="Create Space">
-      <mat-icon>add</mat-icon>
-    </button>
     <button mat-icon-button name="user-management" *ngIf="canUpdateRoles$ | async" routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/organizations/{{cfOrgService.orgGuid}}/users/manage"
       matTooltip="Manage Users">
       <mat-icon>people</mat-icon>

diff --git a/...rganizations/cloud-foundry-organization-base/cloud-foundry-organization-base.component.ts b/...rganizations/cloud-foundry-organization-base/cloud-foundry-organization-base.component.ts
@@ -1,25 +1,25 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { filter, first, map } from 'rxjs/operators';
-
 import { environment } from '../../../../../../environments/environment';
 import { CurrentUserPermissionsChecker } from '../../../../../core/current-user-permissions.checker';
 import { CurrentUserPermissions } from '../../../../../core/current-user-permissions.config';
 import { CurrentUserPermissionsService } from '../../../../../core/current-user-permissions.service';
+import {
+  getActionsFromExtensions,
+  getTabsFromExtensions,
+  StratosActionMetadata,
+  StratosActionType,
+  StratosTabType
+} from '../../../../../core/extension/extension-service';
 import { IHeaderBreadcrumb } from '../../../../../shared/components/page-header/page-header.types';
-import { ISubHeaderTabs } from '../../../../../shared/components/page-subheader/page-subheader.types';
 import { CfUserService } from '../../../../../shared/data-services/cf-user.service';
 import { entityFactory, EntitySchema, organizationSchemaKey } from '../../../../../store/helpers/entity-factory';
+import { IPageSideNavTab } from '../../../../dashboard/page-side-nav/page-side-nav.component';
 import { canUpdateOrgSpaceRoles, getActiveRouteCfOrgSpaceProvider } from '../../../cf.helpers';
 import { CloudFoundryEndpointService } from '../../../services/cloud-foundry-endpoint.service';
 import { CloudFoundryOrganizationService } from '../../../services/cloud-foundry-organization.service';
-import {
-  getTabsFromExtensions,
-  StratosTabType,
-  StratosActionMetadata,
-  getActionsFromExtensions,
-  StratosActionType
-} from '../../../../../core/extension/extension-service';
+
 
 @Component({
   selector: 'app-cloud-foundry-organization-base',
@@ -34,18 +34,21 @@ import {
 })
 export class CloudFoundryOrganizationBaseComponent {
 
-  tabLinks: ISubHeaderTabs[] = [
+  tabLinks: IPageSideNavTab[] = [
     {
       link: 'summary',
-      label: 'Summary'
+      label: 'Summary',
+      matIcon: 'description'
     },
     {
       link: 'spaces',
-      label: 'Spaces'
+      label: 'Spaces',
+      matIcon: 'language'
     },
     {
       link: 'users',
       label: 'Users',
+      matIcon: 'people'
     }
   ];
 

diff --git a/...ations/cloud-foundry-organization-spaces/cloud-foundry-organization-spaces.component.html b/...ations/cloud-foundry-organization-spaces/cloud-foundry-organization-spaces.component.html
@@ -1,3 +1,11 @@
+<app-page-sub-nav>
+  <button mat-button name="add-space" *appUserPermission="permsSpaceCreate;endpointGuid:cfEndpointService.cfGuid;organizationGuid:cfOrgService.orgGuid"
+    routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/organizations/{{cfOrgService.orgGuid}}/add-space"
+    matTooltip="Create Space">
+    <mat-icon>add</mat-icon> Create
+  </button>
+</app-page-sub-nav>
+
 <div class="spaces-list">
   <app-list></app-list>
-</div>
+</div>
diff --git a/...izations/cloud-foundry-organization-spaces/cloud-foundry-organization-spaces.component.ts b/...izations/cloud-foundry-organization-spaces/cloud-foundry-organization-spaces.component.ts
@@ -4,6 +4,10 @@ import {
   CfSpacesListConfigService,
 } from '../../../../../shared/components/list/list-types/cf-spaces/cf-spaces-list-config.service';
 import { ListConfig } from '../../../../../shared/components/list/list.component.types';
+import { CurrentUserPermissions } from '../../../../../core/current-user-permissions.config';
+import { CloudFoundryEndpointService } from '../../../services/cloud-foundry-endpoint.service';
+import { CloudFoundryOrganizationService } from '../../../services/cloud-foundry-organization.service';
+import { CurrentUserPermissionsService } from '../../../../../core/current-user-permissions.service';
 
 @Component({
   selector: 'app-cloud-foundry-organization-spaces',
@@ -16,4 +20,12 @@ import { ListConfig } from '../../../../../shared/components/list/list.component
     }
   ]
 })
-export class CloudFoundryOrganizationSpacesComponent { }
+export class CloudFoundryOrganizationSpacesComponent {
+  public permsSpaceCreate = CurrentUserPermissions.SPACE_CREATE;
+  constructor(
+    public cfEndpointService: CloudFoundryEndpointService,
+    public cfOrgService: CloudFoundryOrganizationService
+  ) {
+
+  }
+}
diff --git a/...ndry-organization-spaces/cloud-foundry-space-base/cloud-foundry-space-base.component.html b/...ndry-organization-spaces/cloud-foundry-space-base/cloud-foundry-space-base.component.html
@@ -1,4 +1,4 @@
-<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks">
+<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks" tabsHeader="Space">
   <h1> {{ name$ | async }}</h1>
   <div class="page-header-right">
     <button mat-icon-button name="rename" *appUserPermission="permsSpaceEdit;endpointGuid:cfOrgService.cfGuid;organizationGuid:cfOrgService.orgGuid;spaceGuid:cfSpaceService.spaceGuid"

diff --git a/...oundry-organization-spaces/cloud-foundry-space-base/cloud-foundry-space-base.component.ts b/...oundry-organization-spaces/cloud-foundry-space-base/cloud-foundry-space-base.component.ts
@@ -24,6 +24,7 @@ import {
   getActionsFromExtensions,
   StratosActionType
 } from '../../../../../../core/extension/extension-service';
+import { IPageSideNavTab } from '../../../../../dashboard/page-side-nav/page-side-nav.component';
 
 @Component({
   selector: 'app-cloud-foundry-space-base',
@@ -38,26 +39,33 @@ import {
 })
 export class CloudFoundrySpaceBaseComponent implements OnDestroy {
 
-  tabLinks = [
+  tabLinks: IPageSideNavTab[] = [
     {
       link: 'summary',
       label: 'Summary',
+      matIcon: 'description'
     },
     {
       link: 'apps',
       label: 'Applications',
+      matIcon: 'apps'
     },
     {
       link: 'service-instances',
-      label: 'Service Instances'
+      label: 'Services',
+      matIconFont: 'stratos-icons',
+      matIcon: 'service'
     },
     {
       link: 'routes',
       label: 'Routes',
+      matIconFont: 'stratos-icons',
+      matIcon: 'network_route'
     },
     {
       link: 'users',
       label: 'Users',
+      matIcon: 'people'
     }
   ];
 

diff --git a/src/frontend/app/features/dashboard/page-side-nav/page-side-nav.component.scss b/src/frontend/app/features/dashboard/page-side-nav/page-side-nav.component.scss
@@ -39,6 +39,6 @@
     font-weight: bold;
     height: 60px;
     opacity: .6;
-    padding: 0 20px;
+    padding: 0 25px;
   }
 }
diff --git a/src/frontend/app/features/service-catalog/service-tabs-base/service-tabs-base.component.ts b/src/frontend/app/features/service-catalog/service-tabs-base/service-tabs-base.component.ts
@@ -2,12 +2,12 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { map, publishReplay, refCount } from 'rxjs/operators';
-
+import { CurrentUserPermissions } from '../../../core/current-user-permissions.config';
 import { IHeaderBreadcrumb } from '../../../shared/components/page-header/page-header.types';
-import { ISubHeaderTabs } from '../../../shared/components/page-subheader/page-subheader.types';
 import { AppState } from '../../../store/app-state';
+import { IPageSideNavTab } from '../../dashboard/page-side-nav/page-side-nav.component';
 import { ServicesService } from '../services.service';
-import { CurrentUserPermissions } from '../../../core/current-user-permissions.config';
+
 
 @Component({
   selector: 'app-service-tabs-base',
@@ -20,10 +20,11 @@ export class ServiceTabsBaseComponent {
   hasVisiblePlans$: Observable<boolean>;
   servicesSubscription: Subscription;
 
-  tabLinks: ISubHeaderTabs[] = [
+  tabLinks: IPageSideNavTab[] = [
     {
       link: 'summary',
-      label: 'Summary'
+      label: 'Summary',
+      matIcon: 'description'
     },
     {
       link: 'instances',