Repository: incubator-griffin Updated Branches: refs/heads/master fb569ad1e -> e70347107
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/service/chart.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/chart.service.ts b/ui/angular/src/app/service/chart.service.ts index 9ae6dcd..bdf6530 100644 --- a/ui/angular/src/app/service/chart.service.ts +++ b/ui/angular/src/app/service/chart.service.ts @@ -16,76 +16,75 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; @Injectable() export class ChartService { - - constructor() { } + constructor() {} formatter_value(value, index) { - if (value < 1000) { - return value; - } else { - return value/1000; - } + if (value < 1000) { + return value; + } else { + return value / 1000; + } } formatter_yaxis_name(metric) { - return 'accuracy (%)'; + return "accuracy (%)"; } getUTCTimeStamp(timestamp) { - var TzOffset = new Date(timestamp).getTimezoneOffset()/60; - return timestamp-TzOffset*60*60*1000; + var TzOffset = new Date(timestamp).getTimezoneOffset() / 60; + return timestamp - TzOffset * 60 * 60 * 1000; } getTooltip(params) { - var result = ''; + var result = ""; if (params.length > 0) { - result = new Date(this.getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ - '<br /> Value : ' + params[0].data[1]; + result = + new Date(this.getUTCTimeStamp(params[0].data[0])) + .toUTCString() + .replace("GMT", "") + + "<br /> Value : " + + params[0].data[1]; } return result; } getTooltipPosition(point, params, dom) { - return [point[0]/2, point[1]/2]; + return [point[0] / 2, point[1] / 2]; } formatTimeStamp(timestamp) { - var TzOffset = new Date(timestamp).getTimezoneOffset()/60-7; - return timestamp+TzOffset*60*60*1000; + var TzOffset = new Date(timestamp).getTimezoneOffset() / 60 - 7; + return timestamp + TzOffset * 60 * 60 * 1000; } - // getMetricData(metric) { - // var data = []; - // var chartData = metric.details; - // for(var i = 0; i < chartData.length; i++){ - // if(chartData[i]._source.total!=0) - // data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.value.matched/chartData[i]._source.value.total*100).toFixed(2))]); - // else - // data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]); - // } - - // data.sort(function(a, b){ - // return a[0] - b[0]; - // }); - // return data; - // } - getMetricData(metric) { var data = []; - if(metric.details){ + if (metric.details) { var chartData = metric.details; - for(var i = 0; i < chartData.length; i++){ - if(chartData[i].value.total!=0) - data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((chartData[i].value.matched/chartData[i].value.total*100).toFixed(2))]); + for (var i = 0; i < chartData.length; i++) { + if (chartData[i].value.total != 0) + data.push([ + this.formatTimeStamp(chartData[i].tmst), + parseFloat( + ( + chartData[i].value.matched / + chartData[i].value.total * + 100 + ).toFixed(2) + ) + ]); else - data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((0).toFixed(2))]); + data.push([ + this.formatTimeStamp(chartData[i].tmst), + parseFloat((0).toFixed(2)) + ]); } } - data.sort(function(a, b){ + data.sort(function(a, b) { return a[0] - b[0]; }); return data; @@ -98,65 +97,63 @@ export class ChartService { title: { show: false }, - backgroundColor: 'transparent', - grid:{ - right: '5%', - left: '5%', - bottom: '5%', + backgroundColor: "transparent", + grid: { + right: "5%", + left: "5%", + bottom: "5%", top: 30, containLabel: true - }, - tooltip : { - trigger: 'axis', - formatter : function(params) { - return self.getTooltip(params); - } + tooltip: { + trigger: "axis", + formatter: function(params) { + return self.getTooltip(params); + } }, - xAxis : { - type : 'time', - splitLine: { - show: false - }, - splitNumber: 2, - axisLine:{ - lineStyle:{ - color:'white' - }, - }, - axisLabel:{ - color:'white' - }, - nameTextStyle:{ - color:'white' - } + xAxis: { + type: "time", + splitLine: { + show: false + }, + splitNumber: 2, + axisLine: { + lineStyle: { + color: "white" + } + }, + axisLabel: { + color: "white" + }, + nameTextStyle: { + color: "white" + } }, - yAxis : { - type : 'value', - scale : true, - splitNumber: 2, - name: 'accuracy%', - axisLabel: { - formatter: this.formatter_value, - color:'white' - }, - splitLine:{ - lineStyle:{ - 'type':'dashed' - } - }, - axisLine:{ - lineStyle:{ - color:'white' - } - }, - nameTextStyle:{ - color:'white' - }, - max:100 - + yAxis: { + type: "value", + scale: true, + splitNumber: 2, + name: "accuracy%", + axisLabel: { + formatter: this.formatter_value, + color: "white" + }, + splitLine: { + lineStyle: { + type: "dashed" + } + }, + axisLine: { + lineStyle: { + color: "white" + } + }, + nameTextStyle: { + color: "white" + }, + max: 100 }, - series:{} + series: {} }; option.series = this.getSeries(metric); return option; @@ -166,21 +163,21 @@ export class ChartService { var series = []; var data = this.getMetricData(metric); series.push({ - type: 'line', - data: data, - smooth:true, - lineStyle: { - normal: { - color: '#d48265' - } - }, - itemStyle: { - normal: { - color: '#d48265' - } - } - }); - return series; + type: "line", + data: data, + smooth: true, + lineStyle: { + normal: { + color: "#d48265" + } + }, + itemStyle: { + normal: { + color: "#d48265" + } + } + }); + return series; } getSeries(metric) { @@ -194,74 +191,74 @@ export class ChartService { var self = this; var option = { title: { - text: metric.name, - left: 'center', + text: metric.name, + left: "center", textStyle: { - fontWeight: 'normal', - fontSize: 15, - color:'white' + fontWeight: "normal", + fontSize: 15, + color: "white" } }, - backgroundColor: 'transparent', - grid:{ - right: '7%', - left: '5%', - bottom: '5%', + backgroundColor: "transparent", + grid: { + right: "7%", + left: "5%", + bottom: "5%", containLabel: true }, - tooltip : { - trigger: 'axis', - formatter : function(params) { - return self.getTooltip(params); - }, - position: function(point, params, dom) { - return self.getTooltipPosition(point, params, dom); - } + tooltip: { + trigger: "axis", + formatter: function(params) { + return self.getTooltip(params); + }, + position: function(point, params, dom) { + return self.getTooltipPosition(point, params, dom); + } }, - xAxis : { - axisLine:{ - lineStyle:{ - color:'white' - } - }, - type : 'time', - splitLine: { - show: false - }, - axisLabel:{ - color:'white' - }, - nameTextStyle:{ - color:'white' - }, - splitNumber: 2 + xAxis: { + axisLine: { + lineStyle: { + color: "white" + } + }, + type: "time", + splitLine: { + show: false + }, + axisLabel: { + color: "white" + }, + nameTextStyle: { + color: "white" + }, + splitNumber: 2 }, - - yAxis : { - type : 'value', - scale : true, - name: 'accuracy%', - axisLabel: { - formatter: this.formatter_value, - color:'white' - }, - splitLine:{ - lineStyle:{ - 'type':'dashed' - } - }, - axisLine:{ - lineStyle:{ - color:'white' - } - }, - nameTextStyle:{ - color:'white' - }, - splitNumber: 2, - max:100 + + yAxis: { + type: "value", + scale: true, + name: "accuracy%", + axisLabel: { + formatter: this.formatter_value, + color: "white" + }, + splitLine: { + lineStyle: { + type: "dashed" + } + }, + axisLine: { + lineStyle: { + color: "white" + } + }, + nameTextStyle: { + color: "white" + }, + splitNumber: 2, + max: 100 }, - series:{} + series: {} }; option.series = this.getSeries(metric); return option; @@ -272,78 +269,81 @@ export class ChartService { var self = this; var option = { title: { - text: metric.name, - link: '/measure/' + metric.name, - target: 'self', - left: 'center', + text: metric.name, + link: "/measure/" + metric.name, + target: "self", + left: "center", textStyle: { - fontSize: 25, - color:'white' + fontSize: 25, + color: "white" } }, grid: { - right: '2%', - left: '2%', + right: "2%", + left: "2%", containLabel: true }, - dataZoom: [{ - type: 'inside', - start: 0, - throttle: 50 - },{ - show: true, - start: 0 - }], - tooltip : { - trigger: 'axis', - formatter : function(params) { - return self.getTooltip(params); - } + dataZoom: [ + { + type: "inside", + start: 0, + throttle: 50 + }, + { + show: true, + start: 0 + } + ], + tooltip: { + trigger: "axis", + formatter: function(params) { + return self.getTooltip(params); + } }, - xAxis : { - axisLine:{ - lineStyle:{ - color:'white' - } - }, - type : 'time', - splitLine: { - show: false - }, - axisLabel:{ - color:'white' - }, - nameTextStyle:{ - color:'white' - } + xAxis: { + axisLine: { + lineStyle: { + color: "white" + } + }, + type: "time", + splitLine: { + show: false + }, + axisLabel: { + color: "white" + }, + nameTextStyle: { + color: "white" + } }, - yAxis : { - type : 'value', - scale : true, - splitLine:{ - lineStyle:{ - 'type':'dashed' - } - }, - name: 'accuracy%', - axisLabel: { - formatter: null, - color:'white' - }, - axisLine:{ - lineStyle:{ - color:'white' - } - }, - nameTextStyle:{ - color:'white' - }, - max:100 + yAxis: { + type: "value", + scale: true, + splitLine: { + lineStyle: { + type: "dashed" + } + }, + name: "accuracy%", + axisLabel: { + formatter: null, + color: "white" + }, + axisLine: { + lineStyle: { + color: "white" + } + }, + nameTextStyle: { + color: "white" + }, + max: 100 }, animation: true, - series:{} + series: {} }; option.series = this.getSeries(metric); return option; } -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/service/service.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts index 32b9f58..4f9e39b 100644 --- a/ui/angular/src/app/service/service.service.ts +++ b/ui/angular/src/app/service/service.service.ts @@ -16,103 +16,97 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; @Injectable() export class ServiceService { - - constructor() { } - //public BACKEND_SERVER = 'http://10.65.145.88:38080'; - // public BACKEND_SERVER = 'http://localhost:8080'; - public BACKEND_SERVER = ''; - public API_ROOT_PATH = '/api/v1'; - // public ES_SERVER = "http://"; + location.host.replace("8080", "9200"); - // public ES_SERVER = "http://10.64.222.80:39200"; ; - // public ES_SERVER = "http://10.65.145.88:39200"; ; - // public ES_SERVER = "http://localhost:8080"; ; - - public config = { - // URI paths, always have a trailing / - uri: { - base: this.BACKEND_SERVER + this.API_ROOT_PATH, - - login:this.BACKEND_SERVER + this.API_ROOT_PATH+ '/login/authenticate', - dbtree:this.BACKEND_SERVER + this.API_ROOT_PATH+ '/metadata/hive/dbs/tables', - //schemadefinition: this.BACKEND_SERVER + this.API_ROOT_PATH+ '/metadata/hive/table', - dataassetlist: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metadata/hive/dbs/tables', - - // adddataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets', - // updatedataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets', - getdataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets', - // deletedataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets', - - //mydashboard - getmydashboard: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/mydashboard/', - // getsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe/', - // newsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe', - - //metrics - - statistics: this.BACKEND_SERVER + this.API_ROOT_PATH + '/jobs/health', - - - // briefmetrics: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/briefmetrics', - heatmap: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/heatmap' , - // metricdetail: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/complete', - // rulemetric: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/brief', -// organization:this.BACKEND_SERVER+'/org', - - orgmap: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/org', - - - - - metricsByOrg:'', -// organization:'/org.json', -// dashboard:'/dashboard.json', - - - // organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs', - dashboard:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics', - metricdetail:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/values', - - - // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source', - metricsample: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/sample', - metricdownload: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/download', - - //Models - - allModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', - addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', - deleteModel:this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', - getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures', - enableModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/enableModel', - - //Jobs - allJobs:this.BACKEND_SERVER + this.API_ROOT_PATH + '/jobs', - addJobs:this.BACKEND_SERVER + this.API_ROOT_PATH + '/jobs', - getMeasuresByOwner:this.BACKEND_SERVER + this.API_ROOT_PATH +'/measures/owner/', - deleteJob:this.BACKEND_SERVER + this.API_ROOT_PATH + '/jobs', - getInstances:this.BACKEND_SERVER + this.API_ROOT_PATH + '/jobs/instances', - -// allJobs:'/jobs.json', - newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' , - newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' , - newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' , - newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' , - // newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/newAccuracyModel' , - // newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newValidityModel' , - // newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newAnomalyModel' , - // newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newPublishModel' , - // getAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAccuracyModel', - // getValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getValidityModel', - // getPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getPublishModel', - // getAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAnomalyModel', - - //Notification - getnotifications: this.BACKEND_SERVER + this.API_ROOT_PATH + '/notifications' - } - - }; -} + constructor() {} + //public BACKEND_SERVER = 'http://10.65.145.88:38080'; + // public BACKEND_SERVER = 'http://localhost:8080'; + public BACKEND_SERVER = ""; + public API_ROOT_PATH = "/api/v1"; + + public config = { + // URI paths, always have a trailing / + uri: { + base: this.BACKEND_SERVER + this.API_ROOT_PATH, + + login: this.BACKEND_SERVER + this.API_ROOT_PATH + "/login/authenticate", + dbtree: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", + dataassetlist: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables", + + getdataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + "/dataassets", + + //mydashboard + getmydashboard: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/mydashboard/", + // getsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe/', + // newsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe', + + //metrics + + statistics: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/health", + + // briefmetrics: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/briefmetrics', + heatmap: this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/heatmap", + // metricdetail: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/complete', + // rulemetric: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/brief', + // organization:this.BACKEND_SERVER+'/org', + + orgmap: this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/org", + + metricsByOrg: "", + // organization:'/org.json', + // dashboard:'/dashboard.json', + + // organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs', + dashboard: this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics", + metricdetail: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/values", + + // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source', + metricsample: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample", + metricdownload: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download", + + //Models + + allModels: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", + addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", + deleteModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", + getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures", + enableModel: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/models/enableModel", + + //Jobs + allJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", + addJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", + getMeasuresByOwner: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures/owner/", + deleteJob: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs", + getInstances: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/instances", + + // allJobs:'/jobs.json', + newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models", + newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models", + newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models", + newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models", + // newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/newAccuracyModel' , + // newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newValidityModel' , + // newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newAnomalyModel' , + // newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newPublishModel' , + // getAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAccuracyModel', + // getValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getValidityModel', + // getPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getPublishModel', + // getAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAnomalyModel', + + //Notification + getnotifications: + this.BACKEND_SERVER + this.API_ROOT_PATH + "/notifications" + } + }; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/service/user.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/user.service.ts b/ui/angular/src/app/service/user.service.ts index 02916a5..16e943e 100644 --- a/ui/angular/src/app/service/user.service.ts +++ b/ui/angular/src/app/service/user.service.ts @@ -16,29 +16,27 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; @Injectable() export class UserService { - - ntAccount : string; - timestamp:Date; - setCookie(name, value, days){ + ntAccount: string; + timestamp: Date; + setCookie(name, value, days) { let expires; - if (days) { - var date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - console.log(date); - expires = "; expires=" + date.toUTCString(); - } else { - expires = ""; - } - // document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/"; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); + console.log(date); + expires = "; expires=" + date.toUTCString(); + } else { + expires = ""; + } document.cookie = name + "=" + value + expires + "; path=/"; } getCookie(key) { - var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); + var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)"); return keyValue ? keyValue[2] : null; - } -} + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/sidebar/sidebar.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.css b/ui/angular/src/app/sidebar/sidebar.component.css index 8850a17..c9a5dbe 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.css +++ b/ui/angular/src/app/sidebar/sidebar.component.css @@ -16,206 +16,210 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.sidebar-stat-center{ - padding:10px 0; - display: flex; - align-items: center -} -.sidebar-stat-center>img{ - max-width:24px; - margin-right:5px; +.sidebar-stat-center { + padding: 10px 0; + display: flex; + align-items: center } -.sidebar-stat-center>span{ - font-size:18px; - color:#fff +.sidebar-stat-center>img { + max-width: 24px; + margin-right: 5px; } -.well{ - padding:0px; - background:transparent; - border:0px; - position:relative; +.sidebar-stat-center>span { + font-size: 18px; + color: #fff } -.well .faChevron{ - color: white; +.well { + padding: 0px; + background: transparent; + border: 0px; + position: relative; } -.panel-group{ - margin-bottom:0px; - background:transparent; +.well .faChevron { + color: white; } -.panel-default{ - position:relative; - background:transparent; - border-color: #262626; +.panel-group { + margin-bottom: 0px; + background: transparent; } -.side-bar-scroll{ - padding:0px; - background:transparent; - border:0px; +.panel-default { + position: relative; + background: transparent; + border-color: #262626; } -.sideBar{ - overflow:scroll; - height:650px; - overflow-x: hidden; +.side-bar-scroll { + padding: 0px; + background: transparent; + border: 0px; } -#side-bar-metrics::-webkit-scrollbar-track -{ - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - border-radius: 10px; - background-color: #F5F5F5; -} +/*.sideBar { + overflow: scroll; + height: 650px; + overflow-x: hidden; +}*/ -#side-bar-metrics::-webkit-scrollbar -{ - width: 7px; - border-radius: 10px; - background-color: #F5F5F5; +/*#side-bar-metrics::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #F5F5F5; } -#side-bar-metrics::-webkit-scrollbar-thumb -{ - border-radius: 2px; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #ADADAD; +#side-bar-metrics::-webkit-scrollbar { + width: 7px; + border-radius: 10px; + background-color: #F5F5F5; } -.well .side-metrics{ +#side-bar-metrics::-webkit-scrollbar-thumb { + border-radius: 2px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #ADADAD; +}*/ + +.well .side-metrics { font-size: 14px; } -.well .faArrows{ - background:#ff5c33; - color:black; + +.well .faArrows { + background: #ff5c33; + color: black; } -.well .side-date{ - color: white; - /*position: absolute;*/ - /*left: 80px;*/ - /*margin-left: 10px;*/ +.well .side-date { + color: white; + /*position: absolute;*/ + /*left: 80px;*/ + /*margin-left: 10px;*/ } -.well .side-name{ - color: #999966; - /*position: absolute;*/ - /*left: 210px;*/ - /*margin-left: 20px;*/ +.well .side-name { + color: #999966; + /*position: absolute;*/ + /*left: 210px;*/ + /*margin-left: 20px;*/ } -a>.side-name:hover{ - color: #b2c831; - /*position: absolute;*/ - /*left: 210px;*/ - /*margin-left: 20px;*/ +a>.side-name:hover { + color: #b2c831; + /*position: absolute;*/ + /*left: 210px;*/ + /*margin-left: 20px;*/ } -.well .side-percent{ - color: #40bf80; - /*position: absolute;*/ - /*left: 390px;*/ +.well .side-percent { + color: #40bf80; + /*position: absolute;*/ + /*left: 390px;*/ } -.well .side-percent-red{ - color: #f00; +.well .side-percent-red { + color: #f00; } -#gprs{ +#gprs { position: absolute; - top:5px; + top: 5px; clip: rect(0, 50px, 50px, 0); top: -8px; /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */ } -.well-next{ - padding:0px; - background:#262626; - border:0px; - position:relative; +.well-next { + padding: 0px; + background: #262626; + border: 0px; + position: relative; } .vcenter { - display: inline-block; - vertical-align: middle; - float: none; + display: inline-block; + vertical-align: middle; + float: none; } + /*side-bar end*/ + /* led start */ + .led-red { - /*margin: 20px auto;*/ - margin-top: -26px; - margin-left: 180px; - width: 12px; - height: 12px; - background-color: #940; - border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px; + /*margin: 20px auto;*/ + margin-top: -26px; + margin-left: 180px; + width: 12px; + height: 12px; + background-color: #940; + border-radius: 50%; + box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px; } .led-yellow { - /*margin: 20px auto;*/ - /*margin-top: -26px; + /*margin: 20px auto;*/ + /*margin-top: -26px; margin-left: 180px;*/ - width: 12px; - height: 12px; - background-color: #A90; - border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px; + width: 12px; + height: 12px; + background-color: #A90; + border-radius: 50%; + box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px; } .led-green { - /*margin: 20px auto;*/ - /*margin-top: -26px; + /*margin: 20px auto;*/ + /*margin-top: -26px; margin-left: 180px;*/ - width: 12px; - height: 12px; - background-color: #690; - border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; + width: 12px; + height: 12px; + background-color: #690; + border-radius: 50%; + box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; } + + /* led end */ @media (max-width: 1200px) { - #sidebar-option { - height: auto; - display: block; - } + #sidebar-option { + height: auto; + display: block; + } } @media (min-width: 1200px) { - #sidebar-option { - height: 180px; - display: flex; - align-items: center; - } + #sidebar-option { + height: 180px; + display: flex; + align-items: center; + } } -.bark-link{ - cursor: pointer; - text-decoration: none; - color:white; +.bark-link { + cursor: pointer; + text-decoration: none; + color: white; } -.bark-link:hover{ - color:white; +.bark-link:hover { + color: white; } -#side-bar-metrics{ - /*position: absolute;*/ - margin-top:20px; - overflow-y:auto; - overflow-x:hidden; - margin-left:0; - margin-right:0; - height:1px; - width: 95%; -} \ No newline at end of file +#side-bar-metrics { + /*position: absolute;*/ + margin-top: 20px; + overflow-y: auto; + overflow-x: hidden; + margin-left: 0; + margin-right: 0; + height: 1px; + width: 95%; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/sidebar/sidebar.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.html b/ui/angular/src/app/sidebar/sidebar.component.html index f2b0cad..7bcee99 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.html +++ b/ui/angular/src/app/sidebar/sidebar.component.html @@ -34,7 +34,8 @@ under the License. <div id="data-asset-pie"></div> </div> </div> - <div id="side-bar-metrics" class="row"> + <!-- <div id="side-bar-metrics" class="row"> --> + <div id="side-bar-metrics" class="row y-scrollable"> <div *ngFor="let outerItems of finalData;let parent=index"> <div class="well"> <div class="col-sm-4 col-lg-4 col-md-4 "> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/sidebar/sidebar.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/sidebar.component.ts b/ui/angular/src/app/sidebar/sidebar.component.ts index 8a8d461..e8418b2 100644 --- a/ui/angular/src/app/sidebar/sidebar.component.ts +++ b/ui/angular/src/app/sidebar/sidebar.component.ts @@ -16,118 +16,132 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit } from '@angular/core'; -import {HttpClient} from '@angular/common/http'; -import {Router} from "@angular/router"; -import {ChartService} from '../service/chart.service'; -import {DatePipe} from '@angular/common'; -import {ServiceService} from '../service/service.service'; -import {TruncatePipe} from './truncate.pipe'; -// import {GetMetricService} from '../service/get-metric.service'; -import * as $ from 'jquery'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { ChartService } from "../service/chart.service"; +import { DatePipe } from "@angular/common"; +import { ServiceService } from "../service/service.service"; +import { TruncatePipe } from "./truncate.pipe"; +import * as $ from "jquery"; @Component({ - selector: 'app-sidebar', - templateUrl: './sidebar.component.html', - styleUrls: ['./sidebar.component.css'], - // pipes: [TruncatePipe], - providers:[ChartService,ServiceService] + selector: "app-sidebar", + templateUrl: "./sidebar.component.html", + styleUrls: ["./sidebar.component.css"], + providers: [ChartService, ServiceService] }) export class SidebarComponent implements OnInit { + constructor( + private http: HttpClient, + private router: Router, + public serviceService: ServiceService, + public chartService: ChartService + ) {} - constructor(private http: HttpClient, - private router:Router, - public serviceService:ServiceService, - public chartService:ChartService) { - } - + // finalData = []; finalData = []; - oData = []; chartOption = new Map(); - orgWithMeasure:any; - mesWithJob:any; - // var formatUtil = echarts.format; + orgWithMeasure: any; + mesWithJob: any; pageInit() { var health_url = this.serviceService.config.uri.statistics; - this.http.get(health_url).subscribe(data => { - this.sideBarList(null); - },err => {}); + this.http.get(health_url).subscribe( + data => { + this.sideBarList(null); + }, + err => {} + ); } - - onResize(event){ - if(window.innerWidth < 992) { - $('#rightbar').css('display', 'none'); + + onResize(event) { + if (window.innerWidth < 992) { + $("#rightbar").css("display", "none"); } else { - $('#rightbar').css('display', 'block'); + $("#rightbar").css("display", "block"); this.resizeSideChart(); } } - resizeSideChart(){ - $('#side-bar-metrics').css({ - height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 + resizeSideChart() { + $("#side-bar-metrics").css({ + height: + $("#mainContent").height() - $("#side-bar-stats").outerHeight() + 70 }); - for(let i=0;i<this.oData.length;i++){ - for(let j=0;j<this.oData[i].metrics.length;j++){ - if (!this.oData[i].metrics[j].tag) { - this.draw(this.oData[i].metrics[j], i, j); + for (let i = 0; i < this.finalData.length; i++) { + for (let j = 0; j < this.finalData[i].metrics.length; j++) { + if (!this.finalData[i].metrics[j].tag) { + this.draw(this.finalData[i].metrics[j], i, j); } } } } - draw (metric, parentIndex, index) { - $('#side'+parentIndex+index).toggleClass('collapse'); - var chartId = 'chart' + parentIndex + '-' + index; - document.getElementById(chartId).style.width = ($('.panel-heading').innerWidth()-40)+'px'; - document.getElementById(chartId).style.height = '200px'; - this.chartOption.set(chartId,this.chartService.getOptionSide(metric)); + draw(metric, parentIndex, index) { + $("#side" + parentIndex + index).toggleClass("collapse"); + var chartId = "chart" + parentIndex + "-" + index; + document.getElementById(chartId).style.width = + $(".panel-heading").innerWidth() - 40 + "px"; + document.getElementById(chartId).style.height = "200px"; + this.chartOption.set(chartId, this.chartService.getOptionSide(metric)); var self = this; - $('#'+chartId).unbind('click'); - $('#'+chartId).click(function(e) { - self.router.navigate(['/detailed/'+self.oData[parentIndex].metrics[index].name]) ; + $("#" + chartId).unbind("click"); + $("#" + chartId).click(function(e) { + self.router.navigate([ + "/detailed/" + self.finalData[parentIndex].metrics[index].name + ]); }); - }; + } - getOption(parent,i){ - return this.chartOption.get('chart'+parent+'-'+i); + getOption(parent, i) { + return this.chartOption.get("chart" + parent + "-" + i); } - sideBarList(sysName){ + sideBarList(sysName) { 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); } }); } ngOnInit() { - this.sideBarList(null); + this.sideBarList(null); } - -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/sidebar/truncate.pipe.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/sidebar/truncate.pipe.ts b/ui/angular/src/app/sidebar/truncate.pipe.ts index 6c5558a..a58b179 100644 --- a/ui/angular/src/app/sidebar/truncate.pipe.ts +++ b/ui/angular/src/app/sidebar/truncate.pipe.ts @@ -23,9 +23,7 @@ import {Pipe, PipeTransform} from '@angular/core' }) export class TruncatePipe { transform(value: string, limit: number) : string { - let trail = '...'; - return value.length > limit ? value.substring(0, limit) + trail : value; } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/styles.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/styles.css b/ui/angular/src/styles.css index 4c80f95..688b4cf 100644 --- a/ui/angular/src/styles.css +++ b/ui/angular/src/styles.css @@ -1172,12 +1172,12 @@ input{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAApUlEQVQ4T8XULQ7CQBCG4fcTWBJuVodEcAEEBtcbcAU0Bq7ATQgKi0PQTAOhzdD0b7aC9fPs7O43K+AEbIArCUtmZpLepRdgFYU+QLXxFzoD2dhmfgAHFcABWA9BrUAE6gUa0BbYNzsaBTjoAeQeCgFtUBLgoPt/AEn1XYQ68IX1MXwSu0Ij6Qnsws8ozQp49SayI8oLg/kRbstQlJOHadI4T/1QSjKSYdGc5u4/AAAAAElFTkSuQmCC') !important; } -/* .myclass { + .myclass { position: relative; z-index: 9999; } -#mainWindow { +/*#mainWindow { position: relative; z-index: 1; }*/
