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 2022/07/12 13:34:33 UTC
[incubator-streampipes] 02/04: [STREAMPIPES-537] Change appearance of data explorer entry page
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 99bc5f6b973b18fdd320522b96abe191769c1287
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jul 12 12:47:23 2022 +0200
[STREAMPIPES-537] Change appearance of data explorer entry page
---
.../basic-header-title/header-title.component.ts | 2 +-
.../basic-inner-panel.component.html | 2 +-
.../basic-inner-panel.component.ts | 3 +
.../basic-view/basic-view.component.html | 5 +-
.../basic-view/basic-view.component.scss | 9 +++
.../data-marketplace.component.html | 2 +-
.../existing-adapters.component.html | 24 +++---
.../error-message/error-message.component.html | 13 ++-
.../error-message/error-message.component.scss | 7 ++
.../event-schema/event-schema.component.html | 4 +-
.../event-schema/event-schema.component.scss | 5 +-
.../edit-event-property.component.ts | 2 +-
...data-explorer-dashboard-overview.component.html | 94 +++++++++++-----------
...data-explorer-dashboard-overview.component.scss | 4 +-
ui/src/app/data-explorer/data-explorer.module.ts | 7 +-
ui/src/scss/sp/main.scss | 4 +
16 files changed, 104 insertions(+), 83 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
index 49f945e8d..a7be2ca9a 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
@@ -11,7 +11,7 @@ export class SpBasicHeaderTitleComponent implements OnInit {
title: string;
@Input()
- margin = '0';
+ margin = '20px 0px';
ngOnInit(): void {
}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
index 5a99598bc..1aaf875af 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
@@ -17,7 +17,7 @@
-->
<div fxLayout="column" fxFlex="100" class="panel-outer" [ngStyle]="{margin: outerMargin}">
- <div class="general-panel-header" fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
+ <div class="general-panel-header" fxLayout="row" fxFlex="100" fxLayoutAlign="start center" *ngIf="!hideToolbar">
<div fxLayout="fill" fxFlex="100">
<div class="content-box-title" *ngIf="showTitle">{{panelTitle}}</div>
<ng-content select="[header]" fxFlex></ng-content>
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
index 9f6ed56fa..3e56b9893 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
@@ -37,4 +37,7 @@ export class SpBasicInnerPanelComponent {
@Input()
outerMargin = '0px';
+ @Input()
+ hideToolbar = false;
+
}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
index a6cea2994..0b6f54545 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -18,9 +18,8 @@
<div fxLayout="column" class="page-container">
<div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav">
- <div fxLayout="fill" fxFlex="100">
- <div class="pl-5 pr-5"
- fxLayout="row"
+ <div fxLayout="fill" fxFlex="100" class="pl-5 pr-5">
+ <div fxLayout="row"
fxLayoutAlign="start center"
style="border-right: 2px solid var(--color-bg-2)" *ngIf="showBackLink">
<button mat-button
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
index 86f2cd984..31712214e 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
@@ -16,6 +16,15 @@
*
*/
+.fixed-height {
+ flex-direction: row;
+ box-sizing: border-box;
+ display: flex;
+ flex: 1 1 100%;
+ max-height: 100%;
+ overflow-y: auto;
+}
+
.page-container-nav {
line-height:24px;
height: 50px;
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index f0f19a10e..0156ac43f 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -29,7 +29,7 @@
</div>
</div>
<div fxLayout="column" fxFlex="100">
- <sp-basic-header-title-component title="Select Adapter" margin="20px 10px"></sp-basic-header-title-component>
+ <sp-basic-header-title-component title="Select Adapter"></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center start">
<div class="container-fluid marketplace-container" *ngIf="adapterLoadingError" fxFlex="100"
fxLayoutAlign="center center" fxLayout="row">
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 1605e2921..d9ac903c5 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
@@ -15,7 +15,7 @@
~ limitations under the License.
~
-->
-<sp-basic-view [showBackLink]="false" padding="0" fxFlex="100" fxLayout="column">
+<sp-basic-view [showBackLink]="false" padding="0">
<div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
<button mat-button mat-raised-button color="accent" (click)="createNewAdapter()">
@@ -25,21 +25,19 @@
class="filter-bar-margin"
(filterChangedEmitter)="applyFilter($event)">
</sp-connect-filter-toolbar>
+ <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+ <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="below"
+ (click)="getAdaptersRunning()">
+ <i class="material-icons">
+ refresh
+ </i>
+ </button>
+ </div>
</div>
<div fxFlex="100" fxLayout="column">
- <sp-basic-header-title-component title="My adapters" margin="20px 10px"></sp-basic-header-title-component>
+ <sp-basic-header-title-component title="My adapters"></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">
- <div header fxLayoutAlign="end center" fxFlex="100">
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
- (click)="getAdaptersRunning()">
- <i class="material-icons">
- refresh
- </i>
- </button>
- </div>
- </div>
+ <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90" [hideToolbar]="true">
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="column">
<table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.html
index 3c7e8b023..8172ea552 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.html
@@ -16,14 +16,13 @@
~
-->
-<div fxLayout="column" >
- <div fxLayout="row" fxLayoutAlign="center center">
- <mat-icon style="margin-top: 10px" class="md-accent">warning</mat-icon>
- <span style="width: 10px;"></span>
- <h3>Sorry, there was an error while guessing the schema of your configured data source...</h3>
+<div fxLayout="column" fxFlex="100">
+ <div fxLayout="row" fxLayoutAlign="center center" class="error-color" fxFlex="100">
+ <mat-icon fxLayoutAlign="start center">warning</mat-icon>
+ <div fxLayoutAlign="start center" class="error-text"> Sorry, there was an error while guessing the schema of your configured data source...</div>
</div>
- <div fxLayout="row" fxLayoutAlign="center center">
- <button mat-button class="md-accent">
+ <div fxLayout="row" fxLayoutAlign="center center" class="mt-10">
+ <button mat-button color="accent">
<div *ngIf="!showErrorMessage" (click)="showErrorMessage = true">Show Details</div>
<div *ngIf="showErrorMessage" (click)="showErrorMessage = false">Hide Details</div>
</button>
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.scss b/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.scss
index 58ba04bdd..8eec370bd 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.scss
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/error-message/error-message.component.scss
@@ -16,3 +16,10 @@
*
*/
+.error-color {
+ color: #963e3e;
+}
+
+.error-text {
+ font-size: 12pt;
+}
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
index 3d1bf3f99..7d2e17ae8 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
@@ -17,12 +17,12 @@
-->
-<div fxLayout="row" fxLayoutAlign="center">
+<div fxLayout="row" fxLayoutAlign="center" class="mt-20">
<div fxFlex="80" fxLayout="column">
<div fxLayout="column"
fxFlex="100"
fxLayoutAlign="start center"
- [ngClass]="schemaErrorHints.length === 0 ? 'schema-validation schema-validation-ok' : 'schema-validation schema-validation-error'">
+ [ngClass]="schemaErrorHints.length === 0 ? 'schema-validation schema-validation-ok' : 'schema-validation schema-validation-error'" *ngIf="!isLoading && !isError">
<div fxFlex="100"
fxLayout="row"
fxLayoutAlign="start center"
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
index 099d29057..741fc7628 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
@@ -172,8 +172,11 @@ opacity:0.5;
color: rgba(0, 0, 0, 0.26);
}
-.schema-validation {
+.mt-20 {
margin-top: 20px;
+}
+
+.schema-validation {
margin-bottom: 10px;
border: 2px solid var(--color-bg-3);
padding: 8px;
diff --git a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
index 75ba40afd..d3a3dc989 100644
--- a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
@@ -27,7 +27,7 @@ import {
} from '@streampipes/platform-services';
import { SemanticTypeUtilsService } from '../../../core-services/semantic-type/semantic-type-utils.service';
import { DataTypesService } from '../../services/data-type.service';
-import { DialogRef } from '../../../../../dist/streampipes/shared-ui';
+import { DialogRef } from '@streampipes/shared-ui';
import { EditSchemaTransformationComponent } from './components/edit-schema-transformation/edit-schema-transformation.component';
import { EditValueTransformationComponent } from './components/edit-value-transformation/edit-value-transformation.component';
import { EditUnitTransformationComponent } from './components/edit-unit-transformation/edit-unit-transformation.component';
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 4a7cc1132..37faadbfb 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
@@ -17,84 +17,86 @@
-->
-<div fxLayout="column" class="page-container">
- <div fxLayout="column">
- <div fxLayout="row" class="fixed-height options-bar page-container-nav sp-tab-bg">
- <div fxLayoutAlign="start center" fxLayout="row" class="pl-10">
- <button mat-button mat-raised-button color="accent"
- data-cy="open-new-data-view-dialog"
- (click)="openNewDataViewDialog()" class="mr-10" *ngIf="hasDataExplorerWritePrivileges">
- <i class="material-icons">add</i>
- <span>New Data View</span>
- </button>
- </div>
- </div>
+<sp-basic-view [showBackLink]="false" padding="0">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+ <button mat-button mat-raised-button color="accent"
+ data-cy="open-new-data-view-dialog"
+ (click)="openNewDataViewDialog()" class="mr-10" *ngIf="hasDataExplorerWritePrivileges">
+ <i class="material-icons">add</i>
+ <span>New Data View</span>
+ </button>
+
</div>
- <div fxLayout="column" class="m-20">
- <div class="assemblyOptions sp-blue-bg p-5">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>My Data Views</h4>
- <span fxFlex></span>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border">
- <div fxFlex="100" fxLayout="column" class="w-100 p-2">
- <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-header-title-component title="My 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" fxFlex="90" [hideToolbar]="true">
+ <div fxFlex="100" fxLayout="column" class="w-100">
+ <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
- <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="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> Actions</th>
- <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
- <div fxLayout="row" fxFlex="100">
+ <ng-container matColumnDef="actions">
+ <th fxFlex="40" fxLayoutAlign="center center" mat-header-cell *matHeaderCellDef> Actions
+ </th>
+ <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <div fxLayout="row" fxFlex="100">
<span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
<button mat-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">
+ <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDataExplorerWritePrivileges">
<button mat-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">
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDataExplorerWritePrivileges">
<button mat-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">
+ <span fxFlex fxFlexOrder="4" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="isAdmin">
<button mat-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">
+ <span fxFlex fxFlexOrder="5" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDataExplorerDeletePrivileges">
<button mat-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>
+ </div>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let element; columns: displayedColumns;">
+ </tr>
+ </table>
+ </div>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let element; columns: displayedColumns;">
- </tr>
- </table>
- </div>
+ </sp-basic-inner-panel>
</div>
</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 25b8b8bf8..6e728ccbb 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
@@ -25,10 +25,10 @@ table {
}
.mat-row:nth-child(even) {
- background-color: var(--color-bg-2);
+ background-color: var(--color-bg-1);
}
.mat-row:nth-child(odd) {
- background-color: var(--color-bg-3);
+ background-color: var(--color-bg-2);
}
.w-100 {
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index f4e1a4432..2e71a44d3 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -102,6 +102,7 @@ import { TooMuchDataComponent } from './components/widgets/utils/too-much-data/t
import { SpValueHeatmapComponent } from './components/widgets/distribution-chart/value-heatmap/value-heatmap.component';
import { RouterModule } from '@angular/router';
import { DataExplorerDashboardSlideViewComponent } from './components/widget-view/slide-view/data-explorer-dashboard-slide-view.component';
+import { SharedUiModule } from '../../../dist/streampipes/shared-ui';
export const MY_NATIVE_FORMATS = {
fullPickerInput: {
@@ -147,12 +148,8 @@ export const MY_NATIVE_FORMATS = {
MatSlideToggleModule,
MatChipsModule,
PlatformServicesModule,
+ SharedUiModule,
NgxEchartsModule.forRoot({
- /**
- * This will import all modules from echarts.
- * If you only need custom modules,
- * please refer to [Custom Build] section.
- */
echarts: () => import('echarts'),
}),
RouterModule.forChild([
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 69dfbbb36..2d6549da6 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -371,6 +371,10 @@ md-content {
//height: 100%;
}
+.sp-full-height {
+ min-height: calc(100% - 20px);
+}
+
.page-container-padding-inner {
margin: 10px;
}