diff options
Diffstat (limited to 'components/datalake-handler')
17 files changed, 950 insertions, 419 deletions
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 e15876a8..53b4e064 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -105,7 +105,9 @@ import { IconComponent } from "./shared/components/icon/icon.component"; import { MatTabsModule } from "@angular/material"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; -import { KafkaModalComponent } from './views/kafka/kafka-list/kafka-modal/kafka-modal.component'; +import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component"; +import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component"; +import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component"; @NgModule({ declarations: [ @@ -153,7 +155,9 @@ import { KafkaModalComponent } from './views/kafka/kafka-list/kafka-modal/kafka- ToolAddModalComponent, IconComponent, TopicModalComponent, - KafkaModalComponent + KafkaModalComponent, + DbModalComponent, + ToolModalComponent ], imports: [ BrowserModule, @@ -198,7 +202,9 @@ import { KafkaModalComponent } from './views/kafka/kafka-list/kafka-modal/kafka- ToolAddModalComponent, ModalToolsComponent, TopicModalComponent, - KafkaModalComponent + KafkaModalComponent, + DbModalComponent, + ToolModalComponent ] }) export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts index 3de8f213..eea91ade 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts @@ -25,16 +25,23 @@ */ export class Db { - id: number; - name: string; - enabled: boolean; - host: string; - port: number; - database: string; - encrypt: boolean; - login: string; - pass: string; - dbTypeId: string; + public id: number; + public name: string; + public enabled: boolean; + public host: string; + public port: number; + public database: string; + public encrypt: boolean; + public login: string; + public pass: string; + public dbTypeId: string; // for UI display - checkedToSave: boolean; + public checkedToSave: boolean; +} + +export class DbType { + public id: string; + public name: string; + public defaultPort: number; + public tool: boolean; } 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 83d814e3..ec5e2dce 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 @@ -32,7 +32,7 @@ import { map, catchError, tap, retry } from "rxjs/operators"; import { throwError } from "rxjs"; import { Topic } from "src/app/core/models/topic.model"; -import { Db } from "src/app/core/models/db.model"; +import { Db, DbType } from "src/app/core/models/db.model"; import { Template } from "src/app/core/models/template.model"; import { Dashboard } from "src/app/core/models/dashboard.model"; import { Kafka } from "../models/kafka.model"; @@ -142,7 +142,7 @@ export class RestApiService { } /* - Database + Database and tools */ public getAllDbs(): Observable<Db[]> { return this.http @@ -150,41 +150,61 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - getDbEncryptList(flag): Observable<any> { + public getAllTools(): Observable<Db[]> { return this.http - .get(prefix + "dbs/list?isDb=" + flag) - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + .get<Db[]>(prefix + "dbs/list?isDb=false") + .pipe(retry(1), catchError(this.handleError)); } - getDbList(): Observable<any> { + public getDbTypes(): Observable<DbType[]> { return this.http - .get(prefix + "dbs") - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); - } - - getDbDetail(id): Observable<any> { - return this.http - .get(prefix + "dbs/" + id) - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + .get<DbType[]>(prefix + "dbs/dbtypes") + .pipe(retry(1), catchError(this.handleError)); } - deleteDb(id): Observable<any> { - return this.http.delete(prefix + "dbs/" + id).pipe( + public deleteDb(id: string | number): Observable<Db> { + return this.http.delete<Db>(prefix + "dbs/" + id).pipe( //online retry(1), - map(this.extractData2), + tap(_ => console.log(`deleted db id=${id}`)), catchError(this.handleError) ); } - updateDb(d: Db): Observable<any> { - return this.http.put(prefix + "dbs", d).pipe( + public updateDb(db: Db): Observable<Db> { + return this.http.put<Db>(prefix + "dbs/" + db.id, db).pipe( retry(1), tap(_ => this.extractData), catchError(this.handleError) ); } + public addDb(db: Db): Observable<Db> { + return this.http.post<Db>(prefix + "dbs", db).pipe( + retry(1), + tap(_ => console.log(`add db name=${db.name}`)), + catchError(this.handleError) + ); + } + + getDbEncryptList(flag): Observable<any> { + return this.http + .get(prefix + "dbs/list?isDb=" + flag) + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + + getDbList(): Observable<any> { + return this.http + .get(prefix + "dbs") + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + + getDbDetail(id): Observable<any> { + return this.http + .get(prefix + "dbs/" + id) + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + createDb(d: Db): Observable<any> { return this.http.post(prefix + "dbs", d).pipe( retry(1), diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html index db75f713..9df9e567 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,6 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. --> + <div class="topic-list-panel"> <div class="row"> <div class="col-md-12"> @@ -21,69 +22,22 @@ <div class="p-1"> <div class="input-group"> <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..." - (keyup)="this.updateFilter($event.target.value)" /> - <div class="input-group-append"> - <button type="button" class="btn dl-btn-dark"> - <i class="fa fa-search"></i> - </button> - </div> + (keyup)="this.updateFilter($event.target.value)" /> </div> </div> - <!-- button --> <div class="p-1"> - <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="newDbModal()"></app-button> + <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')"> + </app-button> </div> </div> </div> </div> + <!-- datatable --> <div class="row"> <div class="col-md-12"> - <ngx-datatable #mytemlate class="bootstrap" [rows]="dbList" [columnMode]="'force'" [headerHeight]="40" - [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" - [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)"> - <ngx-datatable-column [width]="100" name="{{ 'STATUS' | translate }}" prop="enabled" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span *ngIf="row.enabled"> - <i class="fas fa-circle dl-icon-enable fa-xs" aria-hidden="true"></i> - </span> - <span *ngIf="!row.enabled"> - <i class="fas fa-circle dl-icon-disable fa-xs" aria-hidden="true"></i> - </span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.name }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="{{ 'DB_TYPE' | translate }}" prop="topic"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.dbTypeId }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="" sortable="false" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span> - <button class="btn action-icon-setting" (click)="this.deleteDbModel(row.id);"> - <i class="fas fa-trash-alt fa-xs"></i> - </button> - </span> - <span> - <button class="btn action-icon-setting" (click)="this.updateDbModel(row.id, row.dbTypeId);"> - <i class="fas fa-cog fa-xs"></i> - </button> - </span> - </ng-template> - </ngx-datatable-column> - - </ngx-datatable> + <app-table [data]="dbs" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table> </div> </div> </div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts index ed25a707..2eb41a81 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -29,24 +29,22 @@ import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { Db } from "src/app/core/models/db.model"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; -import { DatabaseAddModalComponent } from "src/app/views/database/database-list/database-add-modal/database-add-modal.component"; -// DB modal components import { RestApiService } from "src/app/core/services/rest-api.service"; // Modal import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { DbModalComponent } from "src/app/views/database/database-list/db-modal/db-modal.component"; // Notify import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; // Loading spinner import { NgxSpinnerService } from "ngx-spinner"; -import {CouchbaseComponent} from "src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component"; -import {DruidComponent} from "src/app/views/database/database-list/dbs-modal/druid/druid.component"; -import {ElasticsearchComponent} from "src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component"; -import {MongodbComponent} from "src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component"; -import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ selector: "app-database-list", @@ -54,230 +52,192 @@ import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs styleUrls: ["./database-list.component.css"] }) export class DatabaseListComponent implements OnInit { - pageFinished: Boolean = false; - - dbList: any = []; - dbs: Db[] = []; - dbNew: Db; - db_NewBody: Db; - loading: Boolean = true; - flag: Boolean = true; - loadingIndicator: boolean = true; - - mesgNoData = { - emptyMessage: ` - <div class="d-flex justify-content-center"> - <div class="p-2"> - <label class="dl-nodata">No Data</label> - </div> - </div> - ` - }; + dbs: Array<Db> = []; // data of table + t_temp: Array<Db> = []; // cache for dbs + columns: Array<any> = []; // column of table @ViewChild("searchText") searchText: ElementRef; constructor( - private dbApiService: RestApiService, - private notificationService: ToastrNotificationService, - private modalService: NgbModal, - private spinner: NgxSpinnerService - ) { - this.initData().then(data => { - this.initDbsList(this.dbList).then(data => { - this.dbs = data; - }); - }); - } + private restApiService: RestApiService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private spinner: NgxSpinnerService + ) {} ngOnInit() { this.spinner.show(); - } - - async initData() { - this.dbList = []; - this.dbList = await this.getDbList(this.flag); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } - - getDbList(flag) { - return this.dbApiService.getDbEncryptList(flag).toPromise(); - - } - - async initDbsList(dbList: []) { - var d: Db[] = []; - - for (var i = 0; i < dbList.length; i++) { - let data = dbList[i]; - let feed = { - id: data["id"], - name: data["name"], - enabled: data["enabled"], - host: data["host"], - port: data["port"], - database: data["database"], - encrypt: data["encrypt"], - login: data["login"], - pass: data["pass"], - dbTypeId: data["dbTypeId"], - }; - d.push(feed); - } - return d; - } - // getDbDetail(name: string) { - // return this.restApiService.getDbDetail(name).toPromise(); - // } + let t_dbs: Array<Db> = []; - openAddModal() { - const modalRef = this.modalService.open(DatabaseAddModalComponent, { - windowClass: "dl-md-modal", - centered: true - }); + const get_dbs = this.restApiService.getAllDbs().pipe( + mergeMap(dbs => from(dbs)), + map(db => { + t_dbs.push(db); + }) + ); - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - if (receivedEntry) { - modalRef.close(); - //this.openDetailModal(receivedEntry); - } + forkJoin(get_dbs).subscribe(data => { + this.columns = this.initColumn(); + this.dbs = t_dbs; + this.t_temp = [...this.dbs]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); }); } - updateFilter(searchValue) { + updateFilter(searchValue: string) { const val = searchValue.toLowerCase(); + // filter our data - const temps = this.dbList.filter(function (d) { - return d.name.toLowerCase().indexOf(val) != -1 || !val; + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); - // update the rows - this.dbList = temps; - } - newDbModal() { - const modalRef = this.modalService.open(DatabaseAddModalComponent, { - windowClass: "dl-md-modal dbs", - centered: true - }); + // update the rows + this.dbs = temp; } - deleteDbModel(id: number) { - - console.log("delete id", id); - const index = this.dbList.findIndex(t => t.id === id); - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true - }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete db - this.dbApiService.deleteDb(id).subscribe( - res => { - console.log(res); - if (JSON.stringify(res).length <= 2) { - this.dbList.splice(index, 1); - this.dbList = [...this.dbList]; - this.initData(); - this.notificationService.success("SUCCESSFULLY_DELETED"); - - } else { - this.initData(); - this.notificationService.error("FAILED_DELETED"); - } + initColumn() { + let t_columns: Array<any> = []; + + t_columns = [ + { + headerName: "STATUS", + width: "15", + sortable: true, + dataIndex: "enabled", + icon: "status" + }, + { + headerName: "NAME", + width: "420", + sortable: true, + dataIndex: "name" + }, + { + headerName: "Type", + width: "50", + sortable: true, + dataIndex: "dbTypeId" + }, + { + headerName: "Host", + width: "100", + sortable: true, + dataIndex: "host" + }, + { + width: "2", + iconButton: "cog", + action: "edit" + }, + { + width: "2", + iconButton: "trash", + action: "delete" + } + ]; - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + return t_columns; } - updateDbModel(id: number, dbType: string) { - var modalRef; - console.log(dbType, "dbType"); - switch (dbType) { - case "CB": { - modalRef = this.modalService.open(CouchbaseComponent, { - size: "lg", - centered: true - }); - this.editDbModal(id, modalRef); + btnTableAction(passValueArr: Array<any>) { + let action = passValueArr[0]; + let id = passValueArr[1]; + + switch (action) { + case "edit": + this.openModal("edit", id); break; - } - case "DRUID": { - modalRef = this.modalService.open(DruidComponent, { - size: "lg", - centered: true + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" }); - this.editDbModal(id, modalRef); - break; - } - case "ES": { - modalRef = this.modalService.open(ElasticsearchComponent, { - size: "lg", - centered: true + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteDb(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); break; - } - case "MONGO": { - modalRef = this.modalService.open(MongodbComponent, { - size: "lg", - centered: true + } + } + + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" + }); + + switch (mode) { + case "new": + let newDB: Db = new Db(); + let componentNew = new ModalContentData(DbModalComponent, newDB); + + modalRef.componentInstance.title = "NEW_DB"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + newDB = Object.assign({}, data); + console.log(newDB.dbTypeId); + console.log(newDB); + this.restApiService.addDb(newDB).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); break; - } - case "HDFS": { - modalRef = this.modalService.open(HdfsComponent, { - size: "lg", - centered: true + case "edit": + let index: number = this.dbs.findIndex(db => db.id === id); + let editDb: Db = this.dbs[index]; + let componentEdit = new ModalContentData(DbModalComponent, editDb); + + modalRef.componentInstance.title = editDb.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + editDb = Object.assign({}, data); + this.restApiService.updateDb(editDb).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); - break; - } - default: { break; - } } } - - editDbModal(id: number, modalRef) { - console.log("id", id); - const index = this.dbList.findIndex(t => t.id === id); - modalRef.componentInstance.editDb = this.dbList[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.dbNew = receivedEntry; - this.dbApiService - .updateDb(this.dbNew) - .subscribe( - res => { - if (res.statusCode == 200) { - this.dbList[index] = this.dbNew; - this.dbList = [...this.dbList]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initData(); - } else { - this.notificationService.error("FAILED_UPDATED"); - this.initData(); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }) - } - - onActivate(event) { - - } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.css new file mode 100644 index 00000000..0b713d55 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.css @@ -0,0 +1,25 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : DataLake +* ================================================================================ +* Copyright 2019 - 2020 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========================================================= +*/ + +/* + * For every Angular component you write, you may define not only an HTML template, + * but also the CSS styles that go with that template, specifying any selectors, + * rules, and media queries that you need. +*/ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html new file mode 100644 index 00000000..276b8fbc --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html @@ -0,0 +1,128 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 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========================================================= +--> + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + <div class="col-md-6"> + + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'DB_TYPE' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <select [(ngModel)]="this.data.dbTypeId" class="custom-select dl-input-text"> + <option *ngFor="let item of dbTypes" [value]="item.id" [selected]="item.id==this.data.dbTypeId"> + {{ item.name }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'HOST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Port' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.host" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <input [(ngModel)]="this.data.port" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'DATABASE_NAME' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.database" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.encrypt" /> + <span class="dl-slider round"></span> + </label> + </div> + </div> + </div> +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.spec.ts new file mode 100644 index 00000000..7e48dcb1 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.spec.ts @@ -0,0 +1,44 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 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========================================================= + */ + +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; + +import { DbModalComponent } from "./db-modal.component"; + +describe("DbModalComponent", () => { + let component: DbModalComponent; + let fixture: ComponentFixture<DbModalComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DbModalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DbModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts new file mode 100644 index 00000000..b7ca5b1f --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts @@ -0,0 +1,74 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 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 + * + */ + +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db, DbType } from "src/app/core/models/db.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-db-modal", + templateUrl: "./db-modal.component.html", + styleUrls: ["./db-modal.component.css"] +}) +export class DbModalComponent implements OnInit { + @Input() data: Db; + @Input() mode: string; + + dbTypes: Array<DbType> = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + // this.spinner.show(); + + // get database types + const get_dbTypes = this.restApiService.getDbTypes().pipe( + mergeMap(dbTypes => from(dbTypes)), + map(dbType => { + if (!dbType.tool) this.dbTypes.push(dbType); + }) + ); + + forkJoin(get_dbTypes).subscribe(data => { + if (this.mode === "new") { + // default value + if (this.dbTypes.length > 0) { + this.data.dbTypeId = this.dbTypes[0].id; + } + } + }); + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css new file mode 100644 index 00000000..0b713d55 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css @@ -0,0 +1,25 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : DataLake +* ================================================================================ +* Copyright 2019 - 2020 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========================================================= +*/ + +/* + * For every Angular component you write, you may define not only an HTML template, + * but also the CSS styles that go with that template, specifying any selectors, + * rules, and media queries that you need. +*/ diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html new file mode 100644 index 00000000..81e3b583 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html @@ -0,0 +1,107 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 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========================================================= +--> + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + <div class="col-md-6"> + + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'TOOL_TYPE' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <select [(ngModel)]="this.data.dbTypeId" class="custom-select dl-input-text"> + <option *ngFor="let item of dbTypes" [value]="item.id" [selected]="item.id==this.data.dbTypeId"> + {{ item.name }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'HOST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Port' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.host" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <input [(ngModel)]="this.data.port" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts new file mode 100644 index 00000000..2f22cd68 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts @@ -0,0 +1,44 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 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========================================================= + */ + +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; + +import { ToolModalComponent } from "./tool-modal.component"; + +describe("ToolModalComponent", () => { + let component: ToolModalComponent; + let fixture: ComponentFixture<ToolModalComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ToolModalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts new file mode 100644 index 00000000..038d7464 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts @@ -0,0 +1,74 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 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 + * + */ + +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db, DbType } from "src/app/core/models/db.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-tool-modal", + templateUrl: "./tool-modal.component.html", + styleUrls: ["./tool-modal.component.css"] +}) +export class ToolModalComponent implements OnInit { + @Input() data: Db; + @Input() mode: string; + + dbTypes: Array<DbType> = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + // this.spinner.show(); + + // get database types + const get_dbTypes = this.restApiService.getDbTypes().pipe( + mergeMap(dbTypes => from(dbTypes)), + map(dbType => { + if (dbType.tool) this.dbTypes.push(dbType); + }) + ); + + forkJoin(get_dbTypes).subscribe(data => { + if (this.mode === "new") { + // default value + if (this.dbTypes.length > 0) { + this.data.dbTypeId = this.dbTypes[0].id; + } + } + }); + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html index c55fa463..434846c7 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +19,7 @@ Home > Tools </div> <div class="col-md-12"> - <div class="topic-list-panel"> + <div class="table-panel"> <div class="row"> <div class="col-md-12"> <div class="d-flex justify-content-end p-2"> @@ -27,32 +27,24 @@ <div class="p-1"> <div class="input-group"> <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..." - (keyup)="this.updateFilter($event.target.value)" /> - <div class="input-group-append"> - <button type="button" class="btn dl-btn-dark"> - <i class="fa fa-search"></i> - </button> - </div> + (keyup)="this.updateFilter($event.target.value)" /> </div> </div> - <!-- button --> <div class="p-1"> - <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModalDemo()"></app-button> + <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')"> + </app-button> </div> </div> </div> </div> + <!-- datatable --> <div class="row"> <div class="col-md-12"> - <app-table [data]="toolsList" [columns]="toolsColumns" (btnTableAction)="dataAction($event)"> - </app-table> + <app-table [data]="tools" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table> </div> </div> </div> </div> </div> - - - diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts index 65de6ada..a7fe3019 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -18,31 +18,35 @@ * * @author Chunmeng Guo * + * @constructor Ekko Chang */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {AdminService} from "src/app/core/services/admin.service"; -import {Db} from "src/app/core/models/db.model"; -import {RestApiService} from "src/app/core/services/rest-api.service"; -import {AlertComponent} from "src/app/shared/components/alert/alert.component"; -import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {ToolAddModalComponent} from "src/app/views/tools/tool-add-modal/tool-add-modal.component"; -import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component"; +import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db } from "src/app/core/models/db.model"; +import { RestApiService } from "src/app/core/services/rest-api.service"; + +// Modal +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ToolModalComponent } from "src/app/views/tools/tool-modal/tool-modal.component"; +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +import { NgxSpinnerService } from "ngx-spinner"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ - selector: 'app-tools', - templateUrl: './tools.component.html', - styleUrls: ['./tools.component.css'] + selector: "app-tools", + templateUrl: "./tools.component.html", + styleUrls: ["./tools.component.css"] }) export class ToolsComponent implements OnInit { - - toolsColumns: Array<any> = []; - toolsList: Array<any> = []; - dbs: Db[] = []; - toolNew: Db; - loading: Boolean = true; - flag: Boolean = false; + columns: Array<any> = []; + tools: Array<any> = []; + t_temp: Array<any> = []; // cache for tools @ViewChild("searchText") searchText: ElementRef; @@ -50,132 +54,186 @@ export class ToolsComponent implements OnInit { private adminService: AdminService, private notificationService: ToastrNotificationService, private modalService: NgbModal, - private dbApiService: RestApiService + private restApiService: RestApiService, + private spinner: NgxSpinnerService ) { this.adminService.setTitle("SIDEBAR.DASHBOARDLIST"); - this.initData().then(data => { }); + // this.initData().then(data => {}); } ngOnInit() { - this.toolsColumns = [ + this.spinner.show(); + + let t_tools: Array<Db> = []; + + const get_tools = this.restApiService.getAllTools().pipe( + mergeMap(tools => from(tools)), + map(tool => { + t_tools.push(tool); + }) + ); + + forkJoin(get_tools).subscribe(data => { + this.columns = this.initColumn(); + this.tools = t_tools; + this.t_temp = [...this.tools]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); + } + + initColumn() { + let t_columns: Array<any> = []; + + t_columns = [ { - name: "STATUS", - width: "50", - dataIndex: "enabled" + headerName: "STATUS", + width: "15", + sortable: true, + dataIndex: "enabled", + icon: "status" }, { - name: "NAME", - width: "220", + headerName: "NAME", + width: "420", + sortable: true, dataIndex: "name" }, { - name: "DB_TYPE", - width: "220", + headerName: "Type", + width: "50", + sortable: true, dataIndex: "dbTypeId" }, { - name: "", - width: "5", - dataIndex: "", - icon: "trash" + headerName: "Host", + width: "100", + sortable: true, + dataIndex: "host" + }, + { + width: "2", + iconButton: "cog", + action: "edit" }, { - name: "", - width: "5", - dataIndex: "", - icon: "cog" + width: "2", + iconButton: "trash", + action: "delete" } ]; - } - async initData() { - this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise(); + return t_columns; } - updateFilter(searchValue) { + updateFilter(searchValue: string) { const val = searchValue.toLowerCase(); - // filter our data - const temps = this.toolsList.filter(function (d) { - return d.name.toLowerCase().indexOf(val) != -1 || !val; - }); - // update the rows - this.toolsList = temps; - } - openModalDemo() { - this.modalService.open(ToolAddModalComponent, { - windowClass: "dl-md-modal dbs", - size: "sm", - centered: true + // filter our data + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); - } - dataAction($event) { - if($event[0] == "trash"){ - console.log($event, "tools delete"); - this.deleteToolModel($event[1]); - }else { - console.log($event, "tools update"); - this.updateToolModel($event[1]); - } + // update the rows + this.tools = temp; } - deleteToolModel(id: number) { - - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true - }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete tool - this.dbApiService.deleteDb(id).subscribe( - res => { - if (JSON.stringify(res).length <= 2) { - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_DELETED"); - this.initData(); - } else { - this.notificationService.error("FAILED_DELETED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); + btnTableAction(passValueArr: Array<any>) { + let action = passValueArr[0]; + let id = passValueArr[1]; + + switch (action) { + case "edit": + this.openModal("edit", id); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteDb(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); modalRef.close(); - } - ); - }); + }); + break; + } } - updateToolModel(id: number) { - const modalRef = this.modalService.open(ModalToolsComponent, { + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { size: "lg", - centered: true + centered: true, + backdrop: "static" }); - const index = this.toolsList.findIndex(t => t.id === id); - modalRef.componentInstance.editTool = this.toolsList[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.toolNew = receivedEntry; - this.dbApiService - .updateDb(this.toolNew) - .subscribe( - res => { - if (res.statusCode == 200) { - this.toolsList[index] = this.toolNew; - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initData(); - } else { - this.notificationService.error("FAILED_UPDATED"); + + switch (mode) { + case "new": + let newTool: Db = new Db(); + let componentNew = new ModalContentData(ToolModalComponent, newTool); + + modalRef.componentInstance.title = "NEW_TOOL"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + newTool = Object.assign({}, data); + console.log(newTool.dbTypeId); + console.log(newTool); + this.restApiService.addDb(newTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + ); + modalRef.close(); + }); + break; + case "edit": + let index: number = this.tools.findIndex(db => db.id === id); + let editTool: Db = this.tools[index]; + let componentEdit = new ModalContentData(ToolModalComponent, editTool); + + modalRef.componentInstance.title = editTool.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + editTool = Object.assign({}, data); + this.restApiService.updateDb(editTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + } } } diff --git a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json index 2e0892fa..3f4959bf 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json @@ -76,7 +76,8 @@ "TIME_OUT": "Time out(sec)", "EDIT_KAFKA": "Edit Kafka", "NEW_DB": "New Database", - "DB_TYPE": "DbType", + "DB_TYPE": "Db Type", + "TOOL_TYPE": "Tool Type", "NEW_DRUID": "New Druid", "NEW_ELASTICSEARCH": "New Elasticsearch", "NEW_COUCHBASE": "New Couchbase", @@ -84,5 +85,11 @@ "NEW_HDFS": "New Hdfs", "SECURE_COMMUNICATION": "Secure Communication", "NEW_TOOL": "New Tool", - "NEW_KIBANA": "New Kibana" + "NEW_KIBANA": "New Kibana", + "COUCHBASE": "Couchbase", + "DRUID": "Druid", + "ELASTICSEARCH": "Elasticsearch", + "MONGODB": "MongoDB", + "HDFS": "Hdfs", + "DATABASE_NAME": "Database Name" } diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 64cc8eae..958bb669 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -135,6 +135,12 @@ hr { /* bootstrap table theme */ +.table-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; +} + .ngx-datatable.bootstrap { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; |