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 2022/07/26 06:45:29 UTC
[incubator-streampipes] 01/03: [STREAMPIPES-545] Improve link dialog
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-545
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit e1f11df8bf9a32031d18deb5cc8392aad7579d89
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Jul 25 23:13:27 2022 +0200
[STREAMPIPES-545] Improve link dialog
---
.../streampipes/model/assets/AssetLinkType.java | 34 ++++++++++++++++--
.../setup/tasks/CreateAssetLinkTypeTask.java | 12 +++----
.../src/lib/model/assets/asset.model.ts | 3 ++
.../asset-details-panel.component.ts | 2 +-
.../asset-link-item/asset-link-item.component.html | 15 +++++---
.../asset-link-item/asset-link-item.component.scss | 8 +++++
.../asset-link-item/asset-link-item.component.ts | 10 +++---
.../asset-selection-panel.component.html | 8 ++---
.../asset-selection-panel.component.scss | 4 ++-
.../asset-selection-panel.component.ts | 14 +++++---
.../edit-asset-link-dialog.component.html | 41 ++++++++++++++++++----
.../edit-asset-link-dialog.component.ts | 40 +++++++++++++++------
ui/src/scss/_variables.scss | 10 +++++-
13 files changed, 157 insertions(+), 44 deletions(-)
diff --git a/streampipes-model/src/main/java/org/apache/streampipes/model/assets/AssetLinkType.java b/streampipes-model/src/main/java/org/apache/streampipes/model/assets/AssetLinkType.java
index 2bb83b6f8..79d6c2687 100644
--- a/streampipes-model/src/main/java/org/apache/streampipes/model/assets/AssetLinkType.java
+++ b/streampipes-model/src/main/java/org/apache/streampipes/model/assets/AssetLinkType.java
@@ -22,6 +22,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import com.google.gson.annotations.SerializedName;
import org.apache.streampipes.commons.constants.GenericDocTypes;
+import java.util.ArrayList;
+import java.util.List;
+
public class AssetLinkType {
public final String appDocType = GenericDocTypes.DOC_ASSET_LINK_TYPE;
@@ -34,16 +37,27 @@ public class AssetLinkType {
private String linkColor;
private String linkIcon;
private String linkQueryHint;
-
- public AssetLinkType(String linkType, String linkLabel, String linkColor, String linkIcon, String linkQueryHint) {
+ private List<String> navPaths;
+ private boolean navigationActive;
+
+ public AssetLinkType(String linkType,
+ String linkLabel,
+ String linkColor,
+ String linkIcon,
+ String linkQueryHint,
+ List<String> navPaths,
+ boolean navigationActive) {
this.linkType = linkType;
this.linkLabel = linkLabel;
this.linkColor = linkColor;
this.linkIcon = linkIcon;
this.linkQueryHint = linkQueryHint;
+ this.navPaths = navPaths;
+ this.navigationActive = navigationActive;
}
public AssetLinkType() {
+ this.navPaths = new ArrayList<>();
}
public String getLinkType() {
@@ -97,4 +111,20 @@ public class AssetLinkType {
public String getAppDocType() {
return appDocType;
}
+
+ public List<String> getNavPaths() {
+ return navPaths;
+ }
+
+ public void setNavPaths(List<String> navPaths) {
+ this.navPaths = navPaths;
+ }
+
+ public boolean isNavigationActive() {
+ return navigationActive;
+ }
+
+ public void setNavigationActive(boolean navigationActive) {
+ this.navigationActive = navigationActive;
+ }
}
diff --git a/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/setup/tasks/CreateAssetLinkTypeTask.java b/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/setup/tasks/CreateAssetLinkTypeTask.java
index 93ff1c07d..1be6c0efe 100644
--- a/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/setup/tasks/CreateAssetLinkTypeTask.java
+++ b/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/setup/tasks/CreateAssetLinkTypeTask.java
@@ -31,12 +31,12 @@ import java.util.List;
public class CreateAssetLinkTypeTask implements InstallationTask {
private List<AssetLinkType> defaultLinkTypes = Arrays.asList(
- new AssetLinkType("data-view", "Data View", "var(--color-data-view)", "search", "data-view"),
- new AssetLinkType("dashboard", "Dashboard", "var(--color-dashboard)", "insert_chart", "dashboard"),
- new AssetLinkType("adapter", "Adapter", "var(--color-adapter)", "power", "adapter"),
- new AssetLinkType("data-source", "Data Source", "var(--color-data-source)", "", "data-source"),
- new AssetLinkType("pipeline", "Pipeline", "var(--color-pipeline)", "play_arrow", "pipeline"),
- new AssetLinkType("measurement", "Data Lake Storage", "var(--color-measurement", "", "measurement")
+ new AssetLinkType("data-view", "Data View", "var(--color-data-view)", "search", "data-view", List.of("dataexplorer"), true),
+ new AssetLinkType("dashboard", "Dashboard", "var(--color-dashboard)", "insert_chart", "dashboard", List.of("dashboard"), true),
+ new AssetLinkType("adapter", "Adapter", "var(--color-adapter)", "power", "adapter", List.of("connect"), true),
+ new AssetLinkType("data-source", "Data Source", "var(--color-data-source)", "", "data-source", List.of(), false),
+ new AssetLinkType("pipeline", "Pipeline", "var(--color-pipeline)", "play_arrow", "pipeline", List.of("pipeline", "details"), true),
+ new AssetLinkType("measurement", "Data Lake Storage", "var(--color-measurement", "", "measurement", List.of(), false)
);
@Override
diff --git a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts b/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
index 6cb191a10..511062885 100644
--- a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
+++ b/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
@@ -22,6 +22,8 @@ export interface AssetLinkType {
linkColor: string;
linkIcon?: string;
linkQueryHint?: string;
+ navPaths: string[];
+ navigationActive: boolean;
}
export interface AssetType {
@@ -36,6 +38,7 @@ export interface AssetLink {
linkType: 'data-view' | 'dashboard' | 'adapter' | 'source' | string;
linkLabel: string;
editingDisabled: boolean;
+ navigationActive: boolean;
}
export interface SpAsset {
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
index d257342ae..ff847bffc 100644
--- a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
@@ -49,7 +49,7 @@ export class SpAssetDetailsPanelComponent implements OnInit {
ngOnInit(): void {
this.genericStorageService.getAllDocuments(AssetConstants.ASSET_LINK_TYPES_DOC_NAME).subscribe(assetLinkTypes => {
- this.assetLinkTypes = assetLinkTypes;
+ this.assetLinkTypes = assetLinkTypes.sort((a, b) => a.linkLabel.localeCompare(b.linkLabel));
});
}
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
index 3ca2204c3..9bddca368 100644
--- a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
@@ -18,13 +18,20 @@
<div fxFlex="100" fxLayout="column">
<div fxLayout="row" fxLayoutGap="10px">
+ <div fxLayoutAlign="center center">
+ <div fxLayoutAlign="center center" class="link-icon" [ngStyle]="{'background': currentAssetLinkType.linkColor}">
+ <i class="material-icons">{{currentAssetLinkType.linkIcon}}</i>
+ </div>
+ </div>
<div fxLayoutAlign="start center"><span class="link-label">{{assetLink.linkLabel}}</span></div>
- <div fxLayoutAlign="start center"><span class="link-type" [ngStyle]="{'background': currentAssetLinkType.linkColor}">{{assetLink.linkType}}</span></div>
<div fxFlex></div>
<div fxLayoutAlign="end center">
- <button mat-button mat-icon-button color="accent" (click)="openLink()"><i class="material-icons">link</i></button>
- <button mat-button mat-icon-button color="accent" (click)="editLink()" *ngIf="editMode"><i class="material-icons">edit</i></button>
- <button mat-button mat-icon-button color="accent" (click)="deleteLink()" *ngIf="editMode"><i class="material-icons">delete</i></button>
+ <button mat-button mat-icon-button color="accent" (click)="openLink()"><i class="material-icons">link</i>
+ </button>
+ <button mat-button mat-icon-button color="accent" (click)="editLink()" *ngIf="editMode"><i
+ class="material-icons">edit</i></button>
+ <button mat-button mat-icon-button color="accent" (click)="deleteLink()" *ngIf="editMode"><i
+ class="material-icons">delete</i></button>
</div>
</div>
</div>
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
index 8e80a29ae..646aa931a 100644
--- a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
@@ -26,3 +26,11 @@
margin-right: 15px;
font-weight: 500;
}
+
+.link-icon {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ padding: 5px;
+ color: var(--color-bg-1);
+}
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
index c012491fe..49dd4fd98 100644
--- a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
@@ -19,6 +19,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AssetLink, AssetLinkType } from '@streampipes/platform-services';
+import { Router } from '@angular/router';
@Component({
selector: 'sp-asset-link-item-component',
@@ -47,15 +48,16 @@ export class SpAssetLinkItemComponent implements OnInit {
currentAssetLinkType: AssetLinkType;
+ constructor(private router: Router) {
+
+ }
+
ngOnInit(): void {
- console.log(this.assetLinkTypes);
- console.log(this.assetLink);
this.currentAssetLinkType = this.assetLinkTypes.find(t => t.linkType === this.assetLink.linkType);
- console.log(this.currentAssetLinkType);
}
openLink(): void {
-
+ this.router.navigate([...this.currentAssetLinkType.navPaths, this.assetLink.resourceId]);
}
editLink(): void {
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
index 98ad239b9..5622b582a 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
@@ -28,8 +28,8 @@
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="sp-tree" #tree>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'"
- fxLayout="row" fxFlex="100">
- <span (click)="selectNode(node)" fxLayoutAlign="end center">{{node.assetName}}</span>
+ fxLayout="row" fxFlex="100" (click)="selectNode(node)" >
+ <span fxLayoutAlign="end center">{{node.assetName}}</span>
<div fxLayoutAlign="end center" fxFlex *ngIf="editMode">
<button mat-button
mat-icon-button
@@ -54,8 +54,8 @@
</mat-icon>
</button>
<div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'"
- fxLayout="row" fxFlex="100">
- <span (click)="selectNode(node)" fxLayoutAlign="start center">{{node.assetName}}</span>
+ fxLayout="row" fxFlex="100" (click)="selectNode(node)" >
+ <span fxLayoutAlign="start center">{{node.assetName}}</span>
<div fxLayoutAlign="end center" fxFlex *ngIf="editMode">
<button mat-button
mat-icon-button
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
index de5182a55..164b1fe5a 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
@@ -58,9 +58,11 @@
font-size: 13pt;
width: 100%;
margin-right: 10px;
+ padding-left: 5px;
}
.selected-node {
font-weight: bold;
- border-bottom: 4px solid var(--color-primary);
+ background: var(--color-bg-2);
+ border-bottom: 2px solid var(--color-primary);
}
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
index 06a1ce8d9..4bf1f1d14 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
@@ -66,14 +66,12 @@ export class SpAssetSelectionPanelComponent implements OnInit {
node.assets.push(this.makeNewAsset());
this.dataSource.data = [this.assetModel];
this.treeControl.dataNodes = [this.assetModel];
- this.dataSource.data = null;
- this.dataSource.data = [this.assetModel];
+ this.rerenderTree();
}
deleteAsset(node: SpAsset) {
this.removeAssetWithId(this.assetModel.assets, node.assetId);
- this.dataSource.data = null;
- this.dataSource.data = [this.assetModel];
+ this.rerenderTree();
}
removeAssetWithId(assets: SpAsset[], id: string) {
@@ -88,6 +86,14 @@ export class SpAssetSelectionPanelComponent implements OnInit {
}
}
+ rerenderTree(): void {
+ this.dataSource.data = null;
+ this.dataSource.data = [this.assetModel];
+ this.treeControl.expandAll();
+
+
+ }
+
makeNewAsset(): SpAsset {
return {assetId: this.makeAssetId(), assetName: 'New Asset', assetDescription: '', assetLinks: [], assetType: undefined, assets: []};
}
diff --git a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
index 5fe1e927c..9e6c0ba64 100644
--- a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
+++ b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
@@ -23,30 +23,57 @@
<div fxFlex style="margin:5px;width:100%" fxLayout="column">
<mat-form-field color="accent">
<mat-label>Link Type</mat-label>
- <mat-select fxFlex [(ngModel)]="clonedAssetLink.linkType"
+ <mat-select fxFlex [(value)]="clonedAssetLink.linkType"
required (selectionChange)="onLinkTypeChanged($event)">
<mat-option *ngFor="let assetLinkType of assetLinkTypes"
- [value]="assetLinkType.linkType">{{assetLinkType.linkLabel}}</mat-option>
+ [value]="assetLinkType.linkQueryHint">{{assetLinkType.linkLabel}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="selectedLinkType === 'pipeline'" fxLayout="column">
<mat-form-field color="accent" fxFlex="100">
<mat-label>Pipelines</mat-label>
- <mat-select [(ngModel)]="clonedAssetLink.resourceId" fxFlex
+ <mat-select [(ngModel)]="currentResource"
+ fxFlex (selectionChange)="changeLabel($event.value._id, $event.value.name, $event.value)"
required>
<mat-option *ngFor="let pipeline of pipelines"
- [value]="pipeline._id">{{pipeline.name}}</mat-option>
+ [value]="pipeline">{{pipeline.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div *ngIf="selectedLinkType === 'dashboard'" fxLayout="column">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Dashboards</mat-label>
+ <mat-select (selectionChange)="changeLabel($event.value._id, $event.value.name, $event.value)"
+ [(value)]="currentResource"
+ fxFlex
+ required>
+ <mat-option *ngFor="let dashboard of dashboards"
+ [value]="dashboard">{{dashboard.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="selectedLinkType === 'data-view'" fxLayout="column">
<mat-form-field color="accent" fxFlex="100">
<mat-label>Data Views</mat-label>
- <mat-select [(ngModel)]="clonedAssetLink.resourceId" fxFlex
+ <mat-select (selectionChange)="changeLabel($event.value._id, $event.value.name, $event.value)"
+ [(value)]="currentResource"
+ fxFlex
required>
<mat-option *ngFor="let dataView of dataViews"
- [value]="dataView._id">{{dataView.name}}</mat-option>
+ [value]="dataView">{{dataView.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div *ngIf="selectedLinkType === 'measurement'" fxLayout="column">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Data Lake Storage</mat-label>
+ <mat-select (selectionChange)="changeLabel($event.value._id, $event.value.name, $event.value)"
+ [(value)]="currentResource"
+ fxFlex
+ required>
+ <mat-option *ngFor="let measure of dataLakeMeasures"
+ [value]="measure">{{measure.measureName}}</mat-option>
</mat-select>
</mat-form-field>
</div>
@@ -66,7 +93,7 @@
<button mat-button
mat-raised-button
color="accent"
- (click)="store()" data-cy="sp-file-management-store-file" style="margin-right:10px;">
+ (click)="store()" style="margin-right:10px;" [disabled]="!clonedAssetLink.resourceId">
{{createMode ? 'Create ' : 'Update' }} link
</button>
<button mat-button mat-raised-button class="mat-basic" (click)="cancel()" style="margin-right:10px;">
diff --git a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
index e94f3ea0c..71d450979 100644
--- a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
+++ b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
@@ -20,13 +20,16 @@ import { Component, Input, OnInit } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
import {
AssetLink,
- AssetLinkType, Dashboard, DashboardService,
+ AssetLinkType,
+ Dashboard,
+ DashboardService,
+ DataLakeMeasure,
DataViewDataExplorerService,
- GenericStorageService, Pipeline,
+ GenericStorageService,
+ Pipeline,
PipelineService
} from '@streampipes/platform-services';
-import { AssetConstants } from '../../constants/asset.constants';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
import { zip } from 'rxjs';
import { MatSelectChange } from '@angular/material/select';
@@ -54,6 +57,10 @@ export class EditAssetLinkDialogComponent implements OnInit {
pipelines: Pipeline[];
dataViews: Dashboard[];
dashboards: Dashboard[];
+ dataLakeMeasures: DataLakeMeasure[];
+
+ allResources: any[] = [];
+ currentResource: any;
selectedLinkType: string;
@@ -67,14 +74,11 @@ export class EditAssetLinkDialogComponent implements OnInit {
ngOnInit(): void {
this.getAllResources();
this.clonedAssetLink = {...this.assetLink};
+ this.selectedLinkType = this.getCurrAssetLinkType().linkType;
}
getCurrAssetLinkType(): AssetLinkType {
- if (this.createMode) {
- return this.assetLinkTypes[0];
- } else {
- return this.assetLinkTypes.find(a => a.linkType === this.assetLink.linkType);
- }
+ return this.assetLinkTypes.find(a => a.linkType === this.assetLink.linkType);
}
store() {
@@ -90,15 +94,31 @@ export class EditAssetLinkDialogComponent implements OnInit {
zip(
this.pipelineService.getOwnPipelines(),
this.dataViewService.getDataViews(),
- this.dashboardService.getDashboards()).subscribe(response => {
+ this.dashboardService.getDashboards(),
+ this.dataViewService.getAllPersistedDataStreams()).subscribe(response => {
this.pipelines = response[0];
this.dataViews = response[1];
this.dashboards = response[2];
+ this.dataLakeMeasures = response[3];
+
+ this.allResources = [...this.pipelines, ...this.dataViews, ...this.dashboards, ...this.dataLakeMeasures];
+ if (!this.createMode) {
+ this.currentResource = this.allResources.find(r => r._id === this.clonedAssetLink.resourceId);
+ }
});
}
onLinkTypeChanged(event: MatSelectChange): void {
this.selectedLinkType = event.value;
+ const linkType = this.assetLinkTypes.find(a => a.linkType === this.selectedLinkType);
+ this.clonedAssetLink.editingDisabled = false;
+ this.clonedAssetLink.linkType = linkType.linkType;
+ }
+
+ changeLabel(id: string, label: string, currentResource: any) {
+ this.clonedAssetLink.resourceId = id;
+ this.clonedAssetLink.linkLabel = label;
+ this.currentResource = currentResource;
}
}
diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss
index e440d6868..33d41be73 100644
--- a/ui/src/scss/_variables.scss
+++ b/ui/src/scss/_variables.scss
@@ -16,7 +16,7 @@
*
*/
-$sp-color-primary: rgb(57, 181, 74);
+$sp-color-primary: rgb(57, 181, 74);
$sp-color-primary-light: rgb(59, 205, 76);
$sp-color-accent: #1b1464;
$sp-color-accent-light-blue: rgb(59, 92, 149);
@@ -29,3 +29,11 @@ $sp-color-processor: #009688;
$sp-color-sink: #3F51B5;
$sp-color-error: #B71C1C;
+
+body {
+ --color-data-view: rgb(122, 206, 227);
+ --color-dashboard: rgb(76, 115, 164);
+ --color-adapter: rgb(182, 140, 97);
+ --color-stream: $sp-color-stream;
+
+}