feat: add new features of design module 78/92978/9
authorcyuamber <xuranyjy@chinamobile.com>
Wed, 7 Aug 2019 10:58:40 +0000 (18:58 +0800)
committerxu ran <xuranyjy@chinamobile.com>
Fri, 9 Aug 2019 09:47:17 +0000 (09:47 +0000)
Change-Id: I28709e7868ad88d0bb809d9c4e73524fbb90acb6
Issue-ID: DCAEGEN2-1671
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
components/datalake-handler/admin/src/.gitignore
components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
components/datalake-handler/admin/src/src/assets/i18n/en-us.json

index ea958f7..5dbed0d 100644 (file)
@@ -47,6 +47,3 @@ Thumbs.db
 
 # CSS vendor
 src/assets/vendor
-
-# Proxy config
-proxy.conf.json
index defae79..589a433 100644 (file)
@@ -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)
index 7bd7954..5a9cb4e 100644 (file)
     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;
 }
index 4165de8..9e2bde5 100644 (file)
   </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>
         </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">
index a6b7be9..6d89a37 100644 (file)
@@ -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() {
index 7bd7954..701fcff 100644 (file)
     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;
 }
index 40d0755..f538d03 100644 (file)
       </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>
         </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
       </div>
     </div>
   </div>
-
 </div>
\ No newline at end of file
index 496d08a..06b2ff8 100644 (file)
@@ -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) {
index 7351306..281a9b1 100644 (file)
@@ -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"],
index 3eab0d4..e484b3f 100644 (file)
@@ -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.",