Repository: incubator-griffin Updated Branches: refs/heads/master 2556a1427 -> 714a7231b
redraw data from ES fetch the newest data from es according to jobname Author: dodobel <[email protected]> Closes #173 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/714a7231 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/714a7231 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/714a7231 Branch: refs/heads/master Commit: 714a7231b87ee8625b28240374106c2f933a7919 Parents: 2556a14 Author: dodobel <[email protected]> Authored: Tue Nov 7 16:33:49 2017 +0800 Committer: Lionel Liu <[email protected]> Committed: Tue Nov 7 16:33:49 2017 +0800 ---------------------------------------------------------------------- ui/angular/src/app/app.component.html | 10 +- .../src/app/dataasset/dataasset.component.css | 14 +- .../src/app/dataasset/dataasset.component.html | 2 +- ui/angular/src/app/health/health.component.ts | 109 +++----- ui/angular/src/app/job/job.component.css | 4 +- ui/angular/src/app/job/job.component.html | 2 +- .../detail-metric/detail-metric.component.ts | 47 +--- ui/angular/src/app/metric/metric.component.html | 4 +- ui/angular/src/app/metric/metric.component.ts | 258 ++++++------------- ui/angular/src/app/service/chart.service.ts | 1 - .../src/app/sidebar/sidebar.component.html | 2 +- ui/angular/src/app/sidebar/sidebar.component.ts | 116 ++++----- 12 files changed, 198 insertions(+), 371 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 79912bc..6a21ed3 100644 --- a/ui/angular/src/app/app.component.html +++ b/ui/angular/src/app/app.component.html @@ -78,10 +78,10 @@ under the License. <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> @@ -89,7 +89,7 @@ under the License. </p> </div> </div> - </div> + </div>--> </div> </div> <app-login></app-login> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 34e0091..627c734 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.css +++ b/ui/angular/src/app/dataasset/dataasset.component.css @@ -22,14 +22,22 @@ under the License. left: 50%; top: 80%; } - - +.co{ + border-collapse: separate; +} +.co > tbody > tr:nth-of-type(even) { + background-color: #1f1f1f; +} +.co > tbody > tr:nth-of-type(odd) { + background-color: #080808; +} .table-striped > tbody > tr{ background-color: #1f1f1f; + border: 1px solid transparent; } .table > tbody + tbody { - border-top: 1px solid transparent; + border: 1px solid transparent; } .reco > tbody:nth-of-type(even) >tr { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 01f2831..71efce3 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.html +++ b/ui/angular/src/app/dataasset/dataasset.component.html @@ -65,7 +65,7 @@ under the License. </tr> <tr *ngIf="row.showDetail"> <td colspan="7" style="padding:20px 30px 10px 30px;"> - <table class="table table-striped" [mfData]="row.sd.cols" #mf2="mfDataTable"> + <table class="table table-striped co" [mfData]="row.sd.cols" #mf2="mfDataTable"> <thead> <tr style="background-color:#7D95CC"> <th st-ratio="15">Name</th> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 6b17d1a..2f3db42 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -38,6 +38,7 @@ export class HealthComponent implements OnInit { orgs = []; dataData = []; finalData = []; + oData = []; // originalData = []; originalData:any; metricName = []; @@ -58,10 +59,8 @@ export class HealthComponent implements OnInit { onChartClick($event){ if($event.data.name){ - // this.router.navigate(['/detailed/'+$event.data.name]); this.router.navigate(['/detailed/'+$event.data.name]); window.location.reload(); - // window.location.href = '/detailed/'+$event.data.name; } } @@ -183,6 +182,7 @@ export class HealthComponent implements OnInit { renderData(){ var url_organization = this.serviceService.config.uri.organization; + let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_organization).subscribe(data => { this.orgWithMeasure = data; var orgNode = null; @@ -191,80 +191,47 @@ export class HealthComponent implements OnInit { orgNode.name = orgName; orgNode.jobMap = []; orgNode.measureMap = []; + var node = null; + node = new Object(); + node.name = orgName; + node.dq = 0; + var metricNode = { + 'name':'', + 'timestamp':'', + 'dq':0, + 'details':[] + } + var array = []; + node.metrics = array; 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); + var jobs = this.orgWithMeasure[orgName][key]; + for(let i = 0;i < jobs.length;i++){ + orgNode.jobMap.push(jobs[i].jobName); + var job = jobs[i].jobName; + this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( data=> { + this.originalData = data; + 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; + node.metrics.push(Object.assign({}, metricNode)); + } + + }); + } + } + this.finalData.push(node); + this.orgs.push(orgNode); } - this.originalOrgs = this.orgs; - // 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 = 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); - } - this.metricNameUnique = []; - for(let name of this.metricName){ - if(this.metricNameUnique.indexOf(name) === -1){ - this.metricData[this.metricNameUnique.length] = new Array(); - this.metricNameUnique.push(name); - } - }; - for(var i = 0;i<this.myData.length;i++){ - for(var j = 0 ;j<this.metricNameUnique.length;j++){ - if(this.myData[i]._source.name==this.metricNameUnique[j]){ - this.metricData[j].push(this.myData[i]); - } - } - } - for(let sys of this.originalOrgs){ - var node = null; - node = new Object(); - node.name = sys.name; - node.dq = 0; - node.metrics = new Array(); - for (let metric of this.metricData){ - if(sys.jobMap.indexOf(metric[metric.length-1]._source.name)!= -1){ - var metricNode = { - 'name':'', - 'timestamp':'', - 'dq':0, - 'details':[] - } - metricNode.name = metric[metric.length-1]._source.name; - metricNode.timestamp = metric[metric.length-1]._source.tmst; - 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); - } - this.originalData = JSON.parse(JSON.stringify(this.finalData)); - var self = this; + this.oData = this.finalData.slice(0); + var self = this; setTimeout(function function_name(argument) { - // body... - self.renderTreeMap(self.finalData); - - },0) - console.log(this.finalData); - // return JSON.parse(JSON.stringify(this.finalData)); - return this.finalData; - }); + self.renderTreeMap(self.oData); + },1000) }); }; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 9e79a35..7b7a1db 100644 --- a/ui/angular/src/app/job/job.component.css +++ b/ui/angular/src/app/job/job.component.css @@ -29,7 +29,9 @@ under the License. .reco > tbody:nth-of-type(odd) >tr { background-color: #1f1f1f; } - +.co{ + border-collapse: separate; +} .table > tbody + tbody { border-top: 1px solid transparent; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/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 b805361..077934f 100644 --- a/ui/angular/src/app/job/job.component.html +++ b/ui/angular/src/app/job/job.component.html @@ -72,7 +72,7 @@ under the License. </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"> + <table class="table table-striped co" [mfData]="allInstances" #mf2="mfDataTable" [mfRowsOnPage]="10"> <thead> <tr style="background-color:#7D95CC"> <th style="width:30%">AppID</th> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts index 73ba71b..6554b5b 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts @@ -52,60 +52,29 @@ export class DetailMetricComponent implements OnInit { finalData:any; ngOnInit() { - console.log('init'); this.currentMeasure = this.route.snapshot.paramMap.get('name'); - // this.finalData = this.getData(this.currentMeasure); var self = this; - // let url_dashboard = this.serviceService.config.uri.dashboard; var metricDetailUrl = this.serviceService.config.uri.dashboard; - // let data = this.metricData; - this.http.post(metricDetailUrl, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": this.currentMeasure }}]}}, "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe( data=> { + this.http.post(metricDetailUrl, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": this.currentMeasure }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":10000}).subscribe( data=> { var metric = { - 'name':'', - 'timestamp':0, - 'dq':0, - 'details':[] - }; + 'name':'', + 'timestamp':0, + 'dq':0, + 'details':[] + }; this.data = data; - console.log(this.data); - // this.data = this.allData; metric.name = this.data.hits.hits[0]._source.name; metric.timestamp =this.data.hits.hits[this.data.hits.hits.length-1]._source.tmst; metric.dq = this.data.hits.hits[this.data.hits.hits.length-1]._source.value.matched/this.data.hits.hits[this.data.hits.hits.length-1]._source.value.matched*100; metric.details = new Array(); for(let point of this.data.hits.hits){ - metric.details.push(point); + metric.details.push(point); }; this.chartOption = this.chartService.getOptionBig(metric); $('#bigChartDiv').height(window.innerHeight-120+'px'); $('#bigChartDiv').width(window.innerWidth-400+'px'); $('#bigChartContainer').show(); - // return metric; - }); - // setTimeout(function function_name(argument) { - // // body... - - // }) - - } - ngAfterContentInit (){ - console.log('after content init'); - } - - ngAfterContentChecked(){ - console.log('after content checked'); - } - - ngOnDestroy(){ - console.log('destroy'); - } - - ngAfterViewInit(){ - console.log('after view init') - } - - ngAfterViewChecked(){ - console.log('after view checked'); + }); } onResize(event){ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/metric/metric.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.html b/ui/angular/src/app/metric/metric.component.html index cb85b00..004cc91 100644 --- a/ui/angular/src/app/metric/metric.component.html +++ b/ui/angular/src/app/metric/metric.component.html @@ -25,7 +25,7 @@ under the License. <label>Organization: </label> <select ng-disabled="orgSelectDisabled" class="form-control" (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex"> <option value="0">-- All --</option> - <option *ngFor="let opt of originalOrgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> + <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> </select> </span> <span style="padding-left:30px;"> @@ -37,7 +37,7 @@ under the License. </span> </div> </div> - <div *ngFor="let outerItems of finalData;let parent=index"> + <div *ngFor="let outerItems of oData;let parent=index"> <div class="row" > <div class="col-sm-12 col-md-12 col-lg-12"> <h4>{{outerItems.name}}</h4> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/metric/metric.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.ts b/ui/angular/src/app/metric/metric.component.ts index 96d9ba2..8f47afa 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -42,15 +42,16 @@ export class MetricComponent implements OnInit { // finalData :any; data :any; finalData = []; + oData = []; + mData = []; + fData = []; originalOrgs = []; status:{ 'health':number, 'invalid':number }; chartOption = new Map(); - // var formatUtil = echarts.format; dataData = []; - // originalData = []; originalData:any; metricName = []; metricNameUnique = []; @@ -62,40 +63,25 @@ export class MetricComponent implements OnInit { // var formatUtil = echarts.format; metricData = []; orgWithMeasure:any; + alljobs = []; public duplicateArray() { let arr = []; - this.finalData.forEach((x) => { + this.oData.forEach((x) => { arr.push(Object.assign({}, x)); }); - console.log(arr); // arr.map((x) => {x.status = DEFAULT}); - return this.finalData.concat(arr); + return this.oData.concat(arr); } ngOnInit() { - this.renderData(); - // var self = this; - // // self.finalData = self.getMetricService.renderData(); - // // self.finalData = self.renderData(); - // // self.originalData = JSON.parse(JSON.stringify(self.finalData)); - // self.data = self.renderData(); - // setTimeout(function(){ - // // body... - // // if(self.getMetricService.renderData()){ - - // // self.redraw(self.finalData); - // // self.redraw(self.renderData()); - // self.redraw(self.data); - // // } - // },0); - + this.renderData(); } - renderData(){ var url_organization = this.serviceService.config.uri.organization; + let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_organization).subscribe(data => { this.orgWithMeasure = data; var orgNode = null; @@ -104,80 +90,47 @@ export class MetricComponent implements OnInit { orgNode.name = orgName; orgNode.jobMap = []; orgNode.measureMap = []; + var node = null; + node = new Object(); + node.name = orgName; + node.dq = 0; + //node.metrics = new Array(); + var metricNode = { + 'name':'', + 'timestamp':'', + 'dq':0, + 'details':[] + } + var array = []; + node.metrics = array; 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); + var jobs = this.orgWithMeasure[orgName][key]; + for(let i = 0;i < jobs.length;i++){ + orgNode.jobMap.push(jobs[i].jobName); + var job = jobs[i].jobName; + this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( data=> { + this.originalData = data; + 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; + node.metrics.push(Object.assign({}, metricNode)); + } + }); + } + } + this.finalData.push(node); + this.orgs.push(orgNode); } - this.originalOrgs = this.orgs; - // 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 = 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); - } - this.metricNameUnique = []; - for(let name of this.metricName){ - if(this.metricNameUnique.indexOf(name) === -1){ - this.metricData[this.metricNameUnique.length] = new Array(); - this.metricNameUnique.push(name); - } - }; - for(var i = 0;i<this.myData.length;i++){ - for(var j = 0 ;j<this.metricNameUnique.length;j++){ - if(this.myData[i]._source.name==this.metricNameUnique[j]){ - this.metricData[j].push(this.myData[i]); - } - } - } - for(let sys of this.originalOrgs){ - var node = null; - node = new Object(); - node.name = sys.name; - node.dq = 0; - node.metrics = new Array(); - for (let metric of this.metricData){ - if(sys.jobMap.indexOf(metric[metric.length-1]._source.name)!= -1){ - var metricNode = { - 'name':'', - 'timestamp':'', - 'dq':0, - 'details':[] - } - metricNode.name = metric[metric.length-1]._source.name; - metricNode.timestamp = metric[metric.length-1]._source.tmst; - 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); - } - this.originalData = JSON.parse(JSON.stringify(this.finalData)); - var self = this; + this.oData = this.finalData.slice(0); + var self = this; setTimeout(function function_name(argument) { - // body... - self.redraw(self.finalData); - - },0) - // console.log(this.finalData); - // return JSON.parse(JSON.stringify(this.finalData)); - return this.finalData; - }); + self.redraw(self.oData); + },1000) }); }; @@ -186,24 +139,6 @@ export class MetricComponent implements OnInit { return this.chartOption.get('thumbnail'+parent+'-'+i); } - // this.originalData = angular.copy(this.finalData); - // if($routeParams.sysName && this.originalData && this.originalData.length > 0){ - // for(var i = 0; i < this.originalData.length; i ++){ - // if(this.originalData[i].name == $routeParams.sysName){ - // this.selectedOrgIndex = i; - // this.changeOrg(); - // this.orgSelectDisabled = true; - // break; - // } - // } - // } - // $timeout(function() { - // redraw(this.finalData); - // }); - // }); - // }); -// $http.post(url_dashboard, {"query": {"match_all":{}},"size":1000}).success(function(res) { - redraw (data) { this.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px'; for(let i = 0;i<data.length;i++){ @@ -211,103 +146,78 @@ export class MetricComponent implements OnInit { for(let j = 0;j<data[i].metrics.length;j++){ let index = j; let chartId = 'thumbnail' + parentIndex + '-' + index; - $('#thumbnail'+parentIndex+'-'+index).get(0).style.width = $('#thumbnail'+parentIndex+'-'+index).parent().width()+'px'; - $('#thumbnail'+parentIndex+'-'+index).get(0).style.height = this.chartHeight; + let _chartId = '#' + chartId; + var divs = $(_chartId); + divs.get(0).style.width = divs.parent().width()+'px'; + divs.get(0).style.height = this.chartHeight; this.chartOption.set(chartId,this.chartService.getOptionThum(data[i].metrics[j])); } } } goTo(parent,i){ - this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ; + this.router.navigate(['/detailed/'+this.oData[parent].metrics[i].name]) ; } changeOrg() { this.selectedMeasureIndex = undefined; this.measureOptions = []; - this.finalData = []; + this.oData = this.finalData.slice(0); if(this.selectedOrgIndex == 0){ - for(let data of this.originalData){ - this.finalData.push(data); - } + this.oData = this.finalData; } else { - var org = this.originalData[this.selectedOrgIndex-1]; - for(let key in this.orgWithMeasure){ - if(key == org.name){ - for(let measure in this.orgWithMeasure[key]){ - this.measureOptions.push(measure); - } - } + var org = this.orgs[this.selectedOrgIndex-1]; + this.measureOptions = org.measureMap; + for(let i = 0;i<this.oData.length;i++){ + if(this.oData[i].name!=org.name){ + for(var j = i; j < this.oData.length - 1; j++){ + this.oData[j] = this.oData[j + 1]; + } + this.oData.length--; + i--; + } } - this.finalData.push(org); - // console.log(this.finalData); - // for(let metric of org.metrics){ - // if(this.measureOptions.indexOf(metric.name) == -1){ - // this.measureOptions.push(metric.name); - // } - // } - } + this.mData = this.oData.slice(0); var self = this; - // self.data = self.renderData(); setTimeout(function() { - // self.redraw(self.finalData); - self.redraw(self.finalData); - }, 0); - // console.log(this.originalData); + self.redraw(self.oData); + }, 1000); }; changeMeasure() { - this.finalData = []; - var jobdetail = []; - if(this.selectedOrgIndex == 0){ - for(let data of this.originalData){ - this.finalData.push(data); - } - } else { - var org = JSON.parse(JSON.stringify(this.originalData[this.selectedOrgIndex-1])); - this.finalData.push(org); - // } + var jobdetail = []; + this.fData = JSON.parse(JSON.stringify(this.mData)); + this.oData = this.fData; if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){ var measure = this.measureOptions[this.selectedMeasureIndex-1]; for(let key in this.orgWithMeasure){ - if(key == org.name){ - for(let measurename in this.orgWithMeasure[key]){ - if(measurename == measure){ - // console.log(this.orgWithMeasure[key][measurename]); - for(let i=0;i< this.orgWithMeasure[key][measurename].length;i++){ - jobdetail.push(this.orgWithMeasure[key][measurename][i].jobName); + if(key == this.fData[0].name){ + for(let measurename in this.orgWithMeasure[key]){ + if(measurename == measure){ + var jobname = this.orgWithMeasure[key][measurename]; + for(let i=0;i< jobname.length;i++){ + jobdetail.push(jobname[i].jobName); } - } } - } + } + } } - for(let sys of this.finalData){ - let oldMetrics = sys.metrics; - sys.metrics = []; - for(let i = 0;i<oldMetrics.length;i++){ - - // console.log(jobdetail); - for(let j=0;j< jobdetail.length;j++){ - console.log(oldMetrics[i].name); - console.log(jobdetail[j]); - if(oldMetrics[i].name == jobdetail[j]) { - sys.metrics.push(oldMetrics[i]); + for(let i = 0;i<this.fData[0].metrics.length;i++){ + if(jobdetail.indexOf(this.fData[0].metrics[i].name) === -1){ + for(var j = i; j < this.fData[0].metrics.length - 1; j++){ + this.fData[0].metrics[j] = this.fData[0].metrics[j + 1]; } - } - - }; - }; - } + this.fData[0].metrics.length--; + i--; + } + } } var self = this; - // self.data = self.renderData(); setTimeout(function() { - // self.redraw(self.finalData); - self.redraw(self.finalData); + self.redraw(self.oData); }, 0); - // console.log(this.originalData); } // function resizePieChart() { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/service/chart.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/chart.service.ts b/ui/angular/src/app/service/chart.service.ts index 056b1eb..32210dd 100644 --- a/ui/angular/src/app/service/chart.service.ts +++ b/ui/angular/src/app/service/chart.service.ts @@ -71,7 +71,6 @@ export class ChartService { data.sort(function(a, b){ return a[0] - b[0]; }); - return data; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/sidebar/sidebar.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.html b/ui/angular/src/app/sidebar/sidebar.component.html index f3bcb5e..8f92f3e 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.html +++ b/ui/angular/src/app/sidebar/sidebar.component.html @@ -38,7 +38,7 @@ under the License. </div> </div> <div id="side-bar-metrics" class="row"> - <div *ngFor="let outerItems of finalData;let parent=index"> + <div *ngFor="let outerItems of oData;let parent=index"> <div class="well"> <div class="col-sm-4 col-lg-4 col-md-4 "> <h4 > http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/714a7231/ui/angular/src/app/sidebar/sidebar.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.ts b/ui/angular/src/app/sidebar/sidebar.component.ts index 140c981..26712d9 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -40,7 +40,8 @@ export class SidebarComponent implements OnInit { public serviceService:ServiceService, public chartService:ChartService) { } - + + oData = []; orgs = []; finalData = []; originalOrgs = []; @@ -70,7 +71,7 @@ export class SidebarComponent implements OnInit { } onResize(event){ - console.log('sidebar resize'); + // console.log('sidebar resize'); if(window.innerWidth < 992) { $('#rightbar').css('display', 'none'); } else { @@ -83,17 +84,17 @@ export class SidebarComponent implements OnInit { $('#side-bar-metrics').css({ height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 }); - for(let i=0;i<this.finalData.length;i++){ - for(let j=0;j<this.finalData[i].metrics.length;j++){ - if (!this.finalData[i].metrics[j].tag) { - this.draw(this.finalData[i].metrics[j], i, j); + for(let i=0;i<this.oData.length;i++){ + for(let j=0;j<this.oData[i].metrics.length;j++){ + if (!this.oData[i].metrics[j].tag) { + this.draw(this.oData[i].metrics[j], i, j); } } } } draw (metric, parentIndex, index) { - $('#'+this.finalData[parentIndex].name+index).toggleClass('collapse'); + $('#'+this.oData[parentIndex].name+index).toggleClass('collapse'); var chartId = 'chart' + parentIndex + '-' + index; document.getElementById(chartId).style.width = ($('.panel-heading').innerWidth()-40)+'px'; document.getElementById(chartId).style.height = '200px'; @@ -101,7 +102,7 @@ export class SidebarComponent implements OnInit { var self = this; $('#'+chartId).unbind('click'); $('#'+chartId).click(function(e) { - self.router.navigate(['/detailed/'+self.finalData[parentIndex].metrics[index].name]) ; + self.router.navigate(['/detailed/'+self.oData[parentIndex].metrics[index].name]) ; }); }; @@ -112,6 +113,7 @@ export class SidebarComponent implements OnInit { sideBarList(sysName){ // this.finalData = this.getMetricService.renderData(); var url_organization = this.serviceService.config.uri.organization; + let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_organization).subscribe(data => { this.orgWithMeasure = data; var orgNode = null; @@ -120,74 +122,44 @@ export class SidebarComponent implements OnInit { orgNode.name = orgName; orgNode.jobMap = []; orgNode.measureMap = []; + var node = null; + node = new Object(); + node.name = orgName; + node.dq = 0; + //node.metrics = new Array(); + var metricNode = { + 'name':'', + 'timestamp':'', + 'dq':0, + 'details':[] + } + var array = []; + node.metrics = array; 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); + var jobs = this.orgWithMeasure[orgName][key]; + for(let i = 0;i < jobs.length;i++){ + orgNode.jobMap.push(jobs[i].jobName); + var job = jobs[i].jobName; + this.http.post(url_dashboard, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": job }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( data=> { + this.originalData = data; + 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; + node.metrics.push(Object.assign({}, metricNode)); + } + + }); + } + } + this.finalData.push(node); + this.orgs.push(orgNode); } - this.originalOrgs = this.orgs; - // 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 = 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); - } - this.metricNameUnique = []; - for(let name of this.metricName){ - if(this.metricNameUnique.indexOf(name) === -1){ - this.metricData[this.metricNameUnique.length] = new Array(); - this.metricNameUnique.push(name); - } - }; - for(var i = 0;i<this.myData.length;i++){ - for(var j = 0 ;j<this.metricNameUnique.length;j++){ - if(this.myData[i]._source.name==this.metricNameUnique[j]){ - this.metricData[j].push(this.myData[i]); - } - } - } - for(let sys of this.originalOrgs){ - var node = null; - node = new Object(); - node.name = sys.name; - node.dq = 0; - node.metrics = new Array(); - for (let metric of this.metricData){ - if(sys.jobMap.indexOf(metric[metric.length-1]._source.name)!= -1){ - var metricNode = { - 'name':'', - 'timestamp':'', - 'dq':0, - 'details':[] - } - metricNode.name = metric[metric.length-1]._source.name; - metricNode.timestamp = metric[metric.length-1]._source.tmst; - 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); - } - this.originalData = JSON.parse(JSON.stringify(this.finalData)); - // console.log(this.finalData); - // return JSON.parse(JSON.stringify(this.finalData)); - return this.finalData; - }); + this.oData = this.finalData.slice(0); }); }
