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/09 08:04:17 UTC
[incubator-streampipes] 01/04: [STREAMPIPES-558] Modify navigation flow of Connect module
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 2a68ddda6b03fc308aec9c92dae4a1f826501765
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Fri Jul 8 22:44:54 2022 +0200
[STREAMPIPES-558] Modify navigation flow of Connect module
---
ui/deployment/modules.yml | 2 +-
.../data-marketplace.component.html | 105 ++++----------
.../data-marketplace/data-marketplace.component.ts | 64 +++-----
.../existing-adapters.component.html | 146 -------------------
.../existing-adapters.component.html | 154 ++++++++++++++++++++
.../existing-adapters.component.scss | 0
.../existing-adapters.component.ts | 44 +++---
.../filter-toolbar/filter-toolbar.component.html | 31 ++++
.../filter-toolbar/filter-toolbar.component.scss | 0
.../filter-toolbar/filter-toolbar.component.ts | 42 ++++++
.../new-adapter/new-adapter.component.html | 139 +++++++++---------
.../new-adapter/new-adapter.component.ts | 107 ++++++++------
ui/src/app/connect/connect.module.ts | 161 ++++++++++++---------
13 files changed, 532 insertions(+), 463 deletions(-)
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index a02603d6c..f12f05d4f 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -28,7 +28,7 @@ spEditor:
admin: false
pageNames: 'PageName.PIPELINE_EDITOR'
spConnect:
- componentImport: True
+ componentImport: False
ng5_moduleName: 'ConnectModule'
ng5_component: 'ConnectComponent'
ng5_componentPath: './connect/connect.component'
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index 07e0171dc..cd37e8489 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -16,17 +16,9 @@
~
-->
-<div fxLayout="column" fxFlex="100" class="page-container page-container-padding page-container-connect">
- <div fxLayout="row" style="padding:0px;" class="sp-tab-bg">
- <div fxLayout="fill" class="page-container-nav">
- <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)"
- color="accent">
- <mat-tab label="Data Marketplace">
- </mat-tab>
- <mat-tab id="all-adapters" label="My Adapters">
- </mat-tab>
- </mat-tab-group>
- </div>
+<sp-basic-view showBackLink="true" [backLinkTarget]="['connect']" [padding]="true">
+
+ <div nav fxFlex="100">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"
style="padding-left:10px;padding-right:10px;font-size:14px;" class="page-container-nav"
*ngIf="selectedIndex === 0 && newAdapterFromDescription === undefined">
@@ -36,78 +28,39 @@
</button>
</div>
</div>
+ <div fxLayout="column" fxFlex="100">
- <div fxLayout="row" class="fixed-height data-marketplace-options">
-
- <div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center"
- fxLayout="row">
- <mat-icon color="accent">search</mat-icon>
- <mat-form-field class="form-style">
- <input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)"
- name="something">
- </mat-form-field>
+ <div class="container-fluid marketplace-container" *ngIf="adapterLoadingError" fxFlex="100"
+ fxLayoutAlign="center center" fxLayout="row">
+ <h4>Available adapters could not be loaded. Did you start a Connect worker node?</h4>
</div>
- <div class="data-marketplace-options-item">
- <mat-form-field color="accent">
- <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)">
- <mat-option *ngFor="let type of adapterTypes" [value]="type">
- {{type}}
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <div class="container-fluid marketplace-container" *ngIf="adaptersLoading" fxFlex="100"
+ fxLayoutAlign="center center" fxLayout="row">
+ <mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner>
+ <h4> Searching for available adapters, please wait...</h4>
</div>
- <div class="data-marketplace-options-item">
- <mat-form-field color="accent">
- <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)">
- <mat-option *ngFor="let category of adapterCategories" [value]="category.code">
- {{category.label}}
- </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <span fxFlex></span>
-
- </div>
- <div class="container-fluid marketplace-container" *ngIf="adapterLoadingError" fxFlex="100"
- fxLayoutAlign="center center" fxLayout="row">
- <h4>Available adapters could not be loaded. Did you start a Connect worker node?</h4>
- </div>
- <div class="container-fluid marketplace-container" *ngIf="adaptersLoading" fxFlex="100"
- fxLayoutAlign="center center" fxLayout="row">
- <mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner>
- <h4> Searching for available adapters, please wait...</h4>
- </div>
- <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError">
- <div *ngIf="selectedIndex === 0">
-
- <div *ngIf="newAdapterFromDescription===undefined" fxLayout="row wrap" fxLayoutAlign="start stretch"
- class="adapter-description-container">
- <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
- class="adapter-description"
- fxFlex="33" (click)="selectAdapter(adapterDescription)"
- *ngFor="let adapterDescription of filteredAdapterDescriptions | filter:filterTerm"
- [adapter]="adapterDescription"
- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
- </div>
+ <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError">
+ <div *ngIf="selectedIndex === 0">
+ <div *ngIf="newAdapterFromDescription===undefined" fxLayout="row wrap" fxLayoutAlign="start stretch"
+ class="adapter-description-container">
+ <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
+ class="adapter-description"
+ fxFlex="33" (click)="selectAdapter(adapterDescription.appId)"
+ *ngFor="let adapterDescription of filteredAdapterDescriptions | filter:filterTerm"
+ [adapter]="adapterDescription"
+ (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
+ </div>
- <div class="new-adapter-container" fxFlex="100" fxLayout="row" fxLayoutAlign="start start"
- *ngIf="newAdapterFromDescription!==undefined">
- <sp-new-adapter fxFlex="100" (removeSelectionEmitter)="removeSelection($event)"
- [adapter]="newAdapterFromDescription"
- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-new-adapter>
- </div>
- </div>
- <div *ngIf="selectedIndex === 1">
- <div fxFlex="100" class="adapter-container">
- <sp-existing-adapters [existingAdapters]="filteredAdapters"
- [filterTerm]="filterTerm"
- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"
- (createTemplateEmitter)="templateFromRunningAdapter($event)">
+<!-- <div class="new-adapter-container" fxFlex="100" fxLayout="row" fxLayoutAlign="start start"-->
+<!-- *ngIf="newAdapterFromDescription!==undefined">-->
+<!-- <sp-new-adapter fxFlex="100" (removeSelectionEmitter)="removeSelection($event)"-->
+<!-- [adapter]="newAdapterFromDescription"-->
+<!-- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-new-adapter>-->
+<!-- </div>-->
- </sp-existing-adapters>
</div>
</div>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
index a49adcd4f..95e454535 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
@@ -23,6 +23,7 @@ import { ConnectService } from '../../services/connect.service';
import { FilterPipe } from '../../filter/filter.pipe';
import { AdapterDescriptionUnion } from '@streampipes/platform-services';
import { DialogService } from '@streampipes/shared-ui';
+import { Router } from '@angular/router';
@Component({
selector: 'sp-data-marketplace',
@@ -43,11 +44,7 @@ export class DataMarketplaceComponent implements OnInit {
selectedIndex = 0;
filterTerm = '';
pipe: FilterPipe = new FilterPipe();
- adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
- selectedType = 'All types';
- adapterCategories: any;
- selectedCategory: any = 'All';
adaptersLoading = true;
adapterLoadingError = false;
@@ -55,25 +52,17 @@ export class DataMarketplaceComponent implements OnInit {
constructor(private dataMarketplaceService: DataMarketplaceService,
private shepherdService: ShepherdService,
private connectService: ConnectService,
- private dialogService: DialogService) {
+ private dialogService: DialogService,
+ private router: Router) {
}
ngOnInit() {
this.updateDescriptionsAndRunningAdatpers();
- this.loadAvailableTypeCategories();
this.visibleAdapters = this.adapters;
}
- loadAvailableTypeCategories() {
- this.dataMarketplaceService.getAdapterCategories().subscribe(res => {
- this.adapterCategories = res;
- this.adapterCategories.unshift({ label: 'All categories', description: '', code: 'All' });
- });
- }
-
updateDescriptionsAndRunningAdatpers() {
this.getAdapterDescriptions();
- this.getAdaptersRunning();
}
getAdapterDescriptions(): void {
@@ -96,12 +85,7 @@ export class DataMarketplaceComponent implements OnInit {
});
}
- getAdaptersRunning(): void {
- this.dataMarketplaceService.getAdapters().subscribe(adapters => {
- this.adapters = adapters;
- this.filteredAdapters = this.adapters;
- });
- }
+
selectedIndexChange(index: number) {
this.selectedIndex = index;
@@ -119,20 +103,16 @@ export class DataMarketplaceComponent implements OnInit {
this.shepherdService.startAdapterTour3();
}
- selectAdapter(adapterDescription: AdapterDescriptionUnion) {
- this.newAdapterFromDescription = this.dataMarketplaceService.cloneAdapterDescription(adapterDescription);
- (this.newAdapterFromDescription as any).templateTitle = this.newAdapterFromDescription.name;
- this.newAdapterFromDescription.name = '';
- this.newAdapterFromDescription.description = '';
-
- this.shepherdService.trigger('select-adapter');
+ selectAdapter(appId: string) {
+ this.router.navigate(['connect', 'create', appId]);
+ // this.shepherdService.trigger('select-adapter');
}
templateFromRunningAdapter(adapter: AdapterDescriptionUnion) {
adapter.elementId = undefined;
adapter._rev = undefined;
this.selectedIndexChange(0);
- this.selectAdapter(adapter);
+ //this.selectAdapter(adapter);
}
@@ -156,21 +136,25 @@ export class DataMarketplaceComponent implements OnInit {
}
filterAdapterCategory(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
- if (this.selectedCategory === this.adapterCategories[0].code) {
- return currentElements;
- } else {
- return currentElements.filter(adapterDescription => adapterDescription.category.indexOf(this.selectedCategory) !== -1);
- }
+ // TODO
+ // if (this.selectedCategory === this.adapterCategories[0].code) {
+ // return currentElements;
+ // } else {
+ // return currentElements.filter(adapterDescription => adapterDescription.category.indexOf(this.selectedCategory) !== -1);
+ // }
+ return [];
}
filterAdapterType(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
- if (this.selectedType === this.adapterTypes[0]) {
- return currentElements;
- } else if (this.selectedType === this.adapterTypes[1]) {
- return currentElements.filter(adapterDescription => this.connectService.isDataSetDescription(adapterDescription));
- } else if (this.selectedType === this.adapterTypes[2]) {
- return currentElements.filter(adapterDescription => !this.connectService.isDataSetDescription(adapterDescription));
- }
+ // TODO
+ // if (this.selectedType === this.adapterTypes[0]) {
+ // return currentElements;
+ // } else if (this.selectedType === this.adapterTypes[1]) {
+ // return currentElements.filter(adapterDescription => this.connectService.isDataSetDescription(adapterDescription));
+ // } else if (this.selectedType === this.adapterTypes[2]) {
+ // return currentElements.filter(adapterDescription => !this.connectService.isDataSetDescription(adapterDescription));
+ // }
+ return [];
}
}
diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html
deleted file mode 100644
index d1ee145a8..000000000
--- a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html
+++ /dev/null
@@ -1,146 +0,0 @@
-<!--
- ~ 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">
- <div class="assemblyOptions sp-blue-bg mt-20" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>My adapters</h4>
- <span fxFlex></span>
- <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
- (click)="updateAdapterEmitter.emit()">
- <i class="material-icons">
- refresh
- </i>
- </button>
- </div>
- </div>
- <div class="sp-blue-border">
- <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
- <ng-container matColumnDef="start">
- <th mat-header-cell *matHeaderCellDef> Start</th>
- <td mat-cell *matCellDef="let adapter">
- <button color="accent" mat-button mat-icon-button matTooltip="Start adapter"
- matTooltipPosition="above"
- (click)="startAdapter(adapter)"
- *ngIf="(connectService.isDataStreamDescription(adapter)) && !adapter.running">
- <i class="material-icons">play_arrow</i>
- </button>
- <button color="accent" mat-button mat-icon-button matTooltip="Stop adapter"
- matTooltipPosition="above"
- (click)="stopAdapter(adapter)"
- *ngIf="(connectService.isDataStreamDescription(adapter)) && adapter.running">
- <i class="material-icons">stop</i>
- </button>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
- <td mat-cell *matCellDef="let adapter">
- <h4 style="margin-bottom:0px;">{{adapter.name}}</h4>
- <h5>{{adapter.description != '' ? adapter.description : '-'}}</h5>
- </td>
- </ng-container>
- <ng-container matColumnDef="adapterBase">
- <th mat-header-cell *matHeaderCellDef> Adapter</th>
- <td mat-cell *matCellDef="let adapter">
- <img *ngIf="getIconUrl(adapter) && !adapter.icon" [src]="getIconUrl(adapter)" class="adapter-icon"/>
- <img *ngIf="adapter.icon" [src]="adapter.icon" class="adapter-icon"/>
- </td>
- </ng-container>
- <ng-container matColumnDef="adapterType">
- <th mat-header-cell *matHeaderCellDef> Type</th>
- <td mat-cell *matCellDef="let adapter">
- <div class="type-data" fxLayout="row" fxLayoutAlign="start start">
- <div fxLayout="row" fxLayoutAlign="center center">
- <mat-icon *ngIf="connectService.isDataSetDescription(adapter)" class="historic">lens
- </mat-icon>
- <mat-icon *ngIf="connectService.isDataStreamDescription(adapter)" class="real-time">lens
- </mat-icon>
- <div fxFlex="100" fxLayoutAlign="center center">
- <span *ngIf="connectService.isDataSetDescription(adapter)"> Data Set</span>
- <span *ngIf="connectService.isDataStreamDescription(adapter)"> Data Stream</span>
- </div>
- </div>
- </div>
- </td>
- </ng-container>
- <ng-container matColumnDef="lastModified">
- <th mat-header-cell *matHeaderCellDef> Created</th>
- <td mat-cell *matCellDef="let adapter">
- <h5>{{adapter.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef> Action</th>
- <td mat-cell *matCellDef="let adapter">
- <div fxLayout="row">
- <!-- <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">-->
- <!-- <button color="primary" mat-button mat-icon-button matTooltip="Show adapter"-->
- <!-- matTooltipPosition="above"><i-->
- <!-- class="material-icons">search</i>-->
- <!-- </button>-->
- <!-- </span>-->
- <!-- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">-->
- <!-- <button color="primary" mat-button mat-icon-button matTooltip="Modify adapter"-->
- <!-- matTooltipPosition="above"-->
- <!-- [disabled]="adapter.running">-->
- <!-- <i class="material-icons">mode_edit</i>-->
- <!-- </button>-->
- <!-- </span>-->
- <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
- <button color="accent" mat-button mat-icon-button matTooltip="Show info"
- matTooltipPosition="above" (click)="openHelpDialog(adapter)"><i
- class="material-icons">help_outline</i>
- </button>
- </span>
- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
- <button color="accent" mat-button mat-icon-button matTooltip="Create adapter template"
- matTooltipPosition="above" (click)="createTemplate(adapter)"><i
- class="material-icons">content_copy</i>
- </button>
- </span>
- <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center" *ngIf="isAdmin">
- <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="4" fxLayout="row" fxLayoutAlign="center center">
- <button color="accent" mat-button mat-icon-button matTooltip="Delete adapter"
- data-cy="delete" matTooltipPosition="above" (click)="deleteAdapter(adapter)">
- <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"></mat-paginator>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="existingAdapters.length == 0">
- <h5>(no adapters available)</h5>
- </div>
-</div>
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
new file mode 100644
index 000000000..8ee8694a0
--- /dev/null
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -0,0 +1,154 @@
+<!--
+ ~ 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="0">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+ <button mat-button mat-raised-button color="accent" (click)="createNewAdapter()">
+ <i class="material-icons">add</i> New adapter
+ </button>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <div class="assemblyOptions sp-blue-bg mt-20" style="padding:5px;">
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <h4>My adapters</h4>
+ <span fxFlex></span>
+ <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
+ (click)="updateAdapterEmitter.emit()">
+ <i class="material-icons">
+ refresh
+ </i>
+ </button>
+ </div>
+ </div>
+ <div class="sp-blue-border">
+ <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
+ <ng-container matColumnDef="start">
+ <th mat-header-cell *matHeaderCellDef> Start</th>
+ <td mat-cell *matCellDef="let adapter">
+ <button color="accent" mat-button mat-icon-button matTooltip="Start adapter"
+ matTooltipPosition="above"
+ (click)="startAdapter(adapter)"
+ *ngIf="(connectService.isDataStreamDescription(adapter)) && !adapter.running">
+ <i class="material-icons">play_arrow</i>
+ </button>
+ <button color="accent" mat-button mat-icon-button matTooltip="Stop adapter"
+ matTooltipPosition="above"
+ (click)="stopAdapter(adapter)"
+ *ngIf="(connectService.isDataStreamDescription(adapter)) && adapter.running">
+ <i class="material-icons">stop</i>
+ </button>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
+ <td mat-cell *matCellDef="let adapter">
+ <h4 style="margin-bottom:0px;">{{adapter.name}}</h4>
+ <h5>{{adapter.description != '' ? adapter.description : '-'}}</h5>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="adapterBase">
+ <th mat-header-cell *matHeaderCellDef> Adapter</th>
+ <td mat-cell *matCellDef="let adapter">
+ <img *ngIf="getIconUrl(adapter) && !adapter.icon" [src]="getIconUrl(adapter)"
+ class="adapter-icon"/>
+ <img *ngIf="adapter.icon" [src]="adapter.icon" class="adapter-icon"/>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="adapterType">
+ <th mat-header-cell *matHeaderCellDef> Type</th>
+ <td mat-cell *matCellDef="let adapter">
+ <div class="type-data" fxLayout="row" fxLayoutAlign="start start">
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <mat-icon *ngIf="connectService.isDataSetDescription(adapter)" class="historic">lens
+ </mat-icon>
+ <mat-icon *ngIf="connectService.isDataStreamDescription(adapter)" class="real-time">lens
+ </mat-icon>
+ <div fxFlex="100" fxLayoutAlign="center center">
+ <span *ngIf="connectService.isDataSetDescription(adapter)"> Data Set</span>
+ <span *ngIf="connectService.isDataStreamDescription(adapter)"> Data Stream</span>
+ </div>
+ </div>
+ </div>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="lastModified">
+ <th mat-header-cell *matHeaderCellDef> Created</th>
+ <td mat-cell *matCellDef="let adapter">
+ <h5>{{adapter.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef> Action</th>
+ <td mat-cell *matCellDef="let adapter">
+ <div fxLayout="row">
+ <!-- <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">-->
+ <!-- <button color="primary" mat-button mat-icon-button matTooltip="Show adapter"-->
+ <!-- matTooltipPosition="above"><i-->
+ <!-- class="material-icons">search</i>-->
+ <!-- </button>-->
+ <!-- </span>-->
+ <!-- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">-->
+ <!-- <button color="primary" mat-button mat-icon-button matTooltip="Modify adapter"-->
+ <!-- matTooltipPosition="above"-->
+ <!-- [disabled]="adapter.running">-->
+ <!-- <i class="material-icons">mode_edit</i>-->
+ <!-- </button>-->
+ <!-- </span>-->
+ <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
+ <button color="accent" mat-button mat-icon-button matTooltip="Show info"
+ matTooltipPosition="above" (click)="openHelpDialog(adapter)"><i
+ class="material-icons">help_outline</i>
+ </button>
+ </span>
+ <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
+ <button color="accent" mat-button mat-icon-button matTooltip="Create adapter template"
+ matTooltipPosition="above" (click)="createTemplate(adapter)"><i
+ class="material-icons">content_copy</i>
+ </button>
+ </span>
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center" *ngIf="isAdmin">
+ <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="4" fxLayout="row" fxLayoutAlign="center center">
+ <button color="accent" mat-button mat-icon-button matTooltip="Delete adapter"
+ data-cy="delete" matTooltipPosition="above" (click)="deleteAdapter(adapter)">
+ <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"></mat-paginator>
+ </div>
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="existingAdapters.length == 0">
+ <h5>(no adapters available)</h5>
+ </div>
+ </div>
+</sp-basic-view>
diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
similarity index 100%
rename from ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss
rename to ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
similarity index 79%
rename from ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts
rename to ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
index 6b3f42eb0..53bc49661 100644
--- a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -19,16 +19,17 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { AdapterDescriptionUnion, PipelineElementService } from '@streampipes/platform-services';
import { MatTableDataSource } from '@angular/material/table';
-import { ConnectService } from '../../../services/connect.service';
-import { DataMarketplaceService } from '../../../services/data-marketplace.service';
+import { ConnectService } from '../../services/connect.service';
+import { DataMarketplaceService } from '../../services/data-marketplace.service';
import { DialogRef, PanelType, DialogService } from '@streampipes/shared-ui';
-import { DeleteAdapterDialogComponent } from '../../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
+import { DeleteAdapterDialogComponent } from '../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
-import { ObjectPermissionDialogComponent } from '../../../../core-ui/object-permission-dialog/object-permission-dialog.component';
-import { UserRole } from '../../../../_enums/user-role.enum';
-import { AuthService } from '../../../../services/auth.service';
-import { HelpComponent } from '../../../../editor/dialog/help/help.component';
+import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permission-dialog/object-permission-dialog.component';
+import { UserRole } from '../../../_enums/user-role.enum';
+import { AuthService } from '../../../services/auth.service';
+import { HelpComponent } from '../../../editor/dialog/help/help.component';
+import { Router } from '@angular/router';
@Component({
selector: 'sp-existing-adapters',
@@ -37,7 +38,7 @@ import { HelpComponent } from '../../../../editor/dialog/help/help.component';
})
export class ExistingAdaptersComponent implements OnInit {
- _existingAdapters: AdapterDescriptionUnion[];
+ existingAdapters: AdapterDescriptionUnion[] = [];
@Input()
filterTerm: string;
@@ -61,18 +62,15 @@ export class ExistingAdaptersComponent implements OnInit {
private dataMarketplaceService: DataMarketplaceService,
private dialogService: DialogService,
private authService: AuthService,
- private pipelineElementService: PipelineElementService) {
+ private pipelineElementService: PipelineElementService,
+ private router: Router) {
}
ngOnInit(): void {
this.authService.user$.subscribe(user => {
this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
- });
- this.dataSource = new MatTableDataSource(this.existingAdapters);
- setTimeout(() => {
- this.dataSource.paginator = this.paginator;
- this.dataSource.sort = this.sort;
+ this.getAdaptersRunning();
});
}
@@ -154,14 +152,20 @@ export class ExistingAdaptersComponent implements OnInit {
this.createTemplateEmitter.emit(adapter);
}
- @Input()
- set existingAdapters(adapters: AdapterDescriptionUnion[]) {
- this._existingAdapters = adapters;
- this.dataSource = new MatTableDataSource(adapters);
+ getAdaptersRunning(): void {
+ this.dataMarketplaceService.getAdapters().subscribe(adapters => {
+ this.existingAdapters = adapters;
+ this.dataSource = new MatTableDataSource(this.existingAdapters);
+ setTimeout(() => {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+ });
+ //this.filteredAdapters = this.existingAdapters;
+ });
}
- get existingAdapters(): AdapterDescriptionUnion[] {
- return this._existingAdapters;
+ createNewAdapter(): void {
+ this.router.navigate(['connect', 'create']);
}
}
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html
new file mode 100644
index 000000000..ce79d7fd7
--- /dev/null
+++ b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html
@@ -0,0 +1,31 @@
+<div fxLayout="row" class="fixed-height data-marketplace-options">
+
+ <div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center"
+ fxLayout="row">
+ <mat-icon color="accent">search</mat-icon>
+ <mat-form-field class="form-style">
+ <input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)"
+ name="something">
+ </mat-form-field>
+ </div>
+ <div class="data-marketplace-options-item">
+ <mat-form-field color="accent">
+ <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)">
+ <mat-option *ngFor="let type of adapterTypes" [value]="type">
+ {{type}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="data-marketplace-options-item">
+ <mat-form-field color="accent">
+ <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)">
+ <mat-option *ngFor="let category of adapterCategories" [value]="category.code">
+ {{category.label}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <span fxFlex></span>
+
+</div>
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts
new file mode 100644
index 000000000..c8dd09a73
--- /dev/null
+++ b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { DataMarketplaceService } from '../../services/data-marketplace.service';
+import { MatSelectChange } from '@angular/material/select';
+
+@Component({
+ selector: 'sp-connect-filter-toolbar',
+ templateUrl: './filter-toolbar.component.html',
+ styleUrls: ['./filter-toolbar.component.scss']
+})
+export class SpConnectFilterToolbarComponent implements OnInit {
+
+ adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
+ selectedType = 'All types';
+
+ adapterCategories: any;
+ selectedCategory: any = 'All';
+
+ constructor(private dataMarketplaceService: DataMarketplaceService) {
+
+ }
+
+ ngOnInit(): void {
+ this.loadAvailableTypeCategories();
+ }
+
+ loadAvailableTypeCategories() {
+ this.dataMarketplaceService.getAdapterCategories().subscribe(res => {
+ this.adapterCategories = res;
+ this.adapterCategories.unshift({ label: 'All categories', description: '', code: 'All' });
+ });
+ }
+
+ filterAdapter(event: MatSelectChange) {
+
+ }
+
+ updateFilterTerm(event: string) {
+
+ }
+
+
+}
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
index c2777ee63..765d60e63 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.html
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
@@ -16,80 +16,83 @@
~
-->
-<div fxLayout="column" fxLayoutAlign="center stretch">
- <div fxLayout="column" fxFlex="100" class="p-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <mat-icon *ngIf="isDataSetDescription" class="historic">lens</mat-icon>
- <mat-icon *ngIf="isDataStreamDescription" class="real-time">lens
- </mat-icon>
- <div fxLayoutAlign="start center">
- <p *ngIf="isDataSetDescription">Data Set</p>
- <p *ngIf="isDataStreamDescription">Data Stream</p>
- </div>
- <span fxFlex></span>
- <div fxLayoutAlign="end start">
- <button mat-icon-button (click)="removeSelection()">
- <i class="material-icons">close</i>
- </button>
+<sp-basic-view [padding]="true" [showBackLink]="false">
+
+ <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+ <button mat-icon-button (click)="removeSelection()">
+ <i class="material-icons">close</i>
+ </button>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="center stretch" *ngIf="adapter">
+ <div fxLayout="column" fxFlex="100" class="p-10">
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <mat-icon *ngIf="isDataSetDescription" class="historic">lens</mat-icon>
+ <mat-icon *ngIf="isDataStreamDescription" class="real-time">lens
+ </mat-icon>
+ <div fxLayoutAlign="start center">
+ <p *ngIf="isDataSetDescription">Data Set</p>
+ <p *ngIf="isDataStreamDescription">Data Stream</p>
+ </div>
+ <span fxFlex></span>
</div>
+ <h1 *ngIf="!fromTemplate" class="new-adapter-title">New Source: {{adapter.templateTitle}}</h1>
+ <h1 *ngIf="fromTemplate" class="new-adapter-title">From Template: {{adapter.templateTitle}}</h1>
</div>
- <h1 *ngIf="!fromTemplate" class="new-adapter-title">New Source: {{adapter.templateTitle}}</h1>
- <h1 *ngIf="fromTemplate" class="new-adapter-title">From Template: {{adapter.templateTitle}}</h1>
- </div>
- <mat-horizontal-stepper [linear]="true" #stepper color="accent" class="stepper">
- <mat-step *ngIf="!isGenericAdapter">
- <ng-template matStepLabel>Settings</ng-template>
- <sp-specific-adapter-configuration
- [adapterDescription]="adapter"
- (clickNextEmitter)="clickSpecificSettingsNextButton()"
- (removeSelectionEmitter)="removeSelection()">
- </sp-specific-adapter-configuration>
- </mat-step>
+ <mat-horizontal-stepper [linear]="true" #stepper color="accent" class="stepper">
+ <mat-step *ngIf="!isGenericAdapter">
+ <ng-template matStepLabel>Settings</ng-template>
+ <sp-specific-adapter-configuration
+ [adapterDescription]="adapter"
+ (clickNextEmitter)="clickSpecificSettingsNextButton()"
+ (removeSelectionEmitter)="removeSelection()">
+ </sp-specific-adapter-configuration>
+ </mat-step>
- <mat-step *ngIf="isGenericAdapter">
- <ng-template matStepLabel>Settings</ng-template>
- <sp-generic-adapter-configuration
- [adapterDescription]="adapter"
- (clickNextEmitter)="clickProtocolSettingsNextButton()"
- (removeSelectionEmitter)="removeSelection()">
- </sp-generic-adapter-configuration>
- </mat-step>
+ <mat-step *ngIf="isGenericAdapter">
+ <ng-template matStepLabel>Settings</ng-template>
+ <sp-generic-adapter-configuration
+ [adapterDescription]="adapter"
+ (clickNextEmitter)="clickProtocolSettingsNextButton()"
+ (removeSelectionEmitter)="removeSelection()">
+ </sp-generic-adapter-configuration>
+ </mat-step>
- <mat-step *ngIf="isGenericAdapter">
- <ng-template matStepLabel>Select Format</ng-template>
- <sp-format-configuration
- [adapterDescription]="adapter"
- (clickNextEmitter)="clickFormatSelectionNextButton()"
- (goBackEmitter)="goBack()"
- (removeSelectionEmitter)="removeSelection()">
- </sp-format-configuration>
- </mat-step>
+ <mat-step *ngIf="isGenericAdapter">
+ <ng-template matStepLabel>Select Format</ng-template>
+ <sp-format-configuration
+ [adapterDescription]="adapter"
+ (clickNextEmitter)="clickFormatSelectionNextButton()"
+ (goBackEmitter)="goBack()"
+ (removeSelectionEmitter)="removeSelection()">
+ </sp-format-configuration>
+ </mat-step>
- <mat-step>
- <ng-template matStepLabel>Define Event Schema</ng-template>
- <sp-event-schema #eschema fxLayout="column" fxFlex="100"
- [(isEditable)]="isEditable"
- [adapterDescription]="adapter"
- [(eventSchema)]="eventSchema"
- [(oldEventSchema)]="oldEventSchema"
- (clickNextEmitter)="clickEventSchemaNextButtonButton()"
- (goBackEmitter)="goBack()"
- (removeSelectionEmitter)="removeSelection()">
- </sp-event-schema>
- </mat-step>
+ <mat-step>
+ <ng-template matStepLabel>Define Event Schema</ng-template>
+ <sp-event-schema #eschema fxLayout="column" fxFlex="100"
+ [(isEditable)]="isEditable"
+ [adapterDescription]="adapter"
+ [(eventSchema)]="eventSchema"
+ [(oldEventSchema)]="oldEventSchema"
+ (clickNextEmitter)="clickEventSchemaNextButtonButton()"
+ (goBackEmitter)="goBack()"
+ (removeSelectionEmitter)="removeSelection()">
+ </sp-event-schema>
+ </mat-step>
- <mat-step>
- <ng-template matStepLabel>Start Adapter</ng-template>
- <sp-start-adapter-configuration
- [adapterDescription]="adapter"
- [eventSchema]="eventSchema"
- (removeSelectionEmitter)="removeSelection()"
- (goBackEmitter)="goBack()"
- (adapterStartedEmitter)="adapterWasStarted()">
- </sp-start-adapter-configuration>
- </mat-step>
+ <mat-step>
+ <ng-template matStepLabel>Start Adapter</ng-template>
+ <sp-start-adapter-configuration
+ [adapterDescription]="adapter"
+ [eventSchema]="eventSchema"
+ (removeSelectionEmitter)="removeSelection()"
+ (goBackEmitter)="goBack()"
+ (adapterStartedEmitter)="adapterWasStarted()">
+ </sp-start-adapter-configuration>
+ </mat-step>
- </mat-horizontal-stepper>
+ </mat-horizontal-stepper>
-</div>
+ </div>
+</sp-basic-view>
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.ts b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
index 1b593b59f..cfdb080ff 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
@@ -16,17 +16,26 @@
*
*/
-import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ ViewChild
+} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';
import {
- AdapterDescriptionUnion,
- EventSchema,
- GenericAdapterSetDescription,
- GenericAdapterStreamDescription,
- SpecificAdapterSetDescription,
- SpecificAdapterStreamDescription,
- TransformationRuleDescriptionUnion
+ AdapterDescriptionUnion,
+ EventSchema,
+ GenericAdapterSetDescription,
+ GenericAdapterStreamDescription,
+ SpecificAdapterSetDescription,
+ SpecificAdapterStreamDescription,
+ TransformationRuleDescriptionUnion
} from '@streampipes/platform-services';
import { ShepherdService } from '../../../services/tour/shepherd.service';
import { ConnectService } from '../../services/connect.service';
@@ -35,6 +44,8 @@ import { RestService } from '../../services/rest.service';
import { EventSchemaComponent } from '../schema-editor/event-schema/event-schema.component';
import { TransformationRuleService } from '../../services/transformation-rule.service';
import { IconService } from '../../services/icon.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataMarketplaceService } from '../../services/data-marketplace.service';
@Component({
selector: 'sp-new-adapter',
@@ -54,15 +65,7 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
@Input()
adapter: AdapterDescriptionUnion;
- @Output()
- removeSelectionEmitter: EventEmitter<void> = new EventEmitter<void>();
-
- @Output()
- updateAdapterEmitter: EventEmitter<void> = new EventEmitter<void>();
-
-
- @ViewChild('stepper', { static: true }) myStepper: MatStepper;
-
+ myStepper: MatStepper;
protocolConfigurationValid: boolean;
formatConfigurationValid: boolean;
@@ -79,10 +82,8 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
// deactivates all edit functions when user starts a template
isEditable = true;
- @ViewChild(EventSchemaComponent, { static: true })
private eventSchemaComponent: EventSchemaComponent;
-
completedStaticProperty: ConfigurationInfo;
isPreviewEnabled = false;
@@ -98,7 +99,10 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
private connectService: ConnectService,
private _formBuilder: FormBuilder,
private iconService: IconService,
- private changeDetectorRef: ChangeDetectorRef) {
+ private changeDetectorRef: ChangeDetectorRef,
+ private route: ActivatedRoute,
+ private dataMarketplaceService: DataMarketplaceService,
+ private router: Router) {
}
handleFileInput(files: any) {
@@ -115,36 +119,44 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
ngOnInit() {
- this.parentForm = this._formBuilder.group({});
+ this.dataMarketplaceService.getAdapterDescriptions().subscribe(adapters => {
+ const adapter = adapters.find(a => a.appId === this.route.snapshot.params.appId);
+ this.adapter = this.dataMarketplaceService.cloneAdapterDescription(adapter);
+ (this.adapter as any).templateTitle = this.adapter.name;
+ this.adapter.name = '';
+ this.adapter.description = '';
+ this.parentForm = this._formBuilder.group({});
- this.isGenericAdapter = this.connectService.isGenericDescription(this.adapter);
- this.isDataSetDescription = this.connectService.isDataSetDescription(this.adapter);
- this.isDataStreamDescription = this.connectService.isDataStreamDescription(this.adapter);
- this.formatConfigurationValid = false;
+ this.isGenericAdapter = this.connectService.isGenericDescription(this.adapter);
+ this.isDataSetDescription = this.connectService.isDataSetDescription(this.adapter);
+ this.isDataStreamDescription = this.connectService.isDataStreamDescription(this.adapter);
+ this.formatConfigurationValid = false;
- // this.startAdapterFormGroup = this._formBuilder.group({
- // startAdapterFormCtrl: ['', Validators.required]
- // });
+ // this.startAdapterFormGroup = this._formBuilder.group({
+ // startAdapterFormCtrl: ['', Validators.required]
+ // });
- this.protocolConfigurationValid = false;
+ this.protocolConfigurationValid = false;
- this.eventSchema = this.connectService.getEventSchema(this.adapter);
+ this.eventSchema = this.connectService.getEventSchema(this.adapter);
- if (this.eventSchema.eventProperties.length > 0) {
+ if (this.eventSchema.eventProperties.length > 0) {
- // Timeout is needed for stepper to work correctly. Without the stepper is frozen when initializing with
- // step 2. Can be removed when a better solution is found.
- setTimeout(() => {
- this.goForward();
- this.goForward();
- }, 1);
+ // Timeout is needed for stepper to work correctly. Without the stepper is frozen when initializing with
+ // step 2. Can be removed when a better solution is found.
+ setTimeout(() => {
+ this.goForward();
+ this.goForward();
+ }, 1);
+
+ this.fromTemplate = true;
+ this.isEditable = false;
+ this.oldEventSchema = this.eventSchema;
+ }
+ });
- this.fromTemplate = true;
- this.isEditable = false;
- this.oldEventSchema = this.eventSchema;
- }
// this.parentForm.statusChanges.subscribe((status) => {
// this.genericadapterSettingsFormValid = this.viewInitialized && this.parentForm.valid;
@@ -159,7 +171,7 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
removeSelection() {
- this.removeSelectionEmitter.emit();
+ this.router.navigate(['connect', 'create']);
}
clickProtocolSettingsNextButton() {
@@ -230,7 +242,14 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
}
public adapterWasStarted() {
- this.updateAdapterEmitter.emit();
- this.removeSelectionEmitter.emit();
+ this.router.navigate(['connect']);
+ }
+
+ @ViewChild(EventSchemaComponent) set schemaComponent(eventSchemaComponent: EventSchemaComponent) {
+ this.eventSchemaComponent = eventSchemaComponent;
+ }
+
+ @ViewChild('stepper') set stepperComponent(stepperComponent: MatStepper) {
+ this.myStepper = stepperComponent;
}
}
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index cad1e3323..d95ec367d 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -68,7 +68,7 @@ import { EventSchemaPreviewComponent } from './components/schema-editor/event-sc
import { CoreUiModule } from '../core-ui/core-ui.module';
// tslint:disable-next-line:max-line-length
import { EditCorrectionValueComponent } from './dialog/edit-event-property/components/edit-correction-value/edit-correction-value.component';
-import { ExistingAdaptersComponent } from './components/data-marketplace/existing-adapters/existing-adapters.component';
+import { ExistingAdaptersComponent } from './components/existing-adapters/existing-adapters.component';
// tslint:disable-next-line:max-line-length
import { SpecificAdapterConfigurationComponent } from './components/specific-adapter-configuration/specific-adapter-configuration.component';
import { ConfigurationGroupComponent } from './components/configuration-group/configuration-group.component';
@@ -81,75 +81,100 @@ import { StartAdapterConfigurationComponent } from './components/start-adapter-c
import { DeleteAdapterDialogComponent } from './dialog/delete-adapter-dialog/delete-adapter-dialog.component';
import { PlatformServicesModule } from '@streampipes/platform-services';
import { FormatItemJsonComponent } from './components/format-item-json/format-item-json.component';
+import { RouterModule } from '@angular/router';
+import { SharedUiModule } from '@streampipes/shared-ui';
+import {
+ SpConnectFilterToolbarComponent
+} from './components/filter-toolbar/filter-toolbar.component';
@NgModule({
- imports: [
- CoreUiModule,
- FormsModule,
- ReactiveFormsModule,
- CommonModule,
- FlexLayoutModule,
- MatGridListModule,
- CustomMaterialModule,
- MatProgressSpinnerModule,
- MatChipsModule,
- MatInputModule,
- MatFormFieldModule,
- MatSliderModule,
- PlatformServicesModule,
- CoreUiModule,
- TreeModule
- ],
- exports: [
- PipelineElementRuntimeInfoComponent
- ],
- declarations: [
- AdapterDescriptionComponent,
- AdapterExportDialog,
- AdapterStartedDialog,
- AdapterUploadDialog,
- ConnectComponent,
- DataMarketplaceComponent,
- DeleteAdapterDialogComponent,
- EventSchemaComponent,
- EditEventPropertyPrimitiveComponent,
- EditEventPropertyComponent,
- EventPropertyRowComponent,
- EditEventPropertyListComponent,
- EditUnitTransformationComponent,
- EditTimestampPropertyComponent,
- EditDataTypeComponent,
- EventSchemaPreviewComponent,
- ExistingAdaptersComponent,
- FilterPipe,
- FormatItemComponent,
- FormatListComponent,
- NewAdapterComponent,
- PipelineElementRuntimeInfoComponent,
- TimestampPipe,
- EditCorrectionValueComponent,
- FormatConfigurationComponent,
- GenericAdapterConfigurationComponent,
- SpecificAdapterConfigurationComponent,
- ConfigurationGroupComponent,
- ErrorMessageComponent,
- LoadingMessageComponent,
- SchemaEditorHeaderComponent,
- StartAdapterConfigurationComponent,
- FormatItemJsonComponent
- ],
- providers: [
- RestService,
- ConnectService,
- DataTypesService,
- TransformationRuleService,
- StaticPropertyUtilService,
- DataMarketplaceService,
- IconService,
- UnitProviderService,
- TimestampPipe,
- XsService
- ]
+ imports: [
+ CoreUiModule,
+ FormsModule,
+ ReactiveFormsModule,
+ CommonModule,
+ FlexLayoutModule,
+ MatGridListModule,
+ CustomMaterialModule,
+ MatProgressSpinnerModule,
+ MatChipsModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatSliderModule,
+ PlatformServicesModule,
+ CoreUiModule,
+ TreeModule,
+ RouterModule.forChild([
+ {
+ path: 'connect',
+ children: [
+ {
+ path: '',
+ component: ExistingAdaptersComponent,
+ pathMatch: 'full'
+ },
+ {
+ path: 'create',
+ component: DataMarketplaceComponent,
+ },
+ {
+ path: 'create/:appId',
+ component: NewAdapterComponent,
+ }]
+ }]),
+ SharedUiModule
+ ],
+ exports: [
+ PipelineElementRuntimeInfoComponent
+ ],
+ declarations: [
+ AdapterDescriptionComponent,
+ AdapterExportDialog,
+ AdapterStartedDialog,
+ AdapterUploadDialog,
+ ConnectComponent,
+ DataMarketplaceComponent,
+ DeleteAdapterDialogComponent,
+ EventSchemaComponent,
+ EditEventPropertyPrimitiveComponent,
+ EditEventPropertyComponent,
+ EventPropertyRowComponent,
+ EditEventPropertyListComponent,
+ EditUnitTransformationComponent,
+ EditTimestampPropertyComponent,
+ EditDataTypeComponent,
+ EventSchemaPreviewComponent,
+ ExistingAdaptersComponent,
+ FilterPipe,
+ FormatItemComponent,
+ FormatListComponent,
+ NewAdapterComponent,
+ PipelineElementRuntimeInfoComponent,
+ TimestampPipe,
+ EditCorrectionValueComponent,
+ FormatConfigurationComponent,
+ GenericAdapterConfigurationComponent,
+ SpecificAdapterConfigurationComponent,
+ ConfigurationGroupComponent,
+ ErrorMessageComponent,
+ LoadingMessageComponent,
+ SchemaEditorHeaderComponent,
+ StartAdapterConfigurationComponent,
+ FormatItemJsonComponent,
+ SpConnectFilterToolbarComponent
+ ],
+ providers: [
+ RestService,
+ ConnectService,
+ DataTypesService,
+ TransformationRuleService,
+ StaticPropertyUtilService,
+ DataMarketplaceService,
+ IconService,
+ UnitProviderService,
+ TimestampPipe,
+ XsService
+ ]
})
export class ConnectModule {
}