This is an automated email from the ASF dual-hosted git repository.
SvenO3 pushed a commit to branch 4566-add-details-view-for-data-sets
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/4566-add-details-view-for-data-sets by this push:
new c126a11c3e Improve details event view
c126a11c3e is described below
commit c126a11c3edc184cbe6ee982cb38a561e42fd344
Author: Sven Oehler <[email protected]>
AuthorDate: Thu Jun 18 18:21:14 2026 +0200
Improve details event view
---
.../dataset-details-events.component.html | 36 +++++-----------------
.../dataset-details-events.component.scss | 34 ++------------------
.../dataset-details-events.component.ts | 11 ++++---
3 files changed, 16 insertions(+), 65 deletions(-)
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
index ba8b1522e0..d647754863 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.html
@@ -52,17 +52,15 @@
class="event-limit-select"
>
<mat-label>{{ 'Events' | translate }}</mat-label>
- <mat-select
+ <input
+ matInput
+ type="number"
+ min="1"
+ max="1000"
[(ngModel)]="eventLimit"
- (selectionChange)="loadLatestEvents()"
+ (change)="onEventLimitChange(eventLimit)"
data-cy="dataset-details-event-limit"
- >
- @for (option of eventLimitOptions; track option) {
- <mat-option [value]="option">
- {{ option }}
- </mat-option>
- }
- </mat-select>
+ />
</mat-form-field>
</div>
@@ -83,29 +81,9 @@
fxLayout="column"
data-cy="dataset-details-events-preview"
>
- <div
- class="preview-header"
- fxLayout="row"
- fxLayoutAlign="space-between center"
- >
- <div class="preview-title" fxFlex>
- {{ 'Latest events' | translate }}
- </div>
- <div
- class="preview-header-actions"
- fxLayout="row"
- fxLayoutAlign="end center"
- >
- <div class="preview-meta">
- {{ totalRows }} {{ 'rows' | translate }}
- </div>
- </div>
- </div>
-
@if (rows.length > 0 && columns.length > 0) {
<div
class="preview-table-scroll"
- fxFlex
data-cy="dataset-details-events-table-scroll"
>
<table
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.scss
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.scss
index cd671cc786..16526330a0 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.scss
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.scss
@@ -29,16 +29,12 @@
}
.events-preview-section {
- flex: 1 1 auto;
- min-height: 0;
+ align-items: stretch;
}
.preview-shell {
display: flex;
- flex: 1 1 auto;
- min-height: 0;
box-sizing: border-box;
- border-top: 1px solid var(--color-bg-2);
border-radius: 0;
background: var(--color-bg-0);
overflow: hidden;
@@ -49,34 +45,8 @@
flex: 0 0 auto;
}
-.preview-header {
- gap: var(--space-sm);
- padding: var(--padding-panel-header-y) var(--padding-panel-header-x);
- border-bottom: 1px solid var(--color-tab-border);
- background: var(--color-panel-header-accent);
- min-height: var(--size-panel-header-compact);
- box-sizing: border-box;
-}
-
-.preview-title {
- font-size: var(--font-size-sm);
- font-weight: var(--font-weight-semibold);
- line-height: var(--line-height-normal);
-}
-
-.preview-header-actions {
- gap: var(--space-2xs);
-}
-
-.preview-meta {
- font-size: var(--font-size-xs);
- color: var(--color-secondary-text);
- white-space: nowrap;
-}
-
.preview-table-scroll {
- flex: 1 1 auto;
- min-height: 0;
+ max-height: calc(100vh - 300px);
overflow: auto;
}
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
index 04b394315e..7c19543d72 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-events/dataset-details-events.component.ts
@@ -35,7 +35,7 @@ import { MatButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatInput } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '@ngx-translate/core';
import { catchError, finalize, of } from 'rxjs';
@@ -61,8 +61,7 @@ type PreviewRow = Record<string, unknown>;
MatProgressSpinner,
MatFormField,
MatLabel,
- MatSelect,
- MatOption,
+ MatInput,
FormsModule,
TranslatePipe,
],
@@ -75,7 +74,6 @@ export class DatasetDetailsEventsComponent
private datePipe = new DatePipe('en-US');
eventLimit = 10;
- eventLimitOptions = [10, 25, 50];
columns: string[] = [];
rows: PreviewRow[] = [];
totalRows = 0;
@@ -121,6 +119,11 @@ export class DatasetDetailsEventsComponent
.subscribe(result => this.applyPreviewResult(result));
}
+ onEventLimitChange(value: number): void {
+ this.eventLimit = Math.min(Math.max(Number(value) || 1, 1), 1000);
+ this.loadLatestEvents();
+ }
+
navigateToCreateChart(): void {
this.router.navigate(['chart', 'create'], {
queryParams: {
