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 3ab0c99b8e feat: Harmonize layout in configuration view, add
pagination to tables (#3916)
3ab0c99b8e is described below
commit 3ab0c99b8e5f8b3d9e801e4027685f1e5236ab48
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri Nov 14 08:07:46 2025 +0100
feat: Harmonize layout in configuration view, add pagination to tables
(#3916)
Co-authored-by: Philipp Zehnder <[email protected]>
---
.../components/sp-table/sp-table.component.html | 5 +-
.../lib/components/sp-table/sp-table.component.ts | 2 +-
.../split-section/split-section.component.html | 26 +-
.../split-section/split-section.component.scss | 85 ++++-
.../split-section/split-section.component.ts | 3 +
.../datalake-configuration.component.html | 347 +++++++++------------
.../export/data-export-import.component.html | 13 +-
.../app/configuration/files/files.component.html | 8 +-
.../general-configuration.component.html | 169 +++++-----
.../link-settings/link-settings.component.html | 13 +-
.../label-configuration.component.html | 12 +-
.../messaging-configuration.component.html | 23 +-
.../abstract-security-principal-config.ts | 2 +-
.../role-configuration.component.html | 17 +-
.../security-configuration.component.html | 52 ++-
.../security-configuration.component.ts | 37 ++-
.../security-service-config.component.html | 16 +-
.../security-user-config.component.html | 10 +-
.../user-group-configuration.component.html | 16 +-
.../location-features-configuration.component.html | 49 ++-
.../site-area-configuration.component.html | 22 +-
ui/src/scss/sp/main.scss | 3 +-
22 files changed, 488 insertions(+), 442 deletions(-)
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
index 045643415b..fc63ce414b 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
@@ -81,8 +81,9 @@
<div fxFlex="100" fxLayoutAlign="end end" class="paginator-container">
<mat-paginator
#paginator
- [pageSize]="20"
- [hidePageSize]="true"
+ [pageSize]="pageSize"
+ [pageSizeOptions]="[5, 10, 20, 50]"
+ [hidePageSize]="false"
[showFirstLastButtons]="true"
></mat-paginator>
</div>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
index 42fa5d2d4f..4a749d30b9 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
@@ -67,7 +67,7 @@ export class SpTableComponent<T> implements AfterViewInit,
AfterContentInit {
@ContentChild(SpTableActionsDirective, { read: TemplateRef })
actionsTemplate?: TemplateRef<any>;
- pageSize = 1;
+ pageSize = 10;
timedOutCloser: any;
trigger: MatMenuTrigger | undefined = undefined;
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
index 751f19934b..faab80916a 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
@@ -16,14 +16,22 @@
~
-->
-<div fxFlex="100" fxLayout="column">
- <div fxLayout="row">
- <div fxFlex="210px" fxLayout="column" class="split-section">
- <div class="split-section-title">{{ title }}</div>
- <div class="split-section-description">{{ subtitle }}</div>
- </div>
- <div fxFlex fxLayout="column">
- <ng-content></ng-content>
+<section class="section" [class.compact]="compact">
+ <header class="section-header">
+ <div class="eyebrow" *ngIf="eyebrow">{{ eyebrow }}</div>
+
+ <h2 class="title">{{ title }}</h2>
+
+ <div class="header-actions">
+ <ng-content select="[section-actions]"></ng-content>
</div>
+
+ <p class="description" *ngIf="subtitle">
+ {{ subtitle }}
+ </p>
+ </header>
+
+ <div class="section-body" role="group" fxLayout="column">
+ <ng-content></ng-content>
</div>
-</div>
+</section>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
index 5a1420cf05..c7820057d2 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
@@ -17,22 +17,85 @@
*/
:host {
- margin-top: 20px;
width: 100%;
- margin-bottom: 20px;
+ display: block;
+ --accent: hsl(221 83% 53%);
+ --fg-muted: color-mix(in oklab, currentColor 60%, transparent);
+ --divider: color-mix(in oklab, currentColor 18%, transparent);
}
-.split-section-title {
- font-weight: bold;
- font-size: 16pt;
+.section {
+ position: relative;
+ padding: 0.75rem 0 1rem 0.875rem;
}
-.split-section-description {
- font-size: 12pt;
+.section::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0.75rem;
+ bottom: 1rem;
+ width: 2px;
+ background: var(--color-primary);
+ border-radius: 2px;
+ opacity: 0.35;
}
-.split-section {
- border-right: 1px solid var(--color-bg-3);
- margin-right: 15px;
- padding-right: 5px;
+.section-header {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: auto auto;
+ column-gap: 0.75rem;
+ row-gap: 0.25rem;
+ align-items: start;
+}
+
+.eyebrow {
+ grid-column: 1 / -1;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ font-size: 0.75rem;
+ line-height: 1.2;
+ color: var(--fg-muted);
+}
+
+.title {
+ margin: 0;
+ font-weight: 600;
+ line-height: 1.2;
+ font-size: clamp(1rem, 1.8vw, 1.25rem);
+ letter-spacing: -0.01em;
+}
+
+.header-actions {
+ grid-column: 2 / 3;
+ grid-row: 1 / 3;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.description {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ margin: 0;
+ font-size: clamp(0.875rem, 1.2vw, 0.95rem);
+ line-height: 1.35;
+ color: var(--fg-muted);
+ font-weight: 300;
+}
+
+.section-body {
+ margin-top: 0.75rem;
+ margin-left: 20px;
+ display: block;
+}
+
+.section.compact {
+ padding-top: 0.5rem;
+ padding-bottom: 0.75rem;
+}
+
+.section.compact .description {
+ font-size: 0.875rem;
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.ts
index a03aeb3e27..7c43dfcb89 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.ts
@@ -30,4 +30,7 @@ export class SplitSectionComponent {
@Input()
subtitle: string;
+
+ @Input() eyebrow = '';
+ @Input() compact = false;
}
diff --git
a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
index 60c557f1ee..a78bea7e96 100644
---
a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
+++
b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
@@ -23,27 +23,17 @@
[title]="'Data Lake Settings' | translate"
[subtitle]="'Manage persisted data streams' | translate"
>
+ <button
+ section-actions
+ color="accent"
+ mat-icon-button
+ [matTooltip]="'Refresh' | translate"
+ data-cy="refresh-data-lake-measures"
+ (click)="loadAvailableMeasurements()"
+ >
+ <mat-icon>refresh</mat-icon>
+ </button>
<div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="row">
- <div
- fxFlex
- fxLayoutAlign="start center"
- class="subsection-title"
- >
- {{ 'Existing data lake indices' | translate }}
- </div>
- <div fxLayout="row" fxLayoutAlign="end center">
- <button
- color="accent"
- mat-icon-button
- [matTooltip]="'Refresh' | translate"
- data-cy="refresh-data-lake-measures"
- (click)="loadAvailableMeasurements()"
- >
- <mat-icon>refresh</mat-icon>
- </button>
- </div>
- </div>
<table
fxFlex="100"
mat-table
@@ -61,9 +51,7 @@
{{ 'Name' | translate }}
</th>
<td mat-cell *matCellDef="let configurationEntry">
- <h4 style="margin-bottom: 0px">
- {{ configurationEntry.name }}
- </h4>
+ {{ configurationEntry.name }}
</td>
</ng-container>
@@ -286,191 +274,154 @@
| translate
"
>
- <div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="row">
- <div
- fxFlex
- fxLayoutAlign="start center"
- class="subsection-title"
- >
- {{ 'Existing Export Providers' | translate }}
- </div>
-
- <div fxLayout="row" fxLayoutAlign="end center">
- <button
- color="accent"
- mat-icon-button
- matTooltip="{{
- 'New Export Provider' | translate
- }}"
- data-cy="new-export-providers"
- (click)="createExportProvider(null)"
- >
- <mat-icon>add</mat-icon>
- </button>
- </div>
-
- <div fxLayout="row" fxLayoutAlign="end center">
- <button
- color="accent"
- mat-icon-button
- matTooltip="{{ 'Refresh' | translate }}"
- data-cy="refresh-export-providers-measures"
- (click)="loadAvailableExportProvider()"
- >
- <mat-icon>refresh</mat-icon>
- </button>
- </div>
- </div>
-
- <table
- fxFlex="100"
- mat-table
- data-cy="exportproviders-settings"
- [dataSource]="dataSourceExport"
- style="width: 100%"
- matSort
+ <div
+ fxLayout="row"
+ fxLayoutAlign="end center"
+ section-actions
+ fxLayoutGap="5px"
+ >
+ <button
+ mat-flat-button
+ matTooltip="{{ 'New' | translate }}"
+ data-cy="new-export-providers"
+ (click)="createExportProvider(null)"
>
- <ng-container matColumnDef="providertype">
- <th
- mat-header-cell
- mat-sort-header
- *matHeaderCellDef
- >
- {{ 'Provider Type' | translate }}
- </th>
- <td mat-cell *matCellDef="let configurationEntry">
- <h4 style="margin-bottom: 0px">
- {{ configurationEntry.providerType }}
- </h4>
- </td>
- </ng-container>
+ <mat-icon>add</mat-icon>
+ <span>{{ 'New' | translate }}</span>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="{{ 'Refresh' | translate }}"
+ data-cy="refresh-export-providers-measures"
+ (click)="loadAvailableExportProvider()"
+ >
+ <mat-icon>refresh</mat-icon>
+ </button>
+ </div>
+ <table
+ fxFlex="100"
+ mat-table
+ data-cy="exportproviders-settings"
+ [dataSource]="dataSourceExport"
+ style="width: 100%"
+ matSort
+ >
+ <ng-container matColumnDef="providertype">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Provider Type' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ {{ configurationEntry.providerType }}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="endpoint">
- <th
- mat-header-cell
- mat-sort-header
- *matHeaderCellDef
- >
- {{ 'Endpoint' | translate }}
- </th>
- <td mat-cell *matCellDef="let configurationEntry">
- {{ configurationEntry.endPoint }}
- </td>
- </ng-container>
+ <ng-container matColumnDef="endpoint">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Endpoint' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ {{ configurationEntry.endPoint }}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="bucket">
- <th
- mat-header-cell
- mat-sort-header
- *matHeaderCellDef
- >
- {{ 'Bucket' | translate }}
- </th>
- <td mat-cell *matCellDef="let configurationEntry">
- {{ configurationEntry.bucketName }}
- </td>
- </ng-container>
+ <ng-container matColumnDef="bucket">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>
+ {{ 'Bucket' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ {{ configurationEntry.bucketName }}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="editExportProvider">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Edit' | translate }}
- </th>
- <td mat-cell *matCellDef="let configurationEntry">
- <div
- *ngIf="
- configurationEntry.providerId !==
- 'FOLDER'
- "
- >
- <div fxLayout="row">
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="start center"
+ <ng-container matColumnDef="editExportProvider">
+ <th mat-header-cell *matHeaderCellDef>
+ {{ 'Edit' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ <div
+ *ngIf="
+ configurationEntry.providerId !== 'FOLDER'
+ "
+ >
+ <div fxLayout="row">
+ <span
+ fxFlex
+ fxFlexOrder="3"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="{{
+ 'Edit Export Provider'
+ | translate
+ }}"
+ matTooltipPosition="above"
+ data-cy="exportProvider-edit-btn"
+ (click)="
+ createExportProvider(
+ configurationEntry
+ )
+ "
>
- <button
- color="accent"
- mat-icon-button
- matTooltip="{{
- 'Edit Export Provider'
- | translate
- }}"
- matTooltipPosition="above"
-
data-cy="exportProvider-edit-btn"
- (click)="
- createExportProvider(
- configurationEntry
- )
- "
- >
- <i class="material-icons"
- >edit</i
- >
- </button>
- </span>
- </div>
+ <i class="material-icons">edit</i>
+ </button>
+ </span>
</div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="delete">
- <th mat-header-cell *matHeaderCellDef>
- {{ 'Remove' | translate }}
- </th>
- <td mat-cell *matCellDef="let configurationEntry">
- <div
- *ngIf="
- configurationEntry.providerId !==
- 'FOLDER'
- "
- >
- <div fxLayout="row">
- <span
- fxFlex
- fxFlexOrder="3"
- fxLayout="row"
- fxLayoutAlign="start center"
+ <ng-container matColumnDef="delete">
+ <th mat-header-cell *matHeaderCellDef>
+ {{ 'Remove' | translate }}
+ </th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ <div
+ *ngIf="
+ configurationEntry.providerId !== 'FOLDER'
+ "
+ >
+ <div fxLayout="row">
+ <span
+ fxFlex
+ fxFlexOrder="3"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ <button
+ color="accent"
+ mat-icon-button
+ matTooltip="{{
+ 'Remove export provider
configuration'
+ | translate
+ }}"
+ data-cy="exportProvider-delete-btn"
+ matTooltipPosition="above"
+ (click)="
+ deleteExportProvider(
+
configurationEntry.providerId
+ )
+ "
>
- <button
- color="accent"
- mat-icon-button
- matTooltip="{{
- 'Remove export provider
configuration'
- | translate
- }}"
-
data-cy="exportProvider-delete-btn"
- matTooltipPosition="above"
- (click)="
- deleteExportProvider(
-
configurationEntry.providerId
- )
- "
- >
- <i class="material-icons"
- >delete</i
- >
- </button>
- </span>
- </div>
+ <i
class="material-icons">delete</i>
+ </button>
+ </span>
</div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <tr
- mat-header-row
- *matHeaderRowDef="displayedColumnsExport"
- ></tr>
- <tr
- mat-row
- *matRowDef="
- let row;
- columns: displayedColumnsExport
- "
- ></tr>
- </table>
- </div>
+ <tr
+ mat-header-row
+ *matHeaderRowDef="displayedColumnsExport"
+ ></tr>
+ <tr
+ mat-row
+ *matRowDef="let row; columns: displayedColumnsExport"
+ ></tr>
+ </table>
<div
*ngIf="
diff --git a/ui/src/app/configuration/export/data-export-import.component.html
b/ui/src/app/configuration/export/data-export-import.component.html
index f7d50ee547..8473f8fe33 100644
--- a/ui/src/app/configuration/export/data-export-import.component.html
+++ b/ui/src/app/configuration/export/data-export-import.component.html
@@ -21,11 +21,10 @@
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Export' | translate"
- [subtitle]="'Export application data' | translate"
+ [subtitle]="
+ 'Export assets and all linked resources' | translate
+ "
>
- <div class="subsection-title">
- {{ 'Export assets and all linked resources' | translate }}
- </div>
<div fxLayout="column" *ngFor="let asset of assets">
<mat-checkbox
(change)="handleSelectionChange($event, asset._id)"
@@ -55,12 +54,8 @@
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Import' | translate"
- [subtitle]="'Import application data' | translate"
+ [subtitle]="'Import from application package' | translate"
>
- <div class="subsection-title">
- {{ 'Import from application package' | translate }}
- </div>
-
<div class="mt-10">
<button
mat-button
diff --git a/ui/src/app/configuration/files/files.component.html
b/ui/src/app/configuration/files/files.component.html
index ba59132472..2cdd9b2a8a 100644
--- a/ui/src/app/configuration/files/files.component.html
+++ b/ui/src/app/configuration/files/files.component.html
@@ -24,9 +24,13 @@
| translate
"
>
- <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="10px">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start start"
+ fxLayoutGap="10px"
+ section-actions
+ >
<button
- mat-button
mat-flat-button
color="accent"
(click)="openFileUploadDialog()"
diff --git
a/ui/src/app/configuration/general-configuration/general-configuration.component.html
b/ui/src/app/configuration/general-configuration/general-configuration.component.html
index 5b196082f1..7094ab15ae 100644
---
a/ui/src/app/configuration/general-configuration/general-configuration.component.html
+++
b/ui/src/app/configuration/general-configuration/general-configuration.component.html
@@ -23,7 +23,12 @@
fxLayoutAlign="start start"
*ngIf="formReady"
>
- <form [formGroup]="parentForm" fxFlex="100" fxLayout="column">
+ <form
+ [formGroup]="parentForm"
+ fxFlex="100"
+ fxLayout="column"
+ class="w-100"
+ >
<sp-split-section
[title]="'Basic' | translate"
[subtitle]="'Basic settings' | translate"
@@ -37,66 +42,87 @@
| translate
}}
</div>
- <div class="subsection-title">
- {{ 'App Name' | translate }}
- </div>
- <mat-form-field appearance="outline">
- <input
- formControlName="appName"
- fxFlex
- matInput
- required
- data-cy="general-config-app-name"
- />
- </mat-form-field>
- <div class="subsection-title">
- {{ 'Host and Port' | translate }}
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="10px"
+ >
+ <div class="subsection-title">
+ {{ 'App Name' | translate }}
+ </div>
+ <mat-form-field appearance="outline" fxFlex>
+ <input
+ formControlName="appName"
+ fxFlex
+ matInput
+ required
+ data-cy="general-config-app-name"
+ />
+ </mat-form-field>
</div>
- <div fxLayout="column" fxFlex="100">
- <div fxLayout="row">
- <div fxLayout="row" fxLayoutAlign="start center">
- <mat-button-toggle-group
- name="protocol"
- [attr.aria-label]="'Protocol' | translate"
- formControlName="protocol"
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="10px"
+ >
+ <div class="subsection-title">
+ {{ 'Host and Port' | translate }}
+ </div>
+ <div fxLayout="column" fxFlex="100">
+ <div fxLayout="row">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ <mat-button-toggle-group
+ name="protocol"
+ [attr.aria-label]="
+ 'Protocol' | translate
+ "
+ formControlName="protocol"
+ >
+ <mat-button-toggle value="http"
+ >http
+ </mat-button-toggle>
+ <mat-button-toggle value="https"
+ >https
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
+ <mat-form-field
+ color="accent"
+ class="ml-10"
+ subscriptSizing="dynamic"
+ >
+ <mat-label>{{
+ 'Host' | translate
+ }}</mat-label>
+ <input
+ formControlName="hostname"
+ fxFlex
+ matInput
+ required
+ data-cy="general-config-hostname"
+ />
+ </mat-form-field>
+ <mat-form-field
+ color="accent"
+ class="ml-10"
+ subscriptSizing="dynamic"
>
- <mat-button-toggle value="http"
- >http
- </mat-button-toggle>
- <mat-button-toggle value="https"
- >https
- </mat-button-toggle>
- </mat-button-toggle-group>
+ <mat-label>{{
+ 'Port' | translate
+ }}</mat-label>
+ <input
+ formControlName="port"
+ fxFlex
+ matInput
+ type="number"
+ required
+ data-cy="general-config-port"
+ />
+ </mat-form-field>
</div>
- <mat-form-field
- color="accent"
- class="ml-10"
- subscriptSizing="dynamic"
- >
- <mat-label>{{ 'Host' | translate }}</mat-label>
- <input
- formControlName="hostname"
- fxFlex
- matInput
- required
- data-cy="general-config-hostname"
- />
- </mat-form-field>
- <mat-form-field
- color="accent"
- class="ml-10"
- subscriptSizing="dynamic"
- >
- <mat-label>{{ 'Port' | translate }}</mat-label>
- <input
- formControlName="port"
- fxFlex
- matInput
- type="number"
- required
- data-cy="general-config-port"
- />
- </mat-form-field>
</div>
</div>
</sp-split-section>
@@ -160,20 +186,19 @@
</sp-configuration-link-settings>
<sp-user-acknowledgment [parentForm]="parentForm">
</sp-user-acknowledgment>
- <sp-split-section>
- <div class="mt-10">
- <button
- mat-flat-button
- (click)="updateConfig()"
- style="margin-right: 10px"
- [disabled]="parentForm.invalid"
- data-cy="sp-element-general-config-save"
- >
- <i class="material-icons">save</i
- ><span> {{ 'Save' | translate }}</span>
- </button>
- </div>
- </sp-split-section>
+
+ <div class="mt-10">
+ <button
+ mat-flat-button
+ (click)="updateConfig()"
+ style="margin-right: 10px"
+ [disabled]="parentForm.invalid"
+ data-cy="sp-element-general-config-save"
+ >
+ <i class="material-icons">save</i
+ ><span> {{ 'Save' | translate }}</span>
+ </button>
+ </div>
</form>
</div>
</div>
diff --git
a/ui/src/app/configuration/general-configuration/link-settings/link-settings.component.html
b/ui/src/app/configuration/general-configuration/link-settings/link-settings.component.html
index e78775a339..a601a5ad07 100644
---
a/ui/src/app/configuration/general-configuration/link-settings/link-settings.component.html
+++
b/ui/src/app/configuration/general-configuration/link-settings/link-settings.component.html
@@ -21,9 +21,8 @@
[subtitle]="'Configure application links' | translate"
[formGroup]="parentForm"
>
- <div class="subsection-title">{{ 'Documentation Link' | translate }}</div>
- <mat-form-field color="accent">
- <mat-label>{{ 'Documentation URL' | translate }}</mat-label>
+ <mat-form-field color="accent" class="mt-10">
+ <mat-label>{{ 'Documentation Link' | translate }}</mat-label>
<input formControlName="documentationUrl" fxFlex matInput />
</mat-form-field>
<mat-checkbox formControlName="showDocumentationLinkOnStartScreen"
@@ -33,16 +32,12 @@
>{{ 'Show documentation link in user menu' | translate }}
</mat-checkbox>
- <div class="subsection-title mt-10">
- {{ 'API Documentation Link' | translate }}
- </div>
<mat-checkbox formControlName="showApiDocumentationLinkOnStartScreen"
>{{ 'Show API documentation link on login page' | translate }}
</mat-checkbox>
- <div class="subsection-title mt-10">{{ 'Support Link' | translate }}</div>
- <mat-form-field color="accent">
- <mat-label>{{ 'Support URL' | translate }}</mat-label>
+ <mat-form-field color="accent" class="mt-10">
+ <mat-label>{{ 'Support Link' | translate }}</mat-label>
<input formControlName="supportUrl" fxFlex matInput />
</mat-form-field>
<mat-checkbox formControlName="showSupportUrlOnStartScreen"
diff --git
a/ui/src/app/configuration/label-configuration/label-configuration.component.html
b/ui/src/app/configuration/label-configuration/label-configuration.component.html
index e4d5dc7bd1..d55be91c0e 100644
---
a/ui/src/app/configuration/label-configuration/label-configuration.component.html
+++
b/ui/src/app/configuration/label-configuration/label-configuration.component.html
@@ -25,7 +25,12 @@
| translate
"
>
- <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="10px">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start start"
+ fxLayoutGap="10px"
+ section-actions
+ >
<button
mat-button
mat-flat-button
@@ -34,7 +39,7 @@
(click)="createLabelMode = true"
>
<i class="material-icons">add</i
- ><span> {{ 'New label' | translate }}</span>
+ ><span> {{ 'New' | translate }}</span>
</button>
</div>
<div *ngIf="createLabelMode" class="mb-10">
@@ -43,9 +48,6 @@
(saveEmitter)="saveLabel($event)"
></sp-edit-label>
</div>
- <div class="subsection-title mt-10">
- {{ 'Available labels' | translate }}
- </div>
<div
fxLayout="column"
*ngFor="let label of allLabels"
diff --git
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
index 6d6c24d681..3a1eab80dc 100644
---
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
+++
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
@@ -24,12 +24,7 @@
'Manage Kafka settings for pipeline communication' | translate
"
>
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="start start"
- class="page-container-padding-inner"
- >
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<form
(ngSubmit)="updateMessagingSettings()"
class="form-width"
@@ -80,7 +75,8 @@
type="submit"
class="md-raised md-primary submit-button"
>
- {{ 'Update' | translate }}
+ <mat-icon>save</mat-icon>
+ <span>{{ 'Save' | translate }}</span>
</button>
</div>
</form>
@@ -92,12 +88,7 @@
[title]="'Protocols' | translate"
[subtitle]="'Manage the priority of protocols used' | translate"
>
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="start start"
- class="page-container-padding-inner"
- >
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<div
cdkDropList
class="data-format-list"
@@ -122,7 +113,8 @@
class="md-raised md-primary submit-button"
(click)="updateMessagingSettings()"
>
- {{ 'Update' | translate }}
+ <mat-icon>save</mat-icon>
+ <span>{{ 'Save' | translate }}</span>
</button>
</div>
</div>
@@ -172,7 +164,8 @@
class="md-raised md-primary submit-button"
(click)="updateMessagingSettings()"
>
- {{ 'Update' | translate }}
+ <mat-icon>save</mat-icon>
+ <span>{{ 'Save' | translate }}</span>
</button>
</div>
</sp-split-section>
diff --git
a/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
b/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
index c9b641f282..7fe7f9872f 100644
---
a/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
+++
b/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
@@ -64,7 +64,7 @@ export abstract class AbstractSecurityPrincipalConfig<
? this.translateService.instant('Edit user {{user}}', {
user: user.username,
})
- : this.translateService.instant('Add group'),
+ : this.translateService.instant('Add user'),
width: '50vw',
data: {
user: user,
diff --git
a/ui/src/app/configuration/security-configuration/role-configuration/role-configuration.component.html
b/ui/src/app/configuration/security-configuration/role-configuration/role-configuration.component.html
index 05fdc74d94..4b945f4333 100644
---
a/ui/src/app/configuration/security-configuration/role-configuration/role-configuration.component.html
+++
b/ui/src/app/configuration/security-configuration/role-configuration/role-configuration.component.html
@@ -17,17 +17,6 @@
-->
<div fxLayout="column">
- <div>
- <button
- mat-button
- mat-flat-button
- color="accent"
- (click)="createRole()"
- >
- <i class="material-icons">add</i
- ><span> {{ 'New Role' | translate }}</span>
- </button>
- </div>
<div fxFlex="100" fxLayout="column">
<sp-table
*ngIf="dataSource"
@@ -63,9 +52,7 @@
</ng-container>
<ng-container matColumnDef="edit">
- <th mat-header-cell *matHeaderCellDef class="text-right">
- {{ 'Actions' | translate }}
- </th>
+ <th mat-header-cell *matHeaderCellDef class="text-right"></th>
<td mat-cell *matCellDef="let role">
<div fxLayout="row">
<span
@@ -76,7 +63,7 @@
>
<div class="mr-15">
<button
- color="accent"
+ class="mat-basic"
mat-flat-button
[matTooltip]="'Edit user' | translate"
matTooltipPosition="above"
diff --git
a/ui/src/app/configuration/security-configuration/security-configuration.component.html
b/ui/src/app/configuration/security-configuration/security-configuration.component.html
index e78620a40f..39cd523077 100644
---
a/ui/src/app/configuration/security-configuration/security-configuration.component.html
+++
b/ui/src/app/configuration/security-configuration/security-configuration.component.html
@@ -23,9 +23,15 @@
[title]="'User Accounts' | translate"
[subtitle]="'Add and edit user accounts' | translate"
>
- <div class="subsection-title">
- {{ 'Existing user accounts' | translate }}
- </div>
+ <button
+ section-actions
+ mat-flat-button
+ data-cy="add-new-user"
+ (click)="createUserAccount()"
+ >
+ <i class="material-icons">add</i
+ ><span> {{ 'New' | translate }}</span>
+ </button>
<sp-security-user-config></sp-security-user-config>
</sp-split-section>
</div>
@@ -35,9 +41,16 @@
[title]="'Service Accounts' | translate"
[subtitle]="'Add and edit service accounts' | translate"
>
- <div class="subsection-title">
- {{ 'Existing service accounts' | translate }}
- </div>
+ <button
+ section-actions
+ mat-button
+ mat-flat-button
+ color="accent"
+ (click)="createServiceAccount()"
+ >
+ <i class="material-icons">add</i
+ ><span> {{ 'New' | translate }}</span>
+ </button>
<sp-security-service-config></sp-security-service-config>
</sp-split-section>
</div>
@@ -47,9 +60,17 @@
[title]="'Groups' | translate"
[subtitle]="'Manage user groups' | translate"
>
- <div class="subsection-title">
- {{ 'Existing groups' | translate }}
- </div>
+ <button
+ section-actions
+ mat-button
+ mat-flat-button
+ color="accent"
+ data-cy="new-user-group-btn"
+ (click)="createGroup()"
+ >
+ <i class="material-icons">add</i
+ ><span> {{ 'New' | translate }}</span>
+ </button>
<sp-security-user-group-config></sp-security-user-group-config>
</sp-split-section>
</div>
@@ -58,9 +79,16 @@
[title]="'Roles' | translate"
[subtitle]="'Manage roles' | translate"
>
- <div class="subsection-title">
- {{ 'Existing roles' | translate }}
- </div>
+ <button
+ section-actions
+ mat-button
+ mat-flat-button
+ color="accent"
+ (click)="createRole()"
+ >
+ <i class="material-icons">add</i
+ ><span> {{ 'New' | translate }}</span>
+ </button>
<sp-security-role-config></sp-security-role-config>
</sp-split-section>
</div>
diff --git
a/ui/src/app/configuration/security-configuration/security-configuration.component.ts
b/ui/src/app/configuration/security-configuration/security-configuration.component.ts
index 3cb21190d6..07ee348127 100644
---
a/ui/src/app/configuration/security-configuration/security-configuration.component.ts
+++
b/ui/src/app/configuration/security-configuration/security-configuration.component.ts
@@ -16,10 +16,14 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
import { SpConfigurationTabsService } from '../configuration-tabs.service';
import { SpBreadcrumbService, SpNavigationItem } from '@streampipes/shared-ui';
import { SpConfigurationRoutes } from '../configuration.routes';
+import { SecurityUserConfigComponent } from
'./security-user-configuration/security-user-config.component';
+import { SecurityServiceConfigComponent } from
'./security-service-configuration/security-service-config.component';
+import { SecurityRoleConfigComponent } from
'./role-configuration/role-configuration.component';
+import { SecurityUserGroupConfigComponent } from
'./user-group-configuration/user-group-configuration.component';
@Component({
selector: 'sp-security-configuration',
@@ -30,10 +34,17 @@ import { SpConfigurationRoutes } from
'../configuration.routes';
export class SecurityConfigurationComponent implements OnInit {
tabs: SpNavigationItem[] = [];
- constructor(
- private breadcrumbService: SpBreadcrumbService,
- private tabService: SpConfigurationTabsService,
- ) {}
+ private breadcrumbService = inject(SpBreadcrumbService);
+ private tabService = inject(SpConfigurationTabsService);
+
+ @ViewChild(SecurityUserConfigComponent)
+ userConfig!: SecurityUserConfigComponent;
+ @ViewChild(SecurityServiceConfigComponent)
+ serviceConfig!: SecurityServiceConfigComponent;
+ @ViewChild(SecurityRoleConfigComponent)
+ roleConfig!: SecurityRoleConfigComponent;
+ @ViewChild(SecurityUserGroupConfigComponent)
+ groupConfig!: SecurityUserGroupConfigComponent;
ngOnInit(): void {
this.tabs = this.tabService.getTabs();
@@ -42,4 +53,20 @@ export class SecurityConfigurationComponent implements
OnInit {
{ label: this.tabService.getTabTitle('security') },
]);
}
+
+ createUserAccount(): void {
+ this.userConfig.createUser();
+ }
+
+ createServiceAccount(): void {
+ this.serviceConfig.createUser();
+ }
+
+ createGroup(): void {
+ this.groupConfig.createGroup();
+ }
+
+ createRole(): void {
+ this.roleConfig.createRole();
+ }
}
diff --git
a/ui/src/app/configuration/security-configuration/security-service-configuration/security-service-config.component.html
b/ui/src/app/configuration/security-configuration/security-service-configuration/security-service-config.component.html
index 00d9337fd9..5d6b4b9e39 100644
---
a/ui/src/app/configuration/security-configuration/security-service-configuration/security-service-config.component.html
+++
b/ui/src/app/configuration/security-configuration/security-service-configuration/security-service-config.component.html
@@ -17,17 +17,7 @@
-->
<div fxLayout="column">
- <div>
- <button
- mat-button
- mat-flat-button
- color="accent"
- (click)="createUser()"
- >
- <i class="material-icons">add</i
- ><span> {{ 'New Service Account' | translate }}</span>
- </button>
- </div>
+ <div></div>
<div fxFlex="100" fxLayout="column">
<sp-table
*ngIf="dataSource"
@@ -46,9 +36,7 @@
</ng-container>
<ng-container matColumnDef="edit">
- <th mat-header-cell *matHeaderCellDef class="text-right">
- {{ 'Actions' | translate }}
- </th>
+ <th mat-header-cell *matHeaderCellDef class="text-right"></th>
<td mat-cell *matCellDef="let account">
<div fxLayout="row">
<span
diff --git
a/ui/src/app/configuration/security-configuration/security-user-configuration/security-user-config.component.html
b/ui/src/app/configuration/security-configuration/security-user-configuration/security-user-config.component.html
index 2c5939a16c..7ddef77d55 100644
---
a/ui/src/app/configuration/security-configuration/security-user-configuration/security-user-config.component.html
+++
b/ui/src/app/configuration/security-configuration/security-user-configuration/security-user-config.component.html
@@ -17,12 +17,6 @@
-->
<div fxLayout="column">
- <div>
- <button mat-flat-button data-cy="add-new-user" (click)="createUser()">
- <i class="material-icons">add</i
- ><span> {{ 'New User' | translate }}</span>
- </button>
- </div>
<div fxFlex="100" fxLayout="column">
<sp-table
*ngIf="dataSource"
@@ -95,9 +89,7 @@
</ng-container>
<ng-container matColumnDef="edit">
- <th mat-header-cell *matHeaderCellDef class="text-right">
- {{ 'Actions' | translate }}
- </th>
+ <th mat-header-cell *matHeaderCellDef class="text-right"></th>
<td mat-cell *matCellDef="let account">
<div fxLayout="row">
<span
diff --git
a/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.html
b/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.html
index 82f6c62c50..aef0da3194 100644
---
a/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.html
+++
b/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.html
@@ -17,18 +17,6 @@
-->
<div fxLayout="column">
- <div>
- <button
- mat-button
- mat-flat-button
- color="accent"
- data-cy="new-user-group-btn"
- (click)="createGroup()"
- >
- <i class="material-icons">add</i
- ><span> {{ 'New User Group' | translate }}</span>
- </button>
- </div>
<div fxFlex="100" fxLayout="column">
<sp-table
*ngIf="dataSource"
@@ -56,9 +44,7 @@
</ng-container>
<ng-container matColumnDef="edit">
- <th mat-header-cell *matHeaderCellDef class="text-right">
- {{ 'Actions' | translate }}
- </th>
+ <th mat-header-cell *matHeaderCellDef class="text-right"></th>
<td mat-cell *matCellDef="let group">
<div fxLayout="row">
<span
diff --git
a/ui/src/app/configuration/sites-configuration/location-features-configuration/location-features-configuration.component.html
b/ui/src/app/configuration/sites-configuration/location-features-configuration/location-features-configuration.component.html
index 37eca8772c..c3323d621b 100644
---
a/ui/src/app/configuration/sites-configuration/location-features-configuration/location-features-configuration.component.html
+++
b/ui/src/app/configuration/sites-configuration/location-features-configuration/location-features-configuration.component.html
@@ -17,17 +17,17 @@
-->
<div fxLayout="column">
- <form
- [formGroup]="locationForm"
- fxFlex="100"
- fxLayout="column"
- *ngIf="locationConfig"
+ <sp-split-section
+ [title]="'Geo features' | translate"
+ [subtitle]="
+ 'Geo features are used to better organize assets.' | translate
+ "
>
- <sp-split-section
- [title]="'Geo features' | translate"
- [subtitle]="
- 'Geo features are used to better organize assets.' | translate
- "
+ <form
+ [formGroup]="locationForm"
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="locationConfig"
>
<mat-checkbox
formControlName="locationFeaturesEnabled"
@@ -72,19 +72,18 @@
/>
</mat-form-field>
</div>
- </sp-split-section>
- <sp-split-section>
- <div>
- <button
- mat-flat-button
- color="accent"
- data-cy="sites-location-features-button"
- [disabled]="!locationForm.valid"
- (click)="save()"
- >
- {{ 'Save' | translate }}
- </button>
- </div>
- </sp-split-section>
- </form>
+ </form>
+ <div class="mt-10">
+ <button
+ mat-flat-button
+ color="accent"
+ data-cy="sites-location-features-button"
+ [disabled]="!locationForm.valid"
+ (click)="save()"
+ >
+ <mat-icon>save</mat-icon>
+ <span>{{ 'Save' | translate }}</span>
+ </button>
+ </div>
+ </sp-split-section>
</div>
diff --git
a/ui/src/app/configuration/sites-configuration/site-area-configuration/site-area-configuration.component.html
b/ui/src/app/configuration/sites-configuration/site-area-configuration/site-area-configuration.component.html
index 7c07eefc71..745081d59a 100644
---
a/ui/src/app/configuration/sites-configuration/site-area-configuration/site-area-configuration.component.html
+++
b/ui/src/app/configuration/sites-configuration/site-area-configuration/site-area-configuration.component.html
@@ -22,17 +22,17 @@
'Manage your organization\'s sites and production areas' | translate
"
>
- <div fxLayout="row">
- <button
- mat-flat-button
- color="accent"
- data-cy="sites-manage-sites-button"
- (click)="openManageSitesDialog(undefined)"
- >
- <mat-icon>add</mat-icon>
- <span>{{ 'New site' | translate }}</span>
- </button>
- </div>
+ <button
+ section-actions
+ mat-flat-button
+ color="accent"
+ data-cy="sites-manage-sites-button"
+ (click)="openManageSitesDialog(undefined)"
+ >
+ <mat-icon>add</mat-icon>
+ <span>{{ 'New' | translate }}</span>
+ </button>
+
<sp-table
class="mt-10"
[dataSource]="dataSource"
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index f12b005b5c..b2a9ee5b09 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -163,8 +163,7 @@ md-content {
}
.subsection-title {
- font-size: 12pt;
- font-weight: bold;
+ font-size: var(--mat-sys-body-medium-size);
margin-bottom: 10px;
}
