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" },
{ 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 },
];
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";
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: [
KafkaComponent,
KafkaListComponent,
NewKafkaModalComponent,
- EditKafkaModalComponent
+ EditKafkaModalComponent,
+ ToolsComponent,
+ ModalToolsComponent,
+ ToolAddModalComponent
],
imports: [
BrowserModule,
ModalDemoComponent,
KafkaComponent,
NewKafkaModalComponent,
- EditKafkaModalComponent
+ EditKafkaModalComponent,
+ ToolAddModalComponent,
+ ModalToolsComponent
]
})
export class AppModule {}
<i *ngIf="this.text==='search'" class="fa fa-search"></i>
<i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
<i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
+ <i *ngIf="this.text==='cog'" class="fas fa-cog fa-xs" aria-hidden="true"></i>
</span>
</button>
<!-- icon type buttons -->
-<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2">
+<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2" (click)="buttonClick(this.text)">
<i *ngIf="this.text==='search'" class="fa fa-search"></i>
<i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
<i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
-</button>
\ No newline at end of file
+ <i *ngIf="this.text==='cog'" class="fas fa-cog fa-xs" aria-hidden="true"></i>
+</button>
*
* @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',
@Input() text: string;
@Input() style: string;
@Input() color: string;
+ @Output() btnAction = new EventEmitter<object>()
buttonstyle: number;
buttoncolor: number;
constructor() { }
}
}
+ buttonClick(string) {
+ this.btnAction.emit(string);
+ }
}
<li class="nav-item">
<a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
- routerLink="/dashboard-setting/dashboard-list"
- >
+ routerLink="/tools">
<i class="fas fa-external-link-alt" aria-hidden="true"> </i>
{{"SIDEBAR.DASHBOARDLIST" | translate}}
</a>
</app-button>
</span>
<span *ngIf="column.icon&&column.icon.length!==0">
- <app-button [text]="column.icon" [style]="'icon'" [color]="'dark'">
+ <app-button [text]="column.icon" [style]="'icon'" [color]="'dark'" (btnAction)="tableAction($event, row.id)">
</app-button>
</span>
</ng-template>
</ngx-datatable>
</div>
-</div>
\ No newline at end of file
+</div>
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+
+/**
+ * @contributor Chunmeng Guo
+ */
@Component({
selector: 'app-table',
export class TableComponent implements OnInit {
@Input() columns: Array<any> = [];
@Input() data: Array<any> = [];
-
+ @Output() btnTableAction = new EventEmitter<object>()
loadingIndicator: boolean = false;
template_list: Array<any> = [];
ngOnInit() {
}
+
+ tableAction($event, actionId: number) {
+ let passValueArr: Array<any> = [];
+ passValueArr.push($event);
+ passValueArr.push(actionId);
+ this.btnTableAction.emit(passValueArr);
+ }
}
--- /dev/null
+/*
+ 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;
+}
--- /dev/null
+<!--
+ 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.
+-->
+
+<div class="p-1">
+ <div class="modal-header pb-0 border-0">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-12">
+ <label class="dl-h3">{{ this.toolInputTitle }}</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <hr>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="modal-body border-0">
+ <div class="container">
+
+ <div class="form-group row row-wrapper">
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+ </div>
+ <div>
+ <input [(ngModel)]="this.toolInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
+ </div>
+ </div>
+
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+ </div>
+ <div>
+ <label class="dl-switch">
+ <input [(ngModel)]="this.toolInput.enabled" id="switch" type="checkbox" />
+ <span class="dl-slider round"></span>
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-group row row-wrapper">
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
+ </div>
+ <div>
+ <input [(ngModel)]="this.toolInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
+ </div>
+ </div>
+
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
+ </div>
+ <div>
+ <input [(ngModel)]="this.toolInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
+ </div>
+ </div>
+ </div>
+
+ <div class="form-group row row-wrapper">
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+ </div>
+ <div>
+ <input [(ngModel)]="this.toolInput.login" class="form-control dl-input-text input_style" type="text" placeholder="login" required="required" />
+ </div>
+ </div>
+
+ <div class="row-half-item usual-item">
+ <div>
+ <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+ </div>
+ <div>
+ <input [(ngModel)]="this.toolInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="modal-footer border-0 pt-0 pb-2">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6 p-0">
+
+ </div>
+ <div class="col-md-3 p-1">
+ <span>
+ <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+ Save
+ </button>
+ </span>
+ </div>
+ <div class="col-md-3 p-1">
+ <span>
+ <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+ Cancel
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
--- /dev/null
+/*
+ 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<ModalToolsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ModalToolsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalToolsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+/*
+ 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<any> = 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);
+ }
+
+}
--- /dev/null
+/*
+ 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;
+}
--- /dev/null
+<!--
+ 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.
+-->
+
+<div class="p-0">
+ <div class="modal-header pb-0 border-0">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-12">
+ <label class="dl-h3">{{ 'NEW_TOOL' | translate }}</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <hr/>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-body p-0">
+ <div class="container-fluid">
+ <div class="tab-content mb-auto" id="v-pills-tabContent">
+ <!-- All -->
+ <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
+ <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
+ <a class="nav-link" (click)="this.clickItem('Kibana')" data-toggle="pill" role="tab"
+ aria-selected="true">Kibana</a>
+ <a class="nav-link" (click)="this.clickItem('Superset')" data-toggle="pill" role="tab"
+ aria-selected="true">Superset</a>
+ </div>
+ </div>
+ </div>
+ <div class="d-flex mt-auto justify-content-end p-3">
+ <div class="p-1 col-sm-3">
+ <span>
+ <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+ Next
+ </button>
+ </span>
+ </div>
+ <div class="p-1 col-sm-3">
+ <span>
+ <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+ Cancel
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
--- /dev/null
+/*
+ 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<ToolAddModalComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ToolAddModalComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ToolAddModalComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+/*
+ 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<any> = 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;
+ }
+ }
+ }
+
+}
--- /dev/null
+/*
+ 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;
+}
--- /dev/null
+<!--
+ 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.
+-->
+
+<div class="row">
+ <div class="col-md-12 pb-2 path">
+ Home > Tools
+ </div>
+ <div class="col-md-12">
+ <div class="topic-list-panel">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="d-flex justify-content-end p-2">
+ <!-- Search bar -->
+ <div class="p-1">
+ <div class="input-group">
+ <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
+ (keyup)="this.updateFilter($event.target.value)" />
+ <div class="input-group-append">
+ <button type="button" class="btn dl-btn-dark">
+ <i class="fa fa-search"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <!-- button -->
+ <div class="p-1">
+ <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModalDemo()"></app-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- datatable -->
+ <div class="row">
+ <div class="col-md-12">
+ <app-table [data]="toolsList" [columns]="toolsColumns" (btnTableAction)="dataAction($event)">
+ </app-table>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
--- /dev/null
+/*
+ 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<ToolsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ToolsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ToolsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+/*
+ 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<any> = [];
+ toolsList: Array<any> = [];
+ 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();
+ }
+ );
+ })
+
+ }
+}
"TOPICS": "Topics",
"DATABASE": "Database",
"DASHBOARD": "Portal Setting",
- "DASHBOARDLIST": "Portal",
+ "DASHBOARDLIST": "Tools",
"TEMPLATE": "Design",
"ABOUT": "About"
},
"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"
}
Code Review / dcaegen2 / services.git / commitdiff