http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.css b/ui/angular/src/app/measure/create-measure/pub/pub.component.css index 194a251..22a9156 100644 --- a/ui/angular/src/app/measure/create-measure/pub/pub.component.css +++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.css @@ -16,7 +16,6 @@ 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'); */ @@ -53,19 +52,19 @@ div.tree div.tree-children::before { left: 5px } -div.tree treenode>div>.node-wrapper { +div.tree treenode > div > .node-wrapper { margin-left: 24px } -div.tree treenode>div>.node-wrapper>.node-content-wrapper { +div.tree treenode > div > .node-wrapper > .node-content-wrapper { margin-left: 4px } -div.tree treenode>div.tree-node-leaf>.node-wrapper { +div.tree treenode > div.tree-node-leaf > .node-wrapper { margin-left: 0 } -div.tree treenode>div::before { +div.tree treenode > div::before { content: ""; position: absolute; border-bottom: 1px dotted #23527c; @@ -74,7 +73,7 @@ div.tree treenode>div::before { left: 7px } -div.tree treenode>div .toggle-children-wrapper { +div.tree treenode > div .toggle-children-wrapper { width: 13px; height: 13px; border: 1px solid #23527c; @@ -87,7 +86,7 @@ div.tree treenode>div .toggle-children-wrapper { z-index: 1 } -div.tree treenode>div .toggle-children-wrapper::before { +div.tree treenode > div .toggle-children-wrapper::before { content: ""; display: inline-block; width: 7px; @@ -97,7 +96,7 @@ div.tree treenode>div .toggle-children-wrapper::before { left: 2px } -div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after { +div.tree treenode > div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after { content: ""; display: inline-block; height: 7px; @@ -107,19 +106,19 @@ div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed left: 5px } -div.tree treenode>div .toggle-children-wrapper .toggle-children { +div.tree treenode > div .toggle-children-wrapper .toggle-children { display: none } -div.tree treenode>div .node-content-wrapper { +div.tree treenode > div .node-content-wrapper { margin-left: 4px } -div.tree>treenode>div::before { +div.tree > treenode > div::before { left: 14px } -div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper { +div.tree > treenode > div > .node-wrapper > treenodeexpander > .toggle-children-wrapper { left: 22px } @@ -151,11 +150,11 @@ specific language governing permissions and limitations under the License. */ -.table-striped>tbody>tr:nth-of-type(even) { +.table-striped > tbody > tr:nth-of-type(even) { background-color: #1f1f1f; } -.table-striped>tbody>tr:nth-of-type(odd) { +.table-striped > tbody > tr:nth-of-type(odd) { background-color: #080808; } @@ -182,11 +181,11 @@ under the License. background-color: #7D95CC; } -.pagination>li>a { +.pagination > li > a { cursor: pointer; } -.swMain>ul { +.swMain > ul { display: table; list-style: none; margin: 0 0 20px; @@ -204,13 +203,13 @@ under the License. /*height:800px;*/ } -.swMain>ul li { +.swMain > ul li { display: table-cell; text-align: center; width: 1% } -.swMain>ul li>a:before { +.swMain > ul li > a:before { border-top: 4px solid #c8c7cc; /* content: ""; */ display: block; @@ -229,7 +228,7 @@ under the License. width: 100% !important; } -.swMain>ul .stepNumber { +.swMain > ul .stepNumber { background-color: #fff; border: 5px solid #c8c7cc; border-radius: 100%; @@ -244,18 +243,18 @@ under the License. z-index: 2 } -.swMain>ul li>a.selected .stepNumber { +.swMain > ul li > a.selected .stepNumber { border-color: #007AFF } -.swMain ul li>a.done .stepNumber { +.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 > a.done .stepNumber:before { content: "\f00c"; display: inline; float: right; @@ -267,17 +266,17 @@ under the License. text-indent: 0 } -.swMain ul li>a.done.wait .stepNumber { - background-color: #F6F6F6!important; - color: #CCC!important; - text-indent: 0!important +.swMain ul li > a.done.wait .stepNumber { + background-color: #F6F6F6 !important; + color: #CCC !important; + text-indent: 0 !important } -.swMain ul li>a.done.wait .stepNumber:before { - content: ""!important +.swMain ul li > a.done.wait .stepNumber:before { + content: "" !important } -.swMain>ul li .stepDesc { +.swMain > ul li .stepDesc { color: #8e8e93; display: block; font-size: 14px; @@ -289,13 +288,13 @@ under the License. z-index: 104 } -.swMain li>a.done .stepDesc, -.swMain>ul li>a.selected .stepDesc { +.swMain li > a.done .stepDesc, +.swMain > ul li > a.selected .stepDesc { /*color: #2B3D53*/ color: #007AFF } -.swMain>ul li>a.disabled { +.swMain > ul li > a.disabled { cursor: default } @@ -304,7 +303,7 @@ under the License. } .swMain .stepContainer { - height: auto!important + height: auto !important } .swMain .y-scrollable { @@ -331,12 +330,12 @@ fieldset legend { top: -12px; color: #fff; font-weight: 400; - width: auto!important; - border: none!important; + width: auto !important; + border: none !important; } .btn-o { - background: 0 0!important; + background: 0 0 !important; } .btn-wide { @@ -357,11 +356,11 @@ fieldset legend { color: #fff; } -.formStep>.stepDesc { +.formStep > .stepDesc { color: #b2c831; } -.formStep>.container-fluid { +.formStep > .container-fluid { /*position:relative;*/ } @@ -375,18 +374,17 @@ fieldset legend { border-color: #B9D3DF; } -.panel-disabled>.panel-heading { +.panel-disabled > .panel-heading { background-color: #B9D3DF; border-color: #B9D3DF; } -.panel-body>ul { +.panel-body > ul { border-radius: 0; background: none; margin: 0; } - .panel-green { border-color: #5cb85c; } @@ -447,11 +445,11 @@ fieldset legend { padding: 10px; } -.ruletypes>.panel { +.ruletypes > .panel { cursor: pointer } -.ruletypes>.panel:hover { +.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; @@ -465,7 +463,6 @@ fieldset legend { padding-top: 10px; } - ::-webkit-scrollbar { width: 6px; }
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.html b/ui/angular/src/app/measure/create-measure/pub/pub.component.html index 7fd8950..916ede6 100644 --- a/ui/angular/src/app/measure/create-measure/pub/pub.component.html +++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.html @@ -23,7 +23,7 @@ under the License. <div class="row"> <form name="Form" id="form" #prForm="ngForm" novalidate> <div id="wizard" class="swMain"> - <ul> + <ul> <li> <a class="selected"> <div class="stepNumber"> @@ -33,8 +33,8 @@ under the License. </a> </li> </ul> - </div> - <div id="step-4" class="formStep"> + </div> + <div id="step-4" class="formStep"> <label class="stepDesc">Please setup the measure required information</label> <div class="container-fluid"> <div class="col-md-12 col-lg-12 col-sm-12"> @@ -44,39 +44,47 @@ under the License. </legend> <div class="y-scrollable"> <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:30px;"> - <div class="form-group" [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}"> + <div class="form-group" + [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Measure Name<span class="symbol required"></span>: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="newMeasure.name" #prName="ngModel" name="prName" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$"> + <input type="text" class="form-control" [(ngModel)]="newMeasure.name" #prName="ngModel" + name="prName" placeholder="Please input the measure name" required + pattern="^[a-zA-Z0-9_-]*$"> <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.required)">Measure Name is required</span> <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> </div> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12" > - <div class="form-group" [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" + [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Metric Name<span class="symbol required"></span>: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="newMeasure.metricName" #mName="ngModel" name="mName" placeholder="Please input the metric name" required pattern="^[a-zA-Z0-9_-]*$"> + <input type="text" class="form-control" [(ngModel)]="newMeasure.metricName" #mName="ngModel" + name="mName" placeholder="Please input the metric name" required + pattern="^[a-zA-Z0-9_-]*$"> <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span> <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> </div> </div> </div> - <div class="col-md-12 col-lg-12 col-sm-12" > - <div class="form-group" [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" + [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Dq Type<span class="symbol required"></span>: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <select [(ngModel)]="newMeasure.dqType" name="dqTypeOptions[{{i}}]" class="form-control input-sm" placeholder="Visual Type" required> - <option *ngFor="let t of dqTypeOptions" value="{{t}}">{{t}}</option> - </select> - <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span> + <select [(ngModel)]="newMeasure.dqType" name="dqTypeOptions[{{i}}]" class="form-control input-sm" + placeholder="Visual Type" required> + <option *ngFor="let t of dqTypeOptions" value="{{t}}">{{t}}</option> + </select> + <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span> </div> </div> </div> @@ -86,7 +94,8 @@ under the License. Measure Description: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" class="form-control" [(ngModel)]="newMeasure.description" placeholder="Please input detailed description of your measure" name="desc"> + <input type="text" class="form-control" [(ngModel)]="newMeasure.description" + placeholder="Please input detailed description of your measure" name="desc"> </div> </div> </div> @@ -96,12 +105,13 @@ under the License. Measure Type: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <select id="typeSelector" class="form-control" [(ngModel)]="newMeasure.measureType" disabled required name="type"> + <select id="typeSelector" class="form-control" [(ngModel)]="newMeasure.measureType" disabled + required name="type"> <option>{{newMeasure.measureType}}</option> </select> </div> </div> - </div> + </div> <div class="col-md-12 col-lg-12 col-sm-12"> <div class="form-group"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> @@ -115,7 +125,9 @@ under the License. </div> <div style="color:#b2c831"> <p> - <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" routerLink="/measures">Measures</a>" to check the measure status + <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" + routerLink="/measures">Measures</a>" + to check the measure status </p> </div> </fieldset> @@ -128,7 +140,9 @@ under the License. </div> </div> </div> - <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> + <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" + [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" + (click)="onContainerClicked($event)"> <div class="modal-dialog modal-xg modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -182,7 +196,7 @@ under the License. <div class="col-md-8 col-lg-8 col-sm-8 "> {{newMeasure.measureType}} </div> - </div> + </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Owner: @@ -193,7 +207,7 @@ under the License. </div> </div> </div> - </div> + </div> </div> </div> <div class="modal-footer"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts b/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts index 0b74802..aa54581 100644 --- a/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts +++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { PubComponent } from './pub.component'; +import {PubComponent} from './pub.component'; describe('PrComponent', () => { let component: PubComponent; @@ -26,9 +26,9 @@ describe('PrComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ PubComponent ] + declarations: [PubComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.ts b/ui/angular/src/app/measure/create-measure/pub/pub.component.ts index e103817..fd01bbd 100644 --- a/ui/angular/src/app/measure/create-measure/pub/pub.component.ts +++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.ts @@ -16,20 +16,20 @@ 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 {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 { ConfigurationComponent } from "../configuration/configuration.component"; +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 {ConfigurationComponent} from "../configuration/configuration.component"; interface pubMeasure { name: string; @@ -39,12 +39,13 @@ interface pubMeasure { dqType: string; owner: string } + export function createPubMeasure(name: string, - metricName: string, - description: string, - measureType: string, - dqType: string, - owner: string) { + metricName: string, + description: string, + measureType: string, + dqType: string, + owner: string) { return { name, metricName, @@ -54,15 +55,16 @@ export function createPubMeasure(name: string, owner } } + @Component({ selector: "app-pub", templateUrl: "./pub.component.html", providers: [ServiceService], styleUrls: ["./pub.component.css"] }) -export class PubComponent implements AfterViewChecked, OnInit { - newMeasure = createPubMeasure("", "", "","external","ACCURACY","test"); - dqTypeOptions =["accuracy"]; +export class PubComponent implements AfterViewChecked, OnInit { + newMeasure = createPubMeasure("", "", "", "external", "ACCURACY", "test"); + dqTypeOptions = ["accuracy"]; createResult: any; private toasterService: ToasterService; public visible = false; @@ -91,9 +93,9 @@ export class PubComponent implements AfterViewChecked, OnInit { }); $("fieldset").height( $(stepSelection).height() - - $(stepSelection + ">.stepDesc").height() - - $(".btn-container").height() - - 130 + $(stepSelection + ">.stepDesc").height() - + $(".btn-container").height() - + 130 ); $(".y-scrollable").css({ height: $("fieldset").height() @@ -101,7 +103,7 @@ export class PubComponent implements AfterViewChecked, OnInit { } - formValidation = function(step) { + formValidation = function (step) { if (step == undefined) { step = this.currentStep; } @@ -138,16 +140,15 @@ export class PubComponent implements AfterViewChecked, OnInit { setTimeout(() => (this.visibleAnimate = true), 100); } - - save() { - var measure2Save ={ - name:this.newMeasure.name, + save() { + var measure2Save = { + name: this.newMeasure.name, "metric.name": this.newMeasure.metricName, - "measure.type":this.newMeasure.measureType, - description:this.newMeasure.description, - "dq.type":this.newMeasure.dqType.toUpperCase(), - owner:this.newMeasure.owner + "measure.type": this.newMeasure.measureType, + description: this.newMeasure.description, + "dq.type": this.newMeasure.dqType.toUpperCase(), + owner: this.newMeasure.owner } console.log(measure2Save); var addModels = this.serviceService.config.uri.addModels; @@ -160,7 +161,7 @@ export class PubComponent implements AfterViewChecked, OnInit { }, err => { let response = JSON.parse(err.error); - if(response.code === '40901'){ + if (response.code === '40901') { this.toasterService.pop("error", "Error!", "Measure name already exists!"); } else { this.toasterService.pop("error", "Error!", "Error when creating measure"); @@ -178,11 +179,11 @@ export class PubComponent implements AfterViewChecked, OnInit { mouse: { click: (tree, node, $event) => { if (node.hasChildren) { - + TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); } else if (node.data.cols) { - - + + } } } @@ -209,10 +210,11 @@ export class PubComponent implements AfterViewChecked, OnInit { var allDataassets = this.serviceService.config.uri.dataassetlist; this.http.get(allDataassets).subscribe(data => { this.nodeList = new Array(); - + }); - + } + ngAfterViewChecked() { this.resizeWindow(); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 fc7d1df..dcf78fa 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 @@ -171,7 +171,9 @@ under the License. </div> <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> <div class="formula-text-up" style="border-bottom:1px solid;"> - Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{sourceTable}}</span> fields + Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span + style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span + style="color:green;">{{sourceTable}}</span> fields </div> <div class=""> Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}} {{targetTable}}</span> @@ -184,7 +186,7 @@ under the License. </div> </div> <div *ngIf="ruleData.type=='profiling'" class=""> - <div *ngFor="let index of ruleDes;" > + <div *ngFor="let index of ruleDes;"> {{index.name}} : {{index.infos}} </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts b/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts index 4a5d8a2..8a8ac40 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { MeasureDetailComponent } from './measure-detail.component'; +import {MeasureDetailComponent} from './measure-detail.component'; describe('MeasureDetailComponent', () => { let component: MeasureDetailComponent; @@ -26,9 +26,9 @@ describe('MeasureDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MeasureDetailComponent ] + declarations: [MeasureDetailComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 409c79c..b19636b 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,11 +16,11 @@ 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 {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 {HttpClient} from "@angular/common/http"; +import {ServiceService} from "../../service/service.service"; @Component({ selector: "app-measure-detail", @@ -30,12 +30,15 @@ import { ServiceService } from "../../service/service.service"; }) export class MeasureDetailComponent implements OnInit { currentId: string; + constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public serviceService: ServiceService - ) {} + ) { + } + ruleData: any; ruleDes = []; sourceLength: number; @@ -86,10 +89,10 @@ export class MeasureDetailComponent implements OnInit { if (this.ruleData["measure.type"] === "external") { this.ruleData.type = this.ruleData["measure.type"].toLowerCase(); this.ruleData.dqType = this.ruleData["dq.type"].toLowerCase(); - } else{ + } else { this.ruleData.type = this.ruleData["dq.type"].toLowerCase(); this.currentrule = this.ruleData["evaluate.rule"].rules; - if(this.ruleData["rule.description"]){ + if (this.ruleData["rule.description"]) { this.ruleDes = this.ruleData["rule.description"].details } this.fetchData("source", 0); @@ -107,4 +110,4 @@ export class MeasureDetailComponent implements OnInit { } ); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 0483912..3d1d82f 100644 --- a/ui/angular/src/app/measure/measure.component.css +++ b/ui/angular/src/app/measure/measure.component.css @@ -17,11 +17,11 @@ specific language governing permissions and limitations under the License. */ -.table-striped>tbody>tr:nth-of-type(even) { +.table-striped > tbody > tr:nth-of-type(even) { background-color: #1f1f1f; } -.table-striped>tbody>tr:nth-of-type(odd) { +.table-striped > tbody > tr:nth-of-type(odd) { background-color: #080808; } @@ -48,11 +48,11 @@ under the License. background-color: #7D95CC; } -.pagination>li>a { +.pagination > li > a { cursor: pointer; } -.swMain>ul { +.swMain > ul { display: table; list-style: none; margin: 0 30px 20px 30px; @@ -69,13 +69,13 @@ under the License. /*height:800px;*/ } -.swMain>ul li { +.swMain > ul li { display: table-cell; text-align: center; width: 1% } -.swMain>ul li>a:before { +.swMain > ul li > a:before { border-top: 4px solid #c8c7cc; content: ""; display: block; @@ -88,18 +88,18 @@ under the License. z-index: 1 } -.swMain>ul li:first-child>a:before { +.swMain > ul li:first-child > a:before { left: 50%; max-width: 51% } -.swMain>ul li:last-child>a:before { +.swMain > ul li:last-child > a:before { max-width: 50%; width: 50% } -.swMain li>a.done:before, -.swMain>ul li>a.selected:before { +.swMain li > a.done:before, +.swMain > ul li > a.selected:before { border-color: #007AFF } @@ -109,7 +109,7 @@ under the License. width: 100% !important; } -.swMain>ul .stepNumber { +.swMain > ul .stepNumber { background-color: #fff; border: 5px solid #c8c7cc; border-radius: 100%; @@ -124,18 +124,18 @@ under the License. z-index: 2 } -.swMain>ul li>a.selected .stepNumber { +.swMain > ul li > a.selected .stepNumber { border-color: #007AFF } -.swMain ul li>a.done .stepNumber { +.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 > a.done .stepNumber:before { content: "\f00c"; display: inline; float: right; @@ -147,17 +147,17 @@ under the License. text-indent: 0 } -.swMain ul li>a.done.wait .stepNumber { - background-color: #F6F6F6!important; - color: #CCC!important; - text-indent: 0!important +.swMain ul li > a.done.wait .stepNumber { + background-color: #F6F6F6 !important; + color: #CCC !important; + text-indent: 0 !important } -.swMain ul li>a.done.wait .stepNumber:before { - content: ""!important +.swMain ul li > a.done.wait .stepNumber:before { + content: "" !important } -.swMain>ul li .stepDesc { +.swMain > ul li .stepDesc { color: #8e8e93; display: block; font-size: 14px; @@ -169,13 +169,13 @@ under the License. z-index: 104 } -.swMain li>a.done .stepDesc, -.swMain>ul li>a.selected .stepDesc { +.swMain li > a.done .stepDesc, +.swMain > ul li > a.selected .stepDesc { /*color: #2B3D53*/ color: #007AFF } -.swMain>ul li>a.disabled { +.swMain > ul li > a.disabled { cursor: default } @@ -184,7 +184,7 @@ under the License. } .swMain .stepContainer { - height: auto!important + height: auto !important } .swMain .y-scrollable { @@ -210,12 +210,12 @@ fieldset legend { top: -12px; color: #fff; font-weight: 400; - width: auto!important; - border: none!important; + width: auto !important; + border: none !important; } .btn-o { - background: 0 0!important; + background: 0 0 !important; } .btn-wide { @@ -236,11 +236,11 @@ fieldset legend { color: #fff; } -.formStep>.stepDesc { +.formStep > .stepDesc { color: #b2c831; } -.formStep>.container-fluid { +.formStep > .container-fluid { /*position:relative;*/ } @@ -254,18 +254,17 @@ fieldset legend { border-color: #B9D3DF; } -.panel-disabled>.panel-heading { +.panel-disabled > .panel-heading { background-color: #B9D3DF; border-color: #B9D3DF; } -.panel-body>ul { +.panel-body > ul { border-radius: 0; background: none; margin: 0; } - .panel-green { border-color: #5cb85c; } @@ -326,11 +325,11 @@ fieldset legend { padding: 10px; } -.ruletypes>.panel { +.ruletypes > .panel { cursor: pointer } -.ruletypes>.panel:hover { +.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; @@ -344,7 +343,6 @@ fieldset legend { padding-top: 10px; } - ::-webkit-scrollbar { width: 6px; } @@ -384,14 +382,16 @@ a { color: white; } -.swMain li>div.done .stepDesc, -.swMain>ul li>div.selected1child .stepDesc { +.swMain li > div.done .stepDesc, +.swMain > ul li > div.selected1child .stepDesc { color: #007AFF } -.swMain li>div.done:before, -.swMain>ul li>div.selected1child:before { + +.swMain li > div.done:before, +.swMain > ul li > div.selected1child:before { border-color: #007AFF } -.swMain>ul li>div.selected1child .stepNumber { + +.swMain > ul li > div.selected1child .stepNumber { border-color: #007AFF } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 09991e7..5541b87 100644 --- a/ui/angular/src/app/measure/measure.component.html +++ b/ui/angular/src/app/measure/measure.component.html @@ -19,53 +19,55 @@ under the License. <div> <p> <a routerLink="/createmeasure" style="background-color: #337ab7;" class="btn btn-primary btn-wide"> - <i class="fa fa-plus"></i> + <i class="fa fa-plus"></i> Create Measure </a> </p> <div id="modelContainer"> <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> <thead> - <tr style="background-color:#7D95CC"> - <th st-ratio="15">Measure Name</th> - <th st-ratio="15">Measure Type</th> - <th st-ratio="20">Description</th> - <!-- <th st-ratio="5">Group</th> --> - <th st-ratio="5">Action</th> - </tr> + <tr style="background-color:#7D95CC"> + <th st-ratio="15">Measure Name</th> + <th st-ratio="15">Measure Type</th> + <th st-ratio="20">Description</th> + <!-- <th st-ratio="5">Group</th> --> + <th st-ratio="5">Action</th> + </tr> </thead> <tbody> - <tr *ngIf="!results"> - <td colspan="7" style="text-align:center;display:none">No content!</td> - <!-- <td class="icon" style="border-top-style:none"> - <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> - </td> --> - </tr> - <tr *ngFor="let row of mf.data"> - <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> - <td>{{row["dq.type"].toLowerCase()}}</td> - <td>{{row.description}}</td> - <td> - - <a (click)="remove(row)" title="delete" style="text-decoration:none"> - <i class="fa fa-trash-o po"></i> - </a> - <a routerLink="/measure/{{row.id}}" title="subscribe"> - <i class="fa fa-eye"></i> - </a> - </td> - </tr> + <tr *ngIf="!results"> + <td colspan="7" style="text-align:center;display:none">No content!</td> + <!-- <td class="icon" style="border-top-style:none"> + <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> + </td> --> + </tr> + <tr *ngFor="let row of mf.data"> + <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> + <td>{{row["dq.type"].toLowerCase()}}</td> + <td>{{row.description}}</td> + <td> + + <a (click)="remove(row)" title="delete" style="text-decoration:none"> + <i class="fa fa-trash-o po"></i> + </a> + <a routerLink="/measure/{{row.id}}" title="subscribe"> + <i class="fa fa-eye"></i> + </a> + </td> + </tr> </tbody> <tfoot> - <tr> - <td colspan="8" class="text-right"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> + <tr> + <td colspan="8" class="text-right"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> </tfoot> </table> </div> - <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> + <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" + *ngIf="deletedRow" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" + (click)="onContainerClicked($event)"> <div class="modal-dialog modal-xg modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -128,7 +130,8 @@ under the License. </div> </div> <div class="modal-footer"> - <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p> + <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted, + please be careful!</p> <button type="button" id="save" class="btn btn-default" (click)="confirmDelete()">Yes</button> <button type="button" class="btn btn-primary" (click)="hide()">No</button> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/measure.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.spec.ts b/ui/angular/src/app/measure/measure.component.spec.ts index c615b4f..f6cf3fa 100644 --- a/ui/angular/src/app/measure/measure.component.spec.ts +++ b/ui/angular/src/app/measure/measure.component.spec.ts @@ -17,9 +17,9 @@ specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { MeasureComponent } from './measure.component'; +import {MeasureComponent} from './measure.component'; describe('MeasureComponent', () => { let component: MeasureComponent; @@ -27,9 +27,9 @@ describe('MeasureComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MeasureComponent ] + declarations: [MeasureComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 19ea70f..23f7a15 100644 --- a/ui/angular/src/app/measure/measure.component.ts +++ b/ui/angular/src/app/measure/measure.component.ts @@ -16,15 +16,15 @@ 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 {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({ @@ -71,7 +71,7 @@ export class MeasureComponent implements OnInit { this.deleteIndex = this.results.indexOf(row); this.deletedRow = row; $("#save").removeAttr("disabled"); - if(this.deletedRow["measure.type"]!=="external"){ + if (this.deletedRow["measure.type"] !== "external") { var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config; this.sourceTable = sourcedata["table.name"]; } @@ -90,7 +90,7 @@ export class MeasureComponent implements OnInit { this.http.delete(deleteUrl).subscribe( data => { var self = this; - setTimeout(function() { + setTimeout(function () { self.results.splice(self.deleteIndex, 1); self.hide(); }, 200); @@ -113,7 +113,7 @@ export class MeasureComponent implements OnInit { // data[measure].type = ''; // } // } - let trans = Object.keys(data).map(function(index) { + let trans = Object.keys(data).map(function (index) { let measure = data[index]; if (measure["measure.type"] === "external") { measure["dq.type"] = "external"; @@ -125,7 +125,7 @@ export class MeasureComponent implements OnInit { return measure; }); // this.results = Object.assign([],trans).reverse(); - this.results = Object.assign([],trans).sort(function(a,b){ + this.results = Object.assign([], trans).sort(function (a, b) { return b.id - a.id; }); }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css index 924c34a..ee1b824 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css @@ -45,11 +45,11 @@ under the License. vertical-align: top; } -.main-table>tbody>tr:nth-of-type(even) { +.main-table > tbody > tr:nth-of-type(even) { background-color: #1f1f1f; } -.main-table>tbody>tr:nth-of-type(odd) { +.main-table > tbody > tr:nth-of-type(odd) { background-color: #080808; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html index f99e5fe..66c9d8d 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html @@ -20,7 +20,8 @@ under the License. <b>No content</b> </div> -<div *ngIf="!noresults" id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;"> +<div *ngIf="!noresults" id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" + style="display:none;"> <div id="bigChartShow" class="big-chart-content"> <div class="container-fluid"> <div class="row"> @@ -37,31 +38,34 @@ under the License. <div class="table-wrap"> <table class="main-table y-scrollable" [mfData]="prodata" #mf="mfDataTable" [mfRowsOnPage]="18"> <thead> - <tr style="background-color:#7D95CC"> - <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th> - <th class="cover" scope="col">Time</th> - <th scope="col" *ngFor="let name of this.columnname" style="text-align: center;">{{name}}</th> - </tr> + <tr style="background-color:#7D95CC"> + <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th> + <th class="cover" scope="col">Time</th> + <th scope="col" *ngFor="let name of this.columnname" style="text-align: center;">{{name}}</th> + </tr> </thead> <tbody> - <tr *ngFor="let item of mf.data"> - <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> - <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> - <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td> - </tr> + <tr *ngFor="let item of mf.data"> + <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> + <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th> + <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td> + </tr> </tbody> <tfoot> - <tr> - <td class="text-center" colspan="8" style="background-color:#1f1f1f;position: fixed;margin-left: 30%;" id="pagination"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> + <tr> + <td class="text-center" colspan="8" style="background-color:#1f1f1f;position: fixed;margin-left: 30%;" + id="pagination"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> </tfoot> </table> </div> </div> -<div class="modal fade" id="downloadSampleModal" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="missRecordList" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> +<div class="modal fade" id="downloadSampleModal" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" + *ngIf="missRecordList" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" + (click)="onContainerClicked($event)"> <div class="modal-dialog modal-md modal-md"> <div class="modal-content"> <div class="modal-header"> @@ -71,24 +75,25 @@ under the License. </div> <div class="modal-body"> <div class="container-fluid" id="dowloadContent" style="overflow:auto;"> - <tr > + <tr> <td colspan="7" style="padding:20px 30px 10px 30px;"> <table class="table table-striped" [mfData]="missRecordList" #mf2="mfDataTable" [mfRowsOnPage]="10"> <tbody> - <tr *ngIf="!missRecordList"> - <td colspan="7" style="text-align:center">No content.</td> - </tr> - <tr *ngFor="let item of mf2.data"> - <td style="background-color:black;"><a (click)="downloadSample(item)" >{{item.tmst}} {{item.tmst | date: 'yyyy/MM/dd HH:mm:ss'}}</a> </td> - </tr> + <tr *ngIf="!missRecordList"> + <td colspan="7" style="text-align:center">No content.</td> + </tr> + <tr *ngFor="let item of mf2.data"> + <td style="background-color:black;"><a (click)="downloadSample(item)">{{item.tmst}} {{item.tmst | + date: 'yyyy/MM/dd HH:mm:ss'}}</a></td> + </tr> </tbody> <tfoot> - <tr> - <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="paginationdownlad"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> + <tr> + <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="paginationdownlad"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> </tfoot> </table> </td> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts index 2eb668d..42a922e 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { DetailMetricComponent } from './detail-metric.component'; +import {DetailMetricComponent} from './detail-metric.component'; describe('DetailMetricComponent', () => { let component: DetailMetricComponent; @@ -26,9 +26,9 @@ describe('DetailMetricComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DetailMetricComponent ] + declarations: [DetailMetricComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 5279f93..9294641 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,14 +16,23 @@ 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, AfterViewChecked, NgZone } from "@angular/core"; -import { ChartService } from "../../service/chart.service"; -import { ServiceService } from "../../service/service.service"; -import { Router, ActivatedRoute, ParamMap } from "@angular/router"; +import { + Component, + OnInit, + OnChanges, + SimpleChanges, + OnDestroy, + AfterViewInit, + AfterViewChecked, + 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 {HttpClient} from "@angular/common/http"; import * as $ from "jquery"; -import { DataTableModule } from "angular2-datatable"; +import {DataTableModule} from "angular2-datatable"; @Component({ selector: "app-detail-metric", @@ -33,6 +42,7 @@ import { DataTableModule } from "angular2-datatable"; }) export class DetailMetricComponent implements AfterViewChecked, OnInit { objectKeys = Object.keys; + constructor( public chartService: ChartService, private route: ActivatedRoute, @@ -40,7 +50,9 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { private http: HttpClient, private zone: NgZone, public serviceService: ServiceService - ) {} + ) { + } + selectedMeasure: string; chartOption: {}; data: any; @@ -73,10 +85,10 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { this.http.get(metricDetailUrl).subscribe( data => { this.data = data; - if(this.data.length == 0){ + if (this.data.length == 0) { this.noresults = true; } - if(this.data.length != 0 && this.data[0].value.matched != undefined){ + if (this.data.length != 0 && this.data[0].value.matched != undefined) { var metric = { name: "", timestamp: 0, @@ -87,27 +99,27 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { 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)); + metric.details = JSON.parse(JSON.stringify(this.data)); this.chartOption = this.chartService.getOptionBig(metric); - this.missRecordList = metric.details.filter(val => val.value.missed!== 0); + this.missRecordList = metric.details.filter(val => val.value.missed !== 0); $("#bigChartDiv").height(window.innerHeight - 120 + "px"); $("#bigChartDiv").width(window.innerWidth - 400 + "px"); $("#bigChartContainer").show(); - }else if(this.data.length != 0){ + } else if (this.data.length != 0) { this.prodata = this.data; this.profiling = true; - for(let item of this.prodata){ - for(let key in item.value){ - if(typeof(item.value[key]) != "object"){ + for (let item of this.prodata) { + for (let key in item.value) { + if (typeof(item.value[key]) != "object") { item.value[key].toString(); - }else{ + } else { let keysplit = key.split('-'); - let records =''; + let records = ''; let record; - for(let i in item.value[key]){ - let name,count; - for(let category in item.value[key][i]){ - if(category != "count"){ + for (let i in item.value[key]) { + let name, count; + for (let category in item.value[key][i]) { + if (category != "count") { name = item.value[key][i][category]; count = item.value[key][i].count; } @@ -138,7 +150,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { } } } - for(let key in this.data[0].value){ + for (let key in this.data[0].value) { this.columnname.push(key); } } @@ -158,7 +170,8 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { $("#bigChartDiv").width($("#mainWindow").width()); } - getData(metricName) {} + getData(metricName) { + } ngAfterViewChecked() { $(".main-table").addClass('clone'); @@ -173,20 +186,21 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { this.visibleAnimate = false; setTimeout(() => (this.visible = false), 300); } + public onContainerClicked(event: MouseEvent): void { if ((<HTMLElement>event.target).classList.contains("close")) { this.hide(); } } - - downloadSample(row){ + + downloadSample(row) { let urlDownload = this.serviceService.config.uri.missRecordDownload + "?jobName=" + row.name + "&ts=" + row.tmst; this.http .get(urlDownload, - { responseType: 'blob', observe: 'response' }) + {responseType: 'blob', observe: 'response'}) .map(res => { return { - filename: row.name+"_"+row.tmst+'_missRecordSample.json', + filename: row.name + "_" + row.tmst + '_missRecordSample.json', data: res.body }; }) @@ -206,5 +220,5 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit { }, () => { console.log('Completed file download.') }); - } } +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 01e0080..fd7927d 100644 --- a/ui/angular/src/app/metric/metric.component.html +++ b/ui/angular/src/app/metric/metric.component.html @@ -22,7 +22,8 @@ under the License. <div class="form-group"> <span style="padding-left:30px;"> <label>Measure: </label> - <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector"> + <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" + id="measureSelector"> <option value="0"> -- All -- </option> <option *ngFor="let key of measureOptions;let n = index" value="{{n+1}}">{{key}}</option> </select> @@ -31,18 +32,20 @@ under the License. </div> <!-- <div class="col-sm-5 chartItem" *ngFor="let outerItems of finalData;let parent=index" style="margin-bottom:30px;margin-right:15px;"> --> <div *ngFor="let outerItems of finalData;let parent=index"> - <!-- <div class="row"> + <!-- <div class="row"> <div style="text-align: center;" > <h4>{{outerItems.name}}</h4> </div> </div> --> <!-- <div class="row"> --> - <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;" style="margin-bottom:30px;"> - <!-- <div *ngFor="let items of outerItems.metrics;let i=index;"> --> - <div class="row-fluid" style="cursor: pointer;"> - <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div> - </div> + <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;" + style="margin-bottom:30px;"> + <!-- <div *ngFor="let items of outerItems.metrics;let i=index;"> --> + <div class="row-fluid" style="cursor: pointer;"> + <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts + [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div> </div> + </div> <!-- </div> --> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/metric.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.spec.ts b/ui/angular/src/app/metric/metric.component.spec.ts index e93d618..5ac910b 100644 --- a/ui/angular/src/app/metric/metric.component.spec.ts +++ b/ui/angular/src/app/metric/metric.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { MetricComponent } from './metric.component'; +import {MetricComponent} from './metric.component'; describe('MetricComponent', () => { let component: MetricComponent; @@ -26,9 +26,9 @@ describe('MetricComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MetricComponent ] + declarations: [MetricComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 1fce6c5..4b52086 100644 --- a/ui/angular/src/app/metric/metric.component.ts +++ b/ui/angular/src/app/metric/metric.component.ts @@ -16,11 +16,11 @@ 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 { ServiceService } from "../service/service.service"; +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({ @@ -35,7 +35,9 @@ export class MetricComponent implements OnInit { public serviceService: ServiceService, private http: HttpClient, private router: Router - ) {} + ) { + } + data: any; finalData = []; chartOption = new Map(); @@ -50,7 +52,7 @@ export class MetricComponent implements OnInit { this.renderData(); } - checkvalue(job){ + checkvalue(job) { return job.metricValues.length === 0; } @@ -58,9 +60,9 @@ export class MetricComponent implements OnInit { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { this.mesWithJob = JSON.parse(JSON.stringify(data)); - for(let i=0;i<this.mesWithJob.length;i++) { - if(this.mesWithJob[i].some(this.checkvalue)){ - this.mesWithJob[i].splice(i,1); + for (let i = 0; i < this.mesWithJob.length; i++) { + if (this.mesWithJob[i].some(this.checkvalue)) { + this.mesWithJob[i].splice(i, 1); } } for (let mesName in this.mesWithJob) { @@ -77,7 +79,7 @@ export class MetricComponent implements OnInit { node.type = "ACCURACY"; for (let i = 0; i < jobs.length; i++) { if (jobs[i].metricValues.length != 0) { - var someMetrics = jobs[i].metricValues.slice(0,30); + var someMetrics = jobs[i].metricValues.slice(0, 30); jobs[i].metricValues = JSON.parse( JSON.stringify(someMetrics) ); @@ -162,7 +164,7 @@ export class MetricComponent implements OnInit { } } var self = this; - setTimeout(function() { + setTimeout(function () { self.redraw(self.finalData); }, 0); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts b/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts index 7306847..abbb512 100644 --- a/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts +++ b/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { MydashboardComponent } from './mydashboard.component'; +import {MydashboardComponent} from './mydashboard.component'; describe('MydashboardComponent', () => { let component: MydashboardComponent; @@ -26,9 +26,9 @@ describe('MydashboardComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MydashboardComponent ] + declarations: [MydashboardComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/mydashboard/mydashboard.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/mydashboard/mydashboard.component.ts b/ui/angular/src/app/mydashboard/mydashboard.component.ts index 11573d2..848d877 100644 --- a/ui/angular/src/app/mydashboard/mydashboard.component.ts +++ b/ui/angular/src/app/mydashboard/mydashboard.component.ts @@ -16,8 +16,8 @@ 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 } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-mydashboard', @@ -26,7 +26,8 @@ import { Router } from '@angular/router'; }) export class MydashboardComponent implements OnInit { - constructor(public router: Router) { } + constructor(public router: Router) { + } ngOnInit() { } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/chart.service.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/chart.service.spec.ts b/ui/angular/src/app/service/chart.service.spec.ts index a6a06af..c72bc03 100644 --- a/ui/angular/src/app/service/chart.service.spec.ts +++ b/ui/angular/src/app/service/chart.service.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { TestBed, inject } from '@angular/core/testing'; +import {TestBed, inject} from '@angular/core/testing'; -import { ChartService } from './chart.service'; +import {ChartService} from './chart.service'; describe('ChartService', () => { beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/chart.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/chart.service.ts b/ui/angular/src/app/service/chart.service.ts index c1a41bf..5b5a12c 100644 --- a/ui/angular/src/app/service/chart.service.ts +++ b/ui/angular/src/app/service/chart.service.ts @@ -16,11 +16,12 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from "@angular/core"; +import {Injectable} from "@angular/core"; @Injectable() export class ChartService { - constructor() {} + constructor() { + } formatter_value(value, index) { if (value < 1000) { @@ -83,7 +84,7 @@ export class ChartService { ]); } } - data.sort(function(a, b) { + data.sort(function (a, b) { return a[0] - b[0]; }); return data; @@ -106,7 +107,7 @@ export class ChartService { }, tooltip: { trigger: "axis", - formatter: function(params) { + formatter: function (params) { return self.getTooltip(params); } }, @@ -208,10 +209,10 @@ export class ChartService { }, tooltip: { trigger: "axis", - formatter: function(params) { + formatter: function (params) { return self.getTooltip(params); }, - position: function(point, params, dom) { + position: function (point, params, dom) { return self.getTooltipPosition(point, params, dom); } }, @@ -297,7 +298,7 @@ export class ChartService { ], tooltip: { trigger: "axis", - formatter: function(params) { + formatter: function (params) { return self.getTooltip(params); } }, http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/http.service.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/http.service.spec.ts b/ui/angular/src/app/service/http.service.spec.ts index ddbe59b..69c1860 100644 --- a/ui/angular/src/app/service/http.service.spec.ts +++ b/ui/angular/src/app/service/http.service.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { TestBed, inject } from '@angular/core/testing'; +import {TestBed, inject} from '@angular/core/testing'; -import { HttpService } from './http.service'; +import {HttpService} from './http.service'; describe('ServiceService', () => { beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/http.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/http.service.ts b/ui/angular/src/app/service/http.service.ts index 52ce666..c21bd7d 100644 --- a/ui/angular/src/app/service/http.service.ts +++ b/ui/angular/src/app/service/http.service.ts @@ -16,35 +16,35 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from '@angular/core'; -import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http"; -import { Observable } from "rxjs/Observable"; +import {Injectable} from '@angular/core'; +import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from "@angular/common/http"; +import {Observable} from "rxjs/Observable"; import 'rxjs/add/operator/do'; -import { LoaderService } from "./../loader/loader.service"; +import {LoaderService} from "./../loader/loader.service"; @Injectable() export class HttpService implements HttpInterceptor { - constructor(private loaderService: LoaderService) { - } - - intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { - this.showLoading(); - return next.handle(req).do((event: HttpEvent<any>) => { - if (event instanceof HttpResponse) { - this.hideLoading(); - } - }, (err: any) => { - this.hideLoading(); - }); - } - - private showLoading(): void { - this.loaderService.show(); - } - - private hideLoading(): void { - this.loaderService.hide(); - } - -} \ No newline at end of file + constructor(private loaderService: LoaderService) { + } + + intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { + this.showLoading(); + return next.handle(req).do((event: HttpEvent<any>) => { + if (event instanceof HttpResponse) { + this.hideLoading(); + } + }, (err: any) => { + this.hideLoading(); + }); + } + + private showLoading(): void { + this.loaderService.show(); + } + + private hideLoading(): void { + this.loaderService.hide(); + } + +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/service.service.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/service.service.spec.ts b/ui/angular/src/app/service/service.service.spec.ts index 32edfd7..acc57f9 100644 --- a/ui/angular/src/app/service/service.service.spec.ts +++ b/ui/angular/src/app/service/service.service.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { TestBed, inject } from '@angular/core/testing'; +import {TestBed, inject} from '@angular/core/testing'; -import { ServiceService } from './service.service'; +import {ServiceService} from './service.service'; describe('ServiceService', () => { beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/service.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts index 3e35de5..d64c99c 100644 --- a/ui/angular/src/app/service/service.service.ts +++ b/ui/angular/src/app/service/service.service.ts @@ -16,11 +16,13 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from "@angular/core"; +import {Injectable} from "@angular/core"; @Injectable() export class ServiceService { - constructor() {} + constructor() { + } + // public BACKEND_SERVER = 'http://10.64.222.80:38080'; // public BACKEND_SERVER = 'http://localhost:8080'; public BACKEND_SERVER = ""; @@ -33,15 +35,15 @@ export class ServiceService { login: this.BACKEND_SERVER + this.API_ROOT_PATH + "/login/authenticate", dbtree: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", dataassetlist: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", getdataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + "/dataassets", //mydashboard getmydashboard: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/mydashboard/", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/mydashboard/", // getsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe/', // newsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe', @@ -64,15 +66,15 @@ export class ServiceService { // organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs', dashboard: this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics", metricdetail: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/values", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/values", // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source', metricsample: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample", metricdownload: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download", missRecordDownload: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/download", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/download", //Models @@ -81,7 +83,7 @@ export class ServiceService { deleteModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", enableModel: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/models/enableModel", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/models/enableModel", //Jobs allJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", @@ -89,10 +91,10 @@ export class ServiceService { modifyJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", getJobById: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/config", getMeasuresByOwner: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures/owner/", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures/owner/", deleteJob: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", getInstances: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/instances", + this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/instances", // allJobs:'/jobs.json', newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models", @@ -110,7 +112,7 @@ export class ServiceService { //Notification getnotifications: - this.BACKEND_SERVER + this.API_ROOT_PATH + "/notifications" + this.BACKEND_SERVER + this.API_ROOT_PATH + "/notifications" } }; } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/user.service.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/user.service.spec.ts b/ui/angular/src/app/service/user.service.spec.ts index b26195c..97eafff 100644 --- a/ui/angular/src/app/service/user.service.spec.ts +++ b/ui/angular/src/app/service/user.service.spec.ts @@ -1,6 +1,6 @@ -import { TestBed, inject } from '@angular/core/testing'; +import {TestBed, inject} from '@angular/core/testing'; -import { UserService } from './user.service'; +import {UserService} from './user.service'; describe('UserService', () => { beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/user.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/user.service.ts b/ui/angular/src/app/service/user.service.ts index 47efa02..3ed105d 100644 --- a/ui/angular/src/app/service/user.service.ts +++ b/ui/angular/src/app/service/user.service.ts @@ -16,12 +16,13 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from "@angular/core"; +import {Injectable} from "@angular/core"; @Injectable() export class UserService { ntAccount: string; timestamp: Date; + setCookie(name, value, days) { let expires; if (days) { @@ -38,4 +39,4 @@ export class UserService { var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)"); return keyValue ? keyValue[2] : null; } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.css b/ui/angular/src/app/sidebar/sidebar.component.css index c9a5dbe..16482b7 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.css +++ b/ui/angular/src/app/sidebar/sidebar.component.css @@ -23,12 +23,12 @@ under the License. align-items: center } -.sidebar-stat-center>img { +.sidebar-stat-center > img { max-width: 24px; margin-right: 5px; } -.sidebar-stat-center>span { +.sidebar-stat-center > span { font-size: 18px; color: #fff } @@ -108,7 +108,7 @@ under the License. /*margin-left: 20px;*/ } -a>.side-name:hover { +a > .side-name:hover { color: #b2c831; /*position: absolute;*/ /*left: 210px;*/ @@ -146,10 +146,8 @@ a>.side-name:hover { float: none; } - /*side-bar end*/ - /* led start */ .led-red { @@ -185,7 +183,6 @@ a>.side-name:hover { box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; } - /* led end */ @media (max-width: 1200px) { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.html b/ui/angular/src/app/sidebar/sidebar.component.html index ab1195b..0a445a1 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.html +++ b/ui/angular/src/app/sidebar/sidebar.component.html @@ -26,7 +26,7 @@ under the License. </div> <div class="sidebar-stat-center"> <i class="fa fa-line-chart" style="color:#b2c831;" aria-hidden="true"></i> - <span><a routerLink="/metrics" > DQ Metrics</a></span> + <span><a routerLink="/metrics"> DQ Metrics</a></span> </div> </div> </div> @@ -40,7 +40,7 @@ under the License. <div class="well" *ngIf="outerItems.metrics.length != 0"> <div class="col-sm-4 col-lg-4 col-md-4 "> <h4> - <!-- <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> --> + <!-- <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> --> <a> {{outerItems.name}}</a> </h4> </div> @@ -55,15 +55,16 @@ under the License. <div class="panel panel-default"> <div class="panel-heading" style="background:transparent;"> <h4 class="panel-title side-metrics"> - <a style="cursor: pointer;" (click)="draw(items,parent, i);items.tag=!items.tag;" > - <i class="faChevron" [ngClass]="items.tag ? 'fa fa-caret-down':'fa fa-caret-right'" style="width:10px"></i> + <a style="cursor: pointer;" (click)="draw(items,parent, i);items.tag=!items.tag;"> + <i class="faChevron" [ngClass]="items.tag ? 'fa fa-caret-down':'fa fa-caret-right'" + style="width:10px"></i> <i class="fa fa-line-chart faArrows"></i> <span class="side-date">{{items.timestamp | date:'short' }}</span> - + <span class="side-name" title="{{items.name}}">{{items.name |truncate :13}} </span> </a> - </h4> + </h4> </div> <div id="side{{parent}}{{i}}" class="panel-collapse collapse"> <div class="panel-body" style="cursor:pointer;padding:0px 15px;border-top-width: 0;"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.spec.ts b/ui/angular/src/app/sidebar/sidebar.component.spec.ts index 528bab2..a8c8134 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.spec.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.spec.ts @@ -16,9 +16,9 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { SidebarComponent } from './sidebar.component'; +import {SidebarComponent} from './sidebar.component'; describe('SidebarComponent', () => { let component: SidebarComponent; @@ -26,9 +26,9 @@ describe('SidebarComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SidebarComponent ] + declarations: [SidebarComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.ts b/ui/angular/src/app/sidebar/sidebar.component.ts index a902cfa..01f1b40 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -16,13 +16,13 @@ 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 { DatePipe } from "@angular/common"; -import { ServiceService } from "../service/service.service"; -import { TruncatePipe } from "./truncate.pipe"; +import {Component, OnInit} from "@angular/core"; +import {HttpClient} from "@angular/common/http"; +import {Router} from "@angular/router"; +import {ChartService} from "../service/chart.service"; +import {DatePipe} from "@angular/common"; +import {ServiceService} from "../service/service.service"; +import {TruncatePipe} from "./truncate.pipe"; import * as $ from "jquery"; @Component({ @@ -37,7 +37,8 @@ export class SidebarComponent implements OnInit { private router: Router, public serviceService: ServiceService, public chartService: ChartService - ) {} + ) { + } finalData = []; chartOption = new Map(); @@ -50,7 +51,8 @@ export class SidebarComponent implements OnInit { data => { this.sideBarList(null); }, - err => {} + err => { + } ); } @@ -66,7 +68,7 @@ export class SidebarComponent implements OnInit { resizeSideChart() { $("#side-bar-metrics").css({ height: - $("#mainContent").height() - $("#side-bar-stats").outerHeight() + 70 + $("#mainContent").height() - $("#side-bar-stats").outerHeight() + 70 }); for (let i = 0; i < this.finalData.length; i++) { for (let j = 0; j < this.finalData[i].metrics.length; j++) { @@ -86,7 +88,7 @@ export class SidebarComponent implements OnInit { this.chartOption.set(chartId, this.chartService.getOptionSide(metric)); var self = this; $("#" + chartId).unbind("click"); - $("#" + chartId).click(function(e) { + $("#" + chartId).click(function (e) { self.router.navigate([ "/detailed/" + self.finalData[parentIndex].metrics[index].name ]); @@ -97,7 +99,7 @@ export class SidebarComponent implements OnInit { return this.chartOption.get("chart" + parent + "-" + i); } - checkvalue(job){ + checkvalue(job) { return job.metricValues.length === 0; } @@ -105,9 +107,9 @@ export class SidebarComponent implements OnInit { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { this.mesWithJob = JSON.parse(JSON.stringify(data)); - for(let i=0;i<this.mesWithJob.length;i++) { - if(this.mesWithJob[i].some(this.checkvalue)){ - this.mesWithJob[i].splice(i,1); + for (let i = 0; i < this.mesWithJob.length; i++) { + if (this.mesWithJob[i].some(this.checkvalue)) { + this.mesWithJob[i].splice(i, 1); } } for (let mesName in this.mesWithJob) { @@ -124,7 +126,7 @@ export class SidebarComponent implements OnInit { node.type = "ACCURACY"; for (let i = 0; i < jobs.length; i++) { if (jobs[i].metricValues.length != 0) { - var someMetrics = jobs[i].metricValues.slice(0,30); + var someMetrics = jobs[i].metricValues.slice(0, 30); jobs[i].metricValues = JSON.parse( JSON.stringify(someMetrics) );
