Format code and add scroll bar in measuer view 1.add scroll bar in measure and job view. 2.measure and job process align with new defined http response. 3.format code
Author: dodobel <[email protected]> Closes #203 from dodobel/master. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/e7034710 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/e7034710 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/e7034710 Branch: refs/heads/master Commit: e70347107ad866851ec97b8c2ae923e7b42c7af8 Parents: fb569ad Author: dodobel <[email protected]> Authored: Wed Jan 31 16:31:57 2018 +0800 Committer: Lionel Liu <[email protected]> Committed: Wed Jan 31 16:31:57 2018 +0800 ---------------------------------------------------------------------- ui/angular/src/app/app.component.css | 167 ++-- ui/angular/src/app/app.component.html | 2 +- ui/angular/src/app/app.component.ts | 84 +- ui/angular/src/app/app.module.ts | 1 - .../src/app/dataasset/dataasset.component.css | 26 +- .../src/app/dataasset/dataasset.component.ts | 17 - ui/angular/src/app/health/health.component.ts | 264 ++++--- .../app/job/create-job/create-job.component.css | 52 +- .../job/create-job/create-job.component.html | 3 +- .../app/job/create-job/create-job.component.ts | 307 ++++---- ui/angular/src/app/job/job.component.css | 42 +- ui/angular/src/app/job/job.component.html | 37 +- ui/angular/src/app/job/job.component.ts | 179 ++--- ui/angular/src/app/login/login.component.css | 87 ++- ui/angular/src/app/login/login.component.ts | 133 ++-- .../measure/create-measure/ac/ac.component.css | 105 +-- .../measure/create-measure/ac/ac.component.html | 116 +-- .../measure/create-measure/ac/ac.component.ts | 770 ++++++++++--------- .../configuration/configuration.component.css | 8 - .../configuration/configuration.component.html | 13 +- .../configuration/configuration.component.ts | 124 +-- .../create-measure/create-measure.component.css | 109 +-- .../create-measure/create-measure.component.ts | 51 +- .../measure/create-measure/pr/pr.component.css | 166 ++-- .../measure/create-measure/pr/pr.component.html | 89 +-- .../measure/create-measure/pr/pr.component.ts | 706 +++++++++-------- .../create-measure/pr/rule/rule.component.css | 44 +- .../create-measure/pr/rule/rule.component.ts | 1 - .../measure-detail.component.html | 10 +- .../measure-detail/measure-detail.component.ts | 99 +-- .../src/app/measure/measure.component.css | 351 ++++----- .../src/app/measure/measure.component.html | 16 +- ui/angular/src/app/measure/measure.component.ts | 116 +-- .../detail-metric/detail-metric.component.ts | 126 +-- ui/angular/src/app/metric/metric.component.css | 65 +- ui/angular/src/app/metric/metric.component.html | 7 - ui/angular/src/app/metric/metric.component.ts | 153 ++-- ui/angular/src/app/service/chart.service.ts | 456 +++++------ ui/angular/src/app/service/service.service.ts | 188 +++-- ui/angular/src/app/service/user.service.ts | 32 +- .../src/app/sidebar/sidebar.component.css | 266 +++---- .../src/app/sidebar/sidebar.component.html | 3 +- ui/angular/src/app/sidebar/sidebar.component.ts | 154 ++-- ui/angular/src/app/sidebar/truncate.pipe.ts | 2 - ui/angular/src/styles.css | 4 +- 45 files changed, 2881 insertions(+), 2870 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/app.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.component.css b/ui/angular/src/app/app.component.css index cd5974f..15f712d 100644 --- a/ui/angular/src/app/app.component.css +++ b/ui/angular/src/app/app.component.css @@ -16,127 +16,138 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + @import url('../../node_modules/bootstrap/dist/css/bootstrap.css'); -*{ - color:white; +* { + color: white; } -.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { - color: #ffffff; - background-color: transparent; +.navbar-default .navbar-nav>li>a:hover, +.navbar-default .navbar-nav>li>a:focus { + color: #ffffff; + background-color: transparent; } -.navbar-default{ - background-color: #060606; - border-color: #282828; + +.navbar-default { + background-color: #060606; + border-color: #282828; } -#toggle{ - background: #060606; - color:#fff; + +#toggle { + background: #060606; + color: #fff; } -#toggle:hover{ - color: #fff; - background-color: #060606; + +#toggle:hover { + color: #fff; + background-color: #060606; } -.re:hover{ - cursor: pointer; + +.re:hover { + cursor: pointer; } -h3{ - font-size: 34px; +h3 { + font-size: 34px; } -input{ - margin: 12px; + +input { + margin: 12px; } -.dropdown-menu{ - background-color: #222222; +.dropdown-menu { + background-color: #222222; } -.dropdown-menu > li > a{ - color: #ffffff; + +.dropdown-menu>li>a { + color: #ffffff; } -.dropdown-menu > li > a:hover{ - text-decoration: none; - color: #ffffff; - background-color: #2a9fd6; + +.dropdown-menu>li>a:hover { + text-decoration: none; + color: #ffffff; + background-color: #2a9fd6; } -.navbar-default .navbar-nav > .open > a { - background-color: #333; + +.navbar-default .navbar-nav>.open>a { + background-color: #333; } -.btn-circle{ - font-size: 16px; - border-radius: 15px 15px 15px 15px; + +.btn-circle { + font-size: 16px; + border-radius: 15px 15px 15px 15px; } -.btn-primary{ - background-color: #2a9fd6; + +.btn-primary { + background-color: #2a9fd6; } #content { - background-color: #1A237E; - background-position: center center; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - height: 100vh; + background-color: #1A237E; + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 100vh; } + hr { - margin-bottom: 30px; + margin-bottom: 30px; } @media (min-width: 992px) { - #content-row { - margin-top:12em; - margin-bottom:7em; - } + #content-row { + margin-top: 12em; + margin-bottom: 7em; + } - #bark-description { - display: block; - } + #bark-description { + display: block; + } - #bark-description-2 { - display: none; - } + #bark-description-2 { + display: none; + } } @media (max-width:991px) { - #content-row { - margin-top:0em; - margin-bottom:0em; - } + #content-row { + margin-top: 0em; + margin-bottom: 0em; + } - #bark-description { - display: none; - } + #bark-description { + display: none; + } - #bark-description-2 { - margin-top: 3em; - display: block; - } + #bark-description-2 { + margin-top: 3em; + display: block; + } } -#bark-description p, #bark-description-2 p { - margin-left: 100px; - color: #ffffff; - font-size: 20px; +#bark-description p, +#bark-description-2 p { + margin-left: 100px; + color: #ffffff; + font-size: 20px; } #content-row { - padding: 3em 0; - background-color: rgba(255, 255, 255, 0.2); + padding: 3em 0; + background-color: rgba(255, 255, 255, 0.2); } #loginMsg { - display: none; - background-color: #F1D7D7; - color: #A95252; - padding: 8px 12px; - border-radius: 4px; - text-align:center; + display: none; + background-color: #F1D7D7; + color: #A95252; + padding: 8px 12px; + border-radius: 4px; + text-align: center; } - - - http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/app.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.component.html b/ui/angular/src/app/app.component.html index a5dc4ed..f6781d0 100644 --- a/ui/angular/src/app/app.component.html +++ b/ui/angular/src/app/app.component.html @@ -62,7 +62,7 @@ under the License. <div class="col-md-9 col-xs-12"> <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 30px; z-index:99" (click)="goback();"><span style="margin-bottom:20px;">Back</span></button> <!-- main content goes here--> - <div id="mainWindow" (window:resize)="onResize($event)" class="row" ng-view style="padding-right: 10px;"> + <div id="mainWindow" (window:resize)="onResize($event)" class="row y-scrollable" ng-view style="padding-right: 10px;"> <router-outlet></router-outlet> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/app.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.component.ts b/ui/angular/src/app/app.component.ts index 3f89ff0..f3a916b 100644 --- a/ui/angular/src/app/app.component.ts +++ b/ui/angular/src/app/app.component.ts @@ -14,65 +14,61 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component ,Directive,ViewContainerRef,OnInit,AfterViewChecked} from '@angular/core'; -// import { RouterModule, Routes } from '@angular/router'; -import { Router} from "@angular/router"; -import { HttpClient} from '@angular/common/http'; -import * as $ from 'jquery'; -import { ServiceService} from './service/service.service'; -import { UserService} from './service/user.service'; -import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common'; - - -// import jQuery from 'jquery'; - -// import 'bootstrap/dist/js/bootstrap.min.js'; - +import { Component, Directive, ViewContainerRef, OnInit, AfterViewChecked } from "@angular/core"; +import { Router } from "@angular/router"; +import { HttpClient } from "@angular/common/http"; +import * as $ from "jquery"; +import { ServiceService } from "./service/service.service"; +import { UserService } from "./service/user.service"; +import { Location, LocationStrategy, HashLocationStrategy } from "@angular/common"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], - providers:[ServiceService,UserService] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"], + providers: [ServiceService, UserService] }) -export class AppComponent implements AfterViewChecked, OnInit{ - title = 'app'; - ntAccount : string; - timestamp:Date; +export class AppComponent implements AfterViewChecked, OnInit { + title = "app"; + ntAccount: string; + timestamp: Date; fullName: string; - onResize(event){ + onResize(event) { this.resizeMainWindow(); - } - goback(){ + goback() { this.location.back(); } - ngOnInit(){ + ngOnInit() { this.ntAccount = this.userService.getCookie("ntAccount"); this.fullName = this.userService.getCookie("fullName"); } - constructor(private router:Router,private http:HttpClient,private location: Location,public serviceService:ServiceService,public userService:UserService){ - - } - resizeMainWindow(){ - // $('#mainWindow').height(window.innerHeight-56-90); - $('#mainWindow').height(window.innerHeight-56-20); + constructor( + private router: Router, + private http: HttpClient, + private location: Location, + public serviceService: ServiceService, + public userService: UserService + ) {} + resizeMainWindow() { + $("#mainWindow").height(window.innerHeight - 56 - 20); } - logout(){ + logout() { this.ntAccount = undefined; - this.userService.setCookie('ntAccount', undefined, -1); - this.userService.setCookie('fullName', undefined, -1); - this.router.navigate(['login']); + this.userService.setCookie("ntAccount", undefined, -1); + this.userService.setCookie("fullName", undefined, -1); + this.router.navigate(["login"]); window.location.reload(); // window.location.replace ('login'); - } - ngAfterViewChecked(){ + } + ngAfterViewChecked() { this.resizeMainWindow(); - $('#rightbar').css({ - height: $('#mainWindow').height()+20 + $("#rightbar").css({ + height: $("#mainWindow").height() + 20 }); - $('#side-bar-metrics').css({ - height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 + $("#side-bar-metrics").css({ + height: + $("#mainContent").height() - $("#side-bar-stats").outerHeight() }); - } -} + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/app.module.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/app.module.ts b/ui/angular/src/app/app.module.ts index 4bb030b..7a26d6a 100644 --- a/ui/angular/src/app/app.module.ts +++ b/ui/angular/src/app/app.module.ts @@ -24,7 +24,6 @@ import { DataTableModule} from "angular2-datatable"; import { TreeModule } from 'angular-tree-component'; import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { AngularEchartsModule } from 'ngx-echarts'; -// import { MdDatepickerModule, MdNativeDateModule} from '@angular/material'; import { MatDatepickerModule, MatNativeDateModule} from '@angular/material'; import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common'; import { ToasterModule, ToasterService} from 'angular2-toaster'; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/dataasset/dataasset.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/dataasset/dataasset.component.css b/ui/angular/src/app/dataasset/dataasset.component.css index 0d004e6..694641e 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.css +++ b/ui/angular/src/app/dataasset/dataasset.component.css @@ -16,32 +16,30 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.icon{ +.icon { color: #fff; position: absolute; left: 50%; top: 20%; } -.co{ - border-collapse: separate; +.co { + border-collapse: separate; } .co > tbody > tr:nth-of-type(even) { - background-color: #1f1f1f; + background-color: #1f1f1f; } .co > tbody > tr:nth-of-type(odd) { - background-color: #080808; + background-color: #080808; } -.table-striped > tbody > tr{ - background-color: #1f1f1f; - border: 1px solid transparent; +.table-striped > tbody > tr { + background-color: #1f1f1f; + border: 1px solid transparent; } .table > tbody + tbody { - border: 1px solid transparent; + border: 1px solid transparent; } -.reco > tbody:nth-of-type(even) >tr { - background-color: #080808; -} - - +.reco > tbody:nth-of-type(even) > tr { + background-color: #080808; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/dataasset/dataasset.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/dataasset/dataasset.component.ts b/ui/angular/src/app/dataasset/dataasset.component.ts index 877768e..c675703 100644 --- a/ui/angular/src/app/dataasset/dataasset.component.ts +++ b/ui/angular/src/app/dataasset/dataasset.component.ts @@ -46,23 +46,6 @@ export class DataassetComponent implements OnInit { } } constructor(private http:HttpClient,public serviceService:ServiceService) { } - parseDate(time){ - time = new Date(time); - var year = time.getFullYear(); - var month = time.getMonth() + 1; - var day = time.getDate(); - var hour = time.getHours(); - if(hour<10) - hour = '0' + hour; - var minute = time.getMinutes(); - if(minute<10) - minute = '0' + minute; - var second = time.getSeconds(); - if(second<10) - second = '0' + second; - return ( year +'/'+ month + '/'+ day + ' '+ hour + ':' + minute + ':' + second); - } - ngOnInit() { var allDataassets = this.serviceService.config.uri.dataassetlist; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/health/health.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts index c08a9c0..37cadd5 100644 --- a/ui/angular/src/app/health/health.component.ts +++ b/ui/angular/src/app/health/health.component.ts @@ -16,201 +16,213 @@ 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 {GetMetricService} from '../service/get-metric.service' -import {ServiceService} from '../service/service.service'; - -import * as $ from 'jquery'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { ServiceService } from "../service/service.service"; +import * as $ from "jquery"; @Component({ - selector: 'app-health', - templateUrl: './health.component.html', - styleUrls: ['./health.component.css'], - // providers:[GetMetricService] + selector: "app-health", + templateUrl: "./health.component.html", + styleUrls: ["./health.component.css"] }) export class HealthComponent implements OnInit { - - constructor(private http: HttpClient,private router:Router,public serviceService:ServiceService) { }; - chartOption:object; - // var formatUtil = echarts.format; - dataData = []; + constructor( + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) {} + chartOption: object; finalData = []; - oData = []; - // originalData = []; - originalData:any; - mesWithJob:any; - // var formatUtil = echarts.format; + mesWithJob: any; - - onChartClick($event){ - if($event.data.name){ - this.router.navigate(['/detailed/'+$event.data.name]); + onChartClick($event) { + if ($event.data.name) { + this.router.navigate(["/detailed/" + $event.data.name]); window.location.reload(); } } resizeTreeMap() { - $('#chart1').height( $('#mainWindow').height() - $('.bs-component').outerHeight() ); - }; + $("#chart1").height( + $("#mainWindow").height() - $(".bs-component").outerHeight() + ); + } parseData(data) { var sysId = 0; var metricId = 0; var result = []; - for(let sys of data){ + for (let sys of data) { var item = { - 'id':'', - 'name':'', - children:[] + id: "", + name: "", + children: [] }; - item.id = 'id_'+sysId; + item.id = "id_" + sysId; item.name = sys.name; if (sys.metrics != undefined) { item.children = []; - for(let metric of sys.metrics){ + for (let metric of sys.metrics) { var itemChild = { - id: 'id_' + sysId + '_' + metricId, + id: "id_" + sysId + "_" + metricId, name: metric.name, value: 1, dq: metric.dq, sysName: sys.name, itemStyle: { normal: { - color: '#4c8c6f' + color: "#4c8c6f" } - }, + } }; if (metric.dqfail == 1) { - itemChild.itemStyle.normal.color = '#ae5732'; + itemChild.itemStyle.normal.color = "#ae5732"; } else { - itemChild.itemStyle.normal.color = '#005732'; + itemChild.itemStyle.normal.color = "#005732"; } item.children.push(itemChild); metricId++; } } result.push(item); - sysId ++; + sysId++; } return result; - }; + } - getLevelOption() { - return [ - { - itemStyle: { - normal: { - borderWidth: 0, - gapWidth: 6, - borderColor: '#000' - } - } - }, - { - itemStyle: { - normal: { - gapWidth: 1, - borderColor: '#fff' - } - } - } - ]; - }; + getLevelOption() { + return [ + { + itemStyle: { + normal: { + borderWidth: 0, + gapWidth: 6, + borderColor: "#000" + } + } + }, + { + itemStyle: { + normal: { + gapWidth: 1, + borderColor: "#fff" + } + } + } + ]; + } renderTreeMap(res) { var data = this.parseData(res); var option = { - title: { - text: 'Data Quality Metrics Heatmap', - left: 'center', - textStyle:{ - color:'white' - } - }, - backgroundColor: 'transparent', - tooltip: { - formatter: function(info) { - var dqFormat = info.data.dq>100?'':'%'; - if(info.data.dq) - return [ - '<span style="font-size:1.8em;">' + info.data.sysName + ' > </span>', - '<span style="font-size:1.5em;">' + info.data.name+'</span><br>', - '<span style="font-size:1.5em;">dq : ' + info.data.dq.toFixed(2) + dqFormat + '</span>' - ].join(''); - } - }, - series: [ - { - name:'System', - type:'treemap', - itemStyle: { - normal: { - borderColor: '#fff' - } - }, - levels: this.getLevelOption(), - breadcrumb: { - show: false - }, - roam: false, - nodeClick: 'link', - data: data, - width: '95%', - bottom : 0 + title: { + text: "Data Quality Metrics Heatmap", + left: "center", + textStyle: { + color: "white" + } + }, + backgroundColor: "transparent", + tooltip: { + formatter: function(info) { + var dqFormat = info.data.dq > 100 ? "" : "%"; + if (info.data.dq) + return [ + '<span style="font-size:1.8em;">' + + info.data.sysName + + " > </span>", + '<span style="font-size:1.5em;">' + + info.data.name + + "</span><br>", + '<span style="font-size:1.5em;">dq : ' + + info.data.dq.toFixed(2) + + dqFormat + + "</span>" + ].join(""); + } + }, + series: [ + { + name: "System", + type: "treemap", + itemStyle: { + normal: { + borderColor: "#fff" } - ] + }, + levels: this.getLevelOption(), + breadcrumb: { + show: false + }, + roam: false, + nodeClick: "link", + data: data, + width: "95%", + bottom: 0 + } + ] }; this.resizeTreeMap(); this.chartOption = option; - }; - + } - renderData(){ + renderData() { let url_dashboard = this.serviceService.config.uri.dashboard; this.http.get(url_dashboard).subscribe(data => { - this.mesWithJob = data; + this.mesWithJob = JSON.parse(JSON.stringify(data)); var mesNode = null; - for(let mesName in this.mesWithJob){ + for (let mesName in this.mesWithJob) { + var jobs = this.mesWithJob[mesName]; mesNode = new Object(); mesNode.name = mesName; var node = null; node = new Object(); node.name = mesName; node.dq = 0; - var metricNode = { - 'name':'', - 'timestamp':'', - 'dq':0, - 'details':[] - } node.metrics = []; var metricData = this.mesWithJob[mesName][0]; - if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){ - metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues)); - metricNode.name = metricData.name; - metricNode.timestamp = metricData.metricValues[0].value.tmst; - metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100; - node.metrics.push(metricNode); + if ( + metricData.metricValues[0] != undefined && + metricData.metricValues[0].value.matched != undefined + ) { + for(let i=0;i<jobs.length;i++){ + var metricNode = { + name: "", + timestamp: "", + dq: 0, + details: [] + }; + metricNode.details = JSON.parse( + JSON.stringify(jobs[i].metricValues) + ); + metricNode.name = jobs[i].name; + metricNode.timestamp = jobs[i].metricValues[0].value.tmst; + metricNode.dq = + jobs[i].metricValues[0].value.matched / + jobs[i].metricValues[0].value.total * + 100; + node.metrics.push(metricNode); + } } - this.finalData.push(node); + this.finalData.push(node); } var self = this; setTimeout(function function_name(argument) { self.renderTreeMap(self.finalData); - },1000) + }, 1000); }); - }; + } ngOnInit() { var self = this; this.renderData(); - // this.renderTreeMap(this.getMetricService.renderData()); - // setTimeout(function function_name(argument) { - // // body... - // self.renderTreeMap(self.renderData()); + // this.renderTreeMap(this.getMetricService.renderData()); + // setTimeout(function function_name(argument) { + // // body... + // self.renderTreeMap(self.renderData()); - // }) - }; -} + // }) + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/job/create-job/create-job.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.css b/ui/angular/src/app/job/create-job/create-job.component.css index 4f382c9..6288f12 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.css +++ b/ui/angular/src/app/job/create-job/create-job.component.css @@ -16,21 +16,21 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.job{ - font-size: 20px; +.job { + font-size: 20px; } -.info{ - color: #b2c831; +.info { + color: #b2c831; } -.btn-o{ - background:0 0!important; +.btn-o { + background: 0 0 !important; } -legend{ +legend { background-color: #000; - color: #007AFF; + color: #007aff; left: 10px; padding: 0 10px; position: absolute; @@ -39,8 +39,8 @@ legend{ color: #fff; margin-bottom: 20px; font-size: 21px; - width: auto!important; - border: none!important; + width: auto !important; + border: none !important; } fieldset { border: 1px solid #e6e8e8; @@ -53,38 +53,38 @@ fieldset { height: 320px; } -.formStep{ +.formStep { background-color: #000; } -.setcolor{ - color: #b2c831; +.setcolor { + color: #b2c831; } -.setgrey{ - color: #888888; +.setgrey { + color: #888888; } -.mat-calendar-table{ - height: 400px; +.mat-calendar-table { + height: 400px; } -.mat-datepicker-content{ - overflow-y: auto; +.mat-datepicker-content { + overflow-y: auto; } -#md-datepicker-0{ - height:250px; +#md-datepicker-0 { + height: 250px; } -.center{ +.center { margin-left: 5%; } -.range{ - display:block; +.range { + display: block; width: 20%; height: 10%; margin-bottom: 5px; } -.setborder{ - border:2px solid; +.setborder { + border: 2px solid; border-radius: 5px; width: 8%; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/job/create-job/create-job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.html b/ui/angular/src/app/job/create-job/create-job.component.html index 50f1b08..7bf5e37 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.html +++ b/ui/angular/src/app/job/create-job/create-job.component.html @@ -81,8 +81,7 @@ under the License. </p> <div class="col-md-11 col-lg-11 col-sm-11 center"> begin : - <input type="number" class="setborder" value="{{ someKeyboard[i][0] }}" [(ngModel)]="someKeyboard[i][0]" max="0" name="begin{{i}}" (ngModelChange)="changeRange(index,someKeyboard[i][0],i)"> - end : + <input type="number" class="setborder" value="{{ someKeyboard[i][0] }}" [(ngModel)]="someKeyboard[i][0]" max="0" name="begin{{i}}" (ngModelChange)="changeRange(index,someKeyboard[i][0],i)"> end : <input type="number" class="setborder" max="0" value="{{ someKeyboard[i][1] }}" [(ngModel)]="someKeyboard[i][1]" name="end{{i}}" (ngModelChange)="changeRange(1,$event,i)"> </div> <nouislider class="col-md-11 col-lg-11 col-sm-11 center" id="slider{{i}}" #sliderRef name="slider{{i}}" [config]="someKeyboardConfig[i]" [(ngModel)]="someKeyboard[i]" (ngModelChange)="rangeChange($event,i)" (keyup)="blinkKeyupLabel()" (keydown)="blinkKeydownLabel()" style="margin-bottom: 5rem"></nouislider> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/job/create-job/create-job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.ts b/ui/angular/src/app/job/create-job/create-job.component.ts index 44c9585..c82c7ce 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.ts +++ b/ui/angular/src/app/job/create-job/create-job.component.ts @@ -16,58 +16,59 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, AfterViewChecked, ViewChildren } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { FormsModule } from '@angular/forms'; -import { MaxLengthValidator } from '@angular/forms'; -import { NgControlStatus ,Validators } from '@angular/forms'; -import { PatternValidator } from '@angular/forms'; -// import {MdDatepickerModule} from '@angular/material'; -import { MatDatepickerModule } from '@angular/material'; -import { ServiceService } from '../../service/service.service'; -import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { ToasterModule, ToasterService, ToasterConfig } from 'angular2-toaster'; -import * as $ from 'jquery'; -import { HttpClient,HttpParams } from '@angular/common/http'; -import { Router } from "@angular/router"; -import { NouisliderModule } from 'ng2-nouislider'; +import { Component, OnInit, AfterViewChecked, ViewChildren } from "@angular/core"; +import { FormControl } from "@angular/forms"; +import { FormsModule } from "@angular/forms"; +import { MaxLengthValidator } from "@angular/forms"; +import { NgControlStatus, Validators } from "@angular/forms"; +import { PatternValidator } from "@angular/forms"; +import { MatDatepickerModule } from "@angular/material"; +import { ServiceService } from "../../service/service.service"; +import { AngularMultiSelectModule } from "angular2-multiselect-dropdown/angular2-multiselect-dropdown"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster"; +import * as $ from "jquery"; +import { HttpClient, HttpParams } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { NouisliderModule } from "ng2-nouislider"; @Component({ - selector: 'app-create-job', - templateUrl: './create-job.component.html', - providers:[ServiceService], - styleUrls: ['./create-job.component.css'] + selector: "app-create-job", + templateUrl: "./create-job.component.html", + providers: [ServiceService], + styleUrls: ["./create-job.component.css"] }) export class CreateJobComponent implements OnInit, AfterViewChecked { - - constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { + constructor( + toasterService: ToasterService, + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) { this.toasterService = toasterService; - }; + } - @ViewChildren('sliderRef') sliderRefs; + @ViewChildren("sliderRef") sliderRefs; someKeyboard = []; someKeyboardConfig = []; - config:any; - baseline :string; - cronExp :string; + config: any; + baseline: string; + cronExp: string; dropdownList = []; currentStep = 1; maskOpen = false; keyupLabelOn = false; keydownLabelOn = false; - periodTime :number; - createResult = ''; - jobname : string; - Measures:object; - measureinfo:object; - measure:string; - measureid:any; + createResult = ""; + jobname: string; + Measures: object; + measure: string; + measureid: any; - newJob={ + newJob = { "cron.expression": "", - "measure.id":"", + "measure.id": "", "job.name": "", "cron.time.zone": "", // "cron.time.zone": "GMT+8:00", @@ -91,7 +92,7 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { // } // } ] - } + }; beginTime = []; timeLength = []; @@ -100,37 +101,38 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { private toasterService: ToasterService; - public visible = false; public visibleAnimate = false; public hide(): void { this.visibleAnimate = false; - setTimeout(() => this.visible = false, 300); + setTimeout(() => (this.visible = false), 300); + this.originBegin = []; + this.originLength = []; } public onContainerClicked(event: MouseEvent): void { - if ((<HTMLElement>event.target).classList.contains('modal')) { + if ((<HTMLElement>event.target).classList.contains("modal")) { this.hide(); } } - close(){ + close() { this.maskOpen = false; } - prev(){ - history.back(); + prev() { + history.back(); } - submit (form){ + submit(form) { if (!form.valid) { - this.toasterService.pop('error', 'Error!', 'Please complete the form!'); + this.toasterService.pop("error", "Error!", "Please complete the form!"); return false; } this.measureid = this.getMeasureId(); let time = new Date().getTimezoneOffset() / 60; - let timezone = 'GMT' + time + ':00'; + let timezone = "GMT" + time + ":00"; this.newJob = { "job.name": this.jobname, "measure.id": this.measureid, @@ -142,168 +144,186 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { // "repeat": 2 // }, "data.segments": [ - // { - // "data.connector.index": "source[0]", - // "segment.range": { - // "begin": "", - // "length": "" - // } - // }, - // { - // "data.connector.index": "target[0]", - // "segment.range": { - // "begin": "", - // "length": "" - // } - // } + // { + // "data.connector.index": "source[0]", + // "segment.range": { + // "begin": "", + // "length": "" + // } + // }, + // { + // "data.connector.index": "target[0]", + // "segment.range": { + // "begin": "", + // "length": "" + // } + // } ] - } - for(let i = 0;i < this.dropdownList.length;i++){ - var length = this.someKeyboard[i][1]-this.someKeyboard[i][0]; - this.newJob['data.segments'].push({ + }; + for (let i = 0; i < this.dropdownList.length; i++) { + var length = this.someKeyboard[i][1] - this.someKeyboard[i][0]; + this.newJob["data.segments"].push({ "data.connector.name": this.dropdownList[i].connectorname, - "as.baseline":true, + "as.baseline": true, "segment.range": { - "begin": this.someKeyboard[i][0], - "length": length + begin: this.someKeyboard[i][0], + length: length } }); this.originBegin.push(this.someKeyboard[i][0]); this.originLength.push(length); - }; - if(this.dropdownList.length == 2){ - delete this.newJob['data.segments'][1]['as.baseline']; + } + if (this.dropdownList.length == 2) { + delete this.newJob["data.segments"][1]["as.baseline"]; } this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + setTimeout(() => (this.visibleAnimate = true), 100); } save() { var addJobs = this.serviceService.config.uri.addJobs; - this.http - .post(addJobs,this.newJob) - .subscribe(data => { - console.log(data['code']); - if(data['code'] != 205){ - this.toasterService.pop('error','Error!','Error when creating job'); - return false; - }else{ - this.createResult = data['results']; + this.http.post(addJobs, this.newJob).subscribe( + data => { + this.createResult = data["results"]; this.hide(); - this.router.navigate(['/jobs']); + this.router.navigate(["/jobs"]); + }, + err => { + let response = JSON.parse(err.error); + if(response.code === '40004'){ + this.toasterService.pop("error", "Error!", "Job name already exists!"); + } else { + this.toasterService.pop("error", "Error!", "Error when creating job"); + } + console.log("Error when creating job"); } - }, - err => { - console.log('Error when creating job'); - }); + ); } - onResize(event){ - this.resizeWindow(); + onResize(event) { + this.resizeWindow(); } - resizeWindow(){ - var stepSelection = '.formStep'; + resizeWindow() { + var stepSelection = ".formStep"; $(stepSelection).css({ - height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() + height: + window.innerHeight - + $(stepSelection).offset().top - + $("#footerwrap").outerHeight() }); - $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 200); - $('.y-scrollable').css({ - 'height': $('fieldset').height() + $("fieldset").height( + $(stepSelection).height() - + $(stepSelection + ">.stepDesc").height() - + $(".btn-container").height() - + 200 + ); + $(".y-scrollable").css({ + height: $("fieldset").height() }); - $('#data-asset-pie').css({ - height: $('#data-asset-pie').parent().width(), - width: $('#data-asset-pie').parent().width() + $("#data-asset-pie").css({ + height: $("#data-asset-pie") + .parent() + .width(), + width: $("#data-asset-pie") + .parent() + .width() }); } - setHeight(){ - $('#md-datepicker-0').height(250); + setHeight() { + $("#md-datepicker-0").height(250); } - getMeasureId(){ - for(let index in this.Measures){ - if(this.measure == this.Measures[index].name){ + getMeasureId() { + for (let index in this.Measures) { + if (this.measure == this.Measures[index].name) { return this.Measures[index].id; } } } - onChange(measure){ + onChange(measure) { this.dropdownList = []; - for(let index in this.Measures){ + for (let index in this.Measures) { var map = this.Measures[index]; - if(measure == map.name){ + if (measure == map.name) { var source = map["data.sources"]; - for(let i = 0;i < source.length;i++){ + for (let i = 0; i < source.length; i++) { var details = source[i].connectors; - for(let j = 0;j < details.length;j++){ - console.log(details[j]['data.unit']); - if(details[j]['data.unit']!=undefined){ - var table = details[j].config.database+'.'+details[j].config['table.name']; - var size = details[j]['data.unit']; - var connectorname = details[j]['name']; - var detail = {"id":i+1,"name":table,"size":size,"connectorname":connectorname}; + for (let j = 0; j < details.length; j++) { + if (details[j]["data.unit"] != undefined) { + var table = + details[j].config.database + + "." + + details[j].config["table.name"]; + var size = details[j]["data.unit"]; + var connectorname = details[j]["name"]; + var detail = { + id: i + 1, + name: table, + size: size, + connectorname: connectorname + }; this.dropdownList.push(detail); } } } } } - for(let i = 0;i < this.dropdownList.length;i++){ - this.someKeyboard[i] = [-1,0]; + for (let i = 0; i < this.dropdownList.length; i++) { + this.someKeyboard[i] = [-1, 0]; this.someKeyboardConfig[i] = JSON.parse(JSON.stringify(this.config)); - if(this.sliderRefs._results[i]){ + if (this.sliderRefs._results[i]) { this.sliderRefs._results[i].slider.updateOptions({ range: { - 'min': -10, - 'max': 0 + min: -10, + max: 0 } }); } } } - - changeRange(index,value,i){ + changeRange(index, value, i) { let newRange = []; newRange[i] = [this.someKeyboard[i][0], this.someKeyboard[i][1]]; newRange[i][index] = value; - this.updateSliderRange(value,i); + this.updateSliderRange(value, i); this.someKeyboard[i] = newRange[i]; } - rangeChange(evt,i){ + rangeChange(evt, i) { var oldmin = this.sliderRefs._results[i].config.range.min; - if((evt[0] - oldmin)<=2){ + if (evt[0] - oldmin <= 2) { this.sliderRefs._results[i].slider.updateOptions({ range: { - 'min': oldmin-10, - 'max': 0 + min: oldmin - 10, + max: 0 } }); } - if((evt[0] - oldmin)>=13){ + if (evt[0] - oldmin >= 13) { this.sliderRefs._results[i].slider.updateOptions({ range: { - 'min': oldmin+10, - 'max': 0 + min: oldmin + 10, + max: 0 } }); } this.someKeyboard[i] = evt; } - updateSliderRange(value,i){ + updateSliderRange(value, i) { // setTimeout(() => { var oldmin = this.sliderRefs._results[i].config.range.min; - var oldmax = this.sliderRefs._results[i].config.range.max - var newmin = Math.floor(value/10); - if((value - oldmin)<=3){ + var oldmax = this.sliderRefs._results[i].config.range.max; + var newmin = Math.floor(value / 10); + if (value - oldmin <= 3) { this.sliderRefs._results[i].slider.updateOptions({ range: { - 'min': newmin*10, - 'max': 0 + min: newmin * 10, + max: 0 } }); } @@ -326,31 +346,30 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { ngOnInit() { var allModels = this.serviceService.config.uri.allModels; - this.http.get(allModels).subscribe(data =>{ + this.http.get(allModels).subscribe(data => { this.Measures = data; }); - this.config={ - behaviour: 'drag', + this.config = { + behaviour: "drag", connect: true, start: [-10, 0], - keyboard: true, // same as [keyboard]="true" + keyboard: true, // same as [keyboard]="true" step: 1, - pageSteps: 0, // number of page steps, defaults to 10 + pageSteps: 0, // number of page steps, defaults to 10 range: { min: -10, max: 0 }, - pips:{ - mode: 'steps', + pips: { + mode: "steps", density: 10, // values: 1, stepped: true } - } + }; } - - 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/job/job.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.css b/ui/angular/src/app/job/job.component.css index 268b43e..d8e7034 100644 --- a/ui/angular/src/app/job/job.component.css +++ b/ui/angular/src/app/job/job.component.css @@ -16,40 +16,42 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -/*.table-striped > tbody > tr{ - background-color: #1f1f1f; -}*/ -.table-striped > tbody > tr:nth-of-type(even) { - background-color: #1f1f1f; +.table-striped>tbody>tr:nth-of-type(even) { + background-color: #1f1f1f; } -.table-striped > tbody > tr:nth-of-type(odd) { - background-color: #080808; + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: #080808; } -.reco > tbody:nth-of-type(odd) >tr { - background-color: #1f1f1f; + +.reco>tbody:nth-of-type(odd)>tr { + background-color: #1f1f1f; } -.co{ + +.co { border-collapse: separate; } -.table > tbody + tbody { - border-top: 1px solid transparent; + +.table>tbody+tbody { + border-top: 1px solid transparent; } -a{ - color: white; + +a { + color: white; } -.icon{ +.icon { color: #fff; position: absolute; left: 50%; top: 20%; } -.po{ - cursor: pointer; -} -#pagination .pagination{ - margin:20px 0 0 0 ; +.po { + cursor: pointer; } +#pagination .pagination { + margin: 20px 0 0 0; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/job/job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html index d352054..28a00a7 100644 --- a/ui/angular/src/app/job/job.component.html +++ b/ui/angular/src/app/job/job.component.html @@ -19,7 +19,9 @@ under the License. <div> <p> <a routerLink="/createjob" class="btn btn-primary btn-o btn-wide"> - <i class="fa fa-plus"></i> Create Job</a> + <i class="fa fa-plus"></i> + Create Job + </a> </p> <div id="modelContainer"> <table class="table table-striped reco" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> @@ -62,8 +64,8 @@ under the License. <td> <a (click)="remove(row)" title="delete" style="text-decoration:none"> - <i class="fa fa-trash-o po"></i> - </a> + <i class="fa fa-trash-o po"></i> + </a> </td> </tr> <tr *ngIf="row.showDetail"> @@ -111,6 +113,7 @@ under the License. <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <toaster-container></toaster-container> <h4 class="modal-title">Delete the job with the below information?</h4> </div> <div class="modal-body"> @@ -128,23 +131,15 @@ under the License. Job Name: </label> <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.jobName}} + {{deletedRow .jobName}} </div> </div> <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Source Pattern: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.sourcePattern}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Target Pattern: + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Previous Fire Time: </label> <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.targetPattern}} + {{(deletedRow.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} </div> </div> <div class="row"> @@ -157,18 +152,10 @@ under the License. </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> - Interval: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{deletedRow.interval}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Group: + Cron Expression: </label> <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{deletedRow.groupName}} + {{deletedRow.cronExpression}} </div> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/job/job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/job.component.ts b/ui/angular/src/app/job/job.component.ts index 3ab852a..f394527 100644 --- a/ui/angular/src/app/job/job.component.ts +++ b/ui/angular/src/app/job/job.component.ts @@ -16,148 +16,111 @@ 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 {ServiceService} from '../service/service.service'; - -import { DatePipe } from '@angular/common'; -import { Router} from "@angular/router"; -import * as $ from 'jquery'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { DataTableModule } from "angular2-datatable"; +import { ServiceService } from "../service/service.service"; +import { DatePipe } from "@angular/common"; +import { Router } from "@angular/router"; +import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster"; +import * as $ from "jquery"; @Component({ - selector: 'app-job', - templateUrl: './job.component.html', - providers:[ServiceService], - styleUrls: ['./job.component.css'] + selector: "app-job", + templateUrl: "./job.component.html", + providers: [ServiceService], + styleUrls: ["./job.component.css"] }) export class JobComponent implements OnInit { - // results:object[]; - allInstances:any; - results:any; - deletedBriefRow:object; - jobName:string; + allInstances: any; + results: any; + jobName: string; public visible = false; public visibleAnimate = false; - oldindex:number; - - - deletedRow : object; - sourceTable :string; - targetTable :string; - deleteId : string; - deleteIndex:number; - deleteGroup :string; - deleteJob :string; + oldindex: number; + deletedRow: object; + sourceTable: string; + targetTable: string; + deleteId: string; + deleteIndex: number; + private toasterService: ToasterService; - - - constructor(private http:HttpClient,private router:Router,public serviceService:ServiceService) { }; + constructor( + toasterService: ToasterService, + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) { + this.toasterService = toasterService; + } public hide(): void { this.visibleAnimate = false; - setTimeout(() => this.visible = false, 300); + setTimeout(() => (this.visible = false), 300); } public onContainerClicked(event: MouseEvent): void { - if ((<HTMLElement>event.target).classList.contains('modal')) { + if ((<HTMLElement>event.target).classList.contains("modal")) { this.hide(); } } - - // resultData = [{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"},{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"},{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"}]; - remove(row){ + + remove(row) { this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + setTimeout(() => (this.visibleAnimate = true), 100); this.deletedRow = row; this.deleteIndex = this.results.indexOf(row); - this.deletedBriefRow = row; - this.deleteGroup = row.groupName; - this.deleteJob = row.jobName; this.deleteId = row.jobId; - console.log(this.deleteId); } - confirmDelete(){ + confirmDelete() { let deleteJob = this.serviceService.config.uri.deleteJob; - // let deleteUrl = deleteJob + 'ï¼' + this.deleteGroup + '&jobName=' + this.deleteJob; - let deleteUrl = deleteJob + '/' + this.deleteId; - this.http.delete(deleteUrl).subscribe(data => { - let deleteResult:any = data; - if(deleteResult.code==206){ - var self = this; + let deleteUrl = deleteJob + "/" + this.deleteId; + this.http.delete(deleteUrl).subscribe( + data => { + let self = this; self.hide(); - setTimeout(function () { - self.results.splice(self.deleteIndex,1); - },0); + setTimeout(function() { + self.results.splice(self.deleteIndex, 1); + }, 0); + }, + err => { + this.toasterService.pop("error", "Error!", "Failed to delete job!"); + console.log("Error when deleting job"); } - }, - err =>{ - console.log('Error when deleting record'); + ); + } - }); - }; - - showInstances(row){ - if(row.showDetail){ - row.showDetail = !row.showDetail; + showInstances(row) { + if (row.showDetail) { + row.showDetail = !row.showDetail; return; } - let index = this.results.indexOf(row); - if (this.oldindex!=undefined &&this.oldindex != index){ - this.results[this.oldindex].showDetail = false;} + let index = this.results.indexOf(row); + if (this.oldindex != undefined && this.oldindex != index) { + this.results[this.oldindex].showDetail = false; + } let getInstances = this.serviceService.config.uri.getInstances; - let getInstanceUrl = getInstances+ '?jobId=' + row.jobId +'&page='+'0'+'&size='+'200'; - this.http.get(getInstanceUrl).subscribe(data =>{ - row.showDetail = !row.showDetail; - this.allInstances = data; - setTimeout(function(){ - // console.log($('.pagination')); - $('.pagination').css("marginBottom","-10px"); - },0); - - // this.source = new LocalDataSource(this.allInstances); - // this.source.load(this.allInstances); + let getInstanceUrl = getInstances + "?jobId=" + row.jobId + "&page=" + "0" + "&size=" + "200"; + this.http.get(getInstanceUrl).subscribe(data => { + row.showDetail = !row.showDetail; + this.allInstances = data; + setTimeout(function() { + $(".pagination").css("marginBottom", "-10px"); + }, 0); }); this.oldindex = index; } - // intervalFormat(second){ - // if(second<60) - // return (second + 's'); - // else if(second<3600) - // { - // if(second%60==0) - // return(second / 60 + 'min'); - // else - // return((second - second % 60) / 60 + 'min'+second % 60 + 's'); - // } - // else - // { - // if(second%3600==0) - // return ( second / 3600 + 'h'); - // else - // { - // second = (second - second % 3600) / 3600 + 'h'; - // var s = second % 3600; - // return ( second + (s-s%60)/60+'min'+s%60+'s'); - // } - // } - // } - - - ngOnInit():void { + ngOnInit(): void { var self = this; let allJobs = this.serviceService.config.uri.allJobs; - this.http.get(allJobs).subscribe(data =>{ - this.results = Object.keys(data).map(function(index){ - let job = data[index]; - job.showDetail = false; - // job.interval = self.intervalFormat(job.interval); - return job; - }); + this.http.get(allJobs).subscribe(data => { + this.results = Object.keys(data).map(function(index) { + let job = data[index]; + job.showDetail = false; + return job; + }); }); - // this.results = this.resultData; - - }; + } } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/login/login.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/login/login.component.css b/ui/angular/src/app/login/login.component.css index 3ad96c3..0091b44 100644 --- a/ui/angular/src/app/login/login.component.css +++ b/ui/angular/src/app/login/login.component.css @@ -16,68 +16,67 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -@import url('../../../node_modules/bootstrap/dist/css/bootstrap.css'); +@import url("../../../node_modules/bootstrap/dist/css/bootstrap.css"); #content { - background-color: #1A237E; - background-position: center center; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - height: 100vh; + background-color: #1a237e; + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 100vh; } hr { - margin-bottom: 30px; + margin-bottom: 30px; } @media (min-width: 992px) { + #content-row { + margin-top: 12em; + margin-bottom: 7em; + } - #content-row { - margin-top:12em; - margin-bottom:7em; - } + #bark-description { + display: block; + } - #bark-description { - display: block; - } - - #bark-description-2 { - display: none; - } + #bark-description-2 { + display: none; + } } -@media (max-width:991px) { - - #content-row { - margin-top:0em; - margin-bottom:0em; - } +@media (max-width: 991px) { + #content-row { + margin-top: 0em; + margin-bottom: 0em; + } - #bark-description { - display: none; - } + #bark-description { + display: none; + } - #bark-description-2 { - margin-top: 3em; - display: block; - } + #bark-description-2 { + margin-top: 3em; + display: block; + } } -#bark-description p, #bark-description-2 p { - margin-left: 100px; - color: #ffffff; - font-size: 20px; +#bark-description p, +#bark-description-2 p { + margin-left: 100px; + color: #ffffff; + font-size: 20px; } #content-row { - padding: 3em 0; - background-color: rgba(255, 255, 255, 0.2); + padding: 3em 0; + background-color: rgba(255, 255, 255, 0.2); } #loginMsg { - display: none; - background-color: #F1D7D7; - color: #A95252; - padding: 8px 12px; - border-radius: 4px; - text-align:center; + display: none; + background-color: #f1d7d7; + color: #a95252; + padding: 8px 12px; + border-radius: 4px; + text-align: center; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/login/login.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/login/login.component.ts b/ui/angular/src/app/login/login.component.ts index 54bc8cf..0c8d664 100644 --- a/ui/angular/src/app/login/login.component.ts +++ b/ui/angular/src/app/login/login.component.ts @@ -16,95 +16,98 @@ 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 { ServiceService} from '../service/service.service'; -import { UserService} from '../service/user.service'; -import { Router} from "@angular/router"; -import { HttpClient} from '@angular/common/http'; -import {LocationStrategy, HashLocationStrategy} from '@angular/common'; +import { Component, OnInit } from "@angular/core"; +import { ServiceService } from "../service/service.service"; +import { UserService } from "../service/user.service"; +import { Router } from "@angular/router"; +import { HttpClient } from "@angular/common/http"; +import { LocationStrategy, HashLocationStrategy } from "@angular/common"; @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'], - providers:[ServiceService,UserService] + selector: "app-login", + templateUrl: "./login.component.html", + styleUrls: ["./login.component.css"], + providers: [ServiceService, UserService] }) export class LoginComponent implements OnInit { - ntAccount : string; - timestamp:Date; + ntAccount: string; + timestamp: Date; fullName: string; - results:any; - constructor(private router:Router,private http:HttpClient,public serviceService:ServiceService,public userService:UserService){ - - } + results: any; + constructor( + private router: Router, + private http: HttpClient, + public serviceService: ServiceService, + public userService: UserService + ) {} loginBtnWait() { - $('#login-btn').addClass('disabled') - .text('Logging in......'); + $("#login-btn") + .addClass("disabled") + .text("Logging in......"); } loginBtnActive() { - $('#login-btn').removeClass('disabled') - .text('Log in'); + $("#login-btn") + .removeClass("disabled") + .text("Log in"); } showLoginFailed() { - $('#loginMsg').show() - .text('Login failed. Try again.'); + $("#loginMsg") + .show() + .text("Login failed. Try again."); } // resizeMainWindow(){ // $('#mainWindow').height(window.innerHeight-50); // } - submit(event){ - if(event.which == 13){//enter - event.preventDefault(); - $('#login-btn').click(); - $('#login-btn').focus(); - } + submit(event) { + if (event.which == 13) { + //enter + event.preventDefault(); + $("#login-btn").click(); + $("#login-btn").focus(); + } } - focus($event){ - $('#loginMsg').hide(); + focus($event) { + $("#loginMsg").hide(); } - - login(){ - var name = $('input:eq(0)').val(); - var password = $('input:eq(1)').val(); - var loginUrl = this.serviceService.config.uri.login; - this.loginBtnWait(); - this.http - .post(loginUrl,{username:name, password:password}) - .subscribe(data => { + + login() { + var name = $("input:eq(0)").val(); + var password = $("input:eq(1)").val(); + var loginUrl = this.serviceService.config.uri.login; + this.loginBtnWait(); + this.http.post(loginUrl, { username: name, password: password }).subscribe( + data => { this.results = data; - if(this.results.status == 0) - {//logon success - if($('input:eq(2)').prop('checked')){ - this.userService.setCookie('ntAccount', this.results.ntAccount, 30); - this.userService.setCookie('fullName', this.results.fullName, 30); - }else - { - this.userService.setCookie('ntAccount', this.results.ntAccount,0); - this.userService.setCookie('fullName', this.results.fullName,0); - } - this.loginBtnActive() - window.location.replace('/'); + if (this.results.status == 0) { + //logon success + if ($("input:eq(2)").prop("checked")) { + this.userService.setCookie("ntAccount", this.results.ntAccount, 30); + this.userService.setCookie("fullName", this.results.fullName, 30); + } else { + this.userService.setCookie("ntAccount", this.results.ntAccount, 0); + this.userService.setCookie("fullName", this.results.fullName, 0); } - else{ - this.showLoginFailed(); - this.loginBtnActive(); - }; - - }, - err => { + this.loginBtnActive(); + window.location.replace("/"); + } else { this.showLoginFailed(); this.loginBtnActive(); - }); - + } + }, + err => { + this.showLoginFailed(); + this.loginBtnActive(); + } + ); } - ngOnInit(){ - this.ntAccount = this.userService.getCookie("ntAccount"); - this.fullName = this.userService.getCookie("fullName"); - this.timestamp = new Date(); + ngOnInit() { + this.ntAccount = this.userService.getCookie("ntAccount"); + this.fullName = this.userService.getCookie("fullName"); + this.timestamp = new Date(); } -} +} \ 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/ac/ac.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.css b/ui/angular/src/app/measure/create-measure/ac/ac.component.css index 38ec745..a0d11bf 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.css +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.css @@ -16,104 +16,105 @@ 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 } -tree-root{ - color: #999; + +tree-root { + color: #999; } 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 } - http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/ac/ac.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.html b/ui/angular/src/app/measure/create-measure/ac/ac.component.html index f977161..1cf708c 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.html +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.html @@ -84,32 +84,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"> <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> @@ -146,27 +146,27 @@ under the License. <div style="margin-top:5px;"> <table st-table="schemaCollectionTarget" class="table table-striped"> <thead> - <tr style="background-color:#7D95CC"> - <th> - <input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /> - </th> - <th>Column Name</th> - <th>Type</th> - <th>Comment</th> - </tr> + <tr style="background-color:#7D95CC"> + <th> + <input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /> + </th> + <th>Column Name</th> + <th>Type</th> + <th>Comment</th> + </tr> </thead> <tbody> - <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.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 schemaCollectionTarget"> - <td> - <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected" /> - </td> - <td>{{row.name}}</td> - <td>{{row.type}}</td> - <td>{{row.comment}}</td> - </tr> + <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.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 schemaCollectionTarget"> + <td> + <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected" /> + </td> + <td>{{row.name}}</td> + <td>{{row.type}}</td> + <td>{{row.comment}}</td> + </tr> </tbody> </table> </div> @@ -196,27 +196,27 @@ under the License. <div class="container col-md-12 col-lg-12 col-sm-12"> <table class="table table-striped"> <thead> - <tr style="background-color:#7D95CC;font-size:20px"> - <th style="width:40%;">Target Fields</th> - <th style="width:10%;text-align:center">Map To</th> - <th style="width:40%;text-align:center">Source Fields</th> - </tr> + <tr style="background-color:#7D95CC;font-size:20px"> + <th style="width:40%;">Target Fields</th> + <th style="width:10%;text-align:center">Map To</th> + <th style="width:40%;text-align:center">Source Fields</th> + </tr> </thead> <tbody> - <tr *ngFor="let item of selectionTarget; let i=index"> - <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td> - <td style="text-align:center;"> - <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]"> - <option *ngFor="let func of matchFunctions">{{func}}</option> - </select> - </td> - <td> - <select class="form-control" [(ngModel)]='mappings[i]' name="mappings{{i}}" (ngModelChange)="addMapping($event,i)" value="mappings[i]"> - <option *ngFor="let itemSrc of selection" [ngValue]="itemSrc"> - {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> - </select> - </td> - </tr> + <tr *ngFor="let item of selectionTarget; let i=index"> + <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td> + <td style="text-align:center;"> + <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]"> + <option *ngFor="let func of matchFunctions">{{func}}</option> + </select> + </td> + <td> + <select class="form-control" [(ngModel)]='mappings[i]' name="mappings{{i}}" (ngModelChange)="addMapping($event,i)" value="mappings[i]"> + <option *ngFor="let itemSrc of selection" [ngValue]="itemSrc"> + {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> + </select> + </td> + </tr> </tbody> </table> <p>
