File
Implements
Methods
|
addMicroservice
|
addMicroservice()
|
|
|
|
loadMicroservices
|
loadMicroservices()
|
|
|
|
resetFilters
|
resetFilters()
|
|
|
|
isMicroserviceHostingAllowed$
|
Type : Observable<boolean>
|
Default value : this.reload$.pipe(
switchMap(() => this.ecosystemService.isMicroserviceHostingAllowed()),
shareReplay()
)
|
|
microservices$
|
Type : Observable<IApplication[]>
|
Default value : this.reload$.pipe(
tap(() => (this.reloading = true)),
switchMap(() => this.ecosystemService.getMicroservices()),
tap(microservices => {
microservices.forEach(microservice => {
microservice.filterProps = this.ecosystemService.getAppFilterProps(microservice);
});
}),
tap(() => (this.reloading = false)),
shareReplay()
)
|
|
packageAvailabilities
|
Type : ()[]
|
Default value : [
APP_STATE.SUBSCRIBED.label,
APP_STATE.CUSTOM.label
]
|
|
reload$
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
|
reloading
|
Default value : false
|
<c8y-title>{{ 'Microservices' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'c8y-atom'"
[label]="'Ecosystem' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'microchip'"
[label]="'Microservices' | translate"
[path]="'ecosystem/microservice/microservices'"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<ng-container *c8yIfAllowed="['ROLE_APPLICATION_MANAGEMENT_ADMIN']">
<c8y-action-bar-item
[placement]="'right'"
[priority]="100"
*ngIf="isMicroserviceHostingAllowed$ | async"
>
<button
class="btn btn-link"
title="{{ 'Add microservice' | translate }}"
(click)="addMicroservice()"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add microservice' | translate }}
</button>
</c8y-action-bar-item>
</ng-container>
<c8y-help src="/docs/standard-tenant/ecosystem/#managing-microservices"></c8y-help>
<c8y-action-bar-item [placement]="'right'">
<button
class="btn btn-link"
title="{{ 'Reload' | translate }}"
(click)="reload$.next()"
>
<i
c8yIcon="refresh"
[ngClass]="{ 'icon-spin': reloading }"
></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'left'">
<c8y-list-filters
*ngIf="microservices$ | async"
(filterPipeChange)="setFilterPipe($event)"
[packageAvailabilities]="packageAvailabilities"
></c8y-list-filters>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'left'"
itemClass="navbar-form hidden-xs"
>
<c8y-list-display-switch
(onListClassChange)="listClass = $event"
[listLength]="(microservices$ | async)?.length"
></c8y-list-display-switch>
</c8y-action-bar-item>
<div
class="c8y-empty-state text-center"
*ngIf="(microservices$ | async)?.length === 0"
>
<h1 class="c8y-icon c8y-icon-modules c8y-icon-duocolor"></h1>
<h3 translate>No microservices to display.</h3>
<p translate>Add your first microservice by clicking below.</p>
<p>
<button
class="btn btn-primary"
title="{{ 'Add microservice' | translate }}"
(click)="addMicroservice()"
>
{{ 'Add microservice' | translate }}
</button>
</p>
</div>
<div
class="card-group"
[ngClass]="listClass"
>
<div
class="page-sticky-header hidden-xs d-flex"
*ngIf="(microservices$ | async)?.length > 0"
>
<div class="card-block card-column-40">
<div class="card-appicon p-l-32 p-r-16 m-r-0 m-l-4"></div>
{{ 'Microservice' | translate }}
</div>
<div class="card-block p-0 card-column-80 m-r-40">
<div class="card-block card-column-80">{{ 'Description' | translate }}</div>
<div class="card-block card-column-20">{{ 'Type' | translate }}</div>
<div class="card-block card-column-20"></div>
</div>
</div>
<div
class="col-xs-12 col-sm-4 col-md-3"
*ngFor="let microservice of filteredMicroservices$ | async"
>
<c8y-application-card
class="d-contents"
(onAppDeleted)="loadMicroservices()"
[app]="microservice"
></c8y-application-card>
</div>
</div>
<c8y-ui-empty-state
[icon]="'search'"
[title]="'No matching microservices.' | translate"
[subtitle]="'Refine your search terms and/or the filters' | translate"
*ngIf="(microservices$ | async)?.length > 0 && (filteredMicroservices$ | async)?.length === 0"
>
<button
class="btn btn-primary"
title="{{ 'Reset filters' | translate }}"
type="button"
(click)="resetFilters()"
>
{{ 'Reset filters' | translate }}
</button>
</c8y-ui-empty-state>