From 48ba434dcc92846ed96bc1dc3577d47610c73831 Mon Sep 17 00:00:00 2001 From: ZhangZihao Date: Wed, 23 Oct 2019 11:32:53 +0800 Subject: [PATCH] dbs ui code Change-Id: I7e4c2501ba8437394cff6355671755e53071f2a3 Issue-ID: DCAEGEN2-1877 Signed-off-by: ZhangZihao --- .../admin/src/src/app/core/models/db.model.ts | 2 + .../src/src/app/core/services/rest-api.service.ts | 28 +- .../database-add-modal.component.html | 84 ++---- .../database-add-modal.component.ts | 113 +++++++- .../database-list/database-list.component.css | 67 +---- .../database-list/database-list.component.html | 302 ++++++--------------- .../database-list/database-list.component.ts | 220 +++++++++------ .../dbs-modal/couchbase/couchbase.component.css | 72 +++-- .../dbs-modal/couchbase/couchbase.component.html | 163 +++++------ .../dbs-modal/couchbase/couchbase.component.ts | 66 +++-- .../dbs-modal/druid/druid.component.css | 72 +++-- .../dbs-modal/druid/druid.component.html | 169 ++++++------ .../dbs-modal/druid/druid.component.ts | 66 +++-- .../elasticsearch/elasticsearch.component.css | 72 +++-- .../elasticsearch/elasticsearch.component.html | 159 ++++++----- .../elasticsearch/elasticsearch.component.ts | 66 +++-- .../dbs-modal/hdfs/hdfs.component.css | 72 +++-- .../dbs-modal/hdfs/hdfs.component.html | 137 +++++----- .../database-list/dbs-modal/hdfs/hdfs.component.ts | 66 +++-- .../dbs-modal/mongodb/mongodb.component.css | 72 +++-- .../dbs-modal/mongodb/mongodb.component.html | 163 +++++------ .../dbs-modal/mongodb/mongodb.component.ts | 66 +++-- .../src/app/views/database/database.component.html | 8 +- .../admin/src/src/assets/i18n/en-us.json | 11 +- 24 files changed, 1326 insertions(+), 990 deletions(-) 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 84d17524..ca7f379e 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,6 +25,7 @@ */ export class Db { + id: number; name: string; enabled: boolean; host: string; @@ -33,4 +34,5 @@ export class Db { encrypt: boolean; login: string; pass: string; + dbTypeId: string; } 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 cb210086..e5d6e708 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 @@ -165,6 +165,14 @@ export class RestApiService { /* Database */ + getDbEncryptList(flag): Observable { + return this.http.get(prefix + "dbs/list/?encrypt="+flag).pipe( + retry(1), + map(this.extractData), + catchError(this.handleError) + ); + } + getDbList(): Observable { return this.http.get(prefix + "dbs").pipe( retry(1), @@ -181,7 +189,15 @@ export class RestApiService { ); } - upadteDb(d: Db): Observable { + deleteDb(id): Observable { + return this.http.delete(prefix + "dbs/" + id).pipe( //online + retry(1), + map(this.extractData2), + catchError(this.handleError) + ); + } + + updateDb(d: Db): Observable { return this.http .put(prefix + "dbs", d) .pipe( @@ -191,6 +207,16 @@ export class RestApiService { ); } + createDb(d: Db): Observable { + return this.http + .post(prefix + "dbs", d) + .pipe( + retry(1), + tap(_ => this.extractData), + catchError(this.handleError) + ); + } + /* Feeder */ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html index 490bf49e..21a06e98 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html @@ -19,37 +19,23 @@ limitations under the License. -->
-
- -
- -
-
- - -
- diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts index 3f47bdd1..30665d87 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts @@ -22,10 +22,21 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Output, EventEmitter } from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import {Component, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; +import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap"; +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 {Db} from "src/app/core/models/db.model"; +import {RestApiService} from "src/app/core/services/rest-api.service"; +import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-database-add-modal", @@ -35,8 +46,18 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; export class DatabaseAddModalComponent { @Output() passEntry: EventEmitter = new EventEmitter(); seletedItem: string = ""; - - constructor(public activeModal: NgbActiveModal) {} + dbList: any = []; + dbs: Db[] = []; + loading: Boolean = true; + dbNew: Db; + db_NewBody: Db; + constructor( + public activeModal: NgbActiveModal, + private spinner: NgxSpinnerService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private dbApiService: RestApiService + ) {} ngOnInit() {} @@ -45,6 +66,88 @@ export class DatabaseAddModalComponent { } passBack() { - this.passEntry.emit(this.seletedItem); + console.log(this.seletedItem, "next"); + this.openNewModal(this.seletedItem); + } + + newDb(modalRef) { + this.dbNew = new Db(); + this.db_NewBody = new Db(); + modalRef.componentInstance.db = this.db_NewBody; + modalRef.componentInstance.dbList_length = this.dbList.length; + modalRef.componentInstance.passEntry.subscribe(receivedEntry => { + this.db_NewBody = receivedEntry; + this.dbApiService + .createDb(this.db_NewBody) + .subscribe( + res => { + this.spinner.hide(); + if (res.statusCode == 200) { + this.dbNew = res.returnBody; + this.dbList.push(this.dbNew); + this.dbList = [...this.dbList]; + this.notificationService.success("SUCCESSFULLY_CREARED"); + } else { + this.notificationService.error("FAILED_CREARED"); + } + modalRef.close(); + }, + err => { + this.spinner.hide(); + this.notificationService.error(err); + modalRef.close(); + } + ); + }); + } + + openNewModal(name: string) { + var modalRef; + + switch (name) { + case "Couchbase": { + modalRef = this.modalService.open(CouchbaseComponent, { + size: "lg", + centered: true + }); + this.newDb(modalRef); + break; + } + case "Druid": { + modalRef = this.modalService.open(DruidComponent, { + size: "lg", + centered: true + }); + this.newDb(modalRef); + break; + } + case "Elasticsearch": { + modalRef = this.modalService.open(ElasticsearchComponent, { + size: "lg", + centered: true + }); + this.newDb(modalRef); + break; + } + case "MongoDB": { + modalRef = this.modalService.open(MongodbComponent, { + size: "lg", + centered: true + }); + this.newDb(modalRef); + break; + } + case "HDFS": { + modalRef = this.modalService.open(HdfsComponent, { + size: "lg", + centered: true + }); + this.newDb(modalRef); + break; + } + default: { + break; + } + } } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css index 15261b48..042506d2 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css @@ -1,63 +1,20 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= -*/ - + Copyright (C) 2019 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. + You may obtain a copy of the License at -.db-block { - min-width: 180px; - min-height: 180px; - padding: 10px; -} + http://www.apache.org/licenses/LICENSE-2.0 -.db-panel { + 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. +*/ +.topic-list-panel { background: #FFFFFF; box-shadow: 3px 3px 11px 0 #D2D3D5; border-radius: 20px; - position: relative; - font-family: "Open Sans", sans-serif; - font-weight: 600; - font-size: 18px; - color: #313032; - text-align: center; - padding: 10px; -} - -.db-dropdown { - background-color: #ffffff; -} - -.db-dropdown:hover { - background-color: #ffffff; -} - -.db-config-icon { - color: #5DBEBB; - background-color: #ffffff; -} - -.db-config-icon:hover { - background-color: #D2D3D5; -} - -.dropdown-item { - font-family: "Open Sans", sans-serif; - font-weight: 400; - font-size: 14px; } 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 829d6c62..ca33d91f 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,235 +1,91 @@ - -
- -
-
-
-
-
- -
- - - - - -
+ 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. +--> +
+
+
+
+ +
+
+ +
+ +
+
+
- -
- - - - - - - - - -
+ +
+ +
+
+
+
+ +
+
+ + + + + + + + + + + - -
- - - {{ row.name }} + + - .st1 { - fill: #FFFFFF; - } + + + {{ row.dbTypeId }} + + - - - - - - - - -
-
-
- - {{ db.name }} -
-
+ + + + + + + + + + -
+
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 5b937301..ed25a707 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 @@ -22,22 +22,19 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; -import { Db } from "../../../core/models/db.model"; +import { Db } from "src/app/core/models/db.model"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; -import { DatabaseAddModalComponent } from "./database-add-modal/database-add-modal.component"; +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 { CouchbaseComponent } from "./dbs-modal/couchbase/couchbase.component"; -import { DruidComponent } from "./dbs-modal/druid/druid.component"; -import { ElasticsearchComponent } from "./dbs-modal/elasticsearch/elasticsearch.component"; -import { MongodbComponent } from "./dbs-modal/mongodb/mongodb.component"; -import { HdfsComponent } from "./dbs-modal/hdfs/hdfs.component"; import { AlertComponent } from "src/app/shared/components/alert/alert.component"; // Notify @@ -45,6 +42,11 @@ import { ToastrNotificationService } from "src/app/shared/components/toastr-noti // 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"; @Component({ selector: "app-database-list", @@ -56,16 +58,29 @@ export class DatabaseListComponent implements OnInit { dbList: any = []; dbs: Db[] = []; - + dbNew: Db; + db_NewBody: Db; loading: Boolean = true; + flag: Boolean = true; + loadingIndicator: boolean = true; + + mesgNoData = { + emptyMessage: ` +
+
+ +
+
+ ` + }; - tempDbDetail: Db; + @ViewChild("searchText") searchText: ElementRef; constructor( - private restApiService: RestApiService, - private notificationService: ToastrNotificationService, - private modalService: NgbModal, - private spinner: NgxSpinnerService + private dbApiService: RestApiService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private spinner: NgxSpinnerService ) { this.initData().then(data => { this.initDbsList(this.dbList).then(data => { @@ -79,46 +94,43 @@ export class DatabaseListComponent implements OnInit { } async initData() { - this.dbList = []; - this.dbList = await this.getDbList(); - setTimeout(() => { - this.spinner.hide(); - }, 500); + this.dbList = []; + this.dbList = await this.getDbList(this.flag); + setTimeout(() => { + this.spinner.hide(); + }, 500); } - getDbList() { - var data: any; + getDbList(flag) { + return this.dbApiService.getDbEncryptList(flag).toPromise(); - data = this.restApiService.getDbList().toPromise(); - - return data; } async initDbsList(dbList: []) { var d: Db[] = []; - if (dbList.length > 0) { - for (var i = 0; i < dbList.length; i++) { - let data = await this.getDbDetail(dbList[i]); - let feed = { - name: dbList[i], - enabled: data.enabled, - host: data.host, - port: data.port, - database: data.database, - encrypt: data.encrypt, - login: data.login, - pass: data.pass - }; - d.push(feed); - } + 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(); - } + // getDbDetail(name: string) { + // return this.restApiService.getDbDetail(name).toPromise(); + // } openAddModal() { const modalRef = this.modalService.open(DatabaseAddModalComponent, { @@ -129,41 +141,97 @@ export class DatabaseListComponent implements OnInit { modalRef.componentInstance.passEntry.subscribe(receivedEntry => { if (receivedEntry) { modalRef.close(); - this.openDetailModal(receivedEntry); + //this.openDetailModal(receivedEntry); } }); } - openDetailModal(name: string) { - var modalRef, index; + updateFilter(searchValue) { + const val = searchValue.toLowerCase(); + // filter our data + const temps = this.dbList.filter(function (d) { + return d.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 + }); + } + + 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"); + } + + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }); + } - switch (name) { - case "Couchbase": { + 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); break; } - case "Druid": { + case "DRUID": { modalRef = this.modalService.open(DruidComponent, { size: "lg", centered: true }); + this.editDbModal(id, modalRef); break; } - case "Elasticsearch": { + case "ES": { modalRef = this.modalService.open(ElasticsearchComponent, { size: "lg", centered: true }); + this.editDbModal(id, modalRef); break; } - case "MongoDB": { + case "MONGO": { modalRef = this.modalService.open(MongodbComponent, { size: "lg", centered: true }); + this.editDbModal(id, modalRef); break; } case "HDFS": { @@ -171,33 +239,33 @@ export class DatabaseListComponent implements OnInit { size: "lg", centered: true }); + this.editDbModal(id, modalRef); break; } default: { break; } } + } - index = this.dbs.findIndex(d => d.name === name); - this.tempDbDetail = new Db(); - if (index != -1) { - modalRef.componentInstance.db = this.dbs[index]; - } else { - modalRef.componentInstance.db = this.tempDbDetail; - } - modalRef.componentInstance.passEntry.subscribe(receiveEntry => { - this.tempDbDetail = receiveEntry; - let enabled = receiveEntry.enabled; - console.log(this.tempDbDetail, "this.tempDbDetail"); - if (enabled == true) { - this.restApiService.upadteDb(this.tempDbDetail).subscribe( + 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 => { - console.log(res); if (res.statusCode == 200) { - this.dbs[index] = this.tempDbDetail; + 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(); }, @@ -206,24 +274,10 @@ export class DatabaseListComponent implements OnInit { modalRef.close(); } ); - } else { - this.restApiService.upadteDb(this.dbs[index]).subscribe( - res => { - console.log(res); - if (res.statusCode == 200) { - this.dbs[index] = this.tempDbDetail; - this.notificationService.success("SUCCESSFULLY_DELETED"); - } else { - this.dbs[index].encrypt = true; - } - 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/dbs-modal/couchbase/couchbase.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css index d6d32ca4..7752355c 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css @@ -1,19 +1,57 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= + Copyright (C) 2019 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. + 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. */ +.row-wrapper{ + display: flex; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.row-half-item{ + width: 45%; +} +.row-half-item2{ + width: 50%; +} +.usual-item{ + margin-left: 2%; +} +.usual-item2{ + margin-left: 6.5%; +} +input::-webkit-input-placeholder { + font-size: 12px; + color: #999999 !important; +} +input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: 12px; + color: #999999 !important; +} +input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: 12px; + color: #999999 !important; +} +input::-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: 12px; + color: #999999 !important; +} + +.input_style { + width: 200px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html index c67ab85c..b58b6d2d 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html @@ -1,33 +1,26 @@ + Copyright (C) 2019 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. + 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. +-->
-
+
- - +
-
@@ -36,86 +29,99 @@ limitations under the License.
-
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+ +
+
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+
-
- +
+
-
-
-
-
-
-
- -
-
+
+
+
+ +
+
+
-
-
-
-
-
-
-
- -
-
+
+
+ +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
@@ -144,3 +150,4 @@ limitations under the License.
+ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts index 4ce7f2ab..be3b2517 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts @@ -22,12 +22,15 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { Db } from "src/app/core/models/db.model"; import { AdminService } from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-couchbase", @@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service"; }) export class CouchbaseComponent { @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editDb: Db; @Input() db: Db; - tempDb: Db; + @Input() dbList_length; + dbInput: Db; + dbTypeIdList: Array = ["CB", "DRUID", "ES", "HDFS", "MONGO"]; + @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; + defaultDbType: string; + dbInputTitle = ""; constructor( public activeModal: NgbActiveModal, - public adminService: AdminService + public adminService: AdminService, + private spinner: NgxSpinnerService ) { } ngOnInit() { - // cache for display - this.tempDb = new Db(); - const feed = { - name: "Couchbase", - enabled: this.db.enabled, - host: this.db.host, - port: this.db.port, - database: this.db.database, - encrypt: this.db.encrypt, - login: this.db.login, - pass: this.db.pass - }; - this.tempDb = feed; + if (this.editDb == null) { + this.dbInput = new Db(); + const feed = { + id: null, + name: this.db.name, + enabled: this.db.enabled, + host: this.db.host, + port: this.db.port, + database: this.db.database, + encrypt: this.db.encrypt, + login: this.db.login, + pass: this.db.pass, + dbTypeId: this.db.dbTypeId + } + this.dbInput = feed; + this.dbInputTitle = "New Couchbase"; + console.log("create db"); + + } else { + this.dbInput = this.editDb; + this.dbInputTitle = "Edit " + this.editDb.name; + this.defaultDbType = this.dbInput.dbTypeId; + console.log("edit db"); + } } passBack() { - this.db = this.tempDb; - this.passEntry.emit(this.db); + this.spinner.show(); + if (this.dbInput.name == '' || this.dbInput.name == undefined) { + return false; + } + this.editDb = this.dbInput; + this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value; + console.log(this.editDb, "db"); + this.passEntry.emit(this.editDb); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css index d6d32ca4..7752355c 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css @@ -1,19 +1,57 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= + Copyright (C) 2019 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. + 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. */ +.row-wrapper{ + display: flex; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.row-half-item{ + width: 45%; +} +.row-half-item2{ + width: 50%; +} +.usual-item{ + margin-left: 2%; +} +.usual-item2{ + margin-left: 6.5%; +} +input::-webkit-input-placeholder { + font-size: 12px; + color: #999999 !important; +} +input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: 12px; + color: #999999 !important; +} +input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: 12px; + color: #999999 !important; +} +input::-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: 12px; + color: #999999 !important; +} + +.input_style { + width: 200px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html index 5d5a38cf..b58b6d2d 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html @@ -1,33 +1,26 @@ + Copyright (C) 2019 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. + 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. +-->
-
+
- - +
-
@@ -36,86 +29,99 @@ limitations under the License.
-
+
- - - - - - - - - - -
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+ +
+
+
-
-
-
-
- +
+
+
+
-
- +
+
-
-
-
-
-
-
-
- -
-
+
+
+ +
+
+
-
-
-
-
-
-
- -
-
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
@@ -144,3 +150,4 @@ limitations under the License.
+ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts index 4de2fdd8..5c424fce 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts @@ -22,12 +22,15 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { Db } from "src/app/core/models/db.model"; import { AdminService } from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-druid", @@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service"; }) export class DruidComponent { @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editDb: Db; @Input() db: Db; - tempDb: Db; + @Input() dbList_length; + dbInput: Db; + dbTypeIdList: Array = ["CB", "DRUID", "ES", "HDFS", "MONGO"]; + @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; + defaultDbType: string; + dbInputTitle = ""; constructor( public activeModal: NgbActiveModal, - public adminService: AdminService + public adminService: AdminService, + private spinner: NgxSpinnerService ) { } ngOnInit() { - // cache for display - this.tempDb = new Db(); - const feed = { - name: "Druid", - enabled: this.db.enabled, - host: this.db.host, - port: this.db.port, - database: this.db.database, - encrypt: this.db.encrypt, - login: this.db.login, - pass: this.db.pass - }; - this.tempDb = feed; + if (this.editDb == null) { + this.dbInput = new Db(); + const feed = { + id: null, + name: this.db.name, + enabled: this.db.enabled, + host: this.db.host, + port: this.db.port, + database: this.db.database, + encrypt: this.db.encrypt, + login: this.db.login, + pass: this.db.pass, + dbTypeId: this.db.dbTypeId + } + this.dbInput = feed; + this.dbInputTitle = "New Druid"; + console.log("create db"); + + } else { + this.dbInput = this.editDb; + this.dbInputTitle = "Edit " + this.editDb.name; + this.defaultDbType = this.dbInput.dbTypeId; + console.log("edit db"); + } } passBack() { - this.db = this.tempDb; - this.passEntry.emit(this.db); + this.spinner.show(); + if (this.dbInput.name == '' || this.dbInput.name == undefined) { + return false; + } + this.editDb = this.dbInput; + this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value; + console.log(this.editDb, "db"); + this.passEntry.emit(this.editDb); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css index d6d32ca4..7752355c 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css @@ -1,19 +1,57 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= + Copyright (C) 2019 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. + 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. */ +.row-wrapper{ + display: flex; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.row-half-item{ + width: 45%; +} +.row-half-item2{ + width: 50%; +} +.usual-item{ + margin-left: 2%; +} +.usual-item2{ + margin-left: 6.5%; +} +input::-webkit-input-placeholder { + font-size: 12px; + color: #999999 !important; +} +input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: 12px; + color: #999999 !important; +} +input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: 12px; + color: #999999 !important; +} +input::-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: 12px; + color: #999999 !important; +} + +.input_style { + width: 200px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html index 1a7e7e80..b58b6d2d 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html @@ -1,33 +1,26 @@ + Copyright (C) 2019 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. + 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. +-->
-
+
- - +
-
@@ -36,76 +29,99 @@ limitations under the License.
-
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+ +
+
+
-
-
-
-
- +
+
+
+
-
- +
+
-
-
-
-
-
-
-
- -
-
+
+
+ +
+
+
-
-
-
-
-
-
- -
-
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
@@ -134,3 +150,4 @@ limitations under the License.
+ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts index 29e2125e..ed3e513b 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts @@ -22,12 +22,15 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { Db } from "src/app/core/models/db.model"; import { AdminService } from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-elasticsearch", @@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service"; }) export class ElasticsearchComponent { @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editDb: Db; @Input() db: Db; - tempDb: Db; + @Input() dbList_length; + dbInput: Db; + dbTypeIdList: Array = ["CB", "DRUID", "ES", "HDFS", "MONGO"]; + @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; + defaultDbType: string; + dbInputTitle = ""; constructor( public activeModal: NgbActiveModal, - public adminService: AdminService + public adminService: AdminService, + private spinner: NgxSpinnerService ) { } ngOnInit() { - // cache for display - this.tempDb = new Db(); - const feed = { - name: "Elasticsearch", - enabled: this.db.enabled, - host: this.db.host, - port: this.db.port, - database: this.db.database, - encrypt: this.db.encrypt, - login: this.db.login, - pass: this.db.pass - }; - this.tempDb = feed; + if (this.editDb == null) { + this.dbInput = new Db(); + const feed = { + id: null, + name: this.db.name, + enabled: this.db.enabled, + host: this.db.host, + port: this.db.port, + database: this.db.database, + encrypt: this.db.encrypt, + login: this.db.login, + pass: this.db.pass, + dbTypeId: this.db.dbTypeId + } + this.dbInput = feed; + this.dbInputTitle = "New Elasticsearch"; + console.log("create db"); + + } else { + this.dbInput = this.editDb; + this.dbInputTitle = "Edit " + this.editDb.name; + this.defaultDbType = this.dbInput.dbTypeId; + console.log("edit db"); + } } passBack() { - this.db = this.tempDb; - this.passEntry.emit(this.db); + this.spinner.show(); + if (this.dbInput.name == '' || this.dbInput.name == undefined) { + return false; + } + this.editDb = this.dbInput; + this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value; + console.log(this.editDb, "db"); + this.passEntry.emit(this.editDb); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css index d6d32ca4..7752355c 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css @@ -1,19 +1,57 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= + Copyright (C) 2019 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. + 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. */ +.row-wrapper{ + display: flex; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.row-half-item{ + width: 45%; +} +.row-half-item2{ + width: 50%; +} +.usual-item{ + margin-left: 2%; +} +.usual-item2{ + margin-left: 6.5%; +} +input::-webkit-input-placeholder { + font-size: 12px; + color: #999999 !important; +} +input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: 12px; + color: #999999 !important; +} +input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: 12px; + color: #999999 !important; +} +input::-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: 12px; + color: #999999 !important; +} + +.input_style { + width: 200px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html index 39b905b3..d13cbeec 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html @@ -1,33 +1,26 @@ + 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. +-->
-
+
- - +
-
@@ -36,76 +29,79 @@ limitations under the License.
-
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+ +
+
+
-
-
-
-
- +
+
+
+
-
- +
+
-
-
-
-
-
-
-
- -
-
+
+
+ +
+
+
-
-
-
-
-
-
- -
-
+
+
+
+ +
+
+ +
-
+
+
+ +
+
+ +
+
+
@@ -134,3 +130,4 @@ limitations under the License.
+ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts index 42ac7748..2c161fdb 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts @@ -22,12 +22,15 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { Db } from "src/app/core/models/db.model"; import { AdminService } from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-hdfs", @@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service"; }) export class HdfsComponent { @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editDb: Db; @Input() db: Db; - tempDb: Db; + @Input() dbList_length; + dbInput: Db; + dbTypeIdList: Array = ["CB", "DRUID", "ES", "HDFS", "MONGO"]; + @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; + defaultDbType: string; + dbInputTitle = ""; constructor( public activeModal: NgbActiveModal, - public adminService: AdminService + public adminService: AdminService, + private spinner: NgxSpinnerService ) { } ngOnInit() { - // cache for display - this.tempDb = new Db(); - const feed = { - name: "HDFS", - enabled: this.db.enabled, - host: this.db.host, - port: this.db.port, - database: this.db.database, - encrypt: this.db.encrypt, - login: this.db.login, - pass: this.db.pass - }; - this.tempDb = feed; + if (this.editDb == null) { + this.dbInput = new Db(); + const feed = { + id: null, + name: this.db.name, + enabled: this.db.enabled, + host: this.db.host, + port: this.db.port, + database: this.db.database, + encrypt: this.db.encrypt, + login: this.db.login, + pass: this.db.pass, + dbTypeId: this.db.dbTypeId + } + this.dbInput = feed; + this.dbInputTitle = "New Hdfs"; + console.log("create db"); + + } else { + this.dbInput = this.editDb; + this.dbInputTitle = "Edit " + this.editDb.name; + this.defaultDbType = this.dbInput.dbTypeId; + console.log("edit db"); + } } passBack() { - this.db = this.tempDb; - this.passEntry.emit(this.db); + this.spinner.show(); + if (this.dbInput.name == '' || this.dbInput.name == undefined) { + return false; + } + this.editDb = this.dbInput; + this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value; + console.log(this.editDb, "db"); + this.passEntry.emit(this.editDb); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css index d6d32ca4..7752355c 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css @@ -1,19 +1,57 @@ /* -* ============LICENSE_START======================================================= -* ONAP : DataLake -* ================================================================================ -* Copyright 2019 QCT -*================================================================================= -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* ============LICENSE_END========================================================= + Copyright (C) 2019 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. + 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. */ +.row-wrapper{ + display: flex; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.row-half-item{ + width: 45%; +} +.row-half-item2{ + width: 50%; +} +.usual-item{ + margin-left: 2%; +} +.usual-item2{ + margin-left: 6.5%; +} +input::-webkit-input-placeholder { + font-size: 12px; + color: #999999 !important; +} +input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: 12px; + color: #999999 !important; +} +input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: 12px; + color: #999999 !important; +} +input::-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: 12px; + color: #999999 !important; +} + +.input_style { + width: 200px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html index 48dc0516..b58b6d2d 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html @@ -1,33 +1,26 @@ + Copyright (C) 2019 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. + 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. +-->
-
+
- - +
-
@@ -36,86 +29,99 @@ limitations under the License.
-
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+ +
+
+
-
-
-
-
- +
+
+
+ +
+
+
-
-
-
-
-
- +
+
+
-
- +
+
-
-
-
-
-
-
- -
-
+
+
+
+ +
+
+
-
-
-
-
-
-
-
- -
-
+
+
+ +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
@@ -144,3 +150,4 @@ limitations under the License.
+ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts index 606a132d..765da258 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts @@ -22,12 +22,15 @@ * * @author Ekko Chang * + * @contributor Chunmeng Guo + * */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { Db } from "src/app/core/models/db.model"; import { AdminService } from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; @Component({ selector: "app-mongodb", @@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service"; }) export class MongodbComponent { @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editDb: Db; @Input() db: Db; - tempDb: Db; + @Input() dbList_length; + dbInput: Db; + dbTypeIdList: Array = ["CB", "DRUID", "ES", "HDFS", "MONGO"]; + @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; + defaultDbType: string; + dbInputTitle = ""; constructor( public activeModal: NgbActiveModal, - public adminService: AdminService + public adminService: AdminService, + private spinner: NgxSpinnerService ) { } ngOnInit() { - // cache for display - this.tempDb = new Db(); - const feed = { - name: "MongoDB", - enabled: this.db.enabled, - host: this.db.host, - port: this.db.port, - database: this.db.database, - encrypt: this.db.encrypt, - login: this.db.login, - pass: this.db.pass - }; - this.tempDb = feed; + if (this.editDb == null) { + this.dbInput = new Db(); + const feed = { + id: null, + name: this.db.name, + enabled: this.db.enabled, + host: this.db.host, + port: this.db.port, + database: this.db.database, + encrypt: this.db.encrypt, + login: this.db.login, + pass: this.db.pass, + dbTypeId: this.db.dbTypeId + } + this.dbInput = feed; + this.dbInputTitle = "New MongoDb"; + console.log("create db"); + + } else { + this.dbInput = this.editDb; + this.dbInputTitle = "Edit " + this.editDb.name; + this.defaultDbType = this.dbInput.dbTypeId; + console.log("edit db"); + } } passBack() { - this.db = this.tempDb; - this.passEntry.emit(this.db); + this.spinner.show(); + if (this.dbInput.name == '' || this.dbInput.name == undefined) { + return false; + } + this.editDb = this.dbInput; + this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value; + console.log(this.editDb, "db"); + this.passEntry.emit(this.editDb); + setTimeout(() => { + this.spinner.hide(); + }, 500); } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database.component.html b/components/datalake-handler/admin/src/src/app/views/database/database.component.html index 5ba0e314..faacde00 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database.component.html @@ -20,9 +20,13 @@ limitations under the License.
-
+
Home > Database Connections
+
+ +
- + + 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 436fcc22..046a57f7 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 @@ -73,5 +73,14 @@ "GROUP": "Group", "EXCLUDED_TOPICS": "Excluded topics", "TIME_OUT": "Time out(sec)", - "EDIT_KAFKA": "Edit Kafka" + "EDIT_KAFKA": "Edit Kafka", + "NEW_DB": "New Database", + "DB_TYPE": "DbType", + "NEW_DRUID": "New Druid", + "NEW_ELASTICSEARCH": "New Elasticsearch", + "NEW_COUCHBASE": "New Couchbase", + "NEW_MONGODB": "New MongoDB", + "NEW_HDFS": "New Hdfs", + "SECURE_COMMUNICATION": "Secure Communication", + "DB_TYPE": "DbType" } -- 2.16.6