This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 2320d08f5f Harmonize overview tables (#3002)
2320d08f5f is described below
commit 2320d08f5ff5126d00c10f76f34ce95d54fb2d17
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Jul 9 15:14:35 2024 +0200
Harmonize overview tables (#3002)
* chore: Harmonize layout of resource tables
* Modify page title
---
.../components/sp-table/sp-table.component.html | 40 ++
.../components/sp-table/sp-table.component.scss} | 20 +-
.../lib/components/sp-table/sp-table.component.ts | 74 ++++
.../shared-ui/src/lib/shared-ui.module.ts | 9 +
.../streampipes/shared-ui/src/public-api.ts | 1 +
ui/src/app/assets/assets.module.ts | 2 +
.../asset-overview/asset-overview.component.html | 267 ++++-------
.../asset-overview/asset-overview.component.scss | 4 +
.../existing-adapters.component.html | 487 ++++++++-------------
.../existing-adapters.component.scss | 11 +-
.../existing-adapters.component.ts | 10 +-
.../overview/dashboard-overview.component.html | 290 +++++-------
.../overview/dashboard-overview.component.scss | 12 +-
...data-explorer-dashboard-overview.component.html | 260 ++++-------
...data-explorer-dashboard-overview.component.scss | 15 +-
.../file-overview/file-overview.component.html | 132 +++---
.../file-overview/file-overview.component.scss | 14 +-
.../file-overview/file-overview.component.ts | 18 +-
ui/src/app/files/files.component.html | 13 +-
.../functions-overview.component.html | 93 ++--
.../pipeline-overview.component.html | 417 ++++++++----------
.../pipeline-overview.component.scss | 11 +-
.../pipeline-overview.component.ts | 20 +-
ui/src/app/pipelines/pipelines.component.html | 49 +--
24 files changed, 903 insertions(+), 1366 deletions(-)
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
new file mode 100644
index 0000000000..5e8302acb3
--- /dev/null
+++
b/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>
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss
similarity index 78%
copy from ui/src/app/files/components/file-overview/file-overview.component.scss
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss
index 0c0ac54d58..401ee530dc 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
* 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.
@@ -16,23 +16,15 @@
*
*/
-.mat-table {
-}
-
-.mat-paginator {
+.paginator-container {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
-.mat-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-row:nth-child(odd) {
+.mat-mdc-row:hover {
background-color: var(--color-bg-2);
}
-.filetype-container {
- background: #00aeff;
- color: white;
- padding: 5px 15px;
- border-radius: 5px;
+.mat-mdc-no-data-row {
+ height: var(--mat-table-row-item-container-height, 52px);
+ text-align: center;
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
new file mode 100644
index 0000000000..787fd1b2d0
--- /dev/null
+++
b/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);
+ }
+}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index 68b908b6ef..7ac7b79fa8 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/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,
],
})
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index 92d00136ea..a3c62eb635 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/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';
diff --git a/ui/src/app/assets/assets.module.ts
b/ui/src/app/assets/assets.module.ts
index b7c0af37be..13ab8cd223 100644
--- a/ui/src/app/assets/assets.module.ts
+++ b/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,
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
index a31367fe3e..586ca6f8ae 100644
--- a/ui/src/app/assets/components/asset-overview/asset-overview.component.html
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
@@ -55,194 +55,103 @@
</div>
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
- title="My assets"
+ title="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
+ <div fxFlex="90" fxLayout="column">
+ <sp-table
fxFlex="100"
- fxLayout="column"
- *ngIf="existingAssets.length > 0"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
+ matSort
>
- <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>
+ Asset
+ </th>
+ <td
+ mat-cell
+ *matCellDef="let asset"
+ data-cy="assets-table"
>
- <ng-container matColumnDef="name">
- <th
- mat-header-cell
- mat-sort-header
- *matHeaderCellDef
+ <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"
>
- Name
- </th>
- <td
- mat-cell
- *matCellDef="let asset"
- data-cy="assets-table"
+ <h4 style="margin-bottom: 0">
+ {{ 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"
+ ></th>
+ <td mat-cell *matCellDef="let asset">
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Show info"
+ matTooltipPosition="above"
+ (click)="goToDetailsView(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"
+ <i class="material-icons">search</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Edit asset"
+ matTooltipPosition="above"
+ data-cy="edit-asset-button"
+ (click)="goToDetailsView(asset, true)"
>
- Actions
- </th>
- <td mat-cell *matCellDef="let asset">
- <div fxLayout="row">
- <span
- fxFlex
- fxFlexOrder="1"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- color="accent"
- 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-icon-button
- matTooltip="Edit asset"
- matTooltipPosition="above"
- data-cy="edit-asset-button"
- (click)="
- goToDetailsView(asset,
true)
- "
- >
- <i class="material-icons"
- >edit</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="3"
- 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="4"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Delete asset"
- data-cy="delete"
- matTooltipPosition="above"
- (click)="deleteAsset(asset)"
- >
- <i class="material-icons"
- >delete</i
- >
- </button>
- <button
- color="accent"
- mat-icon-button
- matTooltip="Download asset"
- data-cy="download"
- matTooltipPosition="above"
- (click)="downloadAsset(asset)"
- >
- <i class="material-icons"
- >download</i
- >
- </button>
- </span>
- </div>
- </td>
- </ng-container>
+ <i class="material-icons">edit</i>
+ </button>
- <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>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Download asset"
+ data-cy="download"
+ matTooltipPosition="above"
+ (click)="downloadAsset(asset)"
+ >
+ <i class="material-icons">download</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Delete asset"
+ data-cy="delete"
+ matTooltipPosition="above"
+ (click)="deleteAsset(asset)"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+ </sp-table>
+ </div>
</div>
</div>
</sp-basic-view>
diff --git
a/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
b/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
index efc38fc2b0..fdafd80f9c 100644
--- a/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.scss
@@ -16,6 +16,10 @@
*
*/
+.mat-mdc-header-cell {
+ font-weight: bold;
+}
+
.ml-10 {
margin-left: 10px;
}
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 ee553983b9..d2f654bb3e 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
@@ -87,319 +87,200 @@
</div>
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
- title="My adapters"
+ title="Adapters"
></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel
- [showTitle]="false"
- innerPadding="0"
- outerMargin="0"
+ <sp-table
fxFlex="90"
- [hideToolbar]="true"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
+ data-cy="all-adapters-table"
+ matSort
>
- <div
- fxFlex="100"
- fxLayout="column"
- *ngIf="filteredAdapters.length > 0"
- >
- <div fxFlex="100" fxLayout="column">
- <table
- fxFlex="100"
- mat-table
- [dataSource]="dataSource"
- style="width: 100%"
- data-cy="all-adapters-table"
- matSort
+ <ng-container matColumnDef="status">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ Status
+ </th>
+ <td mat-cell *matCellDef="let adapter">
+ <sp-adapter-status-light
+ [adapterRunning]="adapter.running"
+ >
+ </sp-adapter-status-light>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="start">
+ <th mat-header-cell *matHeaderCellDef>Start</th>
+ <td
+ mat-cell
+ *matCellDef="let adapter"
+ data-cy="adapters-table"
+ >
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Start adapter"
+ matTooltipPosition="above"
+ data-cy="start-adapter"
+ (click)="startAdapter(adapter)"
+ *ngIf="!adapter.running"
+ >
+ <i class="material-icons">play_arrow</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Stop adapter"
+ matTooltipPosition="above"
+ data-cy="stop-adapter"
+ (click)="stopAdapter(adapter)"
+ *ngIf="adapter.running"
>
- <ng-container matColumnDef="status">
- <th
- mat-header-cell
- mat-sort-header
- *matHeaderCellDef
- >
- Status
- </th>
- <td mat-cell *matCellDef="let adapter">
- <sp-adapter-status-light
- [adapterRunning]="adapter.running"
- >
- </sp-adapter-status-light>
- </td>
- </ng-container>
- <ng-container matColumnDef="start">
- <th mat-header-cell
*matHeaderCellDef>Start</th>
- <td
- mat-cell
- *matCellDef="let adapter"
- data-cy="adapters-table"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Start adapter"
- matTooltipPosition="above"
- data-cy="start-adapter"
- (click)="startAdapter(adapter)"
- *ngIf="!adapter.running"
- >
- <i
class="material-icons">play_arrow</i>
- </button>
- <button
- color="accent"
- mat-icon-button
- matTooltip="Stop adapter"
- matTooltipPosition="above"
- data-cy="stop-adapter"
- (click)="stopAdapter(adapter)"
- *ngIf="adapter.running"
- >
- <i class="material-icons">stop</i>
- </button>
- </td>
- </ng-container>
+ <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">
- <div>
- <b
- style="margin-bottom: 0"
- data-cy="adapter-name"
- >{{ adapter.name }}</b
- >
- </div>
- <span>{{
- adapter.description !== ''
- ? adapter.description
- : '-'
- }}</span>
- </td>
- </ng-container>
- <ng-container matColumnDef="adapterBase">
- <th mat-header-cell *matHeaderCellDef>
- Adapter
- </th>
- <td mat-cell *matCellDef="let adapter">
- <img
- class="adapter-icon"
- *ngIf="
- getIconUrl(adapter) &&
!adapter.icon
- "
- [src]="getIconUrl(adapter)"
- [alt]="adapter.name"
- />
- <img
- class="adapter-icon"
- *ngIf="adapter.icon"
- [alt]="adapter.name"
- [src]="adapter.icon"
- />
- </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="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ Name
+ </th>
+ <td mat-cell *matCellDef="let adapter">
+ <div>
+ <b
+ style="margin-bottom: 0"
+ data-cy="adapter-name"
+ >{{ adapter.name }}</b
+ >
+ </div>
+ <span>{{
+ adapter.description !== ''
+ ? adapter.description
+ : '-'
+ }}</span>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="adapterBase">
+ <th mat-header-cell *matHeaderCellDef>Adapter</th>
+ <td mat-cell *matCellDef="let adapter">
+ <img
+ class="adapter-icon"
+ *ngIf="getIconUrl(adapter) && !adapter.icon"
+ [src]="getIconUrl(adapter)"
+ [alt]="adapter.name"
+ />
+ <img
+ class="adapter-icon"
+ *ngIf="adapter.icon"
+ [alt]="adapter.name"
+ [src]="adapter.icon"
+ />
+ </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="messagesSent">
- <th
- mat-header-cell
- *matHeaderCellDef
- matTooltip="Messages sent since last start"
- >
- #Messages
- </th>
- <td mat-cell *matCellDef="let adapter">
- <h5 class="monitoring-info">
- {{
- adapterMetrics[adapter.elementId]
- ? adapterMetrics[
- adapter.elementId
- ].messagesOut.counter
- : 0
- }}
- </h5>
- </td>
- </ng-container>
+ <ng-container matColumnDef="messagesSent">
+ <th
+ mat-header-cell
+ *matHeaderCellDef
+ matTooltip="Messages sent since last start"
+ >
+ #Messages
+ </th>
+ <td mat-cell *matCellDef="let adapter">
+ <h5 class="monitoring-info">
+ {{
+ adapterMetrics[adapter.elementId]
+ ? adapterMetrics[adapter.elementId]
+ .messagesOut.counter
+ : 0
+ }}
+ </h5>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="lastMessage">
- <th mat-header-cell *matHeaderCellDef>
- Last message
- </th>
- <td mat-cell *matCellDef="let adapter">
- <h5>
- {{
- adapterMetrics[adapter.elementId]
&&
- adapterMetrics[adapter.elementId]
- .lastTimestamp > 0
- ? (adapterMetrics[
- adapter.elementId
- ].lastTimestamp
- | date: 'dd.MM.yyyy HH:mm')
- : 'n/a'
- }}
- </h5>
- </td>
- </ng-container>
+ <ng-container matColumnDef="lastMessage">
+ <th mat-header-cell *matHeaderCellDef>Last message</th>
+ <td mat-cell *matCellDef="let adapter">
+ <h5>
+ {{
+ adapterMetrics[adapter.elementId] &&
+ adapterMetrics[adapter.elementId]
+ .lastTimestamp > 0
+ ? (adapterMetrics[adapter.elementId]
+ .lastTimestamp
+ | date: 'dd.MM.yyyy HH:mm')
+ : 'n/a'
+ }}
+ </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="accent"
- mat-icon-button
- matTooltip="Show details"
- matTooltipPosition="above"
- data-cy="details-adapter"
- (click)="
-
navigateToDetailsOverviewPage(
- adapter
- )
- "
- >
- <i class="material-icons"
- >search</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="2"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Show info"
- matTooltipPosition="above"
- data-cy="info-adapter"
- (click)="
- openHelpDialog(adapter)
- "
- >
- <i class="material-icons"
- >help_outline</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="isAdmin"
- >
- <button
- color="accent"
- 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-icon-button
- matTooltip="Edit adapter"
- data-cy="edit-adapter"
- matTooltipPosition="above"
- (click)="editAdapter(adapter)"
- >
- <i class="material-icons"
- >edit</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="5"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Delete adapter"
- data-cy="delete-adapter"
- matTooltipPosition="above"
-
(click)="deleteAdapter(adapter)"
- >
- <i class="material-icons"
- >delete</i
- >
- </button>
- </span>
- </div>
- </td>
- </ng-container>
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef></th>
+ <td mat-cell *matCellDef="let adapter">
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Show details"
+ matTooltipPosition="above"
+ data-cy="details-adapter"
+
(click)="navigateToDetailsOverviewPage(adapter)"
+ >
+ <i class="material-icons">search</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Show info"
+ matTooltipPosition="above"
+ data-cy="info-adapter"
+ (click)="openHelpDialog(adapter)"
+ >
+ <i class="material-icons">help_outline</i>
+ </button>
- <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="existingAdapters.length === 0"
- >
- <h5>(no adapters available)</h5>
- </div>
- </sp-basic-inner-panel>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Edit adapter"
+ data-cy="edit-adapter"
+ matTooltipPosition="above"
+ (click)="editAdapter(adapter)"
+ >
+ <i class="material-icons">edit</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Manage permissions"
+ matTooltipPosition="above"
+ *ngIf="isAdmin"
+ (click)="showPermissionsDialog(adapter)"
+ >
+ <i class="material-icons">share</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Delete adapter"
+ data-cy="delete-adapter"
+ matTooltipPosition="above"
+ (click)="deleteAdapter(adapter)"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+ </sp-table>
</div>
</div>
</sp-basic-view>
diff --git
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
index 888f10a466..a619e1a47a 100644
---
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
@@ -16,15 +16,8 @@
*
*/
-.mat-mdc-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
+.mat-mdc-header-cell {
+ font-weight: bold;
}
.adapter-icon {
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 b3e39e8159..7d880838e0 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
@@ -36,7 +36,6 @@ import {
} from '@streampipes/shared-ui';
import { DeleteAdapterDialogComponent } from
'../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
import { AllAdapterActionsComponent } from
'../../dialog/start-all-adapters/all-adapter-actions-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';
@@ -63,9 +62,6 @@ export class ExistingAdaptersComponent implements OnInit,
OnDestroy {
currentFilter: AdapterFilterSettingsModel;
- @ViewChild(MatPaginator)
- paginator: MatPaginator;
- pageSize = 1;
@ViewChild(MatSort)
sort: MatSort;
@@ -80,7 +76,8 @@ export class ExistingAdaptersComponent implements OnInit,
OnDestroy {
'action',
];
- dataSource: MatTableDataSource<AdapterDescription>;
+ dataSource: MatTableDataSource<AdapterDescription> =
+ new MatTableDataSource();
isAdmin = false;
adapterMetrics: Record<string, SpMetricsEntry> = {};
@@ -288,10 +285,9 @@ export class ExistingAdaptersComponent implements OnInit,
OnDestroy {
this.existingAdapters,
this.currentFilter,
);
- this.dataSource = new MatTableDataSource(this.filteredAdapters);
+ this.dataSource.data = this.filteredAdapters;
this.getMonitoringInfos(adapters);
setTimeout(() => {
- this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
});
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index 9eaab80bed..d7937055ae 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -39,204 +39,116 @@
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
- title="My Dashboards"
+ title="Dashboards"
></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel
- [showTitle]="false"
- innerPadding="0"
- outerMargin="0"
+ <sp-table
fxFlex="90"
- [hideToolbar]="true"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
+ matSort
>
- <div
- fxFlex="100"
- fxLayout="column"
- class="w-100"
- *ngIf="dashboards.length > 0"
- >
- <table
- fxFlex="95"
- mat-table
- [dataSource]="dataSource"
- multiTemplateDataRows
+ <ng-container matColumnDef="name">
+ <th
+ fxFlex="60"
+ fxLayoutAlign="start center"
+ mat-header-cell
+ *matHeaderCellDef
>
- <ng-container matColumnDef="name">
- <th
- fxFlex="60"
- fxLayoutAlign="start center"
- mat-header-cell
- *matHeaderCellDef
+ Dashboard
+ </th>
+ <td
+ fxFlex="60"
+ fxLayoutAlign="start center"
+ mat-cell
+ *matCellDef="let element"
+ >
+ {{ element.name }}<br />
+ {{ element.description }}
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="actions">
+ <th
+ fxFlex="40"
+ fxLayoutAlign="center center"
+ mat-header-cell
+ *matHeaderCellDef
+ ></th>
+ <td
+ fxFlex="40"
+ fxLayoutAlign="start center"
+ mat-cell
+ *matCellDef="let element"
+ >
+ <div
+ fxLayout="row"
+ fxFlex="100"
+ fxLayoutAlign="end center"
+ >
+ <button
+ mat-icon-button
+ matTooltip="Open dashboard"
+ color="accent"
+ (click)="showDashboard(element)"
+ [attr.data-cy]="
+ 'show-dashboard-' + element.name
+ "
>
- Dashboard
- </th>
- <td
- fxFlex="60"
- fxLayoutAlign="start center"
- mat-cell
- *matCellDef="let element"
+ <i class="material-icons">visibility</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Open dashboard in new window"
+ color="accent"
+ (click)="openExternalDashboard(element)"
>
- {{ element.name }}<br />
- {{ element.description }}
- </td>
- </ng-container>
-
- <ng-container matColumnDef="actions">
- <th
- fxFlex="40"
- fxLayoutAlign="center center"
- mat-header-cell
- *matHeaderCellDef
+ <i class="material-icons">open_in_new</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Edit dashboard settings"
+ color="accent"
+ *ngIf="hasDashboardWritePrivileges"
+ (click)="openEditDashboardDialog(element)"
+ data-cy="change-dashboard-settings-button"
>
- Actions
- </th>
- <td
- fxFlex="40"
- fxLayoutAlign="start center"
- mat-cell
- *matCellDef="let element"
+ <i class="material-icons">settings</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Edit dashboard"
+ color="accent"
+ (click)="editDashboard(element)"
+ *ngIf="hasDashboardWritePrivileges"
+ [attr.data-cy]="
+ 'edit-dashboard-' + element.name
+ "
>
- <div fxLayout="row" fxFlex="100">
- <span
- fxFlex
- fxFlexOrder="1"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- mat-icon-button
- matTooltip="Open dashboard"
- color="accent"
- (click)="showDashboard(element)"
- [attr.data-cy]="
- 'show-dashboard-' +
element.name
- "
- >
- <i class="material-icons"
- >visibility</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="2"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- mat-icon-button
- matTooltip="Open dashboard in new
window"
- color="accent"
- (click)="
- openExternalDashboard(element)
- "
- >
- <i class="material-icons"
- >open_in_new</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDashboardWritePrivileges"
- >
- <button
- mat-icon-button
- matTooltip="Edit dashboard
settings"
- color="accent"
- (click)="
-
openEditDashboardDialog(element)
- "
-
data-cy="change-dashboard-settings-button"
- >
- <i class="material-icons"
- >settings</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="4"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDashboardWritePrivileges"
- >
- <button
- mat-icon-button
- matTooltip="Edit dashboard"
- color="accent"
- (click)="editDashboard(element)"
- [attr.data-cy]="
- 'edit-dashboard-' +
element.name
- "
- >
- <i class="material-icons">edit</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="5"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="isAdmin"
- >
- <button
- mat-icon-button
- matTooltip="Manage permissions"
- color="accent"
- (click)="
- showPermissionsDialog(element)
- "
- >
- <i class="material-icons">share</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="6"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDashboardDeletePrivileges"
- >
- <button
- mat-icon-button
- matTooltip="Delete dashboard"
- color="accent"
- (click)="
- openDeleteDashboardDialog(
- element
- )
- "
- >
- <i
class="material-icons">delete</i>
- </button>
- </span>
- </div>
- </td>
- </ng-container>
-
- <tr
- mat-header-row
- *matHeaderRowDef="displayedColumns"
- ></tr>
- <tr
- mat-row
- *matRowDef="let element; columns: displayedColumns"
- ></tr>
- </table>
- </div>
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- *ngIf="dashboards.length === 0"
- >
- <h5>(no dashboards available)</h5>
- </div>
- </sp-basic-inner-panel>
+ <i class="material-icons">edit</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Manage permissions"
+ color="accent"
+ *ngIf="isAdmin"
+ (click)="showPermissionsDialog(element)"
+ >
+ <i class="material-icons">share</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Delete dashboard"
+ color="accent"
+ *ngIf="hasDashboardDeletePrivileges"
+ (click)="openDeleteDashboardDialog(element)"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+ </sp-table>
</div>
</div>
</sp-basic-view>
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.scss
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.scss
index eb925e27d7..2384389599 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.scss
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.scss
@@ -16,9 +16,8 @@
*
*/
-table {
- width: 100%;
- background: transparent;
+.mat-mdc-header-cell {
+ font-weight: bold;
}
.m-20 {
@@ -36,10 +35,3 @@ table {
display: inline;
margin-right: 10px;
}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
-}
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
index 071e92a70e..0aadcd6c57 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
@@ -39,184 +39,106 @@
</div>
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
- title="My Data Views"
+ title="Data Views"
></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel
- [showTitle]="false"
- innerPadding="0"
- outerMargin="0"
+ <sp-table
fxFlex="90"
- [hideToolbar]="true"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
>
- <div
- fxFlex="100"
- fxLayout="column"
- class="w-100"
- *ngIf="dashboards.length > 0"
- >
- <table
- mat-table
- [dataSource]="dataSource"
- multiTemplateDataRows
+ <ng-container matColumnDef="name">
+ <th
+ fxFlex="60"
+ fxLayoutAlign="start center"
+ mat-header-cell
+ *matHeaderCellDef
>
- <ng-container matColumnDef="name">
- <th
- fxFlex="60"
- fxLayoutAlign="start center"
- mat-header-cell
- *matHeaderCellDef
+ Data View
+ </th>
+ <td
+ fxFlex="60"
+ fxLayoutAlign="start center"
+ mat-cell
+ *matCellDef="let element"
+ >
+ {{ element.name }}<br />
+ {{ element.description }}
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="actions">
+ <th
+ fxFlex="40"
+ fxLayoutAlign="center center"
+ mat-header-cell
+ *matHeaderCellDef
+ ></th>
+ <td
+ fxFlex="40"
+ fxLayoutAlign="start center"
+ mat-cell
+ *matCellDef="let element"
+ >
+ <div
+ fxLayout="row"
+ fxFlex="100"
+ fxLayoutAlign="end center"
+ >
+ <button
+ mat-icon-button
+ color="accent"
+ matTooltip="Show data view"
+ (click)="showDashboard(element)"
>
- Data View
- </th>
- <td
- fxFlex="60"
- fxLayoutAlign="start center"
- mat-cell
- *matCellDef="let element"
+ <i class="material-icons">visibility</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ matTooltip="Edit data view"
+ *ngIf="hasDataExplorerWritePrivileges"
+ [attr.data-cy]="
+ 'edit-dashboard-' + element.name
+ "
+ (click)="editDashboard(element)"
>
- {{ element.name }}<br />
- {{ element.description }}
- </td>
- </ng-container>
-
- <ng-container matColumnDef="actions">
- <th
- fxFlex="40"
- fxLayoutAlign="center center"
- mat-header-cell
- *matHeaderCellDef
+ <i class="material-icons">edit</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ matTooltip="Edit data view settings"
+ *ngIf="hasDataExplorerWritePrivileges"
+ (click)="openEditDataViewDialog(element)"
>
- Actions
- </th>
- <td
- fxFlex="40"
- fxLayoutAlign="start center"
- mat-cell
- *matCellDef="let element"
+ <i class="material-icons">settings</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ matTooltip="Manage permissions"
+ *ngIf="isAdmin"
+ (click)="showPermissionsDialog(element)"
>
- <div fxLayout="row" fxFlex="100">
- <span
- fxFlex
- fxFlexOrder="1"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- mat-icon-button
- color="accent"
- matTooltip="Show data view"
- (click)="showDashboard(element)"
- >
- <i class="material-icons"
- >visibility</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="2"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDataExplorerWritePrivileges"
- >
- <button
- mat-icon-button
- color="accent"
- matTooltip="Edit data view"
- [attr.data-cy]="
- 'edit-dashboard-' +
element.name
- "
- (click)="editDashboard(element)"
- >
- <i class="material-icons">edit</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDataExplorerWritePrivileges"
- >
- <button
- mat-icon-button
- color="accent"
- matTooltip="Edit data view
settings"
- (click)="
- openEditDataViewDialog(element)
- "
- >
- <i class="material-icons"
- >settings</i
- >
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="4"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="isAdmin"
- >
- <button
- mat-icon-button
- color="accent"
- matTooltip="Manage permissions"
- (click)="
- showPermissionsDialog(element)
- "
- >
- <i class="material-icons">share</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="5"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasDataExplorerDeletePrivileges"
- >
- <button
- mat-icon-button
- color="accent"
- matTooltip="Delete data view"
- [attr.data-cy]="
- 'delete-dashboard-' +
- element.name
- "
- (click)="
- openDeleteDashboardDialog(
- element
- )
- "
- >
- <i
class="material-icons">delete</i>
- </button>
- </span>
- </div>
- </td>
- </ng-container>
-
- <tr
- mat-header-row
- *matHeaderRowDef="displayedColumns"
- ></tr>
- <tr
- mat-row
- *matRowDef="let element; columns: displayedColumns"
- ></tr>
- </table>
- </div>
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- *ngIf="dashboards.length === 0"
- >
- <h5>(no data views available)</h5>
- </div>
- </sp-basic-inner-panel>
+ <i class="material-icons">share</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ matTooltip="Delete data view"
+ *ngIf="hasDataExplorerDeletePrivileges"
+ [attr.data-cy]="
+ 'delete-dashboard-' + element.name
+ "
+ (click)="openDeleteDashboardDialog(element)"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+ </sp-table>
</div>
</div>
</sp-basic-view>
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
index b3f518e8c7..9103beb12d 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
@@ -16,19 +16,8 @@
*
*/
-table {
- width: 100%;
-}
-
-.mat-mdc-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
+.mat-mdc-header-cell {
+ font-weight: bold;
}
.w-100 {
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.html
b/ui/src/app/files/components/file-overview/file-overview.component.html
index ff6a4796cd..7b549c445b 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.html
+++ b/ui/src/app/files/components/file-overview/file-overview.component.html
@@ -16,83 +16,57 @@
~
-->
-<div fxFlex="100" fxLayout="column" style="margin: 1px">
- <div fxLayout="column" fxFlex="100" *ngIf="filesAvailable">
- <table
- fxFlex="100"
- mat-table
- [dataSource]="dataSource"
- style="width: 100%"
- >
- <ng-container matColumnDef="filename">
- <th mat-header-cell *matHeaderCellDef>Filename</th>
- <td mat-cell *matCellDef="let fileMetadata">
- <h4>{{ fileMetadata.filename }}</h4>
- </td>
- </ng-container>
- <ng-container matColumnDef="filetype">
- <th mat-header-cell *matHeaderCellDef>Filetype</th>
- <td mat-cell *matCellDef="let fileMetadata">
- <span
- class="filetype-container"
- [style.background-color]="
- getFileColor(fileMetadata.filetype)
- "
- >{{ fileMetadata.filetype }}</span
- >
- </td>
- </ng-container>
- <ng-container matColumnDef="uploaded">
- <th mat-header-cell *matHeaderCellDef>Uploaded</th>
- <td mat-cell *matCellDef="let fileMetadata">
- <h5>
- {{ fileMetadata.createdAt | date: 'dd.MM.yyyy HH:mm' }}
- </h5>
- </td>
- </ng-container>
+<sp-table fxFlex="100" [columns]="displayedColumns" [dataSource]="dataSource">
+ <ng-container matColumnDef="filename">
+ <th mat-header-cell *matHeaderCellDef>Filename</th>
+ <td mat-cell *matCellDef="let fileMetadata">
+ <h4>{{ fileMetadata.filename }}</h4>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="filetype">
+ <th mat-header-cell *matHeaderCellDef>Filetype</th>
+ <td mat-cell *matCellDef="let fileMetadata">
+ <span
+ class="filetype-container"
+ [style.background-color]="getFileColor(fileMetadata.filetype)"
+ >{{ fileMetadata.filetype }}</span
+ >
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="uploaded">
+ <th mat-header-cell *matHeaderCellDef>Uploaded</th>
+ <td mat-cell *matCellDef="let fileMetadata">
+ <h5>
+ {{ fileMetadata.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 fileMetadata">
- <button
- color="accent"
- mat-icon-button
- matTooltip="Delete file"
- matTooltipPosition="above"
- (click)="deleteFile(fileMetadata)"
- data-cy="delete"
- >
- <i class="material-icons">delete</i>
- </button>
- <button
- color="accent"
- mat-icon-button
- matTooltip="Download File"
- matTooltipPosition="above"
- (click)="downloadFile(fileMetadata)"
- data-cy="download"
- >
- <i class="material-icons">download</i>
- </button>
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
- </table>
- <div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator
- [pageSizeOptions]="[5, 10, 25, 100]"
- [pageSize]="10"
- ></mat-paginator>
- </div>
- </div>
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- *ngIf="!filesAvailable"
- >
- <h5>(no files available)</h5>
- </div>
-</div>
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef></th>
+ <td mat-cell *matCellDef="let fileMetadata">
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Download File"
+ matTooltipPosition="above"
+ (click)="downloadFile(fileMetadata)"
+ data-cy="download"
+ >
+ <i class="material-icons">download</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Delete file"
+ matTooltipPosition="above"
+ (click)="deleteFile(fileMetadata)"
+ data-cy="delete"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+</sp-table>
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.scss
b/ui/src/app/files/components/file-overview/file-overview.component.scss
index 0c0ac54d58..147584798b 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.scss
+++ b/ui/src/app/files/components/file-overview/file-overview.component.scss
@@ -16,18 +16,8 @@
*
*/
-.mat-table {
-}
-
-.mat-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-row:nth-child(odd) {
- background-color: var(--color-bg-2);
+.mat-mdc-header-cell {
+ font-weight: bold;
}
.filetype-container {
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.ts
b/ui/src/app/files/components/file-overview/file-overview.component.ts
index dc8ca5c4fc..fce32dc9b0 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.ts
+++ b/ui/src/app/files/components/file-overview/file-overview.component.ts
@@ -16,10 +16,9 @@
*
*/
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FilesService, FileMetadata } from '@streampipes/platform-services';
+import { Component, OnInit } from '@angular/core';
+import { FileMetadata, FilesService } from '@streampipes/platform-services';
import { MatTableDataSource } from '@angular/material/table';
-import { MatPaginator } from '@angular/material/paginator';
import { ConfirmDialogComponent } from '@streampipes/shared-ui';
import { MatDialog } from '@angular/material/dialog';
import { saveAs } from 'file-saver';
@@ -32,12 +31,9 @@ import { saveAs } from 'file-saver';
export class FileOverviewComponent implements OnInit {
displayedColumns: string[] = ['filename', 'filetype', 'uploaded',
'action'];
- dataSource: MatTableDataSource<FileMetadata>;
+ dataSource: MatTableDataSource<FileMetadata> = new MatTableDataSource();
filesAvailable = false;
- paginator: MatPaginator;
- pageSize = 1;
-
private fileTypeColors: { [key: string]: string } = {};
constructor(
@@ -46,7 +42,6 @@ export class FileOverviewComponent implements OnInit {
) {}
ngOnInit() {
- this.dataSource = new MatTableDataSource<FileMetadata>([]);
this.refreshFiles();
}
@@ -54,9 +49,6 @@ export class FileOverviewComponent implements OnInit {
this.filesService.getFileMetadata().subscribe(fm => {
this.dataSource.data = fm;
this.filesAvailable = fm && fm.length > 0;
- setTimeout(() => {
- this.dataSource.paginator = this.paginator;
- });
});
}
@@ -109,8 +101,4 @@ export class FileOverviewComponent implements OnInit {
return `#${paddedColor}`;
}
-
- @ViewChild(MatPaginator) set content(paginator: MatPaginator) {
- this.paginator = paginator;
- }
}
diff --git a/ui/src/app/files/files.component.html
b/ui/src/app/files/files.component.html
index 6832667409..bbdd7e0319 100644
--- a/ui/src/app/files/files.component.html
+++ b/ui/src/app/files/files.component.html
@@ -39,18 +39,13 @@
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
- title="My Files"
+ title="Files"
></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel
- [showTitle]="false"
- innerPadding="0"
- outerMargin="0"
+ <sp-file-overview
fxFlex="90"
- [hideToolbar]="true"
- >
- <sp-file-overview #fileOverviewComponent></sp-file-overview>
- </sp-basic-inner-panel>
+ #fileOverviewComponent
+ ></sp-file-overview>
</div>
</div>
</sp-basic-view>
diff --git
a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
index b2214feefb..7d9ddb0c9d 100644
---
a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
+++
b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
@@ -16,69 +16,32 @@
~
-->
-<div
- fxFlex="100"
- fxLayout="column"
- *ngIf="functions.length > 0"
- style="margin: 1px"
->
- <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 spFunction">
- <h4 style="margin-bottom: 0px">
- {{ spFunction.id }}:{{ spFunction.version }}
- </h4>
- </td>
- </ng-container>
+<sp-table [columns]="displayedColumns" [dataSource]="dataSource" matSort>
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
+ <td mat-cell *matCellDef="let spFunction">
+ <h4 style="margin-bottom: 0">
+ {{ spFunction.id }}:{{ spFunction.version }}
+ </h4>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef>
- <span fxLayoutAlign="end center">Action</span>
- </th>
- <td mat-cell *matCellDef="let spFunction">
- <div fxLayout="row">
- <span
- fxFlex
- fxFlexOrder="1"
- fxLayout="row"
- fxLayoutAlign="end center"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Show function details"
- matTooltipPosition="above"
- (click)="showFunctionDetails(spFunction.id)"
- >
- <i class="material-icons">search</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 fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator
- [pageSizeOptions]="[5, 10, 25, 100]"
- [pageSize]="20"
- ></mat-paginator>
- </div>
-</div>
-<div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- *ngIf="functions.length === 0"
->
- <h5>(no functions available)</h5>
-</div>
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef>
+ <span fxLayoutAlign="end center"></span>
+ </th>
+ <td mat-cell *matCellDef="let spFunction">
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Show function details"
+ matTooltipPosition="above"
+ (click)="showFunctionDetails(spFunction.id)"
+ >
+ <i class="material-icons">search</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+</sp-table>
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 182f09c9de..0c262d080d 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
@@ -16,271 +16,202 @@
~
-->
-<div
- fxFlex="100"
- fxLayout="column"
- *ngIf="pipelines.length > 0"
- style="margin: 1px"
+<sp-table
+ [dataSource]="dataSource"
+ [columns]="displayedColumns"
+ matSort
+ data-cy="all-pipelines-table"
>
- <table
- fxFlex="100"
- mat-table
- [dataSource]="dataSource"
- style="width: 100%"
- matSort
- data-cy="all-pipelines-table"
- >
- <ng-container matColumnDef="status">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>Status</th>
- <td mat-cell *matCellDef="let pipeline">
- <div>
+ <ng-container matColumnDef="status">
+ <th mat-header-cell *matHeaderCellDef>Status</th>
+ <td mat-cell *matCellDef="let pipeline">
+ <div>
+ <div fxLayout="row" fxLayoutAlign="start center"
fxFlex="150px">
<div
- fxLayout="row"
- fxLayoutAlign="start center"
- fxFlex="150px"
- >
- <div
- *ngIf="
- pipeline.running &&
- pipeline.healthStatus === 'OK'
- "
- class="light light-green"
- ></div>
- <div
- *ngIf="
- pipeline.running &&
- pipeline.healthStatus === 'REQUIRES_ATTENTION'
- "
- class="light light-yellow"
- ></div>
- <div
- *ngIf="
- pipeline.running &&
- pipeline.healthStatus === 'FAILURE'
- "
- class="light light-red"
- ></div>
- <div
- *ngIf="!pipeline.running"
- class="light light-neutral"
- [matTooltip]="'Stopped'"
- ></div>
- <div class="notification-icon">
- <button
- class="ml-10"
- mat-icon-button
- [disabled]="!hasPipelineWritePrivileges"
- (click)="
- openPipelineNotificationsDialog(pipeline)
- "
- *ngIf="
- pipeline.pipelineNotifications.length > 0
- "
- matTooltip="{{
- pipeline.pipelineNotifications.length
- }} notification{{
- pipeline.pipelineNotifications.length > 1
- ? 's'
- : ''
- }}"
- data-cy="pipeline-warning-icon"
- >
- <i class="material-icons pipeline-notification"
- >warning</i
- >
- </button>
- </div>
- <div
- class="ml-10 notification-icon"
- data-cy="pipeline-sync-problem-icon"
+ *ngIf="
+ pipeline.running && pipeline.healthStatus === 'OK'
+ "
+ class="light light-green"
+ ></div>
+ <div
+ *ngIf="
+ pipeline.running &&
+ pipeline.healthStatus === 'REQUIRES_ATTENTION'
+ "
+ class="light light-yellow"
+ ></div>
+ <div
+ *ngIf="
+ pipeline.running &&
+ pipeline.healthStatus === 'FAILURE'
+ "
+ class="light light-red"
+ ></div>
+ <div
+ *ngIf="!pipeline.running"
+ class="light light-neutral"
+ [matTooltip]="'Stopped'"
+ ></div>
+ <div class="notification-icon">
+ <button
+ class="ml-10"
+ mat-icon-button
+ [disabled]="!hasPipelineWritePrivileges"
+ (click)="openPipelineNotificationsDialog(pipeline)"
+ *ngIf="pipeline.pipelineNotifications.length > 0"
+ matTooltip="{{
+ pipeline.pipelineNotifications.length
+ }} notification{{
+ pipeline.pipelineNotifications.length > 1
+ ? 's'
+ : ''
+ }}"
+ data-cy="pipeline-warning-icon"
>
- <mat-icon
- color="warn"
- matTooltip="Invalid pipeline: Modify to fix
problems"
- *ngIf="!pipeline.valid"
- >sync_problem</mat-icon
+ <i class="material-icons pipeline-notification"
+ >warning</i
>
- </div>
+ </button>
+ </div>
+ <div
+ class="ml-10 notification-icon"
+ data-cy="pipeline-sync-problem-icon"
+ >
+ <mat-icon
+ color="warn"
+ matTooltip="Invalid pipeline: Modify to fix
problems"
+ *ngIf="!pipeline.valid"
+ >sync_problem
+ </mat-icon>
</div>
</div>
- </td>
- </ng-container>
- <ng-container matColumnDef="start">
- <th mat-header-cell *matHeaderCellDef>Start</th>
- <td mat-cell *matCellDef="let pipeline">
+ </div>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="start">
+ <th mat-header-cell *matHeaderCellDef>Start</th>
+ <td mat-cell *matCellDef="let pipeline">
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Start pipeline"
+ matTooltipPosition="above"
+ data-cy="start-pipeline-button"
+ (click)="
+ pipelineOperationsService.startPipeline(
+ pipeline._id,
+ refreshPipelinesEmitter,
+ toggleRunningOperation
+ )
+ "
+ [disabled]="
+ !hasPipelineWritePrivileges || starting || !pipeline.valid
+ "
+ *ngIf="!pipeline.running"
+ >
+ <i class="material-icons">play_arrow</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Stop pipeline"
+ matTooltipPosition="above"
+ (click)="
+ pipelineOperationsService.stopPipeline(
+ pipeline._id,
+ refreshPipelinesEmitter,
+ toggleRunningOperation
+ )
+ "
+ [disabled]="!hasPipelineWritePrivileges || stopping"
+ *ngIf="pipeline.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 pipeline">
+ <h4 style="margin-bottom: 0">{{ pipeline.name }}</h4>
+ <h5>
+ {{ pipeline.description !== '' ? pipeline.description : '-' }}
+ </h5>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="lastModified">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Created</th>
+ <td mat-cell *matCellDef="let pipeline">
+ <h5>{{ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm' }}</h5>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef></th>
+ <td mat-cell *matCellDef="let pipeline">
+ <div fxLayout="row" fxLayoutAlign="end center">
<button
color="accent"
mat-icon-button
- matTooltip="Start pipeline"
+ matTooltip="Show pipeline"
matTooltipPosition="above"
- data-cy="start-pipeline-button"
(click)="
- pipelineOperationsService.startPipeline(
- pipeline._id,
- refreshPipelinesEmitter,
- toggleRunningOperation
+ pipelineOperationsService.showPipelineDetails(
+ pipeline._id
)
"
- [disabled]="
- !hasPipelineWritePrivileges ||
- starting ||
- !pipeline.valid
+ >
+ <i class="material-icons">search</i>
+ </button>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Modify pipeline"
+ matTooltipPosition="above"
+ [disabled]="pipeline.running"
+ *ngIf="hasPipelineWritePrivileges"
+ (click)="
+ pipelineOperationsService.modifyPipeline(pipeline._id)
"
- *ngIf="!pipeline.running"
+ data-cy="modify-pipeline-btn"
>
- <i class="material-icons">play_arrow</i>
+ <i class="material-icons">mode_edit</i>
</button>
<button
color="accent"
mat-icon-button
- matTooltip="Stop pipeline"
+ matTooltip="Permissions"
matTooltipPosition="above"
+ *ngIf="isAdmin"
(click)="
- pipelineOperationsService.stopPipeline(
- pipeline._id,
- refreshPipelinesEmitter,
- toggleRunningOperation
+ pipelineOperationsService.showPermissionsDialog(
+ pipeline,
+ refreshPipelinesEmitter
)
"
- [disabled]="!hasPipelineWritePrivileges || stopping"
- *ngIf="pipeline.running"
+ data-cy="share"
>
- <i class="material-icons">stop</i>
+ <i class="material-icons">share</i>
</button>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
- <td mat-cell *matCellDef="let pipeline">
- <h4 style="margin-bottom: 0">{{ pipeline.name }}</h4>
- <h5>
- {{
- pipeline.description !== '' ? pipeline.description :
'-'
- }}
- </h5>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="lastModified">
- <th mat-header-cell *matHeaderCellDef>Created</th>
- <td mat-cell *matCellDef="let pipeline">
- <h5>{{ pipeline.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 pipeline">
- <div fxLayout="row">
- <span
- fxFlex
- fxFlexOrder="1"
- fxLayout="row"
- fxLayoutAlign="center center"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Show pipeline"
- matTooltipPosition="above"
- (click)="
- pipelineOperationsService.showPipelineDetails(
- pipeline._id
- )
- "
- >
- <i class="material-icons">search</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="2"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasPipelineWritePrivileges"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Modify pipeline"
- matTooltipPosition="above"
- [disabled]="pipeline.running"
- (click)="
- pipelineOperationsService.modifyPipeline(
- pipeline._id
- )
- "
- data-cy="modify-pipeline-btn"
- >
- <i class="material-icons">mode_edit</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="hasPipelineDeletePrivileges"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Delete pipeline"
- matTooltipPosition="above"
- (click)="
- pipelineOperationsService.showDeleteDialog(
- pipeline,
- refreshPipelinesEmitter
- )
- "
- data-cy="delete-pipeline"
- >
- <i class="material-icons">delete</i>
- </button>
- </span>
- <span
- fxFlex
- fxFlexOrder="4"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="isAdmin"
- >
- <button
- color="accent"
- mat-icon-button
- matTooltip="Permissions"
- matTooltipPosition="above"
- (click)="
-
pipelineOperationsService.showPermissionsDialog(
- pipeline,
- refreshPipelinesEmitter
- )
- "
- data-cy="share"
- >
- <i class="material-icons">share</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 fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator
- [pageSizeOptions]="[5, 10, 25, 100]"
- [pageSize]="20"
- ></mat-paginator>
- </div>
-</div>
-<div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- *ngIf="pipelines.length === 0"
->
- <h5>(no pipelines available)</h5>
-</div>
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="Delete pipeline"
+ matTooltipPosition="above"
+ *ngIf="hasPipelineDeletePrivileges"
+ (click)="
+ pipelineOperationsService.showDeleteDialog(
+ pipeline,
+ refreshPipelinesEmitter
+ )
+ "
+ data-cy="delete-pipeline"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+</sp-table>
diff --git
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
index 8f14307cfb..6a046c5382 100644
---
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
+++
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
@@ -16,15 +16,8 @@
*
*/
-.mat-mdc-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
+.mat-mdc-header-cell {
+ font-weight: bold;
}
.mat-column-status {
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 dc0f8b81d9..3519316ccb 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,18 +21,19 @@ import {
Component,
EventEmitter,
Input,
+ OnDestroy,
OnInit,
Output,
ViewChild,
} from '@angular/core';
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';
import { AuthService } from '../../../services/auth.service';
import { UserRole } from '../../../_enums/user-role.enum';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
import { CurrentUserService } from '@streampipes/shared-ui';
+import { Subscription } from 'rxjs';
@Component({
selector: 'sp-pipeline-overview',
@@ -42,7 +43,7 @@ import { CurrentUserService } from '@streampipes/shared-ui';
'../../../../scss/sp/status-light.scss',
],
})
-export class PipelineOverviewComponent implements OnInit {
+export class PipelineOverviewComponent implements OnInit, OnDestroy {
_pipelines: Pipeline[];
@Input()
@@ -61,10 +62,6 @@ export class PipelineOverviewComponent implements OnInit {
];
dataSource: MatTableDataSource<Pipeline>;
-
- @ViewChild(MatPaginator) paginator: MatPaginator;
- pageSize = 1;
-
@ViewChild(MatSort) sort: MatSort;
starting: any;
@@ -74,6 +71,8 @@ export class PipelineOverviewComponent implements OnInit {
hasPipelineWritePrivileges = false;
hasPipelineDeletePrivileges = false;
+ userSub: Subscription;
+
constructor(
public pipelineOperationsService: PipelineOperationsService,
private authService: AuthService,
@@ -84,7 +83,7 @@ export class PipelineOverviewComponent implements OnInit {
}
ngOnInit() {
- this.currentUserService.user$.subscribe(user => {
+ this.userSub = this.currentUserService.user$.subscribe(user => {
this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
this.hasPipelineWritePrivileges = this.authService.hasRole(
UserPrivilege.PRIVILEGE_WRITE_PIPELINE,
@@ -106,7 +105,7 @@ export class PipelineOverviewComponent implements OnInit {
}
}
- toggleRunningOperation(currentOperation) {
+ toggleRunningOperation(currentOperation: string) {
if (currentOperation === 'starting') {
this.starting = !this.starting;
} else {
@@ -134,8 +133,11 @@ export class PipelineOverviewComponent implements OnInit {
addPipelinesToTable() {
this.dataSource = new MatTableDataSource<Pipeline>(this._pipelines);
setTimeout(() => {
- this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
+
+ ngOnDestroy() {
+ this.userSub?.unsubscribe();
+ }
}
diff --git a/ui/src/app/pipelines/pipelines.component.html
b/ui/src/app/pipelines/pipelines.component.html
index 537331c60c..fa7fc442f4 100644
--- a/ui/src/app/pipelines/pipelines.component.html
+++ b/ui/src/app/pipelines/pipelines.component.html
@@ -41,7 +41,8 @@
[disabled]="checkCurrentSelectionStatus(false)"
*ngIf="hasPipelineWritePrivileges"
>
- <mat-icon>play_arrow</mat-icon><span>Start all pipelines</span>
+ <mat-icon>play_arrow</mat-icon>
+ <span>Start all pipelines</span>
</button>
<button
mat-button
@@ -79,43 +80,27 @@
title="Pipelines"
></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">
- <sp-pipeline-overview
- [pipelines]="pipelines"
- [pipelineToStart]="pipelineToStart"
- (refreshPipelinesEmitter)="refreshPipelines()"
- *ngIf="pipelinesReady"
- ></sp-pipeline-overview>
- </div>
- </sp-basic-inner-panel>
+ <div fxFlex="90">
+ <sp-pipeline-overview
+ [pipelines]="pipelines"
+ [pipelineToStart]="pipelineToStart"
+ (refreshPipelinesEmitter)="refreshPipelines()"
+ *ngIf="pipelinesReady"
+ ></sp-pipeline-overview>
+ </div>
</div>
<div fxFlex="100" fxLayout="column" style="margin-top: 20px">
<sp-basic-header-title-component
title="Functions"
></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">
- <sp-functions-overview
- [functions]="functions"
- *ngIf="functionsReady"
- >
- </sp-functions-overview>
- </div>
- </sp-basic-inner-panel>
+ <div fxFlex="90">
+ <sp-functions-overview
+ [functions]="functions"
+ *ngIf="functionsReady"
+ >
+ </sp-functions-overview>
+ </div>
</div>
</div>
</div>
