Repository: incubator-griffin Updated Branches: refs/heads/master a0b130ae0 -> f581db306
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 058e373..0230d71 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 @@ -45,6 +45,14 @@ under the License. <div class="stepNumber"> 3 </div> + <span class="stepDesc text-small">Partition Configuration </span> + </a> + </li> + <li (click)="goTo(4)"> + <a [ngClass]="{'selected' : currentStep >= 4, 'done' : currentStep > 4}"> + <div class="stepNumber"> + 4 + </div> <span class="stepDesc text-small"> Configuration </span> </a> </li> @@ -166,6 +174,35 @@ under the License. </div> </div> <div id="step-3" *ngIf="currentStep == 3" class="formStep"> + <label class="stepDesc">Please complete the partition configuration for {{currentTable}}</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" style="text-align:center"> + Data Source:{{currentDB}}.{{currentTable}} + </div> + <app-configuration [data]="config" [location]="srclocation" (event)="getData($event)"></app-configuration> + </div> + </div> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + <toaster-container></toaster-container> + <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)"> + Next <i class="fa fa-arrow-circle-right"></i> + </button> + </div> + </div> + </div> + <div id="step-4" *ngIf="currentStep == 4" class="formStep"> <label class="stepDesc">Please setup the measure required information</label> <div class="container-fluid"> <div class="col-md-12 col-lg-12 col-sm-12"> @@ -208,7 +245,7 @@ under the License. </div> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12"> + <!-- <div class="col-md-12 col-lg-12 col-sm-12"> <div class="form-group"> <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> Organization<span class="symbol required"></span>: @@ -217,11 +254,21 @@ under the License. <input type="text" id="systemSelector" class="form-control" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" [(ngModel)]="org"> </div> </div> - </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"> + Group:<span class="symbol required"></span>: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <tag-input class="form-control" style="height: 44px;padding: 0 6px;" id="systemSelector" required [(ngModel)]='grp' [editable]='true' name="grp"></tag-input> + </div> + </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: + DataSource: </label> <div class="col-md-10 col-lg-10 col-sm-10"> <input type="text" class="form-control" name="DataAsset" value="{{currentTable}}" disabled> @@ -261,7 +308,7 @@ under the License. <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> + <button type="button" class="close" (click)="hide()">×</button> <h4 class="modal-title">Save the measure with the below information?</h4> </div> <div class="modal-body"> @@ -296,20 +343,20 @@ under the License. {{type}} </div> </div> - <div class="row"> + <!-- <div class="row"> <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Organization: + Group: </label> <div class="col-md-8 col-lg-8 col-sm-8 "> - {{org}} + {{showgrp}} </div> - </div> + </div> --> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> - DataAsset: + DataSource: </label> <div class="col-md-8 col-lg-8 col-sm-8"> - {{currentTable}} + {{currentDB}}.{{currentTable}} </div> </div> <div class="row"> @@ -324,7 +371,18 @@ under the License. </div> </div> <h5 class="row">Rules</h5> - <div class="row" *ngFor="let index of transrule;"> + <!-- <div *ngIf="selectedItems"> + <div class="row" *ngFor="let key of objectKeys(selectedItems)"> + {{key}}: + <div style="display:inline-block" *ngFor="let index of objectKeys(selectedItems[key])" > + {{selectedItems[key][index].itemName}} , + </div> + </div> + </div> --> + <div class="row" *ngFor="let index of noderule;"> + {{index.name}} : {{index.infos}} + </div> + <!-- <div class="row" *ngFor="let index of transrule;"> {{index}} </div> <div class="row" *ngFor="let index of transnullrule;"> @@ -332,7 +390,7 @@ under the License. </div> <div class="row" *ngFor="let index of transenumrule;"> {{index}} - </div> + </div> --> <br/> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/pr/pr.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.ts b/ui/angular/src/app/measure/create-measure/pr/pr.component.ts index b49f55c..def6071 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.ts +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.ts @@ -19,16 +19,18 @@ under the License. import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { FormsModule } from '@angular/forms'; -import {ServiceService} from '../../../service/service.service'; +import { ServiceService } from '../../../service/service.service'; import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component'; import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { ToasterModule, ToasterService,ToasterContainerComponent} from 'angular2-toaster'; import * as $ from 'jquery'; -import { HttpClient} from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { Router} from "@angular/router"; -import {DataTableModule} from "angular2-datatable"; -import { AfterViewChecked, ElementRef} from '@angular/core'; +import { DataTableModule } from "angular2-datatable"; +import { AfterViewChecked, ElementRef } from '@angular/core'; import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; +import { ConfigurationComponent } from "../configuration/configuration.component"; +// import { TagInputModule } from 'ngx-chips'; @@ -39,6 +41,7 @@ class node { isExpanded:boolean; cols:Col[]; parent:string; + location:string; }; class Rule{ @@ -85,13 +88,17 @@ class Col{ }) export class PrComponent implements AfterViewChecked, OnInit{ - org:string; + noderule = []; + // grp = []; + // showgrp:string; + // finalgrp = []; transrule = []; transenumrule = []; transnullrule = []; showrule = false; dropdownList = {}; selectedItems = {}; + allRules = {}; dropdownSettings = {}; currentStep = 1; firstCond = false; @@ -107,33 +114,53 @@ export class PrComponent implements AfterViewChecked, OnInit{ desc:string; owner = 'test'; currentDBstr: string; + rulenode = { + "name": "", + "noderules": "" + }; newMeasure = { "name": "", + "measure.type":"griffin", + "dq.type": "profiling", "process.type": "batch", "owner":"", "description":"", - "organization":"", + // "group":[], "data.sources": [ { "name": "source", "connectors": [ { + "name":"", "type": "hive", "version": "1.2", + "data.unit":"", "config": { "database": "", - "table.name":"" - } + "table.name":"", + "where":'' + }, + "predicates":[ + { + "type":"file.exist", + "config":{ + "root.path":"hdfs:///griffin/demo_src", + "path":"" + } + } + ] } ] } ], - "evaluateRule": { + "evaluate.rule": { "rules": [ { "dsl.type": "griffin-dsl", "dq.type": "profiling", "rule": "", + "description": "", + "name": "", "details": { // "profiling": { // "name": "" @@ -146,6 +173,19 @@ export class PrComponent implements AfterViewChecked, OnInit{ name:''; createResult :any; newCond:any; + srclocation: string; + srcname: string; + config = { + "where":'', + "num":1, + "timetype":'day', + "needpath":false, + "path":'' + }; + where: string; + size: string; + path: string; + location: string; private toasterService: ToasterService; public visible = false; @@ -157,6 +197,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.transrule = []; this.transenumrule = []; this.transnullrule = []; + this.noderule = []; } public onContainerClicked(event: MouseEvent): void { @@ -301,6 +342,8 @@ export class PrComponent implements AfterViewChecked, OnInit{ } return (this.selection.length == selectedlen) ? true :false; } else if (step == 3) { + return true; + } else if(step == 4){ } return false; } @@ -311,34 +354,53 @@ export class PrComponent implements AfterViewChecked, OnInit{ goTo (i) { this.currentStep = i; } - submit (form) { + submit (form) { // form.$setPristine(); + // this.finalgrp = []; if (!form.valid) { this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); return false; } + // for(let i=0;i<this.grp.length;i++){ + // this.finalgrp.push(this.grp[i].value); + // } + // this.showgrp = this.finalgrp.join(","); this.newMeasure = { "name": this.name, + "measure.type":"griffin", + "dq.type": "profiling", "process.type": "batch", "owner":this.owner, "description":this.desc, - "organization":this.org, + // "group":this.finalgrp, "data.sources": [ { "name": "source", "connectors": [ - { + { + "name":this.srcname, "type": "hive", "version": "1.2", + "data.unit":this.size, "config": { "database": this.currentDB, - "table.name":this.currentTable - } + "table.name":this.currentTable, + "where":this.where + }, + "predicates":[ + { + "type":"file.exist", + "config":{ + "root.path":"hdfs:///griffin/demo_src", + "path":this.path + } + } + ] } ] } ], - "evaluateRule": { + "evaluate.rule": { "rules": [ // { // "dsl.type": "griffin-dsl", @@ -350,55 +412,64 @@ export class PrComponent implements AfterViewChecked, OnInit{ } }; this.getGrouprule(); + if(this.size.indexOf('0')==0){ + delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit']; + } this.visible = true; setTimeout(() => this.visibleAnimate = true, 100); } - getRule(trans){ + getRule(trans,otherinfo){ var rule = ''; for(let i of trans){ rule = rule + i + ','; } rule = rule.substring(0,rule.lastIndexOf(',')); - this.pushRule(rule); + this.pushRule(rule,otherinfo); } - pushEnmRule(rule,grpname){ + pushEnmRule(rule,grpname,originrule){ var self = this; - self.newMeasure.evaluateRule.rules.push({ + self.newMeasure['evaluate.rule'].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", "rule": rule, + "description": originrule, + "name": grpname, "details": { - "profiling": { - "name": grpname, - "persist.type": "metric" - } + // "profiling": { + // "name": grpname, + // "persist.type": "metric" + // } } }); } - pushNullRule(rule,nullname){ + pushNullRule(rule,nullname,originrule){ var self = this; - self.newMeasure.evaluateRule.rules.push({ + self.newMeasure['evaluate.rule'].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", "rule": rule, + "description": originrule, + "name": nullname, "details": { - "profiling": { - "name": nullname, - "persist.type": "metric" - } + // "profiling": { + // "name": nullname, + // "persist.type": "metric" + // } } }); } - pushRule(rule){ + pushRule(rule,otherinfo){ var self = this; - self.newMeasure.evaluateRule.rules.push({ + self.newMeasure['evaluate.rule'].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", "rule": rule, + "description": otherinfo, + "name": "profiling", "details": {} }); } @@ -437,6 +508,8 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.currentTable = node.data.name; this.currentDB = node.data.parent; this.schemaCollection = node.data.cols; + this.srcname = 'source' + new Date().getTime(); + this.srclocation = node.data.location; this.selectedAll = false; this.selection = []; for(let row of this.schemaCollection){ @@ -472,26 +545,36 @@ export class PrComponent implements AfterViewChecked, OnInit{ var grpname = ''; for(let key in this.selectedItems){ selected.name = key; + var info = ''; + var otherinfo = ''; for(let i = 0;i<this.selectedItems[key].length;i++){ - var originrule = this.selectedItems[key][i].itemName; + var originrule = this.selectedItems[key][i].itemName; + info = info + originrule + ','; if(originrule == 'Enum Detection Count'){ enmvalue = this.transferRule(originrule,selected); grpname = selected.name + '-grp'; this.transenumrule.push(enmvalue); - this.pushEnmRule(enmvalue,grpname); + this.pushEnmRule(enmvalue,grpname,originrule); }else if(originrule == 'Null Count'){ nullvalue = this.transferRule(originrule,selected); nullname = selected.name + '-nullct'; this.transnullrule.push(nullvalue); - this.pushNullRule(nullvalue,nullname); - }else{ + this.pushNullRule(nullvalue,nullname,originrule); + }else{ + otherinfo = otherinfo + originrule + ','; value = this.transferRule(originrule,selected); this.transrule.push(value); } - } + } + info = info.substring(0,info.lastIndexOf(',')); + otherinfo = otherinfo.substring(0,otherinfo.lastIndexOf(',')); + this.noderule.push({ + "name":key, + "infos":info + }); } if(this.transrule.length != 0){ - this.getRule(this.transrule); + this.getRule(this.transrule,otherinfo); } } @@ -512,6 +595,13 @@ export class PrComponent implements AfterViewChecked, OnInit{ document.getElementById('showrule').style.display = 'none'; document.getElementById('notshowrule').style.display = ''; } + + getData(evt){ + this.config = evt; + this.where = evt.where; + this.size = evt.num + evt.timetype; + this.path = evt.path; + } ngOnInit() { var allDataassets = this.serviceService.config.uri.dataassetlist; @@ -531,6 +621,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ new_child.name = this.data[db][i]['tableName']; new_node.children.push(new_child); new_child.isExpanded = false; + new_child.location = this.data[db][i]['sd']['location']; new_child.parent = db; new_child.cols = Array<Col>(); for(let j = 0;j<this.data[db][i]['sd']['cols'].length;j++){ @@ -555,7 +646,8 @@ export class PrComponent implements AfterViewChecked, OnInit{ enableSearchFilter: true, classes: "myclass", groupBy: "category" - }; + }; + this.size = '1day'; }; ngAfterViewChecked(){ this.resizeWindow(); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/measure-detail/measure-detail.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html index 857cbca..f51095f 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html @@ -48,20 +48,36 @@ under the License. {{ruleData.type}} </div> </div> - <div class="row"> + <!-- <div class="row"> <label for="systemSelector" class="col-xs-4"> Organization: </label> <div class="col-xs-8 " style="color: #fff"> {{ruleData.organization}} </div> + </div> --> + <div class="row" *ngIf="ruleData.type=='accuracy'"> + <label class="col-xs-4"> + Source: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourceTable}} + </div> </div> - <div class="row"> + <div class="row" *ngIf="ruleData.type=='accuracy'"> <label class="col-xs-4"> - DataAsset: + Target: </label> <div class="col-xs-8" style="color: #fff"> - {{sourceTable}} {{targetTable}} + {{targetTable}} + </div> + </div> + <div class="row" *ngIf="ruleData.type=='profiling'"> + <label class="col-xs-4"> + DataSource: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourceTable}} </div> </div> <div class="row"> @@ -77,11 +93,11 @@ under the License. </div> <!--//row--> <br/> - <div> + <div *ngIf="ruleData['measure.type']!=='external'"> <h5 class="row">Mapping rules</h5> - <div class=""> + <div *ngIf="ruleData.type=='accuracy'" class=""> <p *ngFor="let index of currentrule">{{index.rule}}</p> - <div *ngIf="ruleData.type=='accuracy'"> + <div> <p> <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> </p> @@ -103,5 +119,8 @@ under the License. </div> </div> </div> + <div *ngIf="ruleData.type=='profiling'" class=""> + <p>{{this.prorule}}</p> + </div> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts b/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts index 68f70a2..5087bf0 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts @@ -42,6 +42,7 @@ export class MeasureDetailComponent implements OnInit { targetTable : string; type:string; currentrule:string; + prorule = ''; ngOnInit() { this.ruleData = { @@ -53,18 +54,25 @@ export class MeasureDetailComponent implements OnInit { getModelUrl = getModel+"/"+this.currentId; this.http.get(getModelUrl).subscribe(data=>{ this.ruleData = data; - this.currentrule = this.ruleData.evaluateRule.rules; - this.ruleData.type = this.currentrule[0]["dq.type"]; - var sourcedata = this.ruleData["data.sources"][0].connectors[0].config; - this.sourceDB = sourcedata.database; - this.sourceTable = sourcedata["table.name"]; - if(this.ruleData.type === "accuracy"){ - var targetdata = this.ruleData["data.sources"][1].connectors[0].config; - this.targetDB = targetdata.database; - this.targetTable = targetdata["table.name"]; - }else{ - this.targetDB = ''; - this.targetTable = ''; + this.ruleData.type = this.ruleData["dq.type"]; + if(this.ruleData['measure.type'] !== 'external'){ + this.currentrule = this.ruleData['evaluate.rule'].rules; + var currentprorule = this.ruleData['evaluate.rule'].rules; + for(let index in currentprorule){ + this.prorule = this.prorule + currentprorule[index].description + ',' + } + this.prorule = this.prorule.substring(0,this.prorule.lastIndexOf(',')); + var sourcedata = this.ruleData["data.sources"][0].connectors[0].config; + this.sourceDB = sourcedata.database; + this.sourceTable = sourcedata["table.name"]; + if(this.ruleData.type === "accuracy"){ + var targetdata = this.ruleData["data.sources"][1].connectors[0].config; + this.targetDB = targetdata.database; + this.targetTable = targetdata["table.name"]; + }else{ + this.targetDB = ''; + this.targetTable = ''; + } } },err => { console.log('error'); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/measure.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.html b/ui/angular/src/app/measure/measure.component.html index 8f71f6a..9a6b5e9 100644 --- a/ui/angular/src/app/measure/measure.component.html +++ b/ui/angular/src/app/measure/measure.component.html @@ -24,14 +24,13 @@ under the License. </a> </p> <div id="modelContainer"> - <!-- <ng2-smart-table [settings]="settings" [source]="source" id="measureTable" (delete)="onDelete($event)" (edit)="onEdit($event)"></ng2-smart-table> --> <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> <thead> <tr style="background-color:#7D95CC"> <th st-ratio="15">Measure Name</th> <th st-ratio="15">Measure Type</th> <th st-ratio="20">Description</th> - <th st-ratio="5">Organization</th> + <!-- <th st-ratio="5">Group</th> --> <th st-ratio="5">Action</th> </tr> </thead> @@ -44,18 +43,18 @@ under the License. </tr> <tr *ngFor="let row of mf.data"> <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> - <td>{{row.type}}</td> + <td>{{row["dq.type"]}}</td> <td>{{row.description}}</td> - <td>{{row.organization}}</td> + <!-- <td>{{row.group}}</td> --> <td> <!-- <a [ngClass]="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" (click)="remove(row)" title="delete" style="text-decoration:none"> --> <a (click)="remove(row)" title="delete" style="text-decoration:none"> - <i class="fa fa-trash-o po"></i> - </a> + <i class="fa fa-trash-o po"></i> + </a> <a routerLink="/measure/{{row.id}}" title="subscribe"> - <i class="fa fa-eye"></i> - </a> + <i class="fa fa-eye"></i> + </a> </td> </tr> </tbody> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/measure.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.ts b/ui/angular/src/app/measure/measure.component.ts index de70a43..c89c062 100644 --- a/ui/angular/src/app/measure/measure.component.ts +++ b/ui/angular/src/app/measure/measure.component.ts @@ -18,8 +18,7 @@ under the License. */ import { Component, OnInit} from '@angular/core'; import { HttpClient} from '@angular/common/http'; -import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table'; -import {DataTableModule} from "angular2-datatable"; +import { DataTableModule} from "angular2-datatable"; import { Router} from "@angular/router"; import { FormControl } from '@angular/forms'; import { FormsModule } from '@angular/forms'; @@ -38,7 +37,6 @@ import * as $ from 'jquery'; export class MeasureComponent implements OnInit { //results:object[]; results:any; - source:LocalDataSource; public visible = false; public visibleAnimate = false; deletedRow : any; @@ -46,8 +44,7 @@ export class MeasureComponent implements OnInit { targetTable :string; deleteId : number; deleteIndex:number; - // measureData= [{"id":22,"name":"i","description":"i","organization":"waq","type":"accuracy","source":{"id":43,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":44,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":22,"sampleRatio":0,"rules":"$source['id'] == $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":23,"name":"y","description":"y","organization":"waq","type":"accuracy","source":{"id":45,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":46,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":23,"sampleRatio":0,"rules":"$source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":24,"name":"ggg","description":"g","organization":"waq","type":"accuracy","source":{"id":47,"type":"HIVE","version":"1.2","config":{"database" :"default","table.name":"ext"}},"target":{"id":48,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":24,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":25,"name":"t","description":"t","organization":"qaq","type":"accuracy","source":{"id":49,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":50,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":25,"sampleRatio":0,"rules":"$source['name'] >= $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":26,"name":"yyy","description":"yyy","organization":"yyy","type":"accuracy","source":{"id":51,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":52,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":26," sampleRatio":0,"rules":"$source['id'] !== $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":27,"name":"dd","description":"dd","organization":"waq","type":"accuracy","source":{"id":53,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":54,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":27,"sampleRatio":0,"rules":"$source['name'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":28,"name":"yyyyyyyyy","description":"y","organization":"waq","type":"accuracy","source":{"id":55,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":56,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":28,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":29,"name":"this","description":n ull,"organization":"hadoop","type":"accuracy","source":{"id":57,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":58,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":29,"sampleRatio":0,"rules":"$source['id'] == $target['id'] AND $source['name'] !== $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":30,"name":"new","description":null,"organization":"griffin","type":"accuracy","source":{"id":59,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":60,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":30,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":31,"name":"www","description":"wn ","organization":"waq","type":"accuracy","source":{"id":61,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":62,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":31,"sampleRatio":0,"rules":"$source['id'] > $target['id'] AND $source['name'] == $target['name'] AND $source['age'] !== $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":32,"name":"testtest","description":null,"organization":"waq","type":"accuracy","source":{"id":63,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":64,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":32,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] > $target['name'] AND $source['age'] == $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":33,"name":"search_hourly","descriptio n":"search","organization":"waq","type":"accuracy","source":{"id":65,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":66,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":33,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] >= $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":34,"name":"testt","description":null,"organization":"waq","type":"accuracy","source":{"id":67,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":68,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":34,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"}]; - + public hide(): void { this.visibleAnimate = false; setTimeout(() => this.visible = false, 300); @@ -97,16 +94,19 @@ export class MeasureComponent implements OnInit { ngOnInit():void { var allModels = this.serviceService.config.uri.allModels; this.http.get(allModels).subscribe(data =>{ - for(let measure in data){ - data[measure].trueName = data[measure].name; - if(data[measure].evaluateRule.rules[0]){ - data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"]; - }else{ - data[measure].type = ''; - } - } + // for(let measure in data){ + // data[measure].trueName = data[measure].name; + // if(data[measure].type !== 'griffin'){ + // data[measure].type = data[measure]['evaluate.rule'].rules[0]["dq.type"]; + // }else{ + // data[measure].type = ''; + // } + // } this.results = Object.keys(data).map(function(index){ let measure = data[index]; + if(measure['measure.type'] === 'external'){ + measure['dq.type'] = 'external'; + } return measure; }); }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 dca8ae4..adb60c0 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 @@ -48,14 +48,18 @@ export class DetailMetricComponent implements OnInit { selectedMeasure:string; chartOption:{}; data:any; - currentMeasure:string; + currentJob:string; finalData:any; + metricName:string; + size = 300; + offset = 0; ngOnInit() { - this.currentMeasure = this.route.snapshot.paramMap.get('name'); + this.currentJob = this.route.snapshot.paramMap.get('name'); var self = this; - var metricDetailUrl = this.serviceService.config.uri.dashboard; - this.http.post(metricDetailUrl, {"query": { "bool":{"filter":[ {"term" : {"name.keyword": this.currentMeasure }}]}}, "sort": [{"tmst": {"order": "desc"}}],"size":10000}).subscribe( data=> { + var metricdetail = self.serviceService.config.uri.metricdetail; + var metricDetailUrl = metricdetail + '?metricName=' + this.currentJob + '&size=' + this.size + '&offset=' + this.offset; + this.http.get(metricDetailUrl).subscribe(data => { var metric = { 'name':'', 'timestamp':0, @@ -64,13 +68,10 @@ export class DetailMetricComponent implements OnInit { }; this.data = data; if(this.data){ - 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.name = this.data[0].name; + metric.timestamp =this.data[0].tmst; + metric.dq = this.data[0].value.matched/this.data[0].value.total*100; + metric.details = JSON.parse(JSON.stringify(this.data)); } this.chartOption = this.chartService.getOptionBig(metric); $('#bigChartDiv').height(window.innerHeight-120+'px'); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 afca42b..f80cdde 100644 --- a/ui/angular/src/app/metric/metric.component.html +++ b/ui/angular/src/app/metric/metric.component.html @@ -20,23 +20,23 @@ under the License. <div class="container-fluid"> <div class="row col-lg-12" style="margin-top: 15px;"> <div class="form-group"> - <span> - <label>Organization: </label> + <!-- <span> + <label>Group: </label> <select ng-disabled="orgSelectDisabled" class="form-control" (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex"> - <option value="0">-- All --</option> + <option value="0"> All </option> <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> </select> - </span> + </span> --> <span style="padding-left:30px;"> <label>Measure: </label> <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector"> <option value="0"> -- All -- </option> - <option *ngFor="let opt of measureOptions;let n = index" value="{{n+1}}">{{opt}}</option> + <option *ngFor="let key of measureOptions;let n = index" value="{{n+1}}">{{key}}</option> </select> </span> </div> </div> - <div *ngFor="let outerItems of oData;let parent=index"> + <div *ngFor="let outerItems of finalData;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/f581db30/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 f50f652..62d180b 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -31,71 +31,41 @@ import * as $ from 'jquery'; providers:[ChartService,ServiceService] }) export class MetricComponent implements OnInit { - + constructor( public chartService:ChartService, // public getMetricService:GetMetricService, public serviceService:ServiceService, private http: HttpClient, private router:Router) { } - orgs = []; - // finalData :any; data :any; finalData = []; - oData = []; - mData = []; - fData = []; - originalOrgs = []; - status:{ - 'health':number, - 'invalid':number - }; chartOption = new Map(); - dataData = []; + // dataData = []; originalData:any; - metricName = []; - metricNameUnique = []; - myData = []; measureOptions = []; selectedMeasureIndex = 0; chartHeight:any; - selectedOrgIndex = 0; // var formatUtil = echarts.format; - metricData = []; - orgWithMeasure:any; - alljobs = []; + mesWithJob:any; - public duplicateArray() { - let arr = []; - this.oData.forEach((x) => { - arr.push(Object.assign({}, x)); - }); - // arr.map((x) => {x.status = DEFAULT}); - return this.oData.concat(arr); - } - ngOnInit() { 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 => { - var jobMap = new Map(); - this.orgWithMeasure = data; - var orgNode = null; - for(let orgName in this.orgWithMeasure){ - orgNode = new Object(); - orgNode.name = orgName; - orgNode.jobMap = []; - orgNode.measureMap = []; + this.http.get(url_dashboard).subscribe(data => { + this.mesWithJob = data; + var mesNode = null; + for(let mesName in this.mesWithJob){ + mesNode = new Object(); + mesNode.name = mesName; var node = null; node = new Object(); - node.name = orgName; + node.name = mesName; node.dq = 0; - //node.metrics = new Array(); var metricNode = { 'name':'', 'timestamp':'', @@ -103,57 +73,25 @@ export class MetricComponent implements OnInit { 'details':[] } node.metrics = []; - for(let key in this.orgWithMeasure[orgName]){ - orgNode.measureMap.push(key); - this.measureOptions.push(key); - 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; - 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; - if(this.metricData[0]._source.value.miss != undefined){ - metricNode.details = this.metricData; - metricNode.name = this.metricData[0]._source.name; - metricNode.timestamp = this.metricData[0]._source.tmst; - metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; - this.pushToNode(jobMap, metricNode); - } - } - }, - err => { - // console.log(err); - console.log('Error occurs when connect to elasticsearh!'); - }); - } - } - this.finalData.push(node); - this.orgs.push(orgNode); + this.measureOptions.push(mesName); + var metricData = this.mesWithJob[mesName][0]; + if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){ + metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues)); + metricNode.name = metricData.name; + metricNode.timestamp = metricData.metricValues[0].value.tmst; + metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100; + node.metrics.push(metricNode); + } + this.finalData.push(node); } - this.oData = this.finalData.slice(0); + this.originalData = JSON.parse(JSON.stringify(this.finalData)); var self = this; setTimeout(function function_name(argument) { - self.redraw(self.oData); - },1000) + self.redraw(self.finalData); + },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){ return this.chartOption.get('thumbnail'+parent+'-'+i); } @@ -175,67 +113,27 @@ export class MetricComponent implements OnInit { } goTo(parent,i){ - this.router.navigate(['/detailed/'+this.oData[parent].metrics[i].name]) ; + this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ; } - changeOrg() { - this.selectedMeasureIndex = undefined; - this.measureOptions = []; - this.oData = this.finalData.slice(0); - if(this.selectedOrgIndex == 0){ - this.oData = this.finalData; - } - else { - 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.mData = this.oData.slice(0); - var self = this; - setTimeout(function() { - self.redraw(self.oData); - }, 1000); - }; changeMeasure() { - var jobdetail = []; - this.fData = JSON.parse(JSON.stringify(this.mData)); - this.oData = this.fData; - if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){ + this.finalData = []; + if(this.selectedMeasureIndex == 0){ + for(let data of this.originalData){ + this.finalData.push(data); + } + }else{ var measure = this.measureOptions[this.selectedMeasureIndex-1]; - for(let key in this.orgWithMeasure){ - 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 data of this.originalData){ + if(data.name === measure){ + this.finalData.push(JSON.parse(JSON.stringify(data))); } - } - 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; setTimeout(function() { - self.redraw(self.oData); + self.redraw(self.finalData); }, 0); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 32210dd..9ae6dcd 100644 --- a/ui/angular/src/app/service/chart.service.ts +++ b/ui/angular/src/app/service/chart.service.ts @@ -58,16 +58,33 @@ export class ChartService { return timestamp+TzOffset*60*60*1000; } + // getMetricData(metric) { + // var data = []; + // var chartData = metric.details; + // for(var i = 0; i < chartData.length; i++){ + // if(chartData[i]._source.total!=0) + // data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.value.matched/chartData[i]._source.value.total*100).toFixed(2))]); + // else + // data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]); + // } + + // data.sort(function(a, b){ + // return a[0] - b[0]; + // }); + // return data; + // } + getMetricData(metric) { var data = []; - var chartData = metric.details; - for(var i = 0; i < chartData.length; i++){ - if(chartData[i]._source.total!=0) - data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.value.matched/chartData[i]._source.value.total*100).toFixed(2))]); - else - data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]); + if(metric.details){ + var chartData = metric.details; + for(var i = 0; i < chartData.length; i++){ + if(chartData[i].value.total!=0) + data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((chartData[i].value.matched/chartData[i].value.total*100).toFixed(2))]); + else + data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((0).toFixed(2))]); } - + } data.sort(function(a, b){ return a[0] - b[0]; }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/service/service.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts index 301be49..9ee267e 100644 --- a/ui/angular/src/app/service/service.service.ts +++ b/ui/angular/src/app/service/service.service.ts @@ -22,13 +22,14 @@ import { Injectable } from '@angular/core'; export class ServiceService { constructor() { } - // public this.BACKEND_SERVER = 'http://10.65.145.88:38080'; - // public BACKEND_SERVER = 'http://localhost:8080'; - public BACKEND_SERVER = ''; + //public BACKEND_SERVER = 'http://10.65.145.88:38080'; + public BACKEND_SERVER = 'http://localhost:8080'; + // public BACKEND_SERVER = ''; public API_ROOT_PATH = '/api/v1'; - public ES_SERVER = "http://"; + location.host.replace("8080", "9200"); - //public ES_SERVER = "http://10.64.222.80:39200"; ; + // public ES_SERVER = "http://"; + location.host.replace("8080", "9200"); + // public ES_SERVER = "http://10.64.222.80:39200"; ; // public ES_SERVER = "http://10.65.145.88:39200"; ; + // public ES_SERVER = "http://localhost:8080"; ; public config = { // URI paths, always have a trailing / @@ -71,19 +72,21 @@ export class ServiceService { // dashboard:'/dashboard.json', - organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs', + // organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs', + dashboard:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics', + metricdetail:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/values', - dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source', + // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source', metricsample: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/sample', metricdownload: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/download', //Models allModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', - addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure', - deleteModel:this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure', - getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure', + addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', + deleteModel:this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', + getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', enableModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/enableModel', //Jobs http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 194db04..f2b0cad 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.html +++ b/ui/angular/src/app/sidebar/sidebar.component.html @@ -35,7 +35,7 @@ under the License. </div> </div> <div id="side-bar-metrics" class="row"> - <div *ngFor="let outerItems of oData;let parent=index"> + <div *ngFor="let outerItems of finalData;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/f581db30/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 8a62fbf..8a8d461 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -41,22 +41,11 @@ export class SidebarComponent implements OnInit { public chartService:ChartService) { } - oData = []; - orgs = []; finalData = []; - originalOrgs = []; - status:{ - 'health':number, - 'invalid':number - }; - metricData = []; - originalData :any; - metricName = []; - metricNameUnique = []; - myData = []; + oData = []; chartOption = new Map(); orgWithMeasure:any; - measureOptions = []; + mesWithJob:any; // var formatUtil = echarts.format; pageInit() { @@ -106,76 +95,36 @@ 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 => { - var jobMap = new Map(); - this.orgWithMeasure = data; - var orgNode = null; - for(let orgName in this.orgWithMeasure){ - orgNode = new Object(); - orgNode.name = orgName; - orgNode.jobMap = []; - orgNode.measureMap = []; + this.http.get(url_dashboard).subscribe(data => { + this.mesWithJob = data; + var mesNode = null; + for(let mesName in this.mesWithJob){ + mesNode = new Object(); + mesNode.name = mesName; var node = null; node = new Object(); - node.name = orgName; + node.name = mesName; 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); - 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; - 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; - if(this.metricData[0]._source.value.miss != undefined){ - metricNode.details = this.metricData; - metricNode.name = this.metricData[0]._source.name; - metricNode.timestamp = this.metricData[0]._source.tmst; - metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100; - this.pushToNode(jobMap, metricNode); - } - } - }, - err => { - // console.log(err); - console.log('Error occurs when connect to elasticsearh!'); - }); - } - } - this.finalData.push(node); - this.orgs.push(orgNode); + node.metrics = []; + var metricData = this.mesWithJob[mesName][0]; + if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){ + metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues)); + metricNode.name = metricData.name; + metricNode.timestamp = metricData.metricValues[0].value.tmst; + metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100; + node.metrics.push(metricNode); + } + this.finalData.push(node); } - 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); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/main.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/main.ts b/ui/angular/src/main.ts index 27a3fd8..55c7b58 100644 --- a/ui/angular/src/main.ts +++ b/ui/angular/src/main.ts @@ -18,12 +18,10 @@ under the License. */ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import { RouterModule, Routes } from '@angular/router'; import {HttpClientModule} from '@angular/common/http'; -import { Ng2SmartTableModule } from 'ng2-smart-table'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import 'bootstrap/dist/css/bootstrap.css'; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/styles.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/styles.css b/ui/angular/src/styles.css index 0806a18..4c80f95 100644 --- a/ui/angular/src/styles.css +++ b/ui/angular/src/styles.css @@ -22,6 +22,7 @@ under the License. @import url('../node_modules/font-awesome/css/font-awesome.css'); @import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import url('../node_modules/angular2-toaster/toaster.css'); +@import url('../node_modules/nouislider/distribute/nouislider.min.css'); /*@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');*/ @@ -1092,6 +1093,7 @@ tbody { text-align: center; border: 5px solid #c5c5c5; border-radius: 3px; + color: #999; } #hourSelector{ @@ -1108,7 +1110,7 @@ tbody { } -#secondSelector{ +#daySelector{ width:20%; height:100%; display: inline-block;
