#1757 Fix data connection list API

- use /connections GET API to fetch connection list - get detail information about each connection when it's clicked from list - changed to paging component (data connection list)
metatron-app · Mar 28, 2019 · 9792e5c · 9792e5c
1 parent d0845d6
commit 9792e5c
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 69 deletions.
diff --git a/...rontend/src/app/common/component/paging-search-select/paging-search-select.component.html b/...rontend/src/app/common/component/paging-search-select/paging-search-select.component.html
@@ -12,7 +12,7 @@
   ~ limitations under the License.
   -->
 
-<div class="ddp-type-selectbox"
+<div class="ddp-type-selectbox ddp-flow"
      [class.ddp-disabled]="isDisabledOptions"
      [class.ddp-type-search-select]="isSearchOptions"
      [class.ddp-selected]="isShowOptions"
@@ -31,7 +31,7 @@
   <!-- //search -->
   <span class="ddp-txt-selectbox">{{getSelectedItem}}</span>
   <ul class="ddp-list-selectbox"
-      [ngClass]="{'ddp-selectdown': isUpSelect == false, 'ddp-pass' : isOptionToLeft, 'ddp-pass2' : !isOptionToLeft }"
+      [ngClass]="{'ddp-selectdown': isUpSelect == false}"
       infinite-scroll
       [scrollWindow]="false"
       [infiniteScrollDistance]="5"

diff --git a/...nd/src/app/data-preparation/dataset/create-dataset/create-dataset-db-query.component.html b/...nd/src/app/data-preparation/dataset/create-dataset/create-dataset-db-query.component.html
@@ -202,7 +202,7 @@
           <div class="ddp-ui-empty" *ngIf="clearGrid">
             {{'msg.dp.ui.no.preview' | translate}}
           </div>
-          <div *ngIf="databaseList.length > 0" grid-component style="width:100%; height:100%;" ></div>
+          <div [hidden]="clearGrid" grid-component style="width:100%; height:100%;" ></div>
         </div>
 
         <!-- //그리드 영역 -->

diff --git a/...tend/src/app/data-preparation/dataset/create-dataset/create-dataset-db-query.component.ts b/...tend/src/app/data-preparation/dataset/create-dataset/create-dataset-db-query.component.ts
@@ -818,15 +818,17 @@ export class CreateDatasetDbQueryComponent extends AbstractPopupComponent implem
    */
   private _drawGrid(headers: header[], rows : any[]) {
     // 그리드가 영역을 잡지 못해서 setTimeout으로 처리
-    setTimeout(() => {
-      this.gridComponent.create(headers, rows, new GridOption()
-        .SyncColumnCellResize(true)
-        .MultiColumnSort(true)
-        .RowHeight(32)
-        .NullCellStyleActivate(true)
-        .build()
-      )},400);
-    this.clickable = true;
+    if (this.gridComponent) {
+      setTimeout(() => {
+        this.gridComponent.create(headers, rows, new GridOption()
+          .SyncColumnCellResize(true)
+          .MultiColumnSort(true)
+          .RowHeight(32)
+          .NullCellStyleActivate(true)
+          .build()
+        )},400);
+      this.clickable = true;
+    }
   }
 
 

diff --git a/...d/src/app/data-preparation/dataset/create-dataset/create-dataset-db-select.component.html b/...d/src/app/data-preparation/dataset/create-dataset/create-dataset-db-select.component.html
@@ -29,19 +29,42 @@
     <div class="ddp-ui-dbconnect">
 
       <div class="ddp-edit-setting">
+
         <div class="ddp-wrap-edit3 ddp-type ddp-mgt0">
-          <label class="ddp-label-type ddp-bold">{{'msg.storage.ui.db.connection' | translate}}</label>
+          <label class="ddp-label-type ddp-bold ">{{'msg.storage.ui.db.connection' | translate}}</label>
           <!-- edit option -->
           <div class="ddp-ui-edit-option">
-            <!-- 선택시 ddp-selected 추가 -->
-            <component-select
-              [array]="connectionList"
-              [viewKey]="'name'"
-              [isDataprep]="true"
+            <component-paging-search-select *ngIf="connectionList.length > 0; else noConnection"
+              (onSelected)="onConnectionSelected($event)"
+              (onLoadPage)="onScrollPage($event)"
               [defaultIndex]="getConnectionDefaultIndex()"
