From e156c87d2d90eabd23300ff91f45c20b89771df8 Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Mon, 20 May 2019 15:32:22 +0800 Subject: [PATCH] Add function to framework of frond-end 1. Add spinner animation when loading. 2. Add REST API of feeder control. 3. Re-layout the design of frame. 4. Fix bug of topic config does not update when save. Issue-ID: DCAEGEN2-1188 Change-Id: I89b4efd7c13a8a0e945193bfd2d1274dff903f8a Signed-off-by: Ekko Chang --- .../datalake-handler/admin/src/package-lock.json | 8 + components/datalake-handler/admin/src/package.json | 1 + .../admin/src/src/app/about/about.component.css | 7 +- .../admin/src/src/app/about/about.component.html | 194 +++++++++++++++++---- .../admin/src/src/app/about/about.component.ts | 17 +- .../admin/src/src/app/app.component.html | 43 +++-- .../admin/src/src/app/app.module.ts | 8 +- .../admin/src/src/app/core/models/feeder.model.ts | 30 ++++ .../src/src/app/core/services/admin.service.ts | 6 + .../src/src/app/core/services/rest-api.service.ts | 59 +++++-- .../database-list/database-list.component.ts | 19 +- .../admin/src/src/app/feeder/feeder.component.ts | 17 +- .../admin/src/src/app/header/header.component.html | 25 ++- .../admin/src/src/app/header/header.component.ts | 65 ++++++- .../src/src/app/sidebar/sidebar.component.html | 12 +- .../topics/topic-list/topic-list.component.html | 31 +++- .../app/topics/topic-list/topic-list.component.ts | 35 +++- .../datalake-handler/admin/src/src/styles.css | 49 ++++-- 18 files changed, 498 insertions(+), 128 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts diff --git a/components/datalake-handler/admin/src/package-lock.json b/components/datalake-handler/admin/src/package-lock.json index c8dabdf8..72052d39 100644 --- a/components/datalake-handler/admin/src/package-lock.json +++ b/components/datalake-handler/admin/src/package-lock.json @@ -6398,6 +6398,14 @@ "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==", "dev": true }, + "ngx-spinner": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-7.1.4.tgz", + "integrity": "sha512-J8+ObulyapAjJfW2bEfFnlmSnp1NA80vtuplZjTa/wQa1Z6tBptmV2g0OLVCJhu/5wjmxV+gbMfN/t2FDup0Bw==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/components/datalake-handler/admin/src/package.json b/components/datalake-handler/admin/src/package.json index f18022d5..01b5d534 100644 --- a/components/datalake-handler/admin/src/package.json +++ b/components/datalake-handler/admin/src/package.json @@ -26,6 +26,7 @@ "bootstrap": "^4.3.1", "core-js": "^2.5.4", "jquery": "^3.4.1", + "ngx-spinner": "^7.1.4", "popper.js": "^1.15.0", "rxjs": "~6.3.3", "tslib": "^1.9.0", diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.css b/components/datalake-handler/admin/src/src/app/about/about.component.css index 0721a51b..c8173515 100644 --- a/components/datalake-handler/admin/src/src/app/about/about.component.css +++ b/components/datalake-handler/admin/src/src/app/about/about.component.css @@ -18,14 +18,11 @@ * ============LICENSE_END========================================================= */ -.about-block { - height: 80vh; -} - .about-panel { background: #FFFFFF; box-shadow: 3px 3px 11px 0 #D2D3D5; border-radius: 20px; + padding: 30px 30px; } .about-title { @@ -41,7 +38,7 @@ .about-info { font-family: "Open Sans", sans-serif; - font-weight: 600; + font-weight: 400; font-size: 14px; color: #A8A9AC; } diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.html b/components/datalake-handler/admin/src/src/app/about/about.component.html index ca3512f4..accab817 100644 --- a/components/datalake-handler/admin/src/src/app/about/about.component.html +++ b/components/datalake-handler/admin/src/src/app/about/about.component.html @@ -17,51 +17,173 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END========================================================= --> +
+
+ Home > About +
+
-
-
+
-
-
+
+
+
ONAP DataLake Admin Platform
- -
-
-
- 1.0.0 -
-
- Jun 1, 2019 -
-
+
+ {{ this.feeder.version }} +
+
+
+
+
+ + + + + + + -
-
-
- -
-
-
-
- China Mobile -
-
- Guobiao Mo, Tao Shen -
-
-
-
- QCT -
-
- Karl Chiang, Kate Hsuan, Ekko Chang, May Lin -
+
+ + + + + + + + + + + + + + + + + +
-
+
diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.ts b/components/datalake-handler/admin/src/src/app/about/about.component.ts index 8e0e5b36..adf65a2a 100644 --- a/components/datalake-handler/admin/src/src/app/about/about.component.ts +++ b/components/datalake-handler/admin/src/src/app/about/about.component.ts @@ -25,7 +25,8 @@ */ import { Component, OnInit } from "@angular/core"; -import { AdminService } from "../core/services/admin.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { RestApiService } from "src/app/core/services/rest-api.service"; @Component({ selector: "app-about", @@ -33,9 +34,19 @@ import { AdminService } from "../core/services/admin.service"; styleUrls: ["./about.component.css"] }) export class AboutComponent implements OnInit { - constructor(private adminService: AdminService) { + feeder: any = []; + + constructor( + private adminService: AdminService, + private restApiService: RestApiService + ) { this.adminService.setTitle("SIDEBAR.ABOUT"); } - ngOnInit() {} + ngOnInit() { + // Get datalake feeder version + this.restApiService.getFeederstatus().subscribe(data => { + this.feeder = data; + }); + } } diff --git a/components/datalake-handler/admin/src/src/app/app.component.html b/components/datalake-handler/admin/src/src/app/app.component.html index 884d798a..d4f2c173 100644 --- a/components/datalake-handler/admin/src/src/app/app.component.html +++ b/components/datalake-handler/admin/src/src/app/app.component.html @@ -19,25 +19,36 @@ limitations under the License. -->
-
-
-
-
- -
-
-
-
-
-
- +
+
+ +
+ +
+
+ +
+ +
-
-
- + +
+ +
+ +
+ +
+
+ +
+
-
+ + + diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts index 09885544..7249e1dd 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -70,7 +70,10 @@ import { TopicDetailModalComponent } from "./topics/topic-list/topic-detail-moda import { TopicConfigModalComponent } from "./topics/topic-list/topic-config-modal/topic-config-modal.component"; import { ToastrNotificationComponent } from "./core/toastr-notification/toastr-notification.component"; import { AlertComponent } from "./core/alert/alert.component"; -import { AboutComponent } from './about/about.component'; +import { AboutComponent } from "./about/about.component"; + +// Loading spinner +import { NgxSpinnerModule } from "ngx-spinner"; @NgModule({ declarations: [ @@ -106,7 +109,8 @@ import { AboutComponent } from './about/about.component'; } }), FormsModule, - NgxDatatableModule + NgxDatatableModule, + NgxSpinnerModule ], providers: [AdminService, RestApiService, ToastrNotificationService], bootstrap: [AppComponent], diff --git a/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts b/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts new file mode 100644 index 00000000..8da1fa67 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts @@ -0,0 +1,30 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed 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. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +export class Feeder { + running: boolean; + version: string; +} diff --git a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts index 6281c956..8e126a0d 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts @@ -34,10 +34,16 @@ export class AdminService { constructor() {} + /* + * Set header title + */ setTitle(title: string) { this.title.next(title); } + /* + * Form validate + */ onKeyPressNumber(data: any) { return (data.target.value = data.target.value.replace(/[^0-9.]/g, "")); } diff --git a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts index 635e42cd..b9134109 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts @@ -34,7 +34,7 @@ import { throwError } from "rxjs"; import { Topic } from "src/app/core/models/topic.model"; import { Db } from "src/app/core/models/db.model"; -const endpoint = "/datalake/v1/"; +const prefix = "/datalake/v1/"; const httpOptions = { headers: new HttpHeaders({ "Content-Type": "application/json" @@ -62,8 +62,8 @@ export class RestApiService { errorMessage = error.error.message; } else { // Get server-side error - errorMessage = `Error Code: ${error.status}`; - console.log(`Error Code: ${error.status}\nMessage: ${error.message}`); + errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`; + console.log(errorMessage); } return throwError(errorMessage); } @@ -72,7 +72,7 @@ export class RestApiService { Topic default config */ getTopicDefaultConfig(): Observable { - return this.http.get(endpoint + "topics/_DL_DEFAULT_").pipe( + return this.http.get(prefix + "topics/_DL_DEFAULT_").pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -81,7 +81,7 @@ export class RestApiService { updateTopicDefaultConfig(t: Topic): Observable { return this.http - .put(endpoint + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions) + .put(prefix + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions) .pipe( retry(1), tap(_ => this.extractData), @@ -93,7 +93,7 @@ export class RestApiService { Topics */ getTopicsFromDmaap(): Observable { - return this.http.get(endpoint + "topics/dmaap/").pipe( + return this.http.get(prefix + "topics/dmaap").pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -101,7 +101,7 @@ export class RestApiService { } getTopicsFromFeeder(): Observable { - return this.http.get(endpoint + "topics").pipe( + return this.http.get(prefix + "topics").pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -109,7 +109,7 @@ export class RestApiService { } getTopicDetail(name: string): Observable { - return this.http.get(endpoint + "topics/" + name).pipe( + return this.http.get(prefix + "topics/" + name).pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -118,7 +118,7 @@ export class RestApiService { addTopic(t: Topic): Observable { return this.http - .post(endpoint + "topics", JSON.stringify(t), httpOptions) + .post(prefix + "topics", JSON.stringify(t), httpOptions) .pipe( retry(1), tap(_ => console.log(`add topic name=${t.name}`)), @@ -128,7 +128,7 @@ export class RestApiService { upadteTopic(t: Topic): Observable { return this.http - .put(endpoint + "topics/" + t.name, JSON.stringify(t), httpOptions) + .put(prefix + "topics/" + t.name, JSON.stringify(t), httpOptions) .pipe( retry(1), tap(_ => this.extractData), @@ -137,7 +137,7 @@ export class RestApiService { } deleteTopic(name: string): Observable { - return this.http.delete(endpoint + "topics/" + name, httpOptions).pipe( + return this.http.delete(prefix + "topics/" + name, httpOptions).pipe( retry(1), tap(_ => console.log(`deleted topic name=${name}`)), catchError(this.handleError) @@ -148,7 +148,7 @@ export class RestApiService { Database */ getDbList(): Observable { - return this.http.get(endpoint + "dbs").pipe( + return this.http.get(prefix + "dbs").pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -156,7 +156,7 @@ export class RestApiService { } getDbDetail(name: string): Observable { - return this.http.get(endpoint + "dbs/" + name).pipe( + return this.http.get(prefix + "dbs/" + name).pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -165,7 +165,7 @@ export class RestApiService { addDb(d: Db): Observable { return this.http - .post(endpoint + "dbs", JSON.stringify(d), httpOptions) + .post(prefix + "dbs", JSON.stringify(d), httpOptions) .pipe( retry(1), tap(_ => console.log(`add db name=${d.name}`)), @@ -175,7 +175,7 @@ export class RestApiService { upadteDb(d: Db): Observable { return this.http - .put(endpoint + "dbs/" + d.name, JSON.stringify(d), httpOptions) + .put(prefix + "dbs/" + d.name, JSON.stringify(d), httpOptions) .pipe( retry(1), tap(_ => this.extractData), @@ -184,10 +184,37 @@ export class RestApiService { } deleteDb(name: string): Observable { - return this.http.delete(endpoint + "dbs/" + name, httpOptions).pipe( + return this.http.delete(prefix + "dbs/" + name, httpOptions).pipe( retry(1), tap(_ => console.log(`deleted db name=${name}`)), catchError(this.handleError) ); } + + /* + Feeder + */ + startFeeder() { + return this.http.post(prefix + "feeder/start", "", httpOptions).pipe( + retry(1), + tap(_ => console.log(`start feeder`)), + catchError(this.handleError) + ); + } + + stopFeeder() { + return this.http.post(prefix + "feeder/stop", "", httpOptions).pipe( + retry(1), + tap(_ => console.log(`stop feeder`)), + catchError(this.handleError) + ); + } + + getFeederstatus() { + return this.http.get(prefix + "feeder/status").pipe( + retry(1), + map(this.extractData), + catchError(this.handleError) + ); + } } diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts index 8df720ea..d0c3a1cb 100644 --- a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts @@ -42,21 +42,29 @@ import { AlertComponent } from "src/app/core/alert/alert.component"; // Notify import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service"; +// Loading spinner +import { NgxSpinnerService } from "ngx-spinner"; + @Component({ selector: "app-database-list", templateUrl: "./database-list.component.html", styleUrls: ["./database-list.component.css"] }) export class DatabaseListComponent implements OnInit { + pageFinished: Boolean = false; + dbList: any = []; dbs: Db[] = []; + loading: Boolean = true; + tempDbDetail: Db; constructor( private restApiService: RestApiService, private notificationService: ToastrNotificationService, - private modalService: NgbModal + private modalService: NgbModal, + private spinner: NgxSpinnerService ) { this.initData().then(data => { this.initDbsList(this.dbList).then(data => { @@ -65,13 +73,16 @@ export class DatabaseListComponent implements OnInit { }); } - @ViewChild("addDbModal") private addDBModal: ElementRef; - - ngOnInit() {} + ngOnInit() { + this.spinner.show(); + } async initData() { this.dbList = []; this.dbList = await this.getDbList(); + setTimeout(() => { + this.spinner.hide(); + }, 500); } getDbList() { diff --git a/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts b/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts index 8544198e..b3c766d1 100644 --- a/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts +++ b/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts @@ -27,10 +27,14 @@ import { Component, OnInit } from "@angular/core"; import { AdminService } from "src/app/core/services/admin.service"; import { RestApiService } from "src/app/core/services/rest-api.service"; +import { HeaderComponent } from "src/app/header/header.component"; // notify import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service"; +// Loading spinner +import { NgxSpinnerService } from "ngx-spinner"; + @Component({ selector: "app-feeder", templateUrl: "./feeder.component.html", @@ -42,22 +46,31 @@ export class FeederComponent implements OnInit { constructor( private adminService: AdminService, private restApiService: RestApiService, - private notificationService: ToastrNotificationService + private notificationService: ToastrNotificationService, + private spinner: NgxSpinnerService ) { this.adminService.setTitle("SIDEBAR.FEDDFER"); this.restApiService.getTopicsFromFeeder().subscribe( res => { // TODO: -1, because __consumer_offsets this.topicContent = (res.length - 1).toString(); + setTimeout(() => { + this.spinner.hide(); + }, 500); }, err => { this.topicContent = "No Data"; this.notificationService.error(err); + setTimeout(() => { + this.spinner.hide(); + }, 500); } ); } - ngOnInit() {} + ngOnInit() { + this.spinner.show(); + } chkTopicContent() { if (this.topicContent == "No Data") { diff --git a/components/datalake-handler/admin/src/src/app/header/header.component.html b/components/datalake-handler/admin/src/src/app/header/header.component.html index 82a825e8..304879ee 100644 --- a/components/datalake-handler/admin/src/src/app/header/header.component.html +++ b/components/datalake-handler/admin/src/src/app/header/header.component.html @@ -18,19 +18,26 @@ limitations under the License. ============LICENSE_END========================================================= --> - -
-
+
+
{{ title | translate }}
-
+ + +
+ +
+ +
-
- +
-
diff --git a/components/datalake-handler/admin/src/src/app/header/header.component.ts b/components/datalake-handler/admin/src/src/app/header/header.component.ts index 4cc00a46..629c19e5 100644 --- a/components/datalake-handler/admin/src/src/app/header/header.component.ts +++ b/components/datalake-handler/admin/src/src/app/header/header.component.ts @@ -24,9 +24,14 @@ * */ -import { Component } from "@angular/core"; +import { Component, Output } from "@angular/core"; import { AdminService } from "../core/services/admin.service"; import { TranslateService } from "@ngx-translate/core"; +import { Feeder } from "src/app/core/models/feeder.model"; +import { RestApiService } from "src/app/core/services/rest-api.service"; + +// notify +import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service"; @Component({ selector: "app-header", @@ -35,6 +40,7 @@ import { TranslateService } from "@ngx-translate/core"; }) export class HeaderComponent { title = "PageTitle"; + feeder: any = []; selectedLang: String; langs: Array = [ @@ -45,6 +51,8 @@ export class HeaderComponent { constructor( private adminService: AdminService, + private restApiService: RestApiService, + private notificationService: ToastrNotificationService, private translateService: TranslateService ) { this.translateService.setDefaultLang("en-us"); @@ -55,9 +63,64 @@ export class HeaderComponent { this.title = title; }); this.selectedLang = this.translateService.defaultLang; + + if ((this.title = "SIDEBAR.FEDDFER")) { + this.restApiService.getFeederstatus().subscribe((data: {}) => { + this.feeder = new Feeder(); + this.feeder = data; + }); + } } changeLanguage(lang: string) { this.translateService.use(lang); } + + changeFeederStatus() { + if (this.feeder.running) { + this.restApiService.startFeeder().subscribe( + res => { + this.notificationService.success("Success start feeder."); + }, + err => { + this.feeder.running = false; + this.notificationService.error(err); + } + ); + } else { + this.restApiService.stopFeeder().subscribe( + res => { + this.notificationService.success("Success stop feeder."); + }, + err => { + this.feeder.running = true; + this.notificationService.error(err); + } + ); + } + } + + /* + * Feeder + */ + getFeederStatus() { + return this.restApiService.getFeederstatus().toPromise(); + } + + setFeederStatus(status: string) { + var data; + + switch (status) { + case "start": + data = true; + console.log("start feeder"); + break; + case "stop": + data = false; + console.log("stop feeder"); + break; + } + + return data; + } } diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html index 044f62a7..238437a0 100644 --- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html +++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html @@ -18,10 +18,10 @@ limitations under the License. ============LICENSE_END========================================================= --> -