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.

Sign up for GitHub

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

Use side nav instead of top tabs throughout Stratos. #3289

Closed
wants to merge 22 commits into from
Closed

Use side nav instead of top tabs throughout Stratos. #3289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
241c89f
Move tabs to left nav
KlapTrap Dec 13, 2018
1ecde10
Add page header from side nav
KlapTrap Dec 13, 2018
e8f3f17
Add new page side nav
KlapTrap Dec 13, 2018
428d43b
Remove old side nav open close logic
KlapTrap Dec 14, 2018
b2af12f
Improve sub nav layout
KlapTrap Dec 14, 2018
eb7d9f8
Remove unused mobile nav logic
KlapTrap Dec 14, 2018
92fe6f7
Add icons to cf page
KlapTrap Dec 14, 2018
e861a04
Update icons for all CF side navs
KlapTrap Dec 14, 2018
8b3a250
Tidy up page sub nav
KlapTrap Dec 14, 2018
af76f15
Fix scss import
KlapTrap Dec 17, 2018
9cd3761
Merge branch 'v2-master' into tabs-layout-change
KlapTrap Dec 17, 2018
68a6216
Merge branch 'v2-master' into tabs-layout-change
KlapTrap Dec 31, 2018
ede7a61
Remove manage user button
KlapTrap Dec 31, 2018
e2f41a1
Merge branch 'v2-master' into tabs-layout-change
KlapTrap Feb 19, 2019
84623b4
Fix home left tab
KlapTrap Feb 19, 2019
a744be6
Add WIP breadcrumbs
KlapTrap Feb 19, 2019
e70c53e
Merge branch 'v2-master' into tabs-layout-change
KlapTrap Mar 18, 2019
b910e0f
Post merge fixes
KlapTrap Mar 19, 2019
7535d33
Editor config change
KlapTrap Mar 19, 2019
1f5fcae
Applciation sub nav and sub nav changes
KlapTrap Mar 19, 2019
b73e7eb
Fix compilation issues
nwmac Mar 21, 2019
14983a6
Merge remote-tracking branch 'origin/v2-master' into tabs-layout-change
nwmac Mar 21, 2019
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
3 changes: 3 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,6 @@ indent_size=2
[*.md]
max_line_length = off
trim_trailing_whitespace = false

[*.html]
max_line_length = 120
3 changes: 3 additions & 0 deletions src/frontend/packages/core/sass/_all-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import '../src/features/dashboard/dashboard-base/dashboard-base.component.theme';
@import '../src/features/login/login-page/login-page.component.theme';
@import '../src/features/applications/deploy-application/deploy-application.component.theme';
@import '../src/features/dashboard/page-side-nav/page-side-nav.component.theme';
@import '../src/features/cloud-foundry/tabs/cloud-foundry-firehose/cloud-foundry-firehose.component.theme';
@import '../src/features/about/about-page/about-page.component.theme';
@import '../src/shared/components/display-value/display-value.component.theme';
Expand Down Expand Up @@ -127,6 +128,8 @@ $side-nav-light-active: #484848;
@include metrics-chart-theme($theme, $app-theme);
@include metrics-range-selector-theme($theme, $app-theme);
@include app-multiline-title-theme($theme, $app-theme);
@include page-side-nav-theme($theme, $app-theme);
// @include cf-admin-add-user-warning($theme, $app-theme);
}

