You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2018/01/31 08:32:07 UTC
[4/4] incubator-griffin git commit: Format code and add scroll bar in
measuer view
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 <12...@qq.com>
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 <12...@qq.com>
Authored: Wed Jan 31 16:31:57 2018 +0800
Committer: Lionel Liu <bh...@163.com>
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>