File

src/app/runtime/runtime-apps/runtime-apps.component.ts

Description

Component that loads Runtime applications.

Implements

OnInit OnDestroy

Example

Metadata

selector app-runtime-apps
templateUrl ./runtime-apps.component.html

Index

Properties
Methods

Constructor

constructor(runtimeAppsService: RuntimeAppsService, grafanaService: GrafanaService, notificationService: NotificationService, modalService: BsModalService)

Contructor

Parameters :
Name Type Optional Description
runtimeAppsService RuntimeAppsService
grafanaService GrafanaService
notificationService NotificationService
modalService BsModalService

Methods

applyAction
applyAction(action: string, item: RuntimeApp)

Apply Action (row)

Parameters :
Name Type Optional Description
action string
item RuntimeApp
Returns : void
changePaginationPager
changePaginationPager(params: )

Update event from the Paginator Pager

Parameters :
Name Type Optional Description
params
Returns : void
grafanaDashboard
grafanaDashboard(runtimeApp: RuntimeApp)

Open the grafana dashboard application

Parameters :
Name Type Optional Description
runtimeApp RuntimeApp
Returns : void
loadRuntimeApps
loadRuntimeApps()

Load runtime applications, request the dedicate service

Returns : void
ngOnDestroy
ngOnDestroy()

Destroy

Returns : void
ngOnInit
ngOnInit()

Initialize

Returns : void
runtimeActions
runtimeActions(item: RuntimeApp, index: number)

Row actions

Parameters :
Name Type Optional Description
item RuntimeApp
index number
Returns : {}
view
view(runtimeApp: RuntimeApp)

View a runtime application in a dedicate modal

Parameters :
Name Type Optional Description
runtimeApp RuntimeApp
Returns : void

Properties

grafanaEnabled
grafanaEnabled:
Default value : false

Featured Info

grafanaSubscription
grafanaSubscription: Subscription
Type : Subscription

Grafana Subscription

modal
modal: BsModalRef
Type : BsModalRef

Modal reference

pagination
pagination: PaginationParams
Type : PaginationParams

Pagination state

runtimeApps$
runtimeApps$: Observable<Page<RuntimeApp>>
Type : Observable<Page<RuntimeApp>>

Observable of a runtime applications page

import { Component, OnDestroy, OnInit } from '@angular/core';
import { RuntimeApp } from '../model/runtime-app';
import { Page } from '../../shared/model/page';
import { RuntimeAppsService } from '../runtime-apps.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
import { Observable, Subscription } from 'rxjs';
import { RuntimeAppComponent } from '../runtime-app/runtime-app.component';
import { PaginationParams } from '../../shared/components/shared.interface';
import { RuntimeAppInstance } from '../model/runtime-app-instance';
import { GrafanaService } from '../../shared/grafana/grafana.service';
import { NotificationService } from '../../shared/services/notification.service';

/**
 * Component that loads Runtime applications.
 *
 * @author Ilayaperumal Gopinathan
 * @author Vitrac Damien
 */
@Component({
  selector: 'app-runtime-apps',
  templateUrl: './runtime-apps.component.html',
})
export class RuntimeAppsComponent implements OnInit, OnDestroy {

  /**
   * Observable of a runtime applications page
   */
  runtimeApps$: Observable<Page<RuntimeApp>>;

  /**
   * Pagination state
   */
  pagination: PaginationParams = { page: 0, size: 30 };

  /**
   * Modal reference
   */
  modal: BsModalRef;

  /**
   * Featured Info
   */
  grafanaEnabled = false;

  /**
   * Grafana Subscription
   */
  grafanaSubscription: Subscription;

  /**
   * Contructor
   *
   * @param {RuntimeAppsService} runtimeAppsService
   * @param {GrafanaService} grafanaService
   * @param {NotificationService} notificationService
   * @param {BsModalService} modalService
   */
  constructor(private runtimeAppsService: RuntimeAppsService,
              private grafanaService: GrafanaService,
              private notificationService: NotificationService,
              private modalService: BsModalService) {
  }

  /**
   * Initialize
   */
  ngOnInit() {
    this.loadRuntimeApps();
  }

  /**
   * Destroy
   */
  ngOnDestroy() {
    this.grafanaSubscription.unsubscribe();
  }

