Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge changes from downstream #4567

Merged
merged 1 commit into from
Sep 15, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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 = [
Original file line number Diff line number Diff line change
@@ -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 = () => [];
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
json-schema-form {
mat-error.mat-error {
margin-bottom: .05rem;
}
}
Original file line number Diff line number Diff line change
@@ -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;
}

}
11 changes: 11 additions & 0 deletions src/frontend/packages/core/sass/mat-desktop.scss
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
}
}

}
Original file line number Diff line number Diff line change
@@ -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 => {
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -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));
}

}
Original file line number Diff line number Diff line change
@@ -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 = {
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Loading