This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch harmonize-table-layout in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 82618b32366d3d479232de91b14cfde9627afbb3 Author: Dominik Riemer <[email protected]> AuthorDate: Wed Aug 28 08:54:27 2024 +0200 chore: Improve layout of resource tables and asset view --- ui/src/app/assets/assets.module.ts | 2 - .../asset-selection-panel.component.html | 2 +- .../asset-overview/asset-overview.component.html | 43 ++------ .../asset-overview/asset-overview.component.ts | 41 +------- .../asset-upload-dialog.component.html | 112 --------------------- .../asset-upload-dialog.component.scss | 19 ---- .../asset-upload/asset-upload-dialog.component.ts | 76 -------------- .../existing-adapters.component.html | 14 +-- .../overview/dashboard-overview.component.html | 11 +- ...data-explorer-dashboard-overview.component.html | 11 +- .../pipeline-overview.component.html | 10 +- 11 files changed, 38 insertions(+), 303 deletions(-) diff --git a/ui/src/app/assets/assets.module.ts b/ui/src/app/assets/assets.module.ts index f75544211a..831273a1b9 100644 --- a/ui/src/app/assets/assets.module.ts +++ b/ui/src/app/assets/assets.module.ts @@ -34,7 +34,6 @@ import { PlatformServicesModule } from '@streampipes/platform-services'; import { RouterModule } from '@angular/router'; import { SharedUiModule } from '@streampipes/shared-ui'; import { SpAssetOverviewComponent } from './components/asset-overview/asset-overview.component'; -import { AssetUploadDialogComponent } from './dialog/asset-upload/asset-upload-dialog.component'; import { SpAssetDetailsComponent } from './components/asset-details/edit-asset/asset-details.component'; import { SpAssetSelectionPanelComponent } from './components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component'; import { MatTreeModule } from '@angular/material/tree'; @@ -125,7 +124,6 @@ import { AssetLinkCardComponent } from './components/asset-details/view-asset/vi AssetDetailsSiteComponent, AssetLinkSectionComponent, AssetLocationComponent, - AssetUploadDialogComponent, EditAssetLinkDialogComponent, SpAssetDetailsComponent, SpAssetLinkItemComponent, diff --git a/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html b/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html index 9e7c5cd2fb..9c05862a7b 100644 --- a/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html +++ b/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html @@ -49,7 +49,7 @@ fxFlex="100" (click)="selectNode(node, false)" > - <span fxLayoutAlign="end center">{{ + <span fxLayoutAlign="end center" class="ml-5">{{ node.assetName }}</span> <div 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 586ca6f8ae..22451587b9 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 @@ -42,15 +42,6 @@ > <i class="material-icons"> refresh </i> </button> - <button - mat-icon-button - matTooltip="Upload assets" - matTooltipPosition="below" - color="accent" - (click)="uploadAsset()" - > - <i class="material-icons"> cloud_upload </i> - </button> </div> </div> <div fxFlex="100" fxLayout="column"> @@ -75,26 +66,18 @@ data-cy="assets-table" > <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: 0"> - {{ asset.assetName }} - </h4> - <h5> - {{ - asset.assetDescription !== '' - ? asset.assetDescription - : '-' - }} - </h5> + <div> + <b>{{ asset.assetName }}</b> + </div> + <div> + <small> + {{ asset.assetDescription }}</small + > + </div> </div> </div> </td> @@ -127,16 +110,6 @@ <i class="material-icons">edit</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> <button color="accent" mat-icon-button diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts index acae6d232e..0afcbf7033 100644 --- a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts +++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts @@ -30,12 +30,8 @@ import { SpBreadcrumbService, } from '@streampipes/shared-ui'; import { SpAssetRoutes } from '../../assets.routes'; -import { AssetUploadDialogComponent } from '../../dialog/asset-upload/asset-upload-dialog.component'; import { Router } from '@angular/router'; import { SpCreateAssetDialogComponent } from '../../dialog/create-asset/create-asset-dialog.component'; -import { DataExportService } from '../../../configuration/export/data-export.service'; -import { mergeMap } from 'rxjs/operators'; -import { saveAs } from 'file-saver'; import { IdGeneratorService } from '../../../core-services/id-generator/id-generator.service'; @Component({ @@ -56,7 +52,6 @@ export class SpAssetOverviewComponent implements OnInit { private breadcrumbService: SpBreadcrumbService, private dialogService: DialogService, private router: Router, - private dataExportService: DataExportService, private idGeneratorService: IdGeneratorService, private assetBrowserService: SpAssetBrowserService, ) {} @@ -95,9 +90,9 @@ export class SpAssetOverviewComponent implements OnInit { const dialogRef = this.dialogService.open( SpCreateAssetDialogComponent, { - panelType: PanelType.STANDARD_PANEL, + panelType: PanelType.SLIDE_IN_PANEL, title: 'Create asset', - width: '40vw', + width: '50vw', data: { createMode: true, assetModel: assetModel, @@ -106,23 +101,7 @@ export class SpAssetOverviewComponent implements OnInit { ); dialogRef.afterClosed().subscribe(() => { - this.loadAssets(); - this.assetBrowserService.loadAssetData(); - }); - } - - uploadAsset() { - const dialogRef = this.dialogService.open(AssetUploadDialogComponent, { - panelType: PanelType.SLIDE_IN_PANEL, - title: 'Upload asset model', - width: '40vw', - }); - - dialogRef.afterClosed().subscribe(reload => { - if (reload) { - this.loadAssets(); - this.assetBrowserService.loadAssetData(); - } + this.goToDetailsView(assetModel, true); }); } @@ -143,18 +122,4 @@ export class SpAssetOverviewComponent implements OnInit { this.assetBrowserService.loadAssetData(); }); } - - downloadAsset(asset: SpAssetModel) { - this.dataExportService - .getExportPreview([asset._id]) - .pipe( - mergeMap(preview => - this.dataExportService.triggerExport(preview), - ), - ) - .subscribe((data: Blob) => { - const blob = new Blob([data], { type: 'application/zip' }); - saveAs(blob, 'assetExport'); - }); - } } diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html deleted file mode 100644 index b3b3d62f61..0000000000 --- a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html +++ /dev/null @@ -1,112 +0,0 @@ -<!-- -~ 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 class="sp-dialog-container"> - <div class="sp-dialog-content p-15"> - <div fxFlex="100" fxLayout="column"> - <div fxFlex style="margin: 5px; width: 100%" fxLayout="column"> - <mat-form-field - style="width: 95%" - (click)="fileInput.click()" - color="accent" - > - <mat-label>Upload JSON file</mat-label> - <input - matInput - placeholder="File" - disabled - (value)="(fileName)" - /> - <input - #fileInput - type="file" - style="display: none" - (change)="handleFileInput($event.target.files)" - data-cy="sp-file-management-file-input" - /> - <div> - {{ fileName }} - <mat-progress-bar - mode="determinate" - value="{{ uploadStatus }}" - *ngIf="uploadStatus > 0" - color="accent" - ></mat-progress-bar> - </div> - <button - color="accent" - matSuffix - mat-button - style="min-width: 0px" - > - <mat-icon *ngIf="uploadStatus < 99" - >insert_drive_file</mat-icon - > - <mat-icon - *ngIf="uploadStatus === 100" - class="green-icon" - >check_circle</mat-icon - > - </button> - <mat-error *ngIf="!hasInput"> - {{ errorMessage }} - </mat-error> - </mat-form-field> - </div> - <div fxFlex="100"> - <mat-form-field - style="width: 100%; height: 100%" - color="accent" - > - <mat-label>Insert model</mat-label> - <textarea - matInput - [(ngModel)]="jsonModel" - style="height: 100%" - cdkTextareaAutosize - cdkAutosizeMinRows="30" - cdkAutosizeMaxRows="30" - ></textarea> - </mat-form-field> - </div> - </div> - </div> - <mat-divider></mat-divider> - <div class="sp-dialog-actions"> - <button - mat-button - mat-raised-button - color="accent" - [disabled]="jsonModel === undefined" - (click)="store()" - data-cy="sp-file-management-store-file" - style="margin-right: 10px" - > - Create asset - </button> - <button - mat-button - mat-raised-button - class="mat-basic" - (click)="cancel()" - style="margin-right: 10px" - > - Cancel - </button> - </div> -</div> diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss deleted file mode 100644 index 5af8ee0fc0..0000000000 --- a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* - * 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 '../../../../scss/sp/sp-dialog'; diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts deleted file mode 100644 index 8dc07f3a7f..0000000000 --- a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -/* - * 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 { Component } from '@angular/core'; -import { DialogRef } from '@streampipes/shared-ui'; -import { - AssetConstants, - GenericStorageService, -} from '@streampipes/platform-services'; - -@Component({ - selector: 'sp-file-upload-dialog-component', - templateUrl: './asset-upload-dialog.component.html', - styleUrls: ['./asset-upload-dialog.component.scss'], -}) -export class AssetUploadDialogComponent { - inputValue: string; - fileName: string; - - jsonModel: string; - - hasInput: boolean; - errorMessage = 'Please enter a value'; - - uploadStatus = 0; - - constructor( - private dialogRef: DialogRef<AssetUploadDialogComponent>, - private genericStorageService: GenericStorageService, - ) {} - - handleFileInput(files: any) { - this.uploadStatus = 0; - - const fr = new FileReader(); - - fr.onload = ev => { - const jsonObject = JSON.parse(ev.target.result as string); - this.jsonModel = JSON.stringify(jsonObject, null, 2); - }; - - fr.readAsText(files.item(0)); - } - - store() { - this.uploadStatus = 0; - if (this.jsonModel !== undefined) { - const jsonObject = JSON.parse(this.jsonModel); - jsonObject._rev = undefined; - this.genericStorageService - .createDocument(AssetConstants.ASSET_APP_DOC_NAME, jsonObject) - .subscribe(result => { - this.dialogRef.close(true); - }); - } - } - - cancel() { - this.dialogRef.close(); - } -} 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 77cfb37011..5c1b11994c 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 @@ -154,17 +154,11 @@ </th> <td mat-cell *matCellDef="let adapter"> <div> - <b - style="margin-bottom: 0" - data-cy="adapter-name" - >{{ adapter.name }}</b - > + <b data-cy="adapter-name">{{ adapter.name }}</b> + </div> + <div> + <small> {{ adapter.description }}</small> </div> - <span>{{ - adapter.description !== '' - ? adapter.description - : '-' - }}</span> </td> </ng-container> <ng-container matColumnDef="adapterBase"> 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 d7937055ae..676577c3c4 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html @@ -59,12 +59,17 @@ </th> <td fxFlex="60" - fxLayoutAlign="start center" + fxLayoutAlign="center start" + fxLayout="column" mat-cell *matCellDef="let element" > - {{ element.name }}<br /> - {{ element.description }} + <div> + <b>{{ element.name }}</b> + </div> + <div> + <small> {{ element.description }}</small> + </div> </td> </ng-container> diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html index 7913b3321b..0db2cf93c5 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html +++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html @@ -37,13 +37,18 @@ </th> <td fxFlex="60" - fxLayoutAlign="start center" + fxLayoutAlign="center start" mat-cell data-cy="dashboard-table-overview" *matCellDef="let element" + fxLayout="column" > - {{ element.name }}<br /> - {{ element.description }} + <div> + <b>{{ element.name }}</b> + </div> + <div> + <small> {{ element.description }}</small> + </div> </td> </ng-container> 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 78d0c8a4c4..76a01b40fe 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 @@ -134,10 +134,12 @@ <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> - <span> - {{ pipeline.description !== '' ? pipeline.description : '-' }} - </span> + <div> + <b>{{ pipeline.name }}</b> + </div> + <div> + <small> {{ pipeline.description }}</small> + </div> </td> </ng-container>
