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:20 UTC
[incubator-streampipes] 04/04: [STREAMPIPES-558] Add options toolbar to adapter overview component
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 dbfd35bad5ddcb60bd5a41914815e4f9f8d9ef4c
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sat Jul 9 10:04:05 2022 +0200
[STREAMPIPES-558] Add options toolbar to adapter overview component
---
.../existing-adapters.component.html | 27 +++------------
.../existing-adapters.component.ts | 39 ++++++++++------------
ui/src/app/connect/connect.module.ts | 8 ++---
.../{filter.pipe.ts => adapter-filter.pipe.ts} | 16 +++++----
4 files changed, 33 insertions(+), 57 deletions(-)
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
index f15618f0a..b55acba35 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -32,7 +32,7 @@
<h4>My adapters</h4>
<span fxFlex></span>
<button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
- (click)="updateAdapterEmitter.emit()">
+ (click)="getAdaptersRunning()">
<i class="material-icons">
refresh
</i>
@@ -102,38 +102,19 @@
<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">
+ </span>
+ <span fxFlex fxFlexOrder="2" 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">
+ <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)="deleteAdapter(adapter)">
<i class="material-icons">delete</i>
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
index 275a1f9a8..b25e49f1c 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { AdapterDescriptionUnion, PipelineElementService } from '@streampipes/platform-services';
import { MatTableDataSource } from '@angular/material/table';
import { ConnectService } from '../../services/connect.service';
@@ -31,6 +31,7 @@ import { AuthService } from '../../../services/auth.service';
import { HelpComponent } from '../../../editor/dialog/help/help.component';
import { Router } from '@angular/router';
import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.model';
+import { AdapterFilterPipe } from '../../filter/adapter-filter.pipe';
@Component({
selector: 'sp-existing-adapters',
@@ -40,15 +41,9 @@ import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.
export class ExistingAdaptersComponent implements OnInit {
existingAdapters: AdapterDescriptionUnion[] = [];
+ filteredAdapters: AdapterDescriptionUnion[] = [];
- @Input()
- filterTerm: string;
-
- @Output()
- updateAdapterEmitter: EventEmitter<void> = new EventEmitter<void>();
-
- @Output()
- createTemplateEmitter: EventEmitter<AdapterDescriptionUnion> = new EventEmitter<AdapterDescriptionUnion>();
+ currentFilter: AdapterFilterSettingsModel;
@ViewChild(MatPaginator) paginator: MatPaginator;
pageSize = 1;
@@ -64,7 +59,8 @@ export class ExistingAdaptersComponent implements OnInit {
private dialogService: DialogService,
private authService: AuthService,
private pipelineElementService: PipelineElementService,
- private router: Router) {
+ private router: Router,
+ private adapterFilter: AdapterFilterPipe) {
}
@@ -77,13 +73,13 @@ export class ExistingAdaptersComponent implements OnInit {
startAdapter(adapter: AdapterDescriptionUnion) {
this.dataMarketplaceService.startAdapter(adapter).subscribe(response => {
- this.updateAdapterEmitter.emit();
+ this.getAdaptersRunning();
});
}
stopAdapter(adapter: AdapterDescriptionUnion) {
this.dataMarketplaceService.stopAdapter(adapter).subscribe(response => {
- this.updateAdapterEmitter.emit();
+ this.getAdaptersRunning();
});
}
@@ -109,7 +105,7 @@ export class ExistingAdaptersComponent implements OnInit {
dialogRef.afterClosed().subscribe(refresh => {
if (refresh) {
- this.updateAdapterEmitter.emit();
+ this.getAdaptersRunning();
}
});
}
@@ -126,7 +122,7 @@ export class ExistingAdaptersComponent implements OnInit {
dialogRef.afterClosed().subscribe(data => {
if (data) {
- this.updateAdapterEmitter.emit();
+ this.getAdaptersRunning();
}
});
}
@@ -148,20 +144,16 @@ export class ExistingAdaptersComponent implements OnInit {
});
}
-
- createTemplate(adapter: AdapterDescriptionUnion): void {
- this.createTemplateEmitter.emit(adapter);
- }
-
getAdaptersRunning(): void {
this.dataMarketplaceService.getAdapters().subscribe(adapters => {
this.existingAdapters = adapters;
- this.dataSource = new MatTableDataSource(this.existingAdapters);
+ this.existingAdapters.sort((a, b) => a.name.localeCompare(b.name));
+ this.filteredAdapters = this.adapterFilter.transform(this.existingAdapters, this.currentFilter);
+ this.dataSource = new MatTableDataSource(this.filteredAdapters);
setTimeout(() => {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
- //this.filteredAdapters = this.existingAdapters;
});
}
@@ -170,7 +162,10 @@ export class ExistingAdaptersComponent implements OnInit {
}
applyFilter(filter: AdapterFilterSettingsModel) {
-
+ this.currentFilter = filter;
+ if (this.dataSource) {
+ this.dataSource.data = this.adapterFilter.transform(this.filteredAdapters, this.currentFilter);
+ }
}
}
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 8726839d8..6a1e08d8e 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -49,7 +49,7 @@ import { IconService } from './services/icon.service';
import { UnitProviderService } from './services/unit-provider.service';
-import { FilterPipe } from './filter/filter.pipe';
+import { AdapterFilterPipe } from './filter/adapter-filter.pipe';
import { AdapterExportDialog } from './dialog/adapter-export/adapter-export-dialog.component';
import { AdapterUploadDialog } from './dialog/adapter-upload/adapter-upload-dialog.component';
import { EditEventPropertyListComponent } from './dialog/edit-event-property/components/edit-event-property-list/edit-event-property-list.component';
@@ -83,9 +83,7 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
import { FormatItemJsonComponent } from './components/new-adapter/format-configuration/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';
+import { SpConnectFilterToolbarComponent } from './components/filter-toolbar/filter-toolbar.component';
@NgModule({
imports: [
@@ -145,7 +143,7 @@ import {
EditDataTypeComponent,
EventSchemaPreviewComponent,
ExistingAdaptersComponent,
- FilterPipe,
+ AdapterFilterPipe,
FormatItemComponent,
FormatListComponent,
NewAdapterComponent,
diff --git a/ui/src/app/connect/filter/filter.pipe.ts b/ui/src/app/connect/filter/adapter-filter.pipe.ts
similarity index 89%
rename from ui/src/app/connect/filter/filter.pipe.ts
rename to ui/src/app/connect/filter/adapter-filter.pipe.ts
index 37a8f775f..8691a938b 100644
--- a/ui/src/app/connect/filter/filter.pipe.ts
+++ b/ui/src/app/connect/filter/adapter-filter.pipe.ts
@@ -16,23 +16,25 @@
*
*/
-import { Pipe, PipeTransform } from '@angular/core';
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { AdapterDescriptionUnion } from '@streampipes/platform-services';
import { AdapterFilterSettingsModel } from '../model/adapter-filter-settings.model';
import { ConnectService } from '../services/connect.service';
-@Pipe({
- name: 'adapterFilter'
-})
-
-export class FilterPipe implements PipeTransform {
+@Pipe({ name: 'adapterFilter' })
+@Injectable({ providedIn: 'root' })
+export class AdapterFilterPipe implements PipeTransform {
constructor(private connectService: ConnectService) {
}
transform(adapterDescriptions: AdapterDescriptionUnion[],
activeFilters: AdapterFilterSettingsModel): AdapterDescriptionUnion[] {
- return adapterDescriptions.filter(a => this.meetsFilterCondition(a, activeFilters));
+ if (!activeFilters) {
+ return adapterDescriptions;
+ } else {
+ return adapterDescriptions.filter(a => this.meetsFilterCondition(a, activeFilters));
+ }
}
private meetsFilterCondition(adapterDescription: AdapterDescriptionUnion,