http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 11413c9..1c6c927 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 @@ -16,64 +16,61 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations 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 { 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 { Router} from "@angular/router"; +import { Component, OnInit } from "@angular/core"; +import { FormControl } from "@angular/forms"; +import { FormsModule } from "@angular/forms"; +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 { Router } from "@angular/router"; import { DataTableModule } from "angular2-datatable"; -import { AfterViewChecked, ElementRef } from '@angular/core'; -import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; +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'; - - class node { name: string; id: number; - children:object[]; - isExpanded:boolean; - cols:Col[]; - parent:string; - location:string; -}; - -class Rule{ - type:string; + children: object[]; + isExpanded: boolean; + cols: Col[]; + parent: string; + location: string; } -class Col{ - name:string; - type:string; - comment:string; - selected :boolean; - isNum:boolean; - isExpanded:boolean; +class Rule { + type: string; +} + +class Col { + name: string; + type: string; + comment: string; + selected: boolean; + isNum: boolean; + isExpanded: boolean; // rules:string[]; - groupby:string; - RE:string; - rules:any; - newRules:Rule[]; + groupby: string; + RE: string; + rules: any; + newRules: Rule[]; ruleLength = 0; - constructor(name:string,type:string,comment:string,selected:boolean){ + constructor(name: string, type: string, comment: string, selected: boolean) { this.name = name; this.type = type; this.comment = comment; this.selected = false; this.isExpanded = false; - this.groupby = ''; + this.groupby = ""; this.rules = []; - this.RE = ''; + this.RE = ""; this.newRules = []; - var patt = new RegExp('int|double|float/i'); - if(patt.test(this.type)){ + var patt = new RegExp("int|double|float/i"); + if (patt.test(this.type)) { this.isNum = true; } // this.rules = []; @@ -81,17 +78,13 @@ class Col{ } @Component({ - selector: 'app-pr', - templateUrl: './pr.component.html', - providers:[ServiceService], - styleUrls: ['./pr.component.css'] + selector: "app-pr", + templateUrl: "./pr.component.html", + providers: [ServiceService], + styleUrls: ["./pr.component.css"] }) -export class PrComponent implements AfterViewChecked, OnInit{ - +export class PrComponent implements AfterViewChecked, OnInit { noderule = []; - // grp = []; - // showgrp:string; - // finalgrp = []; transrule = []; transenumrule = []; transnullrule = []; @@ -103,51 +96,51 @@ export class PrComponent implements AfterViewChecked, OnInit{ currentStep = 1; firstCond = false; mouseover = false; - selection : Col[]; + selection: Col[]; selectedAll = false; - currentDB = ''; - currentTable = ''; - schemaCollection:Col[]; + currentDB = ""; + currentTable = ""; + schemaCollection: Col[]; totallen = 0; - type = 'profiling'; - data:any; - desc:string; - owner = 'test'; + type = "profiling"; + data: any; + desc: string; + owner = "test"; currentDBstr: string; rulenode = { - "name": "", - "noderules": "" + name: "", + noderules: "" }; - timezone = ''; + timezone = ""; newMeasure = { - "name": "", - "measure.type":"griffin", + name: "", + "measure.type": "griffin", "dq.type": "profiling", "process.type": "batch", - "owner":"", - "description":"", + owner: "", + description: "", // "group":[], "data.sources": [ { - "name": "source", - "connectors": [ + name: "source", + connectors: [ { - "name":"", - "type": "hive", - "version": "1.2", - "data.unit":"", - "data.time.zone":"", - "config": { - "database": "", - "table.name":"", - "where":'' + name: "", + type: "hive", + version: "1.2", + "data.unit": "", + "data.time.zone": "", + config: { + database: "", + "table.name": "", + where: "" }, - "predicates":[ + predicates: [ { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":"" + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: "" } } ] @@ -156,14 +149,14 @@ export class PrComponent implements AfterViewChecked, OnInit{ } ], "evaluate.rule": { - "rules": [ + rules: [ { "dsl.type": "griffin-dsl", "dq.type": "profiling", - "rule": "", - "description": "", - "name": "", - "details": { + rule: "", + description: "", + name: "", + details: { // "profiling": { // "name": "" // } @@ -172,18 +165,18 @@ export class PrComponent implements AfterViewChecked, OnInit{ ] } }; - name:''; - createResult :any; - newCond:any; + name: ""; + createResult: any; + newCond: any; srclocation: string; srcname: string; config = { - "where":'', - "timezone":'', - "num":1, - "timetype":'day', - "needpath":false, - "path":'' + where: "", + timezone: "", + num: 1, + timetype: "day", + needpath: false, + path: "" }; where: string; size: string; @@ -196,7 +189,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ public hide(): void { this.visibleAnimate = false; - setTimeout(() => this.visible = false, 300); + setTimeout(() => (this.visible = false), 300); this.transrule = []; this.transenumrule = []; this.transnullrule = []; @@ -204,50 +197,55 @@ export class PrComponent implements AfterViewChecked, OnInit{ } public onContainerClicked(event: MouseEvent): void { - if ((<HTMLElement>event.target).classList.contains('modal')) { + if ((<HTMLElement>event.target).classList.contains("modal")) { this.hide(); } } - onResize(event){ + onResize(event) { this.resizeWindow(); } - resizeWindow(){ - var stepSelection = '.formStep'; + resizeWindow() { + var stepSelection = ".formStep"; $(stepSelection).css({ // height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() height: window.innerHeight - $(stepSelection).offset().top }); - $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 130); - $('.y-scrollable').css({ + $("fieldset").height( + $(stepSelection).height() - + $(stepSelection + ">.stepDesc").height() - + $(".btn-container").height() - + 130 + ); + $(".y-scrollable").css({ // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() - 'height': $('fieldset').height() + height: $("fieldset").height() }); } - setDropdownList(){ - if(this.selection){ - for(let item of this.selection){ - if(item.isNum == true){ + setDropdownList() { + if (this.selection) { + for (let item of this.selection) { + if (item.isNum == true) { this.dropdownList[item.name] = [ - {"id":1,"itemName":"Null Count","category": "Simple Statistics"}, - {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"}, - {"id":3,"itemName":"Total Count","category": "Summary Statistics"}, - {"id":4,"itemName":"Maximum","category": "Summary Statistics"}, - {"id":5,"itemName":"Minimum","category": "Summary Statistics"}, - {"id":6,"itemName":"Average","category": "Summary Statistics"}, + { id: 1, itemName: "Null Count", category: "Simple Statistics" }, + { id: 2, itemName: "Distinct Count", category: "Simple Statistics" }, + { id: 3, itemName: "Total Count", category: "Summary Statistics" }, + { id: 4, itemName: "Maximum", category: "Summary Statistics" }, + { id: 5, itemName: "Minimum", category: "Summary Statistics" }, + { id: 6, itemName: "Average", category: "Summary Statistics" }, // {"id":7,"itemName":"Median","category": "Summary Statistics"}, // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"}, - {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"} + { id: 9, itemName: "Enum Detection Count", category: "Advanced Statistics" } ]; - }else{ + } else { this.dropdownList[item.name] = [ - {"id":1,"itemName":"Null Count","category": "Simple Statistics"}, - {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"}, - {"id":3,"itemName":"Total Count","category": "Summary Statistics"}, + { id: 1, itemName: "Null Count", category: "Simple Statistics" }, + { id: 2, itemName: "Distinct Count", category: "Simple Statistics" }, + { id: 3, itemName: "Total Count", category: "Summary Statistics" }, // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"}, - {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"}, + { id: 9, itemName: "Enum Detection Count", category: "Advanced Statistics" } // {"id":10,"itemName":"Regular Expression Detection Count","category": "Advanced Statistics"} ]; } @@ -255,75 +253,100 @@ export class PrComponent implements AfterViewChecked, OnInit{ } } - toggleSelection (row) { + toggleSelection(row) { row.selected = !row.selected; var idx = this.selection.indexOf(row); // is currently selected if (idx > -1) { - this.selection.splice(idx, 1); - this.selectedAll = false; - for(let key in this.selectedItems){ - if(key === row.name){ - delete this.selectedItems[key]; - } + this.selection.splice(idx, 1); + this.selectedAll = false; + for (let key in this.selectedItems) { + if (key === row.name) { + delete this.selectedItems[key]; } - //this.selectedItems[row.name] = []; - } - // is newly selected - else { + } + } else { + // is newly selected this.selection.push(row); } - if(this.selection.length == 3){ + if (this.selection.length == 3) { this.selectedAll = true; - }else{ + } else { this.selectedAll = false; } this.setDropdownList(); - }; + } - toggleAll () { + toggleAll() { this.selectedAll = !this.selectedAll; this.selection = []; - for(var i =0; i < this.schemaCollection.length; i ++){ + for (var i = 0; i < this.schemaCollection.length; i++) { this.schemaCollection[i].selected = this.selectedAll; if (this.selectedAll) { this.selection.push(this.schemaCollection[i]); } } this.setDropdownList(); - }; + } - transferRule(rule,col){ - switch(rule){ - case 'Total Count': - return 'count(source.`'+col.name+'`) AS `'+col.name+'-count`'; - case 'Distinct Count': - return 'approx_count_distinct(source.`'+col.name+'`) AS `'+col.name+'-distcount`'; - case 'Null Count': - return 'count(source.`'+col.name+'`) AS `'+col.name+'-nullcount'+'` WHERE source.`'+col.name+'` IS NULL'; + transferRule(rule, col) { + switch (rule) { + case "Total Count": + return "count(source.`" + col.name + "`) AS `" + col.name + "-count`"; + case "Distinct Count": + return ( + "approx_count_distinct(source.`" + + col.name + + "`) AS `" + + col.name + + "-distcount`" + ); + case "Null Count": + return ( + "count(source.`" + + col.name + + "`) AS `" + + col.name + + "-nullcount" + + "` WHERE source.`" + + col.name + + "` IS NULL" + ); // case 'Regular Expression Detection Count': // return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE '; // case 'Rule Detection Count': // return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE '; - case 'Maximum': - return 'max(source.`'+col.name+'`) AS `'+col.name+'-max`'; - case 'Minimum': - return 'min(source.`'+col.name+'`) AS `'+col.name+'-min`'; + case "Maximum": + return "max(source.`" + col.name + "`) AS `" + col.name + "-max`"; + case "Minimum": + return "min(source.`" + col.name + "`) AS `" + col.name + "-min`"; // case 'Median': // return 'median(source.`'+col.name+'`) '; - case 'Average': - return 'avg(source.`'+col.name+'`) AS `'+col.name+'-average`'; - case 'Enum Detection Count': - return 'source.`'+col.name+'`,count(*) AS `'+col.name+'-grp` GROUP BY source.`'+col.name+'`'; + case "Average": + return "avg(source.`" + col.name + "`) AS `" + col.name + "-average`"; + case "Enum Detection Count": + return ( + "source.`" + + col.name + + "`,count(*) AS `" + + col.name + + "-grp` GROUP BY source.`" + + col.name + + "`" + ); } } - next (form) { - if(this.formValidation(this.currentStep)){ + next(form) { + if (this.formValidation(this.currentStep)) { this.currentStep++; - }else{ - this.toasterService.pop('error','Error!','Please select at least one attribute!'); - return false; + } else { + this.toasterService.pop( + "error", + "Error!", + "Please select at least one attribute!" + ); + return false; } } @@ -336,114 +359,112 @@ export class PrComponent implements AfterViewChecked, OnInit{ } else if (step == 2) { var len = 0; var selectedlen = 0; - for(let key in this.selectedItems){ - selectedlen ++; + for (let key in this.selectedItems) { + selectedlen++; len = this.selectedItems[key].length; - if(len == 0){ + if (len == 0) { return false; } } - return (this.selection.length == selectedlen) ? true :false; + return this.selection.length == selectedlen ? true : false; } else if (step == 3) { return true; - } else if(step == 4){ + } else if (step == 4) { } return false; - } + }; - prev (form) { + prev(form) { this.currentStep--; } - goTo (i) { + goTo(i) { this.currentStep = i; } - submit (form) { - // form.$setPristine(); - // this.finalgrp = []; + submit(form) { if (!form.valid) { - this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); + 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, - // "group":this.finalgrp, - "data.sources": [ - { - "name": "source", - "connectors": [ - { - "name":this.srcname, - "type": "hive", - "version": "1.2", - "data.unit":this.size, - "data.time.zone":this.timezone, - "config": { - "database": this.currentDB, - "table.name":this.currentTable, - "where":this.where - }, - "predicates":[ - { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":this.path - } + name: this.name, + "measure.type": "griffin", + "dq.type": "profiling", + "process.type": "batch", + owner: this.owner, + description: this.desc, + // "group":this.finalgrp, + "data.sources": [ + { + name: "source", + connectors: [ + { + name: this.srcname, + type: "hive", + version: "1.2", + "data.unit": this.size, + "data.time.zone": this.timezone, + config: { + database: this.currentDB, + "table.name": this.currentTable, + where: this.where + }, + predicates: [ + { + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: this.path } - ] - } - ] - } - ], - "evaluate.rule": { - "rules": [ - // { - // "dsl.type": "griffin-dsl", - // "dq.type": "profiling", - // "rule": "", - // "details": {} - // } + } + ] + } ] } + ], + "evaluate.rule": { + rules: [ + // { + // "dsl.type": "griffin-dsl", + // "dq.type": "profiling", + // "rule": "", + // "details": {} + // } + ] + } }; this.getGrouprule(); - if(this.size.indexOf('0')==0){ - delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit']; + if (this.size.indexOf("0") == 0) { + delete this.newMeasure["data.sources"][0]["connectors"][0]["data.unit"]; } - if(this.path==''){ - delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates']; + if (this.path == "") { + delete this.newMeasure["data.sources"][0]["connectors"][0]["predicates"]; } this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + setTimeout(() => (this.visibleAnimate = true), 100); } - getRule(trans,otherinfo){ - var rule = ''; - for(let i of trans){ - rule = rule + i + ','; + getRule(trans, otherinfo) { + var rule = ""; + for (let i of trans) { + rule = rule + i + ","; } - rule = rule.substring(0,rule.lastIndexOf(',')); - this.pushRule(rule,otherinfo); + rule = rule.substring(0, rule.lastIndexOf(",")); + this.pushRule(rule, otherinfo); } - pushEnmRule(rule,grpname,originrule){ + pushEnmRule(rule, grpname, originrule) { var self = this; - self.newMeasure['evaluate.rule'].rules.push({ + self.newMeasure["evaluate.rule"].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", - "rule": rule, - "description": originrule, - "name": grpname, - "details": { + rule: rule, + description: originrule, + name: grpname, + details: { // "profiling": { // "name": grpname, // "persist.type": "metric" @@ -452,15 +473,15 @@ export class PrComponent implements AfterViewChecked, OnInit{ }); } - pushNullRule(rule,nullname,originrule){ + pushNullRule(rule, nullname, originrule) { var self = this; - self.newMeasure['evaluate.rule'].rules.push({ + self.newMeasure["evaluate.rule"].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", - "rule": rule, - "description": originrule, - "name": nullname, - "details": { + rule: rule, + description: originrule, + name: nullname, + details: { // "profiling": { // "name": nullname, // "persist.type": "metric" @@ -469,57 +490,61 @@ export class PrComponent implements AfterViewChecked, OnInit{ }); } - pushRule(rule,otherinfo){ + pushRule(rule, otherinfo) { var self = this; - self.newMeasure['evaluate.rule'].rules.push({ + self.newMeasure["evaluate.rule"].rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", - "rule": rule, - "description": otherinfo, - "name": "profiling", - "details": {} + rule: rule, + description: otherinfo, + name: "profiling", + details: {} }); } save() { var addModels = this.serviceService.config.uri.addModels; - this.http - .post(addModels, this.newMeasure) - .subscribe(data => { + this.http.post(addModels, this.newMeasure).subscribe( + data => { this.createResult = data; this.hide(); - this.router.navigate(['/measures']); - }, - err => { - console.log('Something went wrong!'); - }); + this.router.navigate(["/measures"]); + }, + err => { + let response = JSON.parse(err.error); + if(response.code === '40901'){ + this.toasterService.pop("error", "Error!", "Measure name already exists!"); + } else { + this.toasterService.pop("error", "Error!", "Error when creating measure"); + } + console.log("Error when creating measure"); + } + ); } options: ITreeOptions = { - displayField: 'name', - isExpandedField: 'expanded', - idField: 'id', + displayField: "name", + isExpandedField: "expanded", + idField: "id", actionMapping: { mouse: { click: (tree, node, $event) => { if (node.hasChildren) { this.currentDB = node.data.name; - this.currentDBstr = this.currentDB + '.'; - this.currentTable = ''; + this.currentDBstr = this.currentDB + "."; + this.currentTable = ""; this.schemaCollection = []; this.selectedAll = false; TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); - } - else if(node.data.cols) - { + } else if (node.data.cols) { this.currentTable = node.data.name; this.currentDB = node.data.parent; this.schemaCollection = node.data.cols; - this.srcname = 'source' + new Date().getTime(); + this.srcname = "source" + new Date().getTime(); this.srclocation = node.data.location; this.selectedAll = false; this.selection = []; - for(let row of this.schemaCollection){ + for (let row of this.schemaCollection) { row.selected = false; } } @@ -531,79 +556,77 @@ export class PrComponent implements AfterViewChecked, OnInit{ animateAcceleration: 1.2 }; - nodeList:object[]; - nodeListTarget:object[]; + nodeList: object[]; + nodeListTarget: object[]; - constructor(private elementRef:ElementRef,toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { + constructor( + private elementRef: ElementRef, + toasterService: ToasterService, + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) { this.toasterService = toasterService; this.selection = []; - }; + } - // onItemSelect(item){ - // this.getRule(); - // } - - getGrouprule(){ - var selected = {name: ''}; - var value = ''; - var nullvalue = ''; - var nullname = ''; - var enmvalue = ''; - var grpname = ''; - for(let key in this.selectedItems){ + getGrouprule() { + var selected = { name: "" }; + var value = ""; + var nullvalue = ""; + var nullname = ""; + var enmvalue = ""; + 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 info = ""; + var otherinfo = ""; + for (let i = 0; i < this.selectedItems[key].length; i++) { var originrule = this.selectedItems[key][i].itemName; - info = info + originrule + ','; - if(originrule == 'Enum Detection Count'){ - enmvalue = this.transferRule(originrule,selected); - grpname = selected.name + '-grp'; + 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,originrule); - }else if(originrule == 'Null Count'){ - nullvalue = this.transferRule(originrule,selected); - nullname = selected.name + '-nullct'; + 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,originrule); - }else{ - otherinfo = otherinfo + originrule + ','; - value = this.transferRule(originrule,selected); + 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(',')); + info = info.substring(0, info.lastIndexOf(",")); + otherinfo = otherinfo.substring(0, otherinfo.lastIndexOf(",")); this.noderule.push({ - "name":key, - "infos":info + name: key, + infos: info }); } - if(this.transrule.length != 0){ - this.getRule(this.transrule,otherinfo); + if (this.transrule.length != 0) { + this.getRule(this.transrule, otherinfo); } } - // OnItemDeSelect(item){ - // this.getRule(); - // } - - confirmAdd(){ - document.getElementById('rule').style.display = 'none'; + confirmAdd() { + document.getElementById("rule").style.display = "none"; } - showRule(){ - document.getElementById('showrule').style.display = ''; - document.getElementById('notshowrule').style.display = 'none'; + showRule() { + document.getElementById("showrule").style.display = ""; + document.getElementById("notshowrule").style.display = "none"; } - back () { - document.getElementById('showrule').style.display = 'none'; - document.getElementById('notshowrule').style.display = ''; + back() { + document.getElementById("showrule").style.display = "none"; + document.getElementById("notshowrule").style.display = ""; } - getData(evt){ + getData(evt) { this.config = evt; this.timezone = evt.timezone; this.where = evt.where; @@ -613,51 +636,50 @@ export class PrComponent implements AfterViewChecked, OnInit{ ngOnInit() { var allDataassets = this.serviceService.config.uri.dataassetlist; - this.http.get(allDataassets).subscribe(data =>{ + this.http.get(allDataassets).subscribe(data => { this.nodeList = new Array(); let i = 1; this.data = data; for (let db in this.data) { - let new_node = new node(); - new_node.name = db; - new_node.id = i; - new_node.isExpanded = true; - i++; - new_node.children = new Array(); - for(let i = 0;i<this.data[db].length;i++){ - let new_child = new node(); - 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++){ - let new_col = new Col(this.data[db][i]['sd']['cols'][j].name, - this.data[db][i]['sd']['cols'][j].type, - this.data[db][i]['sd']['cols'][j].comment,false); - new_child.cols.push(new_col); - } + let new_node = new node(); + new_node.name = db; + new_node.id = i; + new_node.isExpanded = true; + i++; + new_node.children = new Array(); + for (let i = 0; i < this.data[db].length; i++) { + let new_child = new node(); + 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++) { + let new_col = new Col( + this.data[db][i]["sd"]["cols"][j].name, + this.data[db][i]["sd"]["cols"][j].type, + this.data[db][i]["sd"]["cols"][j].comment, + false + ); + new_child.cols.push(new_col); } - this.nodeList.push(new_node); + } + this.nodeList.push(new_node); } this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); - }); this.dropdownSettings = { singleSelection: false, - text:"Select Rule", - // selectAllText:'Select All', - // unSelectAllText:'UnSelect All', - // badgeShowLimit: 5, + text: "Select Rule", enableCheckAll: false, enableSearchFilter: true, classes: "myclass", groupBy: "category" }; - this.size = '1day'; - }; - ngAfterViewChecked(){ + this.size = "1day"; + } + ngAfterViewChecked() { this.resizeWindow(); } -} +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css index 49fa7b4..1fe05fe 100644 --- a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css @@ -17,33 +17,33 @@ specific language governing permissions and limitations under the License. */ -.table > thead > tr.success > td{ - background-color: #77b300; +.table>thead>tr.success>td { + background-color: #77b300; } -mark{ - background-color: #ff8800; - padding: .2em; + +mark { + background-color: #ff8800; + padding: .2em; } -h5{ - font-size: 20px; + +h5 { + font-size: 20px; } -.y-scrollable::-webkit-scrollbar-track -{ - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - border-radius: 10px; - background-color: #F5F5F5; + +.y-scrollable::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #F5F5F5; } -.y-scrollable::-webkit-scrollbar -{ - width: 5px; - border-radius: 10px; - background-color: #F5F5F5; +.y-scrollable::-webkit-scrollbar { + width: 5px; + border-radius: 10px; + background-color: #F5F5F5; } -.y-scrollable::-webkit-scrollbar-thumb -{ - border-radius: 10px; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #AAAAAA; +.y-scrollable::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #AAAAAA; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts index 1df2404..8db602b 100644 --- a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts @@ -31,5 +31,4 @@ export class RuleComponent implements OnInit { ngOnInit() { this.vaType = '2'; } - } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 cf3a212..a01f0ed 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 @@ -21,7 +21,7 @@ under the License. <h5 class="over-title margin-bottom-15">View Measure</h5> </div> <!--//row--> - <div class="row"> + <div class="row y-scrollable" style="max-height: 150px;"> <div class="col-sm-6 col-xs-12"> <div id="viewruleDefinition" class="viewrule-content"> <div class="row"> @@ -48,14 +48,6 @@ under the License. {{ruleData.type}} </div> </div> - <!-- <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: http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 efa2894..7271296 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 @@ -16,24 +16,26 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit } from '@angular/core'; -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; -import 'rxjs/add/operator/switchMap'; -import {HttpClient} from '@angular/common/http'; -import {ServiceService} from '../../service/service.service'; - - +import { Component, OnInit } from "@angular/core"; +import { Router, ActivatedRoute, ParamMap } from "@angular/router"; +import "rxjs/add/operator/switchMap"; +import { HttpClient } from "@angular/common/http"; +import { ServiceService } from "../../service/service.service"; @Component({ - selector: 'app-measure-detail', - templateUrl: './measure-detail.component.html', - providers:[ServiceService], - styleUrls: ['./measure-detail.component.css'] + selector: "app-measure-detail", + templateUrl: "./measure-detail.component.html", + providers: [ServiceService], + styleUrls: ["./measure-detail.component.css"] }) export class MeasureDetailComponent implements OnInit { - currentId:string; - constructor(private route: ActivatedRoute, - private router: Router,private http:HttpClient,public serviceService:ServiceService) { }; + currentId: string; + constructor( + private route: ActivatedRoute, + private router: Router, + private http: HttpClient, + public serviceService: ServiceService + ) {} ruleData: any; sourceLength: number; sourceDB: string; @@ -50,9 +52,9 @@ export class MeasureDetailComponent implements OnInit { targetpath: string; type: string; currentrule: string; - prorule = ''; + prorule = ""; - fetchData(value,index){ + fetchData(value, index) { var data = this.ruleData["data.sources"][index].connectors[0]; var size = value + "size"; var zone = value + "zone"; @@ -63,7 +65,7 @@ export class MeasureDetailComponent implements OnInit { this[size] = data["data.unit"]; this[zone] = data["data.time.zone"]; this[where] = data.config.where; - if(data.predicates.length !== 0){ + if (data.predicates.length !== 0) { this[path] = data.predicates[0].config.path; } this[database] = data.config.database; @@ -72,37 +74,42 @@ export class MeasureDetailComponent implements OnInit { ngOnInit() { this.ruleData = { - 'evaluateRule':'' + evaluateRule: "" }; - var getModelUrl; + var getModelUrl; var getModel = this.serviceService.config.uri.getModel; - this.currentId = this.route.snapshot.paramMap.get('id'); - getModelUrl = getModel+"/"+this.currentId; - this.http.get(getModelUrl).subscribe(data=>{ - this.ruleData = data; - if(this.ruleData['measure.type'] === 'external'){ - this.ruleData.type = this.ruleData["measure.type"]; - } - else{ - this.ruleData.type = this.ruleData["dq.type"]; - var currentprorule = this.ruleData['evaluate.rule'].rules; - this.currentrule = currentprorule; - for(let index in currentprorule){ - this.prorule = this.prorule + currentprorule[index].description + ',' - } - this.prorule = this.prorule.substring(0,this.prorule.lastIndexOf(',')); - this.fetchData("source",0); - if(this.ruleData.type === "accuracy"){ - this.fetchData("target",1); - }else{ - this.targetDB = ''; - this.targetTable = ''; + this.currentId = this.route.snapshot.paramMap.get("id"); + getModelUrl = getModel + "/" + this.currentId; + this.http.get(getModelUrl).subscribe( + data => { + this.ruleData = data; + if (this.ruleData["measure.type"] === "external") { + this.ruleData.type = this.ruleData["measure.type"]; + } else { + this.ruleData.type = this.ruleData["dq.type"]; + var currentprorule = this.ruleData["evaluate.rule"].rules; + this.currentrule = currentprorule; + for (let index in currentprorule) { + this.prorule = + this.prorule + currentprorule[index].description + ","; + } + this.prorule = this.prorule.substring( + 0, + this.prorule.lastIndexOf(",") + ); + this.fetchData("source", 0); + if (this.ruleData.type === "accuracy") { + this.fetchData("target", 1); + } else { + this.targetDB = ""; + this.targetTable = ""; + } } + }, + err => { + console.log("error"); + // toaster.pop('error', 'Error when geting record', response.message); } - },err => { - console.log('error'); - // toaster.pop('error', 'Error when geting record', response.message); - }); + ); } - -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/measure.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.css b/ui/angular/src/app/measure/measure.component.css index 8d0edd2..d9218f6 100644 --- a/ui/angular/src/app/measure/measure.component.css +++ b/ui/angular/src/app/measure/measure.component.css @@ -17,240 +17,237 @@ specific language governing permissions and limitations under the License. */ -.table-striped > tbody > tr:nth-of-type(even) { - background-color: #1f1f1f; +.table-striped>tbody>tr:nth-of-type(even) { + background-color: #1f1f1f; } -.table-striped > tbody > tr:nth-of-type(odd) { - background-color: #080808; + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: #080808; } -.icon{ +.icon { color: #fff; position: absolute; left: 50%; top: 20%; } -#measureTable{ - font-size:18px; +#measureTable { + font-size: 18px; } -.po{ +.po { cursor: pointer; } -.ng2-st-actions-title .ng2-smart-title{ - color:#1e6bb8; -} -#measureTable .ng2-smart-titles{ - background-color:#7D95CC; +.ng2-st-actions-title .ng2-smart-title { + color: #1e6bb8; } -.pagination > li > a{ - cursor:pointer; +#measureTable .ng2-smart-titles { + background-color: #7D95CC; } +.pagination>li>a { + cursor: pointer; +} .swMain>ul { - display: table; - list-style: none; - margin: 0 0 20px; - padding: 10px 0; - position: relative; - width: 100%; - background: #f7f7f8; - border-radius: 5px + display: table; + list-style: none; + margin: 0 0 20px; + padding: 10px 0; + position: relative; + width: 100%; + background: #f7f7f8; + border-radius: 5px } -.formStep{ +.formStep { background-color: #000000; border-radius: 5px; - padding:10px; + padding: 10px; /*height:800px;*/ } .swMain>ul li { - display: table-cell; - text-align: center; - width: 1% + display: table-cell; + text-align: center; + width: 1% } .swMain>ul li>a:before { - border-top: 4px solid #c8c7cc; - content: ""; - display: block; - font-size: 0; - height: 1px; - overflow: hidden; - position: relative; - top: 21px; - width: 100%; - z-index: 1 + border-top: 4px solid #c8c7cc; + content: ""; + display: block; + font-size: 0; + height: 1px; + overflow: hidden; + position: relative; + top: 21px; + width: 100%; + z-index: 1 } .swMain>ul li:first-child>a:before { - left: 50%; - max-width: 51% + left: 50%; + max-width: 51% } .swMain>ul li:last-child>a:before { - max-width: 50%; - width: 50% + max-width: 50%; + width: 50% } -.swMain li>a.done:before,.swMain>ul li>a.selected:before { - border-color: #007AFF +.swMain li>a.done:before, +.swMain>ul li>a.selected:before { + border-color: #007AFF } -.onlyone:before{ - left:0 !important; +.onlyone:before { + left: 0 !important; max-width: 100% !important; width: 100% !important; } .swMain>ul .stepNumber { - background-color: #fff; - border: 5px solid #c8c7cc; - border-radius: 100%; - color: #546474; - display: inline-block; - font-size: 15px; - height: 40px; - line-height: 30px; - position: relative; - text-align: center; - width: 40px; - z-index: 2 + background-color: #fff; + border: 5px solid #c8c7cc; + border-radius: 100%; + color: #546474; + display: inline-block; + font-size: 15px; + height: 40px; + line-height: 30px; + position: relative; + text-align: center; + width: 40px; + z-index: 2 } .swMain>ul li>a.selected .stepNumber { - border-color: #007AFF + border-color: #007AFF } -/*.swMain ul li>a.done .stepNumber,.swMain>ul li:last-child>a.selected .stepNumber {*/ -.swMain ul li>a.done .stepNumber{ - border-color: #007AFF; - background-color: #007AFF; - color: #fff; - text-indent: -9999px +.swMain ul li>a.done .stepNumber { + border-color: #007AFF; + background-color: #007AFF; + color: #fff; + text-indent: -9999px } -/*.swMain ul li>a.done .stepNumber:before,.swMain>ul li:last-child>a.selected .stepNumber:before {*/ .swMain ul li>a.done .stepNumber:before { - content: "\f00c"; - display: inline; - float: right; - font-family: FontAwesome; - font-weight: 300; - height: auto; - text-shadow: none; - margin-right: 7px; - text-indent: 0 + content: "\f00c"; + display: inline; + float: right; + font-family: FontAwesome; + font-weight: 300; + height: auto; + text-shadow: none; + margin-right: 7px; + text-indent: 0 } .swMain ul li>a.done.wait .stepNumber { - background-color: #F6F6F6!important; - color: #CCC!important; - text-indent: 0!important + background-color: #F6F6F6!important; + color: #CCC!important; + text-indent: 0!important } .swMain ul li>a.done.wait .stepNumber:before { - content: ""!important + content: ""!important } .swMain>ul li .stepDesc { - color: #8e8e93; - display: block; - font-size: 14px; - margin-top: 4px; - max-width: 100%; - table-layout: fixed; - text-align: center; - word-wrap: break-word; - z-index: 104 + color: #8e8e93; + display: block; + font-size: 14px; + margin-top: 4px; + max-width: 100%; + table-layout: fixed; + text-align: center; + word-wrap: break-word; + z-index: 104 } -.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc { - /*color: #2B3D53*/ - color: #007AFF +.swMain li>a.done .stepDesc, +.swMain>ul li>a.selected .stepDesc { + /*color: #2B3D53*/ + color: #007AFF } .swMain>ul li>a.disabled { - cursor: default + cursor: default } .swMain .progress { - margin-bottom: 30px + margin-bottom: 30px } .swMain .stepContainer { - height: auto!important + height: auto!important } -/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] { - display: none -}*/ - -.swMain .y-scrollable{ +.swMain .y-scrollable { overflow-y: auto; overflow-x: hidden; max-height: 600px; } -fieldset{ +fieldset { border: 1px solid #e6e8e8; border-radius: 5px; - margin:20px 0; + margin: 20px 0; padding: 25px; - position:relative; - min-width:0; - display:block; - + position: relative; + min-width: 0; + display: block; } -fieldset legend{ +fieldset legend { background-color: #000000; left: 10px; padding: 0 10px; position: absolute; top: -12px; - color:#fff; + color: #fff; font-weight: 400; width: auto!important; border: none!important; } -.btn-o{ - background:0 0!important; +.btn-o { + background: 0 0!important; } -.btn-wide{ - min-width:120px; +.btn-wide { + min-width: 120px; } .highlight { - background: rgba(255, 230, 0, 0.5); - padding: 3px 5px; - margin: -3px -5px; - line-height: 1.7; - word-break: break-word; - /*border-radius: 3px;*/ - /*display:inline-block;*/ + background: rgba(255, 230, 0, 0.5); + padding: 3px 5px; + margin: -3px -5px; + line-height: 1.7; + word-break: break-word; + /*border-radius: 3px;*/ + /*display:inline-block;*/ } -.label-definition{ - color:#fff; +.label-definition { + color: #fff; } -.formStep>.stepDesc{ + +.formStep>.stepDesc { color: #b2c831; } -.formStep>.container-fluid{ +.formStep>.container-fluid { /*position:relative;*/ } -.btn-container{ - height:50px; +.btn-container { + height: 50px; /*position: absolute; bottom: 10;*/ } @@ -258,113 +255,120 @@ fieldset legend{ .panel-disabled { border-color: #B9D3DF; } -.panel-disabled > .panel-heading { + +.panel-disabled>.panel-heading { background-color: #B9D3DF; border-color: #B9D3DF; } -.panel-body>ul{ - border-radius:0; +.panel-body>ul { + border-radius: 0; background: none; - margin:0; + margin: 0; } .panel-green { - border-color: #5cb85c; + border-color: #5cb85c; } .panel-green .panel-heading { - border-color: #5cb85c; - color: #fff; - background-color: #5cb85c; + border-color: #5cb85c; + color: #fff; + background-color: #5cb85c; } .panel-green a { - color: #5cb85c; + color: #5cb85c; } .panel-green a:hover { - color: #3d8b3d; + color: #3d8b3d; } .panel-red { - border-color: #d9534f; + border-color: #d9534f; } .panel-red .panel-heading { - border-color: #d9534f; - color: #fff; - background-color: #d9534f; + border-color: #d9534f; + color: #fff; + background-color: #d9534f; } .panel-red a { - color: #d9534f; + color: #d9534f; } .panel-red a:hover { - color: #b52b27; + color: #b52b27; } .panel-yellow { - border-color: #f0ad4e; + border-color: #f0ad4e; } .panel-yellow .panel-heading { - border-color: #f0ad4e; - color: #fff; - background-color: #f0ad4e; + border-color: #f0ad4e; + color: #fff; + background-color: #f0ad4e; } .panel-yellow a { - color: #f0ad4e; + color: #f0ad4e; } .panel-yellow a:hover { - color: #df8a13; + color: #df8a13; } -.viewrule-content{ - border:1px solid #fff; - border-radius:4px; - padding:10px; +.viewrule-content { + border: 1px solid #fff; + border-radius: 4px; + padding: 10px; } -.ruletypes>.panel{ - cursor:pointer +.ruletypes>.panel { + cursor: pointer } -.ruletypes>.panel:hover{ - box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ - -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ - -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ +.ruletypes>.panel:hover { + box-shadow: 3px 3px 5px 6px #ccc; + /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ + -webkit-box-shadow: 3px 3px 5px 6px #ccc; + /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ + -moz-box-shadow: 3px 3px 5px 6px #ccc; + /* Firefox 3.5 - 3.6 */ } -.createrule-hint{ - color:#b2c831; - padding-top:10px; +.createrule-hint { + color: #b2c831; + padding-top: 10px; } ::-webkit-scrollbar { - width: 6px; + width: 6px; } + ::-webkit-scrollbar-track { - background-color: #eaeaea; - /*background-color: #0a0a0a;*/ - border-left: 1px solid #ccc; + background-color: #eaeaea; + /*background-color: #0a0a0a;*/ + border-left: 1px solid #ccc; } + ::-webkit-scrollbar-thumb { - background-color: #ccc; + background-color: #ccc; } + ::-webkit-scrollbar-thumb:hover { - background-color: #aaa; + background-color: #aaa; } .disabled { - pointer-events: none; - cursor: default; - opacity: 0.6; + pointer-events: none; + cursor: default; + opacity: 0.6; } .test-result { @@ -372,9 +376,12 @@ fieldset legend{ padding: 1px 5px; } -.delete-alert{ - text-align: left;color: white;font-size: 150%; +.delete-alert { + text-align: left; + color: white; + font-size: 150%; } -a{ + +a { color: white; -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 383c938..cde2d49 100644 --- a/ui/angular/src/app/measure/measure.component.html +++ b/ui/angular/src/app/measure/measure.component.html @@ -19,9 +19,9 @@ under the License. <div> <p> <a routerLink="/createmeasure" style="background-color: #337ab7;" class="btn btn-primary btn-wide"> - <i class="fa fa-plus"></i> - Create Measure - </a> + <i class="fa fa-plus"></i> + Create Measure + </a> </p> <div id="modelContainer"> <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> @@ -45,10 +45,8 @@ under the License. <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> <td>{{row["dq.type"]}}</td> <td>{{row.description}}</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> @@ -107,14 +105,6 @@ under the License. {{deletedRow["dq.type"]}} </div> </div> - <!-- <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Organization: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.organization}} - </div> - </div> --> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> DataAsset: http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 c89c062..a7f7c76 100644 --- a/ui/angular/src/app/measure/measure.component.ts +++ b/ui/angular/src/app/measure/measure.component.ts @@ -16,84 +16,91 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit} from '@angular/core'; -import { HttpClient} from '@angular/common/http'; -import { DataTableModule} from "angular2-datatable"; -import { Router} from "@angular/router"; -import { FormControl } from '@angular/forms'; -import { FormsModule } from '@angular/forms'; -import {ServiceService} from '../service/service.service'; - -import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import { ToasterModule, ToasterService} from 'angular2-toaster'; -import * as $ from 'jquery'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { DataTableModule } from "angular2-datatable"; +import { Router } from "@angular/router"; +import { FormControl } from "@angular/forms"; +import { FormsModule } from "@angular/forms"; +import { ServiceService } from "../service/service.service"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ToasterModule, ToasterService } from "angular2-toaster"; +import * as $ from "jquery"; @Component({ - selector: 'app-measure', - templateUrl: './measure.component.html', - providers:[ServiceService], - styleUrls: ['./measure.component.css'] + selector: "app-measure", + templateUrl: "./measure.component.html", + providers: [ServiceService], + styleUrls: ["./measure.component.css"] }) export class MeasureComponent implements OnInit { - //results:object[]; - results:any; + results: any; public visible = false; public visibleAnimate = false; - deletedRow : any; - sourceTable :string; - targetTable :string; - deleteId : number; - deleteIndex:number; - + deletedRow: any; + sourceTable: string; + targetTable: string; + deleteId: number; + deleteIndex: number; + private toasterService: ToasterService; + public hide(): void { this.visibleAnimate = false; - setTimeout(() => this.visible = false, 300); + setTimeout(() => (this.visible = false), 300); } public onContainerClicked(event: MouseEvent): void { - if ((<HTMLElement>event.target).classList.contains('modal')) { + if ((<HTMLElement>event.target).classList.contains("modal")) { this.hide(); } } - - constructor(private http:HttpClient,private router:Router,public serviceService:ServiceService) { - }; - remove(row){ + constructor( + toasterService: ToasterService, + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) { + this.toasterService = toasterService; + } + + remove(row) { this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + setTimeout(() => (this.visibleAnimate = true), 100); this.deleteId = row.id; this.deleteIndex = this.results.indexOf(row); this.deletedRow = row; - var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config; + var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config; this.sourceTable = sourcedata["table.name"]; - if(this.deletedRow.type === "accuracy"){ + if (this.deletedRow.type === "accuracy") { var targetdata = this.deletedRow["data.sources"][1].connectors[0].config; this.targetTable = targetdata["table.name"]; - }else{ - this.targetTable = ''; - } + } else { + this.targetTable = ""; + } } - confirmDelete(){ + confirmDelete() { var deleteModel = this.serviceService.config.uri.deleteModel; - let deleteUrl = deleteModel + '/' + this.deleteId; - this.http.delete(deleteUrl).subscribe(data => { - let deleteResult:any = data; - if(deleteResult.code==202){ + let deleteUrl = deleteModel + "/" + this.deleteId; + this.http.delete(deleteUrl).subscribe( + data => { var self = this; - setTimeout(function () { - self.results.splice(self.deleteIndex,1); - // self.source.load(self.results); + setTimeout(function() { + self.results.splice(self.deleteIndex, 1); self.hide(); - },200); + }, 200); + }, + err => { + this.toasterService.pop("error", "Error!", "Failed to delete measure!"); + console.log("Error when deleting measure!"); } - }); - }; + ); + } - ngOnInit():void { + ngOnInit(): void { var allModels = this.serviceService.config.uri.allModels; - this.http.get(allModels).subscribe(data =>{ + this.http.get(allModels).subscribe(data => { // for(let measure in data){ // data[measure].trueName = data[measure].name; // if(data[measure].type !== 'griffin'){ @@ -102,16 +109,13 @@ export class MeasureComponent implements OnInit { // data[measure].type = ''; // } // } - this.results = Object.keys(data).map(function(index){ + this.results = Object.keys(data).map(function(index) { let measure = data[index]; - if(measure['measure.type'] === 'external'){ - measure['dq.type'] = 'external'; + if (measure["measure.type"] === "external") { + measure["dq.type"] = "external"; } return measure; }); - }); - // }; -// } - // this.results = this.measureData; + }); } -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 adb60c0..953226e 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 @@ -16,83 +16,85 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy,AfterViewInit,NgZone } from '@angular/core'; -import {ChartService} from '../../service/chart.service'; -import {ServiceService} from '../../service/service.service'; - -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; -import 'rxjs/add/operator/switchMap'; -import {HttpClient} from '@angular/common/http'; -import * as $ from 'jquery'; +import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy, AfterViewInit, NgZone } from "@angular/core"; +import { ChartService } from "../../service/chart.service"; +import { ServiceService } from "../../service/service.service"; +import { Router, ActivatedRoute, ParamMap } from "@angular/router"; +import "rxjs/add/operator/switchMap"; +import { HttpClient } from "@angular/common/http"; +import * as $ from "jquery"; @Component({ - selector: 'app-detail-metric', - templateUrl: './detail-metric.component.html', - styleUrls: ['./detail-metric.component.css'], - providers:[ChartService,ServiceService] + selector: "app-detail-metric", + templateUrl: "./detail-metric.component.html", + styleUrls: ["./detail-metric.component.css"], + providers: [ChartService, ServiceService] }) export class DetailMetricComponent implements OnInit { - - constructor(public chartService:ChartService,private route: ActivatedRoute, - private router: Router,private http:HttpClient,private zone:NgZone,public serviceService:ServiceService -) { - // var self = this; - // setTimeout(function () { - // self.currentMeasure = self.route.snapshot.paramMap.get('name'); - // self.chartOption = self.chartService.getOptionBig(self.getData(self.currentMeasure)); - // $('#bigChartDiv').height(window.innerHeight-120+'px'); - // $('#bigChartDiv').width(window.innerWidth-400+'px'); - // $('#bigChartContainer').show(); - // },200); - }; - selectedMeasure:string; - chartOption:{}; - data:any; - currentJob:string; - finalData:any; - metricName:string; + constructor( + public chartService: ChartService, + private route: ActivatedRoute, + private router: Router, + private http: HttpClient, + private zone: NgZone, + public serviceService: ServiceService + ) {} + selectedMeasure: string; + chartOption: {}; + data: any; + currentJob: string; + finalData: any; + metricName: string; size = 300; offset = 0; ngOnInit() { - this.currentJob = this.route.snapshot.paramMap.get('name'); + this.currentJob = this.route.snapshot.paramMap.get("name"); var self = this; 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, - 'dq':0, - 'details':[] - }; - this.data = data; - if(this.data){ - 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)); + var metricDetailUrl = + metricdetail + + "?metricName=" + + this.currentJob + + "&size=" + + this.size + + "&offset=" + + this.offset; + this.http.get(metricDetailUrl).subscribe( + data => { + var metric = { + name: "", + timestamp: 0, + dq: 0, + details: [] + }; + this.data = data; + if (this.data) { + 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"); + $("#bigChartDiv").width(window.innerWidth - 400 + "px"); + $("#bigChartContainer").show(); + }, + err => { + console.log("Error occurs when connect to elasticsearh!"); } - this.chartOption = this.chartService.getOptionBig(metric); - $('#bigChartDiv').height(window.innerHeight-120+'px'); - $('#bigChartDiv').width(window.innerWidth-400+'px'); - $('#bigChartContainer').show(); - }, - err => { - console.log('Error occurs when connect to elasticsearh!'); - }); + ); } - onResize(event){ + onResize(event) { this.resizeTreeMap(); } - resizeTreeMap(){ - $('#bigChartDiv').height( $('#mainWindow').height()); - $('#bigChartDiv').width( $('#mainWindow').width()); + resizeTreeMap() { + $("#bigChartDiv").height($("#mainWindow").height()); + $("#bigChartDiv").width($("#mainWindow").width()); } - getData(metricName){ - - } -} + getData(metricName) {} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/metric/metric.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.css b/ui/angular/src/app/metric/metric.component.css index c04b653..f501062 100644 --- a/ui/angular/src/app/metric/metric.component.css +++ b/ui/angular/src/app/metric/metric.component.css @@ -17,48 +17,45 @@ specific language governing permissions and limitations under the License. */ -#orgSelector{ - padding: 4px 6px; - height: 30px; - width: 230px; - background-color: #d1d3d2; - display: inline-block; - margin-left: 10px; +#orgSelector { + padding: 4px 6px; + height: 30px; + width: 230px; + background-color: #d1d3d2; + display: inline-block; + margin-left: 10px; } -#measureSelector{ - padding: 4px 6px; - height: 30px; - width: 230px; - background-color: #d1d3d2; - display: inline-block; - margin-left: 10px; +#measureSelector { + padding: 4px 6px; + height: 30px; + width: 230px; + background-color: #d1d3d2; + display: inline-block; + margin-left: 10px; } -#dashboard{ - overflow-y:auto; - height:680px; - overflow-x: hidden; - padding-right: 10px; +#dashboard { + overflow-y: auto; + height: 680px; + overflow-x: hidden; + padding-right: 10px; } -#dashboard::-webkit-scrollbar-track -{ - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - border-radius: 10px; - background-color: #F5F5F5; +#dashboard::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #F5F5F5; } -#dashboard::-webkit-scrollbar -{ - width: 7px; - border-radius: 10px; - background-color: #F5F5F5; +#dashboard::-webkit-scrollbar { + width: 7px; + border-radius: 10px; + background-color: #F5F5F5; } -#dashboard::-webkit-scrollbar-thumb -{ - border-radius: 2px; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #ADADAD; +#dashboard::-webkit-scrollbar-thumb { + border-radius: 2px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #ADADAD; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 f80cdde..bab752c 100644 --- a/ui/angular/src/app/metric/metric.component.html +++ b/ui/angular/src/app/metric/metric.component.html @@ -20,13 +20,6 @@ under the License. <div class="container-fluid"> <div class="row col-lg-12" style="margin-top: 15px;"> <div class="form-group"> - <!-- <span> - <label>Group: </label> - <select ng-disabled="orgSelectDisabled" class="form-control" (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex"> - <option value="0"> All </option> - <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> - </select> - </span> --> <span style="padding-left:30px;"> <label>Measure: </label> <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 62d180b..dba4d06 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -16,139 +16,134 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit } from '@angular/core'; -import {HttpClient} from '@angular/common/http'; -import {Router} from "@angular/router"; -import {ChartService} from '../service/chart.service'; -// import {GetMetricService} from '../service/get-metric.service'; -import {ServiceService} from '../service/service.service'; -import * as $ from 'jquery'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { ChartService } from "../service/chart.service"; +import { ServiceService } from "../service/service.service"; +import * as $ from "jquery"; @Component({ - selector: 'app-metric', - templateUrl: './metric.component.html', - styleUrls: ['./metric.component.css'], - providers:[ChartService,ServiceService] + selector: "app-metric", + templateUrl: "./metric.component.html", + styleUrls: ["./metric.component.css"], + providers: [ChartService, ServiceService] }) export class MetricComponent implements OnInit { - constructor( - public chartService:ChartService, - // public getMetricService:GetMetricService, - public serviceService:ServiceService, - private http: HttpClient, - private router:Router) { } - data :any; + public chartService: ChartService, + public serviceService: ServiceService, + private http: HttpClient, + private router: Router + ) {} + data: any; finalData = []; chartOption = new Map(); - // dataData = []; - originalData:any; + originalData: any; measureOptions = []; selectedMeasureIndex = 0; - chartHeight:any; - // var formatUtil = echarts.format; - mesWithJob:any; - + chartHeight: any; + mesWithJob: any; ngOnInit() { - this.renderData(); + this.renderData(); } - renderData(){ + renderData() { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { - this.mesWithJob = data; + this.mesWithJob = JSON.parse(JSON.stringify(data)); var mesNode = null; - for(let mesName in this.mesWithJob){ + for (let mesName in this.mesWithJob) { + var jobs = this.mesWithJob[mesName]; mesNode = new Object(); mesNode.name = mesName; var node = null; node = new Object(); node.name = mesName; node.dq = 0; - var metricNode = { - 'name':'', - 'timestamp':'', - 'dq':0, - 'details':[] - } node.metrics = []; 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); + if ( + metricData.metricValues[0] != undefined && + metricData.metricValues[0].value.matched != undefined + ) { + for(let i=0;i<jobs.length;i++){ + var metricNode = { + name: "", + timestamp: "", + dq: 0, + details: [] + }; + metricNode.details = JSON.parse( + JSON.stringify(jobs[i].metricValues) + ); + metricNode.name = jobs[i].name; + metricNode.timestamp = jobs[i].metricValues[0].value.tmst; + metricNode.dq = + jobs[i].metricValues[0].value.matched / + jobs[i].metricValues[0].value.total * + 100; + node.metrics.push(metricNode); + } } - this.finalData.push(node); + this.finalData.push(node); } this.originalData = JSON.parse(JSON.stringify(this.finalData)); var self = this; setTimeout(function function_name(argument) { self.redraw(self.finalData); - },1000) + }, 1000); }); } - getOption(parent,i){ - return this.chartOption.get('thumbnail'+parent+'-'+i); + getOption(parent, i) { + return this.chartOption.get("thumbnail" + parent + "-" + i); } - redraw (data) { - this.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px'; - for(let i = 0;i<data.length;i++){ + redraw(data) { + this.chartHeight = $(".chartItem:eq(0)").width() * 0.8 + "px"; + for (let i = 0; i < data.length; i++) { var parentIndex = i; - for(let j = 0;j<data[i].metrics.length;j++){ - let index = j; - let chartId = 'thumbnail' + parentIndex + '-' + index; - let _chartId = '#' + chartId; + for (let j = 0; j < data[i].metrics.length; j++) { + let index = j; + let chartId = "thumbnail" + parentIndex + "-" + index; + let _chartId = "#" + chartId; var divs = $(_chartId); - divs.get(0).style.width = divs.parent().width()+'px'; + 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])); + this.chartOption.set( + chartId, + this.chartService.getOptionThum(data[i].metrics[j]) + ); } } } - goTo(parent,i){ - this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ; + goTo(parent, i) { + this.router.navigate([ + "/detailed/" + this.finalData[parent].metrics[i].name + ]); } - changeMeasure() { this.finalData = []; - if(this.selectedMeasureIndex == 0){ - for(let data of this.originalData){ + if (this.selectedMeasureIndex == 0) { + for (let data of this.originalData) { this.finalData.push(data); } - }else{ - var measure = this.measureOptions[this.selectedMeasureIndex-1]; - for(let data of this.originalData){ - if(data.name === measure){ + } else { + var measure = this.measureOptions[this.selectedMeasureIndex - 1]; + for (let data of this.originalData) { + if (data.name === measure) { this.finalData.push(JSON.parse(JSON.stringify(data))); } - }; + } } var self = this; setTimeout(function() { self.redraw(self.finalData); }, 0); } - - - // function resizePieChart() { - // $('#data-asset-pie').css({ - // height: $('#data-asset-pie').parent().width(), - // width: $('#data-asset-pie').parent().width() - // }); - // } - - // this.$on('resizeHandler', function() { - // if($route.current.$$route.controller == 'MetricsCtrl') { - // console.log('metrics resize'); - // redraw(this.dataData); - // } - // }); -} +} \ No newline at end of file
