File

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

Description

Component that display a Runtime application.

Example

Metadata

selector app-runtime-app
styleUrls styles.scss
templateUrl ./runtime-app.component.html

Index

Properties
Methods

Constructor

constructor(modalRef: BsModalRef, notificationService: NotificationService, grafanaService: GrafanaService)

Constructor

Parameters :
Name Type Optional Description
modalRef BsModalRef
notificationService NotificationService
grafanaService GrafanaService

Methods

cancel
cancel()

Hide the modal

Returns : void
grafanaDashboard
grafanaDashboard(runtimeApp: RuntimeApp)

Open the grafana dashboard application

Parameters :
Name Type Optional Description
runtimeApp RuntimeApp
Returns : void
grafanaInstanceDashboard
grafanaInstanceDashboard(instance: RuntimeAppInstance)

Open the grafana dashboard application

Parameters :
Name Type Optional Description
instance RuntimeAppInstance
Returns : void
open
open(runtimeApp: RuntimeApp)

Set the runtime application

Parameters :
Name Type Optional Description
runtimeApp RuntimeApp
Returns : void

Properties

grafanaEnabled
grafanaEnabled:
Default value : false

Featured Info

runtimeApp$
runtimeApp$: Observable<RuntimeApp>
Type : Observable<RuntimeApp>

Observable of Runtime Application

import { Component } from '@angular/core';
import { RuntimeApp } from '../model/runtime-app';
import { Observable, of } from 'rxjs';
import { BsModalRef } from 'ngx-bootstrap';
import { GrafanaService } from '../../shared/grafana/grafana.service';
import { map } from 'rxjs/operators';
import { RuntimeAppInstance } from '../model/runtime-app-instance';
import { NotificationService } from '../../shared/services/notification.service';

/**
 * Component that display a Runtime application.
 *
 * @author Ilayaperumal Gopinathan
 * @author Vitrac Damien
 */
@Component({
  selector: 'app-runtime-app',
  styleUrls: ['./styles.scss'],
  templateUrl: './runtime-app.component.html',
})
export class RuntimeAppComponent {

  /**
   * Observable of Runtime Application
   */
  runtimeApp$: Observable<RuntimeApp>;

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

  /**
   * Constructor
   *
   * @param modalRef
   * @param notificationService
   * @param grafanaService
   */
  constructor(private modalRef: BsModalRef,
              private notificationService: NotificationService,
              private grafanaService: GrafanaService) {
  }

  /**
   * Set the runtime application
   *
   * @param {RuntimeApp} runtimeApp
   */
  open(runtimeApp: RuntimeApp) {
    this.runtimeApp$ = this.grafanaService.isAllowed()
      .pipe(
        map((active) => {
          this.grafanaEnabled = active;
          console.log(runtimeApp);
          return runtimeApp;
        })
      );
  }

  /**
   * Hide the modal
   */
  cancel() {
    this.modalRef.hide();
  }

  /**
   * 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');
    }
  }

  /**
   * Open the grafana dashboard application
   */
  grafanaInstanceDashboard(instance: RuntimeAppInstance): void {
    let appName = '';
    let streamName = '';
    let guid = '';
    if (instance.attributes) {
      appName = instance.attributes['skipper.application.name'];
      streamName = instance.attributes['skipper.release.name'];
      guid = instance.attributes['guid'];
    }
    if (streamName && appName && guid) {
      this.grafanaService.getDashboardApplicationInstance(streamName, appName, guid).subscribe((url: string) => {
        window.open(url);
      });
    } else {
      this.notificationService.error('Sorry, we can\' open this grafana dashboard');
    }
  }

}
<div dataflowLayoutType type="full" *ngIf="runtimeApp$ | async as runtimeApp; else loading" id="page">
  <div class="modal-header">
    <h4 class="modal-title pull-left">
      Instances for app <strong>{{ runtimeApp.deploymentId }}</strong>
      <span *ngIf="grafanaEnabled" style="margin-left: 1rem;">
        <button type="button" (click)="grafanaDashboard(runtimeApp)" class="btn btn-default btn-fa"
                title="Grafana Dashboard">
          <span class="icon-custom icon-custom-grafana"></span>
          Grafana Dashboard
        </button>
      </span>
    </h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ng-template ngFor let-item [ngForOf]="runtimeApp.appInstances">
      <div class="panel">
        <div class="panel-heading">
          Instance
          <strong>{{ item.instanceId }}</strong>
          <app-runtime-state style="margin-left: 10px" [runtimeApp]="item"></app-runtime-state>

          <span *ngIf="grafanaEnabled" style="margin-left: 1rem; float: right;margin-top:-4px;">
            <button type="button" (click)="grafanaInstanceDashboard(item)" class="btn btn-default btn-fa"
                    title="Grafana Dashboard">
              <span class="icon-custom icon-custom-grafana"></span>
              Grafana Dashboard
            </button>
          </span>

        </div>
        <div class="panel-content">
          <ng-template ngFor let-item [ngForOf]="item.attributes | keyvalue">
            <div class="row row-key-value">
              <div class="col-md-8">
                <strong>
                  <dataflow-truncator [input]="item.key" trailPosition="start" trail="…"></dataflow-truncator>
                </strong>
              </div>
              <div class="col-md-16">
                <input type="text" readonly [value]="item.value" class="form-control input-sm">
              </div>
            </div>
          </ng-template>
        </div>
      </div>
    </ng-template>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
  </div>
</div>

<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""