-              (onSelected)="selectConnection($event)">
-            </component-select>
+              [array]="connectionList"
+              [isEnableObjectKey]="true"
+              [objectKey]="'name'"
+              [pageNum]="pageResult.number"
+              [usePlaceholder]="true"
+              [isConnection]="true"
+              [isOptionToLeft]="true"
+              [unselectedMessage]="'msg.storage.ui.load.dconn' | translate">
+            </component-paging-search-select>
+
+            <ng-template #noConnection>
+              <component-paging-search-select
+                (onSelected)="onConnectionSelected($event)"
+                (onLoadPage)="onScrollPage($event)"
+                [defaultIndex]="getConnectionDefaultIndex()"
+                [array]="connectionList"
+                [isEnableObjectKey]="true"
+                [objectKey]="'name'"
+                [pageNum]="pageResult.number"
+                [usePlaceholder]="true"
+                [isConnection]="true"
+                [isOptionToLeft]="true"
+                [unselectedMessage]="'msg.storage.ui.load.dconn' | translate">
+              </component-paging-search-select>
+            </ng-template>
           </div>
+
           <!-- //edit option -->
         </div>
       </div>

diff --git a/...end/src/app/data-preparation/dataset/create-dataset/create-dataset-db-select.component.ts b/...end/src/app/data-preparation/dataset/create-dataset/create-dataset-db-select.component.ts
@@ -18,12 +18,13 @@ import { PopupService } from '../../../common/service/popup.service';
 import {
   PrDatasetJdbc,
   DsType,
-  ImportType,
-  Connection
+  ImportType, QueryInfo, TableInfo,
 } from '../../../domain/data-preparation/pr-dataset';
 import { DataconnectionService } from '../../../dataconnection/service/dataconnection.service';
 import { isNullOrUndefined } from 'util';
 import {ConnectionComponent} from "../../../data-storage/component/connection/connection.component";
