You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2018/01/31 08:32:06 UTC
[3/4] incubator-griffin git commit: Format code and add scroll bar in
measuer view
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
index f8fcaa8..7230b76 100644
--- a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
@@ -16,65 +16,55 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/
-import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { FormsModule, Validator} from '@angular/forms';
-import {ServiceService} from '../../../service/service.service';
-// import { PatternValidator } from '@angular/forms';
-
-
-import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
-import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { ToasterModule, ToasterService} from 'angular2-toaster';
-import * as $ from 'jquery';
-import { HttpClient} from '@angular/common/http';
-import { Router} from "@angular/router";
-// import { TagInputModule } from 'ngx-chips';
-
+import { Component, OnInit, AfterViewChecked, ViewChild } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { FormsModule, Validator } 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 } from "angular2-toaster";
+import * as $ from "jquery";
+import { HttpClient } from "@angular/common/http";
+import { Router } from "@angular/router";
class node {
name: string;
id: number;
- children:object[];
- isExpanded:boolean;
- cols:Col[];
- parent:string;
- location:string;
-};
-class Col{
- name:string;
- type:string;
- comment:string;
- selected :boolean;
- constructor(name:string,type:string,comment:string,selected:boolean){
+ children: object[];
+ isExpanded: boolean;
+ cols: Col[];
+ parent: string;
+ location: string;
+}
+class Col {
+ 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;
}
- getSelected(){
+ getSelected() {
return this.selected;
}
- setSelected(selected){
+ setSelected(selected) {
this.selected = selected;
}
}
@Component({
- selector: 'app-ac',
- templateUrl: './ac.component.html',
- providers:[ServiceService],
- styleUrls: ['./ac.component.css']
+ selector: "app-ac",
+ templateUrl: "./ac.component.html",
+ providers: [ServiceService],
+ styleUrls: ["./ac.component.css"]
})
-
-export class AcComponent implements OnInit , AfterViewChecked {
-
- defaultValue:string;
+export class AcComponent implements OnInit, AfterViewChecked {
+ defaultValue: string;
currentStep = 1;
- // grp = [];
- // showgrp:string;
- // finalgrp = [];
- desc:string;
+ desc: string;
selection = [];
selectedAll = false;
selectedAllTarget = false;
@@ -82,44 +72,44 @@ export class AcComponent implements OnInit , AfterViewChecked {
map = [];
mappings = [];
matches = [];
- dataAsset = '';
- rules = '';
- currentDB = '';
- currentTable = '';
- currentDBTarget = '';
- currentTableTarget = '';
- schemaCollection:Col[];
- schemaCollectionTarget:Col[];
- matchFunctions = ['=', '!=', '>', '>=','<',"<="];
- data:any;
+ dataAsset = "";
+ rules = "";
+ currentDB = "";
+ currentTable = "";
+ currentDBTarget = "";
+ currentTableTarget = "";
+ schemaCollection: Col[];
+ schemaCollectionTarget: Col[];
+ matchFunctions = ["=", "!=", ">", ">=", "<", "<="];
+ data: any;
currentDBTargetStr: string;
currentDBstr: string;
srcconfig = {
- "where":'',
- "timezone":'',
- "num":1,
- "timetype":'day',
- "needpath":false,
- "path":''
+ where: "",
+ timezone: "",
+ num: 1,
+ timetype: "day",
+ needpath: false,
+ path: ""
};
tgtconfig = {
- "where":'',
- "timezone":'',
- "num":1,
- "timetype":'day',
- "needpath":false,
- "path":''
+ where: "",
+ timezone: "",
+ num: 1,
+ timetype: "day",
+ needpath: false,
+ path: ""
};
srcdata = {
- "database":'',
- "table":'',
- "selection":[]
- }
+ database: "",
+ table: "",
+ selection: []
+ };
tgtdata = {
- "database":'',
- "table":'',
- "selection":[]
- }
+ database: "",
+ table: "",
+ selection: []
+ };
src_where: string;
tgt_where: string;
src_size: string;
@@ -133,102 +123,108 @@ export class AcComponent implements OnInit , AfterViewChecked {
src_timezone: string;
tgt_timezone: string;
- measureTypes = ['accuracy','validity','anomaly detection','publish metrics'];
+ measureTypes = [
+ "accuracy",
+ "validity",
+ "anomaly detection",
+ "publish metrics"
+ ];
type = "accuracy";
newMeasure = {
- "name":'',
- "measure.type":"griffin",
+ name: "",
+ "measure.type": "griffin",
"dq.type": "accuracy",
"process.type": "batch",
- "owner":"",
- "description":"",
+ owner: "",
+ description: "",
// "group":[],
"data.sources": [
- {
- "name": "source",
- "connectors": [
- {
- "name":"",
- "type": "HIVE",
- "version": "1.2",
- "data.unit":"",
- "data.time.zone":"",
- "config":{
- "database":'',
- "table.name":'',
- "where":''
- },
- "predicates":[
- {
- "type":"file.exist",
- "config":{
- "root.path":"hdfs:///griffin/demo_src",
- "path":""
- }
- }
- ]
- }
- ]
- }, {
- "name": "target",
- "connectors": [
- {
- "name":"",
- "type": "HIVE",
- "version": "1.2",
- "data.unit":"",
- "data.time.zone":"",
- "config":{
- "database":'',
- "table.name":'',
- "where":''
- },
- "predicates":[
- {
- "type":"file.exist",
- "config":{
- "root.path":"hdfs:///griffin/demo_src",
- "path":""
+ {
+ name: "source",
+ connectors: [
+ {
+ name: "",
+ type: "HIVE",
+ version: "1.2",
+ "data.unit": "",
+ "data.time.zone": "",
+ config: {
+ database: "",
+ "table.name": "",
+ where: ""
+ },
+ predicates: [
+ {
+ type: "file.exist",
+ config: {
+ "root.path": "hdfs:///griffin/demo_src",
+ path: ""
+ }
}
- }
- ]
- }
- ]
- }
- ],
-
- "evaluate.rule":{
- "rules": [
+ ]
+ }
+ ]
+ },
+ {
+ name: "target",
+ connectors: [
{
- "dsl.type": "griffin-dsl",
- "dq.type": "accuracy",
- "name": "accuracy",
- "rule": ""
- // "details": {
- // "source": "source",
- // "target": "target",
- // "miss.records": {
- // "name": "miss.records",
- // "persist.type": "record"
- // },
- // "accuracy": {
- // "name": "accu",
- // "persist.type": "metric"
- // },
- // "miss": "miss",
- // "total": "total",
- // "matched": "matched"
- // }
+ name: "",
+ type: "HIVE",
+ version: "1.2",
+ "data.unit": "",
+ "data.time.zone": "",
+ config: {
+ database: "",
+ "table.name": "",
+ where: ""
+ },
+ predicates: [
+ {
+ type: "file.exist",
+ config: {
+ "root.path": "hdfs:///griffin/demo_src",
+ path: ""
+ }
+ }
+ ]
}
]
+ }
+ ],
+
+ "evaluate.rule": {
+ rules: [
+ {
+ "dsl.type": "griffin-dsl",
+ "dq.type": "accuracy",
+ name: "accuracy",
+ rule: ""
+ // "details": {
+ // "source": "source",
+ // "target": "target",
+ // "miss.records": {
+ // "name": "miss.records",
+ // "persist.type": "record"
+ // },
+ // "accuracy": {
+ // "name": "accu",
+ // "persist.type": "metric"
+ // },
+ // "miss": "miss",
+ // "total": "total",
+ // "matched": "matched"
+ // }
+ }
+ ]
}
};
- name:'';
+ name: "";
// evaluate.rule:any;
// desc:'';
// grp:'';
- owner = 'test';
- createResult :any;
+ owner = "test";
+ createResult: any;
private toasterService: ToasterService;
public visible = false;
@@ -236,92 +232,93 @@ export class AcComponent implements OnInit , AfterViewChecked {
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();
}
}
- addMapping(x,i){
+ addMapping(x, i) {
this.mappings[i] = x;
}
- toggleSelection (row) {
+ toggleSelection(row) {
row.selected = !row.selected;
var idx = this.selection.indexOf(row.name);
// is currently selected
if (idx > -1) {
this.selection.splice(idx, 1);
this.selectedAll = false;
- }
- // is newly selected
- else {
+ } else {
+ // is newly selected
this.selection.push(row.name);
}
- if(this.selection.length == 3){
+ if (this.selection.length == 3) {
this.selectedAll = true;
- }else{
+ } else {
this.selectedAll = false;
}
- };
+ }
- toggleSelectionTarget (row) {
+ toggleSelectionTarget(row) {
row.selected = !row.selected;
var idx = this.selectionTarget.indexOf(row.name);
// is currently selected
if (idx > -1) {
this.selectionTarget.splice(idx, 1);
this.selectedAllTarget = false;
- }
- // is newly selected
- else {
+ } else {
+ // is newly selected
this.selectionTarget.push(row.name);
}
- if(this.selectionTarget.length == 3){
+ if (this.selectionTarget.length == 3) {
this.selectedAllTarget = true;
- }else{
+ } else {
this.selectedAllTarget = false;
}
let l = this.selectionTarget.length;
- for(let i =0;i<l;i++){
+ for (let i = 0; i < l; i++) {
this.matches[i] = "=";
// this.mappings[i] = this.currentDB + '.' + this.currentTable + '.' + row.name;
}
+ }
- };
-
- 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].name);
this.matches[i] = "=";
}
}
- };
+ }
- toggleAllTarget () {
+ toggleAllTarget() {
this.selectedAllTarget = !this.selectedAllTarget;
this.selectionTarget = [];
- for(var i =0; i < this.schemaCollectionTarget.length; i ++){
+ for (var i = 0; i < this.schemaCollectionTarget.length; i++) {
this.schemaCollectionTarget[i].selected = this.selectedAllTarget;
if (this.selectedAllTarget) {
this.selectionTarget.push(this.schemaCollectionTarget[i].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;
}
}
@@ -332,197 +329,210 @@ export class AcComponent implements OnInit , AfterViewChecked {
if (step == 1) {
return this.selection && this.selection.length > 0;
} else if (step == 2) {
- return (this.selectionTarget && this.selectionTarget.length > 0)//at least one target is selected
+ return this.selectionTarget && this.selectionTarget.length > 0; //at least one target is selected
// && !((this.currentTable.name == this.currentTableTarget.name)&&(this.currentDB.name == this.currentDBTarget.name));//target and source should be different
} else if (step == 3) {
- return this.selectionTarget && this.selectionTarget.length == this.mappings.length
- && this.mappings.indexOf('') == -1
+ return (
+ this.selectionTarget &&
+ this.selectionTarget.length == this.mappings.length &&
+ this.mappings.indexOf("") == -1
+ );
} else if (step == 4) {
return true;
- } else if(step == 5){
-
+ } else if (step == 5) {
}
return false;
- }
+ };
- prev (form) {
+ prev(form) {
this.currentStep--;
}
- goTo (i) {
+ goTo(i) {
this.currentStep = i;
}
- 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(",");
- var rule = '';
- this.newMeasure = {
- "name":this.name,
- "measure.type":"griffin",
- "dq.type": "accuracy",
- "process.type": "batch",
- "owner":this.owner,
- "description":this.desc,
- // "group":this.finalgrp,
- "data.sources": [
- {
- "name": "source",
- "connectors": [
- {
- "name":this.src_name,
- "type": "HIVE",
- "version": "1.2",
- "data.unit":this.src_size,
- "data.time.zone":this.src_timezone,
- "config":{
- "database":this.currentDB,
- "table.name":this.currentTable,
- "where":this.src_where
- },
- "predicates":[
- {
- "type":"file.exist",
- "config":{
- "root.path":"hdfs:///griffin/demo_src",
- "path":this.src_path
- }
- }
- ]
- }
- ]
- }, {
- "name": "target",
- "connectors": [
- {
- "name":this.tgt_name,
- "type": "HIVE",
- "version": "1.2",
- "data.unit":this.tgt_size,
- "data.time.zone":this.tgt_timezone,
- "config":{
- "database":this.currentDBTarget,
- "table.name":this.currentTableTarget,
- "where":this.tgt_where
- },
- "predicates":[
- {
- "type":"file.exist",
- "config":{
- "root.path":"hdfs:///griffin/demo_src",
- "path":this.tgt_path
- }
+ 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(",");
+ var rule = "";
+ this.newMeasure = {
+ name: this.name,
+ "measure.type": "griffin",
+ "dq.type": "accuracy",
+ "process.type": "batch",
+ owner: this.owner,
+ description: this.desc,
+ // "group":this.finalgrp,
+ "data.sources": [
+ {
+ name: "source",
+ connectors: [
+ {
+ name: this.src_name,
+ type: "HIVE",
+ version: "1.2",
+ "data.unit": this.src_size,
+ "data.time.zone": this.src_timezone,
+ config: {
+ database: this.currentDB,
+ "table.name": this.currentTable,
+ where: this.src_where
+ },
+ predicates: [
+ {
+ type: "file.exist",
+ config: {
+ "root.path": "hdfs:///griffin/demo_src",
+ path: this.src_path
}
- ]
- }
- ]
- }
- ],
- "evaluate.rule":{
- "rules": [
+ }
+ ]
+ }
+ ]
+ },
+ {
+ name: "target",
+ connectors: [
{
- "dsl.type": "griffin-dsl",
- "dq.type": "accuracy",
- "name": "accuracy",
- "rule": ""
- // "details": {
- // "source": "source",
- // "target": "target",
- // "miss.records": {
- // "name": "miss.records",
- // "persist.type": "record"
- // },
- // "accuracy": {
- // "name": "accu",
- // "persist.type": "metric"
- // },
- // "miss": "miss",
- // "total": "total",
- // "matched": "matched"
- // }
+ name: this.tgt_name,
+ type: "HIVE",
+ version: "1.2",
+ "data.unit": this.tgt_size,
+ "data.time.zone": this.tgt_timezone,
+ config: {
+ database: this.currentDBTarget,
+ "table.name": this.currentTableTarget,
+ where: this.tgt_where
+ },
+ predicates: [
+ {
+ type: "file.exist",
+ config: {
+ "root.path": "hdfs:///griffin/demo_src",
+ path: this.tgt_path
+ }
+ }
+ ]
}
]
}
- };
- if(this.src_size.indexOf('0')==0){
- delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit'];
- }
- if(this.tgt_size.indexOf('0')==0){
- delete this.newMeasure['data.sources'][1]['connectors'][0]['data.unit'];
- }
- if(this.src_path==''){
- delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates'];
- }
- if(this.tgt_path==''){
- delete this.newMeasure['data.sources'][1]['connectors'][0]['predicates'];
- }
- var mappingRule = function(src, tgt, matches) {
- var rules;
- rules = 'source.' + src + matches + 'target.' + tgt
- return rules;
+ ],
+ "evaluate.rule": {
+ rules: [
+ {
+ "dsl.type": "griffin-dsl",
+ "dq.type": "accuracy",
+ name: "accuracy",
+ rule: ""
+ // "details": {
+ // "source": "source",
+ // "target": "target",
+ // "miss.records": {
+ // "name": "miss.records",
+ // "persist.type": "record"
+ // },
+ // "accuracy": {
+ // "name": "accu",
+ // "persist.type": "metric"
+ // },
+ // "miss": "miss",
+ // "total": "total",
+ // "matched": "matched"
+ // }
+ }
+ ]
}
- var self = this;
- var rules = this.mappings.map(function(item, i) {
- return mappingRule(item,self.selectionTarget[i], self.matches[i]);
- });
- rule = rules.join(" AND ");
- this.rules = rule;
- this.newMeasure['evaluate.rule'].rules[0].rule = rule;
- console.log(this.newMeasure);
- this.visible = true;
- setTimeout(() => this.visibleAnimate = true, 100);
+ };
+ if (this.src_size.indexOf("0") == 0) {
+ this.deleteUnit(0);
+ }
+ if (this.tgt_size.indexOf("0") == 0) {
+ this.deleteUnit(1);
+ }
+ if (this.src_path == "") {
+ this.deletePredicates(0);
+ }
+ if (this.tgt_path == "") {
+ this.deletePredicates(1);
+ }
+ var mappingRule = function(src, tgt, matches) {
+ var rules;
+ rules = "source." + src + matches + "target." + tgt;
+ return rules;
+ };
+ var self = this;
+ var rules = this.mappings.map(function(item, i) {
+ return mappingRule(item, self.selectionTarget[i], self.matches[i]);
+ });
+ rule = rules.join(" AND ");
+ this.rules = rule;
+ this.newMeasure["evaluate.rule"].rules[0].rule = rule;
+ this.visible = true;
+ setTimeout(() => (this.visibleAnimate = true), 100);
+ }
+
+ deleteUnit(index){
+ delete this.newMeasure["data.sources"][index]["connectors"][0]["data.unit"];
+ }
+
+ deletePredicates(index){
+ delete this.newMeasure["data.sources"][index]["connectors"][0]["predicates"];
}
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']);
- // var self = this;
- // setTimeout(function () {
- // self.hide();
- // self.router.navigate(['/measures']);
- // },0)
- },
- 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.selectedAll = false;
this.schemaCollection = [];
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.src_location = node.data.location;
- this.src_name = 'source' + new Date().getTime();
+ this.src_name = "source" + new Date().getTime();
this.selectedAll = false;
this.selection = [];
- for(let row of this.schemaCollection){
+ for (let row of this.schemaCollection) {
row.selected = false;
}
}
@@ -535,31 +545,29 @@ export class AcComponent implements OnInit , AfterViewChecked {
};
targetOptions: ITreeOptions = {
- displayField: 'name',
- isExpandedField: 'expanded',
- idField: 'id',
+ displayField: "name",
+ isExpandedField: "expanded",
+ idField: "id",
actionMapping: {
mouse: {
click: (tree, node, $event) => {
if (node.hasChildren) {
this.currentDBTarget = node.data.name;
- this.currentDBTargetStr = this.currentDBTarget + '.';
- this.currentTableTarget = '';
+ this.currentDBTargetStr = this.currentDBTarget + ".";
+ this.currentTableTarget = "";
this.selectedAllTarget = false;
this.selectionTarget = [];
this.schemaCollectionTarget = [];
TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
- }
- else if(node.data.cols)
- {
+ } else if (node.data.cols) {
this.currentTableTarget = node.data.name;
this.currentDBTarget = node.data.parent;
this.schemaCollectionTarget = node.data.cols;
this.tgt_location = node.data.location;
- this.tgt_name = 'target' + new Date().getTime();
+ this.tgt_name = "target" + new Date().getTime();
this.selectedAllTarget = false;
this.selectionTarget = [];
- for(let row of this.schemaCollectionTarget){
+ for (let row of this.schemaCollectionTarget) {
row.selected = false;
}
}
@@ -571,31 +579,36 @@ export class AcComponent implements OnInit , AfterViewChecked {
animateAcceleration: 1.2
};
- nodeList:object[];
- nodeListTarget:object[];
- constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) {
+ nodeList: object[];
+ nodeListTarget: object[];
+ constructor(
+ toasterService: ToasterService,
+ private http: HttpClient,
+ private router: Router,
+ public serviceService: ServiceService
+ ) {
this.toasterService = toasterService;
- };
+ }
- onResize(event){
+ onResize(event) {
this.resizeWindow();
}
- srcAttr(evt){
+ srcAttr(evt) {
this.srcdata = evt;
this.currentDB = evt.database;
this.currentTable = evt.table;
this.selection = evt.selection;
}
- tgtAttr(evt){
+ tgtAttr(evt) {
this.tgtdata = evt;
this.currentDBTarget = evt.database;
this.currentTableTarget = evt.table;
this.selectionTarget = evt.selection;
}
- getSrc(evt){
+ getSrc(evt) {
this.srcconfig = evt;
this.src_timezone = evt.timezone;
this.src_where = evt.where;
@@ -603,7 +616,7 @@ export class AcComponent implements OnInit , AfterViewChecked {
this.src_path = evt.path;
}
- getTgt(evt){
+ getTgt(evt) {
this.tgtconfig = evt;
this.tgt_timezone = evt.timezone;
this.tgt_where = evt.where;
@@ -611,22 +624,26 @@ export class AcComponent implements OnInit , AfterViewChecked {
this.tgt_path = evt.path;
}
-
- resizeWindow(){
- var stepSelection = '.formStep[id=step-' + this.currentStep + ']';
+ resizeWindow() {
+ var stepSelection = ".formStep[id=step-" + this.currentStep + "]";
$(stepSelection).css({
height: window.innerHeight - $(stepSelection).offset().top
});
- $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 130);
- $('.y-scrollable').css({
- // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
- 'height': $('fieldset').height()
+ $("fieldset").height(
+ $(stepSelection).height() -
+ $(stepSelection + ">.stepDesc").height() -
+ $(".btn-container").height() -
+ 130
+ );
+ $(".y-scrollable").css({
+ // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
+ height: $("fieldset").height()
});
}
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;
@@ -637,30 +654,33 @@ export class AcComponent implements OnInit , AfterViewChecked {
new_node.isExpanded = true;
i++;
new_node.children = new Array();
- for(let i = 0;i<this.data[db].length;i++){
+ for (let i = 0; i < this.data[db].length; i++) {
let new_child = new node();
- new_child.name = this.data[db][i]['tableName'];
+ 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.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);
+ 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.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
+ }
+ this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
});
- this.src_size = '1day';
- this.tgt_size = '1day';
- };
+ this.src_size = "1day";
+ this.tgt_size = "1day";
+ }
- ngAfterViewChecked(){
+ 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/configuration/configuration.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
index 7ce6451..e884cdd 100644
--- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
@@ -16,11 +16,3 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/
-
-.scrollable{
- max-height: 300px;
- overflow: auto;
- }
- .scrollable select{
- border: none;
- }
\ 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/configuration/configuration.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
index a881ee8..ae2a1e3 100644
--- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
@@ -16,7 +16,6 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
-
<div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:20px;">
<div class="form-group">
<label class="col-md-2 col-lg-2 col-sm-2 control-label">
@@ -48,8 +47,7 @@ under the License.
Time Zone:
</label>
<div class="col-md-10 col-lg-10 col-sm-10 scrollable">
- <select id="timezone" class="form-control" name="zone" [(ngModel)]="timezone" required
- (change)="upward()">
+ <select id="timezone" class="form-control" name="zone" [(ngModel)]="timezone" required (change)="upward()">
<option *ngFor="let item of timezones;let i = index" [value]="item">{{item}}</option>
</select>
</div>
@@ -59,16 +57,15 @@ under the License.
<div class="form-group">
<input style="margin-left:15px" type="checkbox" [checked]="needpath" (change)="needpath=!needpath;upward()">
<label>
- has Done file
+ has Done file
</label>
</div>
</div>
-<div class="form-group" *ngIf="needpath">
+<div class="form-group" *ngIf="needpath">
<div style="margin-left:45px;font-weight: bold;">
please write the Done file path relative to {{location}}
</div>
<div style="margin-left:45px">
- <input type="text" class="form-control" id="path" [(ngModel)]="path" name="filepath" (change)="upward()" placeholder="/dt=#YYYYMMdd#/hour=#HH#/_DONE">
- </div>
+ <input type="text" class="form-control" id="path" [(ngModel)]="path" name="filepath" (change)="upward()" placeholder="/dt=#YYYYMMdd#/hour=#HH#/_DONE">
+ </div>
</div>
-
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
index 841b6aa..5d0fac4 100644
--- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
@@ -17,70 +17,104 @@ specific language governing permissions and limitations
under the License.
*/
-import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
-import * as $ from 'jquery';
+import { Component, OnInit, EventEmitter, Input, Output } from "@angular/core";
+import * as $ from "jquery";
@Component({
- selector: 'app-configuration',
- templateUrl: './configuration.component.html',
- styleUrls: ['./configuration.component.css']
+ selector: "app-configuration",
+ templateUrl: "./configuration.component.html",
+ styleUrls: ["./configuration.component.css"]
})
export class ConfigurationComponent implements OnInit {
@Output() event = new EventEmitter();
- @Input() data = {
- "where":'',
- "timezone":'',
- "num":1,
- "timetype":'day',
- "needpath":false,
- "path":''
+ @Input()
+ data = {
+ where: "",
+ timezone: "",
+ num: 1,
+ timetype: "day",
+ needpath: false,
+ path: ""
};
- @Input() location:string;
+ @Input() location: string;
- constructor() { }
- num:number;
- path:string;
- where:string;
- needpath:boolean;
+ constructor() {}
+ num: number;
+ path: string;
+ where: string;
+ needpath: boolean;
selectedType: string;
configuration = {
- "where":'',
- "timezone":'',
- "num":1,
- "timetype":'day',
- "needpath":false,
- "path":''
- }
- timetypes = ["day","hour","minute"];
- timetype :string;
- timezones = ["UTC-12(IDL)","UTC-11(MIT)","UTC-10(HST)","UTC-9:30(MSIT)","UTC-9(AKST)","UTC-8(PST)",
- "UTC-7(MST)","UTC-6(CST)","UTC-5(EST)","UTC-4(AST)","UTC-3:30(NST)","UTC-3(SAT)",
- "UTC-2(BRT)","UTC-1(CVT)","UTC(WET,GMT)","UTC+1(CET)","UTC+2(EET)","UTC+3(MSK)",
- "UTC+3:30(IRT)","UTC+4(META)","UTC+4:30(AFT)","UTC+5(METB)","UTC+5:30(IDT)","UTC+5:45(NPT)",
- "UTC+6(BHT)","UTC+6:30(MRT)","UTC+7(IST)","UTC+8(EAT)","UTC+8:30(KRT)","UTC+9(FET)",
- "UTC+9:30(ACST)","UTC+10(AEST)","UTC+10:30(FAST)","UTC+11(VTT)","UTC+11:30(NFT)","UTC+12(PSTB)",
- "UTC+12:45(CIT)","UTC+13(PSTC)","UTC+14(PSTD)"];
+ where: "",
+ timezone: "",
+ num: 1,
+ timetype: "day",
+ needpath: false,
+ path: ""
+ };
+ timetypes = ["day", "hour", "minute"];
+ timetype: string;
+ timezones = [
+ "UTC-12(IDL)",
+ "UTC-11(MIT)",
+ "UTC-10(HST)",
+ "UTC-9:30(MSIT)",
+ "UTC-9(AKST)",
+ "UTC-8(PST)",
+ "UTC-7(MST)",
+ "UTC-6(CST)",
+ "UTC-5(EST)",
+ "UTC-4(AST)",
+ "UTC-3:30(NST)",
+ "UTC-3(SAT)",
+ "UTC-2(BRT)",
+ "UTC-1(CVT)",
+ "UTC(WET,GMT)",
+ "UTC+1(CET)",
+ "UTC+2(EET)",
+ "UTC+3(MSK)",
+ "UTC+3:30(IRT)",
+ "UTC+4(META)",
+ "UTC+4:30(AFT)",
+ "UTC+5(METB)",
+ "UTC+5:30(IDT)",
+ "UTC+5:45(NPT)",
+ "UTC+6(BHT)",
+ "UTC+6:30(MRT)",
+ "UTC+7(IST)",
+ "UTC+8(EAT)",
+ "UTC+8:30(KRT)",
+ "UTC+9(FET)",
+ "UTC+9:30(ACST)",
+ "UTC+10(AEST)",
+ "UTC+10:30(FAST)",
+ "UTC+11(VTT)",
+ "UTC+11:30(NFT)",
+ "UTC+12(PSTB)",
+ "UTC+12:45(CIT)",
+ "UTC+13(PSTC)",
+ "UTC+14(PSTD)"
+ ];
timezone: string;
- upward(){
+ upward() {
this.configuration = {
- "where":this.where,
- "timezone":this.timezone,
- "num":this.num,
- "timetype":this.timetype,
- "needpath":this.needpath,
- "path":this.path
- }
+ where: this.where,
+ timezone: this.timezone,
+ num: this.num,
+ timetype: this.timetype,
+ needpath: this.needpath,
+ path: this.path
+ };
this.event.emit(this.configuration);
}
ngOnInit() {
this.where = this.data.where;
- this.timezone = this.data.timezone
+ this.timezone = this.data.timezone;
this.num = this.data.num;
this.timetype = this.data.timetype;
this.needpath = this.data.needpath;
this.path = this.data.path;
}
-
-}
+}
\ 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/create-measure.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.css b/ui/angular/src/app/measure/create-measure/create-measure.component.css
index 4e3c6f7..af70368 100644
--- a/ui/angular/src/app/measure/create-measure/create-measure.component.css
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.css
@@ -16,108 +16,109 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/
+
@import url('../../../../node_modules/angular2-toaster/toaster.css');
@import url('../measure.component.css');
div.tree div.tree-children::before,
div.tree::before {
- content: "";
- position: absolute;
- border-left: 1px dotted #23527c;
- height: 100%;
- top: -14px;
- left: 12px
+ content: "";
+ position: absolute;
+ border-left: 1px dotted #23527c;
+ height: 100%;
+ top: -14px;
+ left: 12px
}
div.tree {
- padding-left: 0;
- margin-left: -5px
+ padding-left: 0;
+ margin-left: -5px
}
div.tree div.tree-children {
- position: relative;
- padding-left: 0;
- margin-left: 16px
+ position: relative;
+ padding-left: 0;
+ margin-left: 16px
}
div.tree div.tree-children::before {
- left: 5px
+ left: 5px
}
div.tree treenode>div>.node-wrapper {
- margin-left: 24px
+ margin-left: 24px
}
div.tree treenode>div>.node-wrapper>.node-content-wrapper {
- margin-left: 4px
+ margin-left: 4px
}
div.tree treenode>div.tree-node-leaf>.node-wrapper {
- margin-left: 0
+ margin-left: 0
}
div.tree treenode>div::before {
- content: "";
- position: absolute;
- border-bottom: 1px dotted #23527c;
- width: 7px;
- margin-top: 12px;
- left: 7px
+ content: "";
+ position: absolute;
+ border-bottom: 1px dotted #23527c;
+ width: 7px;
+ margin-top: 12px;
+ left: 7px
}
div.tree treenode>div .toggle-children-wrapper {
- width: 13px;
- height: 13px;
- border: 1px solid #23527c;
- position: absolute;
- left: 15px;
- margin-top: 5px;
- margin-left: 0;
- display: inline-block;
- background-color: #fff;
- z-index: 1
+ width: 13px;
+ height: 13px;
+ border: 1px solid #23527c;
+ position: absolute;
+ left: 15px;
+ margin-top: 5px;
+ margin-left: 0;
+ display: inline-block;
+ background-color: #fff;
+ z-index: 1
}
div.tree treenode>div .toggle-children-wrapper::before {
- content: "";
- display: inline-block;
- width: 7px;
- border-top: 1px solid #23527c;
- position: absolute;
- top: 5px;
- left: 2px
+ content: "";
+ display: inline-block;
+ width: 7px;
+ border-top: 1px solid #23527c;
+ position: absolute;
+ top: 5px;
+ left: 2px
}
div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
- content: "";
- display: inline-block;
- height: 7px;
- border-left: 1px solid #23527c;
- position: absolute;
- top: 2px;
- left: 5px
+ content: "";
+ display: inline-block;
+ height: 7px;
+ border-left: 1px solid #23527c;
+ position: absolute;
+ top: 2px;
+ left: 5px
}
div.tree treenode>div .toggle-children-wrapper .toggle-children {
- display: none
+ display: none
}
div.tree treenode>div .node-content-wrapper {
- margin-left: 4px
+ margin-left: 4px
}
div.tree>treenode>div::before {
- left: 14px
+ left: 14px
}
div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
- left: 22px
+ left: 22px
}
-.panel{
- background-color: #222222;
+.panel {
+ background-color: #222222;
}
-.panel-footer{
- background-color: #3c3c3c;
-}
\ No newline at end of file
+.panel-footer {
+ background-color: #3c3c3c;
+}
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/create-measure.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.ts b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
index bbfb830..f2a60c0 100644
--- a/ui/angular/src/app/measure/create-measure/create-measure.component.ts
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
@@ -16,33 +16,40 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/
-import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { FormControl} from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { Component, OnInit, AfterViewInit } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { FormsModule } from "@angular/forms";
-import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
-import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
-import * as $ from 'jquery';
-import { HttpClient} from '@angular/common/http';
-import { Router} from "@angular/router";
+import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from "angular-tree-component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster";
+import * as $ from "jquery";
+import { HttpClient } from "@angular/common/http";
+import { Router } from "@angular/router";
@Component({
- selector: 'app-create-measure',
- templateUrl: './create-measure.component.html',
- styleUrls: ['./create-measure.component.css']
+ selector: "app-create-measure",
+ templateUrl: "./create-measure.component.html",
+ styleUrls: ["./create-measure.component.css"]
})
export class CreateMeasureComponent implements AfterViewInit {
+ constructor(private router: Router) {}
- constructor(private router:Router) { }
-
- click(type){
- this.router.navigate(['/createmeasure'+type]);
+ click(type) {
+ this.router.navigate(["/createmeasure" + type]);
}
- ngAfterViewInit(){
- $('#panel-2 >.panel-body').css({height: $('#panel-1 >.panel-body').outerHeight() + $('#panel-1 >.panel-footer').outerHeight() - $('#panel-2 >.panel-footer').outerHeight()});
- $('#panel-4 >.panel-body').css({height: $('#panel-3 >.panel-body').outerHeight() + $('#panel-3 >.panel-footer').outerHeight() - $('#panel-4 >.panel-footer').outerHeight()});
+ ngAfterViewInit() {
+ $("#panel-2 >.panel-body").css({
+ height:
+ $("#panel-1 >.panel-body").outerHeight() +
+ $("#panel-1 >.panel-footer").outerHeight() -
+ $("#panel-2 >.panel-footer").outerHeight()
+ });
+ $("#panel-4 >.panel-body").css({
+ height:
+ $("#panel-3 >.panel-body").outerHeight() +
+ $("#panel-3 >.panel-footer").outerHeight() -
+ $("#panel-4 >.panel-footer").outerHeight()
+ });
}
-}
-
-
+}
\ 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/pr.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.css b/ui/angular/src/app/measure/create-measure/pr/pr.component.css
index f4a62c4..512868c 100644
--- a/ui/angular/src/app/measure/create-measure/pr/pr.component.css
+++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.css
@@ -16,154 +16,150 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
*/
+
@import url('../../../../../node_modules/angular2-toaster/toaster.css');
@import url('../../measure.component.css');
-.selected-list .c-list .c-token{
- background: #6faece;
+.selected-list .c-list .c-token {
+ background: #6faece;
}
-
div.tree div.tree-children::before,
div.tree::before {
- content: "";
- position: absolute;
- border-left: 1px dotted #23527c;
- height: 100%;
- top: -14px;
- left: 12px
+ content: "";
+ position: absolute;
+ border-left: 1px dotted #23527c;
+ height: 100%;
+ top: -14px;
+ left: 12px
}
-tree-root{
- color: #999;
+tree-root {
+ color: #999;
}
div.tree {
- padding-left: 0;
- margin-left: -5px
+ padding-left: 0;
+ margin-left: -5px
}
div.tree div.tree-children {
- position: relative;
- padding-left: 0;
- margin-left: 16px
+ position: relative;
+ padding-left: 0;
+ margin-left: 16px
}
div.tree div.tree-children::before {
- left: 5px
+ left: 5px
}
div.tree treenode>div>.node-wrapper {
- margin-left: 24px
+ margin-left: 24px
}
div.tree treenode>div>.node-wrapper>.node-content-wrapper {
- margin-left: 4px
+ margin-left: 4px
}
div.tree treenode>div.tree-node-leaf>.node-wrapper {
- margin-left: 0
+ margin-left: 0
}
div.tree treenode>div::before {
- content: "";
- position: absolute;
- border-bottom: 1px dotted #23527c;
- width: 7px;
- margin-top: 12px;
- left: 7px
+ content: "";
+ position: absolute;
+ border-bottom: 1px dotted #23527c;
+ width: 7px;
+ margin-top: 12px;
+ left: 7px
}
div.tree treenode>div .toggle-children-wrapper {
- width: 13px;
- height: 13px;
- border: 1px solid #23527c;
- position: absolute;
- left: 15px;
- margin-top: 5px;
- margin-left: 0;
- display: inline-block;
- background-color: #fff;
- z-index: 1
+ width: 13px;
+ height: 13px;
+ border: 1px solid #23527c;
+ position: absolute;
+ left: 15px;
+ margin-top: 5px;
+ margin-left: 0;
+ display: inline-block;
+ background-color: #fff;
+ z-index: 1
}
div.tree treenode>div .toggle-children-wrapper::before {
- content: "";
- display: inline-block;
- width: 7px;
- border-top: 1px solid #23527c;
- position: absolute;
- top: 5px;
- left: 2px
+ content: "";
+ display: inline-block;
+ width: 7px;
+ border-top: 1px solid #23527c;
+ position: absolute;
+ top: 5px;
+ left: 2px
}
div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
- content: "";
- display: inline-block;
- height: 7px;
- border-left: 1px solid #23527c;
- position: absolute;
- top: 2px;
- left: 5px
+ content: "";
+ display: inline-block;
+ height: 7px;
+ border-left: 1px solid #23527c;
+ position: absolute;
+ top: 2px;
+ left: 5px
}
div.tree treenode>div .toggle-children-wrapper .toggle-children {
- display: none
+ display: none
}
div.tree treenode>div .node-content-wrapper {
- margin-left: 4px
+ margin-left: 4px
}
div.tree>treenode>div::before {
- left: 14px
+ left: 14px
}
div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
- left: 22px
+ left: 22px
}
-label{
- font-weight: normal;
+label {
+ font-weight: normal;
}
-.container{
- max-height: 40vh;
- overflow-y:scroll;
+
+.container {
+ max-height: 40vh;
+ overflow-y: scroll;
}
-.badgebox
-{
- opacity: 0;
+.badgebox {
+ opacity: 0;
}
-.badgebox + .badge
-{
- /* Move the check mark away when unchecked */
- text-indent: -999999px;
- /* Makes the badge's width stay the same checked and unchecked */
- width: 27px;
+.badgebox+.badge {
+ /* Move the check mark away when unchecked */
+ text-indent: -999999px;
+ /* Makes the badge's width stay the same checked and unchecked */
+ width: 27px;
}
-.badgebox:focus + .badge
-{
- /* Set something to make the badge looks focused */
- /* This really depends on the application, in my case it was: */
-
- /* Adding a light border */
- box-shadow: inset 0px 0px 5px;
- /* Taking the difference out of the padding */
+.badgebox:focus+.badge {
+ /* Set something to make the badge looks focused */
+ /* This really depends on the application, in my case it was: */
+ /* Adding a light border */
+ box-shadow: inset 0px 0px 5px;
+ /* Taking the difference out of the padding */
}
-.badgebox:checked + .badge
-{
- /* Move the check mark back when checked */
- text-indent: 0;
+.badgebox:checked+.badge {
+ /* Move the check mark back when checked */
+ text-indent: 0;
}
-.middle{
- vertical-align: middle;
+.middle {
+ vertical-align: middle;
}
-.no-border{
- border: 1px solid transparent !important;
-}
\ No newline at end of file
+.no-border {
+ border: 1px solid transparent !important;
+}
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 4b2fac2..ad955f7 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
@@ -76,32 +76,32 @@ under the License.
<div style="margin-top:10px;">
<label>View schema:</label>
<i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}}
- </i>
+ </i>
</div>
<div style="margin-top:5px;">
<table class="table table-striped no-border">
<thead>
- <tr style="background-color:#7D95CC">
- <th>
- <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" />
- </th>
- <th>Column Name</th>
- <th>Type</th>
- <th>Comment</th>
- </tr>
+ <tr style="background-color:#7D95CC">
+ <th>
+ <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" />
+ </th>
+ <th>Column Name</th>
+ <th>Type</th>
+ <th>Comment</th>
+ </tr>
</thead>
<tbody>
- <tr *ngIf="!schemaCollection || schemaCollection.length == 0">
- <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td>
- </tr>
- <tr *ngFor="let row of schemaCollection">
- <td>
- <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} />
- </td>
- <td>{{row.name}}</td>
- <td>{{row.type}}</td>
- <td>{{row.comment}}</td>
- </tr>
+ <tr *ngIf="!schemaCollection || schemaCollection.length == 0">
+ <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td>
+ </tr>
+ <tr *ngFor="let row of schemaCollection">
+ <td>
+ <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} />
+ </td>
+ <td>{{row.name}}</td>
+ <td>{{row.type}}</td>
+ <td>{{row.comment}}</td>
+ </tr>
</tbody>
</table>
</div>
@@ -129,20 +129,20 @@ under the License.
<div class="col-md-12 col-lg-12 col-sm-12" style="z-index:100;margin-top:5px;">
<table class="table table-striped" [mfData]="results" #mf="mfDataTable">
<thead>
- <tr style="background-color:#7D95CC">
- <th>Column Name</th>
- <th>Data Type</th>
- <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th>
- </tr>
+ <tr style="background-color:#7D95CC">
+ <th>Column Name</th>
+ <th>Data Type</th>
+ <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th>
+ </tr>
</thead>
<tbody>
- <tr *ngFor="let item of selection">
- <td class="middle">{{item.name}}</td>
- <td class="middle">{{item.type}}</td>
- <td class="col-md-5 middle">
- <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect>
- </td>
- </tr>
+ <tr *ngFor="let item of selection">
+ <td class="middle">{{item.name}}</td>
+ <td class="middle">{{item.type}}</td>
+ <td class="col-md-5 middle">
+ <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect>
+ </td>
+ </tr>
</tbody>
</table>
</div>
@@ -343,14 +343,6 @@ under the License.
{{type}}
</div>
</div>
- <!-- <div class="row">
- <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
- Group:
- </label>
- <div class="col-md-8 col-lg-8 col-sm-8 ">
- {{showgrp}}
- </div>
- </div> -->
<div class="row">
<label class="col-md-4 col-lg-4 col-sm-4">
DataSource:
@@ -403,26 +395,9 @@ under the License.
</div>
</div>
<h5 class="row">Rules</h5>
- <!-- <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;">
- {{index}}
- </div>
- <div class="row" *ngFor="let index of transenumrule;">
- {{index}}
- </div> -->
<br/>
</div>
</div>