You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2017/11/28 04:49:08 UTC
[3/3] incubator-griffin git commit: Add profiling module
Add profiling module
Add data profiling module to get some information about data after calculate
Author: dodobel <12...@qq.com>
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 <12...@qq.com>
Authored: Tue Nov 28 12:48:58 2017 +0800
Committer: Lionel Liu <bh...@163.com>
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://ebay-griffin-devs@googlegroups.com" ><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://ebay-griffin-devs@googlegroups.com"><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>