src/app/runtime/runtime-app/runtime-app.component.ts
Component that display a Runtime application.
selector | app-runtime-app |
styleUrls | styles.scss |
templateUrl | ./runtime-app.component.html |
Properties |
Methods |
constructor(modalRef: BsModalRef, notificationService: NotificationService, grafanaService: GrafanaService)
|
||||||||||||||||
Constructor
Parameters :
|
cancel |
cancel()
|
Hide the modal
Returns :
void
|
grafanaDashboard | ||||||||
grafanaDashboard(runtimeApp: RuntimeApp)
|
||||||||
Open the grafana dashboard application
Parameters :
Returns :
void
|
grafanaInstanceDashboard | ||||||||
grafanaInstanceDashboard(instance: RuntimeAppInstance)
|
||||||||
Open the grafana dashboard application
Parameters :
Returns :
void
|
open | ||||||||
open(runtimeApp: RuntimeApp)
|
||||||||
Set the runtime application
Parameters :
Returns :
void
|
grafanaEnabled |
grafanaEnabled:
|
Default value : false
|
Featured Info |
runtimeApp$ |
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">×</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>