Web SDK documentation
  1. Components
  2. MicroserviceListComponent

File

ecosystem/microservices/microservice-list.component.ts

Implements

OnInit

Metadata

selector c8y-microservice-list
templateUrl ./microservice-list.component.html

Index

Properties
Methods

Constructor

constructor(ecosystemService: EcosystemService, wizardService: WizardService)
Parameters :
Name Type Optional
ecosystemService EcosystemService No
wizardService WizardService No

Methods

addMicroservice
addMicroservice()
Returns : void
loadMicroservices
loadMicroservices()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

isMicroserviceHostingAllowed$
Type : Observable<boolean>
Default value : this.reload$.pipe( switchMap(() => this.ecosystemService.isMicroserviceHostingAllowed()), shareReplay() )
listClass
Type : string
microservices$
Type : Observable<IApplication>
Default value : this.reload$.pipe( tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getMicroservices()), tap(() => (this.reloading = false)), shareReplay() )
reload$
Type : BehaviorSubject<void>
Default value : new BehaviorSubject(null)
reloading
Type : boolean
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]="'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
      (click)="addMicroservice()"
      class="btn btn-link"
      title="{{ 'Add microservice' | translate }}"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add microservice' | translate }}
    </button>
  </c8y-action-bar-item>
</ng-container>

<!-- <c8y-help src="/users-guide/administration/#managing-microservices"></c8y-help> -->

<c8y-action-bar-item [placement]="'right'">
  <button (click)="reload$.next()" class="btn btn-link" title="{{ 'Reload' | translate }}">
    <i [ngClass]="{ 'icon-spin': reloading }" c8yIcon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</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 *ngIf="(microservices$ | async)?.length === 0" class="c8y-empty-state text-center">
  <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
      (click)="addMicroservice()"
      class="btn btn-primary"
      title="{{ 'Add microservice' | translate }}"
    >
      {{ 'Add microservice' | translate }}
    </button>
  </p>
</div>

<div [ngClass]="listClass" class="card-group">
  <div class="page-sticky-header hidden-xs flex-row" *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">
      <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 *ngFor="let microservice of microservices$ | async" class="col-xs-12 col-sm-4 col-md-3">
    <c8y-application-card
      (onAppDeleted)="loadMicroservices()"
      [app]="microservice"
      class="d-contents"
    ></c8y-application-card>
  </div>
</div>

results matching ""

    No results matching ""