From c4c391b68ed1a30b3b398c56efadf28b2f33388d Mon Sep 17 00:00:00 2001 From: cyuamber Date: Fri, 12 Jul 2019 18:17:09 +0800 Subject: feat: new changes for design module Change-Id: I0456755e02ce0e1e803b2e6508e943ae86ed4576 Signed-off-by: cyuamber Issue-ID: DCAEGEN2-1663 --- .../src/src/app/core/models/template.model.ts | 45 ++---- .../src/app/core/services/dashboard-api.service.ts | 35 ++-- .../edit-template-modal.component.html | 177 +++++++++++---------- .../edit-template-modal.component.ts | 69 +++++--- .../new-template-modal.component.html | 43 ++--- .../new-template-modal.component.ts | 60 ++++--- .../template-list/template-list.component.html | 26 +-- .../template-list/template-list.component.ts | 45 ++---- 8 files changed, 249 insertions(+), 251 deletions(-) diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts index 0586cd85..af9ef3d9 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts @@ -13,41 +13,24 @@ See the License for the specific language governing permissions and limitations under the License. */ -// export class TemplateList { -// id:number; -// name:string; -// submitted:true; -// body: string; -// note:string; -// portalDesignConfig:{ -// id:number; -// name:string; -// submitted:true; -// body: string; -// note:string; -// topic: string; -// designType: string; -// } -// -// } export class Template { - id:number; - name:string; - submitted:boolean; - body: string; - note:string; - topic: string; - designType: string; - display:string; - } + id: number; + name: string; + submitted: boolean; + body: string; + note: string; + topicName: string; + designType: string; + designTypeName: string; +} export class newTemplate { - name:string; - submitted:boolean; + name: string; + submitted: boolean; body: string; - note:string; - topic: string; + note: string; + topicName: string; designType: string; - display:string; + designTypeName: string; } diff --git a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts index 42b0ffdd..67bfb75e 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts @@ -13,13 +13,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {Injectable} from "@angular/core"; -import {HttpClient, HttpHeaders} from "@angular/common/http"; -import {Observable, of} from "rxjs"; -import {map, catchError, tap, retry} from "rxjs/operators"; -import {throwError} from "rxjs"; +import { Injectable } from "@angular/core"; +import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { Observable, of } from "rxjs"; +import { map, catchError, tap, retry } from "rxjs/operators"; +import { throwError } from "rxjs"; -import {Template,newTemplate} from "src/app/core/models/template.model"; +import { Template, newTemplate } from "src/app/core/models/template.model"; import { Dashboard } from "src/app/core/models/dashboard.model"; const prefix = "/datalake/v1/"; @@ -54,7 +54,7 @@ export class DashboardApiService { } private extractData2(res: Response) { - console.log(res,"detele/deploy template"); + // console.log(res, "detele/deploy template"); let body = res; return body || {}; } @@ -73,7 +73,6 @@ export class DashboardApiService { } createUpadteDashboard(d: Dashboard): Observable { - console.log(d,"add or update dashboard body"); // let url = prefix +"/dashboard-list/successCreteOrEditDemo.json"; //local let url = prefix + "portals";//onilne return this.http @@ -86,10 +85,9 @@ export class DashboardApiService { } deleteDashboard(d: Dashboard): Observable { - console.log(d,"add dashboard body"); let url = prefix + "portals"; //onilne return this.http - .put(url,d) + .put(url, d) .pipe( retry(1), tap(_ => console.log(`deleted db name=${d.name}`)), @@ -111,7 +109,7 @@ export class DashboardApiService { Template */ getTemplateAll(): Observable { - return this.http.get(prefix + "portalDesigns/").pipe( //onlin + return this.http.get(prefix + "designs/").pipe( //onlin retry(1), map(this.extractData), catchError(this.handleError) @@ -119,9 +117,8 @@ export class DashboardApiService { } createNewTemplate(t: newTemplate): Observable { - console.log(t,"createNewTemplate"); return this.http - .post(prefix + "portalDesigns", t) + .post(prefix + "designs", t) .pipe( retry(1), tap(_ => this.extractData), @@ -131,9 +128,8 @@ export class DashboardApiService { updateNewTemplate(t: Template): Observable { let id = t.id; - console.log(id,t,"updateNewTemplate"); return this.http - .put(prefix + "portalDesigns/"+id, t) + .put(prefix + "designs/" + id, t) .pipe( retry(1), tap(_ => this.extractData), @@ -142,7 +138,7 @@ export class DashboardApiService { } getTopicName(): Observable { - return this.http.get(prefix + "topics").pipe( //onlin + return this.http.get(prefix + "topics").pipe( //onlin retry(1), map(this.extractData), catchError(this.handleError) @@ -150,7 +146,7 @@ export class DashboardApiService { } getTemplateTypeName(): Observable { - return this.http.get(prefix + "designTypes").pipe( //onlin + return this.http.get(prefix + "designTypes").pipe( //onlin retry(1), map(this.extractData), catchError(this.handleError) @@ -158,7 +154,7 @@ export class DashboardApiService { } DeleteTemplate(id): Observable { - return this.http.delete(prefix + "portalDesigns/" + id ).pipe( //online + return this.http.delete(prefix + "designs/" + id).pipe( //online retry(1), map(this.extractData2), catchError(this.handleError) @@ -166,8 +162,7 @@ export class DashboardApiService { } deployTemplateKibana(id, body): Observable { body.submitted = true; - console.log(id,body,'this.deployTemplateKibana()'); - return this.http.post(prefix+"portalDesigns/deploy/" + id, body).pipe( //online + return this.http.post(prefix + "designs/deploy/" + id, body).pipe( //online retry(1), map(this.extractData2), catchError(this.handleError) diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html index a7657cf4..48cbc127 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html @@ -14,114 +14,117 @@ limitations under the License. -->
-
-
-
-
- - -
+
+
+
+
+ +
-
-
-
-
+
+
+
+
-
-
+
+
+
-
-
-
- -
-
- -
+
+
+
+ +
+
+
+
-
-
-
- -
-
- -
-
+
+
+
+
- -
-
-
- -
-
- - -
-
- {{this.fileName}} -
+
+
+
-
-
-
- -
-
- -
+
+
+
+ +
+
+ + +
+
+ {{this.fileName}}
+
-
-
-
- -
-
- -
-
+
+
+
+
- +
+ +
+
-
-
-
+ +
-
+
+
-
- - - -
-
- - - +
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts index 5834d2b4..c77bd56e 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts @@ -24,10 +24,11 @@ import { } from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { DashboardApiService } from "src/app/core/services/dashboard-api.service"; -import { AdminService } from "src/app/core/services/admin.service"; import { Template } from "src/app/core/models/template.model"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {AlertComponent} from "../../../../core/alert/alert.component"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +// Loading spinner +import { NgxSpinnerService } from "ngx-spinner"; @Component({ selector: 'app-edit-template-modal', @@ -37,6 +38,8 @@ import {AlertComponent} from "../../../../core/alert/alert.component"; export class EditTemplateModalComponent implements OnInit { @Input() edittemplate: Template; templateInput: Template; + defaultDesigntype: String; + defaultTopicname: String; templatetypedata: Array = []; topicname: Array = []; @Output() passEntry: EventEmitter = new EventEmitter(); @@ -47,6 +50,7 @@ export class EditTemplateModalComponent implements OnInit { constructor( public activeModal: NgbActiveModal, public dashboardApiService: DashboardApiService, + private spinner: NgxSpinnerService, private modalService: NgbModal, ) { } @@ -55,59 +59,76 @@ export class EditTemplateModalComponent implements OnInit { fileName = null; ngOnInit() { - this.getTopicName(); - this.getTemplateTypeName(); // cache for display this.templateInput = new Template(); const feed = { - id:this.edittemplate.id, + id: this.edittemplate.id, name: this.edittemplate.name, submitted: this.edittemplate.submitted, body: this.edittemplate.body, note: this.edittemplate.note, - topic: this.edittemplate.topic, - designType: this.edittemplate.designType, - display: this.edittemplate.display + topicName: this.edittemplate.topicName, + designType: this.edittemplate.designType, + designTypeName: this.edittemplate.designTypeName, }; this.templateInput = feed; - this.templateInputTitle = ""+this.edittemplate.name; - console.log(this.templateInput,"this.templateInput") + this.templateInputTitle = "" + this.edittemplate.name; + this.getTopicName(); + this.getTemplateTypeName(); } - getTopicName(){ + getTopicName() { this.dashboardApiService.getTopicName().subscribe(data => { this.topicname = data; }); } - getTemplateTypeName(){ + getTemplateTypeName() { this.dashboardApiService.getTemplateTypeName().subscribe(data => { this.templatetypedata = data; + this.getDefaultOptions(); + }); + } + + getDefaultOptions() { + this.templatetypedata.map(item => { + if (item.id === this.templateInput.designType) { + return this.defaultDesigntype = item.name; + } }); + this.defaultTopicname = this.templateInput.topicName; } - jsReadFiles(){ - var thiss =this; + jsReadFiles() { + var thiss = this; var file = (document.querySelector("#f-file")).files[0]; this.fileName = file.name; var reader = new FileReader(); - reader.onload = function() { - console.log(this.result); + reader.onload = function () { thiss.templateInput.body = String(this.result); } reader.readAsText(file); } passBack() { - if(this.templateInput.name == '' || this.templateInput.name == undefined){ + this.spinner.show(); + if (this.templateInput.name == '' || this.templateInput.name == undefined) { return false; } - console.log(this.templateInput); this.edittemplate = this.templateInput; - this.edittemplate.display = this.templatetype.nativeElement.value; - this.edittemplate.designType = this.templatetypedata.find((item) => { - return item.display == this.edittemplate.display - }).designType; - this.edittemplate.topic = this.topic.nativeElement.value; + // this.templatetypedata.map(item => { + // if (item.name === this.templatetype.nativeElement.value) { + // return this.edittemplate.designType = item.id; + // } + // }); + this.edittemplate.designType = this.templatetypedata.filter(item => { + return item.name === this.templatetype.nativeElement.value; + })[0].id || ""; + + this.edittemplate.designTypeName = this.templatetype.nativeElement.value; + this.edittemplate.topicName = this.topic.nativeElement.value; this.passEntry.emit(this.edittemplate); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html index 4024c569..7ea68964 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html @@ -38,21 +38,23 @@
- +
-
-
- -
-
- -
+
+
+ +
+
+
+
@@ -69,7 +71,7 @@
- {{this.fileName}} + {{this.fileName}}
@@ -81,24 +83,25 @@
-
-
- -
-
- -
+
+
+ +
+
+
+
@@ -125,4 +128,4 @@
-
+
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts index 3af75bbf..d842a111 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts @@ -24,10 +24,11 @@ import { } from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { DashboardApiService } from "src/app/core/services/dashboard-api.service"; -import { AdminService } from "src/app/core/services/admin.service"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import { Template,newTemplate} from "src/app/core/models/template.model"; -import {AlertComponent} from "../../../../core/alert/alert.component"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +// Loading spinner +import { NgxSpinnerService } from "ngx-spinner"; + +import { Template, newTemplate } from "src/app/core/models/template.model"; @Component({ selector: 'app-new-template-modal', @@ -41,14 +42,13 @@ export class NewTemplateModalComponent implements OnInit { templatetypedata: Array = []; topicname: Array = []; @Output() passEntry: EventEmitter = new EventEmitter(); - // @ViewChild("inputtemplateName") inputtemplateName: ElementRef; - // @ViewChild("templatebody") templatebody: ElementRef; @ViewChild("templatetype") templatetype: ElementRef; @ViewChild("topic") topic: ElementRef; constructor( public activeModal: NgbActiveModal, public dashboardApiService: DashboardApiService, + private spinner: NgxSpinnerService, private modalService: NgbModal, ) { } @@ -66,51 +66,59 @@ export class NewTemplateModalComponent implements OnInit { submitted: this.template.submitted, body: this.template.body, note: this.template.note, - topic: this.template.topic, - designType: this.template.designType, - display: this.template.display + topicName: this.template.topicName, + designType: this.template.designType, + designTypeName: this.template.designTypeName, }; this.templateInput = feed; } - getTopicName(){ + getTopicName() { this.dashboardApiService.getTopicName().subscribe(data => { this.topicname = data; - console.log(this.topicname,"this.topicname") }); } - getTemplateTypeName(){ + getTemplateTypeName() { this.dashboardApiService.getTemplateTypeName().subscribe(data => { this.templatetypedata = data; - console.log(this.templatetypedata,"this.templatetypedata") }); } - jsReadFiles(){ - var thiss =this; - var file =(document.querySelector("#f-file")).files[0]; + jsReadFiles() { + var thiss = this; + var file = (document.querySelector("#f-file")).files[0]; this.fileName = file.name; var reader = new FileReader(); - reader.onload = function() { - console.log(this.result,"this.result"); + reader.onload = function () { + // console.log(this.result, "this.result"); thiss.templateInput.body = String(this.result); } reader.readAsText(file); } passBack() { - if(this.templateInput.name == '' || this.templateInput.name == undefined){ + this.spinner.show(); + if (this.templateInput.name == '' || this.templateInput.name == undefined) { return false; } this.template = this.templateInput; - console.log(this.templateInput); - this.template.display = this.templatetype.nativeElement.value; - this.template.designType = this.templatetypedata.find((item) => { - return item.display == this.template.display - }).designType; - this.template.topic = this.topic.nativeElement.value; + + // this.templatetypedata.map(item => { + // if (item.name === this.templatetype.nativeElement.value) { + // return this.template.designType = item.id; + // } + // }) + + this.template.designType = this.templatetypedata.filter(item => { + return item.name === this.templatetype.nativeElement.value; + })[0].id || ""; + + this.template.designTypeName = this.templatetype.nativeElement.value; + this.template.topicName = this.topic.nativeElement.value; this.template.submitted = false; this.template.note = ""; - console.log(this.template); this.passEntry.emit(this.template); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html index 01543f74..4a93ec65 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html @@ -44,18 +44,19 @@
+ [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)"> - - - - - - + + + + + + - + {{ row.name }} @@ -63,13 +64,13 @@ - {{ row.display }} + {{ row.designTypeName }} - {{ row.topic }} + {{ row.topicName }} @@ -77,7 +78,8 @@ headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
-   {{ 'DEPLOY' | translate }}   +   {{ 'DEPLOY' | translate }}  
@@ -107,4 +109,4 @@
-
+
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts index 70c2bd7b..440f2210 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts @@ -13,19 +13,19 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; -import {DashboardApiService} from "src/app/core/services/dashboard-api.service"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {Template,newTemplate} from "src/app/core/models/template.model"; +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { DashboardApiService } from "src/app/core/services/dashboard-api.service"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +import { Template, newTemplate } from "src/app/core/models/template.model"; // Loading spinner -import {NgxSpinnerService} from "ngx-spinner"; +import { NgxSpinnerService } from "ngx-spinner"; // modal -import {NewTemplateModalComponent} from "./new-template-modal/new-template-modal.component"; -import {EditTemplateModalComponent} from "./edit-template-modal/edit-template-modal.component"; -import {AlertComponent} from "src/app/core/alert/alert.component"; +import { NewTemplateModalComponent } from "./new-template-modal/new-template-modal.component"; +import { EditTemplateModalComponent } from "./edit-template-modal/edit-template-modal.component"; +import { AlertComponent } from "src/app/core/alert/alert.component"; // notify -import {ToastrNotificationService} from "src/app/core/services/toastr-notification.service"; +import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service"; @Component({ selector: 'app-template-list', @@ -101,9 +101,9 @@ export class TemplateListComponent { submitted: data["submitted"], body: data["body"], note: data["note"], - topic: data["topic"], + topicName: data["topicName"], designType: data["designType"], - display: data["display"], + designTypeName: data["designTypeName"], }; t.push(feed); } @@ -111,7 +111,6 @@ export class TemplateListComponent { } newTemplateModal() { - let tips = ""; const modalRef = this.modalService.open(NewTemplateModalComponent, { windowClass: "dl-md-modal templatess", centered: true @@ -122,17 +121,14 @@ export class TemplateListComponent { modalRef.componentInstance.templatelist_length = this.template_list.length; modalRef.componentInstance.passEntry.subscribe(receivedEntry => { this.Template_Newbody = receivedEntry; - let name = this.Template_Newbody.name; this.dashboardApiService .createNewTemplate(this.Template_Newbody) .subscribe( res => { if (res.statusCode == 200) { this.Template_New = res.returnBody; - console.log(this.Template_New,"this.Template_New add Success"); this.template_list.push(this.Template_New); this.template_list = [...this.template_list]; - console.log(this.template_list, "this.template_list,inserted"); this.notificationService.success("SUCCESSFULLY_CREARED"); } else { this.notificationService.error("FAILED_CREARED"); @@ -149,8 +145,7 @@ export class TemplateListComponent { onActivate(event) { const emitType = event.type; - if(emitType == "dblclick"){ - console.log('Activate Event', event); + if (emitType == "dblclick") { let id = event.row.id; this.editTemplateModal(id); } @@ -159,24 +154,20 @@ export class TemplateListComponent { editTemplateModal(id) { const index = this.template_list.findIndex(t => t.id === id); - // const name = this.template_list[index].name; const modalRef = this.modalService.open(EditTemplateModalComponent, { windowClass: "dl-md-modal templatess", centered: true }); modalRef.componentInstance.edittemplate = this.template_list[index]; modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - const name = receivedEntry.name; this.Template_New = receivedEntry; this.dashboardApiService .updateNewTemplate(this.Template_New) .subscribe( res => { - if (res.statusCode == 200) { this.template_list[index] = this.Template_New; this.template_list = [...this.template_list]; - console.log(this.template_list, "this.template_list,update"); this.notificationService.success("SUCCESSFULLY_UPDATED"); } else { this.notificationService.error("FAILED_UPDATED"); @@ -197,22 +188,17 @@ export class TemplateListComponent { size: "sm", centered: true }); - const name = this.template_list[index].name; // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow; modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; modalRef.componentInstance.passEntry.subscribe(receivedEntry => { // Delete database this.dashboardApiService.DeleteTemplate(id).subscribe( res => { - console.log(res,"template detele res"); - console.log(JSON.stringify(res).length,"JSON.stringify(res).length"); - if (JSON.stringify(res).length<=2) { - console.log("Success deleted template"); + if (JSON.stringify(res).length <= 2) { this.template_list.splice(index, 1); this.template_list = [...this.template_list]; this.notificationService.success("SUCCESSFULLY_DELETED"); } else { - console.log("Fail deleted template"); this.notificationService.error("FAILED_DELETED"); } @@ -229,15 +215,12 @@ export class TemplateListComponent { deployTemplate(id: number) { const index = this.template_list.findIndex(t => t.id === id); - const name = this.template_list[index].name; const body = this.template_list[index]; this.spinner.show(); this.dashboardApiService.deployTemplateKibana(id, body).subscribe( res => { this.spinner.hide(); - console.log(res,"template deploy res"); - console.log(JSON.stringify(res).length,"JSON.stringify(res).length"); - if (JSON.stringify(res).length<=2) { + if (JSON.stringify(res).length <= 2) { this.notificationService.success("Deploy_SUCCESSFULLY"); } else { this.notificationService.error("Deploy_FAILED"); -- cgit 1.2.3-korg