Repository: incubator-griffin Updated Branches: refs/heads/master 998848f1e -> d32dde1f3
Solve the problems caused by asynchronous http requests 1.Solve the problems about drawing caused by asynchronous requests 2.When create job, the back button do not work Author: dodobel <[email protected]> Closes #175 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/d32dde1f Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/d32dde1f Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/d32dde1f Branch: refs/heads/master Commit: d32dde1f3e6a1c9cfadbfcb9a7359dd5e367da0c Parents: 998848f Author: dodobel <[email protected]> Authored: Wed Nov 8 14:03:11 2017 +0800 Committer: Lionel Liu <[email protected]> Committed: Wed Nov 8 14:03:11 2017 +0800 ---------------------------------------------------------------------- ui/angular/src/app/health/health.component.ts | 39 +++++++++++------ .../job/create-job/create-job.component.html | 2 +- .../app/job/create-job/create-job.component.ts | 2 +- ui/angular/src/app/metric/metric.component.ts | 38 ++++++++++++----- ui/angular/src/app/sidebar/sidebar.component.ts | 44 +++++++++++++------- 5 files changed, 85 insertions(+), 40 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/d32dde1f/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 5f3f0a2..7d745e9 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -184,6 +184,7 @@ export class HealthComponent implements OnInit { var url_organization = this.serviceService.config.uri.organization; let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_organization).subscribe(data => { + var jobMap = new Map(); this.orgWithMeasure = data; var orgNode = null; for(let orgName in this.orgWithMeasure){ @@ -195,6 +196,7 @@ export class HealthComponent implements OnInit { node = new Object(); node.name = orgName; node.dq = 0; + //node.metrics = new Array(); var metricNode = { 'name':'', 'timestamp':'', @@ -210,34 +212,47 @@ export class HealthComponent implements OnInit { 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; + jobMap.set(job, orgNode.name); + 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; - node.metrics.push(Object.assign({}, metricNode)); + this.pushToNode(jobMap, metricNode); } - - }, + }, err => { + // console.log(err); console.log('Error occurs when connect to elasticsearh!'); - }); - } + }); + } } - this.finalData.push(node); - this.orgs.push(orgNode); + this.finalData.push(node); + this.orgs.push(orgNode); } this.oData = this.finalData.slice(0); var self = this; - setTimeout(function function_name(argument) { - self.renderTreeMap(self.oData); - },1000) + setTimeout(function function_name(argument) { + self.renderTreeMap(self.oData); + },1000) }); }; + pushToNode(jobMap, metricNode){ + var jobName = metricNode.name; + var orgName = jobMap.get(jobName); + var org = null; + for(var i = 0; i < this.finalData.length; i ++){ + org = this.finalData[i]; + if(orgName == org.name){ + org.metrics.push(Object.assign({}, metricNode)); + } + } + } + ngOnInit() { var self = this; this.renderData(); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/d32dde1f/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 f347f02..28b990c 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 @@ -162,7 +162,7 @@ under the License. </div> <div class="form-group btn-container" > - <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="form.prev()"> + <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)"> --> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/d32dde1f/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 18269c8..48f0613 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 @@ -132,7 +132,7 @@ export class CreateJobComponent implements OnInit { this.maskOpen = false; } - prev(form){ + prev(){ history.back(); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/d32dde1f/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 112b0e5..9381999 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -83,6 +83,7 @@ export class MetricComponent implements OnInit { var url_organization = this.serviceService.config.uri.organization; let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_organization).subscribe(data => { + var jobMap = new Map(); this.orgWithMeasure = data; var orgNode = null; for(let orgName in this.orgWithMeasure){ @@ -110,32 +111,46 @@ export class MetricComponent implements OnInit { 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; + jobMap.set(job, orgNode.name); + 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; - node.metrics.push(Object.assign({}, metricNode)); + this.pushToNode(jobMap, metricNode); } }, err => { + // console.log(err); console.log('Error occurs when connect to elasticsearh!'); - }); - } + }); + } } - this.finalData.push(node); - this.orgs.push(orgNode); + this.finalData.push(node); + this.orgs.push(orgNode); } this.oData = this.finalData.slice(0); var self = this; - setTimeout(function function_name(argument) { - self.redraw(self.oData); - },1000) + setTimeout(function function_name(argument) { + self.redraw(self.oData); + },1000) }); - }; + } + + pushToNode(jobMap, metricNode){ + var jobName = metricNode.name; + var orgName = jobMap.get(jobName); + var org = null; + for(var i = 0; i < this.finalData.length; i ++){ + org = this.finalData[i]; + if(orgName == org.name){ + org.metrics.push(Object.assign({}, metricNode)); + } + } + } getOption(parent,i){ @@ -223,6 +238,7 @@ export class MetricComponent implements OnInit { }, 0); } + // function resizePieChart() { // $('#data-asset-pie').css({ // height: $('#data-asset-pie').parent().width(), http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/d32dde1f/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 5981ab4..fcd2d7a 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -93,7 +93,7 @@ export class SidebarComponent implements OnInit { } } - draw (metric, parentIndex, index) { + draw (metric, parentIndex, index) { $('#'+this.oData[parentIndex].name+index).toggleClass('collapse'); var chartId = 'chart' + parentIndex + '-' + index; document.getElementById(chartId).style.width = ($('.panel-heading').innerWidth()-40)+'px'; @@ -104,17 +104,18 @@ export class SidebarComponent implements OnInit { $('#'+chartId).click(function(e) { self.router.navigate(['/detailed/'+self.oData[parentIndex].metrics[index].name]) ; }); - }; + }; - getOption(parent,i){ + getOption(parent,i){ return this.chartOption.get('chart'+parent+'-'+i); - } + } - sideBarList(sysName){ + 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 => { + var jobMap = new Map(); this.orgWithMeasure = data; var orgNode = null; for(let orgName in this.orgWithMeasure){ @@ -142,29 +143,42 @@ export class SidebarComponent implements OnInit { 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; + jobMap.set(job, orgNode.name); + 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; - node.metrics.push(Object.assign({}, metricNode)); + this.pushToNode(jobMap, metricNode); } - - }, + }, err => { + // console.log(err); console.log('Error occurs when connect to elasticsearh!'); - }); - } + }); + } } - this.finalData.push(node); - this.orgs.push(orgNode); + this.finalData.push(node); + this.orgs.push(orgNode); } - this.oData = this.finalData.slice(0); + this.oData = this.finalData.slice(0); }); + } + + pushToNode(jobMap, metricNode){ + var jobName = metricNode.name; + var orgName = jobMap.get(jobName); + var org = null; + for(var i = 0; i < this.finalData.length; i ++){ + org = this.finalData[i]; + if(orgName == org.name){ + org.metrics.push(Object.assign({}, metricNode)); + } } + } ngOnInit() { this.sideBarList(null);
