You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/10/12 13:51:39 UTC
[incubator-streampipes] branch dev updated: [STREAMPIPES-444]
Refactor asset dashboard to use updated pipeline data model
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 11f0aab [STREAMPIPES-444] Refactor asset dashboard to use updated pipeline data model
new 33fc197 Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
11f0aab is described below
commit 11f0aab05ef20f6d337648e8d4ea9e0839ef3a8a
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Oct 12 15:49:57 2021 +0200
[STREAMPIPES-444] Refactor asset dashboard to use updated pipeline data model
---
.../app-asset-monitoring.component.html | 2 +-
.../create-asset/create-asset.component.css | 5 +-
.../create-asset/create-asset.component.html | 16 +--
.../create-asset/create-asset.component.ts | 112 ++++++++++++---------
.../dashboard-overview.component.html | 8 +-
.../dashboard-overview.component.ts | 15 +--
.../view-asset/view-asset.component.html | 4 +-
.../components/view-asset/view-asset.component.ts | 22 ++--
.../add-pipeline-dialog.component.html | 91 ++++++++---------
...nent.css => add-pipeline-dialog.component.scss} | 45 ++++-----
.../add-pipeline/add-pipeline-dialog.component.ts | 90 ++++++++---------
.../save-dashboard-dialog.component.html | 59 +++++------
...nt.css => save-dashboard-dialog.component.scss} | 33 +-----
.../save-dashboard-dialog.component.ts | 42 ++++----
.../model/dashboard-configuration.model.ts | 9 +-
.../app/app-overview/app-overview.component.html | 4 +-
ui/src/app/dashboard/dashboard.component.html | 2 +-
.../app/data-explorer/data-explorer.component.html | 2 +-
ui/src/scss/sp/main.scss | 4 +
19 files changed, 275 insertions(+), 290 deletions(-)
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 ef2f44c..f3d5d2c 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
@@ -28,7 +28,7 @@
</div>
</div>
- <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
+ <div fxLayout="column" fxFlex="100">
<asset-dashboard-overview *ngIf="selectedIndex == 0 && !dashboardSelected" fxFlex="100" (selectedDashboard)="openDashboard($event)"></asset-dashboard-overview>
<view-asset fxFlex="100" *ngIf="selectedIndex == 0 && dashboardSelected" [dashboardConfig]="selectedDashboard" (dashboardClosed)="closeDashboard($event)"></view-asset>
<create-asset *ngIf="selectedIndex == 1" fxFlex="100" (dashboardClosed)="closeDashboard($event)"></create-asset>
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 31bfb74..1ddbbd0 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
@@ -18,14 +18,13 @@
.asset-configuration-board-panel {
min-height: calc(100vh - 70px);
- background: rgb(210, 210, 210);
}
.asset-configuration-board-canvas {
- width:1200px;
+ width:1400px;
height:900px;
border: 2px solid rgb(27, 20, 100);
margin: 20px auto;
background: white;
-}
\ No newline at end of file
+}
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 67e5419..8e81443 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
@@ -18,19 +18,19 @@
<div fxLayout="column" fxFlex="100" >
<input type="file" (change)="handleFileInput($event)" accept="image/*" #file style="display:none;">
- <div class="assemblyOptions sp-blue-bg">
- <div layout="row" layout-align="start center">
- <button mat-icon-button (click)="prepareDashboard()" type="submit" [disabled]="!backgroundImagePresent || !measurementPresent">
+ <div class="sp-tab-bg sp-blue-bg page-container-nav">
+ <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
+ <button color="accent" mat-button mat-icon-button (click)="prepareDashboard()" type="submit" [disabled]="!backgroundImagePresent || !measurementPresent">
<i class="material-icons">save</i>
</button>
- <button mat-icon-button (click)="file.click()" type="submit" [disabled]="backgroundImagePresent">
+ <button color="accent" mat-button mat-icon-button (click)="file.click()" type="submit" [disabled]="backgroundImagePresent">
<i class="material-icons">file_upload</i>
</button>
- <button mat-icon-button (click)="openAddPipelineDialog()" >
+ <button color="accent" mat-button mat-icon-button (click)="openAddPipelineDialog()" >
<i class="material-icons">add</i>
</button>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-icon-button (click)="clearCanvas()" matTooltip="Clear">
+ <button color="accent" mat-button mat-icon-button (click)="clearCanvas()" matTooltip="Clear">
<i class="material-icons">
clear
</i>
@@ -38,9 +38,9 @@
</div>
</div>
</div>
- <div id="outerAssemblyArea" class="sp-blue-border-nopadding asset-configuration-board-panel">
+ <div id="outerAssemblyArea" class="asset-configuration-board-panel">
<div id="asset-configuration-board-canvas" class="asset-configuration-board-canvas" fxLayoutAlign="center center">
</div>
</div>
-</div>
\ No newline at end of file
+</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 0c44e06..5da1236 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,13 +16,15 @@
*
*/
-import {Component, EventEmitter, HostListener, Output} from "@angular/core";
-import Konva from "konva";
-import {AddPipelineDialogComponent} from "../../dialog/add-pipeline/add-pipeline-dialog.component";
-import {MatDialog} from "@angular/material/dialog";
-import {ShapeService} from "../../services/shape.service";
-import {SelectedVisualizationData} from "../../model/selected-visualization-data.model";
-import {SaveDashboardDialogComponent} from "../../dialog/save-dashboard/save-dashboard-dialog.component";
+import { Component, EventEmitter, HostListener, Output } from '@angular/core';
+import Konva from 'konva';
+import { AddPipelineDialogComponent } from '../../dialog/add-pipeline/add-pipeline-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { ShapeService } from '../../services/shape.service';
+import { SelectedVisualizationData } from '../../model/selected-visualization-data.model';
+import { SaveDashboardDialogComponent } from '../../dialog/save-dashboard/save-dashboard-dialog.component';
+import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
+import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
interface Window {
Image: any;
@@ -46,27 +48,29 @@ export class CreateAssetComponent {
currentlySelectedShape: any;
- IMAGE_ID: string = "main-image";
+ IMAGE_ID = 'main-image';
selectedVisualizationData: SelectedVisualizationData;
- backgroundImagePresent: boolean = false;
- measurementPresent: boolean = false;
+ backgroundImagePresent = false;
+ measurementPresent = false;
@Output() dashboardClosed = new EventEmitter<boolean>();
- constructor(public dialog: MatDialog, public shapeService: ShapeService) {
+ constructor(public dialog: MatDialog,
+ public shapeService: ShapeService,
+ private dialogService: DialogService) {
}
ngAfterViewInit() {
- var width = 1200;
- var height = 900;
+ const width = 1400;
+ const height = 900;
this.mainCanvasStage = new Konva.Stage({
container: 'asset-configuration-board-canvas',
- width: width,
- height: height
+ width,
+ height
});
- let container = this.mainCanvasStage.container();
+ const container = this.mainCanvasStage.container();
container.focus();
this.initLayers();
@@ -81,7 +85,7 @@ export class CreateAssetComponent {
});
this.mainLayer.on('click', evt => {
let parentElement = evt.target.getParent();
- while(!parentElement.id()) {
+ while (!parentElement.id()) {
parentElement = parentElement.getParent();
}
this.currentlySelectedShape = parentElement;
@@ -91,16 +95,19 @@ export class CreateAssetComponent {
}
handleFileInput(event: any) {
- let files: any = event.target.files;
+ const files: any = event.target.files;
this.selectedUploadFile = files[0];
this.fileName = this.selectedUploadFile.name;
const image = new window.Image();
image.onload = () => {
- let imageCanvas = new Konva.Image({
- image: image,
- width: image.width,
- height: image.height,
+ const desiredWidth = Math.min(this.mainCanvasStage.width(), image.width);
+ const aspectRatio = image.width / image.height;
+ const desiredHeight = desiredWidth * aspectRatio;
+ const imageCanvas = new Konva.Image({
+ image,
+ width: desiredWidth,
+ height: desiredHeight,
x: 0,
y: 0,
draggable: true,
@@ -110,7 +117,7 @@ export class CreateAssetComponent {
this.backgroundImageLayer.add(imageCanvas);
this.backgroundImageLayer.draw();
- var tr = this.getNewTransformer(this.IMAGE_ID);
+ const tr = this.getNewTransformer(this.IMAGE_ID);
this.backgroundImageLayer.add(tr);
tr.attachTo(imageCanvas);
this.backgroundImageLayer.draw();
@@ -127,14 +134,17 @@ export class CreateAssetComponent {
}
prepareDashboard() {
- const dialogRef = this.dialog.open(SaveDashboardDialogComponent, {
- width: '70%',
- height: '500px',
- panelClass: 'custom-dialog-container',
- data: {dashboardCanvas: this.mainCanvasStage as any, file: this.selectedUploadFile}
+ 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
+ }
});
dialogRef.afterClosed().subscribe(closed => {
- console.log("close");
+ console.log('close');
this.dashboardClosed.emit(true);
});
}
@@ -148,13 +158,16 @@ export class CreateAssetComponent {
}
openAddPipelineDialog(): void {
- const dialogRef = this.dialog.open(AddPipelineDialogComponent, {
- width: '70%',
- height: '500px',
- panelClass: 'custom-dialog-container'
+ const dialogRef = this.dialogService.open(AddPipelineDialogComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Add visualization',
+ width: '50vw',
+ data: {
+ }
});
dialogRef.afterClosed().subscribe(result => {
+ console.log(result);
if (result) {
this.addNewVisulizationItem(result);
this.measurementPresent = true;
@@ -166,25 +179,25 @@ export class CreateAssetComponent {
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
const delta = 4;
- if (event.code == "Delete") {
- let id = this.currentlySelectedShape.id();
- this.mainCanvasStage.findOne("#" +id + "-transformer").destroy();
+ if (event.code === 'Delete') {
+ const id = this.currentlySelectedShape.id();
+ this.mainCanvasStage.findOne('#' + id + '-transformer').destroy();
this.currentlySelectedShape.destroy();
if (id === this.IMAGE_ID) {
this.backgroundImagePresent = false;
} else {
- let remainingElementIds = this.mainLayer.find("Group");
+ const remainingElementIds = this.mainLayer.find('Group');
if (remainingElementIds.length === 0) {
this.measurementPresent = false;
}
}
- } else if (event.code == "ArrowLeft") {
+ } else if (event.code === 'ArrowLeft') {
this.currentlySelectedShape.x(this.currentlySelectedShape.x() - delta);
- } else if (event.code == "ArrowRight") {
+ } else if (event.code === 'ArrowRight') {
this.currentlySelectedShape.x(this.currentlySelectedShape.x() + delta);
- } else if (event.code == "ArrowDown") {
+ } else if (event.code === 'ArrowDown') {
this.currentlySelectedShape.y(this.currentlySelectedShape.y() + delta);
- } else if (event.code == "ArrowUp") {
+ } else if (event.code === 'ArrowUp') {
this.currentlySelectedShape.y(this.currentlySelectedShape.y() - delta);
}
this.backgroundImageLayer.draw();
@@ -192,11 +205,11 @@ export class CreateAssetComponent {
}
addNewVisulizationItem(visualizationConfig) {
- let visGroup = this.shapeService.makeNewMeasurementShape(visualizationConfig);
- let id = this.makeId();
+ const visGroup = this.shapeService.makeNewMeasurementShape(visualizationConfig);
+ const id = this.makeId();
visGroup.id(id);
this.mainLayer.add(visGroup);
- let tr = this.getNewTransformer(id);
+ const tr = this.getNewTransformer(id);
this.mainLayer.add(tr);
tr.attachTo(visGroup);
this.mainLayer.draw();
@@ -211,18 +224,19 @@ export class CreateAssetComponent {
borderStroke: 'green',
borderDash: [3, 3],
keepRatio: true,
- id: id + "-transformer"
+ id: id + '-transformer'
});
}
makeId() {
- var text = "";
- var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ let text = '';
+ const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
- for (var i = 0; i < 6; i++)
+ for (let i = 0; i < 6; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
+ }
return text;
}
-}
\ 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 9b1f8d4..3c38093 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
@@ -16,7 +16,7 @@
~
-->
-<div fxFlex="100" fxLayout="column">
+<div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
<h1>Asset Dashboards</h1>
<mat-grid-list
[cols]="3" [rowHeight]="500"
@@ -35,8 +35,8 @@
</p>
</mat-card-content>
<mat-card-actions>
- <button mat-button mat-raised-button color="primary" (click)="openDashboard(dashboardConfig)">Open Dashboard</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="deleteDashboard(dashboardConfig._id)">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>
@@ -44,4 +44,4 @@
<div *ngIf="dashboardConfigs.length == 0">
<h4>(no dashboards available, navigate to <i>New Dashboard</i> to create a new asset dashboard)</h4>
</div>
-</div>
\ No newline at end of file
+</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 a737c02..71235a2 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
@@ -16,16 +16,16 @@
*
*/
-import {Component, EventEmitter, Output} from "@angular/core";
-import {RestService} from "../../services/rest.service";
-import {DashboardConfiguration} from "../../model/dashboard-configuration.model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { RestService } from '../../services/rest.service';
+import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
@Component({
selector: 'asset-dashboard-overview',
templateUrl: './dashboard-overview.component.html',
styleUrls: ['./dashboard-overview.component.css']
})
-export class AssetDashboardOverviewComponent {
+export class AssetDashboardOverviewComponent implements OnInit {
@Output() selectedDashboard = new EventEmitter<DashboardConfiguration>();
@@ -45,8 +45,9 @@ export class AssetDashboardOverviewComponent {
getDashboards() {
this.restService.getDashboards().subscribe(response => {
+ console.log(response);
this.dashboardConfigs = response;
- })
+ });
}
openDashboard(dashboardConfig: DashboardConfiguration) {
@@ -56,6 +57,6 @@ export class AssetDashboardOverviewComponent {
deleteDashboard(dashboardId: string) {
this.restService.deleteDashboard(dashboardId).subscribe(response => {
this.getDashboards();
- })
+ });
}
-}
\ No newline at end of file
+}
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 630f5bf..35cd662 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
@@ -16,7 +16,7 @@
~
-->
-<div fxFlex="100" fxLayout="column">
+<div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
<div fxLayout="row">
<div fxLayout="fill">
<h1>{{dashboardConfig.dashboardName}}</h1>
@@ -26,4 +26,4 @@
</div>
</div>
<div id="container" class="asset-view-canvas"></div>
-</div>
\ No newline at end of file
+</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 f72cc90..bbd0c80 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,12 @@
*
*/
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
-import Konva from "konva";
-import {WebsocketService} from "../../services/websocket.service";
-import {DashboardConfiguration} from "../../model/dashboard-configuration.model";
-import {RestService} from "../../services/rest.service";
+import Konva from 'konva';
+import { WebsocketService } from '../../services/websocket.service';
+import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
+import { RestService } from '../../services/rest.service';
interface Window {
Image: any;
@@ -61,13 +61,13 @@ export class ViewAssetComponent {
}
updateMeasurements() {
- let dynamicShapes = this.mainCanvasStage.find(".dynamic-text");
+ const dynamicShapes = this.mainCanvasStage.find('.dynamic-text');
dynamicShapes.forEach(ds => {
- let monitoredField = ds.text();
+ const monitoredField = ds.text();
this.websocketService.connect(ds.attrs.brokerUrl, ds.attrs.topic).subscribe(msg => {
ds.text(msg[monitoredField]);
this.mainCanvasStage.draw();
- })
+ });
});
}
@@ -76,14 +76,14 @@ export class ViewAssetComponent {
image.src = this.restService.getImageUrl(this.dashboardConfig.imageInfo.imageName);
this.dashboardConfig.imageInfo.image = image;
image.onload = () => {
- let imageCanvas = new Konva.Image(this.dashboardConfig.imageInfo);
+ const imageCanvas = new Konva.Image(this.dashboardConfig.imageInfo);
this.backgroundImageLayer.add(imageCanvas);
this.backgroundImageLayer.draw();
- }
+ };
}
closeDashboard() {
this.dashboardClosed.emit(true);
}
-}
\ No newline at end of file
+}
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 437e757..e5748ce 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
@@ -1,60 +1,51 @@
- <!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+<!--
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
-<mat-toolbar>
- <div class="md-toolbar-tools">
- <h2>Add a new Widget</h2>
- <span fxFlex></span>
- <button mat-icon-button (click)="onCancel()">
- <i class="material-icons">close</i>
- </button>
- </div>
- </mat-toolbar>
- <mat-divider></mat-divider>
- <div mat-dialog-content class="md-dialog-content">
+<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'">
- <h4>{{pages[0].description}}</h4>
- <mat-grid-list
- [cols]="3" [rowHeight]="200"
- [gutterSize]="100">
-
- <mat-grid-tile class="gray" *ngFor="let opt of visualizablePipelines">
- <div [ngClass]="getSelectedPipelineCss(opt.doc)"
- (click)="selectPipeline(opt.doc)">
- {{iconText(opt.doc.name)}}
- <h5>{{opt.doc.name}}</h5>
- </div>
- </mat-grid-tile>
- </mat-grid-list>
+ <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.visualizationName)}}
+ </div>
+ <h4 mat-line>{{pipeline.pipelineName}}</h4>
+ <p mat-line>{{pipeline.visualizationName}} </p>
+ </mat-list-item>
+ </mat-list>
+ </div>
</div>
<!-- Select Type -->
<div *ngIf="page == 'select-measurement'" fxLayout="column">
<h4>{{pages[1].description}}</h4>
- <div fxFlex="100" layout="column">
+ <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.schema.eventProperties"
- [value]="prop.properties.runtimeName">
- {{prop.properties.runtimeName}}
+ [value]="prop.runtimeName">
+ {{prop.runtimeName}}
</mat-radio-button>
</mat-radio-group>
</div>
@@ -64,7 +55,7 @@
<div *ngIf="page == 'select-label'" fxLayout="column">
<b><h4>{{pages[2].description}}</h4></b>
<div fxFlex="100" fxLayout="column">
- <mat-form-field appearance="outline" style="margin-bottom: 10px;">
+ <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>
@@ -97,16 +88,18 @@
</div>
</div>
<mat-divider></mat-divider>
- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
- <button mat-button mat-raised-button class="mat-basic" (click)="onCancel()">
+ <div class="sp-dialog-actions">
+ <button mat-button mat-raised-button class="mat-basic mr-10" (click)="onCancel()">
Cancel
</button>
- <button mat-button mat-raised-button class="mat-basic" (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="primary" (click)="next()">
+ <button mat-button mat-raised-button color="accent" (click)="next()">
Next
</button>
</div>
+</div>
+
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.css b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
similarity index 66%
rename from ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.css
rename to ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
index e00a7b4..28f0829 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.css
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.scss
@@ -16,40 +16,37 @@
*
*/
+@import '../../../../scss/sp/sp-dialog.scss';
+
.element-margin {
margin-top:10px;
margin-bottom:10px;
}
-mat-toolbar {
- background: #39b54a;
- color:white;
+.mat-radio-button {
+ padding: 10px;
+}
+
+.mat-radio-button {
+ padding: 10px;
}
-mat-dialog-content {
- padding: 24px;
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- order: 1;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- flex-direction: column;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
+.pipeline-avatar {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ color:white;
}
-.mat-dialog-content {
- width:100%;
- height:74%;
- margin: 0px;
+.list-item:hover {
+ background: var(--color-bg-1);
+ cursor: pointer;
}
-.mat-dialog-actions {
- margin-bottom:0px;
- padding-right:10px;
+.list-item {
+ border-bottom: 1px solid #BDBDBD;
}
-.mat-radio-button {
- padding: 10px;
-}
\ No newline at end of file
+.mr-10 {
+ margin-right: 10px;
+}
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 6d74a44..210e3a1 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
@@ -16,65 +16,61 @@
*
*/
-import {Component, Inject} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {RestApi} from "../../../services/rest-api.service";
-import {RestService} from "../../services/rest.service";
-import {ElementIconText} from "../../../services/get-element-icon-text.service";
-import {SelectedVisualizationData} from "../../model/selected-visualization-data.model";
+import { Component, OnInit } from '@angular/core';
+import { RestApi } from '../../../services/rest-api.service';
+import { RestService } from '../../services/rest.service';
+import { ElementIconText } from '../../../services/get-element-icon-text.service';
+import { SelectedVisualizationData } from '../../model/selected-visualization-data.model';
+import { DashboardService } from '../../../dashboard/services/dashboard.service';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { VisualizablePipeline } from '../../../core-model/gen/streampipes-model';
@Component({
selector: 'add-pipeline-dialog-component',
templateUrl: './add-pipeline-dialog.component.html',
- styleUrls: ['./add-pipeline-dialog.component.css']
+ styleUrls: ['./add-pipeline-dialog.component.scss']
})
-export class AddPipelineDialogComponent {
+export class AddPipelineDialogComponent implements OnInit {
pages = [{
- type: "select-pipeline",
- title: "Select Pipeline",
- description: "Select a pipeline you'd like to visualize"
+ 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-measurement',
+ title: 'Measurement Value',
+ description: 'Select measurement'
}, {
- type: "select-label",
- title: "Label",
- description: "Choose label"
+ type: 'select-label',
+ title: 'Label',
+ description: 'Choose label'
}];
- visualizablePipelines = [];
+ visualizablePipelines: VisualizablePipeline[] = [];
- selectedVisualization: any;
+ selectedVisualization: VisualizablePipeline;
selectedType: any;
selectedMeasurement: any;
- page: any = "select-pipeline";
+ page: any = 'select-pipeline';
- selectedLabelBackgroundColor: string = "#FFFFFF";
- selectedLabelTextColor: string = "#1B1464";
- selectedMeasurementBackgroundColor: string = "#39B54A";
- selectedMeasurementTextColor: string = "#FFFFFF";
+ selectedLabelBackgroundColor = '#FFFFFF';
+ selectedLabelTextColor = '#1B1464';
+ selectedMeasurementBackgroundColor = '#39B54A';
+ selectedMeasurementTextColor = '#FFFFFF';
selectedLabel: string;
constructor(
- public dialogRef: MatDialogRef<AddPipelineDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: SelectedVisualizationData,
+ private dialogRef: DialogRef<AddPipelineDialogComponent>,
private restApi: RestApi,
private restService: RestService,
+ private dashboardService: DashboardService,
public elementIconText: ElementIconText) {
}
ngOnInit() {
- this.restService.getVisualizablePipelines().subscribe(visualizations => {
- visualizations.rows.forEach(vis => {
- this.restService.getPipeline(vis.doc.pipelineId)
- .subscribe(pipeline => {
- vis.doc.name = pipeline.name;
- this.visualizablePipelines.push(vis);
- });
- });
+ this.dashboardService.getVisualizablePipelines().subscribe(visualizations => {
+ this.visualizablePipelines = visualizations;
});
}
@@ -91,16 +87,18 @@ export class AddPipelineDialogComponent {
}
getSelectedCss(selected, current) {
- if (selected == current) {
- return "wizard-preview wizard-preview-selected";
+ if (selected === current) {
+ return 'wizard-preview wizard-preview-selected';
} else {
- return "wizard-preview";
+ return 'wizard-preview';
}
}
getTabCss(page) {
- if (page == this.page) return "md-fab md-accent";
- else return "md-fab md-accent wizard-inactive";
+ if (page === this.page) { return 'md-fab md-accent';
+ } else {
+ return 'md-fab md-accent wizard-inactive';
+ }
}
selectPipeline(vis) {
@@ -110,13 +108,13 @@ export class AddPipelineDialogComponent {
}
next() {
- if (this.page == 'select-pipeline') {
+ if (this.page === 'select-pipeline') {
this.page = 'select-measurement';
- } else if (this.page == 'select-measurement') {
+ } else if (this.page === 'select-measurement') {
this.page = 'select-label';
} else {
- let selectedConfig:SelectedVisualizationData = {} as SelectedVisualizationData;
+ const selectedConfig: SelectedVisualizationData = {} as SelectedVisualizationData;
selectedConfig.labelBackgroundColor = this.selectedLabelBackgroundColor;
selectedConfig.labelTextColor = this.selectedLabelTextColor;
selectedConfig.measurementBackgroundColor = this.selectedMeasurementBackgroundColor;
@@ -124,7 +122,7 @@ export class AddPipelineDialogComponent {
selectedConfig.measurement = this.selectedMeasurement;
selectedConfig.visualizationId = this.selectedVisualization.pipelineId;
selectedConfig.label = this.selectedLabel;
- selectedConfig.brokerUrl = this.selectedVisualization.broker;
+ selectedConfig.brokerUrl = (this.selectedVisualization as any).broker;
selectedConfig.topic = this.selectedVisualization.topic;
this.dialogRef.close(selectedConfig);
@@ -132,9 +130,9 @@ export class AddPipelineDialogComponent {
}
back() {
- if (this.page == 'select-measurement') {
+ if (this.page === 'select-measurement') {
this.page = 'select-pipeline';
- } else if (this.page == 'select-label') {
+ } else if (this.page === 'select-label') {
this.page = 'select-measurement';
}
}
@@ -143,4 +141,4 @@ export class AddPipelineDialogComponent {
return this.elementIconText.getElementIconText(s);
}
-}
\ No newline at end of file
+}
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 43293a1..11a4194 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
@@ -16,40 +16,33 @@
~
-->
-<mat-toolbar>
- <div class="md-toolbar-tools">
- <h2>Save Dashboard</h2>
- <span fxFlex></span>
- <button mat-icon-button (click)="cancel()">
- <i class="material-icons">close</i>
- </button>
- </div>
-</mat-toolbar>
-<div mat-dialog-content class="md-dialog-content">
- <div flex="100" fxLayout="column">
- <h4>Dashboard Settings</h4>
- <div class="dialog-margin-bottom" fxLayout="column">
- <mat-form-field appearance="outline" class="dialog-margin-bottom">
- <mat-label>Dashboard Name</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="dashboardName">
- <mat-hint>The name of your new asset dashboard</mat-hint>
- </mat-form-field>
- <mat-form-field appearance="outline">
- <mat-label>Description</mat-label>
- <input matInput placeholder="Label" [(ngModel)]="dashboardDescription">
- <mat-hint>The description of your new asset dashboard</mat-hint>
- </mat-form-field>
- </div>
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content p-15">
+ <div fxFlex="100" fxLayout="column">
+ <h4>Dashboard Settings</h4>
+ <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">
+ <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>
+ </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()">
+ Cancel
+ </button>
+ <button mat-button mat-raised-button color="accent" (click)="save()">
+ Next
+ </button>
</div>
-</div>
-<mat-divider></mat-divider>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
- <button mat-button mat-raised-button class="mat-basic" (click)="cancel()">
- Cancel
- </button>
- <button mat-button mat-raised-button color="primary" (click)="save()">
- Next
- </button>
</div>
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.css b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
similarity index 64%
rename from ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.css
rename to ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
index 5479a0d..a2306be 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.css
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.scss
@@ -16,40 +16,17 @@
*
*/
+@import '../../../../scss/sp/sp-dialog.scss';
+
.element-margin {
margin-top:10px;
margin-bottom:10px;
}
-mat-toolbar {
- background: #39b54a;
- color:white;
-}
-
-mat-dialog-content {
- padding: 24px;
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- order: 1;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- flex-direction: column;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.mat-dialog-content {
- width:100%;
- height:74%;
- margin: 10px 0px 0px;
-}
-
-.mat-dialog-actions {
- margin-bottom:0px;
- padding-right:10px;
+.mr-10 {
+ margin-right: 10px;
}
.dialog-margin-bottom {
margin-bottom: 10px;
-}
\ No newline at end of file
+}
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 092a7b9..413a344 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
@@ -16,26 +16,32 @@
*
*/
-import {Component, Inject} from "@angular/core";
-import {RestService} from "../../services/rest.service";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {CanvasConfiguration} from "../../model/canvas-configuration.model";
-import {DashboardConfiguration} from "../../model/dashboard-configuration.model";
-import {ImageInfo} from "../../model/image-info.model";
+import { Component, Input } from '@angular/core';
+import { RestService } from '../../services/rest.service';
+import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
+import { ImageInfo } from '../../model/image-info.model';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import Konva from 'konva';
+import Stage = Konva.Stage;
@Component({
selector: 'save-dashboard-dialog-component',
templateUrl: 'save-dashboard-dialog.component.html',
- styleUrls: ['./save-dashboard-dialog.component.css'],
+ styleUrls: ['./save-dashboard-dialog.component.scss'],
})
export class SaveDashboardDialogComponent {
dashboardName: string;
dashboardDescription: string;
+ @Input()
+ dashboardCanvas: Stage;
+
+ @Input()
+ file: File;
+
constructor(
- public dialogRef: MatDialogRef<SaveDashboardDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: CanvasConfiguration,
+ private dialogRef: DialogRef<SaveDashboardDialogComponent>,
private restService: RestService) {
}
@@ -45,16 +51,16 @@ export class SaveDashboardDialogComponent {
save() {
// save image
- this.restService.storeImage(this.data.file).subscribe(response => {
+ this.restService.storeImage(this.file).subscribe(response => {
});
// save dashboard
- let imageInfo = this.makeImageInfo();
- let dashboardConfig = this.makeDashboardConfig();
+ const imageInfo = this.makeImageInfo();
+ const dashboardConfig = this.makeDashboardConfig();
dashboardConfig.dashboardName = this.dashboardName;
dashboardConfig.dashboardDescription = this.dashboardDescription;
dashboardConfig.imageInfo = imageInfo;
- dashboardConfig.imageInfo.imageName = this.data.file.name;
+ dashboardConfig.imageInfo.imageName = this.file.name;
this.restService.storeDashboard(dashboardConfig).subscribe(response => {
this.dialogRef.close();
@@ -62,20 +68,20 @@ export class SaveDashboardDialogComponent {
}
makeImageInfo(): ImageInfo {
- let imageShape = this.data.dashboardCanvas.findOne('#main-image');
+ const imageShape = this.dashboardCanvas.findOne('#main-image');
return imageShape.attrs as ImageInfo;
}
makeDashboardConfig(): DashboardConfiguration {
- let canvas = this.data.dashboardCanvas;
- let transformerShapes = Array.from(canvas.find('Transformer'));
+ const canvas = this.dashboardCanvas;
+ const transformerShapes = Array.from(canvas.find('Transformer'));
transformerShapes.forEach(shape => {
shape.destroy();
});
- let mainShape = canvas.findOne("#main-image");
+ const mainShape = canvas.findOne('#main-image');
mainShape.destroy();
return JSON.parse(canvas.toJSON());
}
-}
\ 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 b6a213d..1db4058 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
@@ -16,16 +16,17 @@
*
*/
-import {CanvasElement} from "./canvas-element.model";
-import {CanvasAttributes} from "./canvas-attributes.model";
-import {ImageInfo} from "./image-info.model";
+import { CanvasElement } from './canvas-element.model';
+import { CanvasAttributes } from './canvas-attributes.model';
+import { ImageInfo } from './image-info.model';
export interface DashboardConfiguration {
dashboardName: string;
dashboardDescription: string;
+ dashboardId: string;
imageInfo: ImageInfo;
attrs: CanvasAttributes;
className: string;
children: CanvasElement[];
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/app-overview/app-overview.component.html b/ui/src/app/app-overview/app-overview.component.html
index 769e232..1058a6b 100644
--- a/ui/src/app/app-overview/app-overview.component.html
+++ b/ui/src/app/app-overview/app-overview.component.html
@@ -16,7 +16,7 @@
~
-->
-<div fxLayout="column" fxFlex="100" class="page-container page-container-padding page-container-connect">
+<div fxLayout="column" class="page-container page-container-connect">
<div fxLayout="row" class="sp-tab-bg">
<div fxLayoutAlign="end center" fxLayout="fill" class="page-container-nav"
style="padding-right:10px; width:100%;min-height:50px;line-height:24px;margin-bottom:1px;">
@@ -47,10 +47,12 @@
</mat-card>
</div>
</div>
+ <div class="fixed-height" fxLayout="column" fxFlex="100">
<app-asset-monitoring (appOpened)="appOpened($event)"
*ngIf="currentlySelectedApp === apps[0].appId"></app-asset-monitoring>
<app-image-labeling (appOpened)="appOpened($event)"
*ngIf="currentlySelectedApp === apps[1].appId"></app-image-labeling>
+ </div>
<!-- <app-new-app (appOpened)="appOpened($event)"-->
<!-- *ngIf="currentlySelectedApp === apps[2].appId"></app-new-app>-->
</div>
diff --git a/ui/src/app/dashboard/dashboard.component.html b/ui/src/app/dashboard/dashboard.component.html
index d259e40..315ea30 100644
--- a/ui/src/app/dashboard/dashboard.component.html
+++ b/ui/src/app/dashboard/dashboard.component.html
@@ -36,7 +36,7 @@
</div>
</div>
- <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
+ <div class="fixed-height" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
<dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
(reloadDashboardsEmitter)="getDashboards()"
[dashboards]="dashboards"
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index d11635f..7fb3b3b 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -75,7 +75,7 @@
<!-- </div>-->
</div>
- <div class="page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
+ <div fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
<sp-data-explorer-dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
(reloadDashboardsEmitter)="getDashboards()"
[dataViewDashboards]="dataViewDashboards"
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 91063a9..5cd941c 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -365,6 +365,10 @@ md-content {
//height: 100%;
}
+.page-container-padding-inner {
+ margin: 10px;
+}
+
.page-container-subheader {
}