@function app-generate-nav-theme($theme, $nav-theme: null) {
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/packages/core/src/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { ApplicationStateService } from './shared/components/application-state/a
import { favoritesConfigMapper } from './shared/components/favorites-meta-card/favorite-config-mapper';
import { SharedModule } from './shared/shared.module';
import { XSRFModule } from './xsrf.module';
import { TabNavService } from '../tab-nav.service';

// Create action for router navigation. See
// - https://github.com/ngrx/platform/issues/68
Expand Down Expand Up @@ -117,6 +118,7 @@ export class CustomRouterStateSerializer
CloudFoundryModule
],
providers: [
TabNavService,
LoggedInService,
ExtensionService,
DynamicExtensionRoutes,
Expand Down
12 changes: 6 additions & 6 deletions src/frontend/packages/core/src/app.routing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const appRoutes: Routes = [
path: 'home', component: HomePageComponent,
data: {
stratosNavigation: {
text: 'Home',
label: 'Home',
matIcon: 'home',
position: 10
}
Expand All @@ -41,7 +41,7 @@ const appRoutes: Routes = [
loadChildren: './features/applications/applications.module#ApplicationsModule',
data: {
stratosNavigation: {
text: 'Applications',
label: 'Applications',
matIcon: 'apps',
position: 20
}
Expand All @@ -51,7 +51,7 @@ const appRoutes: Routes = [
path: 'endpoints',
data: {
stratosNavigation: {
text: 'Endpoints',
label: 'Endpoints',
matIcon: 'settings_ethernet',
position: 100
}
Expand All @@ -69,7 +69,7 @@ const appRoutes: Routes = [
path: 'marketplace', loadChildren: './features/service-catalog/service-catalog.module#ServiceCatalogModule',
data: {
stratosNavigation: {
text: 'Marketplace',
label: 'Marketplace',
matIcon: 'store',
position: 30
}
Expand All @@ -79,7 +79,7 @@ const appRoutes: Routes = [
path: 'services', loadChildren: './features/services/services.module#ServicesModule',
data: {
stratosNavigation: {
text: 'Services',
label: 'Services',
matIcon: 'service',
matIconFont: 'stratos-icons',
position: 40
Expand All @@ -90,7 +90,7 @@ const appRoutes: Routes = [
path: 'cloud-foundry', loadChildren: './features/cloud-foundry/cloud-foundry.module#CloudFoundryModule',
data: {
stratosNavigation: {
text: 'Cloud Foundry',
label: 'Cloud Foundry',
matIcon: 'cloud_foundry',
matIconFont: 'stratos-icons',
position: 50
Expand Down
3 changes: 2 additions & 1 deletion src/frontend/packages/core/src/core/core.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { TruncatePipe } from './truncate.pipe';
import { UserService } from './user.service';
import { UtilsService } from './utils.service';
import { WindowRef } from './window-ref/window-ref.service';

import { PortalModule } from '@angular/cdk/portal';

@NgModule({
imports: [
Expand All @@ -51,6 +51,7 @@ import { WindowRef } from './window-ref/window-ref.service';
DotContentComponent,
ButtonBlurOnClickDirective,
PageNotFoundComponentComponent,
PortalModule,
EntityFavoriteStarComponent,
RecentEntitiesComponent,
DisableRouterLinkDirective
Expand Down
49 changes: 23 additions & 26 deletions ...tures/applications/application/application-tabs-base/application-tabs-base.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,43 @@
<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks" [favorite]="favorite$ | async">
<app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks" tabsHeader="Applications" [favorite]="favorite$ | async">
<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'"
href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
<mat-icon>launch</mat-icon>
</a>
<span *ngIf="isBusyUpdating$ | async as busy">
<span *ngIf="applicationService.appSpace$ | async as space">
<span class="manage-application-actions" *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:this.applicationService.cfGuid">
<button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit"
matTooltip="Edit">
</app-page-header>
<!-- <app-page-sub-nav>
<span *ngIf="isBusyUpdating$ | async as busy">
<span *ngIf="applicationService.appSpace$ | async as space">
<span class="manage-application-actions" *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:this.applicationService.cfGuid">
<app-page-sub-nav-section>
<button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit" matTooltip="Edit">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button name="delete" (click)="redirectToDeletePage()" matTooltip="Delete">
<mat-icon>delete</mat-icon>
</button>
<div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
<button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()"
matTooltip="Restart">
</app-page-sub-nav-section>
<div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
<app-page-sub-nav-section>
<button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()" matTooltip="Restart">
<mat-icon>settings_backup_restore</mat-icon>
</button>
<button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton"
(click)="stopApplication()" matTooltip="Stop">
<button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton" (click)="stopApplication()" matTooltip="Stop">
<mat-icon>stop</mat-icon>
</button>
<ng-template #startButton>
<button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop"
(click)="startApplication()" matTooltip="Start">
<button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop" (click)="startApplication()" matTooltip="Start">
<mat-icon>play_arrow</mat-icon>
</button>
</ng-template>
<button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()"
matTooltip="Restage">
<button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()" matTooltip="Restage">
<mat-icon>redo</mat-icon>
</button>
</div>
</span>
</app-page-sub-nav-section>
</div>
</span>
</span>
</div>
</app-page-header>
<app-loading-page [entityId]="applicationService.appGuid" [entitySchema]="schema" deleteText="Deleting application"
text="Retrieving application" class="router-component">
</span>
<a class="app-page-header__anchor" mat-icon-button [disabled]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'" href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
<mat-icon>launch</mat-icon>
</a>
</app-page-sub-nav> -->
<app-loading-page [entityId]="applicationService.appGuid" [entitySchema]="schema" deleteText="Deleting application" text="Retrieving application" class="router-component">
<router-outlet></router-outlet>
</app-loading-page>
3 changes: 0 additions & 3 deletions ...tures/applications/application/application-tabs-base/application-tabs-base.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,4 @@
color: inherit;
}
}
&__actions {
display: inline-block;
}
}
20 changes: 10 additions & 10 deletions ...eatures/applications/application/application-tabs-base/application-tabs-base.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import { GitSCMService, GitSCMType } from '../../../../shared/data-services/scm/
import { ENTITY_SERVICE } from '../../../../shared/entity.tokens';
import { ApplicationData, ApplicationService } from '../../application.service';
import { EndpointsService } from './../../../../core/endpoints.service';
import { IPageSideNavTab } from '../../../dashboard/page-side-nav/page-side-nav.component';

// Confirmation dialogs
const appStopConfirmation = new ConfirmationDialogConfig(
Expand Down Expand Up @@ -71,7 +72,6 @@ const appRestageConfirmation = new ConfirmationDialogConfig(
})
export class ApplicationTabsBaseComponent implements OnInit, OnDestroy {
public schema = entityFactory(applicationSchemaKey);
public manageAppPermission = CurrentUserPermissions.APPLICATION_MANAGE;
public appState$: Observable<ApplicationStateData>;

public favorite$ = this.applicationService.app$.pipe(
Expand Down Expand Up @@ -127,14 +127,14 @@ export class ApplicationTabsBaseComponent implements OnInit, OnDestroy {
);

this.tabLinks = [
{ 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', hidden: appDoesNotHaveEnvVars$ },
{ link: 'events', label: 'Events' }
];
{ 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', hidden: appDoesNotHaveEnvVars$ },
{ link: 'events', label: 'Events', matIcon: 'watch_later' }
];;

this.endpointsService.hasMetrics(applicationService.cfGuid).subscribe(hasMetrics => {
if (hasMetrics) {
Expand Down Expand Up @@ -183,7 +183,7 @@ export class ApplicationTabsBaseComponent implements OnInit, OnDestroy {
update => update[this.autoRefreshString] || { busy: false }
));

tabLinks: ISubHeaderTabs[];
tabLinks: IPageSideNavTab[];

private getBreadcrumbs(
application: IApp,
Expand Down
39 changes: 38 additions & 1 deletion ...es/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,40 @@
<app-page-sub-nav *ngIf="isBusyUpdating$ | async as busy">
<div class="summary__sub-nav">
<div class="summary__actions" *ngIf="applicationService.appSpace$ | async as space">
<ng-container *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:applicationService.cfGuid">
<app-page-sub-nav-section>
<button mat-icon-button name="edit" *ngIf="(applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit" matTooltip="Edit">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button name="delete" (click)="redirectToDeletePage()" matTooltip="Delete">
<mat-icon>delete</mat-icon>
</button>
</app-page-sub-nav-section>
<div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
<app-page-sub-nav-section>
<button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()" matTooltip="Restart">
<mat-icon>settings_backup_restore</mat-icon>
</button>
<button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton" (click)="stopApplication()" matTooltip="Stop">
<mat-icon>stop</mat-icon>
</button>
<ng-template #startButton>
<button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop" (click)="startApplication()" matTooltip="Start">
<mat-icon>play_arrow</mat-icon>
</button>
</ng-template>
<button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()" matTooltip="Restage">
<mat-icon>redo</mat-icon>
</button>
</app-page-sub-nav-section>
</div>
</ng-container>
</div>
<a class="app-page-header__anchor" mat-icon-button [disabled]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'" href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
<mat-icon>launch</mat-icon>
</a>
</div>
</app-page-sub-nav>
<div class="summary" *ngIf="applicationService.application$ | async as appSvc">
<app-tile-grid>
<app-tile-group>
Expand Down Expand Up @@ -113,4 +150,4 @@
</mat-card>
</app-tile>
</app-tile-group>
</app-tile-grid>
</app-tile-grid>
6 changes: 6 additions & 0 deletions ...es/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@
padding: 6px;
text-align: right;
}
&__actions {
display: flex;
}
&__sub-nav {
display: flex;
}
}

.app-metadata {
Expand Down
28 changes: 25 additions & 3 deletions ...ures/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { combineLatest, distinct, map, startWith } from 'rxjs/operators';

Expand All @@ -8,6 +8,10 @@ import { GitSCMService, GitSCMType } from '../../../../../../shared/data-service
import { getFullEndpointApiUrl } from '../../../../../endpoints/endpoint-helpers';
import { ApplicationMonitorService } from '../../../../application-monitor.service';
import { ApplicationData, ApplicationService } from '../../../../application.service';
import { ENTITY_SERVICE } from '../../../../../../shared/entity.tokens';
import { EntityService } from '../../../../../../core/entity-service';
import { ActionState } from '../../../../../../../../store/src/reducers/api-request-reducer/types';
import { CurrentUserPermissions } from '../../../../../../core/current-user-permissions.config';

const isDockerHubRegEx = /^([a-zA-Z0-9_-]+)\/([a-zA-Z0-9_-]+):([a-zA-Z0-9_.-]+)/g;

Expand All @@ -20,8 +24,13 @@ const isDockerHubRegEx = /^([a-zA-Z0-9_-]+)\/([a-zA-Z0-9_-]+):([a-zA-Z0-9_.-]+)/
]
})
export class BuildTabComponent implements OnInit {

constructor(public applicationService: ApplicationService, private scmService: GitSCMService) { }
public isBusyUpdating$: Observable<{ updating: boolean }>;
public manageAppPermission = CurrentUserPermissions.APPLICATION_MANAGE;
constructor(
public applicationService: ApplicationService,
private scmService: GitSCMService,
@Inject(ENTITY_SERVICE) private entityService: EntityService<APIResource>,
) { }

cardTwoFetching$: Observable<boolean>;

Expand All @@ -42,6 +51,15 @@ export class BuildTabComponent implements OnInit {
return app.fetching || appSummary.entityRequestInfo.fetching;
}), distinct());

this.isBusyUpdating$ = this.entityService.updatingSection$.pipe(
map(updatingSection => {
const updating = this.updatingSectionBusy(updatingSection.restaging) ||
this.updatingSectionBusy(updatingSection['Updating-Existing-Application']);
return { updating };
}),
startWith({ updating: true })
);

this.sshStatus$ = this.applicationService.application$.pipe(
combineLatest(this.applicationService.appSpace$),
map(([app, space]) => {
Expand Down Expand Up @@ -89,6 +107,10 @@ export class BuildTabComponent implements OnInit {
);
}

private updatingSectionBusy(section: ActionState) {
return section && section.busy;
}

private createDockerImageUrl(dockerImage: string): string {
// https://docs.cloudfoundry.org/devguide/deploy-apps/push-docker.html
// Private Registry: MY-PRIVATE-REGISTRY.DOMAIN:PORT/REPO/IMAGE:TAG
Expand Down
8 changes: 3 additions & 5 deletions ...src/features/cloud-foundry/cloud-foundry-tabs-base/cloud-foundry-tabs-base.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<app-page-header [tabs]="tabLinks" [favorite]="favorite$ | async">
<app-page-header [tabs]="tabLinks" [tabsHeader]="tabsHeader" [favorite]="favorite$ | async">
<h1>{{ (cfEndpointService.endpoint$ | async)?.entity.name }}</h1>
<div class="page-header-right">
<button mat-icon-button name="add-org" *ngIf="canAddOrg$ | async" routerLink="/cloud-foundry/{{this.cfEndpointService.cfGuid}}/add-org">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button name="cli" routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/cli" matTooltip="CLI Info">
<button mat-icon-button name="cli" routerLink="/cloud-foundry/{{cfEndpointService.cfGuid}}/cli"
matTooltip="CLI Info">
<mat-icon>keyboard</mat-icon>
</button>
</div>
Expand Down
Loading