Skip to content

Commit

Permalink
#534 Add icon by database type in workbench
Browse files Browse the repository at this point in the history
  • Loading branch information
@sting009
sting009 committed Oct 31, 2018
1 parent 0309a21 commit 8ac9b58
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 7 deletions.
20 changes: 17 additions & 3 deletions ...-workbench/detail-workbench-schema-browser/detail-workbench-schema-browser.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<!-- 미리보기 팝업 -->
<!-- 스키마정보팝업 ddp-type-scheme 추가 -->
<div class="ddp-pop-preview ddp-column-detail ddp-type-scheme" [class.ddp-full]="isFull" *ngIf="isShow">
<div class="ddp-pop-preview ddp-column-detail ddp-type-scheme popup-workbench" [class.ddp-full]="isFull" *ngIf="isShow">
<!-- top -->
<div class="ddp-ui-top">
<div class="ddp-data-name">
Expand All @@ -31,7 +31,21 @@
<div class="ddp-wrap-list">
<!-- top -->
<div class="ddp-ui-dataname">
<div class="ddp-top-title">
<div class="ddp-top-title ddp-dbtype">

<!-- icons -->
<div class="ddp-db-icons">
<em class="ddp-icon-data-tibero" style="display:none;"></em>
<em class="ddp-icon-data-oracle" style="display:none;"></em>
<em class="ddp-icon-data-db" style="display:none;"></em>
<em class="ddp-icon-data-phoenix" style="display:none;"></em>
<em [ngStyle]="{'display': dataConnection.implementor == getConnectionType('MYSQL') ? '':'none'}" class="ddp-icon-data-sql"></em>
<em [ngStyle]="{'display': dataConnection.implementor == getConnectionType('POSTGRESQL') ? '':'none'}" class="ddp-icon-data-post"></em>
<em [ngStyle]="{'display': dataConnection.implementor == getConnectionType('HIVE') ? '':'none'}" class="ddp-icon-data-hive"></em>
<em [ngStyle]="{'display': dataConnection.implementor == getConnectionType('PRESTO') ? '':'none'}" class="ddp-icon-data-presto"></em>
</div>
<!-- icons -->

<span class="ddp-txt-name">{{dataConnection.name}}</span>
<!-- 클릭시 ddp-selected 추가 -->
<div class="ddp-wrap-info"
Expand Down Expand Up @@ -149,7 +163,7 @@
<!-- //search -->
</div>
<!-- //title -->
<div class="ddp-pop-wrapList" grid-component #schemaMain (selectedEvent)="onSelectedTable($event)">
<div class="ddp-pop-wrapList" style="top: 183px;" grid-component #schemaMain (selectedEvent)="onSelectedTable($event)">
</div>
</div>
<!-- //data list -->
Expand Down
11 changes: 10 additions & 1 deletion ...il-workbench/detail-workbench-schema-browser/detail-workbench-schema-browser.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { GridOption } from '../../../../common/component/grid/grid.option';
import { CommonConstant } from '../../../../common/constant/common.constant';
import { WorkbenchService } from '../../../service/workbench.service';
import { ActivatedRoute } from '@angular/router';
import { Dataconnection } from '../../../../domain/dataconnection/dataconnection';
import {ConnectionType, Dataconnection} from '../../../../domain/dataconnection/dataconnection';
import { MetadataService } from '../../../../meta-data-management/metadata/service/metadata.service';
import * as _ from 'lodash';
import { isUndefined } from 'util';
Expand Down Expand Up @@ -1120,4 +1120,13 @@ export class DetailWorkbenchSchemaBrowserComponent extends AbstractWorkbenchComp
return params;
}

