diff options
16 files changed, 532 insertions, 165 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/package.json b/components/datalake-handler/admin/src/package.json index 675a5f35..de89944b 100644 --- a/components/datalake-handler/admin/src/package.json +++ b/components/datalake-handler/admin/src/package.json @@ -1,5 +1,5 @@ { - "name": "admin", + "name": "DataLake-AdminUI", "version": "0.0.0", "scripts": { "ng": "ng", @@ -8,7 +8,8 @@ "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", + "mockup": "node ./src/app/mockup/index.js" }, "private": true, "dependencies": { @@ -33,7 +34,10 @@ "popper.js": "^1.15.0", "rxjs": "~6.3.3", "tslib": "^1.9.0", - "zone.js": "~0.8.26" + "zone.js": "~0.8.26", + "body-parser": "^1.18.2", + "json-server": "^0.15.0", + "lowdb": "^1.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^0.13.9", diff --git a/components/datalake-handler/admin/src/proxy.conf.json b/components/datalake-handler/admin/src/proxy.conf.json new file mode 100644 index 00000000..a485617b --- /dev/null +++ b/components/datalake-handler/admin/src/proxy.conf.json @@ -0,0 +1,8 @@ +{ + "/datalake/v1": { + "target": "http://10.103.12.175:1680", + "secure": false, + "logLevel": "debug", + "changeOrigin": true + } +} 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/mockup/db.json b/components/datalake-handler/admin/src/src/app/mockup/db.json new file mode 100644 index 00000000..b45287bb --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/mockup/db.json @@ -0,0 +1,139 @@ +{ + "dbs": [ + { + "name": "Couchbase", + "enabled": true, + "host": "dl_couchbase1", + "port": 567, + "login": "admin", + "pass": null, + "database": "datalake", + "encrypt": false, + "property1": null, + "property2": null, + "property3": null + }, + { + "name": "Druid", + "enabled": false, + "host": "dl_druid", + "port": null, + "login": null, + "pass": null, + "database": null, + "encrypt": null, + "property1": null, + "property2": null, + "property3": null + }, + { + "name": "Elasticsearch", + "enabled": false, + "host": "dl_es", + "port": null, + "login": null, + "pass": null, + "database": null, + "encrypt": null, + "property1": null, + "property2": null, + "property3": null + }, + { + "name": "HDFS", + "enabled": false, + "host": "dlhdfs", + "port": null, + "login": "dl", + "pass": null, + "database": null, + "encrypt": null, + "property1": null, + "property2": null, + "property3": null + }, + { + "name": "MongoDB", + "enabled": false, + "host": "dl_mongodb", + "port": 27017, + "login": null, + "pass": null, + "database": "datalake", + "encrypt": null, + "property1": null, + "property2": null, + "property3": null + } + ], + "topics": [ + { + "name": "unauthenticated.VES_MEASUREMENT_OUTPUT", + "login": null, + "password": null, + "sinkdbs": [ + "Druid", + "Couchbase", + "Elasticsearch", + "HDFS", + "MongoDB" + ], + "enabled": true, + "saveRaw": false, + "dataFormat": "JSON", + "ttl": 3650, + "correlateClearedMessage": false, + "messageIdPath": null, + "aggregateArrayPath": "/event/measurementsForVfScalingFields/memoryUsageArray,/event/measurementsForVfScalingFields/diskUsageArray,/event/measurementsForVfScalingFields/cpuUsageArray,/event/measurementsForVfScalingFields/vNicPerformanceArray", + "flattenArrayPath": "/event/measurementsForVfScalingFields/astriMeasurement/astriDPMeasurementArray/astriInterface", + "dataFormat2": "JSON", + "aggregateArrayPath2": [ + "/event/measurementsForVfScalingFields/memoryUsageArray", + "/event/measurementsForVfScalingFields/diskUsageArray", + "/event/measurementsForVfScalingFields/cpuUsageArray", + "/event/measurementsForVfScalingFields/vNicPerformanceArray" + ], + "flattenArrayPath2": [ + "/event/measurementsForVfScalingFields/astriMeasurement/astriDPMeasurementArray/astriInterface" + ] + }, + { + "name": "AAI-EVENT", + "login": null, + "password": null, + "sinkdbs": [ + "Druid", + "Couchbase", + "Elasticsearch", + "HDFS", + "MongoDB" + ], + "enabled": true, + "saveRaw": false, + "dataFormat": "JSON", + "ttl": 3650, + "correlateClearedMessage": false, + "messageIdPath": null, + "aggregateArrayPath": "", + "flattenArrayPath": "", + "dataFormat2": "JSON", + "aggregateArrayPath2": [], + "flattenArrayPath2": [] + }, + { + "name": "AAI-EVENT2", + "login": null, + "password": null, + "sinkdbs": [ + "Druid", + "Couchbase" + ], + "enabled": true, + "saveRaw": true, + "dataFormat": "JSON", + "ttl": 256, + "correlateClearedMessage": true, + "messageIdPath": "/event/commonEventHeader/eventName,/event/commonEventHeader/reportingEntityName" + } + ] +}
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/mockup/index.js b/components/datalake-handler/admin/src/src/app/mockup/index.js new file mode 100644 index 00000000..f92c9a96 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/mockup/index.js @@ -0,0 +1,169 @@ +// Database +const low = require("lowdb"); +const FileSync = require("lowdb/adapters/FileSync"); +const adapter = new FileSync("src/app/mockup/db.json"); +const db = low(adapter); + +// Json Server +const jsonServer = require("json-server"); +const router = jsonServer.router(db); +const server = jsonServer.create(); +const middlewares = jsonServer.defaults(); + +// DataLake parameter +const endpoint = "/datalake/v1"; +const port = 1680; +var feederStatus = true; +var feederVersion = "v1.0.0"; + +server.use(middlewares); +server.use(jsonServer.bodyParser); + +// Methods +const postData = (func, req, res) => { + db.get(func) + .push(req.body) + .write(); + + let d = db.get(func).find({ + name: req.body.name + }); + + let response = { + statusCode: 200, + returnBody: d + }; + + res.status(200).jsonp(response); +}; + +const putData = (func, req, res) => { + db.get(func) + .find({ + name: req.body.name + }) + .assign(req.body) + .write(); + + let d = db.get(func).find({ + name: req.body.name + }); + + let response = { + statusCode: 200, + returnBody: d + }; + + res.status(200).jsonp(response); +}; + +const deleteData = (func, req, res) => { + db.get(func) + .remove({ + name: req.params.name + }) + .write(); + + res.status(204).jsonp({}); +}; + +// REST API: /dbs +server.post(endpoint + "/dbs", async (req, res) => { + postData("dbs", req, res); +}); + +server.put(endpoint + "/dbs/:name", async (req, res) => { + putData("dbs", req, res); +}); + +server.delete(endpoint + "/dbs/:name", async (req, res) => { + deleteData("dbs", req, res); +}); + +server.post(endpoint + "/dbs/verify", async (req, res) => { + res.status(200).jsonp({ + verify: true + }); +}); +// End REST API: /dbs + +// REST API: /topics +server.post(endpoint + "/topics", async (req, res) => { + postData("topics", req, res); +}); + +server.put(endpoint + "/topics/:name", async (req, res) => { + putData("topics", req, res); +}); + +server.delete(endpoint + "/topics/:name", async (req, res) => { + deleteData("topics", req, res); +}); +// End REST API: /topics + +// REST API: /feeder +server.get(endpoint + "/feeder/status", (req, res) => { + let response = { + running: feederStatus, + version: feederVersion + }; + + res.status(200).jsonp(response); +}); + +server.post(endpoint + "/feeder/start", (req, res) => { + feederStatus = true; + let response = { + running: feederStatus + }; + + res.status(200).jsonp(response); +}); + +server.post(endpoint + "/feeder/stop", (req, res) => { + feederStatus = false; + let response = { + running: feederStatus + }; + + res.status(200).jsonp(response); +}); +// End REST API: /feeder + +// Custom render data +router.render = (req, res) => { + if (req.method === "GET") { + // Return a array for dbs, topics + switch (req.originalUrl) { + case endpoint + "/dbs": + case endpoint + "/topics": + case endpoint + "/topics/dmaap": + let obj = res.locals.data; + let data = []; + for (let i = 0; i < obj.length; i++) { + data.push(obj[i].name); + } + res.jsonp(data); + break; + default: + res.jsonp(res.locals.data); + } + } +}; + +// Custom routes +// Add this before server.use(router) +server.use( + jsonServer.rewriter({ + "/datalake/v1/dbs/:name": "/dbs?name=:name", + "/datalake/v1/topics/dmaap": "/topics", + "/datalake/v1/topics/:name": "/topics?name=:name" + }) +); + +server.use(endpoint, router); +server.use(router); + +server.listen(port, () => { + console.log("JSON Server is running, http://localhost:" + port); +}); 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/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 156e3ed7..de76a9d6 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 @@ -221,8 +221,16 @@ export class TemplateListComponent { this.dashboardApiService.deployTemplateKibana(id, body).subscribe( res => { this.spinner.hide(); - if (JSON.stringify(res).length <= 2) { - this.notificationService.success("Deploy_SUCCESSFULLY"); + 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") }, 1000) : + setTimeout(() => { this.notificationService.error("Deploy_FAILED") }, 2000)) } else { this.notificationService.error("Deploy_FAILED"); } 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.", 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 9fa8f490..cff29596 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 @@ -25,10 +25,12 @@ import java.util.*; import javax.servlet.http.HttpServletResponse; import org.onap.datalake.feeder.domain.Db; +import org.onap.datalake.feeder.domain.DesignType; import org.onap.datalake.feeder.domain.Topic; import org.onap.datalake.feeder.repository.DbRepository; import org.onap.datalake.feeder.dto.DbConfig; import org.onap.datalake.feeder.controller.domain.PostReturnBody; +import org.onap.datalake.feeder.repository.DesignTypeRepository; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; @@ -41,7 +43,7 @@ import io.swagger.annotations.ApiOperation; /** * This controller manages the big data storage settings. All the settings are * saved in database. - * + * * @author Guobiao Mo * */ @@ -57,7 +59,10 @@ public class DbController { @Autowired private DbRepository dbRepository; - //list all dbs + @Autowired + private DesignTypeRepository designTypeRepository; + + //list all dbs @GetMapping("") @ResponseBody @ApiOperation(value="Gat all databases name") @@ -73,16 +78,17 @@ public class DbController { return retString; } - @GetMapping("/idAndName") + @GetMapping("/idAndName/{id}") @ResponseBody - @ApiOperation(value="Gat all databases id and name") - public Map<Integer, String> listIdAndName() { - Iterable<Db> ret = dbRepository.findAll(); + @ApiOperation(value="Get all databases id and name by designTypeId") + public Map<Integer, String> listIdAndName(@PathVariable String id) { + Optional<DesignType> designType = designTypeRepository.findById(id); Map<Integer, String> map = new HashMap<>(); - for(Db db : ret) - { - log.info(db.getId() + "\t"+ db.getName()); - map.put(db.getId(), db.getName()); + if (designType.isPresent()) { + Set<Db> dbs = designType.get().getDbType().getDbs(); + for (Db item : dbs) { + map.put(item.getId(), item.getName()); + } } return map; } |