You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/02 18:46:18 UTC
[streampipes] 03/06: add linting to app-asset-monitoring module (#877)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch chore/ui-linting-a
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 81e0dce1b28ef5ebd279a345c01fe82749709d1d
Author: bossenti <bo...@posteo.de>
AuthorDate: Mon Jan 2 19:34:43 2023 +0100
add linting to app-asset-monitoring module (#877)
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
.../app-asset-monitoring.component.css | 4 +-
.../app-asset-monitoring.component.html | 34 +++--
.../app-asset-monitoring.component.ts | 14 +--
.../app-asset-monitoring.module.ts | 67 +++++-----
.../app-asset-monitoring.routes.ts | 8 +-
.../create-asset/create-asset.component.css | 5 +-
.../create-asset/create-asset.component.html | 58 ++++++---
.../create-asset/create-asset.component.ts | 121 +++++++++++-------
.../dashboard-overview.component.css | 5 +-
.../dashboard-overview.component.html | 63 +++++++---
.../dashboard-overview.component.ts | 11 +-
.../components/view-asset/view-asset.component.css | 4 +-
.../view-asset/view-asset.component.html | 21 +++-
.../components/view-asset/view-asset.component.ts | 75 +++++++----
.../dialog/add-link/add-link-dialog.component.html | 35 ++++--
.../dialog/add-link/add-link-dialog.component.scss | 2 +-
.../dialog/add-link/add-link-dialog.component.ts | 61 +++++----
.../add-pipeline-dialog.component.html | 137 +++++++++++++++------
.../add-pipeline-dialog.component.scss | 8 +-
.../add-pipeline/add-pipeline-dialog.component.ts | 92 ++++++++------
.../save-dashboard-dialog.component.html | 33 +++--
.../save-dashboard-dialog.component.scss | 4 +-
.../save-dashboard-dialog.component.ts | 17 ++-
.../model/canvas-attributes.model.ts | 3 +-
.../model/canvas-configuration.model.ts | 4 +-
.../model/canvas-element.model.ts | 4 +-
.../model/dashboard-configuration.model.ts | 1 -
.../app/app-asset-monitoring/model/test-data.json | 12 +-
.../app-asset-monitoring/services/rest.service.ts | 91 +++++++-------
.../app-asset-monitoring/services/shape.service.ts | 82 ++++++++----
32 files changed, 667 insertions(+), 411 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index 4d01bd8dc..2bdb1038c 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -22,7 +22,6 @@ projects
src/app/_enums
src/app/_guards
src/app/_models
-src/app/app-asset-monitoring
src/app/app-overview
src/app/assets
src/app/configuration
diff --git a/ui/.prettierignore b/ui/.prettierignore
index 3335f04e0..5d8fb6322 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -22,7 +22,6 @@ projects
src/app/_enums
src/app/_guards
src/app/_models
-src/app/app-asset-monitoring
src/app/app-overview
src/app/assets
src/app/configuration
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.css b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.css
index e9af73709..618e5b049 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.css
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.css
@@ -17,9 +17,9 @@
*/
.page-container-padding {
- width:100%;
+ width: 100%;
}
.page-container-padding-inner {
padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
index 80269581c..4ec241b38 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
@@ -18,17 +18,35 @@
<sp-basic-view showBackLink="true" [backLinkTarget]="['apps']">
<ng-container nav>
- <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)" color="accent">
- <mat-tab label="Asset Dashboards">
- </mat-tab>
- <mat-tab id="all-adapters" label="New Asset Dashboard">
- </mat-tab>
+ <mat-tab-group
+ [selectedIndex]="selectedIndex"
+ (selectedIndexChange)="selectedIndexChange($event)"
+ color="accent"
+ >
+ <mat-tab label="Asset Dashboards"> </mat-tab>
+ <mat-tab id="all-adapters" label="New Asset Dashboard"> </mat-tab>
</mat-tab-group>
</ng-container>
<div fxLayout="column" fxFlex="100">
- <sp-asset-dashboard-overview *ngIf="selectedIndex == 0 && !dashboardSelected" fxFlex="100" (selectedDashboard)="openDashboard($event)" (createDashboard)="selectedIndex = 1"></sp-asset-dashboard-overview>
- <sp-view-asset fxFlex="100" *ngIf="selectedIndex == 0 && dashboardSelected" [dashboardConfig]="selectedDashboard" (dashboardClosed)="closeDashboard($event)" (editDashboardEmitter)="editDashboard($event)"></sp-view-asset>
- <sp-create-asset *ngIf="selectedIndex == 1" fxFlex="100" (dashboardClosed)="closeDashboard($event)" [dashboardConfig]="selectedDashboard"></sp-create-asset>
+ <sp-asset-dashboard-overview
+ *ngIf="selectedIndex === 0 && !dashboardSelected"
+ fxFlex="100"
+ (selectedDashboard)="openDashboard($event)"
+ (createDashboard)="selectedIndex = 1"
+ ></sp-asset-dashboard-overview>
+ <sp-view-asset
+ fxFlex="100"
+ *ngIf="selectedIndex === 0 && dashboardSelected"
+ [dashboardConfig]="selectedDashboard"
+ (dashboardClosed)="closeDashboard($event)"
+ (editDashboardEmitter)="editDashboard($event)"
+ ></sp-view-asset>
+ <sp-create-asset
+ *ngIf="selectedIndex === 1"
+ fxFlex="100"
+ (dashboardClosed)="closeDashboard($event)"
+ [dashboardConfig]="selectedDashboard"
+ ></sp-create-asset>
</div>
</sp-basic-view>
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.ts
index 3d9542ada..988ffc3ec 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.ts
@@ -25,22 +25,21 @@ import { SpAppAssetMonitoringRoutes } from './app-asset-monitoring.routes';
@Component({
selector: 'sp-app-asset-monitoring',
templateUrl: './app-asset-monitoring.component.html',
- styleUrls: ['./app-asset-monitoring.component.css']
+ styleUrls: ['./app-asset-monitoring.component.css'],
})
export class AppAssetMonitoringComponent implements OnInit {
-
-
selectedIndex = 0;
dashboardSelected = false;
selectedDashboard: DashboardConfiguration;
@Output() appOpened = new EventEmitter<boolean>();
- constructor(private breadcrumbService: SpBreadcrumbService) {
-
- }
+ constructor(private breadcrumbService: SpBreadcrumbService) {}
ngOnInit() {
- this.breadcrumbService.updateBreadcrumb([SpAppRoutes.BASE, this.breadcrumbService.removeLink(SpAppAssetMonitoringRoutes.BASE)]);
+ this.breadcrumbService.updateBreadcrumb([
+ SpAppRoutes.BASE,
+ this.breadcrumbService.removeLink(SpAppAssetMonitoringRoutes.BASE),
+ ]);
this.appOpened.emit(true);
}
@@ -62,5 +61,4 @@ export class AppAssetMonitoringComponent implements OnInit {
this.selectedDashboard = dashboardConfig;
this.selectedIndex = 1;
}
-
}
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index 215705e01..1515e1074 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -43,41 +43,34 @@ import { RouterModule } from '@angular/router';
import { SharedUiModule } from '@streampipes/shared-ui';
@NgModule({
- imports: [
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- MatGridListModule,
- MatInputModule,
- MatFormFieldModule,
- FormsModule,
- ColorPickerModule,
- DashboardModule,
- RouterModule.forChild([
- {
- path: '',
- component: AppAssetMonitoringComponent
- }
- ]),
- SharedUiModule
- ],
- declarations: [
- AppAssetMonitoringComponent,
- CreateAssetComponent,
- ViewAssetComponent,
- AddLinkDialogComponent,
- AddPipelineDialogComponent,
- SaveDashboardDialogComponent,
- AssetDashboardOverviewComponent
- ],
- providers: [
- RestService,
- ShapeService,
- ElementIconText
- ],
- exports: [
- AppAssetMonitoringComponent
- ]
+ imports: [
+ CommonModule,
+ FlexLayoutModule,
+ CustomMaterialModule,
+ MatGridListModule,
+ MatInputModule,
+ MatFormFieldModule,
+ FormsModule,
+ ColorPickerModule,
+ DashboardModule,
+ RouterModule.forChild([
+ {
+ path: '',
+ component: AppAssetMonitoringComponent,
+ },
+ ]),
+ SharedUiModule,
+ ],
+ declarations: [
+ AppAssetMonitoringComponent,
+ CreateAssetComponent,
+ ViewAssetComponent,
+ AddLinkDialogComponent,
+ AddPipelineDialogComponent,
+ SaveDashboardDialogComponent,
+ AssetDashboardOverviewComponent,
+ ],
+ providers: [RestService, ShapeService, ElementIconText],
+ exports: [AppAssetMonitoringComponent],
})
-export class AppAssetMonitoringModule {
-}
+export class AppAssetMonitoringModule {}
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.routes.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.routes.ts
index 13b9f4c5e..16d3facbb 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.routes.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.routes.ts
@@ -16,10 +16,12 @@
*
*/
-import { SpBreadcrumbItem, } from '@streampipes/shared-ui';
+import { SpBreadcrumbItem } from '@streampipes/shared-ui';
import { SpAppRoutes } from '../app-overview/apps.routes';
export class SpAppAssetMonitoringRoutes {
-
- static BASE: SpBreadcrumbItem = {label: 'Asset Monitoring', link: [SpAppRoutes.APP_BASE_LINK, 'asset-monitoring']};
+ static BASE: SpBreadcrumbItem = {
+ label: 'Asset Monitoring',
+ link: [SpAppRoutes.APP_BASE_LINK, 'asset-monitoring'],
+ };
}
diff --git a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.css b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.css
index 1ddbbd06c..457e5201c 100644
--- a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.css
+++ b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.css
@@ -21,10 +21,9 @@
}
.asset-configuration-board-canvas {
- width:1400px;
- height:900px;
+ width: 1400px;
+ height: 900px;
border: 2px solid rgb(27, 20, 100);
margin: 20px auto;
background: white;
-
}
diff --git a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.html b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.html
index 1e468112f..0705e1cf1 100644
--- a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.html
+++ b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.html
@@ -17,44 +17,72 @@
-->
<div fxLayout="column" fxFlex="100">
- <input type="file" (change)="handleFileInput($event)" accept="image/*" #file style="display:none;">
+ <input
+ type="file"
+ (change)="handleFileInput($event)"
+ accept="image/*"
+ #file
+ style="display: none"
+ />
<div class="sp-tab-bg sp-blue-bg page-container-nav">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<div>
- <button color="accent" class="mat-basic" mat-button (click)="prepareDashboard()" type="submit"
- [disabled]="!backgroundImagePresent || !measurementPresent">
+ <button
+ color="accent"
+ class="mat-basic"
+ mat-button
+ (click)="prepareDashboard()"
+ type="submit"
+ [disabled]="!backgroundImagePresent || !measurementPresent"
+ >
<mat-icon>save</mat-icon> Save
</button>
</div>
<div>
- <button color="accent" mat-button (click)="file.click()" type="submit"
- [disabled]="backgroundImagePresent">
+ <button
+ color="accent"
+ mat-button
+ (click)="file.click()"
+ type="submit"
+ [disabled]="backgroundImagePresent"
+ >
<i class="material-icons">file_upload</i> Add image
</button>
</div>
<div>
- <button color="accent" mat-button (click)="openAddPipelineDialog()">
+ <button
+ color="accent"
+ mat-button
+ (click)="openAddPipelineDialog()"
+ >
<i class="material-icons">add</i> Add value
</button>
</div>
<div>
<button color="accent" mat-button (click)="openAddLinkDialog()">
- <span fxLayoutAlign="start center"><i class="material-icons">link</i> Add link</span>
+ <span fxLayoutAlign="start center"
+ ><i class="material-icons">link</i> Add link</span
+ >
</button>
</div>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button color="accent" mat-button mat-icon-button (click)="clearCanvas()" matTooltip="Clear">
- <i class="material-icons">
- clear
- </i>
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ (click)="clearCanvas()"
+ matTooltip="Clear"
+ >
+ <i class="material-icons"> clear </i>
</button>
</div>
</div>
</div>
<div id="outerAssemblyArea" class="asset-configuration-board-panel">
- <div id="asset-configuration-board-canvas" class="asset-configuration-board-canvas"
- fxLayoutAlign="center center">
-
- </div>
+ <div
+ id="asset-configuration-board-canvas"
+ class="asset-configuration-board-canvas"
+ fxLayoutAlign="center center"
+ ></div>
</div>
</div>
diff --git a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
index b53ce8e80..a7e8f6ca8 100644
--- a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
@@ -16,7 +16,14 @@
*
*/
-import { AfterViewInit, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ EventEmitter,
+ HostListener,
+ Input,
+ Output,
+} from '@angular/core';
import Konva from 'konva';
import { AddPipelineDialogComponent } from '../../dialog/add-pipeline/add-pipeline-dialog.component';
import { MatDialog } from '@angular/material/dialog';
@@ -37,10 +44,9 @@ declare const window: Window;
@Component({
selector: 'sp-create-asset',
templateUrl: './create-asset.component.html',
- styleUrls: ['./create-asset.component.css']
+ styleUrls: ['./create-asset.component.css'],
})
export class CreateAssetComponent implements AfterViewInit {
-
fileName: any;
selectedUploadFile: File;
@@ -64,11 +70,12 @@ export class CreateAssetComponent implements AfterViewInit {
keyboardListenerActive = true;
- constructor(public dialog: MatDialog,
- public shapeService: ShapeService,
- private dialogService: DialogService,
- private restService: RestService) {
- }
+ constructor(
+ public dialog: MatDialog,
+ public shapeService: ShapeService,
+ private dialogService: DialogService,
+ private restService: RestService,
+ ) {}
ngAfterViewInit() {
const width = 1400;
@@ -77,23 +84,26 @@ export class CreateAssetComponent implements AfterViewInit {
this.mainCanvasStage = new Konva.Stage({
container: 'asset-configuration-board-canvas',
width,
- height
+ height,
});
this.initLayers();
} else {
this.editMode = true;
this.makeEditable();
- this.mainCanvasStage = Konva.Node.create(this.dashboardConfig, 'asset-configuration-board-canvas');
+ this.mainCanvasStage = Konva.Node.create(
+ this.dashboardConfig,
+ 'asset-configuration-board-canvas',
+ );
this.mainCanvasStage.draw();
this.backgroundImageLayer = this.mainCanvasStage.children[0];
this.mainLayer = this.mainCanvasStage.children[1];
const groups = this.mainLayer.getChildren().find('Group');
groups.forEach(g => {
- const id = this.makeId();
- g.id(id);
- g.setDraggable(true);
- this.addTransformerToShape(id, g);
+ const id = this.makeId();
+ g.id(id);
+ g.setDraggable(true);
+ this.addTransformerToShape(id, g);
});
this.makeClickable();
this.showImage();
@@ -140,9 +150,15 @@ export class CreateAssetComponent implements AfterViewInit {
const image = new window.Image();
image.onload = () => {
- const desiredWidth = Math.min(this.mainCanvasStage.width(), image.width);
+ const desiredWidth = Math.min(
+ this.mainCanvasStage.width(),
+ image.width,
+ );
const aspectRatio = image.width / image.height;
- const desiredHeight = image.width > image.height ? desiredWidth / aspectRatio : desiredWidth * aspectRatio;
+ const desiredHeight =
+ image.width > image.height
+ ? desiredWidth / aspectRatio
+ : desiredWidth * aspectRatio;
const imageCanvas = new Konva.Image({
image,
width: desiredWidth,
@@ -150,7 +166,7 @@ export class CreateAssetComponent implements AfterViewInit {
x: 0,
y: 0,
draggable: true,
- id: this.IMAGE_ID
+ id: this.IMAGE_ID,
});
this.addImageTransformer(imageCanvas);
@@ -158,11 +174,10 @@ export class CreateAssetComponent implements AfterViewInit {
};
const reader = new FileReader();
- reader.onload = e => image.src = reader.result;
+ reader.onload = e => (image.src = reader.result);
reader.readAsDataURL(this.selectedUploadFile);
event.target.value = null;
-
}
addImageTransformer(imageCanvas: any) {
@@ -178,17 +193,20 @@ export class CreateAssetComponent implements AfterViewInit {
}
prepareDashboard() {
- const dialogRef = this.dialogService.open(SaveDashboardDialogComponent, {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: 'Save asset dashboard',
- width: '50vw',
- data: {
- dashboardCanvas: this.mainCanvasStage as any,
- file: this.selectedUploadFile,
- editMode: this.editMode,
- dashboardConfig: this.dashboardConfig
- }
- });
+ const dialogRef = this.dialogService.open(
+ SaveDashboardDialogComponent,
+ {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Save asset dashboard',
+ width: '50vw',
+ data: {
+ dashboardCanvas: this.mainCanvasStage as any,
+ file: this.selectedUploadFile,
+ editMode: this.editMode,
+ dashboardConfig: this.dashboardConfig,
+ },
+ },
+ );
dialogRef.afterClosed().subscribe(closed => {
this.dashboardClosed.emit(true);
});
@@ -208,13 +226,13 @@ export class CreateAssetComponent implements AfterViewInit {
panelType: PanelType.SLIDE_IN_PANEL,
title: 'Add visualization',
width: '50vw',
- data: {
- }
+ data: {},
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
- const visGroup = this.shapeService.makeNewMeasurementShape(result);
+ const visGroup =
+ this.shapeService.makeNewMeasurementShape(result);
this.addNewVisulizationItem(visGroup);
this.measurementPresent = true;
this.mainLayer.draw();
@@ -229,8 +247,7 @@ export class CreateAssetComponent implements AfterViewInit {
panelType: PanelType.SLIDE_IN_PANEL,
title: 'Add link',
width: '50vw',
- data: {
- }
+ data: {},
});
dialogRef.afterClosed().subscribe(result => {
@@ -248,7 +265,9 @@ export class CreateAssetComponent implements AfterViewInit {
const delta = 4;
if (event.code === 'Delete') {
const id = this.currentlySelectedShape.id();
- this.mainCanvasStage.findOne('#' + id + '-transformer').destroy();
+ this.mainCanvasStage
+ .findOne('#' + id + '-transformer')
+ .destroy();
this.currentlySelectedShape.destroy();
if (id === this.IMAGE_ID) {
this.backgroundImagePresent = false;
@@ -259,13 +278,21 @@ export class CreateAssetComponent implements AfterViewInit {
}
}
} else if (event.code === 'ArrowLeft') {
- this.currentlySelectedShape.x(this.currentlySelectedShape.x() - delta);
+ this.currentlySelectedShape.x(
+ this.currentlySelectedShape.x() - delta,
+ );
} else if (event.code === 'ArrowRight') {
- this.currentlySelectedShape.x(this.currentlySelectedShape.x() + delta);
+ this.currentlySelectedShape.x(
+ this.currentlySelectedShape.x() + delta,
+ );
} else if (event.code === 'ArrowDown') {
- this.currentlySelectedShape.y(this.currentlySelectedShape.y() + delta);
+ this.currentlySelectedShape.y(
+ this.currentlySelectedShape.y() + delta,
+ );
} else if (event.code === 'ArrowUp') {
- this.currentlySelectedShape.y(this.currentlySelectedShape.y() - delta);
+ this.currentlySelectedShape.y(
+ this.currentlySelectedShape.y() - delta,
+ );
}
this.backgroundImageLayer.draw();
this.mainLayer.draw();
@@ -295,16 +322,19 @@ export class CreateAssetComponent implements AfterViewInit {
borderStroke: 'green',
borderDash: [3, 3],
keepRatio: true,
- id: id + '-transformer'
+ id: id + '-transformer',
});
}
makeId() {
let text = '';
- const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ const possible =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 6; i++) {
- text += possible.charAt(Math.floor(Math.random() * possible.length));
+ text += possible.charAt(
+ Math.floor(Math.random() * possible.length),
+ );
}
return text;
@@ -312,12 +342,13 @@ export class CreateAssetComponent implements AfterViewInit {
showImage() {
const image = new window.Image();
- image.src = this.restService.getImageUrl(this.dashboardConfig.imageInfo.imageName);
+ image.src = this.restService.getImageUrl(
+ this.dashboardConfig.imageInfo.imageName,
+ );
this.dashboardConfig.imageInfo.image = image;
image.onload = () => {
const imageCanvas = new Konva.Image(this.dashboardConfig.imageInfo);
this.addImageTransformer(imageCanvas);
};
}
-
}
diff --git a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.css b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.css
index 213288b84..45381ca82 100644
--- a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.css
+++ b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.css
@@ -21,6 +21,7 @@
}
mat-card {
- box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
+ 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
margin: 10px;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
index 90b70374c..6724e0a4d 100644
--- a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
+++ b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
@@ -19,30 +19,65 @@
<div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
<h1>Asset Dashboards</h1>
<mat-grid-list
- [cols]="3" [rowHeight]="500"
- [gutterSize]="10" fxFlex="100" *ngIf="dashboardConfigs.length > 0">
-
- <mat-grid-tile class="gray" *ngFor="let dashboardConfig of dashboardConfigs">
-
+ [cols]="3"
+ [rowHeight]="500"
+ [gutterSize]="10"
+ fxFlex="100"
+ *ngIf="dashboardConfigs.length > 0"
+ >
+ <mat-grid-tile
+ class="gray"
+ *ngFor="let dashboardConfig of dashboardConfigs"
+ >
<mat-card class="example-card">
<mat-card-header>
- <mat-card-title> {{dashboardConfig.dashboardName}}</mat-card-title>
- <mat-card-subtitle>{{dashboardConfig.dashboardDescription}}</mat-card-subtitle>
+ <mat-card-title>
+ {{ dashboardConfig.dashboardName }}</mat-card-title
+ >
+ <mat-card-subtitle>{{
+ dashboardConfig.dashboardDescription
+ }}</mat-card-subtitle>
</mat-card-header>
- <img mat-card-image [src]="getImageUrl(dashboardConfig)">
+ <img mat-card-image [src]="getImageUrl(dashboardConfig)" />
<mat-card-content>
- <p>
- </p>
+ <p></p>
</mat-card-content>
<mat-card-actions>
- <button mat-button mat-raised-button color="accent" (click)="openDashboard(dashboardConfig)">Open Dashboard</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="deleteDashboard(dashboardConfig.dashboardId)">Delete</button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="openDashboard(dashboardConfig)"
+ >
+ Open Dashboard
+ </button>
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="deleteDashboard(dashboardConfig.dashboardId)"
+ >
+ Delete
+ </button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
- <div *ngIf="dashboardConfigs.length == 0" fxLayoutAlign="center center" fxFlex="100" fxLayout="column">
+ <div
+ *ngIf="dashboardConfigs.length === 0"
+ fxLayoutAlign="center center"
+ fxFlex="100"
+ fxLayout="column"
+ >
<h4>No asset dashboards available</h4>
- <button mat-button mat-raised-button color="accent" style="margin-top: 10px;" (click)="createDashboard.emit()">Create new</button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ style="margin-top: 10px"
+ (click)="createDashboard.emit()"
+ >
+ Create new
+ </button>
</div>
</div>
diff --git a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
index 65e7a9c20..6671e968a 100644
--- a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
@@ -23,25 +23,24 @@ import { DashboardConfiguration } from '../../model/dashboard-configuration.mode
@Component({
selector: 'sp-asset-dashboard-overview',
templateUrl: './dashboard-overview.component.html',
- styleUrls: ['./dashboard-overview.component.css']
+ styleUrls: ['./dashboard-overview.component.css'],
})
export class AssetDashboardOverviewComponent implements OnInit {
-
@Output() selectedDashboard = new EventEmitter<DashboardConfiguration>();
@Output() createDashboard = new EventEmitter<void>();
dashboardConfigs: DashboardConfiguration[] = [];
- constructor(private restService: RestService) {
-
- }
+ constructor(private restService: RestService) {}
ngOnInit() {
this.getDashboards();
}
getImageUrl(dashboardConfig: DashboardConfiguration) {
- return this.restService.getImageUrl(dashboardConfig.imageInfo.imageName);
+ return this.restService.getImageUrl(
+ dashboardConfig.imageInfo.imageName,
+ );
}
getDashboards() {
diff --git a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.css b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.css
index 0fe1fc6a1..39b9d68bb 100644
--- a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.css
+++ b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.css
@@ -17,8 +17,8 @@
*/
.asset-view-canvas {
- width:1400px;
- height:900px;
+ width: 1400px;
+ height: 900px;
border: 2px solid rgb(27, 20, 100);
margin: 20px auto;
}
diff --git a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.html b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.html
index df343f24d..e9187a6c3 100644
--- a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.html
+++ b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.html
@@ -19,11 +19,26 @@
<div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
<div fxLayout="row">
<div fxLayout="fill">
- <h1>{{dashboardConfig.dashboardName}}</h1>
+ <h1>{{ dashboardConfig.dashboardName }}</h1>
</div>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-button mat-raised-button color="accent" (click)="editDashboard()" class="mr-10">Edit dashboard</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="closeDashboard()">Close dashboard</button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="editDashboard()"
+ class="mr-10"
+ >
+ Edit dashboard
+ </button>
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="closeDashboard()"
+ >
+ Close dashboard
+ </button>
</div>
</div>
<div id="container" class="asset-view-canvas"></div>
diff --git a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
index ca435e336..df05a23d7 100644
--- a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
@@ -16,12 +16,24 @@
*
*/
-import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ EventEmitter,
+ Input,
+ OnDestroy,
+ Output,
+} from '@angular/core';
import Konva from 'konva';
import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
import { RestService } from '../../services/rest.service';
-import { DatalakeQueryParameterBuilder, DatalakeRestService, SpQueryResult, DashboardService } from '@streampipes/platform-services';
+import {
+ DatalakeQueryParameterBuilder,
+ DatalakeRestService,
+ SpQueryResult,
+ DashboardService,
+} from '@streampipes/platform-services';
import { Subscription, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@@ -34,10 +46,9 @@ declare const window: Window;
@Component({
selector: 'sp-view-asset',
templateUrl: './view-asset.component.html',
- styleUrls: ['./view-asset.component.css']
+ styleUrls: ['./view-asset.component.css'],
})
export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
-
@Input() dashboardConfig: DashboardConfiguration;
@Output() dashboardClosed = new EventEmitter<boolean>();
@Output() editDashboardEmitter = new EventEmitter<DashboardConfiguration>();
@@ -48,17 +59,17 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
subscriptions: Subscription[] = [];
- constructor(private restService: RestService,
- private dashboardService: DashboardService,
- private dataLakeRestService: DatalakeRestService) {
-
- }
-
- ngOnInit() {
- }
+ constructor(
+ private restService: RestService,
+ private dashboardService: DashboardService,
+ private dataLakeRestService: DatalakeRestService,
+ ) {}
ngAfterViewInit() {
- this.mainCanvasStage = Konva.Node.create(this.dashboardConfig, 'container');
+ this.mainCanvasStage = Konva.Node.create(
+ this.dashboardConfig,
+ 'container',
+ );
this.mainCanvasStage.draw();
this.backgroundImageLayer = new Konva.Layer();
@@ -66,9 +77,9 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
this.mainCanvasStage.add(this.backgroundImageLayer);
const labels = this.mainCanvasStage.find('Label');
labels.each(label => {
- label.on('mouseenter', () => this.onMouseEnter(label));
+ label.on('mouseenter', () => this.onMouseEnter(label));
label.on('mouseleave', () => this.onMouseLeave(label));
- label.on('click', () => this.onLinkClicked(label));
+ label.on('click', () => this.onLinkClicked(label));
});
this.backgroundImageLayer.moveToBottom();
@@ -89,7 +100,9 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
onLinkClicked(label) {
const href = label.children[0].attrs.hyperlink;
const newWindow = label.children[0].attrs.newWindow;
- newWindow ? (window as any).open(href) : (window as any).location.href = href;
+ newWindow
+ ? (window as any).open(href)
+ : ((window as any).location.href = href);
}
updateMeasurements() {
@@ -97,18 +110,27 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
dynamicShapes.forEach(ds => {
const monitoredField = ds.text();
const measurement = ds.attrs.dataLakeMeasure;
- const subscription = timer(0, 2000).pipe(
- switchMap(() => this.dataLakeRestService.getData(measurement, this.buildQuery())))
- .subscribe(queryResult => {
- this.handleResponse(ds, monitoredField, queryResult);
- });
+ const subscription = timer(0, 2000)
+ .pipe(
+ switchMap(() =>
+ this.dataLakeRestService.getData(
+ measurement,
+ this.buildQuery(),
+ ),
+ ),
+ )
+ .subscribe(queryResult => {
+ this.handleResponse(ds, monitoredField, queryResult);
+ });
this.subscriptions.push(subscription);
});
}
- handleResponse(ds: any,
- monitoredField: string,
- queryResult: SpQueryResult): void {
+ handleResponse(
+ ds: any,
+ monitoredField: string,
+ queryResult: SpQueryResult,
+ ): void {
if (queryResult.total > 0) {
if (queryResult.allDataSeries.length === 1) {
const series = queryResult.allDataSeries[0];
@@ -132,7 +154,9 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
showImage() {
const image = new window.Image();
- image.src = this.restService.getImageUrl(this.dashboardConfig.imageInfo.imageName);
+ image.src = this.restService.getImageUrl(
+ this.dashboardConfig.imageInfo.imageName,
+ );
this.dashboardConfig.imageInfo.image = image;
image.onload = () => {
const imageCanvas = new Konva.Image(this.dashboardConfig.imageInfo);
@@ -152,5 +176,4 @@ export class ViewAssetComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnDestroy(): void {
this.subscriptions.forEach(s => s.unsubscribe());
}
-
}
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.html b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.html
index 0bf9e0a02..b2a3919fb 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.html
+++ b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.html
@@ -23,27 +23,47 @@
<div class="dialog-margin-bottom" fxLayout="column">
<mat-form-field class="dialog-margin-bottom" color="accent">
<mat-label>Label</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="linkLabel">
- <mat-hint>The label that should be displayed as link</mat-hint>
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="linkLabel"
+ />
+ <mat-hint
+ >The label that should be displayed as link</mat-hint
+ >
</mat-form-field>
<mat-form-field color="accent">
<mat-label>Target</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="linkHref">
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="linkHref"
+ />
<mat-hint>The target URL of the link</mat-hint>
</mat-form-field>
<mat-form-field color="accent">
<mat-label>Font Size</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="labelFontSize">
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="labelFontSize"
+ />
<mat-hint>Font Size</mat-hint>
</mat-form-field>
- <mat-checkbox [(ngModel)]="newWindow">Open in new window</mat-checkbox>
+ <mat-checkbox [(ngModel)]="newWindow"
+ >Open in new window</mat-checkbox
+ >
</div>
-
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-button mat-raised-button class="mat-basic mr-10" (click)="cancel()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="cancel()"
+ >
Cancel
</button>
<button mat-button mat-raised-button color="accent" (click)="add()">
@@ -51,4 +71,3 @@
</button>
</div>
</div>
-
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.scss b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.scss
index 974d8b116..0a5104be4 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.scss
+++ b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.scss
@@ -19,5 +19,5 @@
@import '../../../../scss/sp/sp-dialog.scss';
.mr-10 {
- margin-right: 10px;
+ margin-right: 10px;
}
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
index faa1e44de..f7e6962cb 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
@@ -16,43 +16,40 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
import { ShapeService } from '../../services/shape.service';
import { HyperlinkConfig } from '../../model/selected-visualization-data.model';
@Component({
- selector: 'sp-add-link-dialog-component',
- templateUrl: 'add-link-dialog.component.html',
- styleUrls: ['./add-link-dialog.component.scss'],
+ selector: 'sp-add-link-dialog-component',
+ templateUrl: 'add-link-dialog.component.html',
+ styleUrls: ['./add-link-dialog.component.scss'],
})
export class AddLinkDialogComponent implements OnInit {
-
- linkLabel: string;
- linkHref: string;
- labelFontSize = 12;
- newWindow = false;
-
- constructor(private dialogRef: DialogRef<AddLinkDialogComponent>,
- private shapeService: ShapeService) {}
-
- ngOnInit(): void {
- }
-
- cancel() {
- this.dialogRef.close();
- }
-
- add() {
- const hyperlinkConfig: HyperlinkConfig = {
- linkLabel: this.linkLabel,
- linkHref: this.linkHref,
- labelFontSize: this.labelFontSize,
- newWindow: this.newWindow
- };
-
- const group = this.shapeService.makeNewHyperlinkGroup(hyperlinkConfig);
- this.dialogRef.close(group);
- }
-
+ linkLabel: string;
+ linkHref: string;
+ labelFontSize = 12;
+ newWindow = false;
+
+ constructor(
+ private dialogRef: DialogRef<AddLinkDialogComponent>,
+ private shapeService: ShapeService,
+ ) {}
+
+ cancel() {
+ this.dialogRef.close();
+ }
+
+ add() {
+ const hyperlinkConfig: HyperlinkConfig = {
+ linkLabel: this.linkLabel,
+ linkHref: this.linkHref,
+ labelFontSize: this.labelFontSize,
+ newWindow: this.newWindow,
+ };
+
+ const group = this.shapeService.makeNewHyperlinkGroup(hyperlinkConfig);
+ this.dialogRef.close(group);
+ }
}
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.html b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.html
index 4df8b4715..2f45683cf 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.html
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.html
@@ -19,80 +19,138 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div fxFlex="100">
- <div fxFlex="100" style="margin:5px;width:100%">
- <div *ngIf="page == 'select-pipeline'">
- <div *ngIf="page == 'select-pipeline'">
- <h4>{{pages[0].description}}</h4>
+ <div fxFlex="100" style="margin: 5px; width: 100%">
+ <div *ngIf="page === 'select-pipeline'">
+ <div *ngIf="page === 'select-pipeline'">
+ <h4>{{ pages[0].description }}</h4>
<mat-list>
- <mat-list-item *ngFor="let pipeline of visualizablePipelines"
- (click)="selectPipeline(pipeline)" class="list-item">
- <div mat-list-avatar
- class="pipeline-avatar sp-accent-bg">{{iconText(pipeline.pipelineName)}}
+ <mat-list-item
+ *ngFor="let pipeline of visualizablePipelines"
+ (click)="selectPipeline(pipeline)"
+ class="list-item"
+ >
+ <div
+ mat-list-avatar
+ class="pipeline-avatar sp-accent-bg"
+ >
+ {{ iconText(pipeline.pipelineName) }}
</div>
- <h4 mat-line>{{pipeline.pipelineName}}</h4>
- <p mat-line>{{pipeline.measureName}} </p>
+ <h4 mat-line>{{ pipeline.pipelineName }}</h4>
+ <p mat-line>{{ pipeline.measureName }}</p>
</mat-list-item>
</mat-list>
</div>
</div>
<!-- Select Type -->
- <div *ngIf="page == 'select-measurement'" fxLayout="column">
- <h4>{{pages[1].description}}</h4>
+ <div *ngIf="page === 'select-measurement'" fxLayout="column">
+ <h4>{{ pages[1].description }}</h4>
<div fxFlex="100" fxLayout="column">
- <mat-radio-group fxLayout="column" class="example-radio-group"
- [(ngModel)]="selectedMeasurement">
- <mat-radio-button class="example-radio-button"
- *ngFor="let prop of selectedVisualization.eventSchema.eventProperties"
- [value]="prop.runtimeName">
- {{prop.runtimeName}}
+ <mat-radio-group
+ fxLayout="column"
+ class="example-radio-group"
+ [(ngModel)]="selectedMeasurement"
+ >
+ <mat-radio-button
+ class="example-radio-button"
+ *ngFor="
+ let prop of selectedVisualization
+ .eventSchema.eventProperties
+ "
+ [value]="prop.runtimeName"
+ >
+ {{ prop.runtimeName }}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<!-- Select Scheme -->
- <div *ngIf="page == 'select-label'" fxLayout="column">
- <b><h4>{{pages[2].description}}</h4></b>
+ <div *ngIf="page === 'select-label'" fxLayout="column">
+ <b
+ ><h4>{{ pages[2].description }}</h4></b
+ >
<div fxFlex="100" fxLayout="column">
- <mat-form-field style="margin-bottom: 10px;" color="accent">
+ <mat-form-field
+ style="margin-bottom: 10px"
+ color="accent"
+ >
<mat-label>Label</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="selectedLabel" value="Label">
- <mat-hint>Enter the label that will identify the measurement</mat-hint>
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="selectedLabel"
+ value="Label"
+ />
+ <mat-hint
+ >Enter the label that will identify the
+ measurement</mat-hint
+ >
</mat-form-field>
<div fxLayout="row" class="element-margin">
- <mat-label fxFlex="50">Label Background Color</mat-label>
- <input [(colorPicker)]="selectedLabelBackgroundColor"
- [style.background]="selectedLabelBackgroundColor"/>
+ <mat-label fxFlex="50"
+ >Label Background Color</mat-label
+ >
+ <input
+ [(colorPicker)]="selectedLabelBackgroundColor"
+ [style.background]="
+ selectedLabelBackgroundColor
+ "
+ />
</div>
<div fxLayout="row" class="element-margin">
<mat-label fxFlex="50">Label Text Color</mat-label>
- <input [(colorPicker)]="selectedLabelTextColor"
- [style.background]="selectedLabelTextColor"/>
+ <input
+ [(colorPicker)]="selectedLabelTextColor"
+ [style.background]="selectedLabelTextColor"
+ />
</div>
<div fxLayout="row" class="element-margin">
- <mat-label fxFlex="50">Measurement Value Background Color</mat-label>
- <input [(colorPicker)]="selectedMeasurementBackgroundColor"
- [style.background]="selectedMeasurementBackgroundColor"/>
+ <mat-label fxFlex="50"
+ >Measurement Value Background Color</mat-label
+ >
+ <input
+ [(colorPicker)]="
+ selectedMeasurementBackgroundColor
+ "
+ [style.background]="
+ selectedMeasurementBackgroundColor
+ "
+ />
</div>
<div fxLayout="row" class="element-margin">
- <mat-label fxFlex="50">Measurement Value Text Color</mat-label>
- <input [(colorPicker)]="selectedMeasurementTextColor"
- [style.background]="selectedMeasurementTextColor"/>
+ <mat-label fxFlex="50"
+ >Measurement Value Text Color</mat-label
+ >
+ <input
+ [(colorPicker)]="selectedMeasurementTextColor"
+ [style.background]="
+ selectedMeasurementTextColor
+ "
+ />
</div>
</div>
-
</div>
-
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-button mat-raised-button class="mat-basic mr-10" (click)="onCancel()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="onCancel()"
+ >
Cancel
</button>
- <button mat-button mat-raised-button class="mat-basic mr-10" (click)="back()" *ngIf="!('select-pipeline'===page)">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="back()"
+ *ngIf="!('select-pipeline' === page)"
+ >
Back
</button>
<button mat-button mat-raised-button color="accent" (click)="next()">
@@ -100,6 +158,3 @@
</button>
</div>
</div>
-
-
-
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
index 28f082913..cdf80f50a 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
@@ -19,8 +19,8 @@
@import '../../../../scss/sp/sp-dialog.scss';
.element-margin {
- margin-top:10px;
- margin-bottom:10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.mat-radio-button {
@@ -35,7 +35,7 @@
align-items: center;
justify-content: center;
display: flex;
- color:white;
+ color: white;
}
.list-item:hover {
@@ -44,7 +44,7 @@
}
.list-item {
- border-bottom: 1px solid #BDBDBD;
+ border-bottom: 1px solid #bdbdbd;
}
.mr-10 {
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
index dd0855ddd..a1508555e 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
@@ -22,29 +22,36 @@ import { RestService } from '../../services/rest.service';
import { ElementIconText } from '../../../services/get-element-icon-text.service';
import { SelectedVisualizationData } from '../../model/selected-visualization-data.model';
import { DialogRef } from '@streampipes/shared-ui';
-import { DataLakeMeasure, DatalakeRestService, DataViewDataExplorerService } from '@streampipes/platform-services';
+import {
+ DataLakeMeasure,
+ DatalakeRestService,
+ DataViewDataExplorerService,
+} from '@streampipes/platform-services';
import { zip } from 'rxjs';
@Component({
selector: 'sp-add-pipeline-dialog-component',
templateUrl: './add-pipeline-dialog.component.html',
- styleUrls: ['./add-pipeline-dialog.component.scss']
+ styleUrls: ['./add-pipeline-dialog.component.scss'],
})
export class AddPipelineDialogComponent implements OnInit {
-
- pages = [{
- type: 'select-pipeline',
- title: 'Select Pipeline',
- description: 'Select a pipeline you\'d like to visualize'
- }, {
- type: 'select-measurement',
- title: 'Measurement Value',
- description: 'Select measurement'
- }, {
- type: 'select-label',
- title: 'Label',
- description: 'Choose label'
- }];
+ pages = [
+ {
+ type: 'select-pipeline',
+ title: 'Select Pipeline',
+ description: "Select a pipeline you'd like to visualize",
+ },
+ {
+ type: 'select-measurement',
+ title: 'Measurement Value',
+ description: 'Select measurement',
+ },
+ {
+ type: 'select-label',
+ title: 'Label',
+ description: 'Choose label',
+ },
+ ];
visualizablePipelines: DataLakeMeasure[] = [];
@@ -59,32 +66,33 @@ export class AddPipelineDialogComponent implements OnInit {
selectedMeasurementTextColor = '#FFFFFF';
selectedLabel: string;
-
constructor(
private dialogRef: DialogRef<AddPipelineDialogComponent>,
private restApi: RestApi,
private restService: RestService,
private dataLakeRestService: DatalakeRestService,
private dataExplorerService: DataViewDataExplorerService,
- public elementIconText: ElementIconText) {
- }
+ public elementIconText: ElementIconText,
+ ) {}
ngOnInit() {
this.loadVisualizablePipelines();
}
loadVisualizablePipelines() {
- zip(this.dataExplorerService.getAllPersistedDataStreams(), this.dataLakeRestService.getAllMeasurementSeries())
- .subscribe(res => {
- const visualizablePipelines = res[0];
- visualizablePipelines.forEach(p => {
- const measurement = res[1].find(m => {
- return m.measureName === p.measureName;
- });
- p.eventSchema = measurement.eventSchema;
- });
- this.visualizablePipelines = visualizablePipelines;
- });
+ zip(
+ this.dataExplorerService.getAllPersistedDataStreams(),
+ this.dataLakeRestService.getAllMeasurementSeries(),
+ ).subscribe(res => {
+ const visualizablePipelines = res[0];
+ visualizablePipelines.forEach(p => {
+ const measurement = res[1].find(m => {
+ return m.measureName === p.measureName;
+ });
+ p.eventSchema = measurement.eventSchema;
+ });
+ this.visualizablePipelines = visualizablePipelines;
+ });
}
onCancel(): void {
@@ -108,7 +116,8 @@ export class AddPipelineDialogComponent implements OnInit {
}
getTabCss(page) {
- if (page === this.page) { return 'md-fab md-accent';
+ if (page === this.page) {
+ return 'md-fab md-accent';
} else {
return 'md-fab md-accent wizard-inactive';
}
@@ -117,7 +126,6 @@ export class AddPipelineDialogComponent implements OnInit {
selectPipeline(vis) {
this.selectedVisualization = vis;
this.next();
-
}
next() {
@@ -126,16 +134,21 @@ export class AddPipelineDialogComponent implements OnInit {
} else if (this.page === 'select-measurement') {
this.page = 'select-label';
} else {
-
- const selectedConfig: SelectedVisualizationData = {} as SelectedVisualizationData;
- selectedConfig.labelBackgroundColor = this.selectedLabelBackgroundColor;
+ const selectedConfig: SelectedVisualizationData =
+ {} as SelectedVisualizationData;
+ selectedConfig.labelBackgroundColor =
+ this.selectedLabelBackgroundColor;
selectedConfig.labelTextColor = this.selectedLabelTextColor;
- selectedConfig.measurementBackgroundColor = this.selectedMeasurementBackgroundColor;
- selectedConfig.measurementTextColor = this.selectedMeasurementTextColor;
+ selectedConfig.measurementBackgroundColor =
+ this.selectedMeasurementBackgroundColor;
+ selectedConfig.measurementTextColor =
+ this.selectedMeasurementTextColor;
selectedConfig.measurement = this.selectedMeasurement;
- selectedConfig.visualizationId = this.selectedVisualization.pipelineId;
+ selectedConfig.visualizationId =
+ this.selectedVisualization.pipelineId;
selectedConfig.label = this.selectedLabel;
- selectedConfig.dataLakeMeasure = this.selectedVisualization.measureName;
+ selectedConfig.dataLakeMeasure =
+ this.selectedVisualization.measureName;
this.dialogRef.close(selectedConfig);
}
@@ -152,5 +165,4 @@ export class AddPipelineDialogComponent implements OnInit {
iconText(s) {
return this.elementIconText.getElementIconText(s);
}
-
}
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
index df0f27474..93d818300 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
@@ -23,32 +23,39 @@
<div class="dialog-margin-bottom" fxLayout="column">
<mat-form-field class="dialog-margin-bottom" color="accent">
<mat-label>Dashboard Name</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="dashboardName">
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="dashboardName"
+ />
<mat-hint>The name of your new asset dashboard</mat-hint>
</mat-form-field>
<mat-form-field color="accent">
<mat-label>Description</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="dashboardDescription">
- <mat-hint>The description of your new asset dashboard</mat-hint>
+ <input
+ matInput
+ placeholder="Label"
+ [(ngModel)]="dashboardDescription"
+ />
+ <mat-hint
+ >The description of your new asset dashboard</mat-hint
+ >
</mat-form-field>
</div>
-
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-button
- mat-raised-button
- class="mat-basic mr-10"
- (click)="cancel()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="cancel()"
+ >
Cancel
</button>
- <button mat-button
- mat-raised-button
- color="accent"
- (click)="save()">
+ <button mat-button mat-raised-button color="accent" (click)="save()">
Save
</button>
</div>
</div>
-
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
index a2306be5d..da2aed864 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
@@ -19,8 +19,8 @@
@import '../../../../scss/sp/sp-dialog.scss';
.element-margin {
- margin-top:10px;
- margin-bottom:10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.mr-10 {
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
index e8323ca5b..0a4a2cbf1 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
@@ -30,7 +30,6 @@ import Stage = Konva.Stage;
styleUrls: ['./save-dashboard-dialog.component.scss'],
})
export class SaveDashboardDialogComponent implements OnInit {
-
dashboardName: string;
dashboardDescription: string;
@@ -48,13 +47,14 @@ export class SaveDashboardDialogComponent implements OnInit {
constructor(
private dialogRef: DialogRef<SaveDashboardDialogComponent>,
- private restService: RestService) {
- }
+ private restService: RestService,
+ ) {}
ngOnInit() {
if (this.editMode) {
this.dashboardName = this.dashboardConfig.dashboardName;
- this.dashboardDescription = this.dashboardConfig.dashboardDescription;
+ this.dashboardDescription =
+ this.dashboardConfig.dashboardDescription;
}
}
@@ -65,8 +65,7 @@ export class SaveDashboardDialogComponent implements OnInit {
save() {
// save image
if (this.file) {
- this.restService.storeImage(this.file).subscribe(response => {
- });
+ this.restService.storeImage(this.file).subscribe(response => {});
}
// save dashboard
@@ -84,9 +83,9 @@ export class SaveDashboardDialogComponent implements OnInit {
dashboardConfig.dashboardId = this.dashboardConfig.dashboardId;
}
- const observable = this.editMode ?
- this.restService.updateDashboard(dashboardConfig) :
- this.restService.storeDashboard(dashboardConfig);
+ const observable = this.editMode
+ ? this.restService.updateDashboard(dashboardConfig)
+ : this.restService.storeDashboard(dashboardConfig);
observable.subscribe(response => {
this.dialogRef.close();
});
diff --git a/ui/src/app/app-asset-monitoring/model/canvas-attributes.model.ts b/ui/src/app/app-asset-monitoring/model/canvas-attributes.model.ts
index 5c0d91496..e65920f76 100644
--- a/ui/src/app/app-asset-monitoring/model/canvas-attributes.model.ts
+++ b/ui/src/app/app-asset-monitoring/model/canvas-attributes.model.ts
@@ -33,5 +33,4 @@ export interface CanvasAttributes {
name: string;
align: string;
fontSize: string;
-
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/model/canvas-configuration.model.ts b/ui/src/app/app-asset-monitoring/model/canvas-configuration.model.ts
index 0565ffc92..30ee9ebdc 100644
--- a/ui/src/app/app-asset-monitoring/model/canvas-configuration.model.ts
+++ b/ui/src/app/app-asset-monitoring/model/canvas-configuration.model.ts
@@ -16,9 +16,9 @@
*
*/
-import Konva from "konva";
+import Konva from 'konva';
export interface CanvasConfiguration {
file: File;
dashboardCanvas: Konva.Stage;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/model/canvas-element.model.ts b/ui/src/app/app-asset-monitoring/model/canvas-element.model.ts
index a266c2895..9bba980de 100644
--- a/ui/src/app/app-asset-monitoring/model/canvas-element.model.ts
+++ b/ui/src/app/app-asset-monitoring/model/canvas-element.model.ts
@@ -16,10 +16,10 @@
*
*/
-import {CanvasAttributes} from "./canvas-attributes.model";
+import { CanvasAttributes } from './canvas-attributes.model';
export interface CanvasElement {
attrs: CanvasAttributes;
className: string;
children: CanvasElement[];
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/model/dashboard-configuration.model.ts b/ui/src/app/app-asset-monitoring/model/dashboard-configuration.model.ts
index 1db405848..6ab768c5d 100644
--- a/ui/src/app/app-asset-monitoring/model/dashboard-configuration.model.ts
+++ b/ui/src/app/app-asset-monitoring/model/dashboard-configuration.model.ts
@@ -28,5 +28,4 @@ export interface DashboardConfiguration {
attrs: CanvasAttributes;
className: string;
children: CanvasElement[];
-
}
diff --git a/ui/src/app/app-asset-monitoring/model/test-data.json b/ui/src/app/app-asset-monitoring/model/test-data.json
index 3fcf5ce2f..4c2d5ed6d 100644
--- a/ui/src/app/app-asset-monitoring/model/test-data.json
+++ b/ui/src/app/app-asset-monitoring/model/test-data.json
@@ -23,10 +23,7 @@
"anchorFill": "yellow",
"anchorSize": 20,
"borderStroke": "green",
- "borderDash": [
- 3,
- 3
- ]
+ "borderDash": [3, 3]
},
"className": "Transformer"
}
@@ -119,14 +116,11 @@
"anchorStroke": "red",
"anchorFill": "yellow",
"borderStroke": "green",
- "borderDash": [
- 3,
- 3
- ]
+ "borderDash": [3, 3]
},
"className": "Transformer"
}
]
}
]
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-asset-monitoring/services/rest.service.ts b/ui/src/app/app-asset-monitoring/services/rest.service.ts
index f33c91083..16c09fbfc 100644
--- a/ui/src/app/app-asset-monitoring/services/rest.service.ts
+++ b/ui/src/app/app-asset-monitoring/services/rest.service.ts
@@ -25,56 +25,63 @@ import { PlatformServicesCommons } from '@streampipes/platform-services';
@Injectable()
export class RestService {
+ constructor(
+ private http: HttpClient,
+ private platformServicesCommons: PlatformServicesCommons,
+ ) {}
- constructor(private http: HttpClient,
- private platformServicesCommons: PlatformServicesCommons) {
- }
+ getVisualizablePipelines(): Observable<any> {
+ return this.http.get(
+ '/visualizablepipeline/_all_docs?include_docs=true',
+ );
+ }
- getVisualizablePipelines(): Observable<any> {
- return this.http.get('/visualizablepipeline/_all_docs?include_docs=true');
- }
+ getPipeline(pipelineId): Observable<any> {
+ return this.http.get('/pipeline/' + pipelineId);
+ }
- getPipeline(pipelineId): Observable<any> {
- return this.http.get('/pipeline/' + pipelineId);
- }
+ storeImage(file: File): Observable<any> {
+ const data: FormData = new FormData();
+ data.append('file_upload', file, file.name);
+ return this.http.post(this.imagePath, data).pipe(
+ map(res => {
+ return res;
+ }),
+ );
+ }
- storeImage(file: File): Observable<any> {
- const data: FormData = new FormData();
- data.append('file_upload', file, file.name);
- return this.http.post(this.imagePath, data)
- .pipe(map(res => {
- return res;
- }));
- }
+ deleteDashboard(dashboardId: string) {
+ return this.http.delete(`${this.url}/${dashboardId}`);
+ }
- deleteDashboard(dashboardId: string) {
- return this.http.delete(`${this.url}/${dashboardId}`);
- }
+ storeDashboard(dashboardConfig: DashboardConfiguration) {
+ return this.http.post(this.url, dashboardConfig);
+ }
- storeDashboard(dashboardConfig: DashboardConfiguration) {
- return this.http.post(this.url, dashboardConfig);
- }
+ updateDashboard(dashboardConfig: DashboardConfiguration) {
+ return this.http.put(
+ this.url + '/' + dashboardConfig.dashboardId,
+ dashboardConfig,
+ );
+ }
- updateDashboard(dashboardConfig: DashboardConfiguration) {
- return this.http.put(this.url + '/' + dashboardConfig.dashboardId, dashboardConfig);
- }
+ getDashboards(): Observable<DashboardConfiguration[]> {
+ return this.http.get(this.url).pipe(
+ map(response => {
+ return response as DashboardConfiguration[];
+ }),
+ );
+ }
- getDashboards(): Observable<DashboardConfiguration[]> {
- return this.http.get(this.url).pipe(map(response => {
- return response as DashboardConfiguration[];
- }));
- }
+ getImageUrl(imageName: string): string {
+ return `${this.imagePath}/${imageName}`;
+ }
- getImageUrl(imageName: string): string {
- return `${this.imagePath}/${imageName}`;
- }
-
- private get url() {
- return `${this.platformServicesCommons.apiBasePath}/asset-dashboards`;
- }
-
- private get imagePath() {
- return `${this.url}/images`;
- }
+ private get url() {
+ return `${this.platformServicesCommons.apiBasePath}/asset-dashboards`;
+ }
+ private get imagePath() {
+ return `${this.url}/images`;
+ }
}
diff --git a/ui/src/app/app-asset-monitoring/services/shape.service.ts b/ui/src/app/app-asset-monitoring/services/shape.service.ts
index 01c2c16c9..410cf99b7 100644
--- a/ui/src/app/app-asset-monitoring/services/shape.service.ts
+++ b/ui/src/app/app-asset-monitoring/services/shape.service.ts
@@ -18,19 +18,15 @@
import { Injectable } from '@angular/core';
-
import Konva from 'konva';
import {
HyperlinkConfig,
- SelectedVisualizationData
+ SelectedVisualizationData,
} from '../model/selected-visualization-data.model';
@Injectable()
export class ShapeService {
-
- constructor() {
-
- }
+ constructor() {}
makeNewHyperlinkGroup(hyperlinkConfig: HyperlinkConfig) {
const group = this.makeGroup(true);
@@ -56,12 +52,14 @@ export class ShapeService {
newWindow: hyperlinkConfig.newWindow,
textDecoration: 'underline',
fill: '#62e497',
- fontSize: hyperlinkConfig.labelFontSize
+ fontSize: hyperlinkConfig.labelFontSize,
};
return new Konva.Text(settings);
}
- makeNewMeasurementShape(visualizationConfig: SelectedVisualizationData): Konva.Group {
+ makeNewMeasurementShape(
+ visualizationConfig: SelectedVisualizationData,
+ ): Konva.Group {
const visualizationGroup = this.makeGroup(true);
visualizationGroup.add(this.makeLabelGroup(visualizationConfig));
visualizationGroup.add(this.makeMeasurementGroup(visualizationConfig));
@@ -70,15 +68,41 @@ export class ShapeService {
makeLabelGroup(config: SelectedVisualizationData): Konva.Group {
const labelGroup = this.makeGroup(false);
- labelGroup.add(this.makeRect(config.labelBackgroundColor, 120, 40, 140, 20));
- labelGroup.add(this.makeText(config, config.label, config.labelTextColor, 120, 45, 140, 20, false));
+ labelGroup.add(
+ this.makeRect(config.labelBackgroundColor, 120, 40, 140, 20),
+ );
+ labelGroup.add(
+ this.makeText(
+ config,
+ config.label,
+ config.labelTextColor,
+ 120,
+ 45,
+ 140,
+ 20,
+ false,
+ ),
+ );
return labelGroup;
}
makeMeasurementGroup(config: SelectedVisualizationData): Konva.Group {
const measurementGroup = this.makeGroup(false);
- measurementGroup.add(this.makeRect(config.measurementBackgroundColor, 120, 60, 140, 40));
- measurementGroup.add(this.makeText(config, config.measurement, config.measurementTextColor, 120, 65, 140, 40, true));
+ measurementGroup.add(
+ this.makeRect(config.measurementBackgroundColor, 120, 60, 140, 40),
+ );
+ measurementGroup.add(
+ this.makeText(
+ config,
+ config.measurement,
+ config.measurementTextColor,
+ 120,
+ 65,
+ 140,
+ 40,
+ true,
+ ),
+ );
return measurementGroup;
}
@@ -86,15 +110,17 @@ export class ShapeService {
return new Konva.Group({
x: 120,
y: 40,
- draggable
+ draggable,
});
}
- makeRect(fillColor: string,
- x: number,
- y: number,
- width: number,
- height: number): Konva.Rect {
+ makeRect(
+ fillColor: string,
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ ): Konva.Rect {
return new Konva.Rect({
x,
y,
@@ -104,14 +130,16 @@ export class ShapeService {
});
}
- makeText(config: SelectedVisualizationData,
- text: string,
- textColor: string,
- x: number,
- y: number,
- width: number | string,
- height: number | string,
- dynamicContent: boolean): Konva.Text {
+ makeText(
+ config: SelectedVisualizationData,
+ text: string,
+ textColor: string,
+ x: number,
+ y: number,
+ width: number | string,
+ height: number | string,
+ dynamicContent: boolean,
+ ): Konva.Text {
const textSettings: any = {
text,
x,
@@ -120,7 +148,7 @@ export class ShapeService {
height,
fill: textColor,
align: 'center',
- fontSize: '15'
+ fontSize: '15',
};
if (dynamicContent) {