  /**
   * Row actions
   */
  runtimeActions(item: RuntimeApp, index: number) {
    return [
      {
        id: 'view' + index,
        icon: 'info-circle',
        action: 'view',
        title: 'Show details',
        isDefault: true
      },
      {
        id: 'grafana' + index,
        action: 'grafana',
        icon: 'grafana',
        custom: true,
        title: 'Grafana Dashboard',
        isDefault: true,
        hidden: !this.grafanaEnabled
      },
    ];
  }

// appFeature="streamsEnabled"
  /**
   * Apply Action (row)
   * @param action
   * @param item
   */
  applyAction(action: string, item: RuntimeApp) {
    switch (action) {
      case 'view':
        this.view(item);
        break;
      case 'grafana':
        this.grafanaDashboard(item);
    }
  }

  /**
   * Load runtime applications, request the dedicate service
   */
  loadRuntimeApps() {
    this.grafanaSubscription = this.grafanaService.isAllowed().subscribe((active) => {
      this.grafanaEnabled = active;
    });
    this.runtimeApps$ = this.runtimeAppsService.getRuntimeApps(this.pagination);
  }


  /**
   * Update event from the Paginator Pager
   * @param params
   */
  changePaginationPager(params) {
    this.pagination.page = params.page;
    this.pagination.size = params.size;
    this.loadRuntimeApps();
  }

  /**
   * View a runtime application in a dedicate modal
   */
  view(runtimeApp: RuntimeApp): void {
    this.modal = this.modalService.show(RuntimeAppComponent, { class: 'modal-xl' });
    this.modal.content.open(runtimeApp);
  }

  /**
   * Open the grafana dashboard application
   */
  grafanaDashboard(runtimeApp: RuntimeApp): void {
    let appName = '';
    let streamName = '';
    if (runtimeApp.appInstances && runtimeApp.appInstances.length > 0) {
      const firstInstance: RuntimeAppInstance = runtimeApp.appInstances[0];
      if (firstInstance.attributes) {
        appName = firstInstance.attributes['skipper.application.name'];
        streamName = firstInstance.attributes['skipper.release.name'];
      }
    }
    if (streamName && appName) {
      this.grafanaService.getDashboardApplication(streamName, appName).subscribe((url: string) => {
        window.open(url);
      });
    } else {
      this.notificationService.error('Sorry, we can\' open this grafana dashboard');
    }
  }

}
<app-page dataflowLayoutType type="full" id="page">

  <app-page-head>
    <app-page-head-title><strong>Runtime applications</strong></app-page-head-title>
  </app-page-head>

  <div dataflowLayoutType type="full">
    <p>
      This section shows the list of all running apps.
    </p>

    <div *ngIf="runtimeApps$ | async as runtimeApps; else loading">

      <div class="list-bar" *ngIf="!(runtimeApps?.totalPages < 2 && runtimeApps.items.length === 0)">
        <button name="refresh" class="btn btn-default btn-fa" (click)="loadRuntimeApps()" title="Refresh" type="button">
          <span class="fa fa-refresh"></span>
          Refresh
        </button>
      </div>

      <table id="table" *ngIf="runtimeApps.items.length > 0" class="table table-actions table-hover">
        <thead>
        <tr>
          <th>App Id</th>
          <th>Status</th>
          <th># of Instances</th>
          <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <ng-template ngFor let-runtimeApp [ngForOf]="runtimeApps.items | paginate: runtimeApps.getPaginationInstance()">
          <tr class="align-middle">
            <td>
              <a style="cursor: pointer" (click)="view(runtimeApp)">{{ runtimeApp.deploymentId }}</a>
            </td>
            <td>
              <app-runtime-state [runtimeApp]="runtimeApp"></app-runtime-state>
            </td>
            <td>
              {{ runtimeApp.instances._embedded.appInstanceStatusResourceList.length }}
              <span *ngIf="runtimeApp.instances._embedded.appInstanceStatusResourceList.length == 1">
              instance
            </span>
              <span *ngIf="runtimeApp.instances._embedded.appInstanceStatusResourceList.length > 1">
              instances
            </span>
            </td>
            <td class="table-actions" width="10px" nowrap="">
              <app-list-row-actions [item]="runtimeApp" (action)="applyAction($event.action, $event.args)"
                                    [actions]="runtimeActions(runtimeApp, i)"></app-list-row-actions>
            </td>
          </tr>
        </ng-template>
        </tbody>
      </table>

      <app-list-pagination [page]="runtimeApps" [params]="pagination" (changed)="changePaginationPager($event)"
                           [item]="'application runtime'" [items]="'application runtimes'">
      </app-list-pagination>

      <app-list-empty [page]="runtimeApps" [filters]="[]">
        <p>There are <strong>no running applications</strong> currently available.</p>
        <p>
          You can <a (click)="loadRuntimeApps()">Refresh</a> the page.
        </p>
      </app-list-empty>

    </div>
  </div>
  <ng-template #loading>
    <app-loader></app-loader>
  </ng-template>

</app-page>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""