feat: add database to design module

Change-Id: I284913dfb3d20821ff89ad83a2ebc40d463734b1
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Issue-ID: DCAEGEN2-1663

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 3df882f..533068f 100644 (file)
--- 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
@@ -23,14 +23,5 @@ export class Template {
   topicName: string;
   designType: string;
   designTypeName: string;
+  dbs: any;
 }
-
-// export class newTemplate {
-//   name: string;
-//   submitted: boolean;
-//   body: string;
-//   note: string;
-//   topicName: string;
-//   designType: string;
-//   designTypeName: string;
-// }

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 a2e44e9..fe63498 100644 (file)
--- 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,6 +265,14 @@ Dashboard
     );
   }
 
+  getTempDbList(): Observable<any> {
+    return this.http.get(prefix + "dbs/idAndName/").pipe(
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
   createNewTemplate(t: Template): Observable<any> {
     return this.http
       .post(prefix + "designs", t)

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
index 48cbc12..4165de8 100644 (file)
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
@@ -76,6 +76,32 @@
         </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>
+      </div>
+
       <div class="form-group">
         <div class="row">
           <div class="col-md-2">

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
index f42e737..a6b7be9 100644 (file)
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
@@ -41,6 +41,8 @@ export class EditTemplateModalComponent implements OnInit {
   defaultTopicname: String;
   templatetypedata: Array<any> = [];
   topicname: Array<any> = [];
+  dbList: Array<any> = [];
+  tempSeletedDbs: any = [];
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
 
   @ViewChild("templatetype") templatetype: ElementRef;
@@ -59,6 +61,7 @@ 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,
@@ -68,9 +71,12 @@ export class EditTemplateModalComponent implements OnInit {
       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();
   }
@@ -80,6 +86,27 @@ export class EditTemplateModalComponent implements OnInit {
     });
   }
 
+  getDbList() {
+    this.dashboardApiService.getTempDbList().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;
@@ -124,6 +151,7 @@ export class EditTemplateModalComponent implements OnInit {
 
     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();

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
index 7ea6896..40d0755 100644 (file)
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
@@ -76,6 +76,32 @@
         </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>
+      </div>
+
       <div class="form-group">
         <div class="row">
           <div class="col-md-2">

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
index 5e46bf9..496d08a 100644 (file)
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
@@ -40,6 +40,8 @@ export class NewTemplateModalComponent implements OnInit {
   templateInput: Template
   templatetypedata: Array<any> = [];
   topicname: Array<any> = [];
+  dbList: Array<any> = [];
+  tempSeletedDbs: any = [];
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
   @ViewChild("templatetype") templatetype: ElementRef;
   @ViewChild("topic") topic: ElementRef;
@@ -56,6 +58,7 @@ export class NewTemplateModalComponent implements OnInit {
   ngOnInit() {
     this.getTopicName();
     this.getTemplateTypeName();
+    this.getDbList();
     // cache for display
     this.templateInput = new Template();
     const feed = {
@@ -67,6 +70,7 @@ export class NewTemplateModalComponent implements OnInit {
       topicName: this.template.topicName,
       designType: this.template.designType,
       designTypeName: this.template.designTypeName,
+      dbs: [],
     };
     this.templateInput = feed;
   }
@@ -76,12 +80,33 @@ export class NewTemplateModalComponent implements OnInit {
     });
   }
 
+  getDbList() {
+    this.dashboardApiService.getTempDbList().subscribe(data => {
+      Object.keys(data).map(item => {
+        this.dbList.push({ key: item, name: data[item] })
+      })
+    });
+  }
+
   getTemplateTypeName() {
     this.dashboardApiService.getTemplateTypeName().subscribe(data => {
       this.templatetypedata = data;
     });
   }
 
+  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];
@@ -112,6 +137,7 @@ export class NewTemplateModalComponent implements OnInit {
 
     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);

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
index 6bc9c9d..8da33f0 100644 (file)
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
@@ -104,6 +104,7 @@ export class TemplateListComponent {
         topicName: data["topicName"],
         designType: data["designType"],
         designTypeName: data["designTypeName"],
+        dbs: data["dbs"],
       };
       t.push(feed);
     }

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 64a54bb..99bc751 100644 (file)
--- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
@@ -3,12 +3,11 @@
     "FEDDFER": "DataLake Feeder",
     "TOPICS": "Topics",
     "DATABASE": "Database",
-    "DASHBOARD":"Portal Setting",
-    "DASHBOARDLIST":"Portal",
-    "TEMPLATE":"Design",
+    "DASHBOARD": "Portal Setting",
+    "DASHBOARDLIST": "Portal",
+    "TEMPLATE": "Design",
     "ABOUT": "About"
   },
-
   "NAME": "Name",
   "STATUS": "Status",
   "SINK": "Sink",
@@ -21,8 +20,7 @@
   "ID_EXTRACTION": "ID extraction",
   "CONFIGURED": "Configured",
   "UNCONFIGURED": "Unconfigured",
-  "NEW_TOPIC":"New topic",
-
+  "NEW_TOPIC": "New topic",
   "DATABASE_CONNECTIONS": "Database connections",
   "BUCKET": "Bucket",
   "HOST": "Host",
@@ -30,47 +28,40 @@
   "ENABLE_SSL": "Encrypt Communication",
   "VERIFY": "Verify",
   "SETTING": "Setting",
-
   "DOCUMENT_STORE": "Document store",
   "SEARCH_ENGINE": "Search engine",
-
   "DELETE": "Delete",
   "ERROR_CODE": "Error Code",
   "SUCCESS_UPDATED": "Success updated",
   "TOPIC_DEFAULT_CONF_NOTICE": "Notice: This topic uses the default topics settings.",
-
-  "HOME":"Home",
-  "ConfigDashboard":"Config Portal",
-  "EDIT":"Edit",
-  "OK":"OK",
-  "Save":"Save",
-  "Cancel":"Cancel",
-  "NewDashboard":"New Portal",
-  "DestinationType":"Destination type",
-  "InputValue":"Default",
-  "Username":"Username",
-  "Password":"Password",
-  "Enabled":"Enabled",
-
-
-  "No":"No",
-  "TEMPLATE_NAME":"Name",
-  "TEMPLATE_TYPE":"Type",
-  "TOPICS_NAME":"Topic",
-  "DEPLOY_TO_DASHBOARD":"Deploy",
-  "DEPLOY":"Deploy",
-  "NEW_TEMPLATE":"New design",
-  "TEMPLATE_BODY":"Body",
-  "FIELUPLOAD":"fileUpload",
-
-  "SUCCESSFULLY_CREARED":"Successfully created.",
-  "FAILED_CREARED":"Failed updated.",
-  "SUCCESSFULLY_UPDATED":"Successfully updated.",
-  "FAILED_UPDATED":"Failed updated.",
-  "SUCCESSFULLY_DELETED":"Successfully deleted.",
-  "FAILED_DELETED":"Failed deleted.",
-  "Deploy_SUCCESSFULLY":"Deploy successfully.",
-  "Deploy_FAILED":"Deploy failed.",
-  "ARE_YOU_SURE_DELETE":"Are you sure you want to delete it?"
-
-}
+  "HOME": "Home",
+  "ConfigDashboard": "Config Portal",
+  "EDIT": "Edit",
+  "OK": "OK",
+  "Save": "Save",
+  "Cancel": "Cancel",
+  "NewDashboard": "New Portal",
+  "DestinationType": "Destination type",
+  "InputValue": "Default",
+  "Username": "Username",
+  "Password": "Password",
+  "Enabled": "Enabled",
+  "No": "No",
+  "TEMPLATE_NAME": "Name",
+  "TEMPLATE_TYPE": "Type",
+  "TOPICS_NAME": "Topic",
+  "DEPLOY_TO_DASHBOARD": "Deploy",
+  "DEPLOY": "Deploy",
+  "NEW_TEMPLATE": "New design",
+  "TEMPLATE_BODY": "Body",
+  "FIELUPLOAD": "Upload file",
+  "SUCCESSFULLY_CREARED": "Successfully created.",
+  "FAILED_CREARED": "Failed updated.",
+  "SUCCESSFULLY_UPDATED": "Successfully updated.",
+  "FAILED_UPDATED": "Failed updated.",
+  "SUCCESSFULLY_DELETED": "Successfully deleted.",
+  "FAILED_DELETED": "Failed deleted.",
+  "Deploy_SUCCESSFULLY": "Deploy successfully.",
+  "Deploy_FAILED": "Deploy failed.",
+  "ARE_YOU_SURE_DELETE": "Are you sure you want to delete it?"
+}
\ No newline at end of file

diff --git a/components/datalake-handler/admin/src/src/index.html b/components/datalake-handler/admin/src/src/index.html
index 2549c4a..5efb80e 100644 (file)
--- a/components/datalake-handler/admin/src/src/index.html
+++ b/components/datalake-handler/admin/src/src/index.html
@@ -31,7 +31,7 @@ limitations under the License.
 
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
     integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
-<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Open+Sans:300,400,600|Roboto:100" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Open+Sans:300,400,600|Roboto:100" rel="stylesheet">
 
 </head>
 
@@ -41,4 +41,4 @@ limitations under the License.
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file