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/18 20:18:57 UTC
[incubator-streampipes] branch STREAMPIPES-545 created (now f4b2fad56)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch STREAMPIPES-545
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
at f4b2fad56 [STREAMPIPES-545] Add initial view for managing assets
This branch includes the following new commits:
new f4b2fad56 [STREAMPIPES-545] Add initial view for managing assets
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-streampipes] 01/01: [STREAMPIPES-545] Add initial view for managing assets
Posted by ri...@apache.org.
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 f4b2fad56ec7a6362c0cd6b4f2d3a028c227ec21
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Jul 18 22:18:43 2022 +0200
[STREAMPIPES-545] Add initial view for managing assets
---
ui/deployment/dev/config.yml | 1 +
ui/deployment/modules.yml | 15 +++
.../src/lib/model/assets/asset.model.ts | 37 ++++---
ui/src/app/_enums/page-name.enum.ts | 1 +
ui/src/app/assets/assets.module.ts | 94 +++++++++++++++++
.../page-name.enum.ts => assets/assets.routes.ts} | 21 ++--
.../asset-details-panel.component.html | 39 +++++++
.../asset-details-panel.component.scss} | 16 ---
.../asset-details-panel.component.ts | 18 ++++
.../asset-details/asset-details.component.html | 51 ++++++++++
.../asset-details/asset-details.component.scss} | 27 +++--
.../asset-details/asset-details.component.ts | 37 +++++++
.../asset-selection-panel.component.html | 51 ++++++++++
.../asset-selection-panel.component.scss} | 48 +++++----
.../asset-selection-panel.component.ts | 35 +++++++
.../asset-overview/asset-overview.component.html | 113 +++++++++++++++++++++
.../asset-overview/asset-overview.component.scss} | 16 +--
.../asset-overview/asset-overview.component.ts | 93 +++++++++++++++++
.../constants/asset.constants.ts} | 17 +---
.../asset-upload-dialog.component.html | 68 +++++++++++++
.../asset-upload-dialog.component.scss} | 16 +--
.../asset-upload/asset-upload-dialog.component.ts | 77 ++++++++++++++
22 files changed, 768 insertions(+), 123 deletions(-)
diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml
index 8a72ac568..dc1acdfef 100644
--- a/ui/deployment/dev/config.yml
+++ b/ui/deployment/dev/config.yml
@@ -25,5 +25,6 @@ modules:
- spDataExplorer
- spAppOverview
- spAdd
+ - spAssets
- spFiles
- spConfiguration
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index f71f14a63..8655b53f0 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -13,6 +13,21 @@
# See the License for the specific language governing permissions and
# limitations under the License.
+
+spAssets:
+ componentImport: False
+ ng5_moduleName: 'AssetsModule'
+ ng5_component: 'EditorComponent'
+ ng5_componentPath: './editor/editor.component'
+ path: './assets/assets.module'
+ link: 'assets'
+ url: '/editor/:pipeline'
+ title: 'Asset Management'
+ description: 'Manage assets which help assigning pipelines, dashboards and adapters to real-world objects such as machines and plants.'
+ icon: 'precision_manufacturing'
+ homeImage: ''
+ admin: true
+ pageNames: 'PageName.ASSETS'
spEditor:
componentImport: True
ng5_moduleName: 'EditorModule'
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 3f006a246..59e849dcc 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
@@ -16,18 +16,6 @@
*
*/
-export interface StorageItem {
- _id: string;
- _rev: string;
-}
-
-export interface AssetLink {
- linkId: string;
- linkPaths: string[];
- linkType: string;
- linkLabel: string;
-}
-
export interface AssetType {
assetIcon: string;
assetIconColor: string;
@@ -35,11 +23,28 @@ export interface AssetType {
assetTypeLabel: string;
}
-export interface SimpleAsset extends StorageItem {
+export interface AssetLink {
+ resourceId: string;
+ linkType: 'data-view' | 'dashboard' | 'adapter' | 'stream' | string;
+ linkLabel: string;
+ editingDisabled: boolean;
+}
+
+export interface SpAsset {
assetId: string;
- assetType: AssetType;
assetName: string;
assetDescription: string;
- links: AssetLink[];
- assets: SimpleAsset[];
+
+ assetType: AssetType;
+ assetLinks: AssetLink[];
+
+ assets: SpAsset[];
}
+
+export interface SpAssetModel extends SpAsset {
+ _id: string;
+ _rev: string;
+
+ removable: boolean;
+}
+
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/_enums/page-name.enum.ts
index 472780aa8..a681bcc02 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/_enums/page-name.enum.ts
@@ -30,4 +30,5 @@ export enum PageName {
FILE_UPLOAD,
PROFILE,
SETTINGS,
+ ASSETS
}
diff --git a/ui/src/app/assets/assets.module.ts b/ui/src/app/assets/assets.module.ts
new file mode 100644
index 000000000..f66dce7fe
--- /dev/null
+++ b/ui/src/app/assets/assets.module.ts
@@ -0,0 +1,94 @@
+/*
+ * 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.
+ *
+ */
+
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { PlatformServicesModule } from '@streampipes/platform-services';
+import { RouterModule } from '@angular/router';
+import { SharedUiModule } from '@streampipes/shared-ui';
+import { SpAssetOverviewComponent } from './components/asset-overview/asset-overview.component';
+import { AssetUploadDialogComponent } from './dialog/asset-upload/asset-upload-dialog.component';
+import { SpAssetDetailsComponent } from './components/asset-details/asset-details.component';
+import { SpAssetSelectionPanelComponent } from './components/asset-details/asset-selection-panel/asset-selection-panel.component';
+import { SpAssetDetailsPanelComponent } from './components/asset-details/asset-details-panel/asset-details-panel.component';
+import { MatTreeModule } from '@angular/material/tree';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ CustomMaterialModule,
+ FlexLayoutModule,
+ MatGridListModule,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ MatIconModule,
+ MatInputModule,
+ MatCheckboxModule,
+ MatDividerModule,
+ MatTooltipModule,
+ FormsModule,
+ DragDropModule,
+ CoreUiModule,
+ ReactiveFormsModule,
+ PlatformServicesModule,
+ RouterModule.forChild([
+ {
+ path: 'assets',
+ children: [
+ {
+ path: '',
+ redirectTo: 'overview',
+ pathMatch: 'full'
+ },
+ {
+ path: 'overview',
+ component: SpAssetOverviewComponent
+ },
+ {
+ path: 'details/:assetId',
+ component: SpAssetDetailsComponent
+ }
+ ]
+ }
+ ]),
+ SharedUiModule,
+ MatTreeModule,
+ ],
+ declarations: [
+ AssetUploadDialogComponent,
+ SpAssetDetailsComponent,
+ SpAssetDetailsPanelComponent,
+ SpAssetOverviewComponent,
+ SpAssetSelectionPanelComponent,
+ ],
+ providers: [],
+})
+export class AssetsModule {}
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/assets.routes.ts
similarity index 75%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/assets.routes.ts
index 472780aa8..bacff6031 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/assets.routes.ts
@@ -16,18 +16,11 @@
*
*/
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
+import { SpBreadcrumbItem, } from '@streampipes/shared-ui';
+
+export class SpAssetRoutes {
+
+ static BASE: SpBreadcrumbItem = {label: 'Asset Management', link: ['assets']};
+ static CREATE: SpBreadcrumbItem = {label: 'New Asset', link: ['assets', 'create']};
+
}
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
new file mode 100644
index 000000000..c14309519
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
@@ -0,0 +1,39 @@
+<!--
+ ~ 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.
+ ~
+ -->
+
+<div fxFlex="100" fxLayout="column" class="page-container-padding-inner" *ngIf="asset">
+ <sp-basic-header-title-component [title]="asset.assetName"></sp-basic-header-title-component>
+
+ <sp-basic-inner-panel panelTitle="Basics" outerMargin="20px 0px">
+ <div fxLayout="column" fxFlex="100">
+ <div>Name: {{asset.assetName}}</div>
+ <div>Description: {{asset.assetDescription}}</div>
+ </div>
+ </sp-basic-inner-panel>
+
+
+ <sp-basic-inner-panel panelTitle="Asset Links" outerMargin="20px 0px">
+ <div fxLayout="column" fxFlex="100">
+ <div fxLayout="column" *ngFor="let link of asset.assetLinks">
+ <div>ResourceId: {{link.resourceId}}</div>
+ <div>Label: {{link.linkLabel}}</div>
+ <div>Link Type: {{link.linkType}}</div>
+ </div>
+ </div>
+ </sp-basic-inner-panel>
+</div>
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.scss
similarity index 77%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.scss
index 472780aa8..13cbc4aac 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.scss
@@ -15,19 +15,3 @@
* limitations under the License.
*
*/
-
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
-}
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
new file mode 100644
index 000000000..ae668bc2d
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SpAsset } from '@streampipes/platform-services';
+
+
+@Component({
+ selector: 'sp-asset-details-panel-component',
+ templateUrl: './asset-details-panel.component.html',
+ styleUrls: ['./asset-details-panel.component.scss']
+})
+export class SpAssetDetailsPanelComponent implements OnInit {
+
+ @Input()
+ asset: SpAsset;
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/assets/components/asset-details/asset-details.component.html b/ui/src/app/assets/components/asset-details/asset-details.component.html
new file mode 100644
index 000000000..ce7849c72
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.html
@@ -0,0 +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.
+ ~
+ -->
+<sp-basic-view [showBackLink]="true" [backLinkTarget]="['assets']" [padding]="false">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+
+ <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="column" *ngIf="asset">
+ <mat-drawer-container class="designer-panel-container h-100 dashboard-grid">
+ <mat-drawer #designerDrawer
+ [opened]="true"
+ mode="side"
+ position="start"
+ class="designer-panel">
+ <div fxLayout="column" fxFlex="100">
+ <sp-asset-selection-panel-component
+ [assetModel]="asset"
+ (selectedAssetEmitter)="selectedAsset = $event">
+ </sp-asset-selection-panel-component>
+ </div>
+ </mat-drawer>
+ <mat-drawer-content class="h-100 dashboard-grid">
+ <sp-asset-details-panel-component
+ *ngIf="selectedAsset"
+ [asset]="selectedAsset"
+ fxFlex="100"
+ fxLayout="row">
+
+ </sp-asset-details-panel-component>
+ </mat-drawer-content>
+ </mat-drawer-container>
+ </div>
+</sp-basic-view>
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/components/asset-details/asset-details.component.scss
similarity index 78%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/components/asset-details/asset-details.component.scss
index 472780aa8..676e7ab69 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.scss
@@ -16,18 +16,17 @@
*
*/
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
+.dashboard-grid {
+ display:flex;
+ flex-direction: column;
+ flex: 1 1 100%;
+}
+
+.designer-panel-container {
+ width: 100%;
+ height: 100%;
+}
+
+.designer-panel {
+ width: 400px;
}
diff --git a/ui/src/app/assets/components/asset-details/asset-details.component.ts b/ui/src/app/assets/components/asset-details/asset-details.component.ts
new file mode 100644
index 000000000..7cb5869bd
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { SpBreadcrumbService } from '@streampipes/shared-ui';
+import { ActivatedRoute } from '@angular/router';
+import { AssetConstants } from '../../constants/asset.constants';
+import { GenericStorageService, SpAsset, SpAssetModel } from '@streampipes/platform-services';
+import { SpAssetRoutes } from '../../assets.routes';
+
+@Component({
+ selector: 'sp-asset-details-component',
+ templateUrl: './asset-details.component.html',
+ styleUrls: ['./asset-details.component.scss']
+})
+export class SpAssetDetailsComponent implements OnInit {
+
+ asset: SpAssetModel;
+
+ selectedAsset: SpAsset;
+
+ constructor(private breadcrumbService: SpBreadcrumbService,
+ private genericStorageService: GenericStorageService,
+ private route: ActivatedRoute) {
+
+ }
+
+ ngOnInit(): void {
+ const assetId = this.route.snapshot.params.assetId;
+ this.loadAsset(assetId);
+ }
+
+ loadAsset(assetId: string): void {
+ this.genericStorageService.getDocument(AssetConstants.ASSET_APP_DOC_NAME, assetId).subscribe(asset => {
+ this.asset = asset;
+ this.breadcrumbService.updateBreadcrumb([SpAssetRoutes.BASE, {label: this.asset.assetName}]);
+ console.log(this.asset);
+ });
+ }
+}
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
new file mode 100644
index 000000000..66eb05ca6
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
@@ -0,0 +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.
+ ~
+ -->
+
+<div fxFlex="100" fxLayout="column" class="designer-panel-content" *ngIf="assetModel">
+ <div fxLayout="row" class="sp-tab-bg designer-panel-header">
+ <div fxLayoutAlign="start center" class="designer-panel-title"><h4>Asset Browser</h4></div>
+ <div fxFlex fxLayoutAlign="end end">
+
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <div fxFlex fxLayout="column" class="designer-panel-config">
+ <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="sp-tree">
+ <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+ <span (click)="selectNode(node)">{{node.assetName}}</span>
+ </mat-tree-node>
+ <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+ <div class="mat-tree-node">
+ <button mat-icon-button matTreeNodeToggle
+ [attr.data-cy]="'button-' +node.nodeName"
+ [attr.aria-label]="'Toggle ' + node.nodeName">
+ <mat-icon class="mat-icon-rtl-mirror">
+ {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+ </mat-icon>
+ </button>
+ <span (click)="selectNode(node)">{{node.assetName}}</span>
+ </div>
+ <div [class.sp-tree-invisible]="!treeControl.isExpanded(node)"
+ role="group">
+ <ng-container matTreeNodeOutlet></ng-container>
+ </div>
+ </mat-nested-tree-node>
+ </mat-tree>
+ </div>
+ </div>
+</div>
diff --git a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
similarity index 62%
copy from ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
copy to ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
index 3f006a246..0435c97d6 100644
--- a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
@@ -16,30 +16,38 @@
*
*/
-export interface StorageItem {
- _id: string;
- _rev: string;
+.designer-panel-content {
+ padding: 0;
+ overflow-y: auto;
}
-export interface AssetLink {
- linkId: string;
- linkPaths: string[];
- linkType: string;
- linkLabel: string;
+.designer-panel-config {
+ padding: 0;
}
-export interface AssetType {
- assetIcon: string;
- assetIconColor: string;
- assetTypeCategory: string;
- assetTypeLabel: string;
+.designer-panel-title {
+ margin-left: 5px;
}
-export interface SimpleAsset extends StorageItem {
- assetId: string;
- assetType: AssetType;
- assetName: string;
- assetDescription: string;
- links: AssetLink[];
- assets: SimpleAsset[];
+.designer-panel-header {
+ border-bottom:1px solid var(--color-tab-border);
+}
+
+.sp-tree-invisible {
+ display: none;
+}
+
+.sp-tree ul,
+.sp-tree li {
+ margin-top: 0;
+ margin-bottom: 0;
+ list-style-type: none;
+}
+
+.sp-tree .mat-nested-tree-node div[role=group] {
+ padding-left: 40px;
+}
+
+.sp-tree div[role=group] > .mat-tree-node {
+ padding-left: 40px;
}
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
new file mode 100644
index 000000000..ad0c81692
--- /dev/null
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SpAsset, SpAssetModel } from '@streampipes/platform-services';
+import { NestedTreeControl } from '@angular/cdk/tree';
+import { MatTreeNestedDataSource } from '@angular/material/tree';
+
+@Component({
+ selector: 'sp-asset-selection-panel-component',
+ templateUrl: './asset-selection-panel.component.html',
+ styleUrls: ['./asset-selection-panel.component.scss']
+})
+export class SpAssetSelectionPanelComponent implements OnInit {
+
+ @Input()
+ assetModel: SpAssetModel;
+
+ @Output()
+ selectedAssetEmitter: EventEmitter<SpAsset> = new EventEmitter<SpAsset>();
+
+ treeControl = new NestedTreeControl<SpAsset>(node => node.assets);
+ dataSource = new MatTreeNestedDataSource<SpAsset>();
+
+ hasChild = (_: number, node: SpAsset) => !!node.assets && node.assets.length > 0;
+
+ ngOnInit(): void {
+ this.treeControl = new NestedTreeControl<SpAsset>(node => node.assets);
+ this.dataSource = new MatTreeNestedDataSource<SpAsset>();
+ this.dataSource.data = [this.assetModel];
+ }
+
+ selectNode(asset: SpAsset) {
+ this.selectedAssetEmitter.emit(asset);
+ }
+
+
+}
diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.html b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
new file mode 100644
index 000000000..60c86d681
--- /dev/null
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
@@ -0,0 +1,113 @@
+<!--
+ ~ 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.
+ ~
+ -->
+<sp-basic-view [showBackLink]="false" [padding]="true">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ data-cy="connect-create-new-adapter-button"
+ (click)="createNewAsset()">
+ <i class="material-icons">add</i> New asset
+ </button>
+ <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+ <button mat-button mat-icon-button matTooltip="Refresh assets" matTooltipPosition="below" color="accent"
+ (click)="loadAssets()">
+ <i class="material-icons">
+ refresh
+ </i>
+ </button>
+ <button mat-button mat-icon-button matTooltip="Refresh assets" matTooltipPosition="below" color="accent"
+ (click)="uploadAsset()">
+ <i class="material-icons">
+ cloud_upload
+ </i>
+ </button>
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-header-title-component title="My assets"></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
+ <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90" [hideToolbar]="true">
+ <div fxFlex="100" fxLayout="column" *ngIf="existingAssets.length > 0">
+ <div fxFlex="100" fxLayout="column">
+ <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
+
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
+ <td mat-cell *matCellDef="let asset">
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <div fxLayoutAlign="start center">
+ <i class="material-icons">precision_manufacturing</i>
+ </div>
+ <div fxLayoutAlign="center start" fxLayout="column" class="ml-10">
+ <h4 style="margin-bottom:0px;">{{asset.assetName}}</h4>
+ <h5>{{asset.assetDescription != '' ? asset.assetDescription : '-'}}</h5>
+ </div>
+ </div>
+
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef style="justify-content: center;"> Actions</th>
+ <td mat-cell *matCellDef="let asset">
+ <div fxLayout="row">
+ <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
+ <button color="accent" mat-button mat-icon-button matTooltip="Show info"
+ matTooltipPosition="above" (click)="goToDetailsView(asset)"><i
+ class="material-icons">search</i>
+ </button>
+ </span>
+ <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
+<!-- <button color="accent" mat-button mat-icon-button matTooltip="Manage permissions"-->
+ <!-- matTooltipPosition="above" (click)="showPermissionsDialog(adapter)"><i-->
+ <!-- class="material-icons">share</i>-->
+ <!-- </button>-->
+ </span>
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
+ <button color="accent" mat-button mat-icon-button matTooltip="Delete adapter"
+ data-cy="delete" matTooltipPosition="above" (click)="deleteAsset(asset)">
+ <i class="material-icons">delete</i>
+ </button>
+ </span>
+ </div>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+ </table>
+ </div>
+ <div fxFlex="100" fxLayoutAlign="end end">
+ <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"
+ [pageSize]="20"
+ color="accent">
+ </mat-paginator>
+ </div>
+ </div>
+ <div fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="existingAssets.length == 0">
+ <h5>(no assets available)</h5>
+ </div>
+ </sp-basic-inner-panel>
+ </div>
+ </div>
+</sp-basic-view>
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
similarity index 78%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/components/asset-overview/asset-overview.component.scss
index 472780aa8..d1728955a 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
@@ -16,18 +16,6 @@
*
*/
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
+.ml-10 {
+ margin-left: 10px;
}
diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
new file mode 100644
index 000000000..225a0a9cd
--- /dev/null
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
@@ -0,0 +1,93 @@
+/*
+ * 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.
+ *
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { GenericStorageService, SpAssetModel } from '@streampipes/platform-services';
+import { AssetConstants } from '../../constants/asset.constants';
+import { DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
+import { SpAssetRoutes } from '../../assets.routes';
+import { AssetUploadDialogComponent } from '../../dialog/asset-upload/asset-upload-dialog.component';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'sp-asset-overview-component',
+ templateUrl: './asset-overview.component.html',
+ styleUrls: ['./asset-overview.component.scss']
+})
+export class SpAssetOverviewComponent implements OnInit {
+
+ existingAssets: SpAssetModel[] = [];
+
+ displayedColumns: string[] = ['name', 'action'];
+
+ dataSource: MatTableDataSource<SpAssetModel>;
+
+ constructor(private genericStorageService: GenericStorageService,
+ private breadcrumbService: SpBreadcrumbService,
+ private dialogService: DialogService,
+ private router: Router) {
+
+ }
+
+ ngOnInit(): void {
+ this.breadcrumbService.updateBreadcrumb(this.breadcrumbService.getRootLink(SpAssetRoutes.BASE));
+ this.loadAssets();
+ }
+
+ loadAssets(): void {
+ this.genericStorageService.getAllDocuments(AssetConstants.ASSET_APP_DOC_NAME).subscribe(result => {
+ this.existingAssets = result as SpAssetModel[];
+ this.dataSource = new MatTableDataSource<SpAssetModel>(this.existingAssets);
+ });
+ }
+
+ createNewAsset() {
+
+ }
+
+ uploadAsset() {
+ const dialogRef = this.dialogService.open(AssetUploadDialogComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Upload asset model',
+ width: '40vw',
+ });
+
+ dialogRef.afterClosed().subscribe(reload => {
+ if (reload) {
+ this.loadAssets();
+ }
+ });
+ }
+
+ goToDetailsView(asset: SpAssetModel) {
+ this.router.navigate(['assets', 'details', asset._id]);
+ }
+
+ deleteAsset(asset: SpAssetModel) {
+ this.genericStorageService.deleteDocument(
+ AssetConstants.ASSET_APP_DOC_NAME,
+ asset._id,
+ asset._rev)
+ .subscribe(result => {
+ this.loadAssets();
+ });
+ }
+
+
+}
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/constants/asset.constants.ts
similarity index 78%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/constants/asset.constants.ts
index 472780aa8..c0bcb1988 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/constants/asset.constants.ts
@@ -16,18 +16,7 @@
*
*/
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
+export class AssetConstants {
+
+ public static ASSET_APP_DOC_NAME = 'asset-management';
}
diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html
new file mode 100644
index 000000000..9cd6bf1ce
--- /dev/null
+++ b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html
@@ -0,0 +1,68 @@
+<!--
+~ 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.
+~
+-->
+
+
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content p-15">
+ <div fxFlex="100" fxLayout="column">
+ <div fxFlex style="margin:5px;width:100%" fxLayout="column">
+ <mat-form-field style="width: 95%" (click)="fileInput.click();" color="accent">
+ <mat-label>Upload JSON file</mat-label>
+ <input matInput placeholder="File" disabled (value)="fileName">
+ <input #fileInput type="file" style="display:none;"
+ (change)="handleFileInput($event.target.files)"
+ data-cy="sp-file-management-file-input">
+ <div>
+ {{fileName}}
+ <mat-progress-bar mode="determinate" value="{{uploadStatus}}" *ngIf="uploadStatus > 0" color="accent"></mat-progress-bar>
+ </div>
+ <button color="accent" matSuffix
+ mat-button style="min-width: 0px">
+ <mat-icon *ngIf="uploadStatus < 99">insert_drive_file</mat-icon>
+ <mat-icon *ngIf="uploadStatus == 100" class="green-icon">check_circle</mat-icon>
+ </button>
+ <mat-error *ngIf="!hasInput">
+ {{errorMessage}}
+ </mat-error>
+ </mat-form-field>
+ </div>
+ <div fxFlex="100">
+ <mat-form-field style="width: 100%;height: 100%;" color="accent">
+ <mat-label>Insert model</mat-label>
+ <textarea matInput [(ngModel)]="jsonModel" style="height: 100%;"
+ cdkTextareaAutosize
+ cdkAutosizeMinRows="30"
+ cdkAutosizeMaxRows="30"></textarea>
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="jsonModel === undefined"
+ (click)="store()" data-cy="sp-file-management-store-file" style="margin-right:10px;">
+ Create asset
+ </button>
+ <button mat-button mat-raised-button class="mat-basic" (click)="cancel()" style="margin-right:10px;">
+ Cancel
+ </button>
+ </div>
+</div>
diff --git a/ui/src/app/_enums/page-name.enum.ts b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss
similarity index 78%
copy from ui/src/app/_enums/page-name.enum.ts
copy to ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss
index 472780aa8..d25ee7413 100644
--- a/ui/src/app/_enums/page-name.enum.ts
+++ b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss
@@ -16,18 +16,4 @@
*
*/
-export enum PageName {
- HOME,
- PIPELINE_EDITOR,
- CONNECT,
- PIPELINE_OVERVIEW,
- PIPELINE_DETAILS,
- DASHBOARD,
- DATA_EXPLORER,
- APPS,
- NOTIFICATIONS,
- INSTALL_PIPELINE_ELEMENTS,
- FILE_UPLOAD,
- PROFILE,
- SETTINGS,
-}
+@import 'src/scss/sp/sp-dialog';
\ No newline at end of file
diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts
new file mode 100644
index 000000000..b1f52f129
--- /dev/null
+++ b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ *
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { DialogRef } from '@streampipes/shared-ui';
+import { GenericStorageService } from '@streampipes/platform-services';
+import { AssetConstants } from '../../constants/asset.constants';
+
+@Component({
+ selector: 'sp-file-upload-dialog-component',
+ templateUrl: './asset-upload-dialog.component.html',
+ styleUrls: ['./asset-upload-dialog.component.scss']
+})
+export class AssetUploadDialogComponent implements OnInit {
+
+ inputValue: string;
+ fileName: string;
+
+ jsonModel: string;
+
+ hasInput: boolean;
+ errorMessage = 'Please enter a value';
+
+ uploadStatus = 0;
+
+ constructor(private dialogRef: DialogRef<AssetUploadDialogComponent>,
+ private genericStorageService: GenericStorageService) {
+
+ }
+
+ ngOnInit(): void {
+ }
+
+ handleFileInput(files: any) {
+ this.uploadStatus = 0;
+
+ const fr = new FileReader();
+
+ fr.onload = (ev => {
+ const jsonObject = JSON.parse(ev.target.result as string);
+ this.jsonModel = JSON.stringify(jsonObject, null, 2);
+ });
+
+ fr.readAsText(files.item(0));
+ }
+
+ store() {
+ this.uploadStatus = 0;
+ if (this.jsonModel !== undefined) {
+ const jsonObject = JSON.parse(this.jsonModel);
+ jsonObject._rev = undefined;
+ this.genericStorageService.createDocument(AssetConstants.ASSET_APP_DOC_NAME, jsonObject).subscribe(result => {
+ this.dialogRef.close(true);
+ });
+ }
+ }
+
+ cancel() {
+ this.dialogRef.close();
+ }
+
+}