You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/10/03 18:36:34 UTC
[incubator-streampipes] 02/03: [hotfix] Extract configuration
layout into wrapper component
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-426
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit b2a3918457f0f0820d43f63766c6a40ece6fed42
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Oct 3 19:15:04 2021 +0200
[hotfix] Extract configuration layout into wrapper component
---
ui/src/app/configuration/configuration.module.ts | 2 +
.../security-configuration.component.html | 0
.../security-configuration.component.scss} | 28 ------
.../security-configuration.component.ts} | 33 ++-----
ui/src/app/core-ui/core-ui.module.ts | 5 +-
.../split-section/split-section.component.html | 27 ++++++
.../split-section/split-section.component.scss} | 20 +---
.../split-section/split-section.component.ts} | 33 +++----
.../general-profile-settings.component.html | 52 +++++------
.../general-profile-settings.component.scss | 14 ---
.../token/token-management-settings.component.html | 102 ++++++++++-----------
.../token/token-management-settings.component.scss | 14 ---
ui/src/app/profile/profile.module.ts | 2 +
13 files changed, 125 insertions(+), 207 deletions(-)
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
index 9235675..cfa5f63 100644
--- a/ui/src/app/configuration/configuration.module.ts
+++ b/ui/src/app/configuration/configuration.module.ts
@@ -43,6 +43,7 @@ import { DatalakeConfigurationComponent } from './datalake-configuration/datalak
import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
import { DeleteDatalakeIndexComponent } from './dialog/delete-datalake-index/delete-datalake-index-dialog.component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { SecurityConfigurationComponent } from './security-configuration/security-configuration.component';
@NgModule({
imports: [
@@ -69,6 +70,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
ConsulConfigsNumberComponent,
DeleteDatalakeIndexComponent,
PipelineElementConfigurationComponent,
+ SecurityConfigurationComponent,
MessagingConfigurationComponent,
DatalakeConfigurationComponent
],
diff --git a/ui/src/app/configuration/security-configuration/security-configuration.component.html b/ui/src/app/configuration/security-configuration/security-configuration.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/configuration/security-configuration/security-configuration.component.scss
similarity index 69%
copy from ui/src/app/profile/components/general/general-profile-settings.component.scss
copy to ui/src/app/configuration/security-configuration/security-configuration.component.scss
index 0d460dd..13cbc4a 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/configuration/security-configuration/security-configuration.component.scss
@@ -15,31 +15,3 @@
* limitations under the License.
*
*/
-
-.settings-title {
- font-weight: bold;
- font-size: 16pt;
-}
-
-.settings-description {
- font-size: 12pt;
-}
-
-.profile-section {
- border-right: 2px solid gray;
- margin-right: 15px;
-}
-
-.title-section {
- width: 300px;
-}
-
-.appearance-radio-group {
- display: flex;
- flex-direction: column;
- margin: 15px 0;
-}
-
-.appearance-radio-button {
- margin: 5px;
-}
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/configuration/security-configuration/security-configuration.component.ts
similarity index 69%
copy from ui/src/app/profile/components/general/general-profile-settings.component.scss
copy to ui/src/app/configuration/security-configuration/security-configuration.component.ts
index 0d460dd..a4d9ed8 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/configuration/security-configuration/security-configuration.component.ts
@@ -16,30 +16,15 @@
*
*/
-.settings-title {
- font-weight: bold;
- font-size: 16pt;
-}
-
-.settings-description {
- font-size: 12pt;
-}
-
-.profile-section {
- border-right: 2px solid gray;
- margin-right: 15px;
-}
-
-.title-section {
- width: 300px;
-}
+import { Component, OnInit } from '@angular/core';
-.appearance-radio-group {
- display: flex;
- flex-direction: column;
- margin: 15px 0;
-}
+@Component({
+ selector: 'sp-security-configuration',
+ templateUrl: './security-configuration.component.html',
+ styleUrls: ['./security-configuration.component.scss']
+})
+export class SecurityConfigurationComponent implements OnInit {
+ ngOnInit(): void {
+ }
-.appearance-radio-button {
- margin: 5px;
}
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 64d1a6d..9c9a578 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -79,6 +79,7 @@ import { BarchartWidgetComponent } from './widget/barchart/barchart-widget.compo
import { ErrorHintComponent } from './error-hint/error-hint.component';
import { AddToCollectionComponent } from './static-properties/static-collection/add-to-collection/add-to-collection.component';
import { PipelineStartedStatusComponent } from './pipeline/pipeline-started-status/pipeline-started-status.component';
+import { SplitSectionComponent } from './split-section/split-section.component';
@NgModule({
imports: [
@@ -117,6 +118,7 @@ import { PipelineStartedStatusComponent } from './pipeline/pipeline-started-stat
ImageViewerComponent,
StandardDialogComponent,
PanelDialogComponent,
+ SplitSectionComponent,
StaticAnyInput,
StaticPropertyComponent,
StaticFreeInputComponent,
@@ -178,7 +180,8 @@ import { PipelineStartedStatusComponent } from './pipeline/pipeline-started-stat
StatusWidgetComponent,
BarchartWidgetComponent,
ErrorHintComponent,
- PipelineStartedStatusComponent
+ PipelineStartedStatusComponent,
+ SplitSectionComponent
]
})
export class CoreUiModule {
diff --git a/ui/src/app/core-ui/split-section/split-section.component.html b/ui/src/app/core-ui/split-section/split-section.component.html
new file mode 100644
index 0000000..4cabfbe
--- /dev/null
+++ b/ui/src/app/core-ui/split-section/split-section.component.html
@@ -0,0 +1,27 @@
+<!--
+ ~ 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.
+ ~
+ -->
+
+<div fxLayout="row" fxFlex="100">
+ <div fxFlex="300px" fxLayout="column" class="split-section">
+ <div class="split-section-title">{{title}}</div>
+ <div class="split-section-description">{{subtitle}}</div>
+ </div>
+ <div fxFill fxLayout="column">
+ <ng-content></ng-content>
+ </div>
+</div>
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/core-ui/split-section/split-section.component.scss
similarity index 79%
copy from ui/src/app/profile/components/general/general-profile-settings.component.scss
copy to ui/src/app/core-ui/split-section/split-section.component.scss
index 0d460dd..53d13f0 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/core-ui/split-section/split-section.component.scss
@@ -16,30 +16,16 @@
*
*/
-.settings-title {
+.split-section-title {
font-weight: bold;
font-size: 16pt;
}
-.settings-description {
+.split-section-description {
font-size: 12pt;
}
-.profile-section {
+.split-section {
border-right: 2px solid gray;
margin-right: 15px;
}
-
-.title-section {
- width: 300px;
-}
-
-.appearance-radio-group {
- display: flex;
- flex-direction: column;
- margin: 15px 0;
-}
-
-.appearance-radio-button {
- margin: 5px;
-}
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/core-ui/split-section/split-section.component.ts
similarity index 70%
copy from ui/src/app/profile/components/general/general-profile-settings.component.scss
copy to ui/src/app/core-ui/split-section/split-section.component.ts
index 0d460dd..7e66956 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/core-ui/split-section/split-section.component.ts
@@ -16,30 +16,19 @@
*
*/
-.settings-title {
- font-weight: bold;
- font-size: 16pt;
-}
-
-.settings-description {
- font-size: 12pt;
-}
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-.profile-section {
- border-right: 2px solid gray;
- margin-right: 15px;
-}
+@Component({
+ selector: 'sp-split-section',
+ templateUrl: './split-section.component.html',
+ styleUrls: ['./split-section.component.scss']
+})
+export class SplitSectionComponent {
-.title-section {
- width: 300px;
-}
+ @Input()
+ title: string;
-.appearance-radio-group {
- display: flex;
- flex-direction: column;
- margin: 15px 0;
-}
+ @Input()
+ subtitle: string;
-.appearance-radio-button {
- margin: 5px;
}
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.html b/ui/src/app/profile/components/general/general-profile-settings.component.html
index 19bf587..8a16d4e 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.html
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.html
@@ -18,40 +18,30 @@
<div fxLayout="row" class="page-container-padding">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" *ngIf="profileLoaded">
- <div fxLayout="row" fxFlex="100">
- <div fxFlex="300px" fxLayout="column" class="profile-section">
- <div class="settings-title">Main Settings</div>
- <div class="settings-description">Manage your basic profile settings here.</div>
- </div>
- <div fxFill fxLayout="column">
- <mat-form-field fxFlex>
- <mat-label>Email</mat-label>
- <input [(ngModel)]="userData.email" matInput type="email" name="email" disabled/>
- <mat-hint>Your mail address can't be changed currently.</mat-hint>
- </mat-form-field>
- <mat-form-field fxFlex>
- <mat-label>Username</mat-label>
- <input [(ngModel)]="userData.username" matInput/>
- </mat-form-field>
- <mat-form-field fxFlex>
- <mat-label>Full Name</mat-label>
- <input [(ngModel)]="userData.fullName" matInput/>
- </mat-form-field>
- <div>
- <button mat-button mat-raised-button color="accent"
+ <sp-split-section title="Main Settings" subtitle="Manage your basic profile settings here.">
+ <mat-form-field fxFlex>
+ <mat-label>Email</mat-label>
+ <input [(ngModel)]="userData.email" matInput type="email" name="email" disabled/>
+ <mat-hint>Your mail address can't be changed currently.</mat-hint>
+ </mat-form-field>
+ <mat-form-field fxFlex>
+ <mat-label>Username</mat-label>
+ <input [(ngModel)]="userData.username" matInput/>
+ </mat-form-field>
+ <mat-form-field fxFlex>
+ <mat-label>Full Name</mat-label>
+ <input [(ngModel)]="userData.fullName" matInput/>
+ </mat-form-field>
+ <div>
+ <button mat-button mat-raised-button color="accent"
(click)="saveProfileSettings()">
- Update profile
- </button>
- </div>
+ Update profile
+ </button>
</div>
- </div>
+ </sp-split-section>
<mat-divider></mat-divider>
<div fxLayout="row" fxFlex="100" class="mt-30">
- <div fxFlex="300px" fxLayout="column" class="profile-section">
- <div class="settings-title">Appearance</div>
- <div class="settings-description">Change the appearance of your {{appConstants.APP_NAME}} installation</div>
- </div>
- <div fxFill fxLayout="column">
+ <sp-split-section title="Appearance" subtitle="Change the appearance of your {{appConstants.APP_NAME}} installation">
<label id="radio-group-label">Color Scheme</label>
<mat-radio-group [(ngModel)]="darkMode"
aria-labelledby="radio-group-label"
@@ -65,7 +55,7 @@
Save color scheme
</button>
</div>
- </div>
+ </sp-split-section>
</div>
</div>
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/profile/components/general/general-profile-settings.component.scss
index 0d460dd..8ad885d 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.scss
@@ -16,20 +16,6 @@
*
*/
-.settings-title {
- font-weight: bold;
- font-size: 16pt;
-}
-
-.settings-description {
- font-size: 12pt;
-}
-
-.profile-section {
- border-right: 2px solid gray;
- margin-right: 15px;
-}
-
.title-section {
width: 300px;
}
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.html b/ui/src/app/profile/components/token/token-management-settings.component.html
index f21451b..da3ca1b 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.html
+++ b/ui/src/app/profile/components/token/token-management-settings.component.html
@@ -18,73 +18,63 @@
<div fxLayout="row" class="page-container-padding">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" *ngIf="profileLoaded">
- <div fxLayout="row" fxFlex="100">
- <div fxFlex="300px" fxLayout="column" class="profile-section">
- <div class="settings-title">API Keys</div>
- <div class="settings-description">Manage your API keys for third-party application access to
- {{appConstants.APP_NAME}}.
+ <sp-split-section title="API Keys" subtitle="Manage your API keys for third-party application access to
+ {{appConstants.APP_NAME}}">
+ <div fxLayout="column" class="subsection">
+ <div class="subsection-title">New API key</div>
+ <mat-form-field fxFlex color="accent">
+ <mat-label>Name</mat-label>
+ <input [(ngModel)]="newTokenName" matInput/>
+ </mat-form-field>
+ <div>
+ <button mat-button mat-raised-button color="accent"
+ (click)="requestNewKey()">
+ Create new API key
+ </button>
</div>
</div>
- <div fxFill fxLayout="column">
- <div fxLayout="column" class="subsection">
- <div class="subsection-title">New API key</div>
- <mat-form-field fxFlex color="accent">
- <mat-label>Name</mat-label>
- <input [(ngModel)]="newTokenName" matInput/>
- </mat-form-field>
- <div>
- <button mat-button mat-raised-button color="accent"
- (click)="requestNewKey()">
- Create new API key
- </button>
+ <div fxLayout="column" class="subsection mt-10" *ngIf="newTokenCreated">
+ <div class="subsection-title">Key created</div>
+ <div class="subsection-small">Your new API key has been created. Please copy the key now - you won't be able to see the key again.</div>
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="new-token">
+ <div class="token-name">{{newlyCreatedToken.tokenName}}</div>
+ <div class="displayed-token">
+ {{newlyCreatedToken.rawToken}}
</div>
+ <button mat-button mat-raised-button color="accent"
+ [cdkCopyToClipboard]="newlyCreatedToken.rawToken">
+ Copy
+ </button>
</div>
- <div fxLayout="column" class="subsection mt-10" *ngIf="newTokenCreated">
- <div class="subsection-title">Key created</div>
- <div class="subsection-small">Your new API key has been created. Please copy the key now - you won't be able to see the key again.</div>
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="new-token">
- <div class="token-name">{{newlyCreatedToken.tokenName}}</div>
- <div class="displayed-token">
- {{newlyCreatedToken.rawToken}}
- </div>
- <button mat-button mat-raised-button color="accent"
- [cdkCopyToClipboard]="newlyCreatedToken.rawToken">
- Copy
- </button>
- </div>
- </div>
- <mat-divider class="divider"></mat-divider>
- <div fxLayout="column" class="subsection mt-10">
- <div class="subsection-title">Existing API keys</div>
- <div *ngIf="userData.userApiTokens.length == 0">(no keys available)</div>
- <table mat-table [dataSource]="apiKeyDataSource" class="mat-elevation-z0" *ngIf="userData.userApiTokens.length > 0">
- <ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef> Name</th>
- <td mat-cell *matCellDef="let element"> {{element.tokenName}} </td>
- </ng-container>
+ </div>
+ <mat-divider class="divider"></mat-divider>
+ <div fxLayout="column" class="subsection mt-10">
+ <div class="subsection-title">Existing API keys</div>
+ <div *ngIf="userData.userApiTokens.length == 0">(no keys available)</div>
+ <table mat-table [dataSource]="apiKeyDataSource" class="mat-elevation-z0" *ngIf="userData.userApiTokens.length > 0">
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef> Name</th>
+ <td mat-cell *matCellDef="let element"> {{element.tokenName}} </td>
+ </ng-container>
- <!-- Name Column -->
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef> Action</th>
- <td mat-cell *matCellDef="let element">
- <div fxLayout="end end">
+ <!-- Name Column -->
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef> Action</th>
+ <td mat-cell *matCellDef="let element">
+ <div fxLayout="end end">
<button mat-button mat-raised-button color="warn"
(click)="revokeApiKey(element)">
Revoke
</button>
- </div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
- </table>
- </div>
- </div>
- <div fxFill fxLayout="column">
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
</div>
- </div>
+ </sp-split-section>
<mat-divider></mat-divider>
</div>
-
</div>
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.scss b/ui/src/app/profile/components/token/token-management-settings.component.scss
index 696831b..b713f43 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.scss
+++ b/ui/src/app/profile/components/token/token-management-settings.component.scss
@@ -16,20 +16,6 @@
*
*/
-.settings-title {
- font-weight: bold;
- font-size: 16pt;
-}
-
-.settings-description {
- font-size: 12pt;
-}
-
-.profile-section {
- border-right: 2px solid gray;
- margin-right: 15px;
-}
-
.title-section {
width: 300px;
}
diff --git a/ui/src/app/profile/profile.module.ts b/ui/src/app/profile/profile.module.ts
index 273bf9f..4ebcfd9 100644
--- a/ui/src/app/profile/profile.module.ts
+++ b/ui/src/app/profile/profile.module.ts
@@ -29,6 +29,7 @@ import {GeneralProfileSettingsComponent} from "./components/general/general-prof
import {ProfileService} from "./profile.service";
import {MatDividerModule} from "@angular/material/divider";
import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CoreUiModule } from '../core-ui/core-ui.module';
@NgModule({
imports: [
@@ -40,6 +41,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
CustomMaterialModule,
CommonModule,
ClipboardModule,
+ CoreUiModule,
],
declarations: [
GeneralProfileSettingsComponent,