Merge changes from downstream (#4567)

- json schema form mat-error styling fix - info & border style colors - desktop style fixes - changes to breadcrumbs - sidenav dark mode fix - new functionality for card-number-metric component - filter endpoint by type - more info in stepper onNext fn - SessionService with isTechPreview - Add reset pagination of type action/reducer - Fix cf endpoint sort by type bug
cloudfoundry · Sep 15, 2020 · cec32ff · cec32ff
1 parent b182f63
commit cec32ff
Show file tree

Hide file tree

Showing 36 changed files with 535 additions and 106 deletions.
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
@@ -89,7 +89,7 @@ export class ApplicationTabsBaseComponent implements OnInit, OnDestroy {
       switchMap(space => this.currentUserPermissionsService.can(CfCurrentUserPermissions.APPLICATION_VIEW_ENV_VARS,
         this.applicationService.cfGuid, space.metadata.guid)
       ),
-      map(can => !can)
+      map(can => !can),
     );
 
     this.tabLinks = [

diff --git a/...ry/src/shared/components/list/list-types/cf-endpoints/cf-endpoints-list-config.service.ts b/...ry/src/shared/components/list/list-types/cf-endpoints/cf-endpoints-list-config.service.ts
@@ -36,7 +36,7 @@ export class CFEndpointsListConfigService implements IListConfig<EndpointModel>
     paginationMonitorFactory: PaginationMonitorFactory,
     entityMonitorFactory: EntityMonitorFactory,
     internalEventMonitorFactory: InternalEventMonitorFactory,
-    endpointsListConfigService: EndpointsListConfigService
+    endpointsListConfigService: EndpointsListConfigService,
   ) {
     this.columns = endpointsListConfigService.columns.filter(column => {
       return column.columnId !== 'type';
@@ -46,7 +46,8 @@ export class CFEndpointsListConfigService implements IListConfig<EndpointModel>
       this,
       paginationMonitorFactory,
       entityMonitorFactory,
-      internalEventMonitorFactory);
+      internalEventMonitorFactory,
+    );
   }
   public getColumns = () => this.columns;
   public getGlobalActions = () => [];

diff --git a/src/frontend/packages/core/sass/components/text-status.theme.scss b/src/frontend/packages/core/sass/components/text-status.theme.scss
@@ -6,6 +6,7 @@
   $status-warning: map-get($status-colors, warning);
   $status-danger: map-get($status-colors, danger);
   $status-tentative: map-get($status-colors, tentative);
+  $status-info: map-get($status-colors, info);
 
   .text-success {
     color: $status-success;
@@ -23,6 +24,10 @@
     color: $status-tentative;
   }
 
+  .text-info {
+    color: $status-info;
+  }
+
   // Border colors
 
   .border-success {
@@ -41,4 +46,8 @@
     border-color: $status-tentative;
   }
 
+  .border-info {
+    border-color: $status-info;
+  }  
+
 }
diff --git a/src/frontend/packages/core/sass/mat-desktop.scss b/src/frontend/packages/core/sass/mat-desktop.scss
@@ -17,6 +17,13 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
     line-height: $desktop-menu-item-height;
     min-width: 128px;
     padding: 0 24px;
+
+    &.hasIcon {
+      padding-left: 16px;
+      .mat-icon {
+        margin-right: 12px;
+      }
+    }
   }
 
   .mat-menu-panel {
@@ -56,6 +63,10 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
     font-size: $desktop-font-size;
   }
 
+  .mat-slide-toggle-label {
+    font-size: $desktop-font-size;
+  }
+
   // Allow a slightly-wider snackbar on desktop
   .mat-snack-bar-container {
     max-width: 40vw;

diff --git a/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.html b/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.html
@@ -16,10 +16,18 @@
           </div>
           <div class="dashboard__main">
             <div *ngIf="subNavData$ | async as data">
-              <div class="page-header-sub-nav" *ngIf="data[0] || data[1]">
+              <div class="page-header-sub-nav" *ngIf="data[0] || data[1] || data[3]">
                 <div class="page-header-sub-nav__container">
-                  <div *ngIf="data[0] as activeTabLabel" class="page-header-sub-nav__title">
-                    {{ activeTabLabel }}
+                  <div *ngIf="data[0] && !data[3]" class="page-header-sub-nav__title">
+                    {{ data[0] }}
+                  </div>
+                  <div *ngIf="data[3] as breadcrumbs" class="page-header-sub-nav__breadcrumbs">
+                    <ng-container *ngFor="let breadcrumbDef of breadcrumbs; last as isLast">
+                      <span class="page-header-sub-nav__breadcrumb page-header-sub-nav__breadcrumb-link" *ngIf="breadcrumbDef.routerLink"
+                        [routerLink]="breadcrumbDef.routerLink">{{ breadcrumbDef.value }}</span>
+                      <span class="page-header-sub-nav__breadcrumb page-header-sub-nav__breadcrumb-nolink" *ngIf="!breadcrumbDef.routerLink">{{ breadcrumbDef.value }}</span>
+                      <mat-icon *ngIf="!isLast" class="page-header-sub-nav__breadcrumb-separator">chevron_right</mat-icon>
+                    </ng-container>
                   </div>
                   <ng-container *ngIf="data[1] as portal" [cdkPortalOutlet]="portal"></ng-container>
                 </div>

diff --git a/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.scss b/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.scss
@@ -79,6 +79,11 @@ $app-header-height: 56px;
 }
 
 .page-header-sub-nav {
+  $breadcrumb-opacity: .7;
+  $breadcrumb-hover-opacity: 1;
+  $breadcrumb-padding: 3px;
+  $font-size: 20px;
+
   align-items: center;
   border-bottom: 1px solid rgba(0, 0, 0, .1);
   display: flex;
@@ -91,7 +96,6 @@ $app-header-height: 56px;
   }
   &__title {
     display: none;
-    $font-size: 20px;
     font-size: $font-size;
     font-weight: bold;
     line-height: $font-size;
@@ -106,4 +110,34 @@ $app-header-height: 56px;
     opacity: .6;
     width: 100%;
   }
