Add profiling module Add data profiling module to get some information about data after calculate
Author: dodobel <[email protected]> Closes #183 from dodobel/develop. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/a714b60c Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/a714b60c Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/a714b60c Branch: refs/heads/master Commit: a714b60c96ebbe29aee7d4c1013f0b5b7f71b9b1 Parents: 8e9b50f Author: dodobel <[email protected]> Authored: Tue Nov 28 12:48:58 2017 +0800 Committer: Lionel Liu <[email protected]> Committed: Tue Nov 28 12:48:58 2017 +0800 ---------------------------------------------------------------------- ui/angular/src/app/app.component.html | 111 ++-- ui/angular/src/app/app.component.ts | 16 +- .../src/app/dataasset/dataasset.component.html | 153 +++-- ui/angular/src/app/health/health.component.html | 5 +- ui/angular/src/app/health/health.component.ts | 84 +-- .../app/job/create-job/create-job.component.css | 12 +- .../job/create-job/create-job.component.html | 78 +-- .../app/job/create-job/create-job.component.ts | 16 +- ui/angular/src/app/job/job.component.css | 2 +- ui/angular/src/app/job/job.component.ts | 2 - ui/angular/src/app/login/login.component.html | 126 ++-- ui/angular/src/app/login/login.component.ts | 6 +- .../measure/create-measure/ac/ac.component.html | 609 +++++++++---------- .../measure/create-measure/ac/ac.component.ts | 157 ++--- .../create-measure.component.html | 199 +++--- .../create-measure/create-measure.component.ts | 16 +- .../measure/create-measure/pr/pr.component.html | 120 ++-- .../measure/create-measure/pr/pr.component.ts | 408 +++++-------- .../create-measure/pr/rule/rule.component.css | 20 + .../create-measure/pr/rule/rule.component.html | 6 +- .../measure-detail.component.html | 164 ++--- .../measure-detail/measure-detail.component.ts | 36 +- .../src/app/measure/measure.component.css | 2 +- ui/angular/src/app/measure/measure.component.ts | 37 +- .../detail-metric/detail-metric.component.html | 17 +- .../detail-metric/detail-metric.component.ts | 2 +- ui/angular/src/app/metric/metric.component.css | 30 +- ui/angular/src/app/metric/metric.component.html | 78 ++- ui/angular/src/app/metric/metric.component.ts | 161 ++--- .../src/app/sidebar/sidebar.component.css | 16 +- .../src/app/sidebar/sidebar.component.html | 109 ++-- ui/angular/src/app/sidebar/sidebar.component.ts | 59 +- ui/angular/src/main.ts | 1 + ui/angular/src/styles.css | 32 +- ui/pom.xml | 2 +- 35 files changed, 1399 insertions(+), 1493 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/app.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.component.html b/ui/angular/src/app/app.component.html index 6a21ed3..a5dc4ed 100644 --- a/ui/angular/src/app/app.component.html +++ b/ui/angular/src/app/app.component.html @@ -16,81 +16,72 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <!--The content below is only a placeholder and can be replaced.--> <div *ngIf="ntAccount"> <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl"> <div class="container-fluid"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a routerLink="/" class="navbar-brand" style="padding-top:5px;padding-bottom:0;"><img src="/assets/img/logo.png" title="Data Quality Service" style="max-height:40px;"/></a> - </div> - - <div class="collapse navbar-collapse" id="navbar-collapse"> - <ul class="nav navbar-nav"> - <li><a routerLink="/health" routerLinkActive="active" class="changecolor">Health</a></li> - <li><a routerLink="/measures" class="highlight">Measures</a></li> - <li><a routerLink="/jobs">Jobs</a></li> - <li><a routerLink="/mydashboard">My Dashboard</a></li> - </ul> - - <ul class="nav navbar-nav navbar-right"> - <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="toggle">{{fullName}} <i class="fa fa-user fa-fw"></i><span class="caret"></span></a> - <ul class="dropdown-menu dropdown-user"> - <li><a href="#!/undercons"><i class="fa fa-user fa-fw"></i> User Profile</a></li> - <li><a href="#!/undercons"><i class="fa fa-gear fa-fw"></i> Settings</a></li> - <li class="divider"></li> - <li><a href="/apidocs/index.html" target="_blank"><i class="fa fa-book fa-fw"></i> API DOCs</a></li> - <li><a href="https://github.com/eBay/griffin/blob/master/griffin-doc/userguide.md"; target="_blank"><i class="fa fa-question-circle fa-fw"></i> User Guide</a></li> - <li><a href="mailto://[email protected]"; ><i class="fa fa-envelope fa-fw"></i> Contact us</a></li> - <li class="divider"></li> - <li><a (click)="logout()" class="re"><i class="fa fa-sign-out fa-fw"></i> Logout</a> - </li> - </ul> - </li> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a routerLink="/" class="navbar-brand" style="padding-top:5px;padding-bottom:0;"><img src="/assets/img/logo.png" title="Data Quality Service" style="max-height:40px;"/></a> + </div> + <div class="collapse navbar-collapse" id="navbar-collapse"> + <ul class="nav navbar-nav"> + <li><a routerLink="/health" routerLinkActive="active" class="changecolor">Health</a></li> + <li><a routerLink="/measures" class="highlight">Measures</a></li> + <li><a routerLink="/jobs">Jobs</a></li> + <li><a routerLink="/mydashboard">My Dashboard</a></li> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="toggle">{{fullName}} <i class="fa fa-user fa-fw"></i><span class="caret"></span></a> + <ul class="dropdown-menu dropdown-user"> + <li><a href="#!/undercons"><i class="fa fa-user fa-fw"></i> User Profile</a></li> + <li><a href="#!/undercons"><i class="fa fa-gear fa-fw"></i> Settings</a></li> + <li class="divider"></li> + <li><a href="/apidocs/index.html" target="_blank"><i class="fa fa-book fa-fw"></i> API DOCs</a></li> + <li><a href="https://github.com/eBay/griffin/blob/master/griffin-doc/userguide.md"; target="_blank"><i class="fa fa-question-circle fa-fw"></i> User Guide</a></li> + <li><a href="mailto://[email protected]";><i class="fa fa-envelope fa-fw"></i> Contact us</a></li> + <li class="divider"></li> + <li><a (click)="logout()" class="re"><i class="fa fa-sign-out fa-fw"></i> Logout</a> + </li> </ul> - - <form class="navbar-search navbar-right nav navbar-nav" > - <input id="searchBox" type="text" class="search-query" placeholder="Search..." ng-disabled="!isActive('/measures')&&!isActive('/dataassets')"> - </form> - </div> + </li> + </ul> + <form class="navbar-search navbar-right nav navbar-nav"> + <input id="searchBox" type="text" class="search-query" placeholder="Search..." ng-disabled="!isActive('/measures')&&!isActive('/dataassets')"> + </form> + </div> </div> </nav> - - <div class="container-fluid" us-spinner="{color:'#ffffff', lines:13, width:14, length:28, radius:42, shadow:true, hwaccel:true, speed:0.8}" spinner-on="false" style="padding-top:56px;padding-bottom:90px;height:100%;padding-right:0;" id="mainContent"> - - - <div class="col-md-9 col-xs-12" > - <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 30px; z-index:99" (click)="goback();"><span style="margin-bottom:20px;">Back</span></button> - <!-- main content goes here--> - <div id="mainWindow" (window:resize)="onResize($event)" class="row" ng-view style="overflow-y: auto;overflow-x:hidden; padding-right: 10px;" > + <div class="container-fluid" us-spinner="{color:'#ffffff', lines:13, width:14, length:28, radius:42, shadow:true, hwaccel:true, speed:0.8}" spinner-on="false" style="padding-top:56px;padding-bottom:90px;height:100%;padding-right:0;" id="mainContent"> + <div class="col-md-9 col-xs-12"> + <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 30px; z-index:99" (click)="goback();"><span style="margin-bottom:20px;">Back</span></button> + <!-- main content goes here--> + <div id="mainWindow" (window:resize)="onResize($event)" class="row" ng-view style="padding-right: 10px;"> <router-outlet></router-outlet> - </div> + </div> </div> - - <div class="col-xs-12 col-md-3" style="padding-right:0;"> - <app-sidebar></app-sidebar> + <div class="col-xs-12 col-md-3" style="padding-right:0;"> + <app-sidebar></app-sidebar> </div> - - <!-- <div id="footerwrap" class="navbar-fixed-bottom"> --> - <!-- <div class="container-fluid" class="ng-cloak"> --> - <!-- <div class="row " *ngIf="timestamp|date:'short'"> --> - <!--<p *ngIf="!notifications">{{timestamp|date:'short'}} - Welcome <label>{{fullName}}</label>!</p> + <div id="footerwrap" class="navbar-fixed-bottom"> + <!-- <div class="container-fluid" class="ng-cloak"> --> + <!-- <div class="row " *ngIf="timestamp|date:'short'"> --> + <!-- <p *ngIf="!notifications">{{timestamp|date:'short'}} - Welcome <label>{{fullName}}</label>!</p> <p *ngFor="let r of notifications"> {{r.timestamp|date:'short'}} - <label>{{r.owner}}</label> {{r.operation}}d a {{r.target}} named <a *ngIf="r.target=='model'" routerLink="/viewrule/{{r.name}}">{{r.name}}</a> <label *ngIf="r.target=='dataasset'">"{{r.name}}"</label> </p> </div> - </div> - </div>--> -</div> + </div> --> + </div> + </div> </div> <app-login></app-login> <!-- <div *ngIf="!ntAccount" id="content" class="container-fluid"> @@ -161,4 +152,4 @@ under the License. </div> - --> \ No newline at end of file + --> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/app.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.component.ts b/ui/angular/src/app/app.component.ts index 48ed646..3f89ff0 100644 --- a/ui/angular/src/app/app.component.ts +++ b/ui/angular/src/app/app.component.ts @@ -14,7 +14,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component ,Directive,ViewContainerRef} from '@angular/core'; +import { Component ,Directive,ViewContainerRef,OnInit,AfterViewChecked} from '@angular/core'; // import { RouterModule, Routes } from '@angular/router'; import { Router} from "@angular/router"; import { HttpClient} from '@angular/common/http'; @@ -35,7 +35,7 @@ import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common styleUrls: ['./app.component.css'], providers:[ServiceService,UserService] }) -export class AppComponent { +export class AppComponent implements AfterViewChecked, OnInit{ title = 'app'; ntAccount : string; timestamp:Date; @@ -55,7 +55,8 @@ export class AppComponent { } resizeMainWindow(){ - $('#mainWindow').height(window.innerHeight-56-90); + // $('#mainWindow').height(window.innerHeight-56-90); + $('#mainWindow').height(window.innerHeight-56-20); } logout(){ this.ntAccount = undefined; @@ -65,4 +66,13 @@ export class AppComponent { window.location.reload(); // window.location.replace ('login'); } + ngAfterViewChecked(){ + this.resizeMainWindow(); + $('#rightbar').css({ + height: $('#mainWindow').height()+20 + }); + $('#side-bar-metrics').css({ + height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 + }); + } } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/dataasset/dataasset.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/dataasset/dataasset.component.html b/ui/angular/src/app/dataasset/dataasset.component.html index 71efce3..f12a868 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.html +++ b/ui/angular/src/app/dataasset/dataasset.component.html @@ -16,92 +16,89 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div class="bs-component" > - <div id="assetContainer" style="margin-top:40px"> +<div class="bs-component"> + <div id="assetContainer" style="margin-top:40px"> <table> - <tr> - <td colspan="7" style="text-align:center;display: none" id="message"> - No content. - </td> - <td class="icon"> - <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> - </td> - </tr> + <tr> + <td colspan="7" style="text-align:center;display: none" id="message"> + No content. + </td> + <td class="icon"> + <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> + </td> + </tr> </table> <table class="table table-striped reco" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="5"> - <thead> - <tr style="background-color:#7D95CC"> - <th st-ratio="10">Table Name</th> - <th st-ratio="10">DB Name</th> - <th st-ratio="20">Owner</th> - <th st-ratio="10">Creation Time</th> - <th st-ratio="20">Last Access Time</th> - <th st-ratio="20">Location</th> - - </tr> - </thead> - <tbody> - <tr *ngIf="!results"> - <td *ngIf="!results" colspan="7" style="text-align:center"> - No content. - </td> - <td class="icon"> - <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> - </td> - </tr> - </tbody> - <tbody *ngFor="let row of mf.data" style="word-break:break-all;"> - <tr> - <td [ngClass]="{accordion:true}" (click)="row.showDetail=!(row.showDetail)" style="cursor: pointer;"> - <i *ngIf="!row.showDetail" class="fa fa-chevron-circle-right blue"></i> - <i *ngIf="row.showDetail" class="fa fa-chevron-circle-down blue"></i> - {{row.tableName}}</td> - <td>{{row.dbName || 'N/A'}}</td> - <td>{{row.owner || 'N/A'}}</td> - <td>{{(row.createTime * 1000 | date: 'short') || 'N/A'}}</td> - <td>{{(row.lastAccessTime * 1000 | date: 'short') || 'N/A' }}</td> - <td>{{row.sd.location || 'N/A'}}</td> - </tr> - <tr *ngIf="row.showDetail"> - <td colspan="7" style="padding:20px 30px 10px 30px;"> - <table class="table table-striped co" [mfData]="row.sd.cols" #mf2="mfDataTable"> - <thead> - <tr style="background-color:#7D95CC"> - <th st-ratio="15">Name</th> - <th st-ratio="15">Type</th> - <th st-ratio="15">Comment</th> - </tr> - </thead> - <tbody> - <tr *ngIf="!row.sd.cols"> - <td colspan="7" style="text-align:center">No content.</td> - </tr> - <tr *ngFor="let item of mf2.data"> - <td>{{item.name}}</td> - <td>{{item.type}}</td> - <td>{{item.comment || 'N/A'}}</td> - </tr> - </tbody> - <!-- <tfoot> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="10">Table Name</th> + <th st-ratio="10">DB Name</th> + <th st-ratio="20">Owner</th> + <th st-ratio="10">Creation Time</th> + <th st-ratio="20">Last Access Time</th> + <th st-ratio="20">Location</th> + </tr> + </thead> + <tbody> + <tr *ngIf="!results"> + <td *ngIf="!results" colspan="7" style="text-align:center"> + No content. + </td> + <td class="icon"> + <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> + </td> + </tr> + </tbody> + <tbody *ngFor="let row of mf.data" style="word-break:break-all;"> + <tr> + <td [ngClass]="{accordion:true}" (click)="row.showDetail=!(row.showDetail)" style="cursor: pointer;"> + <i *ngIf="!row.showDetail" class="fa fa-chevron-circle-right blue"></i> + <i *ngIf="row.showDetail" class="fa fa-chevron-circle-down blue"></i> {{row.tableName}} + </td> + <td>{{row.dbName || 'N/A'}}</td> + <td>{{row.owner || 'N/A'}}</td> + <td>{{(row.createTime * 1000 | date: 'short') || 'N/A'}}</td> + <td>{{(row.lastAccessTime * 1000 | date: 'short') || 'N/A' }}</td> + <td>{{row.sd.location || 'N/A'}}</td> + </tr> + <tr *ngIf="row.showDetail"> + <td colspan="7" style="padding:20px 30px 10px 30px;"> + <table class="table table-striped co" [mfData]="row.sd.cols" #mf2="mfDataTable"> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="15">Name</th> + <th st-ratio="15">Type</th> + <th st-ratio="15">Comment</th> + </tr> + </thead> + <tbody> + <tr *ngIf="!row.sd.cols"> + <td colspan="7" style="text-align:center">No content.</td> + </tr> + <tr *ngFor="let item of mf2.data"> + <td>{{item.name}}</td> + <td>{{item.type}}</td> + <td>{{item.comment || 'N/A'}}</td> + </tr> + </tbody> + <!-- <tfoot> <tr> <td colspan="8" class="text-right"> <mfBootstrapPaginator></mfBootstrapPaginator> </td> </tr> </tfoot> --> - </table> - </td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="8" class="text-right"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> + </table> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td colspan="8" class="text-right"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> + </tfoot> </table> - </div> + </div> </div> - http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/health/health.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/health/health.component.html b/ui/angular/src/app/health/health.component.html index f45e831..d512b40 100644 --- a/ui/angular/src/app/health/health.component.html +++ b/ui/angular/src/app/health/health.component.html @@ -16,9 +16,8 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <div class="tab-content" style='margin-top: '> - <div class="tab-pane fade active in" id="heatmap" > + <div class="tab-pane fade active in" id="heatmap"> <div echarts [options]="chartOption" class="demo-chart" id="chart1" (chartClick)="onChartClick($event)" style="margin-top: 50px;"></div> </div> -</div> \ No newline at end of file +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/health/health.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts index 7d745e9..1b53f4d 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -59,8 +59,8 @@ export class HealthComponent implements OnInit { onChartClick($event){ if($event.data.name){ - this.router.navigate(['/detailed/'+$event.data.name]); - window.location.reload(); + this.router.navigate(['/detailed/'+$event.data.name]); + window.location.reload(); } } @@ -72,40 +72,40 @@ export class HealthComponent implements OnInit { var sysId = 0; var metricId = 0; var result = []; - for(let sys of data){ - var item = { - 'id':'', - 'name':'', - children:[] - }; - item.id = 'id_'+sysId; - item.name = sys.name; - if (sys.metrics != undefined) { - item.children = []; - for(let metric of sys.metrics){ - var itemChild = { - id: 'id_' + sysId + '_' + metricId, - name: metric.name, - value: 1, - dq: metric.dq, - sysName: sys.name, - itemStyle: { - normal: { - color: '#4c8c6f' - } - }, - }; - if (metric.dqfail == 1) { - itemChild.itemStyle.normal.color = '#ae5732'; - } else { - itemChild.itemStyle.normal.color = '#005732'; - } - item.children.push(itemChild); - metricId++; - } + for(let sys of data){ + var item = { + 'id':'', + 'name':'', + children:[] + }; + item.id = 'id_'+sysId; + item.name = sys.name; + if (sys.metrics != undefined) { + item.children = []; + for(let metric of sys.metrics){ + var itemChild = { + id: 'id_' + sysId + '_' + metricId, + name: metric.name, + value: 1, + dq: metric.dq, + sysName: sys.name, + itemStyle: { + normal: { + color: '#4c8c6f' + } + }, + }; + if (metric.dqfail == 1) { + itemChild.itemStyle.normal.color = '#ae5732'; + } else { + itemChild.itemStyle.normal.color = '#005732'; + } + item.children.push(itemChild); + metricId++; } - result.push(item); - sysId ++; + } + result.push(item); + sysId ++; } return result; }; @@ -216,12 +216,14 @@ export class HealthComponent implements OnInit { this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { this.originalData = jobes; if(this.originalData.hits){ - this.metricData = this.originalData.hits.hits; - metricNode.details = this.metricData; - metricNode.name = this.metricData[0]._source.name; - metricNode.timestamp = this.metricData[0]._source.tmst; - metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; - this.pushToNode(jobMap, metricNode); + this.metricData = this.originalData.hits.hits; + if(this.metricData[0]._source.value.miss != undefined){ + metricNode.details = this.metricData; + metricNode.name = this.metricData[0]._source.name; + metricNode.timestamp = this.metricData[0]._source.tmst; + metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; + this.pushToNode(jobMap, metricNode); + } } }, err => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/job/create-job/create-job.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.css b/ui/angular/src/app/job/create-job/create-job.component.css index 0bfb175..bc9b681 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.css +++ b/ui/angular/src/app/job/create-job/create-job.component.css @@ -24,9 +24,13 @@ under the License. color: #b2c831; } +.btn-o{ + background:0 0!important; +} + legend{ - background-color: #1f1f1f; - color: #007AFF; + background-color: #000; + color: #007AFF; left: 10px; padding: 0 10px; position: absolute; @@ -48,6 +52,10 @@ fieldset { display: block; height: 320px; } + +.formStep{ + background-color: #000; +} .setcolor{ color: #b2c831; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/job/create-job/create-job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.html b/ui/angular/src/app/job/create-job/create-job.component.html index 28b990c..a71f622 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.html +++ b/ui/angular/src/app/job/create-job/create-job.component.html @@ -16,19 +16,18 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<div class="mask" *ngIf = 'maskOpen' (click)="close()"></div> - +<div class="mask" *ngIf='maskOpen' (click)="close()"></div> <div class="container-fluid"> <div class="row"> <h5 class="over-title margin-bottom-15 job">Create Job</h5> - </div><!--//row--> + </div> + <!--//row--> <div class="row"> <!-- <form name="Form" id="form" novalidate> --> - <form name= "Form" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate> - <div class="formStep" > + <form name="Form" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate> + <div class="formStep"> <label class="stepDesc info">Please setup the job required information</label> <div class="container-fluid"> - <!-- schema definition list --> <div class="col-md-12 col-lg-12 col-sm-12"> <fieldset (window:resize)="onResize($event)"> @@ -37,16 +36,12 @@ under the License. </legend> <div class="y-scrollable"> <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group" - [ngClass]="{'has-error':jobName.dirty&&jobName.invalid, 'has-success':jobName.valid}"> + <div class="form-group" [ngClass]="{'has-error':jobName.dirty&&jobName.invalid, 'has-success':jobName.valid}"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Source Pattern<span class="symbol required"></span>: </label> - <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="sourcePat" #jobName="ngModel" name="jobName" placeholder="Please input the source partition, such as 'YYYYMMdd-HH'." required - pattern="YYYYMMdd-HH" - maxlength='11'> + <input type="text" class="form-control" [(ngModel)]="sourcePat" #jobName="ngModel" name="jobName" placeholder="Please input the source partition, such as 'YYYYMMdd-HH'." required pattern="YYYYMMdd-HH" maxlength='11'> <!-- /i<span class="error text-small block " *ngIf="jobName.dirty && jobName.errors.Pattern">Please input partition like 'YYYYMMdd-HH'</span> jobName.dirty && jobName.errors.pattern--> <span class="error text-small block " *ngIf="jobName.dirty&&jobName.invalid">Please input partition like 'YYYYMMdd-HH'</span> </div> @@ -58,8 +53,7 @@ under the License. Target Pattern<span class="symbol required"></span>: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="targetPat" placeholder="Please input target partition of your job, such as 'YYYYMMdd-HH'." - required pattern="YYYYMMdd-HH" maxlength='11' name="targetName" #targetName="ngModel"> + <input type="text" class="form-control" [(ngModel)]="targetPat" placeholder="Please input target partition of your job, such as 'YYYYMMdd-HH'." required pattern="YYYYMMdd-HH" maxlength='11' name="targetName" #targetName="ngModel"> <span class="error text-small block " *ngIf="targetName.dirty&&targetName.invalid">Please input partition like 'YYYYMMdd-HH'</span> </div> </div> @@ -69,40 +63,31 @@ under the License. <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> Measure Name: </label> - <div class="col-md-10 col-lg-10 col-sm-10 "> - <select id="measureSelector" class="form-control" - ngControl="name" required name="measure.name" [(ngModel)]="measure"> + <select id="measureSelector" class="form-control" ngControl="name" required name="measure.name" [(ngModel)]="measure"> <option *ngFor="let row of Measures" value="{{row.name}}">{{row.name}}</option> </select> </div> </div> </div> <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group" > + <div class="form-group"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Start At: </label> - <!-- <div class="col-md-5 col-lg-5 col-sm-5 "> <input type="text" id="datepicker" class="form-control" name="jobStartTime" [(ngModel)]="jobStartTime" > </div> --> <div class="col-md-5 col-lg-5 col-sm-5 "> <!-- <md-form-field> --> - <input matInput [matDatepicker]="picker" placeholder="Choose a date" style="color:black;" [(ngModel)]="jobStartTime" name="jobStartTime" - > + <input matInput [matDatepicker]="picker" placeholder="Choose a date" style="color:black;" [(ngModel)]="jobStartTime" name="jobStartTime"> <mat-datepicker-toggle mdSuffix [for]="picker" (click)="setHeight()"></mat-datepicker-toggle> - <mat-datepicker #picker ></mat-datepicker> - - + <mat-datepicker #picker></mat-datepicker> <!-- </md-form-field> --> </div> <div class="col-md-5 col-lg-5 col-sm-5" [ngClass]="{'has-error':timeDetail.invalid, 'has-success':timeDetail.valid}"> - <input type="text" class="form-control" id="timeDetail" (click)="showTime()" value="{{hourDetail}}:{{minuteDetail}}:{{secondDetail}} " - [(ngModel)]="timeDetail" name="time" - - > - <div id="timePopup" class="col-md-11 col-lg-11 col-sm-11 setgrey" *ngIf="isOpen"> + <input type="text" class="form-control" id="timeDetail" (click)="showTime()" value="{{hourDetail}}:{{minuteDetail}}:{{secondDetail}} " [(ngModel)]="timeDetail" name="time"> + <div id="timePopup" class="col-md-11 col-lg-11 col-sm-11 setgrey" *ngIf="isOpen"> <div id="hourSelector"> <p (click)="changeTime(0,23,true,hourDetail,1)"><i class="fa fa-caret-up" aria-hidden="true"></i></p> <p>{{hourDetail}}</p> @@ -113,7 +98,7 @@ under the License. </div> <div id="minuteSelector"> <p (click)="changeTime(0,59,true,minuteDetail,2)"><i class="fa fa-caret-up" aria-hidden="true"></i></p> - <p >{{minuteDetail}}</p> + <p>{{minuteDetail}}</p> <p (click)="changeTime(0,59,false,minuteDetail,2)"><i class="fa fa-caret-down" aria-hidden="true"></i></p> </div> <div class="division"> @@ -121,7 +106,7 @@ under the License. </div> <div id="secondSelector"> <p (click)="changeTime(0,59,true,secondDetail,3)"><i class="fa fa-caret-up" aria-hidden="true"></i></p> - <p >{{secondDetail}}</p> + <p>{{secondDetail}}</p> <p (click)="changeTime(0,59,false,secondDetail,3)"><i class="fa fa-caret-down" aria-hidden="true"></i></p> </div> </div> @@ -133,52 +118,42 @@ under the License. <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> Interval: </label> - <div class="col-md-5 col-lg-5 col-sm-5 "> - <input type="text" id="systemSelector" class="form-control" [(ngModel)]="periodTime" required placeholder="How often it works" name="periodTime" - onblur="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" - onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"> + <input type="text" id="systemSelector" class="form-control" [(ngModel)]="periodTime" required placeholder="How often it works" name="periodTime" onblur="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"> </div> <div class="col-md-5 col-lg-5 col-sm-5 "> <select id="timeSelector" class="form-control" [(ngModel)]="timeType" name="timeSelector" required> <!--<option value="hours" >hours</option>--> <!--<option value="minutes" >minutes</option>--> <!--<option value="seconds" >seconds</option>--> - <option *ngFor="let time of Times" >{{time}}</option> + <option *ngFor="let time of Times">{{time}}</option> </select> </div> </div> </div> </div> - <div class="setcolor"> <p> <i class="fa fa-info-circle"></i> After submitted, please go to " <a class="bark-link" href="/jobs">Jobs</a>" to check the job status </p> </div> - </fieldset> </div> - - <div class="form-group btn-container" > + <div class="form-group btn-container"> <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev()"> <i class="fa fa-arrow-circle-left"></i> Back </button> <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="form.submit(Form)"> --> <toaster-container></toaster-container> - <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="submit(jobForm)" - > + <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="submit(jobForm)"> <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> --> Submit </button> </div> </div> </div> - - <div class="modal fade" id="confirm-job" role="dialog" [ngClass]="{'in': visibleAnimate}" - [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" - (click)="onContainerClicked($event)"> + <div class="modal fade" id="confirm-job" role="dialog" [ngClass]="{'in': visibleAnimate}" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> <div class="modal-dialog modal-xg modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -190,9 +165,10 @@ under the License. <div class="container-fluid" id="viewJobContent" style="overflow:auto;"> <div class="row"> <h5 class="over-title margin-bottom-15">Basic information</h5> - </div><!--//row--> + </div> + <!--//row--> <div class="row"> - <div class="col-lg-12 col-md-12 col-sm-12"> + <div class="col-lg-12 col-md-12 col-sm-12"> <div id="viewrule-definition" class="viewrule-content"> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> @@ -236,7 +212,8 @@ under the License. </div> </div> </div> - </div><!--//row--> + </div> + <!--//row--> <br/> </div> </div> @@ -248,5 +225,6 @@ under the License. </div> </div> </form> - </div><!--//row--> + </div> + <!--//row--> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/job/create-job/create-job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.ts b/ui/angular/src/app/job/create-job/create-job.component.ts index 48f0613..79f61cb 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.ts +++ b/ui/angular/src/app/job/create-job/create-job.component.ts @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterViewChecked } from '@angular/core'; import { FormControl } from '@angular/forms'; import { FormsModule } from '@angular/forms'; import { MaxLengthValidator } from '@angular/forms'; @@ -39,19 +39,12 @@ import {Router} from "@angular/router"; providers:[ServiceService], styleUrls: ['./create-job.component.css'] }) -export class CreateJobComponent implements OnInit { +export class CreateJobComponent implements OnInit, AfterViewChecked { constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; }; - public toasterconfig : ToasterConfig = - new ToasterConfig({ - showCloseButton: true, - tapToDismiss: false, - timeout: 0 - }); - currentStep = 1; Times = ['seconds','minutes','hours']; timeType = 'seconds'; @@ -204,7 +197,7 @@ export class CreateJobComponent implements OnInit { $(stepSelection).css({ height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() }); - $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80); + $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 200); $('.y-scrollable').css({ 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() }); @@ -235,5 +228,8 @@ export class CreateJobComponent implements OnInit { // } }); } + ngAfterViewChecked(){ + this.resizeWindow(); + } } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/job/job.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.css b/ui/angular/src/app/job/job.component.css index 7b7a1db..268b43e 100644 --- a/ui/angular/src/app/job/job.component.css +++ b/ui/angular/src/app/job/job.component.css @@ -43,7 +43,7 @@ a{ color: #fff; position: absolute; left: 50%; - top: 80%; + top: 20%; } .po{ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/job/job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.ts b/ui/angular/src/app/job/job.component.ts index 33230ad..4f6a4bd 100644 --- a/ui/angular/src/app/job/job.component.ts +++ b/ui/angular/src/app/job/job.component.ts @@ -83,13 +83,11 @@ export class JobComponent implements OnInit { let deleteUrl = deleteJob + '?group=' + this.deleteGroup + '&jobName=' + this.deleteJob; this.http.delete(deleteUrl).subscribe(data => { let deleteResult:any = data; - console.log(deleteResult.code); if(deleteResult.code==206){ var self = this; self.hide(); setTimeout(function () { self.results.splice(self.deleteIndex,1); - // self.source.load(self.results); },0); } }, http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/login/login.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/login/login.component.html b/ui/angular/src/app/login/login.component.html index c150ca0..2bbc3ac 100644 --- a/ui/angular/src/app/login/login.component.html +++ b/ui/angular/src/app/login/login.component.html @@ -17,72 +17,64 @@ specific language governing permissions and limitations under the License. --> <div *ngIf="!ntAccount" id="content" class="container-fluid"> - <div class="row" id="content-row"> - - <div class="col-md-6 col-md-offset-1 col-xs-12"> - <div id="bark-description"> - <h3> - Data Quality Service Platform on eBay Cloud. - </h3><br> - <p> - Automates your data quality validation - </p><br> - <p> - Health monitoring, Profiling and detection - </p><br> - <p> - Unified Visualization - </p><br> - <p> - One set of tools to build data quality pipelines - </p> - </div> - </div> - - <div class="col-md-3 col-md-offset-1 col-xs-12"> - <div id="login-form"> - <div style="text-align:center;margin-bottom:30px;"> - <img src="../assets/img/logo.png" class="img-rounded" style="width:80%;"> - </div> - - <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;" (focus)="focus($event)"> - - <input type="password" class="form-control" placeholder="password" autocomplete="on" (keyup)="submit($event)" (focus)="focus($event)"> - - <div class="checkbox"> - <label style="color:white;"> - <input type="checkbox" value="remember-me" checked>Remember me - </label> - </div> - - <button class="btn btn-default btn-large btn-block" id="login-btn" (click)="login()" style="margin-bottom: 20px;">Log in</button> - - <div id="loginMsg">Login failed. Try again.</div> - </div> - </div> - - <div class="col-xs-12"> - <div id="bark-description-2"> - <h3> - Data Quality Service Platform on the eBay Cloud. - </h3><br> - <p> - Automates your data quality validation - </p><br> - <p> - Health monitoring, Profiling and detection - </p><br> - <p> - Unified Visualization - </p><br> - <p> - One set of tools to build data quality pipelines - </p> - </div> - </div> + <div class="row" id="content-row"> + <div class="col-md-6 col-md-offset-1 col-xs-12"> + <div id="bark-description"> + <h3>Data Quality Service Platform on eBay Cloud.</h3> + <br> + <p> + Automates your data quality validation + </p> + <br> + <p> + Health monitoring, Profiling and detection + </p> + <br> + <p> + Unified Visualization + </p> + <br> + <p> + One set of tools to build data quality pipelines + </p> + </div> + </div> + <div class="col-md-3 col-md-offset-1 col-xs-12"> + <div id="login-form"> + <div style="text-align:center;margin-bottom:30px;"> + <img src="../assets/img/logo.png" class="img-rounded" style="width:80%;"> </div> - + <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;" (focus)="focus($event)"> + <input type="password" class="form-control" placeholder="password" autocomplete="on" (keyup)="submit($event)" (focus)="focus($event)"> + <div class="checkbox"> + <label style="color:white;"> + <input type="checkbox" value="remember-me" checked>Remember me + </label> + </div> + <button class="btn btn-default btn-large btn-block" id="login-btn" (click)="login()" style="margin-bottom: 20px;">Log in</button> + <div id="loginMsg">Login failed. Try again.</div> + </div> + </div> + <div class="col-xs-12"> + <div id="bark-description-2"> + <h3>Data Quality Service Platform on the eBay Cloud.</h3> + <br> + <p> + Automates your data quality validation + </p> + <br> + <p> + Health monitoring, Profiling and detection + </p> + <br> + <p> + Unified Visualization + </p> + <br> + <p> + One set of tools to build data quality pipelines + </p> + </div> + </div> + </div> </div> - - - http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/login/login.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/login/login.component.ts b/ui/angular/src/app/login/login.component.ts index c938190..54bc8cf 100644 --- a/ui/angular/src/app/login/login.component.ts +++ b/ui/angular/src/app/login/login.component.ts @@ -52,9 +52,9 @@ export class LoginComponent implements OnInit { .text('Login failed. Try again.'); } - resizeMainWindow(){ - $('#mainWindow').height(window.innerHeight-56-90); - } + // resizeMainWindow(){ + // $('#mainWindow').height(window.innerHeight-50); + // } submit(event){ if(event.which == 13){//enter http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/measure/create-measure/ac/ac.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.html b/ui/angular/src/app/measure/create-measure/ac/ac.component.html index 57d19cd..a814358 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.html +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.html @@ -21,10 +21,10 @@ under the License. <h5 class="over-title margin-bottom-15">Create Measure</h5> </div> <div class="row"> - <form name="Form" id="form" (ngSubmit)="submit(acForm)" #acForm="ngForm" novalidate> - <div id="wizard" class="swMain" > + <form name="Form" id="form" (ngSubmit)="submit(acForm)" #acForm="ngForm" novalidate> + <div id="wizard" class="swMain"> <ul> - <li (click)="goTo(1)" > + <li (click)="goTo(1)"> <a [ngClass]="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected"> <div class="stepNumber"> 1 @@ -58,148 +58,144 @@ under the License. </li> </ul> </div> - - <div id="step-1" *ngIf="currentStep == 1" class="formStep" > - <label class="stepDesc">This step let you choose the single source of truth for data quality comparision with target. Currently you can only select the attributes from one schema</label> - <div class="container-fluid"> - - <div class="col-md-4 col-lg-4 col-sm-4"> - <fieldset> - <legend>Please select schema</legend> - <tree-root [nodes]="nodeList" [options]="options"></tree-root> - </fieldset> - </div> - <div class="col-md-8 col-lg-8 col-sm-8"> - <fieldset> - <legend> - Select attributes - </legend> - <div class="y-scrollable"> - <div> - <label>View schema:</label> - <i - style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}} + <div id="step-1" *ngIf="currentStep == 1" class="formStep"> + <label class="stepDesc">This step let you choose the single source of truth for data quality comparision with target. Currently you can only select the attributes from one schema</label> + <div class="container-fluid"> + <div class="col-md-4 col-lg-4 col-sm-4"> + <fieldset> + <legend>Please select schema</legend> + <tree-root [nodes]="nodeList" [options]="options"></tree-root> + </fieldset> + </div> + <div class="col-md-8 col-lg-8 col-sm-8"> + <fieldset> + <legend> + Select attributes + </legend> + <div class="y-scrollable"> + <div style="margin-top:10px;"> + <label>View schema:</label> + <i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}} </i> - </div> - <div> - <table class="table table-striped"> - <thead> + </div> + <div style="margin-top:5px;"> + <table class="table table-striped"> + <thead> <tr style="background-color:#7D95CC"> - <th><input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" - /></th> + <th> + <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> + </th> <th>Column Name</th> <th>Type</th> <th>Comment</th> </tr> - </thead> - <tbody> + </thead> + <tbody> <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> - <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td> + <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> </tr> <tr *ngFor="let row of schemaCollection"> <td> - <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} - /> + <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> </td> <td>{{row.name}}</td> <td>{{row.type}}</td> <td>{{row.comment}}</td> </tr> - </tbody> - </table> - </div> + </tbody> + </table> </div> - </fieldset> - </div> - <div class="form-group btn-container"> - <toaster-container></toaster-container> - <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> - Next <i class="fa fa-arrow-circle-right"></i> - </button> - </div> + </div> + </fieldset> + </div> + <div class="form-group btn-container"> + <toaster-container></toaster-container> + <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> + Next <i class="fa fa-arrow-circle-right"></i> + </button> </div> </div> - <div id="step-2" *ngIf="currentStep == 2" class="formStep" > - <label class="stepDesc">This step let you choose the target for data quality comparision with source</label> - <div class="container-fluid"> - <div class="col-md-4 col-lg-4 col-sm-4"> - <fieldset> - <legend>Please select schema</legend> - <tree-root [nodes]="nodeListTarget" [options]="targetOptions"></tree-root> - </fieldset> - </div> - <div class="col-md-8 col-lg-8 col-sm-8"> - <fieldset> - <legend> - Select attributes - </legend> - <div class="y-scrollable"> - <div> - <label>View schema:</label> - <i style="color:#fff;font-weight: bold;">{{currentDBTarget}}.{{currentTableTarget}}</i> - </div> - <div> - <table st-table="schemaCollectionTarget" class="table table-striped"> - <thead> + </div> + <div id="step-2" *ngIf="currentStep == 2" class="formStep"> + <label class="stepDesc">This step let you choose the target for data quality comparision with source</label> + <div class="container-fluid"> + <div class="col-md-4 col-lg-4 col-sm-4"> + <fieldset> + <legend>Please select schema</legend> + <tree-root [nodes]="nodeListTarget" [options]="targetOptions"></tree-root> + </fieldset> + </div> + <div class="col-md-8 col-lg-8 col-sm-8"> + <fieldset> + <legend> + Select attributes + </legend> + <div class="y-scrollable"> + <div style="margin-top:10px;"> + <label>View schema:</label> + <i style="color:#fff;font-weight: bold;">{{currentDBTargetStr}}{{currentTableTarget}}</i> + </div> + <div style="margin-top:5px;"> + <table st-table="schemaCollectionTarget" class="table table-striped"> + <thead> <tr style="background-color:#7D95CC"> - <th><input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /></th> + <th> + <input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /> + </th> <th>Column Name</th> <th>Type</th> <th>Comment</th> </tr> - </thead> - <tbody> + </thead> + <tbody> <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.length == 0"> - <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td> + <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> </tr> <tr *ngFor="let row of schemaCollectionTarget"> <td> - <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected"/> + <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected" /> </td> <td>{{row.name}}</td> <td>{{row.type}}</td> <td>{{row.comment}}</td> </tr> - </tbody> - </table> - </div> + </tbody> + </table> </div> - </fieldset> - </div> - <div class="form-group btn-container" > - <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> - <i class="fa fa-arrow-circle-left"></i> Back - </button> - <toaster-container></toaster-container> - <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> - Next <i class="fa fa-arrow-circle-right"></i> - </button> - </div> + </div> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + <toaster-container></toaster-container> + <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> + Next <i class="fa fa-arrow-circle-right"></i> + </button> </div> </div> - - <div id="step-3" *ngIf="currentStep == 3" class="formStep" > - <label class="stepDesc">This step let you map the target data fields to source fields, you can choose the related fields from dropdown list of source</label> - <div class="container-fluid"> - <div class="col-md-12 col-lg-12 col-sm-12"> - <fieldset> - <legend> - Map the fields - </legend> - - <div class="y-scrollable"> - - <div class="container col-md-12 col-lg-12 col-sm-12"> - <table class="table table-striped"> - <thead> + </div> + <div id="step-3" *ngIf="currentStep == 3" class="formStep"> + <label class="stepDesc">This step let you map the target data fields to source fields, you can choose the related fields from dropdown list of source</label> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <legend> + Map the fields + </legend> + <div class="y-scrollable"> + <div class="container col-md-12 col-lg-12 col-sm-12"> + <table class="table table-striped"> + <thead> <tr style="background-color:#7D95CC;font-size:20px"> <th style="width:40%;">Target Fields</th> <th style="width:10%;text-align:center">Map To</th> <th style="width:40%;text-align:center">Source Fields</th> </tr> - </thead> - <tbody> - <tr *ngFor="let item of selectionTarget; let i=index" > + </thead> + <tbody> + <tr *ngFor="let item of selectionTarget; let i=index"> <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td> <td style="text-align:center;"> <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]"> @@ -207,261 +203,242 @@ under the License. </select> </td> <td> - <select class="form-control" [(ngModel)] = 'mappings[i]' name="mappings{{i}}" - (ngModelChange)="addMapping($event,i)" value="mappings[i]"> - <option - *ngFor="let itemSrc of selection" - [ngValue]="itemSrc" - > - {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> + <select class="form-control" [(ngModel)]='mappings[i]' name="mappings{{i}}" (ngModelChange)="addMapping($event,i)" value="mappings[i]"> + <option *ngFor="let itemSrc of selection" [ngValue]="itemSrc"> + {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> </select> </td> </tr> - </tbody> - </table> - <p> - <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> - </p> - - <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center"> - - <div class="" style="text-align:right;display:block;float:left;width:20%;"> - Accuracy Rate(%) = - </div> - <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> - <div class="formula-text-up" style="border-bottom:1px solid;"> - Total Count of Matched records between <span class="badge">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span> and <span class="badge">{{mappings.length}} - </span> <span style="color:green;">{{currentTable}}</span> fields - </div> - <div> - Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span> - </div> + </tbody> + </table> + <p> + <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> + </p> + <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center"> + <div class="" style="text-align:right;display:block;float:left;width:20%;"> + Accuracy Rate(%) = + </div> + <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> + <div class="formula-text-up" style="border-bottom:1px solid;"> + Total Count of Matched records between <span class="badge">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span> and <span class="badge">{{mappings.length}} + </span> <span style="color:green;">{{currentTable}}</span> fields </div> - <div class="" style="text-align:left;display:block;float:left;width:10%;"> - x 100% + <div> + Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span> </div> </div> + <div class="" style="text-align:left;display:block;float:left;width:10%;"> + x 100% + </div> </div> </div> - </fieldset> - </div> - - <div class="form-group btn-container" > - <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> - <i class="fa fa-arrow-circle-left"></i> Back - </button> - <toaster-container></toaster-container> - <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> - Next <i class="fa fa-arrow-circle-right"></i> - </button> - </div> + </div> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + <toaster-container></toaster-container> + <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> + Next <i class="fa fa-arrow-circle-right"></i> + </button> </div> </div> - - <div id="step-4" *ngIf="currentStep == 4" class="formStep" > - <label class="stepDesc">Please setup the measure required information</label> - <div class="container-fluid"> - <div class="col-md-12 col-lg-12 col-sm-12"> - <fieldset> - <legend> - Required Information - </legend> - <div class="y-scrollable"> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group" [ngClass]="{'has-error':acName.dirty&&acName.invalid, 'has-success':acName.valid}"> - <label class="col-md-2 col-lg-2 col-sm-2 control-label"> - Measure Name<span class="symbol required"></span>: - </label> - - <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="name" name="acName" #acName="ngModel" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$" id="acName"> - <span class="error text-small block " - *ngIf="acName.dirty && (acName.errors?.required)"> + </div> + <div id="step-4" *ngIf="currentStep == 4" class="formStep"> + <label class="stepDesc">Please setup the measure required information</label> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <legend> + Required Information + </legend> + <div class="y-scrollable"> + <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:20px;"> + <div class="form-group" [ngClass]="{'has-error':acName.dirty&&acName.invalid, 'has-success':acName.valid}"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Measure Name<span class="symbol required"></span>: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" [(ngModel)]="name" name="acName" #acName="ngModel" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$" id="acName"> + <span class="error text-small block " *ngIf="acName.dirty && (acName.errors?.required)"> Measure Name is required</span> - <span class="error text-small block " *ngIf="acName.dirty && (acName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> - </div> + <span class="error text-small block " *ngIf="acName.dirty && (acName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label class="col-md-2 col-lg-2 col-sm-2 control-label"> - Measure Description: - </label> - - <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="desc" placeholder="Please input detailed description of your measure" name="desc"> - </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Measure Description: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" [(ngModel)]="desc" placeholder="Please input detailed description of your measure" name="desc"> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> - Measure Type: - </label> - <div class="col-md-10 col-lg-10 col-sm-10 "> - <select id="typeSelector" class="form-control" [(ngModel)]="type" disabled required name="type"> - <!-- <option *ngFor="let row of measureTypes" value="{{$index}}" >{{type}}</option> --> - <option>{{type}}</option> - </select> - </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Measure Type: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <select id="typeSelector" class="form-control" [(ngModel)]="type" disabled required name="type"> + <!-- <option *ngFor="let row of measureTypes" value="{{$index}}" >{{type}}</option> --> + <option>{{type}}</option> + </select> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> - Organization: - </label> - <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" id="systemSelector" class="form-control" [(ngModel)]="org" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org"> - </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Organization<span class="symbol required"></span>: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" id="systemSelector" class="form-control" [(ngModel)]="org" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org"> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label class="col-md-2 col-lg-2 col-sm-2 control-label"> - DataAsset: - </label> - <div class="col-md-10 col-lg-10 col-sm-10"> - <input type="text" class="form-control" name="DataAsset" - value="{{currentTable}},{{currentTableTarget}}" disabled> - </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + DataAsset: + </label> + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" name="DataAsset" value="{{currentTable}},{{currentTableTarget}}" disabled> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label class="col-md-2 col-lg-2 col-sm-2 control-label"> - Owner: - </label> - <div class="col-md-10 col-lg-10 col-sm-10"> - <input type="text" class="form-control" name="owner" disabled - [(ngModel)]="owner" > - </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Owner: + </label> + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" name="owner" disabled [(ngModel)]="owner"> </div> </div> </div> - <div style="color:#b2c831"> - <p> - <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" routerLink="/measures">Measures</a>" to check the measure status - </p> - </div> - - </fieldset> - </div> - - <div class="form-group btn-container" > - <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> - <i class="fa fa-arrow-circle-left"></i> Back - </button> - <toaster-container></toaster-container> - <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right"> - Submit - </button> - </div> + </div> + <div style="color:#b2c831"> + <p> + <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" routerLink="/measures">Measures</a>" to check the measure status + </p> + </div> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + <toaster-container></toaster-container> + <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right"> + Submit + </button> </div> </div> - - <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" - [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" - (click)="onContainerClicked($event)"> - <div class="modal-dialog modal-xg modal-lg"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h4 class="modal-title">Save the measure with the below information?</h4> - </div> - <div class="modal-body"> - <div class="container-fluid" id="viewruleContent" style="overflow:auto;"> - <div class="row"> - <h5 class="over-title margin-bottom-15">Basic information</h5> - </div> - <div class="row"> - <div class="col-lg-12 col-md-12 col-sm-12"> - <div id="viewrule-definition" class="viewrule-content"> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Name: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 "> - {{name}} - </div> + </div> + <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> + <div class="modal-dialog modal-xg modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Save the measure with the below information?</h4> + </div> + <div class="modal-body"> + <div class="container-fluid" id="viewruleContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div> + <div class="row"> + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Name: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 "> + {{name}} </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Description: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 "> - {{desc}} - </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Description: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 "> + {{desc}} </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Type: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 "> - {{type}} - </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Type: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 "> + {{type}} </div> - <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Organization: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 "> - {{org}} - </div> + </div> + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Organization: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 "> + {{org}} </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - DataAsset: - </label> - <div class="col-md-8 col-lg-8 col-sm-8">{{currentTable}},{{currentTableTarget}} - </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + DataAsset: + </label> + <div class="col-md-8 col-lg-8 col-sm-8">{{currentTable}},{{currentTableTarget}} </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Owner: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" > - {{owner}} - </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Owner: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{owner}} </div> </div> </div> </div> - <br/> - <h5 class="row">Mapping rules</h5> - <div class="row"> - <p>{{rules}}</p> - <p> - <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> - </p> - <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex; align-items: center"> - <div class="" style="text-align:right;display:block;float:left;width:20%;"> - Accuracy Rate(%) = - </div> - <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> - <div class="formula-text-up" style="border-bottom:1px solid;"> - Total Count of Matched records between <span class="badge">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span> and <span class="badge">{{mappings.length}} - </span> <span style="color:green;">{{currentTable}}</span> fields - </div> - <div> - Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span> - </div> + </div> + <br/> + <h5 class="row">Mapping rules</h5> + <div class="row"> + <p>{{rules}}</p> + <p> + <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> + </p> + <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex; align-items: center"> + <div class="" style="text-align:right;display:block;float:left;width:20%;"> + Accuracy Rate(%) = + </div> + <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> + <div class="formula-text-up" style="border-bottom:1px solid;"> + Total Count of Matched records between <span class="badge">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span> and <span class="badge">{{mappings.length}} + </span> <span style="color:green;">{{currentTable}}</span> fields </div> - <div class="" style="text-align:left;display:block;float:left;width:10%;"> - x 100% + <div> + Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span> </div> </div> + <div class="" style="text-align:left;display:block;float:left;width:10%;"> + x 100% + </div> </div> </div> - - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-default" (click)="hide()">Cancel</button> - <button type="button" class="btn btn-primary" (click)="save()">Save</button> </div> </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" (click)="hide()">Cancel</button> + <button type="button" class="btn btn-primary" (click)="save()">Save</button> + </div> </div> </div> + </div> </form> </div> </div>
