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 2024/07/07 19:39:28 UTC
(streampipes) branch harmonize-overview-tables created (now 3683f508b8)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch harmonize-overview-tables
in repository https://gitbox.apache.org/repos/asf/streampipes.git
at 3683f508b8 chore: Harmonize layout of resource tables
This branch includes the following new commits:
new 3683f508b8 chore: Harmonize layout of resource tables
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(streampipes) 01/01: chore: Harmonize layout of resource tables
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch harmonize-overview-tables
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 3683f508b8d9ff86e3944a10a7fe66465e03c282
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jul 7 21:39:15 2024 +0200
chore: Harmonize layout of resource tables
---
.../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 | 11 +-
.../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, 902 insertions(+), 1365 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..c20c37005d 100644
--- a/ui/src/app/files/files.component.html
+++ b/ui/src/app/files/files.component.html
@@ -42,15 +42,10 @@
title="My 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>