+  &__breadcrumb {
+    font-size: $font-size;
+    font-weight: bold;
+    line-height: $font-size;
+  }
+  &__breadcrumb,
+  &__breadcrumb-separator {
+    opacity: $breadcrumb-opacity;
+  }
+  &__breadcrumb-separator {
+    font-size: 24px;
+    margin: 0 $breadcrumb-padding;
+    user-select: none;
+  }
+  &__breadcrumbs {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  &__breadcrumb-nolink {
+    opacity: $breadcrumb-hover-opacity;
+  }
+  &__breadcrumb-link {
+    cursor: pointer;
+    outline: none;
+    &:hover {
+      opacity: $breadcrumb-hover-opacity;
+    }
+  }
+
 }
diff --git a/src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.ts b/src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.ts
@@ -16,8 +16,10 @@ import { selectDashboardState } from '../../../../../store/src/selectors/dashboa
 import { stratosEntityCatalog } from '../../../../../store/src/stratos-entity-catalog';
 import { CustomizationService } from '../../../core/customizations.types';
 import { EndpointsService } from '../../../core/endpoints.service';
+import { IHeaderBreadcrumbLink } from '../../../shared/components/page-header/page-header.types';
 import { SidePanelService } from '../../../shared/services/side-panel.service';
 import { TabNavService } from '../../../tab-nav.service';
+import { IPageSideNavTab } from '../page-side-nav/page-side-nav.component';
 import { PageHeaderService } from './../../../core/page-header-service/page-header.service';
 import { SideNavItem } from './../side-nav/side-nav.component';
 
