map data structure returned by elesticsearch and update url 1.Change the method of fetching data from the front end according to the data structure returned by elesticsearch 2.Change the url in order to match the backend
Author: dodobel <[email protected]> Closes #164 from dodobel/merge. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/6a309cd0 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/6a309cd0 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/6a309cd0 Branch: refs/heads/master Commit: 6a309cd0839d45980673a32771e4e7c1ac660800 Parents: fe281f2 Author: dodobel <[email protected]> Authored: Fri Nov 3 16:35:19 2017 +0800 Committer: Lionel Liu <[email protected]> Committed: Fri Nov 3 16:35:19 2017 +0800 ---------------------------------------------------------------------- ui/angular/.angular-cli.json | 1 + ui/angular/package.json | 1 + ui/angular/src/app/app.component.html | 2 +- ui/angular/src/app/app.module.ts | 6 + .../src/app/dataasset/dataasset.component.css | 7 + .../src/app/dataasset/dataasset.component.html | 2 +- .../src/app/dataasset/dataasset.component.ts | 4 +- ui/angular/src/app/health/health.component.ts | 136 +-- .../job/create-job/create-job.component.html | 6 +- .../app/job/create-job/create-job.component.ts | 24 +- ui/angular/src/app/job/job.component.css | 23 +- ui/angular/src/app/job/job.component.html | 327 +++--- ui/angular/src/app/job/job.component.ts | 8 +- .../measure/create-measure/ac/ac.component.ts | 130 +-- .../create-measure.component.html | 6 +- .../measure/create-measure/pr/pr.component.css | 13 + .../measure/create-measure/pr/pr.component.html | 458 ++++---- .../measure/create-measure/pr/pr.component.ts | 363 +++--- .../create-measure/pr/rule/rule.component.css | 29 + .../create-measure/pr/rule/rule.component.html | 1084 ++++++++++++++++++ .../pr/rule/rule.component.spec.ts | 43 + .../create-measure/pr/rule/rule.component.ts | 35 + .../measure-detail.component.html | 2 +- .../measure-detail/measure-detail.component.ts | 9 +- .../src/app/measure/measure.component.css | 16 +- .../src/app/measure/measure.component.html | 234 ++-- ui/angular/src/app/measure/measure.component.ts | 14 +- .../detail-metric/detail-metric.component.ts | 177 +-- ui/angular/src/app/metric/metric.component.ts | 175 ++- ui/angular/src/app/service/chart.service.ts | 2 +- ui/angular/src/app/service/service.service.ts | 15 +- .../src/app/sidebar/sidebar.component.html | 2 +- ui/angular/src/app/sidebar/sidebar.component.ts | 46 +- ui/angular/src/app/sidebar/truncate.pipe.ts | 31 + ui/angular/src/styles.css | 34 +- 35 files changed, 2255 insertions(+), 1210 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/.angular-cli.json ---------------------------------------------------------------------- diff --git a/ui/angular/.angular-cli.json b/ui/angular/.angular-cli.json index f887426..810347e 100644 --- a/ui/angular/.angular-cli.json +++ b/ui/angular/.angular-cli.json @@ -19,6 +19,7 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ + "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ], "scripts": [ "../node_modules/echarts/dist/echarts.min.js", "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/package.json ---------------------------------------------------------------------- diff --git a/ui/angular/package.json b/ui/angular/package.json index 8c6e5de..b6b6ead 100644 --- a/ui/angular/package.json +++ b/ui/angular/package.json @@ -25,6 +25,7 @@ "@angular/router": "4.4.4", "angular2-datatable": "0.6.0", "angular2-toaster": "4.0.1", + "angular2-multiselect-dropdown": "1.3.4", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "echarts": "^3.7.0", http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 2fb957d..79912bc 100644 --- a/ui/angular/src/app/app.component.html +++ b/ui/angular/src/app/app.component.html @@ -34,7 +34,7 @@ under the License. <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">Measures</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> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/app.module.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.module.ts b/ui/angular/src/app/app.module.ts index 1d0aea5..e99f6e1 100644 --- a/ui/angular/src/app/app.module.ts +++ b/ui/angular/src/app/app.module.ts @@ -48,6 +48,9 @@ import { CreateJobComponent } from './job/create-job/create-job.component'; import { AcComponent} from './measure/create-measure/ac/ac.component'; import { PrComponent } from './measure/create-measure/pr/pr.component'; import { LoginComponent } from './login/login.component'; +import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; +import { RuleComponent } from './measure/create-measure/pr/rule/rule.component'; +import {TruncatePipe} from './sidebar/truncate.pipe'; @@ -134,6 +137,8 @@ const appRoutes: Routes = [ AcComponent, PrComponent, LoginComponent, + RuleComponent, + TruncatePipe ], imports: [ BrowserModule, @@ -145,6 +150,7 @@ const appRoutes: Routes = [ FormsModule, AngularEchartsModule, DataTableModule, + AngularMultiSelectModule, RouterModule.forRoot( appRoutes, {useHash: true}, http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/dataasset/dataasset.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/dataasset/dataasset.component.css b/ui/angular/src/app/dataasset/dataasset.component.css index 8f58e22..34e0091 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.css +++ b/ui/angular/src/app/dataasset/dataasset.component.css @@ -28,5 +28,12 @@ under the License. background-color: #1f1f1f; } +.table > tbody + tbody { + border-top: 1px solid transparent; +} + +.reco > tbody:nth-of-type(even) >tr { + background-color: #080808; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 7dfcc16..01f2831 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.html +++ b/ui/angular/src/app/dataasset/dataasset.component.html @@ -29,7 +29,7 @@ under the License. </td> </tr> </table> - <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="5"> + <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> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/dataasset/dataasset.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/dataasset/dataasset.component.ts b/ui/angular/src/app/dataasset/dataasset.component.ts index f18e818..c99fde3 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.ts +++ b/ui/angular/src/app/dataasset/dataasset.component.ts @@ -47,7 +47,7 @@ export class DataassetComponent implements OnInit { this.hide(); } } - constructor(private http:HttpClient,public servicecService:ServiceService) { } + constructor(private http:HttpClient,public serviceService:ServiceService) { } parseDate(time){ time = new Date(time); var year = time.getFullYear(); @@ -67,7 +67,7 @@ export class DataassetComponent implements OnInit { ngOnInit() { - var allDataassets = this.servicecService.config.uri.dataassetlist; + var allDataassets = this.serviceService.config.uri.dataassetlist; this.http.get(allDataassets).subscribe(data =>{ for (let db in data) { for(let table of data[db]){ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 dcb5c8c..6b17d1a 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -32,7 +32,7 @@ import * as $ from 'jquery'; }) export class HealthComponent implements OnInit { - constructor(private http: HttpClient,private router:Router,public servicecService:ServiceService) { }; + constructor(private http: HttpClient,private router:Router,public serviceService:ServiceService) { }; chartOption:object; // var formatUtil = echarts.format; orgs = []; @@ -43,7 +43,9 @@ export class HealthComponent implements OnInit { metricName = []; metricNameUnique = []; myData = []; + measureOptions = []; originalOrgs = []; + orgWithMeasure: any; status:{ @@ -53,98 +55,13 @@ export class HealthComponent implements OnInit { // var formatUtil = echarts.format; metricData = []; - -// metricData = { -// "hits" : { -// "hits" : [ -// { -// "_source" : { -// "name" : "xixi", -// "tmst" : 1493962623461, -// "total" : 8043288, -// "matched" : 8034775 -// } -// }, -// { -// "_source" : { -// "name" : "xixi", -// "tmst" : 1493973423461, -// "total" : 9479698, -// "matched" : 9476094 -// } -// }, -// { -// "_source" : { -// "name" : "xixi", -// "tmst" : 1493987823461, -// "total" : 9194117, -// "matched" : 9164237 -// } -// }, -// { -// "_source" : { -// "name" : "xixi", -// "tmst" : 1493995023461, -// "total" : 9429018, -// "matched" : 9375324 -// } -// }, -// { -// "_source" : { -// "name" : "xixi", -// "tmst" : 1494009423461, -// "total" : 8029660, -// "matched" : 7979653 -// } -// }, -// { -// "_source" : { -// "name" : "haha", -// "tmst" : 1493959023461, -// "total" : 1086389, -// "matched" : 1083336 -// } -// }, -// { -// "_source" : { -// "name" : "haha", -// "tmst" : 1493973423461, -// "total" : 1090650, -// "matched" : 1090445 -// } -// }, -// { -// "_source" : { -// "name" : "haha", -// "tmst" : 1493980623461, -// "total" : 1088940, -// "matched" : 1079003 -// } -// }, -// { -// "_source" : { -// "name" : "haha", -// "tmst" : 1493995023461, -// "total" : 1048833, -// "matched" : 1047890 -// } -// }, -// { -// "_source" : { -// "name" : "haha", -// "tmst" : 1494013023461, -// "total" : 1063349, -// "matched" : 1055783 -// } -// } -// ] -// } -// }; onChartClick($event){ if($event.data.name){ // this.router.navigate(['/detailed/'+$event.data.name]); - window.location.href = '/detailed/'+$event.data.name; + this.router.navigate(['/detailed/'+$event.data.name]); + window.location.reload(); + // window.location.href = '/detailed/'+$event.data.name; } } @@ -265,22 +182,38 @@ export class HealthComponent implements OnInit { renderData(){ - var url_organization = this.servicecService.config.uri.organization; + var url_organization = this.serviceService.config.uri.organization; this.http.get(url_organization).subscribe(data => { - let orgWithMeasure = data; + this.orgWithMeasure = data; var orgNode = null; - for(let orgName in orgWithMeasure){ + for(let orgName in this.orgWithMeasure){ orgNode = new Object(); orgNode.name = orgName; - orgNode.measureMap = orgWithMeasure[orgName]; + orgNode.jobMap = []; + orgNode.measureMap = []; + for(let key in this.orgWithMeasure[orgName]){ + orgNode.measureMap.push(key); + this.measureOptions.push(key); + // console.log(this.measureOptions); + if(this.orgWithMeasure[orgName][key]!=null){ + for(let i = 0;i < this.orgWithMeasure[orgName][key].length;i++){ + orgNode.jobMap.push(this.orgWithMeasure[orgName][key][i].jobName); + } + } + } this.orgs.push(orgNode); } this.originalOrgs = this.orgs; - let url_dashboard = this.servicecService.config.uri.dashboard; + // console.log(this.originalOrgs); + let url_dashboard = this.serviceService.config.uri.dashboard; this.http.post(url_dashboard, {"query": {"match_all":{}}, "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe(data => { - this.originalData = JSON.parse(JSON.stringify(data)); + this.originalData = data; this.myData = JSON.parse(JSON.stringify(this.originalData.hits.hits)); + // this.myData = this.allData.hits.hits; this.metricName = []; + // for(var i = 0;i<this.myData.length;i++){ + // this.metricName.push(this.myData[i]._source.name); + // } for(var i = 0;i<this.myData.length;i++){ this.metricName.push(this.myData[i]._source.name); } @@ -305,7 +238,7 @@ export class HealthComponent implements OnInit { node.dq = 0; node.metrics = new Array(); for (let metric of this.metricData){ - if(sys.measureMap.indexOf(metric[metric.length-1]._source.name)!= -1){ + if(sys.jobMap.indexOf(metric[metric.length-1]._source.name)!= -1){ var metricNode = { 'name':'', 'timestamp':'', @@ -314,20 +247,23 @@ export class HealthComponent implements OnInit { } metricNode.name = metric[metric.length-1]._source.name; metricNode.timestamp = metric[metric.length-1]._source.tmst; - metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100; + metricNode.dq = metric[metric.length-1]._source.value.matched/metric[metric.length-1]._source.value.total*100; metricNode.details = metric; node.metrics.push(metricNode); } } this.finalData.push(node); } - console.log(this.finalData); + this.originalData = JSON.parse(JSON.stringify(this.finalData)); var self = this; setTimeout(function function_name(argument) { // body... self.renderTreeMap(self.finalData); - }) - return JSON.parse(JSON.stringify(this.finalData)); + + },0) + console.log(this.finalData); + // return JSON.parse(JSON.stringify(this.finalData)); + return this.finalData; }); }); }; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 23e62d0..f347f02 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 @@ -71,9 +71,9 @@ under the License. </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"> - <option *ngFor="let row of Measures" value="{{row.name}}" >{{row.name}}</option> + <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> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 1cadc85..18269c8 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 @@ -41,7 +41,7 @@ import {Router} from "@angular/router"; }) export class CreateJobComponent implements OnInit { - constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) { + constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; }; @@ -72,7 +72,7 @@ export class CreateJobComponent implements OnInit { Measures:object; measure:string; - measureid:string; + measureid:any; ntAccount = 0; newJob={ "sourcePattern":'', @@ -137,6 +137,7 @@ export class CreateJobComponent implements OnInit { } submit (jobForm) { + this.measureid = this.getMeasureId(); // jobForm.markAsPristine(); var period; if(this.timeType=='minutes') @@ -162,7 +163,7 @@ export class CreateJobComponent implements OnInit { this.toasterService.pop('error', 'Error!', 'Please complete the form!'); return false; } - + this.newJob={ "sourcePattern":this.sourcePat, "targetPattern":this.targetPat, @@ -179,7 +180,7 @@ export class CreateJobComponent implements OnInit { var month = date.getMonth()+1; var timestamp = Date.parse(datastr); var jobName = this.measure + '-BA-' + this.ntAccount + '-' + timestamp; - var addJobs = this.servicecService.config.uri.addJobs; + var addJobs = this.serviceService.config.uri.addJobs; var newJob = addJobs + '?group=' + this.newJob.groupName + '&jobName=' + jobName + '&measureId=' + this.measureid; this.http .post(newJob, this.newJob) @@ -217,12 +218,21 @@ export class CreateJobComponent implements OnInit { $('#md-datepicker-0').height(250); } + getMeasureId(){ + for(let index in this.Measures){ + if(this.measure == this.Measures[index].name){ + return this.Measures[index].id; + } + } + } ngOnInit() { - var allModels = this.servicecService.config.uri.allModels; + var allModels = this.serviceService.config.uri.allModels; this.http.get(allModels).subscribe(data =>{ this.Measures = data; - this.measure = this.Measures[0].name; - this.measureid = this.Measures[0].id; + // for(let index in data){ + // this.measure = data[index].name; + // this.measureid = data[index].id; + // } }); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 e90d0f9..9e79a35 100644 --- a/ui/angular/src/app/job/job.component.css +++ b/ui/angular/src/app/job/job.component.css @@ -16,13 +16,34 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.table-striped > tbody > tr{ +/*.table-striped > tbody > tr{ background-color: #1f1f1f; +}*/ + +.table-striped > tbody > tr:nth-of-type(even) { + background-color: #1f1f1f; +} +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #080808; +} +.reco > tbody:nth-of-type(odd) >tr { + background-color: #1f1f1f; +} + +.table > tbody + tbody { + border-top: 1px solid transparent; } a{ color: white; } +.icon{ + color: #fff; + position: absolute; + left: 50%; + top: 80%; +} + .po{ cursor: pointer; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/job/job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html index 3c0306a..b805361 100644 --- a/ui/angular/src/app/job/job.component.html +++ b/ui/angular/src/app/job/job.component.html @@ -16,177 +16,176 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div > - <p> - <a routerLink="/createjob" class="btn btn-primary btn-o btn-wide" > +<div> + <p> + <a routerLink="/createjob" class="btn btn-primary btn-o btn-wide"> <i class="fa fa-plus"></i> Create Job</a> - </p> - - <div id="modelContainer"> - <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> - <thead> - <tr style="background-color:#7D95CC"> - <th st-ratio="15">Job Name</th> - <th st-ratio="15">Source Pattern</th> - <th st-ratio="15">Target Pattern</th> - <th st-ratio="15">Previous Fire Time</th> - - <th st-ratio="20">Next Fire Time</th> - <th st-ratio="15">Trigger State</th> - - <th st-ratio="5">Interval</th> - <th st-ratio="5">Action</th> - </tr> - </thead> - <tbody> - <tr *ngIf="!results"> - <td colspan="7" style="text-align:center">No content!</td> - </tr> - </tbody> - <tbody *ngFor="let row of mf.data"> - <tr> - <td (click) = "showInstances(row)" [ngClass]="{accordion:true}" 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.jobName}} - -{{(row.createTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} - </td> - <td>{{row.sourcePattern}}</td> - <td>{{row.targetPattern}}</td> - <td [hidden]="row.previousFireTime!=-1">--/--/-- --:--</td> - <td [hidden]="row.previousFireTime==-1">{{(row.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td> - <td>{{(row.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td> - <td> - <span *ngIf='row.triggerState == "NORMAL"' class="normal">{{row.triggerState}} + </p> + <div id="modelContainer"> + <table class="table table-striped reco" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="15">Job Name</th> + <th st-ratio="15">Source Pattern</th> + <th st-ratio="15">Target Pattern</th> + <th st-ratio="15">Previous Fire Time</th> + <th st-ratio="20">Next Fire Time</th> + <th st-ratio="15">Trigger State</th> + <th st-ratio="5">Interval</th> + <th st-ratio="5">Action</th> + </tr> + </thead> + <tbody> + <tr *ngIf="!results"> + <td colspan="7" style="text-align:center;display:none"> + No content! + </td> + <td class="icon" style="border-top-style:none"> + <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> + </td> + </tr> + </tbody> + <tbody *ngFor="let row of mf.data"> + <tr> + <td (click)="showInstances(row)" [ngClass]="{accordion:true}" 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.jobName}} + <!-- -{{(row.createTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} --> + </td> + <td>{{row.sourcePattern}}</td> + <td>{{row.targetPattern}}</td> + <td [hidden]="row.previousFireTime!=-1">--/--/-- --:--</td> + <td [hidden]="row.previousFireTime==-1">{{(row.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td> + <td>{{(row.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td> + <td> + <span *ngIf='row.triggerState == "NORMAL"' class="normal">{{row.triggerState}} </span> - <span *ngIf='row.triggerState != "NORMAL"' class = 'unnormal'>{{row.triggerState}}</span> - </td> - <td>{{row.interval}}</td> - <td> - - <a (click)="remove(row)" title="delete" style="text-decoration:none"> + <span *ngIf='row.triggerState != "NORMAL"' class='unnormal'>{{row.triggerState}}</span> + </td> + <td>{{row.interval}}</td> + <td> + + <a (click)="remove(row)" title="delete" style="text-decoration:none"> <i class="fa fa-trash-o po"></i> - </a> - - </td> - </tr> - <tr *ngIf="row.showDetail"> - <td colspan="7" style="padding:20px 30px 10px 30px;"> - <table class="table table-striped" [mfData]="allInstances" #mf2="mfDataTable" [mfRowsOnPage]="10"> - <thead> - <tr style="background-color:#7D95CC"> - <th style="width:30%" >AppID</th> - <th style="width:25%" >Time</th> - <th style="width:20%" >State</th> - </tr> - </thead> - <tbody > - <tr *ngIf="!allInstances"> - <td colspan="7" style="text-align:center">No content.</td> - </tr> - <tr *ngFor="let item of mf2.data" > - <td><a href={{item.appUri}} target="_blank" style="color:white">{{item.appId}}</a></td> - <td>{{item.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}</td> - <td>{{item.state}}</td> - </tr> - </tbody> - <tfoot> - <tr> - <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> - </td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="8" class="text-right" > + </a> + </td> + </tr> + <tr *ngIf="row.showDetail"> + <td colspan="7" style="padding:20px 30px 10px 30px;"> + <table class="table table-striped" [mfData]="allInstances" #mf2="mfDataTable" [mfRowsOnPage]="10"> + <thead> + <tr style="background-color:#7D95CC"> + <th style="width:30%">AppID</th> + <th style="width:25%">Time</th> + <th style="width:20%">State</th> + </tr> + </thead> + <tbody> + <tr *ngIf="!allInstances"> + <td colspan="7" style="text-align:center">No content.</td> + </tr> + <tr *ngFor="let item of mf2.data"> + <td><a href={{item.appUri}} target="_blank" style="color:white">{{item.appId}}</a></td> + <td>{{item.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}</td> + <td>{{item.state}}</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination"> <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> - </div> - <div class="modal fade" id="deleteJobConfirmation" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" - [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">Delete the job with the below information?</h4> - </div> - <div class="modal-body"> - <!-- <ng-include src="'/pages/jobs/delete-confirm.html'"/> --> - <div class="container-fluid" id="deleteContent" style="overflow:auto;"> - <div class="row"> - <h5 class="over-title margin-bottom-15">Basic information</h5> - </div><!--//row--> - <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"> - Job Name: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.jobName}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Source Pattern: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.sourcePattern}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Target Pattern: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.targetPattern}} - </div> - </div> - <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Next Fire Time: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{(deletedRow.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Interval: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{deletedRow.interval}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Group: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{deletedRow.groupName}} - </div> - </div> - </div> - </div> - </div><!--//row--> + </td> + </tr> + </tfoot> + </table> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td colspan="8" class="text-right"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> + </tfoot> + </table> + </div> + <div class="modal fade" id="deleteJobConfirmation" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" [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">Delete the job with the below information?</h4> + </div> + <div class="modal-body"> + <!-- <ng-include src="'/pages/jobs/delete-confirm.html'"/> --> + <div class="container-fluid" id="deleteContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div> + <!--//row--> + <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"> + Job Name: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.jobName}} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Pattern: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.sourcePattern}} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Target Pattern: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.targetPattern}} + </div> + </div> + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Next Fire Time: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{(deletedRow.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Interval: + </label> + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{deletedRow.interval}} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Group: + </label> + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{deletedRow.groupName}} + </div> </div> </div> - <div class="modal-footer"> - <button type="button" class="btn btn-primary" (click)="confirmDelete()">Yes</button> - <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">No</button> - </div> + </div> </div> + <!--//row--> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" (click)="confirmDelete()">Yes</button> + <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">No</button> </div> + </div> </div> + </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/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 750742b..33230ad 100644 --- a/ui/angular/src/app/job/job.component.ts +++ b/ui/angular/src/app/job/job.component.ts @@ -54,7 +54,7 @@ export class JobComponent implements OnInit { - constructor(private http:HttpClient,private router:Router,public servicecService:ServiceService) { }; + constructor(private http:HttpClient,private router:Router,public serviceService:ServiceService) { }; public hide(): void { this.visibleAnimate = false; @@ -79,7 +79,7 @@ export class JobComponent implements OnInit { } confirmDelete(){ - let deleteJob = this.servicecService.config.uri.deleteJob; + let deleteJob = this.serviceService.config.uri.deleteJob; let deleteUrl = deleteJob + '?group=' + this.deleteGroup + '&jobName=' + this.deleteJob; this.http.delete(deleteUrl).subscribe(data => { let deleteResult:any = data; @@ -107,7 +107,7 @@ export class JobComponent implements OnInit { let index = this.results.indexOf(row); if (this.oldindex!=undefined &&this.oldindex != index){ this.results[this.oldindex].showDetail = false;} - let getInstances = this.servicecService.config.uri.getInstances; + let getInstances = this.serviceService.config.uri.getInstances; let getInstanceUrl = getInstances+ '?group=' + 'BA' + '&jobName=' + row.jobName +'&page='+'0'+'&size='+'200'; this.http.get(getInstanceUrl).subscribe(data =>{ row.showDetail = !row.showDetail; @@ -150,7 +150,7 @@ export class JobComponent implements OnInit { ngOnInit():void { var self = this; - let allJobs = this.servicecService.config.uri.allJobs; + let allJobs = this.serviceService.config.uri.allJobs; this.http.get(allJobs).subscribe(data =>{ this.results = Object.keys(data).map(function(index){ let job = data[index]; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/ac/ac.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts index 122d7b7..cbc9676 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts @@ -333,7 +333,11 @@ export class AcComponent implements OnInit { return rules; } var self = this; - var rules = this.selectionTarget.map(function(item, i) { + console.log(this.selectionTarget); + // var rules = this.selectionTarget.map(function(item, i) { + // return mappingRule(self.selection[i], item, self.matches[i]); + // }); + var rules = this.mappings.map(function(item, i) { return mappingRule(self.selection[i], item, self.matches[i]); }); rule = rules.join(" AND "); @@ -350,7 +354,7 @@ export class AcComponent implements OnInit { save() { - var addModels = this.servicecService.config.uri.addModels; + var addModels = this.serviceService.config.uri.addModels; this.http .post(addModels, this.newMeasure) @@ -370,123 +374,6 @@ export class AcComponent implements OnInit { } - // data: { [key: string]: Array<object>; } = { - // "default": [ - // { - // "tableName": "ext", - // "dbName": "default", - // "owner": "hadoop", - // "createTime": 1488353464, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "name", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/user/hive/ext", - // }, - // }, - // { - // "tableName": "ext1", - // "dbName": "default", - // "owner": "hadoop", - // "createTime": 1489382943, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "name", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/user/hive/ext1", - // }, - // } - // ], - // "griffin": [ - // { - // "tableName": "avr_out", - // "dbName": "griffin", - // "owner": "hadoop", - // "createTime": 1493892603, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "bigint", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "desc", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/griffin/data/batch/avr_out", - // }, - // } - // ], - // }; options: ITreeOptions = { displayField: 'name', @@ -542,12 +429,11 @@ export class AcComponent implements OnInit { nodeList:object[]; nodeListTarget:object[]; - constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) { + constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; }; onResize(event){ - console.log("Width: " + event.target.innerWidth); this.resizeWindow(); } @@ -559,7 +445,7 @@ export class AcComponent implements OnInit { } ngOnInit() { - var allDataassets = this.servicecService.config.uri.dataassetlist; + var allDataassets = this.serviceService.config.uri.dataassetlist; this.http.get(allDataassets).subscribe(data =>{ this.nodeList = new Array(); let i = 1; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/create-measure.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.html b/ui/angular/src/app/measure/create-measure/create-measure.component.html index fd8bdcb..d960912 100644 --- a/ui/angular/src/app/measure/create-measure/create-measure.component.html +++ b/ui/angular/src/app/measure/create-measure/create-measure.component.html @@ -81,8 +81,10 @@ under the License. </div> </section> </div> - <div class="col-lg-6 col-md-6 col-sm-6 ruletypes"> - <section id="panel-2" class="panel panel-primary" (click)="click('pr')"> + <!-- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes"> --> + <div class="col-lg-6 col-md-6 col-sm-6"> + <!-- <section id="panel-2" class="panel panel-primary" (click)="click('pr')"> --> + <section id="panel-2" class="panel panel-primary"> <div class="panel-heading"> <span style="font-size:20px">Data Profiling</span> <span class="pull-right" style="font-size:20px"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/pr.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.css b/ui/angular/src/app/measure/create-measure/pr/pr.component.css index d7c4eb6..f4a62c4 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.css +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.css @@ -19,6 +19,11 @@ under the License. @import url('../../../../../node_modules/angular2-toaster/toaster.css'); @import url('../../measure.component.css'); +.selected-list .c-list .c-token{ + background: #6faece; +} + + div.tree div.tree-children::before, div.tree::before { content: ""; @@ -153,4 +158,12 @@ label{ { /* Move the check mark back when checked */ text-indent: 0; +} + +.middle{ + vertical-align: middle; +} + +.no-border{ + border: 1px solid transparent !important; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/pr.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.html b/ui/angular/src/app/measure/create-measure/pr/pr.component.html index d667a80..41cca61 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.html +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.html @@ -16,16 +16,15 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div class="container-fluid"> +<div class="container-fluid" (window:resize)="onResize($event)"> <div class="row"> <h5 class="over-title margin-bottom-15">Create Measure</h5> </div> <div class="row"> - <form name="Form" id="form" (ngSubmit)="submit(prForm)" #prForm="ngForm" novalidate> - <div id="wizard" class="swMain" > + <form name="Form" id="form" #prForm="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 @@ -51,212 +50,174 @@ 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> + <label>View schema:</label> + <i style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}} </i> - </div> - <div> - <table class="table table-striped"> - <thead> + </div> + <div> + <table class="table table-striped no-border"> + <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" > + </div> + <div id="step-2" *ngIf="currentStep == 2" class="formStep"> <label class="stepDesc">Please choose one of the profiling models provided below:</label> - <div class="container-fluid"> + <div class="container-fluid" id="notshowrule"> <div class="col-md-12 col-lg-12 col-sm-12"> - <fieldset> + <fieldset style="max-height:400px;overflow-y:scroll"> <div class="y-scrollable"> - <div class="container col-md-12 col-lg-12 col-sm-12"> - <div class="row"> - <div class="col-md-12 col-lg-12 col-sm-12" *ngFor="let item of selection;let itemIndex = index" > - <p style="font-weight: bold;font-size: 120%;cursor:pointer" - (click)="item.isExpanded = !item.isExpanded"> - <i *ngIf="!item.isExpanded" class="fa fa-chevron-circle-right blue"></i> - <i *ngIf="item.isExpanded" class="fa fa-chevron-circle-down blue"></i> {{currentDB}}.{{currentTable}}.{{item.name}} - <i>:{{item.ruleLength}} rules</i> - </p> - <div *ngIf="item.isExpanded"> - <div id="simple{{itemIndex}}"> - <h5>Simple Statistics</h5> - <div *ngFor="let rule of item.newRules;let ruleIndex = index" > - <div *ngIf="rule!=null"> - <a class="btn btn-primary btn-o" style="background-color: #337ab7;" - (click)="removeRule(item,ruleIndex)"> - <i class="fa fa-times"></i> - </a> - <label style="width: 7%;text-align:center;">Rule:</label> - <select class="form-control" style="width: 25%;display: inline-block;" - id="simpleRule" name='simpleRule-{{itemIndex}}{{ruleIndex}}' [(ngModel)]='rule.type'> - <option>Total Count</option> - <option>Distinct Count</option> - <option>Null Detection Count</option> - <option *ngIf="item.type=='string'||item.type=='varchar'||item.type=='char'">Regular Expression Detection Count</option> - <option>Rule Detection Count</option> - <option *ngIf='item.isNum'>Maximum</option> - <option *ngIf='item.isNum'>Minimum</option> - <option *ngIf='item.isNum'>Median</option> - <option *ngIf='item.isNum'>Average</option> - <option>Enum Detection Count</option> - </select> - <!-- <a class="btn btn-primary btn-o" style="background-color: #337ab7;" - (click)="addCond(item,ruleIndex)"> - <i class="fa fa-plus"></i> - </a> --> - <div style="display: inline-block;font-size: 130%;vertical-align: middle;" *ngFor="let cond of rule.conditionGroup;let condIndex=index"> - <input type="checkbox" - name="condition-{{itemIndex}}{{ruleIndex}}{{condIndex}}" - value="cond.type" - (click)='toggleSelectionCond(cond,condIndex,ruleIndex,item)' - [disabled]="!cond.avaliable" [(ngModel)]="cond.chosen" style="width:18px;height: 18px;"> - <!-- <span class="badge">✓</span> --> - <label>{{cond.type}}</label> - <br> - </div> - <div *ngFor="let cond of rule.conditionGroup;let condIndex=index" style="margin-left:12%;"> - <label style="width: 7%;" *ngIf="cond.chosen">{{cond.type}}</label> - <input *ngIf="cond.chosen" - name="conditionDetail-{{itemIndex}}{{ruleIndex}}{{condIndex}}" type="text" class="form-control" style="width: 40%;display: inline-block;" [(ngModel)]="cond.content"/> - </div> - - </div> - - </div> - - <a class="btn btn-primary btn-o" style="background-color: #337ab7;" - (click)="addRule(item)"> - <i class="fa fa-plus"></i> - </a> - <br> - </div> - </div> - </div> - <!-- <div class="col-md-9 col-lg-9 col-sm-9" ng-include="'/pages/rules/va-explaination.html'"> - </div> --> - </div> + <div style="display:block"> + <label style="color:#888888">View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}}</i> </div> + <div class="col-md-12 col-lg-12 col-sm-12" style="z-index:100"> + <table class="table table-striped" [mfData]="results" #mf="mfDataTable"> + <thead> + <tr style="background-color:#7D95CC"> + <th>Column Name</th> + <th>Data Type</th> + <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of selection"> + <td class="middle">{{item.name}}</td> + <td class="middle">{{item.type}}</td> + <td class="col-md-5 middle"> + <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect> + </td> + </tr> + </tbody> + </table> + </div> + <!-- <div *ngFor="let index of transrule"> {{index}}</div> --> </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(Form)"> - <i class="fa fa-arrow-circle-left"></i> Back + <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> + Next <i class="fa fa-arrow-circle-right"></i> </button> </div> </div> </div> - - <div id="step-3" *ngIf="currentStep == 3" 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':prName.dirty&&prName.invalid, 'has-success':prName.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" #prName="ngModel" name="prName" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$"> - <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.required)">Measure Name is required</span> - <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> - </div> + <div class="container-fluid" id="showrule" style="display:none;"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <app-rule></app-rule> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="back()"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + </div> + </div> + <div id="step-3" *ngIf="currentStep == 3" 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':prName.dirty&&prName.invalid, 'has-success':prName.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" #prName="ngModel" name="prName" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$"> + <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.required)">Measure Name is required</span> + <span class="error text-small block " *ngIf="prName.dirty && (prName.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 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>{{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>{{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" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" value="{{currentDB}}" disabled> - </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" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" value="{{currentDB}}" 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}}" 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}}" disabled> </div> </div> - <!-- <div class="col-md-12 col-lg-12 col-sm-12"> + </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: @@ -267,77 +228,73 @@ under the License. </div> </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" (click)="submit(prForm)" 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 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 "> - {{currentDB}} - </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 "> + {{currentDB}} </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"> + </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}} - </div> </div> -<!-- <div class="row"> + </div> + <!-- <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Owner: </label> @@ -345,17 +302,22 @@ under the License. {{owner}} </div> </div> --> - - </div> </div> </div> - <h5 class="row">Rules</h5> - <div class="row" *ngFor = "let newRule of newMeasure.evaluateRule.rules"> - {{newRule.rule}} - </div> - <br/> - <!-- <h5 class="row">Mapping rules</h5> --> - <!-- <div class="row"> + </div> + <h5 class="row">Rules</h5> + <div class="row" *ngFor="let index of transrule;"> + {{index}} + </div> + <div class="row" *ngFor="let index of transnullrule;"> + {{index}} + </div> + <div class="row" *ngFor="let index of transenumrule;"> + {{index}} + </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> @@ -378,15 +340,15 @@ under the License. </div> </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>
