This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new d3724d4e8 [hotfix] Fix layout issues and validation in data explorer
(#1829)
d3724d4e8 is described below
commit d3724d4e824ce98359146a52e0689cf7f76c65fe
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Aug 17 16:02:34 2023 +0200
[hotfix] Fix layout issues and validation in data explorer (#1829)
---
.../core/components/toolbar/toolbar.component.html | 4 ++-
ui/src/app/core/core.module.ts | 4 ++-
ui/src/app/core/pipes/shorten.pipe.ts | 31 ++++++++++++++++++++++
.../filter-selection-panel.component.html | 6 ++---
.../data-explorer-dashboard-overview.component.ts | 1 +
...a-explorer-edit-data-view-dialog.component.html | 5 ++++
ui/src/scss/sp/layout.scss | 12 +++++++++
7 files changed, 58 insertions(+), 5 deletions(-)
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.html
b/ui/src/app/core/components/toolbar/toolbar.component.html
index 01e55b8f4..18d84a81c 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core/components/toolbar/toolbar.component.html
@@ -127,7 +127,9 @@
</div>
<mat-menu #menu="matMenu" id="account">
<div class="current-user">
- <span class="user-email">{{ userEmail }}</span>
+ <span class="user-email">{{
+ userEmail | shorten : 30
+ }}</span>
</div>
<mat-divider></mat-divider>
<button
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
index 9c22a9454..c66b60c18 100644
--- a/ui/src/app/core/core.module.ts
+++ b/ui/src/app/core/core.module.ts
@@ -38,6 +38,7 @@ import { MatBadgeModule } from '@angular/material/badge';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { SpBreadcrumbComponent } from
'./components/breadcrumb/breadcrumb.component';
import { SharedUiModule } from '@streampipes/shared-ui';
+import { ShortenPipe } from './pipes/shorten.pipe';
@NgModule({
imports: [
@@ -65,7 +66,8 @@ import { SharedUiModule } from '@streampipes/shared-ui';
StreampipesComponent,
IconbarComponent,
ToolbarComponent,
+ ShortenPipe,
],
- providers: [],
+ providers: [ShortenPipe],
})
export class CoreModule {}
diff --git a/ui/src/app/core/pipes/shorten.pipe.ts
b/ui/src/app/core/pipes/shorten.pipe.ts
new file mode 100644
index 000000000..22ac6618d
--- /dev/null
+++ b/ui/src/app/core/pipes/shorten.pipe.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'shorten',
+})
+export class ShortenPipe implements PipeTransform {
+ transform(value: string, maxLength: number): string {
+ if (value.length > maxLength) {
+ return value.substring(0, maxLength) + '...';
+ }
+ return value;
+ }
+}
diff --git
a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
index 7e0357db7..81cbc9e25 100644
---
a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
+++
b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
@@ -51,7 +51,7 @@
[(value)]="filter.field"
(selectionChange)="updateWidget()"
[compareWith]="compare"
- panelClass="form-field-small"
+ panelClass="form-field-small min-w-200"
data-cy="design-panel-data-settings-filter-field"
>
<mat-option
@@ -65,12 +65,12 @@
</mat-form-field>
<mat-form-field
color="accent"
- class="w-60-px mr-5"
+ class="w-80-px mr-5"
appearance="outline"
>
<mat-select
[(value)]="filter.operator"
- panelClass="form-field-smalls"
+ panelClass="form-field-small min-w-100"
(selectionChange)="updateWidget()"
data-cy="design-panel-data-settings-filter-operator"
>
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
index 929c471ac..cd143b836 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
@@ -103,6 +103,7 @@ export class DataExplorerDashboardOverviewComponent
const dataViewDashboard: Dashboard = {};
dataViewDashboard.dashboardGeneralSettings = {};
dataViewDashboard.widgets = [];
+ dataViewDashboard.name = '';
this.openDataViewModificationDialog(true, dataViewDashboard);
}
diff --git
a/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.html
b/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.html
index 2716c0a60..b65bc1e04 100644
---
a/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.html
+++
b/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.html
@@ -27,10 +27,14 @@
<mat-form-field class="w-100" floatLabel="auto" color="accent">
<mat-label>Data View Name</mat-label>
<input
+ id="dvname"
+ #dvname="ngModel"
+ required
matInput
data-cy="data-view-name"
[(ngModel)]="dashboard.name"
/>
+ <mat-error>Name must not be empty</mat-error>
</mat-form-field>
<mat-form-field class="w-100" color="accent">
<mat-label>Description</mat-label>
@@ -70,6 +74,7 @@
Close
</button>
<button
+ [disabled]="dvname.invalid"
mat-button
mat-raised-button
color="accent"
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 141975473..3fde73aeb 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -104,6 +104,10 @@
width: 60px;
}
+.w-80-px {
+ width: 80px;
+}
+
.w-100-px {
width: 100px;
}
@@ -233,3 +237,11 @@ img {
max-width: none;
}
}
+
+.min-w-100 {
+ min-width: 100px;
+}
+
+.min-w-200 {
+ min-width: 200px;
+}