@@ -30,12 +32,12 @@ import { SideNavItem } from './../side-nav/side-nav.component';
 
 export class DashboardBaseComponent implements OnInit, OnDestroy, AfterViewInit {
   public activeTabLabel$: Observable<string>;
-  public subNavData$: Observable<[string, Portal<any>]>;
+  public subNavData$: Observable<[string, Portal<any>, IPageSideNavTab, IHeaderBreadcrumbLink[]]>;
   public isMobile$: Observable<boolean>;
   public sideNavMode$: Observable<string>;
   public sideNavMode: string;
-  public mainNavState$: Observable<{ mode: string; opened: boolean; iconMode: boolean }>;
-  public rightNavState$: Observable<{ opened: boolean, component?: object, props?: object }>;
+  public mainNavState$: Observable<{ mode: string; opened: boolean; iconMode: boolean; }>;
+  public rightNavState$: Observable<{ opened: boolean, component?: object, props?: object; }>;
   private dashboardState$: Observable<DashboardState>;
   public noMargin$: Observable<boolean>;
   private closeSub: Subscription;
@@ -133,8 +135,9 @@ export class DashboardBaseComponent implements OnInit, OnDestroy, AfterViewInit
       this.tabNavService.getCurrentTabHeaderObservable().pipe(
         startWith(null)
       ),
-      this.tabNavService.tabSubNav$
-    );
+      this.tabNavService.tabSubNav$,
+      this.tabNavService.tabSubNavBreadcrumbs$
+    ).pipe(map(([tabNav, tabSubNav, tabSubNavBreadcrumb]) => [tabNav ? tabNav.label : null, tabSubNav, tabNav, tabSubNavBreadcrumb]));
 
     // Register all health checks for endpoint types that support this
     entityCatalog.getAllEndpointTypes().forEach(epType => {

diff --git a/...end/packages/core/src/features/dashboard/page-side-nav/page-side-nav.component.theme.scss b/...end/packages/core/src/features/dashboard/page-side-nav/page-side-nav.component.theme.scss
@@ -11,6 +11,7 @@
   $side-nav-bottom-color: map-get($app-theme, subdued-color);
   $background-color:  map-get($app-theme, app-background-color);
   $darker-background-color:  darken($background-color, 4%);
+  $is-dark: map-get($theme, is-dark);
 
   .page-side-nav {
     background-color: $background-color;
@@ -27,6 +28,10 @@
       &--active {
         background-color: transparentize($primary-color, .9);
         color: $primary-color;
+        @if $is-dark == true {
+          background-color: transparentize($primary-color, .8);
+          color: mat-contrast($primary, 500);
+        }
       }
     }
     &__items-header {

diff --git a/src/frontend/packages/core/src/features/dashboard/page-side-nav/page-side-nav.component.ts b/src/frontend/packages/core/src/features/dashboard/page-side-nav/page-side-nav.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { AppState } from '../../../../../store/src/app-state';
 import { EntityServiceFactory } from '../../../../../store/src/entity-service-factory.service';
@@ -54,7 +55,7 @@ export class PageSideNavComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.activeTab$ = this.tabNavService.getCurrentTabHeaderObservable();
+    this.activeTab$ = this.tabNavService.getCurrentTabHeaderObservable().pipe(map(item => item ? item.label : null));
   }
 
 }
diff --git a/...tend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts b/...tend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
@@ -38,7 +38,16 @@ export class BooleanIndicatorComponent {
   // Invert the text labels with the icons (No text for yes value and vice-versa)
   @Input() inverse = false;
   // Should we use a subtle display - this won't show the No option as danger (typically red)
-  @Input() subtle = true;
+  private pSubtle = true;
+  @Input()
+  get subtle(): boolean {
+    return this.pSubtle;
+  }
+  set subtle(subtle: boolean) {
+    this.pSubtle = subtle;
+    this.updateBooleanOutput();
+  }
+
   @Input() showText = true;
 
   private icons = {

diff --git a/...ges/core/src/shared/components/cards/card-number-metric/card-number-metric.component.html b/...ges/core/src/shared/components/cards/card-number-metric/card-number-metric.component.html
@@ -14,6 +14,20 @@
         </div>
         <div class="number-metric-card__label">{{ labelSingular && value === '1' ? labelSingular : label }}</div>
       </div>
+      <div class="number-metric-card__alerts" *ngIf="alertInfo" (click)="alertsClicked()">
+        <div *ngIf="alertInfo.info" class="number-metric-card__alert-badge number-metric-card__alert-badge-info">
+          <mat-icon>info</mat-icon>
+          {{ alertInfo.info }}
+        </div>
+        <div *ngIf="alertInfo.warning" class="number-metric-card__alert-badge number-metric-card__alert-badge-warning">
+          <mat-icon>warning</mat-icon>
+          <div>{{ alertInfo.warning }}</div>
+        </div>
+        <div *ngIf="alertInfo.error" class="number-metric-card__alert-badge number-metric-card__alert-badge-error">
+          <mat-icon>error</mat-icon>
+          {{ alertInfo.error }}
+        </div>
+      </div>
     </mat-card>
   </div>
 </ng-template>

diff --git a/...ges/core/src/shared/components/cards/card-number-metric/card-number-metric.component.scss b/...ges/core/src/shared/components/cards/card-number-metric/card-number-metric.component.scss
@@ -40,4 +40,26 @@
   &__limit {
     font-size: 18px;
   }
+  &__alerts {
+    cursor: pointer;
+    display: flex;
+    flex: 0;
+    flex-direction: column;
+  }
+  &__alert-badge {
+    align-items: center;
+    border-radius: 4px;
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    margin-bottom: 2px;
+    padding: 2px 4px;
+
+    &> mat-icon {
+      font-size: 16px;
+      height: 16px;
+      margin-right: 2px;
+      width: 16x;
+    }
+  }
 }
diff --git a/...re/src/shared/components/cards/card-number-metric/card-number-metric.component.theme.scss b/...re/src/shared/components/cards/card-number-metric/card-number-metric.component.theme.scss
@@ -1,6 +1,12 @@
 @mixin app-card-number-metric-theme($theme, $app-theme) {
   $status-colors: map-get($app-theme, status);
   $subdued: mat-color($app-theme, subdued-color);
+
+  $status-colors: map-get($app-theme, status);
+  $status-warning: map-get($status-colors, warning);
+  $status-danger: map-get($status-colors, danger);
+  $status-info: map-get($status-colors, info);
+
   .number-metric-card {
     &__icon,
     &__anchor,
@@ -9,4 +15,16 @@
       color: $subdued;
     }
   }
-}
+
+  .number-metric-card__alert-badge {
+    &-error {
+      background-color: $status-danger;
+    }
+    &-info {
+      background-color: $status-info;
+    }
+    &-warning {
+      background-color: $status-warning;
+    }
+  }
+}