/**
* DataConnection Type icon
* @param connType
* @returns {any}
*/
public getConnectionType(connType: string) {
return ConnectionType[connType];
}

}
2 changes: 1 addition & 1 deletion ...p/workbench/component/detail-workbench/detail-workbench-table/detail-workbench-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<em class="ddp-btn-search-close" *ngIf="searchText" (click)="searchTableTextInit()"></em>
</div>
<!-- //search -->
<div class="ddp-ui-tablelist">
<div class="ddp-ui-tablelist" style="top: 145px;">
<ul class="ddp-list-table">
<li *ngFor="let item of tables; let index = index" (click)="setTableSql(item.name)" [class.ddp-info-selected]="selectedTableInfoLayer && index == selectedNum" >
<em class="ddp-icon-table"></em>
Expand Down
18 changes: 16 additions & 2 deletions discovery-frontend/src/app/workbench/workbench.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
</div>
</div>
<em class="ddp-bg-back"></em>
<div class="ddp-layout-contents2 ddp-wrap-workbench">
<div class="ddp-layout-contents2 ddp-wrap-workbench page-workbench">
<!-- lnb --->
<!-- 닫힐때 ddp-close 추가 -->
<div class="ddp-ui-benchlnb" [ngClass]="{'ddp-close':!isLeftMenuOpen || isQueryEditorFull===true}">
Expand All @@ -110,6 +110,20 @@
<!-- name -->
<div class="ddp-data-name">
<div class="ddp-txt-dataname">

<!-- icons -->
<div class="ddp-db-icons">
<em class="ddp-icon-data-tibero" style="display:none;"></em>
<em class="ddp-icon-data-oracle" style="display:none;"></em>
<em class="ddp-icon-data-db" style="display:none;"></em>
<em class="ddp-icon-data-phoenix" style="display:none;"></em>
<em [ngStyle]="{'display': workbench.dataConnection.implementor == getConnectionType('MYSQL') ? '':'none'}" class="ddp-icon-data-sql"></em>
<em [ngStyle]="{'display': workbench.dataConnection.implementor == getConnectionType('POSTGRESQL') ? '':'none'}" class="ddp-icon-data-post"></em>
<em [ngStyle]="{'display': workbench.dataConnection.implementor == getConnectionType('HIVE') ? '':'none'}" class="ddp-icon-data-hive"></em>
<em [ngStyle]="{'display': workbench.dataConnection.implementor == getConnectionType('PRESTO') ? '':'none'}" class="ddp-icon-data-presto"></em>
</div>
<!-- icons -->

<span class="ddp-txt-in" title="{{workbench.dataConnection.name}}">{{workbench.dataConnection.name}}</span>
<!-- info 버튼 클릭시 ddp-selected 추가 -->
<div class="ddp-wrap-info" [ngClass]="{'ddp-selected':isDataConnectionInfoShow}">
Expand Down Expand Up @@ -283,7 +297,7 @@
<div class="ddp-data-title">
{{'msg.bench.ui.editor.shortcut.title' | translate}}
</div>
<div class="ddp-wrap-data-detail">
<div class="ddp-wrap-data-detail ddp-padt0">
<table class="ddp-table-pop">
<colgroup>
<col width="136px">
Expand Down
17 changes: 17 additions & 0 deletions discovery-frontend/src/app/workbench/workbench.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2841,6 +2841,16 @@ export class WorkbenchComponent extends AbstractComponent implements OnInit, OnD
return visibleTab && runningTab && runningTab.id === visibleTab.id;
} // function - _isEqualRunningVisibleTab


/**
* DataConnection Type icon
* @param connType
* @returns {any}
*/
public getConnectionType(connType: string) {
return DataConnectionType[connType];
}

}

// 리스트 슬라이드아이콘 관리용 객체
Expand Down Expand Up @@ -2987,3 +2997,10 @@ class QueryResult {
public finishDateTime: string;
public tempTable: string;
}

