Skip to content

Commit

Permalink
org/space quota: reusing styling and minor changes
Browse files Browse the repository at this point in the history
Signed-off-by: Vítor Avelino <[email protected]>
  • Loading branch information
Vítor Avelino committed Jun 18, 2019
1 parent 02d5da3 commit 783954b
Show file tree
Hide file tree
Showing 14 changed files with 247 additions and 257 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ import { CloudFoundryStacksComponent } from './tabs/cloud-foundry-stacks/cloud-f
import { CloudFoundrySummaryTabComponent } from './tabs/cloud-foundry-summary-tab/cloud-foundry-summary-tab.component';
import { CloudFoundryUsersComponent } from './tabs/cloud-foundry-users/cloud-foundry-users.component';
import { InviteUsersComponent } from './users/invite-users/invite-users.component';
import { RemoveUserComponent } from './users/remove-user/remove-user.component';
import { UsersRolesComponent } from './users/manage-users/manage-users.component';
import { RemoveUserComponent } from './users/remove-user/remove-user.component';


/* tslint:enable:max-line-length */
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.quota-definition-base {
&__name-sub-text {
font-size: 14px;
opacity: .6;
}
&__title {
margin: 10px 0;
}
&__name {
margin: 0;
}
&__section-header {
margin: 10px 0;
opacity: .6;
}
&__basic-services {
display: flex;
margin: 8px 0;
}
&__basic-services-label {
margin-right: 10px;
opacity: .6;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { combineLatest, Observable, of, Subscription } from 'rxjs';
import { first, map } from 'rxjs/operators';

import { GetOrganization } from '../../../../../store/src/actions/organization.actions';
import { GetSpace } from '../../../../../store/src/actions/space.actions';
import { AppState } from '../../../../../store/src/app-state';
import { entityFactory, organizationSchemaKey, spaceSchemaKey } from '../../../../../store/src/helpers/entity-factory';
import { endpointEntitiesSelector } from '../../../../../store/src/selectors/endpoint.selectors';
import { APIResource } from '../../../../../store/src/types/api.types';
import { EndpointModel } from '../../../../../store/src/types/endpoint.types';
import { IOrganization, IQuotaDefinition, ISpace } from '../../../core/cf-api.types';
import { EntityServiceFactory } from '../../../core/entity-service-factory.service';
import { IHeaderBreadcrumb } from '../../../shared/components/page-header/page-header.types';
import { ActiveRouteCfOrgSpace } from '../cf-page.types';

export class QuotaDefinitionBaseComponent {
breadcrumbs$: Observable<IHeaderBreadcrumb[]>;
quotaDefinition$: Observable<APIResource<IQuotaDefinition>>;
org$: Observable<APIResource<IOrganization>>;
space$: Observable<APIResource<ISpace>>;
cfGuid: string;
orgGuid: string;
spaceGuid: string;
quotaGuid: string;
detailsLoading$: Observable<boolean>;
orgSubscriber: Subscription;

constructor(
protected entityServiceFactory: EntityServiceFactory,
protected store: Store<AppState>,
protected activeRouteCfOrgSpace: ActiveRouteCfOrgSpace,
protected activatedRoute: ActivatedRoute,
) {
this.cfGuid = activeRouteCfOrgSpace.cfGuid;
this.orgGuid = activeRouteCfOrgSpace.orgGuid || activatedRoute.snapshot.queryParams.orgGuid;
this.spaceGuid = activeRouteCfOrgSpace.spaceGuid || activatedRoute.snapshot.queryParams.spaceGuid;
this.quotaGuid = activatedRoute.snapshot.params.quotaId || activatedRoute.snapshot.queryParams.quotaGuid;
this.setupOrgObservable();
this.setupSpaceObservable();
this.setupBreadcrumbs();
}

setupOrgObservable() {
if (this.orgGuid) {
this.org$ = this.entityServiceFactory.create<APIResource<IOrganization>>(
organizationSchemaKey,
entityFactory(organizationSchemaKey),
this.orgGuid,
new GetOrganization(this.orgGuid, this.cfGuid),
true
).waitForEntity$.pipe(
map(data => data.entity),
);
}
}

setupSpaceObservable() {
if (this.spaceGuid) {
this.space$ = this.entityServiceFactory.create<APIResource<ISpace>>(
spaceSchemaKey,
entityFactory(spaceSchemaKey),
this.spaceGuid,
new GetSpace(this.spaceGuid, this.cfGuid),
true
).waitForEntity$.pipe(
map(data => data.entity),
);
}
}

private setupBreadcrumbs() {
const endpoints$ = this.store.select(endpointEntitiesSelector);
const org$ = this.org$ ? this.org$ : of(null);
const space$ = this.space$ ? this.space$ : of(null);
this.breadcrumbs$ = combineLatest(endpoints$, org$, space$).pipe(
map(([endpoints, org, space]) => this.getBreadcrumbs(endpoints[this.cfGuid], org, space)),
first()
);
}

protected setupQuotaDefinitionObservable() {
throw new Error('Method not implemented.');
}

protected getBreadcrumbs(
endpoint: EndpointModel,
org: APIResource<IOrganization>,
space: APIResource<ISpace>
) {
throw new Error('Method not implemented.');
return null;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<h1>{{ (quotaDefinition$ | async)?.entity?.name }}</h1>
</app-page-header>

<div class="quota-definition-page" *ngIf="quotaDefinition$ | async as quotaDefinition">
<div class="quota-definition-base quota-definition-page" *ngIf="quotaDefinition$ | async as quotaDefinition">

<app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
<div class="quota-definition-page__name-sub-text">name</div>
<h2 class="quota-definition-page__name">{{ quotaDefinition.entity.name }}</h2>
<div class="quota-definition-page__basic-services">
<div class="quota-definition-page__basic-services-label">Non Basic Services Allowed:</div>
<div class="quota-definition-base__name-sub-text">Name</div>
<h2 class="quota-definition-base__name">{{ quotaDefinition.entity.name }}</h2>
<div class="quota-definition-base__basic-services">
<div class="quota-definition-base__basic-services-label">Non Basic Services Allowed:</div>
<app-boolean-indicator [isTrue]="quotaDefinition.entity?.non_basic_services_allowed" type="yes-no" subtle="true">
</app-boolean-indicator>
</div>
<app-tile-grid fit="true">
<h3 class="quota-definition-page__title">Quota Limits</h3>
<h4 class="quota-definition-page__section-header">Memory</h4>
<h3 class="quota-definition-base__title">Quota Limits</h3>
<h4 class="quota-definition-base__section-header">Memory</h4>
<app-tile-group>
<app-tile>
<app-card-number-metric labelAtTop="true" icon="memory" label="Maximum Memory Usage" units="mb"
Expand All @@ -29,7 +29,7 @@ <h4 class="quota-definition-page__section-header">Memory</h4>
<app-tile></app-tile>
</app-tile-group>

<h4 class="quota-definition-page__section-header">Application</h4>
<h4 class="quota-definition-base__section-header">Application</h4>
<app-tile-group>
<app-tile>
<app-card-number-metric labelAtTop="true" icon="apps" label="Maximum Application Instances"
Expand All @@ -44,7 +44,7 @@ <h4 class="quota-definition-page__section-header">Application</h4>
<app-tile></app-tile>
</app-tile-group>

<h4 class="quota-definition-page__section-header">Service</h4>
<h4 class="quota-definition-base__section-header">Service</h4>
<app-tile-group>
<app-tile>
<app-card-number-metric labelAtTop="true" icon="service" iconFont="stratos-icons" label="Maximum Services"
Expand All @@ -59,7 +59,7 @@ <h4 class="quota-definition-page__section-header">Service</h4>
<app-tile></app-tile>
</app-tile-group>

<h4 class="quota-definition-page__section-header">Routes & Domains</h4>
<h4 class="quota-definition-base__section-header">Routes & Domains</h4>
<app-tile-group>
<app-tile>
<app-card-number-metric labelAtTop="true" icon="network_route" iconFont="stratos-icons" label="Maximum Routes"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +0,0 @@
.quota-definition-page {
&__name-sub-text {
font-size: 14px;
margin-bottom: -3px;
opacity: .6;
}
&__title {
margin: 10px 0;
}
&__name {
margin: 0;
}
&__section-header {
margin: 10px 0;
opacity: .6;
}
&__basic-services {
display: flex;
margin: 8px 0;
}
&__basic-services-label {
margin-right: 10px;
opacity: .6;
}
}
Original file line number Diff line number Diff line change
@@ -1,44 +1,34 @@
import { Component, OnDestroy } from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { combineLatest, Observable, of, Subscription } from 'rxjs';
import { filter, first, map, startWith, switchMap } from 'rxjs/operators';
import { Observable, of, Subscription } from 'rxjs';
import { filter, first, map, switchMap } from 'rxjs/operators';

import { GetOrganization } from '../../../../../store/src/actions/organization.actions';
import { GetQuotaDefinition } from '../../../../../store/src/actions/quota-definitions.actions';
import { AppState } from '../../../../../store/src/app-state';
import {
entityFactory,
organizationSchemaKey,
quotaDefinitionSchemaKey,
} from '../../../../../store/src/helpers/entity-factory';
import { endpointEntitiesSelector } from '../../../../../store/src/selectors/endpoint.selectors';
import { entityFactory, quotaDefinitionSchemaKey } from '../../../../../store/src/helpers/entity-factory';
import { APIResource } from '../../../../../store/src/types/api.types';
import { EndpointModel } from '../../../../../store/src/types/endpoint.types';
import { IOrganization, IQuotaDefinition } from '../../../core/cf-api.types';
import { IOrganization, IQuotaDefinition, ISpace } from '../../../core/cf-api.types';
import { EntityServiceFactory } from '../../../core/entity-service-factory.service';
import { IHeaderBreadcrumb } from '../../../shared/components/page-header/page-header.types';
import { CfUserService } from '../../../shared/data-services/cf-user.service';
import { ActiveRouteCfOrgSpace } from '../cf-page.types';
import { getActiveRouteCfOrgSpaceProvider } from '../cf.helpers';
import { CloudFoundryEndpointService } from '../services/cloud-foundry-endpoint.service';
import { CloudFoundryOrganizationService } from '../services/cloud-foundry-organization.service';
import { QuotaDefinitionBaseComponent } from '../quota-definition-base/quota-definition-base.component';

@Component({
selector: 'app-quota-definition',
templateUrl: './quota-definition.component.html',
styleUrls: ['./quota-definition.component.scss'],
styleUrls: ['../quota-definition-base/quota-definition-base.component.scss', './quota-definition.component.scss'],
providers: [
getActiveRouteCfOrgSpaceProvider,
CfUserService,
CloudFoundryEndpointService,
CloudFoundryOrganizationService
getActiveRouteCfOrgSpaceProvider
]
})
export class QuotaDefinitionComponent {
export class QuotaDefinitionComponent extends QuotaDefinitionBaseComponent {
breadcrumbs$: Observable<IHeaderBreadcrumb[]>;
quotaDefinition$: Observable<APIResource<IQuotaDefinition>>;
org$: Observable<APIResource<IOrganization>>;
space$: Observable<APIResource<ISpace>>;
cfGuid: string;
orgGuid: string;
spaceGuid: string;
Expand All @@ -47,33 +37,15 @@ export class QuotaDefinitionComponent {
orgSubscriber: Subscription;

constructor(
private activeRouteCfOrgSpace: ActiveRouteCfOrgSpace,
private entityServiceFactory: EntityServiceFactory,
private store: Store<AppState>,
protected entityServiceFactory: EntityServiceFactory,
protected store: Store<AppState>,
activeRouteCfOrgSpace: ActiveRouteCfOrgSpace,
activatedRoute: ActivatedRoute,
) {
this.cfGuid = activeRouteCfOrgSpace.cfGuid;
this.orgGuid = activeRouteCfOrgSpace.orgGuid || activatedRoute.snapshot.queryParams.orgGuid;
this.quotaGuid = activatedRoute.snapshot.params.quotaId;
this.setupOrgObservable();
this.setupBreadcrumbs();
super(entityServiceFactory, store, activeRouteCfOrgSpace, activatedRoute);
this.setupQuotaDefinitionObservable();
}

setupOrgObservable() {
if (this.orgGuid) {
this.org$ = this.entityServiceFactory.create<APIResource<IOrganization>>(
organizationSchemaKey,
entityFactory(organizationSchemaKey),
this.orgGuid,
new GetOrganization(this.orgGuid, this.cfGuid),
true
).waitForEntity$.pipe(
map(data => data.entity),
);
}
}

setupQuotaDefinitionObservable() {
const quotaGuid$ = this.quotaGuid ? of(this.quotaGuid) : this.org$.pipe(map(org => org.entity.quota_definition_guid));
const entityInfo$ = quotaGuid$.pipe(
Expand All @@ -83,9 +55,9 @@ export class QuotaDefinitionComponent {
entityFactory(quotaDefinitionSchemaKey),
quotaGuid,
new GetQuotaDefinition(quotaGuid, this.cfGuid),
).entityObs$
)
).entityObs$)
);

this.quotaDefinition$ = entityInfo$.pipe(
filter(definition => !!definition && !!definition.entity),
map(definition => definition.entity)
Expand All @@ -96,20 +68,12 @@ export class QuotaDefinitionComponent {
);
}

private setupBreadcrumbs() {
const endpoints$ = this.store.select(endpointEntitiesSelector);
const org$ = this.org$ ? this.org$ : of(null);
this.breadcrumbs$ = combineLatest(endpoints$, org$).pipe(
map(([endpoints, org]) => this.getBreadcrumbs(endpoints[this.cfGuid], org)),
first()
);
}

private getBreadcrumbs(
protected getBreadcrumbs(
endpoint: EndpointModel,
org: APIResource<IOrganization>
org: APIResource<IOrganization>,
space: APIResource<ISpace>
) {
const baseCFUrl = `/cloud-foundry/${this.activeRouteCfOrgSpace.cfGuid}`;
const baseCFUrl = `/cloud-foundry/${this.cfGuid}`;

const breadcrumbs: IHeaderBreadcrumb[] = [{
breadcrumbs: [
Expand All @@ -127,6 +91,19 @@ export class QuotaDefinitionComponent {
{ value: org.entity.name, routerLink: `${baseOrgUrl}/summary` },
]
});

if (space) {
const baseSpaceUrl = `${baseCFUrl}/organizations/${org.metadata.guid}/spaces/${space.metadata.guid}`;

breadcrumbs.push({
key: 'space',
breadcrumbs: [
{ value: endpoint.name, routerLink: `${baseCFUrl}/organizations` },
{ value: org.entity.name, routerLink: `${baseOrgUrl}/spaces` },
{ value: space.entity.name, routerLink: `${baseSpaceUrl}/summary` },
]
});
}
}

return breadcrumbs;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,9 @@ export class CloudFoundryOrganizationService {
return quotaDefinition && [
'/cloud-foundry',
this.cfGuid,
'quota-definitions',
quotaDefinition.metadata.guid
'organizations',
this.orgGuid,
'quota'
];
}));
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,9 @@ export class CloudFoundrySpaceService {
return [
'/cloud-foundry',
this.cfGuid,
'quota-definitions',
quota.guid
'organizations',
this.orgGuid,
'quota',
];
}

Expand All @@ -172,8 +173,9 @@ export class CloudFoundrySpaceService {
this.cfGuid,
'organizations',
this.orgGuid,
'space-quota-definitions',
quota.guid
'space',
this.spaceGuid,
'space-quota'
];
}
)
Expand Down
Loading

0 comments on commit 783954b

Please sign in to comment.