diff options
99 files changed, 1956 insertions, 6361 deletions
diff --git a/components/bbs-event-processor/pom.xml b/components/bbs-event-processor/pom.xml index 5e89971a..85c8cf46 100644 --- a/components/bbs-event-processor/pom.xml +++ b/components/bbs-event-processor/pom.xml @@ -42,6 +42,9 @@ <dependency.dir.location>${project.build.directory}/${dependency.dir.name}</dependency.dir.location> <docker.image.name>onap/${project.groupId}.${project.artifactId}</docker.image.name> <maven.build.timestamp.format>yyyyMMdd'T'HHmmss</maven.build.timestamp.format> + <sonar.coverage.jacoco.xmlReportPaths> + ${project.reporting.outputDirectory}/jacoco-ut/jacoco.xml + </sonar.coverage.jacoco.xmlReportPaths> </properties> <dependencyManagement> diff --git a/components/datalake-handler/admin/pom.xml b/components/datalake-handler/admin/pom.xml index cc90d270..509d40a8 100644 --- a/components/datalake-handler/admin/pom.xml +++ b/components/datalake-handler/admin/pom.xml @@ -13,8 +13,31 @@ <groupId>org.onap.dcaegen2.services.components.datalake-handler</groupId> <artifactId>admin</artifactId> <packaging>pom</packaging> + <properties> + <swagger.version>2.9.2</swagger.version> + <dockerfile-maven.version>1.4.5</dockerfile-maven.version> + <docker.image.path>onap/org.onap.dcaegen2.services.datalakeadminui</docker.image.path> + </properties> <name>DataLake Admin</name> - - - + <build> + <plugins> + <plugin> + <groupId>com.spotify</groupId> + <artifactId>dockerfile-maven-plugin</artifactId> + <version>${dockerfile-maven.version}</version> + <configuration> + <repository>${onap.nexus.dockerregistry.daily}/${docker.image.path}</repository> + <tag>${project.version}</tag> + <dockerfile>Dockerfile</dockerfile> + </configuration> + <dependencies> + <dependency> + <groupId>javax.activation</groupId> + <artifactId>javax.activation-api</artifactId> + <version>1.2.0</version> + </dependency> + </dependencies> + </plugin> + </plugins> + </build> </project> 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 ddc0c10c..94ce52e0 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -28,83 +28,66 @@ import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; - -import { AppRoutingModule } from "./app-routing.module"; -import { AppComponent } from "./app.component"; - -import { HeaderComponent } from "./shared/layout/header/header.component"; -import { SidebarComponent } from "./shared/layout/sidebar/sidebar.component"; - -import { FeederComponent } from "./views/feeder/feeder.component"; -import { TopicsComponent } from "./views/topics/topics.component"; -import { DatabaseComponent } from "./views/database/database.component"; -import { TopicListComponent } from "./views/topics/topic-list/topic-list.component"; - -// Service -import { AdminService } from "./core/services/admin.service"; -import { RestApiService } from "./core/services/rest-api.service"; -import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; - -// i18n import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; - +import { MatTabsModule } from "@angular/material"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { HttpClientModule } from "@angular/common/http"; +import { HttpClient } from "@angular/common/http"; export function createLoader(http: HttpClient) { return new TranslateHttpLoader(http); } +import { NgxDatatableModule } from "@swimlane/ngx-datatable"; -// REST API -import { HttpClientModule } from "@angular/common/http"; -import { HttpClient } from "@angular/common/http"; +import { AppRoutingModule } from "./app-routing.module"; +import { AppComponent } from "./app.component"; +// DataLake pages +import { FeederComponent } from "./views/feeder/feeder.component"; +import { TopicsComponent } from "./views/topics/topics.component"; +import { TopicListComponent } from "./views/topics/topic-list/topic-list.component"; +import { DatabaseComponent } from "./views/database/database.component"; import { DatabaseListComponent } from "./views/database/database-list/database-list.component"; -import { NgxDatatableModule } from "@swimlane/ngx-datatable"; -import { CouchbaseComponent } from "./views/database/database-list/dbs-modal/couchbase/couchbase.component"; -import { MongodbComponent } from "./views/database/database-list/dbs-modal/mongodb/mongodb.component"; -import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdfs.component"; -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 { KafkaComponent } from "./views/kafka/kafka.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 { TopicConfigModalComponent } from "./views/topics/topic-list/topic-config-modal/topic-config-modal.component"; -import { ToastrNotificationComponent } from "./shared/components/toastr-notification/toastr-notification.component"; -import { AlertComponent } from "./shared/components/alert/alert.component"; -import { AboutComponent } from "./views/about/about.component"; - -// Loading spinner -import { NgxSpinnerModule } from "ngx-spinner"; 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 { CreateDashboardComponent } from "./views/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component"; +import { TemplateComponent } from "./views/dashboard-setting/template/template.component"; import { TemplateListComponent } from "./views/dashboard-setting/template/template-list/template-list.component"; -import { NewTemplateModalComponent } from "./views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component"; -import { EditTemplateModalComponent } from "./views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component"; -import { NewTopicModelComponent } from "./views/topics/topic-list/new-topic-model/new-topic-model.component"; +import { AboutComponent } from "./views/about/about.component"; import { TestComponent } from "./views/test/test.component"; -import { ModalComponent } from "./shared/modules/modal/modal.component"; + +// Services +import { AdminService } from "./core/services/admin.service"; +import { RestApiService } from "./core/services/rest-api.service"; +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; + +// Modals +import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component"; +import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; +import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component"; +import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component"; +import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component"; +import { TemplateModalComponent } from "./views/dashboard-setting/template/template-list/template-modal/template-modal.component"; + +// Shared modules +import { HeaderComponent } from "./shared/layout/header/header.component"; +import { SidebarComponent } from "./shared/layout/sidebar/sidebar.component"; import { TableComponent } from "./shared/modules/table/table.component"; import { SearchComponent } from "./shared/modules/search/search.component"; import { CardComponent } from "./shared/modules/card/card.component"; import { ButtonComponent } from "./shared/components/Button/button.component"; -import { ModalDirective } from "./shared/modules/modal/modal.directive"; -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 { IconComponent } from "./shared/components/icon/icon.component"; +import { NgxSpinnerModule } from "ngx-spinner"; +import { ModalComponent } from "./shared/modules/modal/modal.component"; +import { ModalDirective } from "./shared/modules/modal/modal.directive"; +import { ToastrNotificationComponent } from "./shared/components/toastr-notification/toastr-notification.component"; +import { AlertComponent } from "./shared/components/alert/alert.component"; -import { MatTabsModule } from "@angular/material"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; -import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; +// Others @NgModule({ declarations: [ @@ -116,14 +99,6 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic DatabaseComponent, TopicListComponent, DatabaseListComponent, - CouchbaseComponent, - MongodbComponent, - HdfsComponent, - DatabaseAddModalComponent, - ElasticsearchComponent, - DruidComponent, - TopicDetailModalComponent, - TopicConfigModalComponent, ToastrNotificationComponent, AlertComponent, AboutComponent, @@ -132,9 +107,6 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic CreateDashboardComponent, TemplateComponent, TemplateListComponent, - NewTemplateModalComponent, - EditTemplateModalComponent, - NewTopicModelComponent, TestComponent, ModalComponent, TableComponent, @@ -145,13 +117,13 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic ModalDemoComponent, KafkaComponent, KafkaListComponent, - NewKafkaModalComponent, - EditKafkaModalComponent, ToolsComponent, - ModalToolsComponent, - ToolAddModalComponent, IconComponent, - TopicModalComponent + TopicModalComponent, + KafkaModalComponent, + DbModalComponent, + ToolModalComponent, + TemplateModalComponent ], imports: [ BrowserModule, @@ -176,26 +148,15 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic bootstrap: [AppComponent], entryComponents: [ AlertComponent, - DatabaseAddModalComponent, - CouchbaseComponent, - DruidComponent, - ElasticsearchComponent, - MongodbComponent, - HdfsComponent, - TopicDetailModalComponent, - TopicConfigModalComponent, - NewTopicModelComponent, CreateDashboardComponent, - NewTemplateModalComponent, - EditTemplateModalComponent, ModalComponent, ModalDemoComponent, KafkaComponent, - NewKafkaModalComponent, - EditKafkaModalComponent, - ToolAddModalComponent, - ModalToolsComponent, - TopicModalComponent + TopicModalComponent, + KafkaModalComponent, + DbModalComponent, + ToolModalComponent, + TemplateModalComponent ] }) export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts index 3de8f213..eea91ade 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts @@ -25,16 +25,23 @@ */ export class Db { - id: number; - name: string; - enabled: boolean; - host: string; - port: number; - database: string; - encrypt: boolean; - login: string; - pass: string; - dbTypeId: string; + public id: number; + public name: string; + public enabled: boolean; + public host: string; + public port: number; + public database: string; + public encrypt: boolean; + public login: string; + public pass: string; + public dbTypeId: string; // for UI display - checkedToSave: boolean; + public checkedToSave: boolean; +} + +export class DbType { + public id: string; + public name: string; + public defaultPort: number; + public tool: boolean; } diff --git a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts index 34f283fb..2b1803f3 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts @@ -15,20 +15,21 @@ */ export class Kafka { - id: number; - name: string; - enabled: boolean; - brokerList: string; - zooKeeper: string; - group: string; - secure: boolean; - login: string; - pass: string; - securityProtocol: string; - includedTopic: string; - excludedTopic: string; - consumerCount: number; - timeout: number; + public id: number; + public name: string; + public enabled: boolean; + public brokerList: string; + public zooKeeper: string; + public group: string; + public secure: boolean; + public login: string; + public pass: string; + public securityProtocol: string; + public includedTopic: string; + public excludedTopic: string; + public consumerCount: number; + public timeout: number; // for UI display - checkedToSave: boolean; + public checkedToSave: boolean; + public iconPath: string; } diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts index 533068fd..b2401aa6 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,13 +15,13 @@ */ export class Template { - id: number; - name: string; - submitted: boolean; - body: string; - note: string; - topicName: string; - designType: string; - designTypeName: string; - dbs: any; + public id: number; + public name: string; + public submitted: boolean; + public body: string; + public note: string; + public topicName: string; + public designType: string; + public designTypeName: string; + public dbs: Array<string>; } diff --git a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts index 8e126a0d..307f51e9 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -47,4 +47,11 @@ export class AdminService { onKeyPressNumber(data: any) { return (data.target.value = data.target.value.replace(/[^0-9.]/g, "")); } + + onKeyPressSymbol(data: any) { + return (data.target.value = data.target.value.replace( + /[~`!#$%\^&*+=\-\[\]\\';,/{}()|\\":<>\?@.]/g, + "" + )); + } } 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 98eef9ab..d1dcd63e 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts @@ -32,7 +32,7 @@ import { map, catchError, tap, retry } from "rxjs/operators"; import { throwError } from "rxjs"; import { Topic } from "src/app/core/models/topic.model"; -import { Db } from "src/app/core/models/db.model"; +import { Db, DbType } from "src/app/core/models/db.model"; import { Template } from "src/app/core/models/template.model"; import { Dashboard } from "src/app/core/models/dashboard.model"; import { Kafka } from "../models/kafka.model"; @@ -142,7 +142,7 @@ export class RestApiService { } /* - Database + Database and tools */ public getAllDbs(): Observable<Db[]> { return this.http @@ -150,41 +150,61 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - getDbEncryptList(flag): Observable<any> { + public getAllTools(): Observable<Db[]> { return this.http - .get(prefix + "dbs/list?isDb=" + flag) - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); - } - - getDbList(): Observable<any> { - return this.http - .get(prefix + "dbs") - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + .get<Db[]>(prefix + "dbs/list?isDb=false") + .pipe(retry(1), catchError(this.handleError)); } - getDbDetail(id): Observable<any> { + public getDbTypes(): Observable<DbType[]> { return this.http - .get(prefix + "dbs/" + id) - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + .get<DbType[]>(prefix + "dbs/dbtypes") + .pipe(retry(1), catchError(this.handleError)); } - deleteDb(id): Observable<any> { - return this.http.delete(prefix + "dbs/" + id).pipe( + public deleteDb(id: string | number): Observable<Db> { + return this.http.delete<Db>(prefix + "dbs/" + id).pipe( //online retry(1), - map(this.extractData2), + tap(_ => console.log(`deleted db id=${id}`)), catchError(this.handleError) ); } - updateDb(d: Db): Observable<any> { - return this.http.put(prefix + "dbs", d).pipe( + public updateDb(db: Db): Observable<Db> { + return this.http.put<Db>(prefix + "dbs/" + db.id, db).pipe( retry(1), tap(_ => this.extractData), catchError(this.handleError) ); } + public addDb(db: Db): Observable<Db> { + return this.http.post<Db>(prefix + "dbs", db).pipe( + retry(1), + tap(_ => console.log(`add db name=${db.name}`)), + catchError(this.handleError) + ); + } + + getDbEncryptList(flag): Observable<any> { + return this.http + .get(prefix + "dbs/list?isDb=" + flag) + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + + getDbList(): Observable<any> { + return this.http + .get(prefix + "dbs") + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + + getDbDetail(id): Observable<any> { + return this.http + .get(prefix + "dbs/" + id) + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + createDb(d: Db): Observable<any> { return this.http.post(prefix + "dbs", d).pipe( retry(1), @@ -255,71 +275,55 @@ export class RestApiService { } /* - Template + Template */ - getTemplateAll(): Observable<any> { - return this.http.get(prefix + "designs/").pipe( - //onlin - retry(1), - map(this.extractData), - catchError(this.handleError) - ); - } - - getTempDbList(id): Observable<any> { + public getAllTemplate(): Observable<Template[]> { return this.http - .get(prefix + "dbs/idAndName/" + id) - .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + .get<Template[]>(prefix + "designs/") + .pipe(retry(1), catchError(this.handleError)); } - createNewTemplate(t: Template): Observable<any> { - return this.http.post(prefix + "designs", t).pipe( + public addTemplate(t: Template): Observable<Template> { + return this.http.post<Template>(prefix + "designs", t).pipe( retry(1), - tap(_ => this.extractData), + tap(_ => console.log(`add template name=${t.name}`)), catchError(this.handleError) ); } - updateNewTemplate(t: Template): Observable<any> { - let id = t.id; - return this.http.put(prefix + "designs/" + id, t).pipe( + public updateTemplate(t: Template): Observable<Template> { + return this.http.put<Template>(prefix + "designs/" + t.id, t).pipe( retry(1), tap(_ => this.extractData), catchError(this.handleError) ); } - // getTopicName(): Observable<any> { - // return this.http.get(prefix + "topics").pipe( //onlin - // retry(1), - // map(this.extractData), - // catchError(this.handleError) - // ); - // } - - getTemplateTypeName(): Observable<any> { - return this.http.get(prefix + "designTypes").pipe( - //onlin + public deleteTemplate(id: number): Observable<Template> { + return this.http.delete<Template>(prefix + "designs/" + id).pipe( retry(1), - map(this.extractData), + tap(_ => console.log(`deleted template id=${id}`)), catchError(this.handleError) ); } - DeleteTemplate(id): Observable<any> { - return this.http.delete(prefix + "designs/" + id).pipe( - //online - retry(1), - map(this.extractData2), - catchError(this.handleError) - ); + getTempDbList(id): Observable<any> { + return this.http + .get(prefix + "dbs/idAndName/" + id) + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); } - deployTemplateKibana(id, body): Observable<any> { - body.submitted = true; - return this.http.post(prefix + "designs/deploy/" + id, body).pipe( - //online + + public getTemplateDesignType(): Observable<any> { + return this.http + .get(prefix + "designTypes") + .pipe(retry(1), map(this.extractData), catchError(this.handleError)); + } + + public deployTemplateKibana(id: number, data: Template): Observable<any> { + data.submitted = true; + return this.http.post(prefix + "designs/deploy/" + id, data).pipe( retry(1), - map(this.extractData2), + tap(_ => console.log(`deploy template id=${data.id}`)), catchError(this.handleError) ); } @@ -339,34 +343,26 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - getAllKafkaList(): Observable<any> { - return this.http - .get<any>(prefix + "kafkas") - .pipe(retry(1), catchError(this.handleError)); - } - - deleteKafka(id): Observable<any> { - return this.http.delete(prefix + "kafkas/" + id).pipe( - //online + public updateKafka(k: Kafka): Observable<Kafka> { + return this.http.put<Kafka>(prefix + "kafkas/" + k.id, k).pipe( retry(1), - map(this.extractData2), + tap(_ => this.extractData), catchError(this.handleError) ); } - createNewKafka(k: Kafka): Observable<any> { - return this.http.post(prefix + "kafkas", k).pipe( + public addKafka(k: Kafka): Observable<Kafka> { + return this.http.post<Kafka>(prefix + "kafkas", k).pipe( retry(1), tap(_ => this.extractData), catchError(this.handleError) ); } - updateKafka(k: Kafka): Observable<any> { - let id = k.id; - return this.http.put(prefix + "kafkas/" + id, k).pipe( + public deleteKafka(id: string | number): Observable<Kafka> { + return this.http.delete<Kafka>(prefix + "kafkas/" + id).pipe( retry(1), - tap(_ => this.extractData), + tap(_ => console.log(`deleted kafka id=${id}`)), catchError(this.handleError) ); } diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css index 4b76e13c..7340ac85 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ -* Copyright 2019 QCT +* Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -36,3 +36,7 @@ font-weight: 600; font-size: 16px; } + +.card-panel .add-style { + cursor: pointer; +} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html index 7b8d865b..101b7fc5 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html @@ -2,7 +2,7 @@ ============LICENSE_START======================================================= ONAP : DataLake ================================================================================ -Copyright 2019 QCT +Copyright 2019 - 2020 QCT ================================================================================= Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -17,47 +17,51 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END========================================================= --> -<div class="card-panel d-flex flex-column" (click)="cardClick()"> - <div class="d-flex flex-row p-2"> +<div class="card-panel d-flex flex-column"> + <div class="d-flex flex-row"> <div class="dl-h4 title mr-auto ml-3 mt-2">{{ this.title }}</div> - <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown" data-boundary="window"> + <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown mr-1 mt-1" data-boundary="window"> + <a class="badge badge-light action-icon-dropdown" data-toggle="dropdown" style="cursor: pointer"> - <i class="fas fa-ellipsis-h fa-2x dl-icon-enable"></i> + <i class="m-2 fas fa-ellipsis-h fa-2x dl-icon-enable"></i> </a> + + <div class="dropdown-menu action-icon-btn"> - <button class="dropdown-item" type="button" (click)="cardMoreAction('edit')"> - {{ 'EDIT' | translate }} + <button class="dropdown-item" type="button" (click)="cardMoreClickAction('edit')"> + {{ "EDIT" | translate }} </button> - <button class="dropdown-item" type="button" (click)="cardMoreAction('delete')"> - {{ 'DELETE' | translate }} + <button class="dropdown-item" type="button" (click)="cardMoreClickAction('delete')"> + {{ "DELETE" | translate }} </button> </div> </div> </div> - <div class="mt-auto align-self-center p-2"> + <div class="mt-auto align-self-center"> <!-- show icon --> - <div *ngIf="this.iconPath"> - <span [ngSwitch]="this.iconSize"> - <span *ngSwitchCase="'sm'"> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':80 }"></svg-icon> - </span> - <span *ngSwitchCase="'lg'"> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':180 }"></svg-icon> - </span> - <span *ngSwitchDefault> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':150 }"></svg-icon> - </span> - </span> + <div *ngIf="this.iconPath" class="add-style" (click)="cardClickAction()"> + <div [ngSwitch]=" this.iconSize"> + <div *ngSwitchCase="'sm'"> + <img src="{{ this.iconPath }}" style="width: 60px; height:60px;"> + </div> + <div *ngSwitchCase="'md'"> + <img src="{{ this.iconPath }}" style="width: 100px; height:100px;"> + </div> + <div *ngSwitchCase="'lg'"> + <img src="{{ this.iconPath }}" style="width: 140px; height:140px;"> + </div> + </div> </div> + <!-- show string --> <div *ngIf="this.content" class="dl-h1"> {{ this.content }} </div> </div> - <div class="infoname align-self-center mt-auto p-2"> + <div class="infoname align-self-center mt-auto pb-2"> {{ this.subcontent }} </div> </div> diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts index 9be0b84a..792aa8cc 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -23,7 +23,7 @@ * @author Ekko Chang * */ -import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-card", @@ -38,19 +38,18 @@ export class CardComponent implements OnInit { @Input() modifiable: boolean; @Input() iconSize: string[] = ["sm", "md", "lg"]; - @Output() cardAction = new EventEmitter<object>(); - @Output() edit = new EventEmitter<object>(); + @Output() cardClick = new EventEmitter<object>(); + @Output() cardMoreActionClick = new EventEmitter<object>(); - constructor() {} + constructor() { } - ngOnInit() {} + ngOnInit() { } - cardClick() { - this.cardAction.emit(); + cardClickAction() { + this.cardClick.emit(); } - cardMoreAction(type) { - this.edit.emit(type); + cardMoreClickAction(action: any) { + this.cardMoreActionClick.emit(action); } - } 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 d4162ee6..5c19aa0d 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 @@ -51,7 +51,8 @@ limitations under the License. <!-- display button with text --> <span *ngIf="column.textButton && column.textButton.length !== 0"> - <app-button [text]="column.textButton" [style]="'inline'" [color]="'dark'"></app-button> + <app-button [text]="column.textButton" [style]="'inline'" [color]="'dark'" + (click)="tableAction(column.action, row.id)"></app-button> </span> <!-- display button with icon --> diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html deleted file mode 100644 index 9e2bde5e..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html +++ /dev/null @@ -1,139 +0,0 @@ -<!-- - 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">{{ templateInputTitle }}</label> - <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i> - </div> - </div> - <div class="row"> - <div class="col-md-12"> - <hr> - </div> - </div> - </div> - </div> - <div class="modal-body border-0"> - <div class="container-fluid"> - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label> - </div> - <div> - <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" - type="text" placeholder="Username" /> - </div> - </div> - <div class="row-half-item upload-item"> - <div> - <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label> - </div> - <div class="upload-item-button"> - <input type="file" id="f-file" (change)="this.jsReadFiles()" /> - <label for="f-file" class="upload-item-content-button"> - <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer"> - {{ 'FIELUPLOAD' | translate }} - </button> - </label> - <span style="margin-left: 15px;"> - <i class="fa fa-file" style="margin-right: 5px" *ngIf="this.fileName"></i>{{this.fileName}}</span> - </div> - </div> - </div> - - <div class="form-group"> - <div> - <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label> - </div> - <div> - <textarea #templatebody [(ngModel)]="this.templateInput.body" - class="form-control dl-input-text upload-item-content-body" placeholder="Put the design here..." - rows="3"></textarea> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label> - </div> - <div> - <select #templatetype class="custom-select dl-input-text" id="selDataFormat" disabled> - <option *ngFor="let item of templatetypedata" [selected]="item.name === defaultDesigntype"> - {{item.name}}</option> - </select> - </div> - </div> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label> - </div> - <div> - <select #topic class="custom-select dl-input-text" id="selDataFormat"> - <option *ngFor="let item of topicname" [selected]="item === defaultTopicname">{{item}}</option> - </select> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row-half-item"> - <label class="dl-emphasis1">{{ 'SINK' | translate }}</label> - </div> - - <div class="input-group row-quarter-item" *ngFor="let db of dbList"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chk_{{ db }}" type="checkbox" [checked]="templateInput.dbs.includes(+db.key)" - (change)="this.updateSelectedDB($event, db)" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chk_{{ db }}"> - {{ db.name }} - </label> - </div> - </div> - </div> - </div> - - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <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>
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts deleted file mode 100644 index de3dc540..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - 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. -*/ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditTemplateModalComponent } from './edit-template-modal.component'; - -describe('EditTemplateModalComponent', () => { - let component: EditTemplateModalComponent; - let fixture: ComponentFixture<EditTemplateModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ EditTemplateModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(EditTemplateModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts deleted file mode 100644 index 6d89a372..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts +++ /dev/null @@ -1,166 +0,0 @@ -/* - 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. -*/ -import { - Component, - OnInit, - Input, - Output, - EventEmitter, - ViewChild, - ElementRef -} from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -import { Template } from "src/app/core/models/template.model"; - -// Loading spinner -import { NgxSpinnerService } from "ngx-spinner"; - -@Component({ - selector: 'app-edit-template-modal', - templateUrl: './edit-template-modal.component.html', - styleUrls: ['./edit-template-modal.component.css'] -}) -export class EditTemplateModalComponent implements OnInit { - @Input() edittemplate: Template; - templateInput: Template; - defaultDesigntype: String; - defaultTopicname: String; - templatetypedata: Array<any> = []; - topicname: Array<any> = []; - dbList: Array<any> = []; - dbId: string = ""; - tempSeletedDbs: any = []; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - - @ViewChild("templatetype") templatetype: ElementRef; - @ViewChild("topic") topic: ElementRef; - - constructor( - public activeModal: NgbActiveModal, - public dashboardApiService: RestApiService, - private spinner: NgxSpinnerService, - ) { } - - inputtemplateName = null; - templateInputTitle = ""; - fileName = null; - - ngOnInit() { - // cache for display - this.templateInput = new Template(); - const feed = { - id: this.edittemplate.id, - name: this.edittemplate.name, - submitted: this.edittemplate.submitted, - body: this.edittemplate.body, - note: this.edittemplate.note, - topicName: this.edittemplate.topicName, - designType: this.edittemplate.designType, - designTypeName: this.edittemplate.designTypeName, - dbs: this.edittemplate.dbs, - }; - this.templateInput = feed; - this.templateInputTitle = "" + this.edittemplate.name; - this.tempSeletedDbs = this.templateInput.dbs.map(item => { return Number(item) }); - - this.getTopicName(); - this.getTemplateTypeName(); - } - getTopicName() { - this.dashboardApiService.getTopicsFromFeeder().subscribe(data => { - this.topicname = data; - }); - } - - getDbList() { - this.templatetypedata.map(item => { - if (item.name === this.defaultDesigntype) { - this.dbId = item.id; - } - }) - this.dashboardApiService.getTempDbList(this.dbId).subscribe(data => { - Object.keys(data).map(item => { - this.dbList.push({ key: item, name: data[item] }) - }) - }); - } - - updateSelectedDB(event: any, name: any) { - if (event.target.checked) { - if (!this.tempSeletedDbs.find(db => db === name)) { - this.tempSeletedDbs.push(Number(name.key)); - } - } else { - const index = this.tempSeletedDbs.indexOf(+name.key, 0); - if (index > -1) { - this.tempSeletedDbs.splice(index, 1); - } - } - } - - getTemplateTypeName() { - this.dashboardApiService.getTemplateTypeName().subscribe(data => { - this.templatetypedata = data; - this.getDefaultOptions(); - }); - } - - getDefaultOptions() { - this.templatetypedata.map(item => { - if (item.id === this.templateInput.designType) { - return this.defaultDesigntype = item.name; - } - }); - this.defaultTopicname = this.templateInput.topicName; - this.getDbList(); - } - - jsReadFiles() { - var thiss = this; - var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0]; - this.fileName = file.name; - var reader = new FileReader(); - reader.onload = function () { - thiss.templateInput.body = String(this.result); - } - reader.readAsText(file); - } - - passBack() { - this.spinner.show(); - if (this.templateInput.name == '' || this.templateInput.name == undefined) { - return false; - } - this.edittemplate = this.templateInput; - // this.templatetypedata.map(item => { - // if (item.name === this.templatetype.nativeElement.value) { - // return this.edittemplate.designType = item.id; - // } - // }); - this.edittemplate.designType = this.templatetypedata.filter(item => { - return item.name === this.templatetype.nativeElement.value; - })[0].id || ""; - - this.edittemplate.designTypeName = this.templatetype.nativeElement.value; - this.edittemplate.topicName = this.topic.nativeElement.value; - this.edittemplate.dbs = this.tempSeletedDbs; - this.passEntry.emit(this.edittemplate); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css deleted file mode 100644 index 701fcff6..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css +++ /dev/null @@ -1,45 +0,0 @@ -/* - 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%; -} -.usual-item{ - margin-left: 2%; -} -.upload-item{ - margin-left: 5%; -} -.upload-item-content-button{ - width:35%; -} -.upload-item-content-body{ - width: 95%; - min-height: 300px!important; -} -#f-file{ - position: absolute; - /* width: 100%; */ - /* height: 90%; */ - opacity: 0; - cursor: pointer; -} diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html deleted file mode 100644 index f538d036..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html +++ /dev/null @@ -1,142 +0,0 @@ -<!-- - 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">{{ "NEW_TEMPLATE" | translate }}</label> - <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i> - </div> - </div> - <div class="row"> - <div class="col-md-12"> - <hr> - </div> - </div> - </div> - </div> - - <div class="modal-body border-0"> - <div class="container-fluid"> - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label> - </div> - <div> - <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" - type="text" name="inputtemplateName" placeholder="Username" required="required" /> - </div> - </div> - <div class="row-half-item upload-item"> - <div> - <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label> - </div> - <div class="upload-item-button"> - <input type="file" id="f-file" (change)="this.jsReadFiles()" /> - <label for="f-file" class="upload-item-content-button"> - <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer"> - {{ 'FIELUPLOAD' | translate }} - </button> - </label> - <span style="margin-left: 15px;"> - <i class="fa fa-file" style="margin-right: 5px" *ngIf="this.fileName"></i>{{this.fileName}}</span> - </div> - </div> - </div> - - <div class="form-group"> - <div> - <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label> - </div> - <div> - <textarea #templatebody [(ngModel)]="this.templateInput.body" - class="form-control dl-input-text upload-item-content-body" placeholder="Put the design here..." - rows="3"></textarea> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label> - </div> - <div> - <select #templatetype class="custom-select dl-input-text" (change)="this.selectType($event)"> - <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]" - [attr.designType]="[item.designType]">{{item.name}}</option> - </select> - </div> - </div> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label> - </div> - <div> - <select #topic class="custom-select dl-input-text"> - <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option> - </select> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row-half-item"> - <label class="dl-emphasis1">{{ 'SINK' | translate }}</label> - </div> - - <div class="input-group row-quarter-item" *ngFor="let db of dbList"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chk_{{ db }}" type="checkbox" [checked]="templateInput.dbs.includes(db)" - (change)="this.updateSelectedDB($event, db)" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chk_{{ db }}"> - {{ db.name }} - </label> - </div> - - </div> - - </div> - </div> - - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <div class="row"> - <div class="col-md-7 p-0"> - </div> - <div class="col-md-2 p-1"> - <span> - <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()"> - Save - </button> - </span> - </div> - <div class="col-md-2 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>
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts deleted file mode 100644 index 29df2b1a..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - 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. -*/ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NewTemplateModalComponent } from './new-template-modal.component'; - -describe('NewTemplateModalComponent', () => { - let component: NewTemplateModalComponent; - let fixture: ComponentFixture<NewTemplateModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NewTemplateModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NewTemplateModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts deleted file mode 100644 index 06b2ff84..00000000 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts +++ /dev/null @@ -1,164 +0,0 @@ -/* - 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. -*/ -import { - Component, - OnInit, - Input, - Output, - EventEmitter, - ViewChild, - ElementRef -} from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -// Loading spinner -import { NgxSpinnerService } from "ngx-spinner"; - -import { Template } from "src/app/core/models/template.model"; - -@Component({ - selector: 'app-new-template-modal', - templateUrl: './new-template-modal.component.html', - styleUrls: ['./new-template-modal.component.css'] -}) -export class NewTemplateModalComponent implements OnInit { - @Input() template: Template; - @Input() templatelist_length; - templateInput: Template - templatetypedata: Array<any> = []; - dbId: string = ""; - topicname: Array<any> = []; - dbList: Array<any> = []; - tempSeletedDbs: any = []; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @ViewChild("templatetype") templatetype: ElementRef; - @ViewChild("topic") topic: ElementRef; - - constructor( - public activeModal: NgbActiveModal, - public dashboardApiService: RestApiService, - private spinner: NgxSpinnerService, - ) { } - inputtemplateName = null; - templatebody = null; - fileName = null; - - ngOnInit() { - this.getTopicName(); - this.getTemplateTypeName(); - - // cache for display - this.templateInput = new Template(); - const feed = { - id: null, - name: this.template.name, - submitted: this.template.submitted, - body: this.template.body, - note: this.template.note, - topicName: this.template.topicName, - designType: this.template.designType, - designTypeName: this.template.designTypeName, - dbs: [], - }; - this.templateInput = feed; - } - getTopicName() { - this.dashboardApiService.getTopicsFromFeeder().subscribe(data => { - this.topicname = data; - }); - } - - getDbList() { - if (this.dbId === "") { - this.dbId = this.templatetypedata[0].id - } - this.dashboardApiService.getTempDbList(this.dbId).subscribe(data => { - Object.keys(data).map(item => { - this.dbList.push({ key: item, name: data[item] }) - }) - }); - } - - getTemplateTypeName() { - this.dashboardApiService.getTemplateTypeName().subscribe(data => { - this.templatetypedata = data; - this.getDbList(); - }); - } - - updateSelectedDB(event: any, name: any) { - if (event.target.checked) { - if (!this.tempSeletedDbs.find(db => db === name)) { - this.tempSeletedDbs.push(name.key); - } - } else { - const index = this.tempSeletedDbs.indexOf(name.key, 0); - if (index > -1) { - this.tempSeletedDbs.splice(index, 1); - } - } - } - - jsReadFiles() { - var thiss = this; - var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0]; - this.fileName = file.name; - var reader = new FileReader(); - reader.onload = function () { - // console.log(this.result, "this.result"); - thiss.templateInput.body = String(this.result); - } - reader.readAsText(file); - } - - selectType(e) { - this.dbList = []; - this.templatetypedata.map(item => { - if (item.name === e.target.value) { - this.dbId = item.id; - this.getDbList(); - } - }) - } - - passBack() { - this.spinner.show(); - if (this.templateInput.name == '' || this.templateInput.name == undefined) { - return false; - } - this.template = this.templateInput; - - // this.templatetypedata.map(item => { - // if (item.name === this.templatetype.nativeElement.value) { - // return this.template.designType = item.id; - // } - // }) - - this.template.designType = this.templatetypedata.filter(item => { - return item.name === this.templatetype.nativeElement.value; - })[0].id || ""; - - this.template.designTypeName = this.templatetype.nativeElement.value; - this.template.topicName = this.topic.nativeElement.value; - this.template.dbs = this.tempSeletedDbs; - this.template.submitted = false; - this.template.note = ""; - this.passEntry.emit(this.template); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html index 4a93ec65..3ea7d883 100644 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,7 +13,8 @@ See the License for the specific language governing permissions and limitations under the License. --> -<div class="topic-list-panel"> + +<div class="table-panel"> <div class="row"> <div class="col-md-12"> <div class="d-flex justify-content-end p-2"> @@ -22,91 +23,21 @@ <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"> - <button class="btn dl-btn-dark" (click)="newTemplateModal();"> - {{ "NEW_TEMPLATE" | translate }} - </button> + <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')"> + </app-button> </div> </div> </div> </div> + <!-- datatable --> <div class="row"> <div class="col-md-12"> - <ngx-datatable #mytemlate class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40" - [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" - [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)"> - - <!--<ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"--> - <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">--> - <!--<div>--> - <!--<ng-template let-row="row">--> - <!--<span>{{ row.id }}</span>--> - <!--</ng-template>--> - <!--</div>--> - <!--</ngx-datatable-column>--> - - <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.name }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column [width]="180" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.designTypeName }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column [width]="220" name="{{ 'TOPICS_NAME' | translate }}" prop="topic"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.topicName }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column [width]="20" name="{{ 'DEPLOY_TO_DASHBOARD' | translate }}" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <div> - <ng-template let-row="row" ngx-datatable-cell-template> - <span (click)="this.deployTemplate(row.id);" class="dl-btn-dark" - style="cursor: pointer"> {{ 'DEPLOY' | translate }} </span> - </ng-template> - </div> - </ngx-datatable-column> - <ngx-datatable-column [width]="10" name="" sortable="false" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span> - <button class="btn action-icon-setting" (click)="this.deleteTemplateModel(row.id);"> - <i class="fas fa-trash-alt fa-xs"></i> - </button> - </span> - </ng-template> - </ngx-datatable-column> - - <!-- <ngx-datatable-footer> - <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" - let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible"> - <div class="page-count"> - total: {{ rowCount.toLocaleString() }} - </div> - <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'" - [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" - [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)" - (change)="topicTable.onFooterPage($event)"> - </datatable-pager> - </ng-template> - </ngx-datatable-footer> --> - </ngx-datatable> + <app-table [data]="templates" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts index de76a9d6..552a0ccd 100644 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,244 +13,265 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; + +/** + * + * @constructor Ekko Chang + */ + +import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { RestApiService } from "src/app/core/services/rest-api.service"; -import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { Template } from "src/app/core/models/template.model"; -// Loading spinner -import { NgxSpinnerService } from "ngx-spinner"; -// modal -import { NewTemplateModalComponent } from "./new-template-modal/new-template-modal.component"; -import { EditTemplateModalComponent } from "./edit-template-modal/edit-template-modal.component"; import { AlertComponent } from "src/app/shared/components/alert/alert.component"; -// notify +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { TemplateModalComponent } from "src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component"; import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +import { NgxSpinnerService } from "ngx-spinner"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ - selector: 'app-template-list', - templateUrl: './template-list.component.html', - styleUrls: ['./template-list.component.css'] + selector: "app-template-list", + templateUrl: "./template-list.component.html", + styleUrls: ["./template-list.component.css"] }) export class TemplateListComponent { - template_list: any = []; - templates: Template[] = []; - temps: Template[] = []; - Template_New: Template; - Template_Newbody: Template; - dashboardDeteleModelShow = true; - loadingIndicator: boolean = true; - mesgNoData = { - emptyMessage: ` - <div class="d-flex justify-content-center"> - <div class="p-2"> - <label class="dl-nodata">No Data</label> - </div> - </div> - ` - }; + columns: Array<any> = []; + templates: Array<Template> = []; + t_temp: Array<any> = []; // cache for templates + @ViewChild("searchText") searchText: ElementRef; + constructor( - private modalService: NgbModal, - private dashboardApiService: RestApiService, - private spinner: NgxSpinnerService, private notificationService: ToastrNotificationService, - ) { - setTimeout(() => { - this.loadingIndicator = false; - }, 5000); - - this.initData().then(data => { - this.initTemplateList(this.template_list).then( - data => { - // for cache of datatable - this.temps = [...data]; - this.templates = data; - setTimeout(() => { - this.spinner.hide(); - }, 500); - } - ); - }); - } + private modalService: NgbModal, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} ngOnInit() { this.spinner.show(); - } - async initData() { - this.template_list = []; - this.template_list = await this.getTemplateList(); - this.Template_New = new Template(); - this.Template_Newbody = new Template(); - return true; - } + let t_templates: Array<Template> = []; + const get_templates = this.restApiService.getAllTemplate().pipe( + mergeMap(templates => from(templates)), + map(template => { + t_templates.push(template); + }) + ); - getTemplateList() { - return this.dashboardApiService.getTemplateAll().toPromise(); + forkJoin(get_templates).subscribe(data => { + this.columns = this.initColumn(); + this.templates = t_templates; + this.t_temp = [...this.templates]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); } - async initTemplateList(template_list: []) { - var t: Template[] = []; - for (var i = 0; i < template_list.length; i++) { - let data = template_list[i]; - let feed = { - id: data["id"], - name: data["name"], - submitted: data["submitted"], - body: data["body"], - note: data["note"], - topicName: data["topicName"], - designType: data["designType"], - designTypeName: data["designTypeName"], - dbs: data["dbs"], - }; - t.push(feed); - } - return t; + initColumn() { + let t_columns: Array<any> = []; + + t_columns = [ + { + headerName: "NAME", + width: "420", + sortable: true, + dataIndex: "name" + }, + { + headerName: "Type", + width: "100", + sortable: true, + dataIndex: "designTypeName" + }, + { + headerName: "Topics name", + width: "200", + sortable: true, + dataIndex: "topicName" + }, + { + headerName: "Deploy to dashboard", + width: "80", + textButton: "DEPLOY", + action: "deploy" + }, + { + width: "2", + iconButton: "cog", + action: "edit" + }, + { + width: "2", + iconButton: "trash", + action: "delete" + } + ]; + + return t_columns; } - newTemplateModal() { - const modalRef = this.modalService.open(NewTemplateModalComponent, { - windowClass: "dl-md-modal templatess", - centered: true - }); - this.Template_New = new Template(); - this.Template_Newbody = new Template(); - modalRef.componentInstance.template = this.Template_Newbody; - modalRef.componentInstance.templatelist_length = this.template_list.length; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.Template_Newbody = receivedEntry; - this.dashboardApiService - .createNewTemplate(this.Template_Newbody) - .subscribe( - res => { - if (res.statusCode == 200) { - this.Template_New = res.returnBody; - this.template_list.push(this.Template_New); - this.template_list = [...this.template_list]; - this.notificationService.success("SUCCESSFULLY_CREARED"); - } else { - this.notificationService.error("FAILED_CREARED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); + updateFilter(searchValue: string) { + const val = searchValue.toLowerCase(); + + // filter our data + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); + + // update the rows + this.templates = temp; } - onActivate(event) { - const emitType = event.type; - if (emitType == "dblclick") { - let id = event.row.id; - this.editTemplateModal(id); - } + btnTableAction(passValueArr: Array<any>) { + let action = passValueArr[0]; + let id = passValueArr[1]; - } + switch (action) { + case "edit": + this.openModal("edit", id); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteTemplate(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + case "deploy": + this.spinner.show(); + let index: number = this.templates.findIndex(d => d.id === id); + let data: Template = this.templates[index]; - editTemplateModal(id) { - const index = this.template_list.findIndex(t => t.id === id); - const modalRef = this.modalService.open(EditTemplateModalComponent, { - windowClass: "dl-md-modal templatess", - centered: true - }); - modalRef.componentInstance.edittemplate = this.template_list[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.Template_New = receivedEntry; - this.dashboardApiService - .updateNewTemplate(this.Template_New) - .subscribe( + this.restApiService.deployTemplateKibana(id, data).subscribe( res => { - if (res.statusCode == 200) { - this.template_list[index] = this.Template_New; - this.template_list = [...this.template_list]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); + setTimeout(() => { + this.spinner.hide(); + }, 500); + + let processArr = []; + Object.keys(res).map(item => + processArr.push({ name: item, status: res[item] }) + ); + + if (processArr.length > 0) { + processArr.map(item => + item.status + ? setTimeout(() => { + this.notificationService.success("Deploy_SUCCESSFULLY"); + }, 600) + : setTimeout(() => { + this.notificationService.error("Deploy_FAILED"); + }, 600) + ); } else { - this.notificationService.error("FAILED_UPDATED"); + this.notificationService.error("Deploy_FAILED"); } - modalRef.close(); }, err => { + setTimeout(() => { + this.spinner.hide(); + }, 500); this.notificationService.error(err); - modalRef.close(); } ); - }) + break; + } } - deleteTemplateModel(id: number) { - const index = this.template_list.findIndex(t => t.id === id); - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" }); - // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow; - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete database - this.dashboardApiService.DeleteTemplate(id).subscribe( - res => { - if (JSON.stringify(res).length <= 2) { - this.template_list.splice(index, 1); - this.template_list = [...this.template_list]; - this.notificationService.success("SUCCESSFULLY_DELETED"); - } else { - this.notificationService.error("FAILED_DELETED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + switch (mode) { + case "new": + let newTemplate: Template = new Template(); + newTemplate.submitted = false; + let componentNew = new ModalContentData( + TemplateModalComponent, + newTemplate + ); - } + modalRef.componentInstance.title = "NEW_TEMPLATE"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; - deployTemplate(id: number) { - const index = this.template_list.findIndex(t => t.id === id); - const body = this.template_list[index]; - this.spinner.show(); - this.dashboardApiService.deployTemplateKibana(id, body).subscribe( - res => { - this.spinner.hide(); - let processArr = [] - Object.keys(res).map(item => - processArr.push({ name: item, status: res[item] }) - ) + modalRef.componentInstance.passEntry.subscribe((data: Template) => { + newTemplate = Object.assign({}, data); + newTemplate.dbs = new Array(); + newTemplate.dbs.push(data.dbs[0]); + this.restApiService.addTemplate(newTemplate).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + case "edit": + let index: number = this.templates.findIndex(db => db.id === id); + let editTemplate: Template = this.templates[index]; + let componentEdit = new ModalContentData( + TemplateModalComponent, + editTemplate + ); - if (processArr.length !== 0) { - processArr.map(item => - item.status ? - setTimeout(() => { this.notificationService.success("Deploy_SUCCESSFULLY") }, 1000) : - setTimeout(() => { this.notificationService.error("Deploy_FAILED") }, 2000)) - } else { - this.notificationService.error("Deploy_FAILED"); - } - }, - err => { - this.spinner.hide(); - this.notificationService.error(err); - } - ); - } + modalRef.componentInstance.title = editTemplate.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; - updateFilter(searchValue) { - const val = searchValue.toLowerCase(); - // filter our data - const temps = this.temps.filter(function (d) { - return d.name.toLowerCase().indexOf(val) !== -1 || !val; - }); - // update the rows - this.template_list = temps; + modalRef.componentInstance.passEntry.subscribe((data: Template) => { + editTemplate = Object.assign({}, data); + editTemplate.dbs = new Array(); + editTemplate.dbs.push(data.dbs[0]); + this.restApiService.updateTemplate(editTemplate).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + } } - - } diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.css index 5a9cb4ef..7b5396b3 100644 --- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.css @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,30 +13,37 @@ See the License for the specific language governing permissions and limitations under the License. */ -.row-wrapper{ +.row-wrapper { display: flex; } -.row-half-item{ - width: 45%; -} -.row-quarter-item{ + +.row-quarter-item { width: 20%; margin-bottom: 15px; } -.usual-item{ + +.row-half-item { + width: 45%; +} + +.usual-item { margin-left: 2%; } -.upload-item{ + +.upload-item { margin-left: 5%; } -.upload-item-content-button{ - width:35%; + +.upload-item-content-button { + width: 35%; } -.upload-item-content-body{ + +.upload-item-content-body { width: 95%; - min-height: 300px!important; + min-height: 300px !important; } -#f-file{ + +#f-file { position: absolute; /* width: 100%; */ /* height: 90%; */ diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html new file mode 100644 index 00000000..abd9d936 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html @@ -0,0 +1,146 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 QCT +================================================================================= +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END========================================================= +--> + +<div class="container p-4"> + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "TEMPLATE_NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "FIELUPLOAD" | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input + [(ngModel)]="this.data.name" + class="form-control dl-input-text" + type="text" + /> + </div> + <div class="col-md-6"> + <div class="upload-item-button"> + <input type="file" id="f-file" (change)="this.jsReadFiles()" /> + <label for="f-file" class="upload-item-content-button"> + <button + type="button" + class="btn dl-btn-dark btn-block" + style="cursor: pointer" + > + {{ "FIELUPLOAD" | translate }} + </button> + </label> + <span style="margin-left: 15px;"> + <i + class="fa fa-file" + style="margin-right: 5px" + *ngIf="this.fileName" + ></i + >{{ this.fileName }}</span + > + </div> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-12"> + <label class="dl-emphasis1">{{ "TEMPLATE_BODY" | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-12"> + <textarea + #templatebody + [(ngModel)]="this.data.body" + class="form-control dl-input-text upload-item-content-body" + placeholder="Put the design here..." + rows="3" + ></textarea> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "TEMPLATE_TYPE" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "TOPICS_NAME" | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <select + [(ngModel)]="this.data.designType" + class="custom-select dl-input-text" + > + <option + *ngFor="let item of designTypes" + [value]="item.id" + [selected]="item.id == this.data.designType" + > + {{ item.name }} + </option> + </select> + </div> + <div class="col-md-6"> + <select + [(ngModel)]="this.data.topicName" + class="custom-select dl-input-text" + > + <option + *ngFor="let item of topics" + [value]="item.name" + [selected]="item.name == this.data.topicName" + > + {{ item.name }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "SINK" | translate }}</label> + </div> + <div class="col-md-6"></div> + </div> + <div class="row"> + <div class="col-md-6"> + <select [(ngModel)]="this.data.dbs" class="custom-select dl-input-text"> + <option + *ngFor="let item of tools" + [value]="item.id" + [selected]="item.id == this.data.dbs" + > + {{ item.name }} + </option> + </select> + </div> + <div class="col-md-6"></div> + </div> + </div> +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.spec.ts index 833fa410..4b611d57 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.spec.ts +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.spec.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,20 +20,20 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { DruidComponent } from "./druid.component"; +import { TemplateModalComponent } from "./template-modal.component"; -describe("DruidComponent", () => { - let component: DruidComponent; - let fixture: ComponentFixture<DruidComponent>; +describe("TemplateModalComponent", () => { + let component: TemplateModalComponent; + let fixture: ComponentFixture<TemplateModalComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [DruidComponent] + declarations: [TemplateModalComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(DruidComponent); + fixture = TestBed.createComponent(TemplateModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts new file mode 100644 index 00000000..20f9756c --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts @@ -0,0 +1,101 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input } from "@angular/core"; +import { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db } from "src/app/core/models/db.model"; +import { Template } from "src/app/core/models/template.model"; +import { Topic } from "src/app/core/models/topic.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-template-modal", + templateUrl: "./template-modal.component.html", + styleUrls: ["./template-modal.component.css"] +}) +export class TemplateModalComponent implements OnInit { + @Input() data: Template; + @Input() mode: string; + + designTypes: Array<any> = []; + topics: Array<Topic> = []; + tools: Array<Db> = []; + fileName: string = null; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + this.spinner.show(); + + const get_designTypes = this.restApiService.getTemplateDesignType().pipe( + mergeMap(items => from(items)), + map(item => { + this.designTypes.push(item); + }) + ); + + const get_topics = this.restApiService.getTopicList().pipe( + mergeMap(ids => from(ids)), + mergeMap(id => this.restApiService.getTopic(id)), + map(t => { + this.topics.push(t); + }) + ); + + const get_tools = this.restApiService.getAllTools().pipe( + mergeMap(tools => from(tools)), + map(tool => { + this.tools.push(tool); + }) + ); + + forkJoin(get_designTypes, get_topics, get_tools).subscribe(data => { + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); + } + + jsReadFiles() { + let thiss = this; + let file = (<HTMLInputElement>document.querySelector("#f-file")).files[0]; + this.fileName = file.name; + let reader = new FileReader(); + reader.onload = function() { + thiss.data.body = String(this.result); + }; + reader.readAsText(file); + } +} 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 deleted file mode 100644 index 21a06e98..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html +++ /dev/null @@ -1,73 +0,0 @@ -<!-- -============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========================================================= ---> - -<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_DB' | 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('Couchbase')" data-toggle="pill" role="tab" - aria-selected="true">Couchbase</a> - <a class="nav-link" (click)="this.clickItem('Druid')" data-toggle="pill" role="tab" - aria-selected="true">Druid</a> - <a class="nav-link" (click)="this.clickItem('Elasticsearch')" data-toggle="pill" role="tab" - aria-selected="true">Elasticsearch</a> - <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab" - aria-selected="true">MongoDB</a> - <a class="nav-link" (click)="this.clickItem('HDFS')" data-toggle="pill" role="tab" - aria-selected="true">HDFS</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> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts deleted file mode 100644 index bde10b2c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * ============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========================================================= - */ - -import { async, ComponentFixture, TestBed } from "@angular/core/testing"; - -import { DatabaseAddModalComponent } from "./database-add-modal.component"; - -describe("DatabaseAddModalComponent", () => { - let component: DatabaseAddModalComponent; - let fixture: ComponentFixture<DatabaseAddModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [DatabaseAddModalComponent] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DatabaseAddModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/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 deleted file mode 100644 index 30665d87..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts +++ /dev/null @@ -1,153 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./database-add-modal.component.html", - styleUrls: ["./database-add-modal.component.css"] -}) -export class DatabaseAddModalComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - seletedItem: string = ""; - 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() {} - - clickItem(name: string) { - this.seletedItem = name; - } - - passBack() { - 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.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html index db75f713..9df9e567 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,6 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. --> + <div class="topic-list-panel"> <div class="row"> <div class="col-md-12"> @@ -21,69 +22,22 @@ <div class="p-1"> <div class="input-group"> <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..." - (keyup)="this.updateFilter($event.target.value)" /> - <div class="input-group-append"> - <button type="button" class="btn dl-btn-dark"> - <i class="fa fa-search"></i> - </button> - </div> + (keyup)="this.updateFilter($event.target.value)" /> </div> </div> - <!-- button --> <div class="p-1"> - <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="newDbModal()"></app-button> + <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')"> + </app-button> </div> </div> </div> </div> + <!-- datatable --> <div class="row"> <div class="col-md-12"> - <ngx-datatable #mytemlate class="bootstrap" [rows]="dbList" [columnMode]="'force'" [headerHeight]="40" - [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" - [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)"> - <ngx-datatable-column [width]="100" name="{{ 'STATUS' | translate }}" prop="enabled" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span *ngIf="row.enabled"> - <i class="fas fa-circle dl-icon-enable fa-xs" aria-hidden="true"></i> - </span> - <span *ngIf="!row.enabled"> - <i class="fas fa-circle dl-icon-disable fa-xs" aria-hidden="true"></i> - </span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" - headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.name }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="{{ 'DB_TYPE' | translate }}" prop="topic"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span>{{ row.dbTypeId }}</span> - </ng-template> - </ngx-datatable-column> - - <ngx-datatable-column name="" sortable="false" cellClass="d-flex justify-content-center"> - <ng-template let-row="row" ngx-datatable-cell-template> - <span> - <button class="btn action-icon-setting" (click)="this.deleteDbModel(row.id);"> - <i class="fas fa-trash-alt fa-xs"></i> - </button> - </span> - <span> - <button class="btn action-icon-setting" (click)="this.updateDbModel(row.id, row.dbTypeId);"> - <i class="fas fa-cog fa-xs"></i> - </button> - </span> - </ng-template> - </ngx-datatable-column> - - </ngx-datatable> + <app-table [data]="dbs" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table> </div> </div> </div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts index ed25a707..2eb41a81 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -29,24 +29,22 @@ import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { Db } from "src/app/core/models/db.model"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; -import { DatabaseAddModalComponent } from "src/app/views/database/database-list/database-add-modal/database-add-modal.component"; -// DB modal components import { RestApiService } from "src/app/core/services/rest-api.service"; // Modal import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { DbModalComponent } from "src/app/views/database/database-list/db-modal/db-modal.component"; // Notify import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; // Loading spinner import { NgxSpinnerService } from "ngx-spinner"; -import {CouchbaseComponent} from "src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component"; -import {DruidComponent} from "src/app/views/database/database-list/dbs-modal/druid/druid.component"; -import {ElasticsearchComponent} from "src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component"; -import {MongodbComponent} from "src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component"; -import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ selector: "app-database-list", @@ -54,230 +52,192 @@ import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs styleUrls: ["./database-list.component.css"] }) export class DatabaseListComponent implements OnInit { - pageFinished: Boolean = false; - - dbList: any = []; - dbs: Db[] = []; - dbNew: Db; - db_NewBody: Db; - loading: Boolean = true; - flag: Boolean = true; - loadingIndicator: boolean = true; - - mesgNoData = { - emptyMessage: ` - <div class="d-flex justify-content-center"> - <div class="p-2"> - <label class="dl-nodata">No Data</label> - </div> - </div> - ` - }; + dbs: Array<Db> = []; // data of table + t_temp: Array<Db> = []; // cache for dbs + columns: Array<any> = []; // column of table @ViewChild("searchText") searchText: ElementRef; constructor( - private dbApiService: RestApiService, - private notificationService: ToastrNotificationService, - private modalService: NgbModal, - private spinner: NgxSpinnerService - ) { - this.initData().then(data => { - this.initDbsList(this.dbList).then(data => { - this.dbs = data; - }); - }); - } + private restApiService: RestApiService, + private notificationService: ToastrNotificationService, + private modalService: NgbModal, + private spinner: NgxSpinnerService + ) {} ngOnInit() { this.spinner.show(); - } - - async initData() { - this.dbList = []; - this.dbList = await this.getDbList(this.flag); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } - - getDbList(flag) { - return this.dbApiService.getDbEncryptList(flag).toPromise(); - - } - - async initDbsList(dbList: []) { - var d: Db[] = []; - - for (var i = 0; i < dbList.length; i++) { - let data = dbList[i]; - let feed = { - id: data["id"], - name: data["name"], - enabled: data["enabled"], - host: data["host"], - port: data["port"], - database: data["database"], - encrypt: data["encrypt"], - login: data["login"], - pass: data["pass"], - dbTypeId: data["dbTypeId"], - }; - d.push(feed); - } - return d; - } - // getDbDetail(name: string) { - // return this.restApiService.getDbDetail(name).toPromise(); - // } + let t_dbs: Array<Db> = []; - openAddModal() { - const modalRef = this.modalService.open(DatabaseAddModalComponent, { - windowClass: "dl-md-modal", - centered: true - }); + const get_dbs = this.restApiService.getAllDbs().pipe( + mergeMap(dbs => from(dbs)), + map(db => { + t_dbs.push(db); + }) + ); - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - if (receivedEntry) { - modalRef.close(); - //this.openDetailModal(receivedEntry); - } + forkJoin(get_dbs).subscribe(data => { + this.columns = this.initColumn(); + this.dbs = t_dbs; + this.t_temp = [...this.dbs]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); }); } - updateFilter(searchValue) { + updateFilter(searchValue: string) { const val = searchValue.toLowerCase(); + // filter our data - const temps = this.dbList.filter(function (d) { - return d.name.toLowerCase().indexOf(val) != -1 || !val; + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); - // update the rows - this.dbList = temps; - } - newDbModal() { - const modalRef = this.modalService.open(DatabaseAddModalComponent, { - windowClass: "dl-md-modal dbs", - centered: true - }); + // update the rows + this.dbs = temp; } - deleteDbModel(id: number) { - - console.log("delete id", id); - const index = this.dbList.findIndex(t => t.id === id); - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true - }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete db - this.dbApiService.deleteDb(id).subscribe( - res => { - console.log(res); - if (JSON.stringify(res).length <= 2) { - this.dbList.splice(index, 1); - this.dbList = [...this.dbList]; - this.initData(); - this.notificationService.success("SUCCESSFULLY_DELETED"); - - } else { - this.initData(); - this.notificationService.error("FAILED_DELETED"); - } + initColumn() { + let t_columns: Array<any> = []; + + t_columns = [ + { + headerName: "STATUS", + width: "15", + sortable: true, + dataIndex: "enabled", + icon: "status" + }, + { + headerName: "NAME", + width: "420", + sortable: true, + dataIndex: "name" + }, + { + headerName: "Type", + width: "50", + sortable: true, + dataIndex: "dbTypeId" + }, + { + headerName: "Host", + width: "100", + sortable: true, + dataIndex: "host" + }, + { + width: "2", + iconButton: "cog", + action: "edit" + }, + { + width: "2", + iconButton: "trash", + action: "delete" + } + ]; - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + return t_columns; } - updateDbModel(id: number, dbType: string) { - var modalRef; - console.log(dbType, "dbType"); - switch (dbType) { - case "CB": { - modalRef = this.modalService.open(CouchbaseComponent, { - size: "lg", - centered: true - }); - this.editDbModal(id, modalRef); + btnTableAction(passValueArr: Array<any>) { + let action = passValueArr[0]; + let id = passValueArr[1]; + + switch (action) { + case "edit": + this.openModal("edit", id); break; - } - case "DRUID": { - modalRef = this.modalService.open(DruidComponent, { - size: "lg", - centered: true + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" }); - this.editDbModal(id, modalRef); - break; - } - case "ES": { - modalRef = this.modalService.open(ElasticsearchComponent, { - size: "lg", - centered: true + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteDb(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); break; - } - case "MONGO": { - modalRef = this.modalService.open(MongodbComponent, { - size: "lg", - centered: true + } + } + + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" + }); + + switch (mode) { + case "new": + let newDB: Db = new Db(); + let componentNew = new ModalContentData(DbModalComponent, newDB); + + modalRef.componentInstance.title = "NEW_DB"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + newDB = Object.assign({}, data); + console.log(newDB.dbTypeId); + console.log(newDB); + this.restApiService.addDb(newDB).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); break; - } - case "HDFS": { - modalRef = this.modalService.open(HdfsComponent, { - size: "lg", - centered: true + case "edit": + let index: number = this.dbs.findIndex(db => db.id === id); + let editDb: Db = this.dbs[index]; + let componentEdit = new ModalContentData(DbModalComponent, editDb); + + modalRef.componentInstance.title = editDb.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + editDb = Object.assign({}, data); + this.restApiService.updateDb(editDb).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); }); - this.editDbModal(id, modalRef); - break; - } - default: { break; - } } } - - editDbModal(id: number, modalRef) { - console.log("id", id); - const index = this.dbList.findIndex(t => t.id === id); - modalRef.componentInstance.editDb = this.dbList[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.dbNew = receivedEntry; - this.dbApiService - .updateDb(this.dbNew) - .subscribe( - res => { - if (res.statusCode == 200) { - this.dbList[index] = this.dbNew; - this.dbList = [...this.dbList]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initData(); - } else { - this.notificationService.error("FAILED_UPDATED"); - this.initData(); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }) - } - - onActivate(event) { - - } } diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.css index ac205fe8..0b713d55 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.css +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.css @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ -* Copyright 2019 QCT +* Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -18,23 +18,8 @@ * ============LICENSE_END========================================================= */ - - -.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; -} +/* + * For every Angular component you write, you may define not only an HTML template, + * but also the CSS styles that go with that template, specifying any selectors, + * rules, and media queries that you need. +*/ diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html new file mode 100644 index 00000000..276b8fbc --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.html @@ -0,0 +1,128 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 QCT +================================================================================= +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END========================================================= +--> + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + <div class="col-md-6"> + + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'DB_TYPE' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <select [(ngModel)]="this.data.dbTypeId" class="custom-select dl-input-text"> + <option *ngFor="let item of dbTypes" [value]="item.id" [selected]="item.id==this.data.dbTypeId"> + {{ item.name }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'HOST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Port' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.host" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <input [(ngModel)]="this.data.port" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'DATABASE_NAME' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.database" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.encrypt" /> + <span class="dl-slider round"></span> + </label> + </div> + </div> + </div> +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.spec.ts index dafbdadc..7e48dcb1 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.spec.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,20 +20,20 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { HdfsComponent } from "./H./hdfs.component +import { DbModalComponent } from "./db-modal.component"; -describe("HdfsComponent", () => { - let component: HdfsComponent; - let fixture: ComponentFixture<HdfsComponent>; +describe("DbModalComponent", () => { + let component: DbModalComponent; + let fixture: ComponentFixture<DbModalComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [HdfsComponent] + declarations: [DbModalComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(HdfsComponent); + fixture = TestBed.createComponent(DbModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts new file mode 100644 index 00000000..b7ca5b1f --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/db-modal/db-modal.component.ts @@ -0,0 +1,74 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db, DbType } from "src/app/core/models/db.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-db-modal", + templateUrl: "./db-modal.component.html", + styleUrls: ["./db-modal.component.css"] +}) +export class DbModalComponent implements OnInit { + @Input() data: Db; + @Input() mode: string; + + dbTypes: Array<DbType> = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + // this.spinner.show(); + + // get database types + const get_dbTypes = this.restApiService.getDbTypes().pipe( + mergeMap(dbTypes => from(dbTypes)), + map(dbType => { + if (!dbType.tool) this.dbTypes.push(dbType); + }) + ); + + forkJoin(get_dbTypes).subscribe(data => { + if (this.mode === "new") { + // default value + if (this.dbTypes.length > 0) { + this.data.dbTypeId = this.dbTypes[0].id; + } + } + }); + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/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 deleted file mode 100644 index 7752355c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - 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 deleted file mode 100644 index 0eb67366..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html +++ /dev/null @@ -1,164 +0,0 @@ -<!-- - 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.dbInputTitle }}</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.dbInput.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.dbInput.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.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" 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.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> - </div> - <div class="input-group" style="width: 120px"> - <label class="input-group-text dl-input-chk-label"> - <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" 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> - 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 deleted file mode 100644 index 5c347ad0..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./couchbase.component.html", - styleUrls: ["./couchbase.component.css"] -}) -export class CouchbaseComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @Input() editDb: Db; - @Input() db: Db; - @Input() dbList_length; - dbInput: Db; - dbTypeIdList: Array<string> = ["CB"]; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - - defaultDbType: string; - dbInputTitle = ""; - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - 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.dbTypeId + "-" + this.editDb.name; - this.defaultDbType = this.dbInput.dbTypeId; - console.log("edit db"); - } - } - - passBack() { - 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 deleted file mode 100644 index 7752355c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - 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 deleted file mode 100644 index 0eb67366..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html +++ /dev/null @@ -1,164 +0,0 @@ -<!-- - 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.dbInputTitle }}</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.dbInput.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.dbInput.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.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" 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.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> - </div> - <div class="input-group" style="width: 120px"> - <label class="input-group-text dl-input-chk-label"> - <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" 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> - 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 deleted file mode 100644 index cf4027a6..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./druid.component.html", - styleUrls: ["./druid.component.css"] -}) -export class DruidComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @Input() editDb: Db; - @Input() db: Db; - @Input() dbList_length; - dbInput: Db; - dbTypeIdList: Array<string> = ["DRUID"]; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - - defaultDbType: string; - dbInputTitle = ""; - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - 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.dbTypeId + "-" + this.editDb.name; - this.defaultDbType = this.dbInput.dbTypeId; - console.log("edit db"); - } - } - - passBack() { - 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 deleted file mode 100644 index 7752355c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - 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 deleted file mode 100644 index 0eb67366..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html +++ /dev/null @@ -1,164 +0,0 @@ -<!-- - 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.dbInputTitle }}</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.dbInput.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.dbInput.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.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" 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.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> - </div> - <div class="input-group" style="width: 120px"> - <label class="input-group-text dl-input-chk-label"> - <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" 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> - diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts deleted file mode 100644 index 57798da3..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * ============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========================================================= - */ - -import { async, ComponentFixture, TestBed } from "@angular/core/testing"; - -import { ElasticsearchComponent } from "./elasticsearch.component"; - -describe("ElasticsearchComponent", () => { - let component: ElasticsearchComponent; - let fixture: ComponentFixture<ElasticsearchComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ElasticsearchComponent] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ElasticsearchComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts deleted file mode 100644 index 4331bc7e..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./elasticsearch.component.html", - styleUrls: ["./elasticsearch.component.css"] -}) -export class ElasticsearchComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @Input() editDb: Db; - @Input() db: Db; - @Input() dbList_length; - dbInput: Db; - dbTypeIdList: Array<string> = ["ES"]; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - - defaultDbType: string; - dbInputTitle = ""; - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - 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.dbTypeId + "-" + this.editDb.name; - this.defaultDbType = this.dbInput.dbTypeId; - console.log("edit db"); - } - } - - passBack() { - 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 deleted file mode 100644 index 7752355c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - 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 deleted file mode 100644 index a12165cd..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html +++ /dev/null @@ -1,144 +0,0 @@ -<!-- - 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.dbInputTitle }}</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.dbInput.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.dbInput.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.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> - </div> - <div class="input-group" style="width: 120px"> - <label class="input-group-text dl-input-chk-label"> - <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" 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> - 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 deleted file mode 100644 index f471e828..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./hdfs.component.html", - styleUrls: ["./hdfs.component.css"] -}) -export class HdfsComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @Input() editDb: Db; - @Input() db: Db; - @Input() dbList_length; - dbInput: Db; - dbTypeIdList: Array<string> = ["HDFS"]; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - - defaultDbType: string; - dbInputTitle = ""; - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - 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.dbTypeId + "-" + this.editDb.name; - this.defaultDbType = this.dbInput.dbTypeId; - console.log("edit db"); - } - } - - passBack() { - 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 deleted file mode 100644 index 7752355c..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - 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 deleted file mode 100644 index 0eb67366..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html +++ /dev/null @@ -1,164 +0,0 @@ -<!-- - 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.dbInputTitle }}</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.dbInput.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.dbInput.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.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" 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.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label> - </div> - <div class="input-group" style="width: 120px"> - <label class="input-group-text dl-input-chk-label"> - <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" 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> - 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 deleted file mode 100644 index bcd2e880..00000000 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - * @contributor Chunmeng Guo - * - */ - -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", - templateUrl: "./mongodb.component.html", - styleUrls: ["./mongodb.component.css"] -}) -export class MongodbComponent { - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - @Input() editDb: Db; - @Input() db: Db; - @Input() dbList_length; - dbInput: Db; - dbTypeIdList: Array<string> = ["MONGO"]; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - - defaultDbType: string; - dbInputTitle = ""; - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - 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.dbTypeId + "-" + this.editDb.name; - this.defaultDbType = this.dbInput.dbTypeId; - console.log("edit db"); - } - } - - passBack() { - 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/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css deleted file mode 100644 index a34ed1eb..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css +++ /dev/null @@ -1,38 +0,0 @@ -/* - 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: #0DA9E2; -} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html deleted file mode 100644 index 2a42b988..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html +++ /dev/null @@ -1,193 +0,0 @@ -<!-- - 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">{{ 'EDIT_KAFKA' | translate }}-{{ this.kafkaInputTitle }}</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-fluid"> - <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.kafkaInput.name" class="form-control dl-input-text" type="text"/> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label> - </div> - <div> - <label class="dl-switch"> - <input id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/> - <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" >{{ 'BROKER_LIST' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" type="text" 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.kafkaInput.login" class="form-control dl-input-text" type="text" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label> - </div> - <div class="input-group row-half-item2"> - <label class="input-group-text dl-input-chk-label"> - <input id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox"/> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label> - </div> - <div> - <select class="custom-select dl-input-text" > - <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label> - </div> - <div> - <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index"> - <div class="order-1 usual-item2"> - <input [(ngModel)]="field.item" class="form-control dl-input-text" type="text"/> - </div> - <div class="order-2"> - <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()"> - <i class="fa fa-plus fa-xs" aria-hidden="true"></i> - </button> - </div> - <div class="order-3"> - <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)"> - <i class="fa fa-trash fa-xs" aria-hidden="true"></i> - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <div class="row"> - <div class="col-md-7 p-0"> - </div> - <div class="col-md-2 p-1"> - <span> - <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()"> - Save - </button> - </span> - </div> - <div class="col-md-2 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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts deleted file mode 100644 index 4c24cb90..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - 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. -*/ - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditKafkaModalComponent } from './edit-kafka-modal.component'; - -describe('EditKafkaModalComponent', () => { - let component: EditKafkaModalComponent; - let fixture: ComponentFixture<EditKafkaModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ EditKafkaModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(EditKafkaModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts deleted file mode 100644 index 9f129b6e..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* - 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. -*/ - -import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; - -// Loading spinner -import { NgxSpinnerService } from "ngx-spinner"; -import {Kafka} from "../../../../core/models/kafka.model"; - -@Component({ - selector: 'app-edit-kafka-modal', - templateUrl: './edit-kafka-modal.component.html', - styleUrls: ['./edit-kafka-modal.component.css'] -}) -export class EditKafkaModalComponent implements OnInit { - @Input() editKafka: Kafka; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - kafkaInput: Kafka; - exTopicFields: Array<any> = []; - exTopicNewField: any = {}; - protocols: Array<string> = ["SASL_PLAINTEXT"]; - - constructor( - public activeModal: NgbActiveModal, - private spinner: NgxSpinnerService, - ) { } - - kafkaInputTitle = ""; - - ngOnInit() { - this.kafkaInput = this.editKafka; - if (this.kafkaInput.excludedTopic != null) { - var excludedTopics = this.kafkaInput.excludedTopic.split(","); - for (var i = 0; i < excludedTopics.length; i++) { - var data = { item: excludedTopics[i] }; - this.exTopicFields.push(data); - } - } else { - this.exTopicFields.push([]); - } - this.kafkaInputTitle = this.editKafka.name; - } - - passBack() { - this.spinner.show(); - if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) { - return false; - } - this.editKafka = this.kafkaInput; - this.passEntry.emit(this.editKafka); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } - - addExTopicField() { - this.exTopicFields.push(this.exTopicNewField); - this.exTopicNewField = {}; - } - - deleteExTopicField(index: number) { - if (this.exTopicFields.length > 1) { - this.exTopicFields.splice(index, 1); - } - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css index 1c7a3867..8b137891 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css @@ -1,42 +1 @@ -/* - 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. -*/ -.dashboard-kafka{ - padding: 0; -} -.kafka-li{ - float: left; - list-style: none; - padding: 0; - width: 23.5%; - hight: 23.5%; - margin-right: 2%; - margin-bottom: 2%; -} -li:nth-child(4n){ - margin-right: 0; -} -.add-kafka{ - cursor: pointer; -} -.kafka-list{ - padding: 0; - width: 100%; - hight: 100%; -} -.add-style{ - -} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html index ec611cc0..b0390d7d 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,18 +13,17 @@ See the License for the specific language governing permissions and limitations under the License. --> - <div class="col-md-12 dashboard-kafka"> - <ul class="kafka-list clearfix"> - <li class="add-style" *ngFor="let kafka of this.kafkas; let thisIndex=index;" class="col-md-3 kafka-li"> - <app-card [iconPath]="cardIconPathList[thisIndex]" [iconSize]="'sm'" [subcontent]="kafka.name" - [modifiable]="this.cardModifiable" (edit)="cardMoreAction($event, kafka.id)"> - </app-card> - </li> +<div class="d-flex flex-row flex-nowrap"> + <div class="col-md-3" *ngFor="let kafka of this.kafkas; let thisIndex = index"> + <app-card [iconPath]="kafka.iconPath" [iconSize]="'md'" [subcontent]="kafka.name" [modifiable]="this.cardModifiable" + (cardClick)="openModal('edit', kafka)" (cardMoreActionClick)="cardMoreClickAction($event, kafka)"> + </app-card> + </div> - <li class="col-md-3 kafka-li add-kafka"> - <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (click)="newKafkaModal()"> - </app-card> - </li> - </ul> + <div class="col-md-3"> + <app-card [iconPath]="this.cardAddiconPath" [iconSize]="'sm'" (click)="openModal('new')"> + </app-card> </div> + +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts index b8dbb0e0..46a46a02 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -16,238 +16,161 @@ /** * @author Chunmeng Guo + * @contributor Ekko Chang */ -import { Component, OnInit, ElementRef } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; import { RestApiService } from "src/app/core/services/rest-api.service"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; -import { Kafka } from "../../../core/models/kafka.model"; +import { Kafka } from "src/app/core/models/kafka.model"; // Loading spinner import { NgxSpinnerService } from "ngx-spinner"; -// notify +import { map, mergeMap } from "rxjs/operators"; +import { from, forkJoin } from "rxjs"; + +// Notify import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; -import {AlertComponent} from "../../../shared/components/alert/alert.component"; -import {NewKafkaModalComponent} from "./new-kafka-modal/new-kafka-modal.component"; -import {EditKafkaModalComponent} from "./edit-kafka-modal/edit-kafka-modal.component"; +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { KafkaModalComponent } from "src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component"; @Component({ - selector: 'app-kafka-list', - templateUrl: './kafka-list.component.html', - styleUrls: ['./kafka-list.component.css'] + selector: "app-kafka-list", + templateUrl: "./kafka-list.component.html", + styleUrls: ["./kafka-list.component.css"] }) export class KafkaListComponent implements OnInit { + kafkas: Array<Kafka> = []; - kafkaList: any = []; - kafkas: Kafka[] = []; - cardIconPath: string; - cardModifiable: boolean; - cardAddicon: string; - Kafka_New: Kafka; - Kafka_Newbody: Kafka; - cardIconPathList: any = []; - kafkaData: any = []; + // app-card parameters + cardModifiable: boolean = true; + cardAddiconPath: string = "assets/icons/add.svg"; constructor( - private kafkaApiService: RestApiService, + private restApiService: RestApiService, private notificationService: ToastrNotificationService, private modalService: NgbModal, private spinner: NgxSpinnerService - ) { - this.initList(); - } + ) {} ngOnInit() { this.spinner.show(); - this.cardModifiable = true; - this.cardAddicon = "assets/icons/add.svg"; - } - - initList() { - this.initData().then(data => { - this.initKafkasList(this.kafkaList).then(data => { - this.kafkas = data; - if (this.kafkas.length > 0) { - let a = "assets/icons/kafka_able.svg"; - let b = "assets/icons/kafka_disable.svg"; - this.cardIconPathList.splice(0,this.cardIconPathList.length); - for (let i = 0; i < this.kafkas.length; i++) { - this.cardIconPath = (this.kafkas[i].enabled == true) ? a : b; - this.cardIconPathList.push(this.cardIconPath); - } + let t_kafkas: Array<Kafka> = []; + + const get_kafkas = this.restApiService.getAllKafka().pipe( + mergeMap(ks => from(ks)), + map(k => { + if (k.enabled == true) { + k.iconPath = "assets/icons/kafka_able.svg"; + } else { + k.iconPath = "assets/icons/kafka_disable.svg"; } - console.log(this.cardIconPathList, "kafkas[]"); - }); + t_kafkas.push(k); + }) + ); + + forkJoin(get_kafkas).subscribe(data => { + this.kafkas = t_kafkas; + setTimeout(() => { + this.spinner.hide(); + }, 500); }); } - async initData() { - this.kafkaList = []; - this.kafkaList = await this.getKafkaList(); - setTimeout(() => { - this.spinner.hide(); - }, 500); - } - - getKafkaList() { - let data: any; - data = this.kafkaApiService.getAllKafkaList().toPromise(); - return data; - } - - async getKafkaDetailModal(id: number) { - this.kafkaData = []; - this.kafkaData = await this.getKafkaModal(id); - return this.kafkaData; - } - - getKafkaModal(id: number) { - return this.kafkaApiService.getKafka(id).toPromise(); - } - - async initKafkasList(kafkaList: []) { - let k: Kafka[] = []; - if (kafkaList.length > 0) { - for (let i = 0; i < kafkaList.length; i++) { - let data = kafkaList[i]; - let feed = { - id: data["id"], - name: data["name"], - enabled: data["enabled"], - brokerList: data["brokerList"], - zooKeeper: data["zooKeeper"], - group: data["group"], - secure: data["secure"], - login: data["login"], - pass: data["pass"], - securityProtocol: data["securityProtocol"], - includedTopic: data["includedTopic"], - excludedTopic: data["excludedTopic"], - consumerCount: data["consumerCount"], - timeout: data["timeout"] - }; - k.push(feed); - } + cardMoreClickAction(mode: string, k: Kafka) { + switch (mode) { + case "edit": + this.openModal("edit", k); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteKafka(k.id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; } - return k; } - deleteKafkaModel(id: number) { - const index = this.kafkaList.findIndex(t => t.id === id); - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true + openModal(mode: string, k: Kafka) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete kafka - this.kafkaApiService.deleteKafka(id).subscribe( - res => { - console.log(res); - if (JSON.stringify(res).length <= 2) { - this.kafkaList.splice(index, 1); - this.kafkaList = [...this.kafkaList]; - this.initList(); - this.notificationService.success("SUCCESSFULLY_DELETED"); - - } else { - this.initList(); - this.notificationService.error("FAILED_DELETED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + switch (mode) { + case "new": + let newKafka: Kafka; + let componentNew = new ModalContentData(KafkaModalComponent, newKafka); - } - - newKafkaModal() { - const modalRef = this.modalService.open(NewKafkaModalComponent, { - windowClass: "dl-md-modal kafkas", - centered: true - }); + modalRef.componentInstance.title = "NEW_KAFKA"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; - this.Kafka_New = new Kafka(); - this.Kafka_Newbody = new Kafka(); - modalRef.componentInstance.kafka = this.Kafka_Newbody; - modalRef.componentInstance.kafkaList_length = this.kafkaList.length; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.Kafka_Newbody = receivedEntry; - this.kafkaApiService - .createNewKafka(this.Kafka_Newbody) - .subscribe( - res => { - this.spinner.hide(); - if (res.statusCode == 200) { - this.Kafka_New = res.returnBody; - this.kafkaList.push(this.Kafka_New); - this.kafkaList = [...this.kafkaList]; - this.initList(); - this.notificationService.success("SUCCESSFULLY_CREARED"); - } else { - this.initList(); - this.notificationService.error("FAILED_CREARED"); + modalRef.componentInstance.passEntry.subscribe((data: Kafka) => { + newKafka = Object.assign({}, data); + this.restApiService.addKafka(newKafka).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); } - modalRef.close(); - }, - err => { - this.spinner.hide(); - this.notificationService.error(err); - modalRef.close(); - } + ); + modalRef.close(); + }); + break; + case "edit": + let editKafka: Kafka = k; + let componentEdit = new ModalContentData( + KafkaModalComponent, + editKafka ); - }); - } - cardMoreAction($event, id) { - - if($event == "edit"){ - this.editKafkaModal(id); - }else { - console.log($event,id); - this.deleteKafkaModel(id); - } - } + modalRef.componentInstance.title = editKafka.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; - editKafkaModal(id: number) { - this.getKafkaDetailModal(id).then(data => { - console.log("id", id); - const index = this.kafkaList.findIndex(t => t.id === id); - const modalRef = this.modalService.open(EditKafkaModalComponent, { - windowClass: "dl-md-modal kafkas", - centered: true - }); - modalRef.componentInstance.editKafka = data; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.Kafka_New = receivedEntry; - this.kafkaApiService - .updateKafka(this.Kafka_New) - .subscribe( + modalRef.componentInstance.passEntry.subscribe((data: Kafka) => { + editKafka = Object.assign({}, data); + this.restApiService.updateKafka(editKafka).subscribe( res => { - this.spinner.hide(); - if (res.statusCode == 200) { - this.kafkaList[index] = this.Kafka_New; - this.kafkaList = [...this.kafkaList]; + this.ngOnInit(); + setTimeout(() => { this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initList(); - } else { - this.notificationService.error("FAILED_UPDATED"); - } - modalRef.close(); + }, 500); }, err => { this.notificationService.error(err); - modalRef.close(); } ); - }); - }); - + modalRef.close(); + }); + break; + } } } diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css index e69de29b..e69de29b 100644 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.css +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html new file mode 100644 index 00000000..a0930958 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html @@ -0,0 +1,157 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 QCT +================================================================================= +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END========================================================= +--> + + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'BROKER_LIST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'ZOOKEEPER' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.brokerList" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.zooKeeper" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'SECURITY_PROTOCOL' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.secure" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + <select [(ngModel)]="this.data.securityProtocol" class="custom-select dl-input-text"> + <option *ngFor="let item of securityProtocol" [selected]="item == this.data.securityProtocol"> + {{ item }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'GROUP' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'TIME_OUT' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.group" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.timeout" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'EXCLUDED_TOPICS' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-9"> + <div class="d-flex row align-items-center" *ngFor="let field of extenFields; let i = index"> + <div class="col-md-8 order-1"> + <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="AAI-EVENT" type="text" + (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" /> + </div> + <div class="order-2"> + <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)"> + <i class="fa fa-plus fa-xs" aria-hidden="true"></i> + </button> + </div> + <div class="order-3"> + <button type="button" class="btn dl-icon-enable p-2" (click)="onClickDelIdField(i)"> + <i class="fa fa-trash fa-xs" aria-hidden="true"></i> + </button> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts index a9ff1b8d..c6da2218 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.spec.ts +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -18,27 +18,28 @@ * ============LICENSE_END========================================================= */ -import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MongodbComponent } from "./mongodb.component"; +import { KafkaModalComponent } from './kafka-modal.component'; -describe("MongodbComponent", () => { - let component: MongodbComponent; - let fixture: ComponentFixture<MongodbComponent>; +describe('KafkaModalComponent', () => { + let component: KafkaModalComponent; + let fixture: ComponentFixture<KafkaModalComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [MongodbComponent] - }).compileComponents(); + declarations: [ KafkaModalComponent ] + }) + .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(MongodbComponent); + fixture = TestBed.createComponent(KafkaModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); - it("should create", () => { + it('should create', () => { expect(component).toBeTruthy(); }); }); diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts new file mode 100644 index 00000000..0c747d99 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts @@ -0,0 +1,91 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input } from "@angular/core"; + +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Kafka } from "src/app/core/models/kafka.model"; + +@Component({ + selector: "app-kafka-modal", + templateUrl: "./kafka-modal.component.html", + styleUrls: ["./kafka-modal.component.css"] +}) +export class KafkaModalComponent implements OnInit { + @Input() data: Kafka; + @Input() mode: string; + + securityProtocol: Array<string> = ["None", "SASL_PLAINTEXT"]; + extenFields: Array<any> = []; + newField: any = {}; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService + ) {} + + ngOnInit() { + // Get excludedTopic field + this.extenFields = []; + if (this.data.excludedTopic != null) { + let feed = this.data.excludedTopic.split(","); + for (let i = 0; i < feed.length; i++) { + let data = { item: feed[i] }; + this.extenFields.push(data); + } + } else { + this.extenFields.push([]); + } + } + + onClickAddIdField() { + this.extenFields.push(this.newField); + this.newField = {}; + this.onChangeSaveIdField(); + } + + onClickDelIdField(index: number) { + if (this.extenFields.length > 1) { + this.extenFields.splice(index, 1); + this.onChangeSaveIdField(); + } + } + + onChangeSaveIdField() { + this.data.excludedTopic = ""; + + for (let i = 0; i < this.extenFields.length; i++) { + if (this.extenFields[i].item) { + if (this.data.excludedTopic == "") { + this.data.excludedTopic = this.extenFields[i].item; + } else { + this.data.excludedTopic += "," + this.extenFields[i].item; + } + } + } + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css deleted file mode 100644 index 7b11d9e7..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css +++ /dev/null @@ -1,53 +0,0 @@ -/* - 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; -} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html deleted file mode 100644 index 7bf81c45..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html +++ /dev/null @@ -1,193 +0,0 @@ -<!-- - 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">{{ 'NEW_KAFKA' | translate }}</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-fluid"> - <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 #k_name [(ngModel)]="this.kafkaInput.name" class="form-control dl-input-text" placeholder="" type="text"/> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label> - </div> - <div> - <label class="dl-switch"> - <input #k_enabled id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/> - <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" >{{ 'BROKER_LIST' | translate }}</label> - </div> - <div> - <input #k_brokerList [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" placeholder="0.0.0.0" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label> - </div> - <div> - <input #k_zooKeeper [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" 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 #k_login [(ngModel)]="this.kafkaInput.login" class="form-control dl-input-text" type="text" placeholder="login" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'Password' | translate }}</label> - </div> - <div> - <input #k_pass [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" placeholder="pass" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label> - </div> - <div class="input-group row-half-item2"> - <label class="input-group-text dl-input-chk-label"> - <input #k_secure id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Secure - </label> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label> - </div> - <div> - <select #k_securityProtocol class="custom-select dl-input-text" > - <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label> - </div> - <div> - <input #k_group [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" placeholder="dlgroup" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item2"> - <div> - <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label> - </div> - <div> - <input #k_timeout [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" placeholder="6" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label> - </div> - <div> - <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index"> - <div class="order-1 usual-item2"> - <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="__consumer_offsets" type="text"/> - </div> - <div class="order-2"> - <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()"> - <i class="fa fa-plus fa-xs" aria-hidden="true"></i> - </button> - </div> - <div class="order-3"> - <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)"> - <i class="fa fa-trash fa-xs" aria-hidden="true"></i> - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <div class="row"> - <div class="col-md-7 p-0"> - </div> - <div class="col-md-2 p-1"> - <span> - <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()"> - Save - </button> - </span> - </div> - <div class="col-md-2 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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts deleted file mode 100644 index e222d70d..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - 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. -*/ - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NewKafkaModalComponent } from './new-kafka-modal.component'; - -describe('NewKafkaModalComponent', () => { - let component: NewKafkaModalComponent; - let fixture: ComponentFixture<NewKafkaModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NewKafkaModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NewKafkaModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts deleted file mode 100644 index 843799df..00000000 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts +++ /dev/null @@ -1,125 +0,0 @@ -/* - 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, ElementRef, ViewChild} from '@angular/core'; - -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -import { NgxSpinnerService } from "ngx-spinner"; - -import { Kafka } from "../../../../core/models/kafka.model"; - -@Component({ - selector: 'app-new-kafka-modal', - templateUrl: './new-kafka-modal.component.html', - styleUrls: ['./new-kafka-modal.component.css'] -}) -export class NewKafkaModalComponent implements OnInit { - @Input() kafka: Kafka; - @Input() kafkaList_length; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - kafkaInput: Kafka; - exTopicFields: Array<any> = []; - exTopicNewField: any = {}; - protocols: Array<string> = ["SASL_PLAINTEXT"]; - - @ViewChild("k_name") k_name: ElementRef; - @ViewChild("k_login") k_login: ElementRef; - @ViewChild("k_pass") k_pass: ElementRef; - @ViewChild("k_enabled") k_enabled: ElementRef; - @ViewChild("k_brokerList") k_brokerList: ElementRef; - @ViewChild("k_zooKeeper") k_zooKeeper: ElementRef; - @ViewChild("k_group") k_group: ElementRef; - @ViewChild("k_secure") k_secure: ElementRef; - @ViewChild("k_securityProtocol") k_securityProtocol: ElementRef; - @ViewChild("k_includedTopic") k_includedTopic: ElementRef; - @ViewChild("k_excludedTopic") k_excludedTopic: ElementRef; - @ViewChild("k_consumerCount") k_consumerCount: ElementRef; - @ViewChild("k_timeout") k_timeout: ElementRef; - - constructor( - private activeModal: NgbActiveModal, - private kafkaApiService: RestApiService, - private spinner: NgxSpinnerService - ) { } - - ngOnInit() { - // cache for display - this.kafkaInput = new Kafka(); - const feed = { - id: null, - name: this.kafka.name, - enabled: this.kafka.enabled, - brokerList: this.kafka.brokerList, - zooKeeper: this.kafka.zooKeeper, - group: this.kafka.group, - secure: this.kafka.secure, - login: this.kafka.login, - pass: this.kafka.pass, - securityProtocol: this.kafka.securityProtocol, - includedTopic: this.kafka.includedTopic, - excludedTopic: this.kafka.excludedTopic, - consumerCount: this.kafka.consumerCount, - timeout: this.kafka.timeout - }; - this.kafkaInput = feed; - this.exTopicFields = []; - if (this.kafkaInput.excludedTopic != null) { - var feeds = this.kafkaInput.excludedTopic.split(","); - for (var i = 0; i < feeds.length; i++) { - var data = { item: feed[i] }; - this.exTopicFields.push(data); - } - } else { - this.exTopicFields.push([]); - } - } - - passBack() { - this.spinner.show(); - if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) { - return false; - } - this.kafka = this.kafkaInput; - this.kafka.securityProtocol = this.k_securityProtocol.nativeElement.value; - for (var i = 0; i < this.exTopicFields.length; i++) { - let item = this.exTopicFields[i].item; - if (i == 0) { - this.kafka.excludedTopic = item; - } else { - this.kafka.excludedTopic = this.kafka.excludedTopic + "," + item; - } - } - console.log(this.kafka); - this.passEntry.emit(this.kafka); - - } - - addExTopicField() { - this.exTopicFields.push(this.exTopicNewField); - this.exTopicNewField = {}; - } - - deleteExTopicField(index: number) { - if (this.exTopicFields.length > 1) { - this.exTopicFields.splice(index, 1); - } - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html index 549fa545..75d0e1fb 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html @@ -9,7 +9,7 @@ <app-card [title]="this.cardTitle" [content]="this.cardContent"> </app-card> <br> - <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (cardAction)="cardClick()"> + <app-card [iconPath]="assets/icons/add.svg" [iconSize]="'sm'" (cardAction)="cardClick()"> </app-card> <br> </div> 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 deleted file mode 100644 index 1d234f73..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css +++ /dev/null @@ -1,58 +0,0 @@ -/* - 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 deleted file mode 100644 index f4f9abad..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html +++ /dev/null @@ -1,147 +0,0 @@ -<!-- - 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="" 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="" 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="" 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="" required="required" /> - </div> - </div> - </div> - - <div class="form-group row row-wrapper"> - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label> - </div> - <div> - <input [(ngModel)]="this.toolInput.database" class="form-control dl-input-text input_style" type="text" required="required" /> - </div> - </div> - - <div class="row-half-item usual-item"> - <div> - <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label> - </div> - <div> - <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled> - <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option> - </select> - </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> 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 deleted file mode 100644 index 44c6e2ce..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - 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(); - }); -}); 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 deleted file mode 100644 index 87071e6b..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts +++ /dev/null @@ -1,96 +0,0 @@ -/* - 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, EventEmitter, Input, OnInit, Output, ViewChild} 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; - @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef; - dbTypeIdList: Array<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"; - this.dbTypeIdList = this.data === "Kibana" ? ["KIBANA"] : ["SUPERSET"]; - console.log("create db"); - - } else { - this.toolInput = this.editTool; - this.toolInputTitle = "Edit" + "-" + this.editTool.dbTypeId + "-" + this.editTool.name; - this.defaultDbType = this.editTool.dbTypeId; - this.dbTypeIdList = [this.editTool.dbTypeId]; - console.log("edit db"); - } - } - - passBack() { - this.spinner.show(); - if (this.toolInput.name == '' || this.toolInput.name == undefined) { - return false; - } - this.editTool = this.toolInput; - this.editTool.dbTypeId = this.d_dbTypeId.nativeElement.value; - 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 deleted file mode 100644 index b55b3001..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css +++ /dev/null @@ -1,34 +0,0 @@ -/* - 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 deleted file mode 100644 index 2169325f..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html +++ /dev/null @@ -1,63 +0,0 @@ -<!-- - 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> 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 deleted file mode 100644 index cabc951e..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - 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(); - }); -}); 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 deleted file mode 100644 index 25087d80..00000000 --- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts +++ /dev/null @@ -1,123 +0,0 @@ -/* - 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; - } - } - } - -} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css new file mode 100644 index 00000000..0b713d55 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css @@ -0,0 +1,25 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : DataLake +* ================================================================================ +* Copyright 2019 - 2020 QCT +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +/* + * For every Angular component you write, you may define not only an HTML template, + * but also the CSS styles that go with that template, specifying any selectors, + * rules, and media queries that you need. +*/ diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html new file mode 100644 index 00000000..81e3b583 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html @@ -0,0 +1,107 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 QCT +================================================================================= +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END========================================================= +--> + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + <div class="col-md-6"> + + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'TOOL_TYPE' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <select [(ngModel)]="this.data.dbTypeId" class="custom-select dl-input-text"> + <option *ngFor="let item of dbTypes" [value]="item.id" [selected]="item.id==this.data.dbTypeId"> + {{ item.name }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'HOST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Port' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.host" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-3"> + <input [(ngModel)]="this.data.port" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + +</div> diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts index e3de0b45..2f22cd68 100644 --- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.spec.ts +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,20 +20,20 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { CouchbaseComponent } from "./couchbase.component"; +import { ToolModalComponent } from "./tool-modal.component"; -describe("CouchbaseComponent", () => { - let component: CouchbaseComponent; - let fixture: ComponentFixture<CouchbaseComponent>; +describe("ToolModalComponent", () => { + let component: ToolModalComponent; + let fixture: ComponentFixture<ToolModalComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [CouchbaseComponent] + declarations: [ToolModalComponent] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(CouchbaseComponent); + fixture = TestBed.createComponent(ToolModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts new file mode 100644 index 00000000..038d7464 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts @@ -0,0 +1,74 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db, DbType } from "src/app/core/models/db.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-tool-modal", + templateUrl: "./tool-modal.component.html", + styleUrls: ["./tool-modal.component.css"] +}) +export class ToolModalComponent implements OnInit { + @Input() data: Db; + @Input() mode: string; + + dbTypes: Array<DbType> = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + // this.spinner.show(); + + // get database types + const get_dbTypes = this.restApiService.getDbTypes().pipe( + mergeMap(dbTypes => from(dbTypes)), + map(dbType => { + if (dbType.tool) this.dbTypes.push(dbType); + }) + ); + + forkJoin(get_dbTypes).subscribe(data => { + if (this.mode === "new") { + // default value + if (this.dbTypes.length > 0) { + this.data.dbTypeId = this.dbTypes[0].id; + } + } + }); + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html index c55fa463..434846c7 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +19,7 @@ Home > Tools </div> <div class="col-md-12"> - <div class="topic-list-panel"> + <div class="table-panel"> <div class="row"> <div class="col-md-12"> <div class="d-flex justify-content-end p-2"> @@ -27,32 +27,24 @@ <div class="p-1"> <div class="input-group"> <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..." - (keyup)="this.updateFilter($event.target.value)" /> - <div class="input-group-append"> - <button type="button" class="btn dl-btn-dark"> - <i class="fa fa-search"></i> - </button> - </div> + (keyup)="this.updateFilter($event.target.value)" /> </div> </div> - <!-- button --> <div class="p-1"> - <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModalDemo()"></app-button> + <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')"> + </app-button> </div> </div> </div> </div> + <!-- datatable --> <div class="row"> <div class="col-md-12"> - <app-table [data]="toolsList" [columns]="toolsColumns" (btnTableAction)="dataAction($event)"> - </app-table> + <app-table [data]="tools" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table> </div> </div> </div> </div> </div> - - - diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts index 65de6ada..a7fe3019 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -18,31 +18,35 @@ * * @author Chunmeng Guo * + * @constructor Ekko Chang */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {AdminService} from "src/app/core/services/admin.service"; -import {Db} from "src/app/core/models/db.model"; -import {RestApiService} from "src/app/core/services/rest-api.service"; -import {AlertComponent} from "src/app/shared/components/alert/alert.component"; -import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {ToolAddModalComponent} from "src/app/views/tools/tool-add-modal/tool-add-modal.component"; -import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component"; +import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db } from "src/app/core/models/db.model"; +import { RestApiService } from "src/app/core/services/rest-api.service"; + +// Modal +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ToolModalComponent } from "src/app/views/tools/tool-modal/tool-modal.component"; +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +import { NgxSpinnerService } from "ngx-spinner"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ - selector: 'app-tools', - templateUrl: './tools.component.html', - styleUrls: ['./tools.component.css'] + selector: "app-tools", + templateUrl: "./tools.component.html", + styleUrls: ["./tools.component.css"] }) export class ToolsComponent implements OnInit { - - toolsColumns: Array<any> = []; - toolsList: Array<any> = []; - dbs: Db[] = []; - toolNew: Db; - loading: Boolean = true; - flag: Boolean = false; + columns: Array<any> = []; + tools: Array<any> = []; + t_temp: Array<any> = []; // cache for tools @ViewChild("searchText") searchText: ElementRef; @@ -50,132 +54,186 @@ export class ToolsComponent implements OnInit { private adminService: AdminService, private notificationService: ToastrNotificationService, private modalService: NgbModal, - private dbApiService: RestApiService + private restApiService: RestApiService, + private spinner: NgxSpinnerService ) { this.adminService.setTitle("SIDEBAR.DASHBOARDLIST"); - this.initData().then(data => { }); + // this.initData().then(data => {}); } ngOnInit() { - this.toolsColumns = [ + this.spinner.show(); + + let t_tools: Array<Db> = []; + + const get_tools = this.restApiService.getAllTools().pipe( + mergeMap(tools => from(tools)), + map(tool => { + t_tools.push(tool); + }) + ); + + forkJoin(get_tools).subscribe(data => { + this.columns = this.initColumn(); + this.tools = t_tools; + this.t_temp = [...this.tools]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); + } + + initColumn() { + let t_columns: Array<any> = []; + + t_columns = [ { - name: "STATUS", - width: "50", - dataIndex: "enabled" + headerName: "STATUS", + width: "15", + sortable: true, + dataIndex: "enabled", + icon: "status" }, { - name: "NAME", - width: "220", + headerName: "NAME", + width: "420", + sortable: true, dataIndex: "name" }, { - name: "DB_TYPE", - width: "220", + headerName: "Type", + width: "50", + sortable: true, dataIndex: "dbTypeId" }, { - name: "", - width: "5", - dataIndex: "", - icon: "trash" + headerName: "Host", + width: "100", + sortable: true, + dataIndex: "host" + }, + { + width: "2", + iconButton: "cog", + action: "edit" }, { - name: "", - width: "5", - dataIndex: "", - icon: "cog" + width: "2", + iconButton: "trash", + action: "delete" } ]; - } - async initData() { - this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise(); + return t_columns; } - updateFilter(searchValue) { + updateFilter(searchValue: string) { const val = searchValue.toLowerCase(); - // filter our data - const temps = this.toolsList.filter(function (d) { - return d.name.toLowerCase().indexOf(val) != -1 || !val; - }); - // update the rows - this.toolsList = temps; - } - openModalDemo() { - this.modalService.open(ToolAddModalComponent, { - windowClass: "dl-md-modal dbs", - size: "sm", - centered: true + // filter our data + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); - } - dataAction($event) { - if($event[0] == "trash"){ - console.log($event, "tools delete"); - this.deleteToolModel($event[1]); - }else { - console.log($event, "tools update"); - this.updateToolModel($event[1]); - } + // update the rows + this.tools = temp; } - deleteToolModel(id: number) { - - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true - }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete tool - this.dbApiService.deleteDb(id).subscribe( - res => { - if (JSON.stringify(res).length <= 2) { - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_DELETED"); - this.initData(); - } else { - this.notificationService.error("FAILED_DELETED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); + btnTableAction(passValueArr: Array<any>) { + let action = passValueArr[0]; + let id = passValueArr[1]; + + switch (action) { + case "edit": + this.openModal("edit", id); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteDb(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); modalRef.close(); - } - ); - }); + }); + break; + } } - updateToolModel(id: number) { - const modalRef = this.modalService.open(ModalToolsComponent, { + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { size: "lg", - centered: true + centered: true, + backdrop: "static" }); - const index = this.toolsList.findIndex(t => t.id === id); - modalRef.componentInstance.editTool = this.toolsList[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.toolNew = receivedEntry; - this.dbApiService - .updateDb(this.toolNew) - .subscribe( - res => { - if (res.statusCode == 200) { - this.toolsList[index] = this.toolNew; - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initData(); - } else { - this.notificationService.error("FAILED_UPDATED"); + + switch (mode) { + case "new": + let newTool: Db = new Db(); + let componentNew = new ModalContentData(ToolModalComponent, newTool); + + modalRef.componentInstance.title = "NEW_TOOL"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + newTool = Object.assign({}, data); + console.log(newTool.dbTypeId); + console.log(newTool); + this.restApiService.addDb(newTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + ); + modalRef.close(); + }); + break; + case "edit": + let index: number = this.tools.findIndex(db => db.id === id); + let editTool: Db = this.tools[index]; + let componentEdit = new ModalContentData(ToolModalComponent, editTool); + + modalRef.componentInstance.title = editTool.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + editTool = Object.assign({}, data); + this.restApiService.updateDb(editTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + } } } diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css deleted file mode 100644 index 424c839b..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - 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. -*/ diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html deleted file mode 100644 index c45b8fdb..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html +++ /dev/null @@ -1,229 +0,0 @@ -<!-- - 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 border-bottom"> - - <div class="container-fluid"> - <div class="row"> - <div class="col-md-12"> - <label class="dl-h3">{{ "NEW_TOPIC" | translate}}</label> - </div> - </div> - - <!--<div class="row">--> - <!--<div class="col-md-12">--> - <!--<hr>--> - <!--</div>--> - - <!--<div *ngIf="!newTopic.type" class="col-md-12">--> - <!--<div class="dl-notice">--> - <!--{{ "TOPIC_DEFAULT_CONF_NOTICE" | translate}}--> - <!--</div>--> - <!--</div>--> - - <!--</div>--> - </div> - - - </div> - <div class="modal-body border-0"> - <div class="container-fluid"> - <div class="form-group"> - <div class="row"> - <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div> - - <div class="col-md-8"> - <label class="dl-switch"> - <input #t_enable id="switch" type="checkbox" [(ngModel)]="TopicInput.enabled" /> - <span class="dl-slider round"></span> - </label> - </div> - </div> - </div> - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1" for="inputUserName">{{ 'NAME' | translate }}</label> - </div> - <div class="col-md-8"> - <input #t_topicname [value]="TopicInput.name" class="form-control dl-input-text" id="inputTopicName" type="text" - placeholder="Topic name" /> - </div> - </div> - </div> - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label> - </div> - <div class="col-md-4"> - <input #t_login [value]="TopicInput.login" class="form-control dl-input-text" id="inputUserName" type="text" - placeholder="Username" /> - </div> - <div class="col-md-4"> - <input #t_password [value]="TopicInput.password" class="form-control dl-input-text" id="inputPass" - type="password" placeholder="Password" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'SINK' | translate }}</label> - </div> - <div class="col-md-8"> - <div class="row d-flex flex-wrap"> - <div *ngFor="let db of dbs" class="col-md-6 pb-1"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chk_{{ db }}" type="checkbox" [checked]="TopicInput.sinkdbs.includes(db)" - (change)="this.updateSelectedDB($event, db)" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chk_{{ db }}"> - {{ db }} - </label> - </div> - </div> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label> - </div> - <div class="col-md-4"> - <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat"> - <option *ngFor="let item of dataFormats" [selected]="item == dataFormats[0]"> - {{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label> - </div> - <div class="col-md-4"> - <input #t_ttl [value]="TopicInput.ttl" class="form-control dl-input-text" id="inputTtl" type="text" - placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label> - </div> - <div class="col-md-4"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input #t_saveRaw id="chkSaveRaw" [(ngModel)]="TopicInput.saveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Save - </label> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'CORRELATE_CLEARED_MESSAGE' | translate }}</label> - </div> - <div class="col-md-4"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input #t_msg id="chkMsg" [(ngModel)]="TopicInput.correlateClearedMessage" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chkMsg"> - Correlate - </label> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'ID_EXTRACTION' | translate }}</label> - </div> - <div class="col-md-8"> - <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index"> - <div class="col-md-8 order-1"> - <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id" - type="text" [value]="field.item" /> - </div> - <div class="order-2"> - <button type="button" class="btn dl-icon-enable p-2" (click)="addIdField(i)"> - <i class="fa fa-plus fa-xs" aria-hidden="true"></i> - </button> - </div> - <div class="order-3"> - <button type="button" class="btn dl-icon-enable p-2" (click)="deleteIdField(i)"> - <i class="fa fa-trash fa-xs" aria-hidden="true"></i> - </button> - </div> - </div> - </div> - </div> - </div> - - </div> - </div> - - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <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)="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> diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts deleted file mode 100644 index 536f3a9e..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - 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. -*/ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NewTopicModelComponent } from './new-topic-model.component'; - -describe('NewTopicModelComponent', () => { - let component: NewTopicModelComponent; - let fixture: ComponentFixture<NewTopicModelComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NewTopicModelComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NewTopicModelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts deleted file mode 100644 index b1d782dc..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts +++ /dev/null @@ -1,157 +0,0 @@ -/* - 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. -*/ -import { - Component, - OnInit, - Input, - Output, - EventEmitter, - ViewChild, - ElementRef -} from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -import { AdminService } from "src/app/core/services/admin.service"; -import { Topic } from "src/app/core/models/topic.model"; - -@Component({ - selector: "app-new-topic-model", - templateUrl: "./new-topic-model.component.html", - styleUrls: ["./new-topic-model.component.css"] -}) -export class NewTopicModelComponent implements OnInit { - @Input() newTopic: Topic; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - TopicInput: Topic; - // page elements - dbs: any = []; - dataFormats: Array<string> = ["JSON", "XML"]; - tempSeletedDbs: any = []; - idExFields: Array<any> = []; - idExNewField: any = {}; - @ViewChild("t_topicname") t_topicname: ElementRef; - @ViewChild("t_login") t_login: ElementRef; - @ViewChild("t_password") t_password: ElementRef; - @ViewChild("t_dataFormat") t_dataFormat: ElementRef; - @ViewChild("t_ttl") t_ttl: ElementRef; - - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private restApiService: RestApiService - ) { - this.getDbs(); - } - - ngOnInit() { - // this.newTopic = { - // name: "", - // login: "", - // password: "", - // sinkdbs: [], - // enabledSinkdbs: [], - // enabled: false, - // saveRaw: false, - // dataFormat: this.dataFormats[0], - // ttl: null, - // correlateClearedMessage: false, - // messageIdPath: null, - // type: null - // }; - // this.TopicInput = new Topic(); - // const feeds = { - // name: this.newTopic.name, - // login: this.newTopic.login, - // password: this.newTopic.password, - // sinkdbs: this.newTopic.sinkdbs, - // enabledSinkdbs: this.newTopic.sinkdbs, - // enabled: this.newTopic.enabled, - // saveRaw: this.newTopic.saveRaw, - // dataFormat: this.newTopic.dataFormat, - // ttl: this.newTopic.ttl, - // correlateClearedMessage: this.newTopic.correlateClearedMessage, - // messageIdPath: this.newTopic.messageIdPath, - // type: null - // }; - // this.TopicInput = feeds; - // this.idExFields = []; - // if (this.TopicInput.messageIdPath != null) { - // var feed = this.TopicInput.messageIdPath.split(","); - // for (var i = 0; i < feed.length; i++) { - // var data = { item: feed[i] }; - // this.idExFields.push(data); - // } - // } else { - // this.idExFields.push([]); - // } - } - - getDbs() { - this.dbs = []; - this.restApiService.getDbList().subscribe((data: {}) => { - this.dbs = data; - }); - } - - updateSelectedDB(event: any, name: string) { - if (event.target.checked) { - if (!this.tempSeletedDbs.find(db => db === name)) { - this.tempSeletedDbs.push(name); - } - } else { - const index = this.tempSeletedDbs.indexOf(name, 0); - if (index > -1) { - this.tempSeletedDbs.splice(index, 1); - } - } - } - - addIdField() { - this.idExFields.push(this.idExNewField); - this.idExNewField = {}; - } - - deleteIdField(index: number) { - if (this.idExFields.length > 1) { - this.idExFields.splice(index, 1); - } - } - - passBack() { - this.newTopic = this.TopicInput; - this.newTopic.name = this.t_topicname.nativeElement.value; - this.newTopic.login = this.t_login.nativeElement.value; - this.newTopic.password = this.t_password.nativeElement.value; - this.newTopic.sinkdbs = this.tempSeletedDbs; - this.newTopic.dataFormat = this.t_dataFormat.nativeElement.value; - this.newTopic.ttl = this.t_ttl.nativeElement.value; - this.newTopic.messageIdPath = ""; - for (var i = 0; i < this.idExFields.length; i++) { - let item = "/" + this.idExFields[i].item; - if (i == 0) { - this.newTopic.messageIdPath = item; - } else { - this.newTopic.messageIdPath = this.newTopic.messageIdPath + "," + item; - } - } - // Reset to default - if (this.newTopic.sinkdbs.length == 0) { - return false; - } - console.log(this.newTopic); - this.passEntry.emit(this.newTopic); - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html deleted file mode 100644 index bfa3f572..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html +++ /dev/null @@ -1,164 +0,0 @@ -<!-- -============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========================================================= ---> - -<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">{{ "DEFAULT_CONFIGURATIONS" | translate }}</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-fluid"> - <div class="form-group"> - <div class="row"> - <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div> - - <div class="col-md-8"> - <label class="dl-switch"> - <input id="switch" type="checkbox" [(ngModel)]="tempEnabled" /> - <span class="dl-slider round"></span> - </label> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-12"> - <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label> - </div> - </div> - <div class="row"> - <div class="col-md-6"> - <input #t_login [value]="topic.login" class="form-control dl-input-text" id="inputUserName" type="text" - placeholder="Username" /> - </div> - <div class="col-md-6"> - <input #t_password [value]="topic.password" class="form-control dl-input-text" id="inputPass" - type="password" placeholder="Password" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-6"> - <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label> - </div> - <div class="col-md-6"> - <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label> - </div> - </div> - <div class="row"> - <div class="col-md-6"> - <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat"> - <option *ngFor="let item of dataFormats" [selected]="item == topic.dataFormat"> - {{ item }}</option> - </select> - </div> - <div class="col-md-6"> - <input #t_ttl [value]="topic.ttl" class="form-control dl-input-text" id="inputTtl" type="text" - placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-12"><label class="dl-emphasis1">{{ 'SINK' | translate }}</label></div> - </div> - <div class="row d-flex flex-wrap"> - <div *ngFor="let db of dbs" class="col-md-6 pb-1"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chk_{{ db }}" type="checkbox" [checked]="this.topic.sinkdbs.includes(db)" - (click)="this.updateSelectedDB($event, db)" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chk_{{ db }}"> - {{ db }} - </label> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-12"> - <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label> - </div> - </div> - <div class="row"> - <div class="col-md-6"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chkSaveRaw" [(ngModel)]="tempSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Save - </label> - </div> - </div> - </div> - </div> - </div> - </div> - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <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> diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts deleted file mode 100644 index 9c3ec518..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TopicConfigModalComponent } from './topic-config-modal.component'; - -describe('TopicConfigModalComponent', () => { - let component: TopicConfigModalComponent; - let fixture: ComponentFixture<TopicConfigModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ TopicConfigModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TopicConfigModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts deleted file mode 100644 index b67dff19..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - */ - -import { - Component, - OnInit, - Input, - Output, - EventEmitter, - ViewChild, - ElementRef -} from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -import { AdminService } from "src/app/core/services/admin.service"; -import { Topic } from "src/app/core/models/topic.model"; - -@Component({ - selector: "app-topic-config-modal", - templateUrl: "./topic-config-modal.component.html", - styleUrls: ["./topic-config-modal.component.css"] -}) -export class TopicConfigModalComponent implements OnInit { - @Input() topic: Topic; - @Input() title: string; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - - // page elements - dbs: any = []; - dataFormats: Array<string> = ["JSON", "XML"]; - tempSeletedDbs: any = []; - tempEnabled: boolean; - tempSaveRaw: boolean; - @ViewChild("t_login") t_login: ElementRef; - @ViewChild("t_password") t_password: ElementRef; - @ViewChild("t_dataFormat") t_dataFormat: ElementRef; - @ViewChild("t_ttl") t_ttl: ElementRef; - - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private restApiService: RestApiService - ) { - this.getDbs(); - } - - ngOnInit() { - // for display - this.topic.sinkdbs.forEach(item => { - this.tempSeletedDbs.push(item); - }); - this.tempEnabled = this.topic.enabled; - this.tempSaveRaw = this.topic.saveRaw; - } - - getDbs() { - this.dbs = []; - this.restApiService.getDbList().subscribe((data: {}) => { - this.dbs = data; - }); - } - - updateSelectedDB(event: any, name: string) { - if (event.target.checked) { - if (!this.tempSeletedDbs.find(db => db === name)) { - this.tempSeletedDbs.push(name); - } - } else { - const index = this.tempSeletedDbs.indexOf(name, 0); - if (index > -1) { - this.tempSeletedDbs.splice(index, 1); - } - } - } - - passBack() { - this.topic.enabled = this.tempEnabled; - this.topic.login = this.t_login.nativeElement.value; - this.topic.password = this.t_password.nativeElement.value; - this.topic.sinkdbs = this.tempSeletedDbs; - this.topic.dataFormat = this.t_dataFormat.nativeElement.value; - this.topic.ttl = this.t_ttl.nativeElement.value; - this.topic.saveRaw = this.tempSaveRaw; - - this.passEntry.emit(this.topic); - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css deleted file mode 100644 index e69de29b..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css +++ /dev/null diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html deleted file mode 100644 index fa07903b..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html +++ /dev/null @@ -1,223 +0,0 @@ -<!-- -============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========================================================= ---> - -<div class="p-1"> - <div class="modal-header pb-0 border-0 border-bottom"> - - <div class="container-fluid"> - <div class="row"> - <div class="col-md-12"> - <label class="dl-h3">{{ topic.name }}</label> - </div> - </div> - - <div class="row"> - <div class="col-md-12"> - <hr> - </div> - - <div *ngIf="!topic.type" class="col-md-12"> - <div class="dl-notice"> - {{ "TOPIC_DEFAULT_CONF_NOTICE" | translate}} - </div> - </div> - - </div> - </div> - - - </div> - <div class="modal-body border-0"> - <div class="container-fluid"> - <div class="form-group"> - <div class="row"> - <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div> - - <div class="col-md-8"> - <label class="dl-switch"> - <input #t_enable id="switch" type="checkbox" [(ngModel)]="tempEnabled" /> - <span class="dl-slider round"></span> - </label> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label> - </div> - <div class="col-md-4"> - <input #t_login [value]="topic.login" class="form-control dl-input-text" id="inputUserName" type="text" - placeholder="Username" /> - </div> - <div class="col-md-4"> - <input #t_password [value]="topic.password" class="form-control dl-input-text" id="inputPass" - type="password" placeholder="Password" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'SINK' | translate }}</label> - </div> - <div class="col-md-8"> - <div class="row d-flex flex-wrap"> - <div *ngFor="let db of dbs" class="col-md-6 pb-1"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input id="chk_{{ db }}" type="checkbox" [checked]="this.topic.sinkdbs.includes(db)" - (change)="this.updateSelectedDB($event, db)" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chk_{{ db }}"> - {{ db }} - </label> - </div> - </div> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label> - </div> - <div class="col-md-4"> - <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat"> - <option *ngFor="let item of dataFormats" [selected]="item == topic.dataFormat"> - {{ item }}</option> - </select> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label> - </div> - <div class="col-md-4"> - <input #t_ttl [value]="topic.ttl" class="form-control dl-input-text" id="inputTtl" type="text" - placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" /> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label> - </div> - <div class="col-md-4"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input #t_saveRaw id="chkSaveRaw" [(ngModel)]="tempSaveRaw" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chkSaveRaw"> - Save - </label> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'CORRELATE_CLEARED_MESSAGE' | translate }}</label> - </div> - <div class="col-md-4"> - <div class="input-group"> - <div class="input-group-prepend"> - <label class="input-group-text dl-input-chk-label"> - <input #t_msg id="chkMsg" [(ngModel)]="tempMsg" type="checkbox" /> - <span class="dl-input-checkmark"></span> - </label> - </div> - <label class="form-control dl-input-chk" for="chkMsg"> - Correlate - </label> - </div> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-4"> - <label class="dl-emphasis1">{{ 'ID_EXTRACTION' | translate }}</label> - </div> - <div class="col-md-8"> - <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index"> - <div class="col-md-8 order-1"> - <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id" - type="text" [value]="field.item" /> - </div> - <div class="order-2"> - <button type="button" class="btn dl-icon-enable p-2" (click)="addIdField(i)"> - <i class="fa fa-plus fa-xs" aria-hidden="true"></i> - </button> - </div> - <div class="order-3"> - <button type="button" class="btn dl-icon-enable p-2" (click)="deleteIdField(i)"> - <i class="fa fa-trash fa-xs" aria-hidden="true"></i> - </button> - </div> - </div> - </div> - </div> - </div> - - </div> - </div> - - <div class="modal-footer border-0 pt-0 pb-2"> - <div class="container-fluid"> - <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)="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> diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts deleted file mode 100644 index ee6fcad3..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TopicDetailModalComponent } from './topic-detail-modal.component'; - -describe('TopicDetailModalComponent', () => { - let component: TopicDetailModalComponent; - let fixture: ComponentFixture<TopicDetailModalComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ TopicDetailModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TopicDetailModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts deleted file mode 100644 index 17d0d036..00000000 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts +++ /dev/null @@ -1,152 +0,0 @@ -/* - * ============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========================================================= - */ - -/** - * - * @author Ekko Chang - * - */ - -import { - Component, - OnInit, - Input, - Output, - EventEmitter, - ViewChild, - ElementRef -} from "@angular/core"; -import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { RestApiService } from "src/app/core/services/rest-api.service"; -import { AdminService } from "src/app/core/services/admin.service"; -import { Topic } from "src/app/core/models/topic.model"; - -@Component({ - selector: "app-topic-detail-modal", - templateUrl: "./topic-detail-modal.component.html", - styleUrls: ["./topic-detail-modal.component.css"] -}) -export class TopicDetailModalComponent implements OnInit { - @Input() topic: Topic; - @Output() passEntry: EventEmitter<any> = new EventEmitter(); - - // page elements - dbs: any = []; - dataFormats: Array<string> = ["JSON", "XML"]; - tempSeletedDbs: any = []; - tempEnabled: boolean; - tempSaveRaw: boolean; - tempMsg: boolean; - idExFields: Array<any> = []; - idExNewField: any = {}; - @ViewChild("t_login") t_login: ElementRef; - @ViewChild("t_password") t_password: ElementRef; - @ViewChild("t_dataFormat") t_dataFormat: ElementRef; - @ViewChild("t_ttl") t_ttl: ElementRef; - - constructor( - public activeModal: NgbActiveModal, - public adminService: AdminService, - private restApiService: RestApiService - ) { - this.getDbs(); - } - ngOnInit() { - // for display - this.topic.sinkdbs.forEach(item => { - this.tempSeletedDbs.push(item); - }); - this.tempEnabled = this.topic.enabled; - this.tempSaveRaw = this.topic.saveRaw; - this.tempMsg = this.topic.correlateClearedMessage; - this.idExFields = []; - - if (this.topic.messageIdPath != null) { - var feed = this.topic.messageIdPath.split(","); - for (var i = 0; i < feed.length; i++) { - var data = { item: feed[i] }; - this.idExFields.push(data); - } - } else { - this.idExFields.push([]); - } - } - - getDbs() { - this.dbs = []; - this.restApiService.getDbList().subscribe((data: {}) => { - this.dbs = data; - }); - } - - updateSelectedDB(event: any, name: string) { - if (event.target.checked) { - if (!this.tempSeletedDbs.find(db => db === name)) { - this.tempSeletedDbs.push(name); - } - } else { - const index = this.tempSeletedDbs.indexOf(name, 0); - if (index > -1) { - this.tempSeletedDbs.splice(index, 1); - } - } - } - - addIdField() { - this.idExFields.push(this.idExNewField); - this.idExNewField = {}; - } - - deleteIdField(index: number) { - if (this.idExFields.length > 1) { - this.idExFields.splice(index, 1); - } - } - - passBack() { - this.topic.enabled = this.tempEnabled; - this.topic.login = this.t_login.nativeElement.value; - this.topic.password = this.t_password.nativeElement.value; - - this.topic.sinkdbs = this.tempSeletedDbs; - - this.topic.dataFormat = this.t_dataFormat.nativeElement.value; - this.topic.ttl = this.t_ttl.nativeElement.value; - this.topic.saveRaw = this.tempSaveRaw; - this.topic.correlateClearedMessage = this.tempMsg; - this.topic.messageIdPath = ""; - for (var i = 0; i < this.idExFields.length; i++) { - if (i == 0) { - this.topic.messageIdPath = this.idExFields[i].item; - } else { - this.topic.messageIdPath = - this.topic.messageIdPath + "," + this.idExFields[i].item; - } - } - - // Reset to default - if (this.topic.sinkdbs.length == 0) { - this.topic.config = false; - } else { - this.topic.config = true; - } - this.passEntry.emit(this.topic); - } -} diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html index f5f3a7ed..849c145a 100644 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html @@ -134,7 +134,7 @@ limitations under the License. <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index"> <div class="col-md-8 order-1"> <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id" - type="text" [value]="field.item" (change)="onChangeSaveIdField()" /> + type="text" (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" /> </div> <div class="order-2"> <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)"> diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts index 3f0223eb..9289861b 100644 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts @@ -229,21 +229,26 @@ export class TopicModalComponent implements OnInit { onClickAddIdField() { this.idExFields.push(this.idExNewField); this.idExNewField = {}; + this.onChangeSaveIdField(); } onClickDelIdField(index: number) { if (this.idExFields.length > 1) { this.idExFields.splice(index, 1); + this.onChangeSaveIdField(); } } onChangeSaveIdField() { this.data.messageIdPath = ""; + for (let i = 0; i < this.idExFields.length; i++) { - if (i == 0) { - this.data.messageIdPath = this.idExFields[i].item; - } else { - this.data.messageIdPath += "," + this.idExFields[i].item; + if (this.idExFields[i].item) { + if (this.data.messageIdPath == "") { + this.data.messageIdPath = this.idExFields[i].item; + } else { + this.data.messageIdPath += "," + this.idExFields[i].item; + } } } } 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 11654612..3f4959bf 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json @@ -1,6 +1,6 @@ { "SIDEBAR": { - "FEEDFER": "DataLake Feeder", + "FEEDER": "DataLake Feeder", "KAFKA": "Kafka", "TOPICS": "Topics", "DATABASE": "Database", @@ -76,7 +76,8 @@ "TIME_OUT": "Time out(sec)", "EDIT_KAFKA": "Edit Kafka", "NEW_DB": "New Database", - "DB_TYPE": "DbType", + "DB_TYPE": "Db Type", + "TOOL_TYPE": "Tool Type", "NEW_DRUID": "New Druid", "NEW_ELASTICSEARCH": "New Elasticsearch", "NEW_COUCHBASE": "New Couchbase", @@ -84,5 +85,11 @@ "NEW_HDFS": "New Hdfs", "SECURE_COMMUNICATION": "Secure Communication", "NEW_TOOL": "New Tool", - "NEW_KIBANA": "New Kibana" + "NEW_KIBANA": "New Kibana", + "COUCHBASE": "Couchbase", + "DRUID": "Druid", + "ELASTICSEARCH": "Elasticsearch", + "MONGODB": "MongoDB", + "HDFS": "Hdfs", + "DATABASE_NAME": "Database Name" } diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 64cc8eae..958bb669 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -135,6 +135,12 @@ hr { /* bootstrap table theme */ +.table-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; +} + .ngx-datatable.bootstrap { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; diff --git a/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/controller/DbController.java b/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/controller/DbController.java index 49439e60..fc709360 100644 --- a/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/controller/DbController.java +++ b/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/controller/DbController.java @@ -211,17 +211,17 @@ public class DbController { } //Update Db - @PutMapping("") + @PutMapping("/{id}") @ResponseBody @ApiOperation(value="Update a database.") - public PostReturnBody<DbConfig> updateDb(@RequestBody DbConfig dbConfig, BindingResult result, HttpServletResponse response) throws IOException { + public PostReturnBody<DbConfig> updateDb(@PathVariable int id, @RequestBody DbConfig dbConfig, BindingResult result, HttpServletResponse response) throws IOException { if (result.hasErrors()) { sendError(response, 400, "Error parsing DB: " + result.toString()); return null; } - Db oldDb = dbRepository.findById(dbConfig.getId()).get(); + Db oldDb = dbRepository.findById(id).get(); if (oldDb == null) { sendError(response, 404, DB_NOT_FOUND + dbConfig.getName()); return null; @@ -258,6 +258,15 @@ public class DbController { } + //get db type list + @GetMapping("/dbtypes") + @ResponseBody + @ApiOperation(value="Get a list of all db types.") + public Iterable<DbType> getDbTypes(HttpServletResponse response) throws IOException { + log.info("Get a list of all db types ......"); + Iterable<DbType> dbTypes = dbTypeRepository.findAll(); + return dbTypes; + } @PostMapping("/verify") @ResponseBody diff --git a/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/domain/DbType.java b/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/domain/DbType.java index 9c83a9cd..700ce8cb 100644 --- a/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/domain/DbType.java +++ b/components/datalake-handler/feeder/src/main/java/org/onap/datalake/feeder/domain/DbType.java @@ -29,6 +29,9 @@ import javax.persistence.FetchType; import javax.persistence.Id; import javax.persistence.OneToMany; import javax.persistence.Table; + +import com.fasterxml.jackson.annotation.JsonBackReference; + import lombok.Getter; import lombok.Setter; @@ -56,7 +59,8 @@ public class DbType { @Column(name="`tool`", nullable = false) private boolean tool; - + + @JsonBackReference @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "dbType") protected Set<Db> dbs = new HashSet<>(); diff --git a/components/datalake-handler/feeder/src/test/java/org/onap/datalake/feeder/controller/DbControllerTest.java b/components/datalake-handler/feeder/src/test/java/org/onap/datalake/feeder/controller/DbControllerTest.java index c46a026b..9318ee00 100644 --- a/components/datalake-handler/feeder/src/test/java/org/onap/datalake/feeder/controller/DbControllerTest.java +++ b/components/datalake-handler/feeder/src/test/java/org/onap/datalake/feeder/controller/DbControllerTest.java @@ -69,6 +69,7 @@ public class DbControllerTest { public DbConfig getDbConfig() { DbConfig dbConfig = new DbConfig(); + dbConfig.setId(1); dbConfig.setName("Elecsticsearch"); dbConfig.setHost("localhost"); dbConfig.setLogin("root"); @@ -112,7 +113,7 @@ public class DbControllerTest { DbController dbController = new DbController(); DbConfig dbConfig = getDbConfig(); when(mockBindingResult.hasErrors()).thenReturn(true); - PostReturnBody<DbConfig> db = dbController.updateDb(dbConfig, mockBindingResult, + PostReturnBody<DbConfig> db = dbController.updateDb(dbConfig.getId(), dbConfig, mockBindingResult, httpServletResponse); assertEquals(null, db); //when(mockBindingResult.hasErrors()).thenReturn(false); diff --git a/components/datalake-handler/pom.xml b/components/datalake-handler/pom.xml index 103a1eb5..d244806a 100644 --- a/components/datalake-handler/pom.xml +++ b/components/datalake-handler/pom.xml @@ -36,6 +36,9 @@ <elasticsearchjava.version>7.1.1</elasticsearchjava.version> <hadoop.version>3.2.0</hadoop.version> + <sonar.coverage.jacoco.xmlReportPaths> + ${project.reporting.outputDirectory}/jacoco-ut/jacoco.xml + </sonar.coverage.jacoco.xmlReportPaths> </properties> <dependencyManagement> |