Harmonize overview tables (#3002)

* chore: Harmonize layout of resource tables

* Modify page title

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html

@@ -0,0 +1,40 @@
+<!--
+  ~ 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 fxLayout="column">
+    <table mat-table class="sp-table" [dataSource]="dataSource">
+        <ng-content></ng-content>
+
+        <tr mat-header-row *matHeaderRowDef="columns"></tr>
+        <tr mat-row *matRowDef="let row; columns: columns"></tr>
+
+        <tr class="mat-row" *matNoDataRow>
+            <td class="mat-cell" [colSpan]="columns.length">
+                No entries available.
+            </td>
+        </tr>
+    </table>
+    <div fxFlex="100" fxLayoutAlign="end end" class="paginator-container">
+        <mat-paginator
+            #paginator
+            [pageSize]="20"
+            [hidePageSize]="true"
+            [showFirstLastButtons]="true"
+        ></mat-paginator>
+    </div>
+</div>

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss

@@ -0,0 +1,30 @@
+/*!
+ * 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.
+ *
+ */
+
+.paginator-container {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.mat-mdc-row:hover {
+    background-color: var(--color-bg-2);
+}
+
+.mat-mdc-no-data-row {
+    height: var(--mat-table-row-item-container-height, 52px);
+    text-align: center;
+}

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 {
+    AfterContentInit,
+    AfterViewInit,
+    Component,
+    ContentChild,
+    ContentChildren,
+    Input,
+    QueryList,
+    ViewChild,
+} from '@angular/core';
+import {
+    MatColumnDef,
+    MatHeaderRowDef,
+    MatNoDataRow,
+    MatRowDef,
+    MatTable,
+    MatTableDataSource,
+} from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+
+@Component({
+    selector: 'sp-table',
+    templateUrl: './sp-table.component.html',
+    styleUrls: ['./sp-table.component.scss'],
+})
+export class SpTableComponent<T> implements AfterViewInit, AfterContentInit {
+    @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
+    @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
+    @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
+    @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow;
+
+    @ViewChild(MatTable, { static: true }) table: MatTable<T>;
+
+    @Input() columns: string[];
+
+    @Input() dataSource: MatTableDataSource<T>;
+
+    @ViewChild('paginator') paginator: MatPaginator;
+
+    pageSize = 1;
+
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+    }
+
+    ngAfterContentInit() {
+        this.columnDefs.forEach(columnDef =>
+            this.table.addColumnDef(columnDef),
+        );
+        this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
+        this.headerRowDefs.forEach(headerRowDef =>
+            this.table.addHeaderRowDef(headerRowDef),
+        );
+        this.table.setNoDataRow(this.noDataRow);
+    }
+}

ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts

@@ -38,6 +38,10 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatDialogModule } from '@angular/material/dialog';
 import { SplitSectionComponent } from './components/split-section/split-section.component';
 import { SpLabelComponent } from './components/sp-label/sp-label.component';
+import { SpTableComponent } from './components/sp-table/sp-table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 
 @NgModule({
     declarations: [
@@ -51,6 +55,7 @@ import { SpLabelComponent } from './components/sp-label/sp-label.component';
         SpExceptionMessageComponent,
         SpExceptionDetailsDialogComponent,
         SpLabelComponent,
+        SpTableComponent,
         SplitSectionComponent,
     ],
     imports: [
@@ -64,6 +69,9 @@ import { SpLabelComponent } from './components/sp-label/sp-label.component';
         PortalModule,
         OverlayModule,
         MatDialogModule,
+        MatTableModule,
+        MatPaginator,
+        MatSort,
     ],
     exports: [
         ConfirmDialogComponent,
@@ -76,6 +84,7 @@ import { SpLabelComponent } from './components/sp-label/sp-label.component';
         SpExceptionMessageComponent,
         SpExceptionDetailsDialogComponent,
         SpLabelComponent,
+        SpTableComponent,
         SplitSectionComponent,
     ],
 })

ui/projects/streampipes/shared-ui/src/public-api.ts

@@ -34,6 +34,7 @@ export * from './lib/components/split-section/split-section.component';
 export * from './lib/components/sp-exception-message/sp-exception-message.component';
 export * from './lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component';
 export * from './lib/components/sp-label/sp-label.component';
+export * from './lib/components/sp-table/sp-table.component';
 
 export * from './lib/models/sp-navigation.model';
 

ui/src/app/assets/assets.module.ts

@@ -47,6 +47,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
 
 @NgModule({
     imports: [
@@ -91,6 +92,7 @@ import { MatSelectModule } from '@angular/material/select';
         ]),
         SharedUiModule,
         MatTreeModule,
+        MatSortModule,
     ],
     declarations: [
         AssetUploadDialogComponent,