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 d9b0374391 Improve details schema view
d9b0374391 is described below
commit d9b03743911795b010b6f5d3ff28a6343758da88
Author: Sven Oehler <[email protected]>
AuthorDate: Thu Jun 18 18:04:08 2026 +0200
Improve details schema view
---
.../dataset-details-schema.component.html | 108 ++++++++++-----------
.../dataset-details-schema.component.scss | 23 +++++
.../dataset-details-schema.component.ts | 43 ++++----
3 files changed, 100 insertions(+), 74 deletions(-)
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.html
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.html
index 45905c5ee7..81fef25bf7 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.html
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.html
@@ -41,65 +41,63 @@
</div>
@if (schemaRows.length > 0) {
- <table
- mat-table
- [dataSource]="schemaRows"
- class="w-100"
- data-cy="dataset-details-schema-table"
- >
- <ng-container matColumnDef="runtimeName">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Runtime Name' | translate }}
- </th>
- <td mat-cell *matCellDef="let row">
- {{ row.runtimeName }}
- </td>
- </ng-container>
-
- <ng-container matColumnDef="label">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Field Name' | translate }}
- </th>
- <td mat-cell *matCellDef="let row">
- {{ row.label }}
- </td>
- </ng-container>
+ <div data-cy="dataset-details-schema-table">
+ <table mat-table [dataSource]="schemaRows" class="w-100">
+ <ng-container matColumnDef="runtimeName">
+ <th mat-header-cell *matHeaderCellDef>
+ <strong>{{
+ 'Runtime Name' | translate
+ }}</strong>
+ </th>
+ <td mat-cell *matCellDef="let row">
+ <div class="runtime-name-row">
+ <div class="runtime-name">
+ {{ row.runtimeName }}
+ </div>
+ <sp-property-scope-badge
+ [propertyScope]="row.propertyScope"
+ />
+ </div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="dataType">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Data type' | translate }}
- </th>
- <td mat-cell *matCellDef="let row">
- {{ row.dataType }}
- </td>
- </ng-container>
+ <ng-container matColumnDef="label">
+ <th mat-header-cell *matHeaderCellDef>
+ <strong>{{ 'Field Name' | translate }}</strong>
+ </th>
+ <td mat-cell *matCellDef="let row">
+ {{ row.label }}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="propertyScope">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Property scope' | translate }}
- </th>
- <td mat-cell *matCellDef="let row">
- <sp-property-scope-badge
- [propertyScope]="row.propertyScope"
- />
- </td>
- </ng-container>
+ <ng-container matColumnDef="dataType">
+ <th mat-header-cell *matHeaderCellDef>
+ <strong>{{ 'Data type' | translate }}</strong>
+ </th>
+ <td mat-cell *matCellDef="let row">
+ <div class="value">{{ row.dataType }}</div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="description">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Description' | translate }}
- </th>
- <td mat-cell *matCellDef="let row">
- {{ row.description }}
- </td>
- </ng-container>
+ <ng-container matColumnDef="description">
+ <th mat-header-cell *matHeaderCellDef>
+ <strong>{{ 'Description' | translate
}}</strong>
+ </th>
+ <td mat-cell *matCellDef="let row">
+ {{ row.description }}
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="schemaColumns"></tr>
- <tr
- mat-row
- *matRowDef="let row; columns: schemaColumns"
- ></tr>
- </table>
+ <tr
+ mat-header-row
+ *matHeaderRowDef="schemaColumns"
+ ></tr>
+ <tr
+ mat-row
+ *matRowDef="let row; columns: schemaColumns"
+ ></tr>
+ </table>
+ </div>
} @else {
<div class="empty-state">
{{ 'No event schema available.' | translate }}
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.scss
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.scss
index e76c1e7326..32e33a0f81 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.scss
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.scss
@@ -22,6 +22,29 @@
background: var(--color-bg-1);
}
+.runtime-name-row {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+}
+
+.runtime-name {
+ font-weight: bold;
+ border-radius: 3px;
+ padding: 3px 5px;
+ background: var(--color-bg-3);
+ display: inline-flex;
+}
+
+.mat-mdc-row:nth-child(even) {
+ background: var(--color-bg-1);
+}
+
+.value {
+ border-radius: 3px;
+ padding: 3px 5px;
+}
+
td,
th {
white-space: nowrap;
diff --git
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.ts
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.ts
index 4e1f0cacca..4ccc494596 100644
---
a/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.ts
+++
b/ui/src/app/dataset/components/dataset-details/dataset-details-schema/dataset-details-schema.component.ts
@@ -85,13 +85,7 @@ export class DatasetDetailsSchemaComponent
private pipelineElementSchemaService =
inject(PipelineElementSchemaService);
schemaRows: SchemaRow[] = [];
- schemaColumns = [
- 'runtimeName',
- 'label',
- 'dataType',
- 'propertyScope',
- 'description',
- ];
+ schemaColumns = ['runtimeName', 'label', 'dataType', 'description'];
ngOnInit(): void {
super.onInit();
@@ -108,17 +102,28 @@ export class DatasetDetailsSchemaComponent
}
private makeSchemaRows(): SchemaRow[] {
- return (this.dataset.eventSchema?.eventProperties ?? []).map(
- property => ({
- runtimeName: property.runtimeName || 'n/a',
- label: property.label || 'n/a',
- dataType:
- this.pipelineElementSchemaService.getFriendlyRuntimeType(
- property,
- ),
- propertyScope: property.propertyScope,
- description: property.description || 'n/a',
- }),
- );
+ const eventProperties = this.dataset.eventSchema?.eventProperties ??
[];
+ const schemaRows = eventProperties.map(property => ({
+ runtimeName: property.runtimeName || 'n/a',
+ label: property.label || 'n/a',
+ dataType:
+ this.pipelineElementSchemaService.getFriendlyRuntimeType(
+ property,
+ ),
+ propertyScope: property.propertyScope,
+ description: property.description || 'n/a',
+ }));
+
+ return [this.makeTimestampRow(), ...schemaRows];
+ }
+
+ private makeTimestampRow(): SchemaRow {
+ return {
+ runtimeName: this.dataset.timestampField || 'time',
+ label: 'time',
+ dataType: 'Timestamp',
+ propertyScope: 'HEADER_PROPERTY',
+ description: 'Dataset internal timestamp field',
+ };
}
}
