diff options
author | cyuamber <xuranyjy@chinamobile.com> | 2019-08-07 18:58:40 +0800 |
---|---|---|
committer | xu ran <xuranyjy@chinamobile.com> | 2019-08-09 09:47:17 +0000 |
commit | 6a476c21e668d42a06b17f21e657ab72641019ee (patch) | |
tree | b3d27e46c64048b76fda889e7843316ec9b1a114 /components | |
parent | fdc2d73a151965696157718d04b1b0f57c4a747a (diff) |
feat: add new features of design module
Change-Id: I28709e7868ad88d0bb809d9c4e73524fbb90acb6
Issue-ID: DCAEGEN2-1671
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'components')
10 files changed, 183 insertions, 150 deletions
diff --git a/components/datalake-handler/admin/src/.gitignore b/components/datalake-handler/admin/src/.gitignore index ea958f76..5dbed0df 100644 --- a/components/datalake-handler/admin/src/.gitignore +++ b/components/datalake-handler/admin/src/.gitignore @@ -47,6 +47,3 @@ Thumbs.db # CSS vendor src/assets/vendor - -# Proxy config -proxy.conf.json 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 defae797..589a4337 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 @@ -265,8 +265,8 @@ Dashboard ); } - getTempDbList(): Observable<any> { - return this.http.get(prefix + "dbs/idAndName/").pipe( + getTempDbList(id): Observable<any> { + return this.http.get(prefix + "dbs/idAndName/" + id).pipe( retry(1), map(this.extractData), catchError(this.handleError) @@ -329,8 +329,8 @@ Dashboard /* Kafka */ - getAllKafkaList(){ - return this.http.get(prefix + "kafkas").pipe( //onlin + getAllKafkaList() { + return this.http.get(prefix + "kafkas").pipe( //online retry(1), map(this.extractData), catchError(this.handleError) 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/edit-template-modal/edit-template-modal.component.css index 7bd79547..5a9cb4ef 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/edit-template-modal/edit-template-modal.component.css @@ -13,10 +13,33 @@ See the License for the specific language governing permissions and limitations under the License. */ +.row-wrapper{ + display: flex; +} +.row-half-item{ + width: 45%; +} +.row-quarter-item{ + width: 20%; + margin-bottom: 15px; +} +.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%; + /* width: 100%; */ + /* height: 90%; */ opacity: 0; cursor: pointer; } 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 index 4165de8d..9e2bde5e 100644 --- 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 @@ -31,97 +31,61 @@ </div> <div class="modal-body border-0"> <div class="container-fluid"> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> + <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 class="col-md-6"> + <div> <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" placeholder="Username" /> </div> </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> - <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label> - </div> - <div class="col-md-10"> - <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" - placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> - <label class="dl-emphasis1" style="line-height: 2.25rem">{{ 'FIELUPLOAD' | translate }}</label> + <div class="row-half-item upload-item"> + <div> + <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label> </div> - <div class="col-md-2 p-1" style="position: relative; - margin-left: 0.5rem;"> + <div class="upload-item-button"> <input type="file" id="f-file" (change)="this.jsReadFiles()" /> - <label for="f-file" style="height: 100%;width: 100%;"> + <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> - </div> - <div class="col-md-2"> - <span style="line-height: 2.25rem">{{this.fileName}}</span> + <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 class="row"> - <div class="col-md-2"> - <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 dbList" 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]="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> + <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"> - <div class="row"> - <div class="col-md-2"> + <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 class="col-md-8"> - <select #templatetype class="custom-select dl-input-text" id="selDataFormat"> + <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> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> + <div class="row-half-item usual-item"> + <div> <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label> </div> - <div class="col-md-8"> + <div> <select #topic class="custom-select dl-input-text" id="selDataFormat"> <option *ngFor="let item of topicname" [selected]="item === defaultTopicname">{{item}}</option> </select> @@ -129,8 +93,27 @@ </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"> 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 index a6b7be9f..6d89a372 100644 --- 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 @@ -42,6 +42,7 @@ export class EditTemplateModalComponent implements OnInit { templatetypedata: Array<any> = []; topicname: Array<any> = []; dbList: Array<any> = []; + dbId: string = ""; tempSeletedDbs: any = []; @Output() passEntry: EventEmitter<any> = new EventEmitter(); @@ -61,7 +62,6 @@ export class EditTemplateModalComponent implements OnInit { ngOnInit() { // cache for display this.templateInput = new Template(); - this.getDbList(); const feed = { id: this.edittemplate.id, name: this.edittemplate.name, @@ -87,7 +87,12 @@ export class EditTemplateModalComponent implements OnInit { } getDbList() { - this.dashboardApiService.getTempDbList().subscribe(data => { + 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] }) }) @@ -121,6 +126,7 @@ export class EditTemplateModalComponent implements OnInit { } }); this.defaultTopicname = this.templateInput.topicName; + this.getDbList(); } jsReadFiles() { 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 index 7bd79547..701fcff6 100644 --- 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 @@ -13,10 +13,33 @@ 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%; + /* 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 index 40d0755e..f538d036 100644 --- 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 @@ -29,99 +29,64 @@ </div> </div> </div> + <div class="modal-body border-0"> <div class="container-fluid"> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> + <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 class="col-md-6"> + <div> <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" name="inputtemplateName" placeholder="Username" required="required" /> </div> </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> - <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label> - </div> - <div class="col-md-10"> - <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" - placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea> - </div> - </div> - </div> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> - <label class="dl-emphasis1" style="line-height: 2.25rem;">{{ 'FIELUPLOAD' | translate }}</label> + <div class="row-half-item upload-item"> + <div> + <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label> </div> - <div class="col-md-2 p-1" style="position: relative; - margin-left: 0.5rem;"> + <div class="upload-item-button"> <input type="file" id="f-file" (change)="this.jsReadFiles()" /> - <label for="f-file" style="height: 100%;width: 100%;"> + <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> - </div> - <div class="col-md-2"> - <span style="line-height: 2.25rem">{{this.fileName}}</span> + <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 class="row"> - <div class="col-md-2"> - <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 dbList" 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]="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> + <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"> - <div class="row"> - <div class="col-md-2"> + <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 class="col-md-8"> - <select #templatetype class="custom-select dl-input-text"> + <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> - - <div class="form-group"> - <div class="row"> - <div class="col-md-2"> + <div class="row-half-item usual-item"> + <div> <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label> </div> - <div class="col-md-8"> + <div> <select #topic class="custom-select dl-input-text"> <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option> </select> @@ -129,21 +94,42 @@ </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-6 p-0"> + <div class="col-md-7 p-0"> </div> - <div class="col-md-3 p-1"> + <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-3 p-1"> + <div class="col-md-2 p-1"> <span> <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')"> Cancel @@ -153,5 +139,4 @@ </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.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts index 496d08a1..06b2ff84 100644 --- 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 @@ -39,6 +39,7 @@ export class NewTemplateModalComponent implements OnInit { @Input() templatelist_length; templateInput: Template templatetypedata: Array<any> = []; + dbId: string = ""; topicname: Array<any> = []; dbList: Array<any> = []; tempSeletedDbs: any = []; @@ -58,7 +59,7 @@ export class NewTemplateModalComponent implements OnInit { ngOnInit() { this.getTopicName(); this.getTemplateTypeName(); - this.getDbList(); + // cache for display this.templateInput = new Template(); const feed = { @@ -81,7 +82,10 @@ export class NewTemplateModalComponent implements OnInit { } getDbList() { - this.dashboardApiService.getTempDbList().subscribe(data => { + 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] }) }) @@ -91,6 +95,7 @@ export class NewTemplateModalComponent implements OnInit { getTemplateTypeName() { this.dashboardApiService.getTemplateTypeName().subscribe(data => { this.templatetypedata = data; + this.getDbList(); }); } @@ -118,6 +123,17 @@ export class NewTemplateModalComponent implements OnInit { } 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) { diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts index 73513063..281a9b16 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component,EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { kafka } from "../../core/models/kafka.model"; import { AdminService } from "../../core/services/admin.service"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; @@ -22,7 +22,7 @@ import { RestApiService } from "src/app/core/services/rest-api.service"; // Loading spinner import { NgxSpinnerService } from "ngx-spinner"; -import {ToastrNotificationService} from "../../shared/components/toastr-notification/toastr-notification.service"; +import { ToastrNotificationService } from "../../shared/components/toastr-notification/toastr-notification.service"; @Component({ selector: 'app-kafka', templateUrl: './kafka.component.html', @@ -72,16 +72,16 @@ export class KafkaComponent implements OnInit { } getKafkaList() { - var data: any; + let data: any; data = this.kafkaApiService.getAllKafkaList().toPromise(); return data; } async initDbsList(kafkaList: []) { - var k: kafka[] = []; + let k: kafka[] = []; if (kafkaList.length > 0) { - for (var i = 0; i < kafkaList.length; i++) { + for (let i = 0; i < kafkaList.length; i++) { let data = kafkaList[i]; let feed = { id: data["id"], 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 3eab0d49..e484b3f7 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,7 +1,7 @@ { "SIDEBAR": { "FEDDFER": "DataLake Feeder", - "KAFKA":"Kafka", + "KAFKA": "Kafka", "TOPICS": "Topics", "DATABASE": "Database", "DASHBOARD": "Portal Setting", @@ -56,7 +56,7 @@ "NODATA": "No Data", "NEW_TEMPLATE": "New design", "TEMPLATE_BODY": "Body", - "FIELUPLOAD": "Upload file", + "FIELUPLOAD": "Import", "SUCCESSFULLY_CREARED": "Successfully created.", "FAILED_CREARED": "Failed updated.", "SUCCESSFULLY_UPDATED": "Successfully updated.", |