From f5c092d00691458060c24b37d2e09d5816001f88 Mon Sep 17 00:00:00 2001 From: ZhangZihao Date: Wed, 13 Nov 2019 10:27:04 +0800 Subject: tools code Change-Id: Ic562e7689255ce06dfdb793e38fab077b7cf3641 Issue-ID: DCAEGEN2-1877 Signed-off-by: ZhangZihao --- .../admin/src/src/app/app-routing.module.ts | 5 +- .../admin/src/src/app/app.module.ts | 19 ++- .../shared/components/Button/button.component.html | 6 +- .../shared/components/Button/button.component.ts | 8 +- .../shared/layout/sidebar/sidebar.component.html | 3 +- .../app/shared/modules/table/table.component.html | 4 +- .../app/shared/modules/table/table.component.ts | 15 +- .../tools/modal-tools/modal-tools.component.css | 58 +++++++ .../tools/modal-tools/modal-tools.component.html | 125 ++++++++++++++ .../modal-tools/modal-tools.component.spec.ts | 47 ++++++ .../tools/modal-tools/modal-tools.component.ts | 98 +++++++++++ .../tool-add-modal/tool-add-modal.component.css | 34 ++++ .../tool-add-modal/tool-add-modal.component.html | 63 +++++++ .../tool-add-modal.component.spec.ts | 47 ++++++ .../tool-add-modal/tool-add-modal.component.ts | 123 ++++++++++++++ .../src/src/app/views/tools/tools.component.css | 21 +++ .../src/src/app/views/tools/tools.component.html | 58 +++++++ .../src/app/views/tools/tools.component.spec.ts | 47 ++++++ .../src/src/app/views/tools/tools.component.ts | 184 +++++++++++++++++++++ .../admin/src/src/assets/i18n/en-us.json | 6 +- 20 files changed, 951 insertions(+), 20 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tools.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tools.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts (limited to 'components/datalake-handler/admin') diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts index 71c11201..ae2f9b6e 100644 --- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts +++ b/components/datalake-handler/admin/src/src/app/app-routing.module.ts @@ -35,9 +35,8 @@ import { KafkaComponent } from "./views/kafka/kafka.component"; import { TopicsComponent } from "./views/topics/topics.component"; import { DatabaseComponent } from "./views/database/database.component"; import { AboutComponent } from "./views/about/about.component"; -import { DashboardSettingComponent } from './views/dashboard-setting/dashboard-setting.component'; -import { DashboardListComponent } from './views/dashboard-setting/dashboard-list/dashboard-list.component'; import { TemplateComponent } from './views/dashboard-setting/template/template.component'; +import {ToolsComponent} from "./views/tools/tools.component"; const routes: Routes = [ { path: "", redirectTo: "/feeder", pathMatch: "full" }, @@ -47,7 +46,7 @@ const routes: Routes = [ { path: "topics", component: TopicsComponent }, { path: "database", component: DatabaseComponent }, { path: "about", component: AboutComponent }, - { path: 'dashboard-setting/dashboard-list', component: DashboardListComponent }, + { path: 'tools', component: ToolsComponent }, { path: 'dashboard-setting/template', component: TemplateComponent }, ]; 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 3c52716c..927f229a 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -65,6 +65,12 @@ import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdf import { DatabaseAddModalComponent } from "./views/database/database-list/database-add-modal/database-add-modal.component"; import { ElasticsearchComponent } from "./views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component"; import { DruidComponent } from "./views/database/database-list/dbs-modal/druid/druid.component"; +import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component'; +import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component'; +import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component'; +import { ToolsComponent } from './views/tools/tools.component'; +import { ModalToolsComponent } from './views/tools/modal-tools/modal-tools.component'; +import { ToolAddModalComponent } from './views/tools/tool-add-modal/tool-add-modal.component'; // Modals import { TopicDetailModalComponent } from "./views/topics/topic-list/topic-detail-modal/topic-detail-modal.component"; @@ -94,10 +100,6 @@ import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component import { KafkaComponent } from './views/kafka/kafka.component'; // Angular SVG Icon import { AngularSvgIconModule } from "angular-svg-icon"; -import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component'; -import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component'; -import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component'; - @NgModule({ declarations: [ @@ -139,7 +141,10 @@ import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-mod KafkaComponent, KafkaListComponent, NewKafkaModalComponent, - EditKafkaModalComponent + EditKafkaModalComponent, + ToolsComponent, + ModalToolsComponent, + ToolAddModalComponent ], imports: [ BrowserModule, @@ -178,7 +183,9 @@ import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-mod ModalDemoComponent, KafkaComponent, NewKafkaModalComponent, - EditKafkaModalComponent + EditKafkaModalComponent, + ToolAddModalComponent, + ModalToolsComponent ] }) export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html index 3e753df3..7986886a 100644 --- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html @@ -15,12 +15,14 @@ + - \ No newline at end of file + + diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts index b01260e9..c78bfe51 100644 --- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts @@ -20,9 +20,11 @@ * * @author Xu Ran * + * @contributor Chunmeng Guo + * */ -import { Component, OnInit, Input } from '@angular/core'; +import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'app-button', @@ -42,6 +44,7 @@ export class ButtonComponent implements OnInit { @Input() text: string; @Input() style: string; @Input() color: string; + @Output() btnAction = new EventEmitter() buttonstyle: number; buttoncolor: number; constructor() { } @@ -72,4 +75,7 @@ export class ButtonComponent implements OnInit { } } + buttonClick(string) { + this.btnAction.emit(string); + } } diff --git a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html index 42835a54..2e463883 100644 --- a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html @@ -59,8 +59,7 @@ limitations under the License.
  • + routerLink="/tools"> {{"SIDEBAR.DASHBOARDLIST" | translate}} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html index e37065bc..80be23dd 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html @@ -19,7 +19,7 @@ - + @@ -37,4 +37,4 @@ - \ No newline at end of file + diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts index 933582a4..9c69e125 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts @@ -1,4 +1,8 @@ -import { Component, OnInit, Input } from '@angular/core'; +import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; + +/** + * @contributor Chunmeng Guo + */ @Component({ selector: 'app-table', @@ -8,7 +12,7 @@ import { Component, OnInit, Input } from '@angular/core'; export class TableComponent implements OnInit { @Input() columns: Array = []; @Input() data: Array = []; - + @Output() btnTableAction = new EventEmitter() loadingIndicator: boolean = false; template_list: Array = []; @@ -27,4 +31,11 @@ export class TableComponent implements OnInit { ngOnInit() { } + + tableAction($event, actionId: number) { + let passValueArr: Array = []; + passValueArr.push($event); + passValueArr.push(actionId); + this.btnTableAction.emit(passValueArr); + } } diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css new file mode 100644 index 00000000..1d234f73 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css @@ -0,0 +1,58 @@ +/* + 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/tools/modal-tools/modal-tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html new file mode 100644 index 00000000..0b0b4622 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html @@ -0,0 +1,125 @@ + + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    +
    diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts new file mode 100644 index 00000000..44c6e2ce --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts @@ -0,0 +1,47 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModalToolsComponent } from './modal-tools.component'; + +describe('ModalToolsComponent', () => { + let component: ModalToolsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModalToolsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalToolsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts new file mode 100644 index 00000000..8ffeaadf --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts @@ -0,0 +1,98 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Db} from "src/app/core/models/db.model"; +import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; +import {AdminService} from "src/app/core/services/admin.service"; +import {NgxSpinnerService} from "ngx-spinner"; + +@Component({ + selector: 'app-modal-tools', + templateUrl: './modal-tools.component.html', + styleUrls: ['./modal-tools.component.css'] +}) +export class ModalToolsComponent implements OnInit { + + @Output() passEntry: EventEmitter = new EventEmitter(); + @Input() editTool: Db; + @Input() tool: Db; + @Input() toolList_length; + toolInput: Db; + d_dbTypeId: string = ""; + + defaultDbType: string; + toolInputTitle = ""; + data: string; + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private spinner: NgxSpinnerService + ) { } + + ngOnInit() { + if (this.editTool == null) { + this.toolInput = new Db(); + const feed = { + id: null, + name: this.tool.name, + enabled: this.tool.enabled, + host: this.tool.host, + port: this.tool.port, + database: this.tool.database, + encrypt: this.tool.encrypt, + login: this.tool.login, + pass: this.tool.pass, + dbTypeId: this.tool.dbTypeId + } + this.toolInput = feed; + this.toolInputTitle = this.data === "Kibana" ? "New Kibana" : "New Superset"; + console.log("create db"); + + } else { + this.toolInput = this.editTool; + this.toolInputTitle = "Edit " + this.editTool.name; + this.defaultDbType = this.toolInput.dbTypeId; + console.log("edit db"); + } + } + + passBack() { + this.spinner.show(); + if (this.toolInput.name == '' || this.toolInput.name == undefined) { + return false; + } + this.editTool = this.toolInput; + if (this.data == '' || this.data == undefined) { + this.editTool.dbTypeId = this.toolInput.dbTypeId; + } else { + this.editTool.dbTypeId = this.data === "Kibana" ? "KIBANA" : "SUPERSET"; + } + this.editTool.encrypt = false; + console.log(this.editTool, "editTool"); + this.passEntry.emit(this.editTool); + setTimeout(() => { + this.spinner.hide(); + }, 500); + } + +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css new file mode 100644 index 00000000..b55b3001 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css @@ -0,0 +1,34 @@ +/* + 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. +*/ + +.nav-pills .nav-link.active, +.nav-pills .nav-link:hover { + color: #ffffff; + background-color: #5DBEBB; +} + +.nav-link { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + color: #313449; + text-align: left; + border-radius: 0px; +} + +.nav-pills .show>.nav-link { + background-color: #FFFFFF; +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html new file mode 100644 index 00000000..2169325f --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html @@ -0,0 +1,63 @@ + + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    +
    diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts new file mode 100644 index 00000000..cabc951e --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts @@ -0,0 +1,47 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolAddModalComponent } from './tool-add-modal.component'; + +describe('ToolAddModalComponent', () => { + let component: ToolAddModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ToolAddModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolAddModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts new file mode 100644 index 00000000..25087d80 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts @@ -0,0 +1,123 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {Db} from "src/app/core/models/db.model"; +import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap"; +import {NgxSpinnerService} from "ngx-spinner"; +import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import {RestApiService} from "src/app/core/services/rest-api.service"; +import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component"; + +@Component({ + selector: 'app-tool-add-modal', + templateUrl: './tool-add-modal.component.html', + styleUrls: ['./tool-add-modal.component.css'] +}) +export class ToolAddModalComponent implements OnInit { + + @Output() passEntry: EventEmitter = new EventEmitter(); + seletedItem: string = ""; + toolList: any = []; + loading: Boolean = true; + toolNew: Db; + tool_NewBody: Db; + constructor( + public activeModal: NgbActiveModal, + private spinner: NgxSpinnerService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private dbApiService: RestApiService + ) { } + + ngOnInit() { + } + + clickItem(name: string) { + this.seletedItem = name; + } + + passBack() { + console.log(this.seletedItem, "next"); + this.openNewModal(this.seletedItem); + } + + newTool(modalRef) { + this.toolNew = new Db(); + this.tool_NewBody = new Db(); + modalRef.componentInstance.tool = this.tool_NewBody; + modalRef.componentInstance.toolList_length = this.toolList.length; + modalRef.componentInstance.passEntry.subscribe(receivedEntry => { + this.tool_NewBody = receivedEntry; + this.dbApiService + .createDb(this.tool_NewBody) + .subscribe( + res => { + this.spinner.hide(); + if (res.statusCode == 200) { + this.toolNew = res.returnBody; + this.toolList.push(this.toolNew); + this.toolList = [...this.toolList]; + 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) { + let modalRef; + + switch (name) { + case "Kibana": { + modalRef = this.modalService.open(ModalToolsComponent, { + size: "lg", + centered: true + }); + modalRef.componentInstance.data = name; + this.newTool(modalRef); + break; + } + case "Superset": { + modalRef = this.modalService.open(ModalToolsComponent, { + size: "lg", + centered: true + }); + modalRef.componentInstance.data = name; + this.newTool(modalRef); + break; + } + default: { + break; + } + } + } + +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css new file mode 100644 index 00000000..2fabd8a0 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css @@ -0,0 +1,21 @@ +/* + 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. +*/ + +.topic-list-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html new file mode 100644 index 00000000..c55fa463 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html @@ -0,0 +1,58 @@ + + +
    +
    + Home > Tools +
    +
    +
    +
    +
    +
    + +
    +
    + +
    + +
    +
    +
    + + +
    + +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    +
    +
    + + + diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts new file mode 100644 index 00000000..6c02dd8c --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts @@ -0,0 +1,47 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolsComponent } from './tools.component'; + +describe('ToolsComponent', () => { + let component: ToolsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ToolsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..ebe33e49 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts @@ -0,0 +1,184 @@ +/* + 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. +*/ + +/** + * + * @author Chunmeng Guo + * + */ + +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"; + +@Component({ + selector: 'app-tools', + templateUrl: './tools.component.html', + styleUrls: ['./tools.component.css'] +}) +export class ToolsComponent implements OnInit { + + toolsColumns: Array = []; + toolsList: Array = []; + dbs: Db[] = []; + toolNew: Db; + loading: Boolean = true; + flag: Boolean = false; + + @ViewChild("searchText") searchText: ElementRef; + + constructor( + private adminService: AdminService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private dbApiService: RestApiService, + ) { + this.adminService.setTitle("SIDEBAR.DASHBOARDLIST"); + this.initData().then(data => { }); + } + + ngOnInit() { + this.toolsColumns = [ + { + name: "STATUS", + width: "50", + dataIndex: "enabled" + }, + { + name: "NAME", + width: "220", + dataIndex: "name" + }, + { + name: "DB_TYPE", + width: "220", + dataIndex: "dbTypeId" + }, + { + name: "", + width: "5", + dataIndex: "", + icon: "trash" + }, + { + name: "", + width: "5", + dataIndex: "", + icon: "cog" + } + ]; + } + + async initData() { + this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise(); + } + + updateFilter(searchValue) { + 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 + }); + } + + dataAction($event) { + if($event[0] == "trash"){ + console.log($event, "tools 中触发执行删除操作"); + this.deleteToolModel($event[1]); + }else { + console.log($event, "tools 中触发执行修改操作"); + this.updateToolModel($event[1]); + } + } + + 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"); + this.initData(); + } + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }); + } + + updateToolModel(id: number) { + const modalRef = this.modalService.open(ModalToolsComponent, { + size: "lg", + centered: true + }); + 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"); + this.initData(); + } + modalRef.close(); + }, + err => { + this.notificationService.error(err); + modalRef.close(); + } + ); + }) + + } +} 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 046a57f7..05730d9d 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 @@ -5,7 +5,7 @@ "TOPICS": "Topics", "DATABASE": "Database", "DASHBOARD": "Portal Setting", - "DASHBOARDLIST": "Portal", + "DASHBOARDLIST": "Tools", "TEMPLATE": "Design", "ABOUT": "About" }, @@ -82,5 +82,7 @@ "NEW_MONGODB": "New MongoDB", "NEW_HDFS": "New Hdfs", "SECURE_COMMUNICATION": "Secure Communication", - "DB_TYPE": "DbType" + "DB_TYPE": "DbType", + "NEW_TOOL": "New Tool", + "NEW_KIBANA": "New Kibana" } -- cgit 1.2.3-korg