This is an automated email from the ASF dual-hosted git repository.
SvenO3 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 3961df2671 feat: Improve dataset details and feature card views (#4703)
3961df2671 is described below
commit 3961df26713a5e21858cefa3d7d6be2fe816dd21
Author: Sven Oehler <[email protected]>
AuthorDate: Fri Jul 10 11:05:43 2026 +0200
feat: Improve dataset details and feature card views (#4703)
---
.../dataset-details-events.component.html | 12 ++++-
.../dataset-details-events.component.ts | 9 +++-
.../dataset-feature-card.component.html | 20 +++++++
.../dataset-feature-card.component.ts | 62 +++++++++++++---------
4 files changed, 77 insertions(+), 26 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 d647754863..83102bde15 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
@@ -45,7 +45,7 @@
</sp-element-id>
</div>
- <div fxLayout="row" fxLayoutAlign="end center">
+ <div fxLayout="row" fxLayoutAlign="end center"
fxLayoutGap="0.5rem">
<mat-form-field
appearance="outline"
subscriptSizing="dynamic"
@@ -62,6 +62,16 @@
data-cy="dataset-details-event-limit"
/>
</mat-form-field>
+ <button
+ mat-icon-button
+ color="accent"
+ [matTooltip]="'Refresh' | translate"
+ [disabled]="loadingEvents"
+ data-cy="dataset-details-refresh-events"
+ (click)="refreshLatestEvents()"
+ >
+ <mat-icon>refresh</mat-icon>
+ </button>
</div>
<div fxLayout="column" class="events-preview-section">
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 7c19543d72..561adef0f1 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
@@ -31,11 +31,12 @@ import {
LayoutDirective,
LayoutGapDirective,
} from '@ngbracket/ngx-layout/flex';
-import { MatButton } from '@angular/material/button';
+import { MatButton, MatIconButton } 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 { MatInput } from '@angular/material/input';
+import { MatTooltip } from '@angular/material/tooltip';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '@ngx-translate/core';
import { catchError, finalize, of } from 'rxjs';
@@ -62,6 +63,8 @@ type PreviewRow = Record<string, unknown>;
MatFormField,
MatLabel,
MatInput,
+ MatIconButton,
+ MatTooltip,
FormsModule,
TranslatePipe,
],
@@ -124,6 +127,10 @@ export class DatasetDetailsEventsComponent
this.loadLatestEvents();
}
+ refreshLatestEvents(): void {
+ this.onEventLimitChange(this.eventLimit);
+ }
+
navigateToCreateChart(): void {
this.router.navigate(['chart', 'create'], {
queryParams: {
diff --git
a/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.html
b/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.html
index 9c46386282..f6ccb81b0d 100644
---
a/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.html
+++
b/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.html
@@ -54,6 +54,26 @@
</sp-label>
</div>
</div>
+
+ <div
+ class="feature-card-meta-box"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="0.75rem"
+ >
+ <mat-icon class="feature-card-meta-icon">numbers</mat-icon>
+ <div>
+ <div class="feature-card-meta-field-label">
+ {{ 'Total events' | translate }}
+ </div>
+ <div
+ class="feature-card-meta-field-value mt-xs"
+ data-cy="dataset-feature-card-total-events"
+ >
+ {{ totalEventCount ?? '-' }}
+ </div>
+ </div>
+ </div>
</sp-feature-card-meta-section>
<div class="feature-card-meta-section__label">
diff --git
a/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.ts
b/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.ts
index f14d2f9332..84adc59302 100644
---
a/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.ts
+++
b/ui/src/app/dataset/components/dataset-feature-card/dataset-feature-card.component.ts
@@ -35,7 +35,7 @@ import {
GenericStorageService,
SpQueryResult,
} from '@streampipes/platform-services';
-import { forkJoin } from 'rxjs';
+import { catchError, forkJoin, Observable, of } from 'rxjs';
import { TranslatePipe } from '@ngx-translate/core';
import { MatIcon } from '@angular/material/icon';
import {
@@ -72,6 +72,7 @@ export class DatasetFeatureCardComponent implements OnInit {
assetLinkType: AssetLinkType;
dataPreview: SpQueryResult;
lastEventTs: number | undefined;
+ totalEventCount: number | undefined;
previewRows: PreviewRow[] = [];
private datalakeRestService = inject(DatalakeRestService);
@@ -93,30 +94,43 @@ export class DatasetFeatureCardComponent implements OnInit {
}
loadSampleData(): void {
- this.datalakeRestService
- .getData(this.dataset.measureName, {
- endDate: new Date().getTime(),
- startDate: 0,
- limit: 1,
- order: 'DESC',
- missingValueBehaviour: 'empty',
- columns: this.dataset.eventSchema.eventProperties
- .map(ep => ep.runtimeName)
- .toString(),
- })
- .subscribe(res => {
- this.dataPreview = res;
- if (res.total > 0) {
- const previewRow = res.allDataSeries?.[0]?.rows?.[0] ?? [];
- this.lastEventTs = Number(previewRow[0]);
- this.previewRows = res.headers.map((header, index) =>
+ forkJoin({
+ dataPreview: this.datalakeRestService
+ .getData(this.dataset.measureName, {
+ endDate: new Date().getTime(),
+ startDate: 0,
+ limit: 1,
+ order: 'DESC',
+ missingValueBehaviour: 'empty',
+ columns: this.dataset.eventSchema.eventProperties
+ .map(ep => ep.runtimeName)
+ .toString(),
+ })
+ .pipe(catchError(() => of(new SpQueryResult()))),
+ totalEventCount: this.loadTotalEventCount(),
+ }).subscribe(res => {
+ this.dataPreview = res.dataPreview;
+ this.totalEventCount = res.totalEventCount;
+
+ if (res.dataPreview.total > 0) {
+ const previewRow =
+ res.dataPreview.allDataSeries?.[0]?.rows?.[0] ?? [];
+ this.lastEventTs = Number(previewRow[0]);
+ this.previewRows = res.dataPreview.headers.map(
+ (header, index) =>
this.toPreviewRow(header, previewRow[index]),
- );
- } else {
- this.previewRows = [];
- this.lastEventTs = undefined;
- }
- });
+ );
+ } else {
+ this.previewRows = [];
+ this.lastEventTs = undefined;
+ }
+ });
+ }
+
+ private loadTotalEventCount(): Observable<number> {
+ return this.datalakeRestService
+ .getMeasurementEntryCount(this.dataset.elementId)
+ .pipe(catchError(() => of(0)));
}
formatDate(timestamp?: number): string {