enum DataConnectionType {
MYSQL = <any>'MYSQL',
HIVE = <any>'HIVE',
POSTGRESQL = <any>'POSTGRESQL',
PRESTO = <any>'PRESTO'
}
105 changes: 105 additions & 0 deletions discovery-frontend/src/assets/css/polaris.v2.page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8585,3 +8585,108 @@ table tr td .ddp-status-button .ddp-btn-status-status {width:11px; height:11px;
.ddp-type-dataset .ddp-wrap-variable {position:absolute; top:43px; left:0; right:0; bottom:0;}
.ddp-type-dataset .ddp-wrap-grid {height:100%; padding-bottom:44px; box-sizing:border-box;}
.ddp-type-dataset .ddp-wrap-viewtable {height:100%;}

/**************************************************************
Page : 워크벤치 상세 (lnb)
**************************************************************/
.page-workbench .ddp-ui-benchlnb .ddp-data-name .ddp-txt-dataname {padding-left:30px;}
.page-workbench .ddp-db-icons {position:absolute; top:0; left:0;}
.page-workbench .ddp-db-icons [class*="ddp-icon-data-"]{display:inline-block; background:url(../images/icon_dbtype_s.png) no-repeat;}

.page-workbench .ddp-db-icons .ddp-icon-data-sql {width:19px; height:22px; background-position:-23px -22px;}
.page-workbench .ddp-db-icons .ddp-icon-data-tibero {width:19px; height:22px; background-position:left -135px;}
.page-workbench .ddp-db-icons .ddp-icon-data-oracle {width:21px; height:21px; background-position:left top;}
.page-workbench .ddp-db-icons .ddp-icon-data-db {width:16px; height:19px; background-position:left -158px;}
.page-workbench .ddp-db-icons .ddp-icon-data-phoenix {width:16px; height:24px; background-position:left -110px;}
.page-workbench .ddp-db-icons .ddp-icon-data-post {width:22px; height:22px; background-position:left -45px;}
.page-workbench .ddp-db-icons .ddp-icon-data-hive {width:24px; height:22px; background-position:left -68px;}
.page-workbench .ddp-db-icons .ddp-icon-data-presto {width:20px; height:17px; background-position:left -91px;}
.page-workbench .ddp-wrap-list-search {padding:0 18px;}
.page-workbench .ddp-wrap-list-search .ddp-ui-list-search {position:relative; padding-left:22px; overflow:hidden;}
.page-workbench .ddp-wrap-list-search .ddp-ui-list-search:before {display:inline-block; position:absolute; top:50%; left:0; margin-top:-6px;width:11px; height:11px; background:url(../images/icon_search.png) no-repeat; content:'';}
.page-workbench .ddp-wrap-list-search .ddp-ui-list-search input {display:block; width:100%; padding:16px 0 16px 0; background:none; border:none; color:#fff; font-size:13px;}
.page-workbench .ddp-wrap-list-search a.ddp-btn-refresh {float:right; position:relative; top:18px;width:13px; height:12px; background:url(../images/icon_refresh2.png) no-repeat;}
.page-workbench .ddp-wrap-list-search a.ddp-btn-refresh:hover {background-position:-14px top;}
.page-workbench .ddp-ui-tablelist {top:175px;}
.page-workbench .ddp-ui-tablelist .ddp-list-table {padding-top:10px }
.page-workbench .ddp-tablelist-header {padding:2px 18px; height:25px; border-top:1px solid #4b515b; border-bottom:1px solid #4b515b; background-color:rgba(75,81,91,0.3); box-sizing:border-box;}
.page-workbench .ddp-tablelist-header .ddp-table-num {float:right; color:#90969f; font-weight:300;}
.page-workbench .ddp-tablelist-header .ddp-table-num span.ddp-number {font-weight:normal;}
.page-workbench .ddp-tablelist-header .ddp-table-title {display:block; color:#90969f; font-size:12px; overflow:Hidden;}
.page-workbench .ddp-tablelist-header .ddp-table-title [class*="ddp-icon-sort"] {display:inline-block; position:relative; width:19px; height:19px; font-size:0px; vertical-align: middle;}
.page-workbench .ddp-tablelist-header .ddp-table-title [class*="ddp-icon-sort"]:before {display:inline-block; position:absolute; top:50%; left:50%; width:7px; height:10px; margin:-5px 0 0 -4px; background:url(../images/icon_sorting.png);content:'';}
.page-workbench .ddp-tablelist-header .ddp-table-title .ddp-icon-sort-asc:before {background-position:-8px top;}
.page-workbench .ddp-tablelist-header .ddp-table-title .ddp-icon-sort-des:before {background-position:-16px top;}

/**************************************************************
Page : 워크벤치 상세 (contents)
**************************************************************/
.page-workbench .ddp-ui-query {bottom:10px;}
.page-workbench .ddp-wrap-editor .ddp-box-layout4.ddp-shortcuts {display:block; position:absolute; top:8px; right:8px; bottom:46px; width:auto; overflow:auto; background-color:#fff; z-index:10;}
.page-workbench .ddp-wrap-editor .ddp-box-layout4.ddp-shortcuts * { font-family:'SpoqaHanSans',sans-serif}
.page-workbench .ddp-wrap-editor .ddp-box-layout4.ddp-shortcuts .ddp-table-pop {white-space:nowrap; width:auto;}
.page-workbench .ddp-box-editer .ddp-wrap-edit-foot {bottom:6px;}

.page-workbench .ddp-ui-tabs ul.ddp-list-tabs li .ddp-wrap-retry {position:absolute; bottom:100%; padding-bottom:5px; }
.page-workbench .ddp-ui-tabs ul.ddp-list-tabs li .ddp-wrap-retry .ddp-box-tabs-popup {position:relative;}

/**************************************************************
Page : 워크벤치 상세 (rnb)
**************************************************************/
.page-workbench .ddp-ui-rnb-contents .ddp-ui-var-plus .ddp-ui-addview {margin-top:-16px;}
.page-workbench .ddp-ui-rnb-contents .ddp-ui-title {margin-left:0px; padding-left:15px;}

/**************************************************************
Page : 워크벤치 상세 (rnb) Global variable
**************************************************************/
.page-workbench .ddp-ui-rnb-contents .ddp-ui-title span.ddp-data-num {margin-left:3px}
.page-workbench .ddp-ui-rnb-contents .ddp-ui-var-plus .ddp-ui-addview .ddp-box-addview {margin-bottom:2px;}
.page-workbench .ddp-ui-var-plus .ddp-list-form-plus .ddp-wrap-link-list.ddp-edit {background-color:#e7e7ea;}
.ddp-ui-var-plus .ddp-list-form-plus .ddp-link-buttons .ddp-btn-pop {min-width:inherit; padding:6px 12px;}
/**************************************************************
Page : 워크벤치 상세 스키마
**************************************************************/
.popup-workbench {}
.popup-workbench .ddp-wrap-list .ddp-ui-dataname .ddp-top-title {padding-left:30px;}

.popup-workbench .ddp-db-icons {position:absolute; top:0; left:0;}
.popup-workbench .ddp-db-icons [class*="ddp-icon-data-"]{display:inline-block; background:url(../images/icon_dbtype_s.png) no-repeat;}

.popup-workbench .ddp-db-icons .ddp-icon-data-sql {width:19px; height:22px; background-position:left -22px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-tibero {width:19px; height:22px; background-position:left -135px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-oracle {width:21px; height:21px; background-position:left top;}
.popup-workbench .ddp-db-icons .ddp-icon-data-db {width:16px; height:19px; background-position:left -158px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-phoenix {width:16px; height:24px; background-position:left -110px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-post {width:22px; height:22px; background-position:left -45px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-hive {width:24px; height:22px; background-position:left -68px;}
.popup-workbench .ddp-db-icons .ddp-icon-data-presto {width:20px; height:17px; background-position:left -91px;}

.popup-workbench.ddp-column-detail .ddp-wrap-list .ddp-ui-title.ddp-bottom {padding-top:20px; padding-bottom:0; border:none;}

.popup-workbench .ddp-wrap-list-search {padding:0 18px; margin:0 -16px; }
.popup-workbench .ddp-wrap-list-search .ddp-ui-list-search {position:relative; padding-left:22px; overflow:hidden;}
.popup-workbench .ddp-wrap-list-search .ddp-ui-list-search:before {display:inline-block; position:absolute; top:50%; left:0; margin-top:-6px;width:11px; height:11px; background:url(../images/icon_search.png) no-repeat; background-position:-12px 0; content:'';}
.popup-workbench .ddp-wrap-list-search .ddp-ui-list-search input {display:block; width:100%; padding:19px 0 19px 0; background:none; border:none; font-size:13px;}
.popup-workbench .ddp-wrap-list-search a.ddp-btn-refresh {float:right; position:relative; top:18px;width:13px; height:12px; background:url(../images/icon_refresh2.png) no-repeat; background-position:-28px top;}
.popup-workbench .ddp-wrap-list-search a.ddp-btn-refresh:hover {background-position:-42px top;}


.popup-workbench .ddp-tablelist-header {padding:3px 18px; height:27px; margin:0 -16px;border-top:1px solid #e7e7ea; border-bottom:1px solid #e7e7ea; box-sizing:border-box;}
.popup-workbench .ddp-tablelist-header .ddp-table-num {float:right; position:relative; top:2px; font-size:12px; color:#4b515b; font-weight:300;}
.popup-workbench .ddp-tablelist-header .ddp-table-num span.ddp-number {font-weight:normal;}
.popup-workbench .ddp-tablelist-header .ddp-table-title {display:block; color:#90969f; font-size:12px; font-weight:normal; overflow:Hidden;}
.popup-workbench .ddp-tablelist-header .ddp-table-title [class*="ddp-icon-sort"] {display:inline-block; position:relative; width:19px; height:19px; font-size:0px;
vertical-align: middle;}
.popup-workbench .ddp-tablelist-header .ddp-table-title [class*="ddp-icon-sort"]:before {display:inline-block; position:absolute; top:50%; left:50%; width:7px; height:10px; margin:-5px 0 0 -4px; background:url(../images/icon_sorting.png);content:'';}
.popup-workbench .ddp-tablelist-header .ddp-table-title .ddp-icon-sort-asc:before {background-position:-8px top;}
.popup-workbench .ddp-tablelist-header .ddp-table-title .ddp-icon-sort-des:before {background-position:-16px top;}

.popup-workbench .ddp-pop-wrapList {top:214px;}
.ddp-pop-preview.ddp-type-scheme.popup-workbench .ddp-type-top-option .ddp-ui-tab-contents .ddp-wrap-searching {padding:0 15px;}
.popup-workbench .ddp-ui-tab-contents .ddp-wrap-list-search .ddp-ui-list-search input {padding:14px 0 14px 0;}
.popup-workbench .ddp-wrap-detail-column {position:absolute; top:44px; left:0; right:0; bottom:0; padding:10px 30px 0 30px; overflow:auto;}
.popup-workbench table.ddp-table-detail2 tr th {color:#90969f;}
.popup-workbench table.ddp-table-detail2 tr td .ddp-link-url {color:#69a2f8; font-size:13px;}
.popup-workbench.ddp-column-detail .ddp-ui-detail {border-top:none;}

.popup-workbench .ddp-ui-preview-contents .ddp-ui-detail + .ddp-ui-detail .ddp-ui-title {padding-top:0px;}
Binary file modified discovery-frontend/src/assets/images/icon_dbtype_s.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added discovery-frontend/src/assets/images/icon_refresh2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added discovery-frontend/src/assets/images/icon_sorting.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8ac9b58

Please sign in to comment.