You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/02/18 14:14:49 UTC
[incubator-datalab] 03/03: [DATALAB-2229]: Uodate requests for
Configuration page
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-2229
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit c387d5e23ac96132bc69dc4f419d6970058615f4
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Thu Feb 18 16:14:23 2021 +0200
[DATALAB-2229]: Uodate requests for Configuration page
---
.../configuration/configuration.component.html | 35 ++++++++--------
.../configuration/configuration.component.scss | 11 ++++++
.../configuration/configuration.component.ts | 46 ++++++++++++++--------
.../services/applicationServiceFacade.service.ts | 11 +++---
.../app/core/services/configutration.service.ts | 11 +++---
.../resources/webapp/src/assets/styles/_theme.scss | 7 +++-
6 files changed, 77 insertions(+), 44 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
index 14a8957..63d8406 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
@@ -17,24 +17,27 @@
~ under the License.
-->
-<div class="base-retreat">
+<div class="base-retreat configuration">
<div class="sub-nav">
<div class="selection">
- <div class="mat-reset">
- <div class="control selector-wrapper" *ngIf="endpoints?.length > 1">
- <mat-form-field>
- <mat-label>Select endpoint</mat-label>
- <mat-select [(value)]="activeEndpoint" panelClass="top-select">
- <mat-option *ngFor="let endpoint of endpoints" [value]="endpoint"
- (click)="setActiveEndpoint(endpoint)">
- {{ endpoint }}</mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
+ <ng-template [ngIf]="endpoints?.length > 1">
+ <label class="label">Selected endpoint: </label>
+ <div class="mat-reset">
+ <div class="control selector-wrapper">
+ <mat-form-field [ngClass]="{ 'not-active' : services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged }">
+ <mat-label>Select endpoint</mat-label>
+ <mat-select [(value)]="activeEndpoint" panelClass="top-select" [disabled]="services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged">
+ <mat-option *ngFor="let endpoint of endpoints" [value]="endpoint"
+ (click)="setActiveEndpoint(endpoint)">
+ {{ endpoint }}</mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
</div>
- </div>
+ </ng-template>
</div>
<div>
<ng-template [ngIf]="activeTab.index !== 0">
@@ -58,7 +61,7 @@
</div>
<mat-divider></mat-divider>
<div class="configuration-wrapper">
- <mat-tab-group animationDuration="0.5ms" (selectedTabChange)="tabChanged($event)">
+ <mat-tab-group animationDuration="0.5ms" (selectedTabChange)="tabChanged($event)" [selectedIndex]=activeTab.index>
<mat-tab label="Main"
[disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 0"
>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
index 2707249..e55e6a2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
@@ -85,6 +85,17 @@
.sub-nav{
justify-content: space-between;
+ .label{
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ color: #718ba6;
+ font-size: 15px;
+ font-weight: 600;
+ text-align: left;
+ font-family: "Open Sans", sans-serif;
+ }
+
.butt{
margin-left: 10px;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
index ed760c6..59f6123 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
@@ -19,15 +19,16 @@
import {Component, OnInit, Inject, HostListener, OnDestroy} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import {HealthStatusService, AppRoutingService} from '../../core/services';
+import {HealthStatusService, AppRoutingService, EndpointService} from '../../core/services';
import {MatTabChangeEvent} from '@angular/material/tabs';
import {Router} from '@angular/router';
import {ConfigurationService} from '../../core/services/configutration.service';
import 'brace';
import 'brace/mode/yaml';
import {ToastrService} from 'ngx-toastr';
-import {Subject, throwError} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
+import {Endpoint} from '../management/endpoints/endpoints.component';
@Component({
selector: 'datalab-configuration',
@@ -51,7 +52,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
saveChanges: 'After you save changes you need to restart service.',
};
public activeEndpoint: string;
- public endpoints: Array<string> = ['local', 'endpointAws', 'endpointGcp'];
+ public endpoints: Array<string> | any;
@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
@@ -69,6 +70,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
constructor(
private healthStatusService: HealthStatusService,
private appRoutingService: AppRoutingService,
+ private endpointService: EndpointService,
private configurationService: ConfigurationService,
private router: Router,
public dialog: MatDialog,
@@ -77,7 +79,13 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
ngOnInit() {
this.getEnvironmentHealthStatus();
- this.getServicesConfig(...Object.keys(this.services));
+ this.getEndpoints()
+ .subscribe(endpoints => {
+ this.endpoints = endpoints;
+ this.endpoints = this.endpoints.map(endpoint => endpoint.name);
+ this.activeEndpoint = this.endpoints[0];
+ this.getServicesConfig(this.activeEndpoint);
+ });
}
ngOnDestroy() {
@@ -97,8 +105,12 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
);
}
+ private getEndpoints(): Observable<{}> {
+ return this.endpointService.getEndpointsData();
+ }
+
public refreshConfig(): void {
- this.getServicesConfig(...Object.keys(this.services));
+ this.getServicesConfig(this.activeEndpoint);
}
public action(action: string): void {
@@ -112,21 +124,21 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
});
}
- private getServicesConfig(...services): void {
- services.forEach(service => {
- this.configurationService.getServiceSettings(service)
+ private getServicesConfig(endpoint): void {
+ this.configurationService.getServiceSettings(endpoint)
.pipe(
takeUntil(this.unsubscribe$)
)
.subscribe(config => {
- console.log(config);
- if (!this.activeEndpoint) this.activeEndpoint = Object.keys(config)[0];
- this.services[service].config = config[this.activeEndpoint];
- this.services[service].serverConfig = config[this.activeEndpoint];
- this.configUpdate(service);
+ for (const service in this.services) {
+ const file = `${service}.yml`;
+ this.services[service].config = config[file];
+ this.services[service].serverConfig = config[file];
+ this.configUpdate(service);
+ }
}
);
- });
+
this.clearSelectedServices();
}
@@ -136,7 +148,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
takeUntil(this.unsubscribe$)
)
.subscribe(res => {
- this.getServicesConfig(service);
+ this.getServicesConfig(this.activeEndpoint);
this.toastr.success('Service configuration saved!', 'Success!');
},
error => this.toastr.error( error.message || 'Service configuration is not saved', 'Oops!')
@@ -228,8 +240,10 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
return Object.keys(this.services).every(service => !this.services[service].selected);
}
- public setActiveEndpoint(endpoint: string) {
+ public setActiveEndpoint(endpoint) {
this.activeEndpoint = endpoint;
+ this.getServicesConfig(this.activeEndpoint);
+ this.activeTab.index = 0;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
index 9c6fd45..4a1ea54 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
@@ -79,7 +79,7 @@ export class ApplicationServiceFacade {
private static readonly ENDPOINT = 'endpoint';
private static readonly ENDPOINT_CONNECTION = 'endpoint_connection';
private static readonly AUDIT = 'audit';
- private static readonly CONFIG = 'admin';
+ private static readonly CONFIG = 'config';
private static readonly QUOTA = 'quota';
private requestRegistry: Dictionary<string>;
@@ -677,18 +677,19 @@ export class ApplicationServiceFacade {
public buildGetServiceConfig(data): Observable<any> {
return this.buildRequest(HTTPMethod.GET,
this.requestRegistry.Item(ApplicationServiceFacade.CONFIG),
- data);
+ data
+ );
}
public buildSetServiceConfig(data, body): Observable<any> {
return this.buildRequest(HTTPMethod.POST,
- this.requestRegistry.Item(ApplicationServiceFacade.CONFIG) + data,
+ this.requestRegistry.Item(ApplicationServiceFacade.CONFIG) + '/' + data,
body);
}
public buildRestartServices(data): Observable<any> {
return this.buildRequest(HTTPMethod.POST,
- this.requestRegistry.Item(ApplicationServiceFacade.CONFIG) + 'restart' + data,
+ this.requestRegistry.Item(ApplicationServiceFacade.CONFIG) + '/restart' + data,
null );
}
@@ -780,7 +781,7 @@ export class ApplicationServiceFacade {
this.requestRegistry.Add(ApplicationServiceFacade.AUDIT, '/api/audit');
// configuration
- this.requestRegistry.Add(ApplicationServiceFacade.CONFIG, '/api/config/multiple/');
+ this.requestRegistry.Add(ApplicationServiceFacade.CONFIG, '/api/config/multiple');
}
private buildRequest(method: HTTPMethod, url_path: string, body: any, opt?) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
index aba7cc7..5e0bdfb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
@@ -27,10 +27,10 @@ import { ErrorUtils } from '../util';
export class ConfigurationService {
constructor(private applicationServiceFacade: ApplicationServiceFacade) { }
- public getServiceSettings(service): Observable<{}> {
- service = ConfigurationService.convertProvisioning(service);
+ public getServiceSettings(endpoint): Observable<{}> {
+ const queryString = `?endpoint=${endpoint}`;
return this.applicationServiceFacade
- .buildGetServiceConfig(service)
+ .buildGetServiceConfig(queryString)
.pipe(
map(response => response),
catchError(ErrorUtils.handleServiceError));
@@ -38,7 +38,8 @@ export class ConfigurationService {
public setServiceConfig(service: string, config: string, endpoint: string): Observable<{}> {
const settings = {
- [endpoint]: config
+ ymlDto: config,
+ endpoint: endpoint
};
service = ConfigurationService.convertProvisioning(service);
@@ -50,7 +51,7 @@ export class ConfigurationService {
}
public restartServices(self: boolean, prov: boolean, billing: boolean, endpoint: string): Observable<{}> {
- const queryString = `?billing=${billing}&provserv=${prov}&ui=${self}&endpoints=${endpoint}`;
+ const queryString = `?billing=${billing}&provserv=${prov}&ui=${self}&endpoint=${endpoint}`;
return this.applicationServiceFacade
.buildRestartServices(queryString)
.pipe(
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index bfdd064..4d1c2db 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -254,10 +254,13 @@
.mat-select-placeholder {
cursor: not-allowed;
}
-
+ .mat-select-value{
+ cursor: not-allowed;
+ }
}
-.mat-select-disabled + .caret {
+.mat-select-disabled + .caret,
+.mat-tab-disabled{
cursor: not-allowed !important;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org