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 2020/09/18 05:36:57 UTC
[incubator-streampipes] branch rel/0.67.0 updated: [hotfix] Make
pipeline table sortable
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch rel/0.67.0
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/rel/0.67.0 by this push:
new 7dc34f4 [hotfix] Make pipeline table sortable
7dc34f4 is described below
commit 7dc34f4e28994d709ec450fb03881ae3a66b5c7e
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Sep 18 07:36:15 2020 +0200
[hotfix] Make pipeline table sortable
---
.../components/pipeline-overview/pipeline-overview.component.html | 8 ++++----
.../components/pipeline-overview/pipeline-overview.component.ts | 6 +++++-
ui/src/app/pipelines/pipelines.module.ts | 6 +++++-
3 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
index d6d8a3e..f305fa9 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
@@ -17,7 +17,7 @@
-->
<div fxFlex="100" fxLayout="column" *ngIf="filteredPipelinesAvailable" style="margin:1px;">
- <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;">
+ <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 pipeline">
@@ -35,7 +35,7 @@
</ng-container>
<ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef> Name</th>
+ <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
<td mat-cell *matCellDef="let pipeline">
<h4 style="margin-bottom:0px;">{{pipeline.name}}</h4>
<h5>{{pipeline.description != '' ? pipeline.description : '-'}}</h5>
@@ -66,7 +66,7 @@
<i class="material-icons">mode_edit</i>
</button>
</span>
- <span fxFlex fxFlexOrder="3" layout="row" fxLayoutAlign="center center">
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
<button color="primary" mat-button mat-icon-button matTooltip="Delete pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.showDeleteDialog(pipeline, refreshPipelinesEmitter)">
<i class="material-icons">delete</i>
@@ -81,7 +81,7 @@
</table>
<div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="10"></mat-paginator>
+ <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
</div>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!filteredPipelinesAvailable">
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
index 5e8b59e..dfe0e95 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
@@ -21,6 +21,7 @@ import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from "@angula
import {PipelineOperationsService} from "../../services/pipeline-operations.service";
import {MatTableDataSource} from "@angular/material/table";
import {MatPaginator} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
@Component({
@@ -48,6 +49,8 @@ export class PipelineOverviewComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
pageSize: number = 1;
+ @ViewChild(MatSort) sort: MatSort;
+
starting: any;
stopping: any;
@@ -100,12 +103,13 @@ export class PipelineOverviewComponent implements OnInit {
this.dataSource = new MatTableDataSource<Pipeline>(this.filterPipelines());
setTimeout(() => {
this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
});
}
filterPipelines(): Pipeline[] {
let filteredPipelines: Pipeline[] = this._pipelines.filter(pipeline => !(this._activeCategoryId) || (pipeline.pipelineCategories && pipeline.pipelineCategories.some(pc => pc === this.activeCategoryId)));
this.filteredPipelinesAvailable = filteredPipelines.length > 0;
- return filteredPipelines;
+ return filteredPipelines.sort((a, b) => a.name.localeCompare(b.name));
}
}
\ No newline at end of file
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index 3dd1a0b..8bd32ff 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -34,6 +34,8 @@ import {StartAllPipelinesDialogComponent} from "./dialog/start-all-pipelines/sta
import {PipelineCategoriesDialogComponent} from "./dialog/pipeline-categories/pipeline-categories-dialog.component";
import {FormsModule} from "@angular/forms";
import {PipelineInCategoryPipe} from "./pipeline-category.filter";
+import {MatSortModule} from "@angular/material/sort";
+import {MatTableModule} from "@angular/material/table";
@NgModule({
imports: [
@@ -43,7 +45,9 @@ import {PipelineInCategoryPipe} from "./pipeline-category.filter";
MatButtonModule,
CustomMaterialModule,
CommonModule,
- MatProgressSpinnerModule
+ MatProgressSpinnerModule,
+ MatSortModule,
+ MatTableModule
],
declarations: [
DeletePipelineDialogComponent,