+import {PageResult} from "../../../domain/common/page";
+import {Dataconnection} from "../../../domain/dataconnection/dataconnection";
 
 @Component({
   selector: 'app-create-dataset-db-select',
@@ -48,7 +49,8 @@ export class CreateDatasetDbSelectComponent extends AbstractPopupComponent imple
   @Input()
   public datasetJdbc: PrDatasetJdbc;
 
-  public connectionList: Connection[];
+  public connectionList: Connection[] = [];
+
   /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
   | Constructor
   |-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
@@ -68,14 +70,17 @@ export class CreateDatasetDbSelectComponent extends AbstractPopupComponent imple
 
     super.ngOnInit();
 
-    if (isNullOrUndefined(this.datasetJdbc.connectionList)) {
+    this.pageResult.number = 0;
+    this.pageResult.size = 20;
 
+    // 처음
+    if (isNullOrUndefined(this.datasetJdbc.connectionList)) {
       this.datasetJdbc.dsType = DsType.IMPORTED;
       this.datasetJdbc.importType = ImportType.DATABASE;
       this._getConnections();
-
     } else {
-      console.info('this.datasetJdbc --> ' , this.datasetJdbc);
+
+      // 이미 커넥션 리스트가 있음
       this.connectionList = this.datasetJdbc.connectionList;
       this._connectionComponent.init(this.datasetJdbc.dataconnection.connection);
       this._connectionComponent.isValidConnection = true;
@@ -125,13 +130,11 @@ export class CreateDatasetDbSelectComponent extends AbstractPopupComponent imple
 
 
   /**
-   * On select connection
+   * Initialise _connection component
    * @param connection
    */
   public selectConnection(connection) {
-
     if (!isNullOrUndefined(connection)) {
-      this.datasetJdbc.dcId = connection.id;
       this._connectionComponent.init(connection);
     } else {
       this._connectionComponent.init();
@@ -140,6 +143,23 @@ export class CreateDatasetDbSelectComponent extends AbstractPopupComponent imple
   }
 
 
+  /**
+   * Get connection detail information
+   */
+  public getConnectionDetail() {
+
+    this.loadingShow();
+    //  get connection data in preset
+    this.connectionService.getDataconnectionDetail(this.datasetJdbc.dcId)
+      .then((connection: Dataconnection) => {
+        // loading hide
+        this.loadingHide();
+        this.selectConnection(connection);
+      })
+      .catch(error => this.commonExceptionHandler(error));
+  }
+
+
   /**
    * Check if user can proceed to next step
    * @returns {boolean}
@@ -161,55 +181,123 @@ export class CreateDatasetDbSelectComponent extends AbstractPopupComponent imple
       })
       : 0;
   }
+
+
+  /**
+   * When it's scrolled
+   * @param number
+   */
+  public onScrollPage(number) {
+    // if remain next page
+    if (this._isMorePage()) {
+      // save pageResult
+      this.pageResult.number = number;
+      // get more preset list
+      this._getConnections();
+    }
+  }
+
+
+  /**
+   * When a connection is selected from list
+   * @param event
+   */
+  public onConnectionSelected(event) {
+
+    // only fetch data when it's different
+    if (this.datasetJdbc.dcId !== event.id) {
+      this.datasetJdbc.dcId = event.id;
+      this.getConnectionDetail();
+
+      // refresh existing data
+      this.datasetJdbc.sqlInfo = new QueryInfo();
+      this.datasetJdbc.tableInfo = new TableInfo();
+      this.datasetJdbc.rsType = undefined;
+    }
+  }
+
   /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
   | Protected Method
   |-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
 
   /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
   | Private Method
   |-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
+  /**
+   * Get parameter for connection list
+   * @param {PageResult} pageResult
+   * @returns {Object}
+   * @private
+   */
+  private _getConnectionPresetListParams(pageResult: PageResult): object {
+    return {
+      authenticationType:'MANUAL',
+      size: pageResult.size,
+      page: pageResult.number,
+      type: 'jdbc'
+    };
+  }
+
+
+
   /**
    * Fetch dataset connections
    */
   private _getConnections() {
 
-    const connParam = {projection:'default'};
-
+    this.loadingShow();
 
-    // 먼저 초기화 하는게 맞을까
-    this.connectionList = [];
-    this.connectionService.getDataconnections(connParam)
+    this.connectionService.getAllDataconnections(this._getConnectionPresetListParams(this.pageResult), 'forSimpleListView')
       .then((data) => {
 
         // 리스트가 있다면
-        if (data.hasOwnProperty('_embedded') && data['_embedded'].hasOwnProperty('connections')) {
+        if (data.hasOwnProperty('_embedded')) {
 
-          // FIXME : only MANUAL type can be used to make dataset (No server side API)
-          this.connectionList = data['_embedded']['connections'].filter((item) => {
-            return item.authenticationType === 'MANUAL'
-          });
+          // 리스트 추가
+          this.connectionList = this.connectionList.concat(data['_embedded'].connections);
 
-          // Manual type 인 커넥션 리스트만 체크
           if (this.connectionList.length !== 0 ) {
-            this.selectConnection(this.connectionList[0]);
+
+            // 첫번째 커넥션 등록
+            this.datasetJdbc.dcId = this.connectionList[0].id;
+            this.getConnectionDetail();
           } else {
+
+            this.loadingHide();
             // 커넥션 리스트가 0개 라면
             this.selectConnection(null);
           }
 
         } else {
+          this.loadingHide();
           // no connections
           this.connectionList = [];
           this.selectConnection(null)
         }
+
+        this.pageResult = data['page'];
+
       })
       .catch((err) => {
+        this.loadingHide();
         console.info('getConnections err)', err.toString());
       });
   }
 
 
+  /**
+   * Check if there's more pages to load
+   * @private
+   */
+  private _isMorePage(): boolean {
+    return (this.pageResult.number < this.pageResult.totalPages - 1);
+  }
 
+}
 
-
+class Connection {
+  id: string;
+  implementor: string;
+  name: string;
+  type: string;
 }
diff --git a/discovery-frontend/src/app/domain/data-preparation/pr-dataset.ts b/discovery-frontend/src/app/domain/data-preparation/pr-dataset.ts
@@ -161,7 +161,7 @@ export class PrDatasetJdbc extends PrDataset {
   public tableInfo? : TableInfo;
 
   public dataconnection: any;
-  public connectionList?: Connection[];
+  public connectionList?: any[];
 }
 
 export class Rule {
@@ -227,24 +227,3 @@ export class SheetInfo {
   sheetName?: string;
   columnCount? : number;
 }
-
-
-export class Connection {
-  authentication : string;
-  connectionInformation : any;
-  createdBy: UserDetail;
-  createdTime: Date;
-  database:string;
-  hostname: string;
-  id: string;
-  implementor:string;
-  linkedWorkspaces: number;
-  modifiedTime: UserDetail;
-  name: string;
-  password: string;
-  port: number;
-  published: boolean;
-  supportSaveAsHiveTable: boolean;
-  type: string;
-  username: string;
-}
diff --git a/discovery-frontend/src/assets/css/metatron/component/component.form.css b/discovery-frontend/src/assets/css/metatron/component/component.form.css
@@ -130,10 +130,6 @@
 .ddp-wrap-edit3 .ddp-wrap-hover-info .ddp-box-layout4 {display:none; position:absolute; top:-15px; left:20px; width:320px;}
 .ddp-wrap-edit3 .ddp-wrap-hover-info:hover .ddp-box-layout4 {display:block;}
 
-/*.ddp-info-inline .ddp-wrap-hover-info {display:inline-block; position:relative; vertical-align: middle; cursor: pointer;}*/
-/*.ddp-info-inline .ddp-wrap-hover-info em.ddp-icon-info3 {display:inline-block; position:relative; top:-1px; width:11px; height:11px; background:url(../../../images/icon_que.png) no-repeat; background-position:left -12px;}*/
-/*.ddp-info-inline .ddp-wrap-hover-info .ddp-box-layout4 {display:none; position:absolute; top:-40px; left:20px; width:240px;}*/
-/*.ddp-info-inline .ddp-wrap-hover-info .ddp-box-layout4.ddp-bottom {top:inherit; bottom:-30px;}*/
 
 .ddp-wrap-edit3 .ddp-ui-edit-suboption {overflow:hidden;}
 .ddp-wrap-edit3 .ddp-ui-edit-option .ddp-ui-option-in .ddp-input-typebasic {margin-top:-9px;}
@@ -160,7 +156,7 @@
 .ddp-wrap-edit3 .ddp-ui-edit-option.ddp-type.ddp-btn-multy .ddp-btn-gray {position:absolute; top:0; right:0; width:100px; padding:7px; text-align:center; box-sizing:border-box;}
 
 .ddp-wrap-edit3 .ddp-ui-edit-option .ddp-data-error {position:absolute; bottom:4px; left:0; color:#e70000; font-size:12px; font-style:italic;}
-.ddp-wrap-edit3 .ddp-ui-edit-option .ddp-data-error:before {display:inline-block; width:13px; height:13px; vertical-align:middle; background:url(../../../images/icon_info.png) no-repeat; background-position:-28px top; content:'';}
+.ddp-wrap-edit3 .ddp-ui-edit-option .ddp-data-error:before {display:inline-block; margin-right:2px; width:13px; height:13px; vertical-align:middle; background:url(../../../images/icon_info.png) no-repeat; background-position:-28px top; content:'';}
 
 .ddp-wrap-edit3 .ddp-ui-edit-option.ddp-error .ddp-data-error {bottom:-15px;}
 
@@ -184,6 +180,14 @@
 .ddp-table-detail.ddp-setting .ddp-wrap-edit3 label.ddp-label-type {width:195px;}
 .ddp-box-detail.ddp-label-size .ddp-wrap-edit3 label.ddp-label-type {width:150px;}
 
+.ddp-wrap-edit4 .ddp-label-type {padding-bottom:8px;font-size:13px; color:#4b515b}
+.ddp-wrap-edit4 .ddp-form-edit.type-file {white-space:nowrap;}
+.ddp-wrap-edit4 .ddp-form-edit.type-file input {display:inline-block; float:left; width:460px; margin-right:4px;}
+.ddp-wrap-edit4 .ddp-form-edit.type-file .ddp-btn-pop {float:left;}
+.ddp-wrap-edit4 .ddp-form-edit.type-file .ddp-form-file {display:inline-block;}
+.ddp-wrap-edit4 .ddp-form-edit.type-file .ddp-ui-message {display:inline-block; margin-left:10px;  white-space:nowrap; vertical-align: middle;}
+.ddp-wrap-edit4 .ddp-form-edit.type-file .ddp-ui-message [class*="ddp-data-"] {display:block; position:relative; top:6px; padding-top:0;}
+
 /**************************************************************
     popup edit
 **************************************************************/