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 <[email protected]> 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>
