You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2017/11/07 08:33:55 UTC
incubator-griffin git commit: redraw data from ES
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 <12...@qq.com>
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 <12...@qq.com>
Authored: Tue Nov 7 16:33:49 2017 +0800
Committer: Lionel Liu <bh...@163.com>
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);
});
}