From: e Date: Thu, 6 Jun 2019 04:49:49 +0000 (+0800) Subject: Template interface front-end development X-Git-Tag: 2.0.0~121^2~1 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=bf2213319471b5c010a8e88679d92b5f26015349;p=dcaegen2%2Fservices.git Template interface front-end development Change-Id: I2d97fefd3c9472253fc46cf2eaeb80c9fa6aa592 Issue-ID: DCAEGEN2-1600 Signed-off-by: e --- 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 d20f71ac..a0a35f9d 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 @@ -64,7 +64,7 @@ export class DashboardApiService { Dashboard */ getDashboardList(): Observable { - let url = prefix + "portals/true"; //onilne + let url = prefix + "portals"; //onilne return this.http.get(url).pipe( retry(1), map(this.extractData), @@ -109,7 +109,7 @@ export class DashboardApiService { } getDashboardName(): Observable { - let url = prefix + "portals/getNames/false"; //onilne + let url = prefix + "portals/getNames?enabled=false"; //onilne return this.http.get(url).pipe( retry(1), map(this.extractData), @@ -177,7 +177,7 @@ export class DashboardApiService { deployTemplateKibana(id, body): Observable { body.submitted = true; console.log(id,body,'this.deployTemplateKibana()'); - return this.http.post(prefix+"portalDesigns/" + id, body).pipe( //online + return this.http.post(prefix+"portalDesigns/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 7c75b6b7..eee76dc1 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 @@ -13,3 +13,94 @@ See the License for the specific language governing permissions and limitations under the License. --> +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
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 3c37c58b..eab30e25 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 @@ -22,7 +22,12 @@ import { ViewChild, ElementRef } 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"; @Component({ selector: 'app-edit-template-modal', @@ -30,14 +35,69 @@ import { styleUrls: ['./edit-template-modal.component.css'] }) export class EditTemplateModalComponent implements OnInit { + @Input() edittemplate: Template; + @Input() selectedLangs; + templateInput: Template; + templatetypedata: Array = []; + topicname: Array = []; + @Output() passEntry: EventEmitter = new EventEmitter(); + @ViewChild("templatetype") templatetype: ElementRef; + @ViewChild("topic") topic: ElementRef; - constructor() { - } + constructor( + public activeModal: NgbActiveModal, + public dashboardApiService: DashboardApiService, + private modalService: NgbModal, + ) { } + inputtemplateName = null; + templateInputTitle = ""; ngOnInit() { + this.getTopicName(); + this.getTemplateTypeName(); + // cache for display + this.templateInput = new Template(); + const feed = { + 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 + }; + this.templateInput = feed; + this.templateInputTitle = ""+this.edittemplate.name; + } + getTopicName(){ + this.dashboardApiService.getTopicName().subscribe(data => { + this.topicname = data; + }); + } + getTemplateTypeName(){ + this.dashboardApiService.getTemplateTypeName().subscribe(data => { + this.templatetypedata = data; + }); + } + passBack() { + if(this.templateInput.name == '' || this.templateInput.name == undefined){ + let tips = ""; + if (this.selectedLangs == "en-us") { + tips = "Name is required input." + } else if (this.selectedLangs == "zh-hans") { + tips = "名字是必填输入项。" + } else if (this.selectedLangs == "zh-hant") { + tips = "名字是必填輸入項。" + } + return false; + } + this.edittemplate = this.templateInput; + this.edittemplate.designType = this.templatetype.nativeElement.value; + this.edittemplate.topic = this.topic.nativeElement.value; + this.passEntry.emit(this.edittemplate); } } 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 7c75b6b7..6b36bc51 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 @@ -13,3 +13,95 @@ See the License for the specific language governing permissions and limitations under the License. --> +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+ +
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 398560bd..9519ff45 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 @@ -22,7 +22,12 @@ import { ViewChild, ElementRef } 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"; @Component({ selector: 'app-new-template-modal', @@ -30,15 +35,76 @@ import { styleUrls: ['./new-template-modal.component.css'] }) export class NewTemplateModalComponent implements OnInit { - + @Input() template: newTemplate; + @Input() templatelist_length; + @Input() selectedLangs; + templateInput: newTemplate + 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 modalService: NgbModal, ) { } - + inputtemplateName = null; + templatebody = null; ngOnInit() { + this.getTopicName(); + this.getTemplateTypeName(); + // cache for display + this.templateInput = new Template(); + const feed = { + name: this.template.name, + submitted: this.template.submitted, + body: this.template.body, + note: this.template.note, + topic: this.template.topic, + designType: this.template.designType + }; + this.templateInput = feed; + } + getTopicName(){ + this.dashboardApiService.getTopicName().subscribe(data => { + this.topicname = data; + console.log(this.topicname,"this.topicname") + }); + } + + getTemplateTypeName(){ + this.dashboardApiService.getTemplateTypeName().subscribe(data => { + this.templatetypedata = data; + console.log(this.templatetypedata,"this.templatetypedata") + }); + } + passBack() { + if(this.templateInput.name == '' || this.templateInput.name == undefined){ + let tips = ""; + if (this.selectedLangs == "en-us") { + tips = "Name input is required." + } else if (this.selectedLangs == "zh-hans") { + tips = "名字输入项是必填项。" + } else if (this.selectedLangs == "zh-hant") { + tips = "名字輸入項是必填項。" + } + return false; + } + this.template = this.templateInput; + console.log(this.templateInput); + this.template.designType = this.templatetype.nativeElement.value; + this.template.topic = this.topic.nativeElement.value; + // this.template.id = this.templatelist_length+1; + this.template.submitted = true; + this.template.note = ""; + console.log(this.template); + this.passEntry.emit(this.template); } } diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css index 424c839b..47ab70e5 100644 --- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css +++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css @@ -13,3 +13,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +.topic-list-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; + } 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 7c75b6b7..e58db0be 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 @@ -13,3 +13,439 @@ See the License for the specific language governing permissions and limitations under the License. --> +
+
+
+
+ +
+
+ +
+ +
+
+
+ + +
+ +
+
+
+
+ +
+
+ + + +
+ + {{ row.id }} + +
+ + + + + {{ row.name }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ row.topic }} + + + + +
+ +   {{ 'DEPLOY' | translate }}   + +
+ + + + + + + + + + + + + + +
+
+
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 acfe4d37..9d774c49 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 @@ -14,6 +14,18 @@ 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"; +// Loading 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"; +// notify +import {ToastrNotificationService} from "src/app/core/services/toastr-notification.service"; @Component({ selector: 'app-template-list', @@ -21,7 +33,316 @@ import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; styleUrls: ['./template-list.component.css'] }) export class TemplateListComponent { + template_list: any = []; + templates: Template[] = []; + temps: Template[] = []; + Template_New: Template; + Template_Newbody: newTemplate; + dashboardDeteleModelShow = true; + loadingIndicator: boolean = true; + selectedLangs = sessionStorage.getItem("selectedLang"); + mesgNoData = { + emptyMessage: ` +
+
+ +
+
+ ` + }; + @ViewChild("searchText") searchText: ElementRef; + + constructor( + private modalService: NgbModal, + private dashboardApiService: DashboardApiService, + private spinner: NgxSpinnerService, + private notificationService: ToastrNotificationService, + ) { + setTimeout(() => { + this.loadingIndicator = false; + }, 5000); + + this.initData().then(data => { + this.initTemplateList(this.template_list).then( + data => { + // for cache of datatable + this.temps = [...data]; + this.templates = data; + setTimeout(() => { + this.spinner.hide(); + }, 500); + } + ); + }); + } + ngOnInit() { + this.spinner.show(); + } + + async initData() { + this.template_list = []; + this.template_list = await this.getTemplateList(); + this.Template_New = new Template(); + this.Template_Newbody = new newTemplate(); + return true; } + + getTemplateList() { + return this.dashboardApiService.getTemplateAll().toPromise(); + } + + async initTemplateList(template_list: []) { + var t: Template[] = []; + for (var i = 0; i < template_list.length; i++) { + let data = template_list[i]; + let feed = { + id: data["id"], + name: data["name"], + submitted: data["submitted"], + body: data["body"], + note: data["note"], + topic: data["topic"], + designType: data["designType"], + }; + t.push(feed); + } + return t; + } + + newTemplateModal() { + this.selectedLangs = sessionStorage.getItem("selectedLang"); + let tips = ""; + const modalRef = this.modalService.open(NewTemplateModalComponent, { + windowClass: "dl-md-modal", + centered: true + }); + this.Template_New = new Template(); + this.Template_Newbody = new newTemplate(); + modalRef.componentInstance.template = this.Template_Newbody; + modalRef.componentInstance.selectedLangs = this.selectedLangs; + 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"); + if (this.selectedLangs == "en-us") { + tips = "Success inserted." + } else if (this.selectedLangs == "zh-hans") { + tips = "新增成功。" + } else if (this.selectedLangs == "zh-hant") { + tips = "新增成功。" + } + this.notificationService.success('"' + name + '"' + tips); + } else { + if (this.selectedLangs == "en-us") { + tips = "Fail inserted." + } else if (this.selectedLangs == "zh-hans") { + tips = "新增失败。" + } else if (this.selectedLangs == "zh-hant") { + tips = "新增失敗。" + } + this.notificationService.error('"' + name + '"' + tips); + } + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }); + } + + editTemplateModal(id: number) { + this.selectedLangs = sessionStorage.getItem("selectedLang"); + let tips = ""; + 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", + centered: true + }); + modalRef.componentInstance.selectedLangs = this.selectedLangs; + 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"); + if (this.selectedLangs == "en-us") { + tips = "Success updated." + } else if (this.selectedLangs == "zh-hans") { + tips = "更新成功。" + } else if (this.selectedLangs == "zh-hant") { + tips = "更新成功。" + } + this.notificationService.success('"' + name + '"' + tips); + + } else { + if (this.selectedLangs == "en-us") { + tips = "Fail updated." + } else if (this.selectedLangs == "zh-hans") { + tips = "更新失败。" + } else if (this.selectedLangs == "zh-hant") { + tips = "更新失敗。" + } + this.notificationService.error('"' + name + '"' + tips); + } + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }) + } + + deleteTemplateModel(id: number) { + this.selectedLangs = sessionStorage.getItem("selectedLang"); + let tips = ""; + if (this.selectedLangs == "en-us") { + tips = "Are you sure you want to delete "; + } else if (this.selectedLangs == "zh-hans") { + tips = "您确定您要删除"; + } else if (this.selectedLangs == "zh-hant") { + tips = "您確定您要刪除"; + } + const index = this.template_list.findIndex(t => t.id === id); + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true + }); + const name = this.template_list[index].name; + // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow; + modalRef.componentInstance.message = + tips + '"' + name + '"' + ' ?'; + 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"); + this.template_list.splice(index, 1); + this.template_list = [...this.template_list]; + if (this.selectedLangs == "en-us") { + tips = "Success deleted." + } else if (this.selectedLangs == "zh-hans") { + tips = "删除成功。" + } else if (this.selectedLangs == "zh-hant") { + tips = "刪除成功。" + } + this.notificationService.success('"' + name + '"' + tips); + } else { + console.log("Fail deleted template"); + if (this.selectedLangs == "en-us") { + tips = "Fail deleted." + } else if (this.selectedLangs == "zh-hans") { + tips = "删除失败。" + } else if (this.selectedLangs == "zh-hant") { + tips = "刪除失敗。" + } + this.notificationService.error('"' + name + '"' + tips); + } + + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }); + + } + + deployTemplate(id: number) { + this.selectedLangs = sessionStorage.getItem("selectedLang"); + let tips = ""; + 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.deployTemplate(id).subscribe( + // res => { + // console.log(res,"reshost"); + // const host = res.source.host, + // port = res.source.port; + // if (res.status == "success") { + // console.log(res) + + 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 (this.selectedLangs == "en-us") { + tips = "Success deploy." + } else if (this.selectedLangs == "zh-hans") { + tips = "部署成功。" + } else if (this.selectedLangs == "zh-hant") { + tips = "部署成功。" + } + this.notificationService.success('"' + name + '"' + tips); + } else { + if (this.selectedLangs == "en-us") { + tips = "Fail deleted." + } else if (this.selectedLangs == "zh-hans") { + tips = "部署失败。" + } else if (this.selectedLangs == "zh-hant") { + tips = "部署失敗。" + } + this.notificationService.error('"' + name + '"' + tips); + } + }, + err => { + this.spinner.hide(); + this.notificationService.error(err); + } + ); + // } else { + // this.spinner.hide(); + // this.notificationService.error( name + " Fail deploy."); + // } + // }, + // err => { + // this.spinner.hide(); + // this.notificationService.error(err); + // } + // ); + + } + + updateFilter(searchValue) { + const val = searchValue.toLowerCase(); + // filter our data + const temps = this.temps.filter(function (d) { + return d.name.toLowerCase().indexOf(val) !== -1 || !val; + }); + // update the rows + this.template_list = temps; + } + + } 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 c8c72b03..675e9f61 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 @@ -62,13 +62,13 @@ limitations under the License.