http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/js/services/bark-chart.js ---------------------------------------------------------------------- diff --git a/ui/js/services/bark-chart.js b/ui/js/services/bark-chart.js new file mode 100644 index 0000000..05a10c0 --- /dev/null +++ b/ui/js/services/bark-chart.js @@ -0,0 +1,613 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +define(['./module'], function (services) { + services.factory('$barkChart', function(){ + + return { + getOptionPie: getOptionPie, + getOptionBig: getOptionBig, + getOptionSide: getOptionSide, + getOptionThum: getOptionThum + }; + }); + + function getOptionPie(status) { + var data = []; + for (var key in status) { + var item = {}; + item.name = key; + item.value = status[key]; + if (key === 'health') { + item.selected = true; + } + data.push(item); + } + + var option = { + title: { + show: false + }, + backgroundColor: 'transparent', + tooltip: { + trigger: 'item', + formatter: "{b} <br> <b>{c}</b> ({d}%)" + }, + series: [{ + type: 'pie', + selectedMode: 'single', + label:{ + normal: { + position: 'inner', + formatter: function(params) { + if (params.name === 'health') { + return params.percent+'%'; + } else { + return ''; + } + } + } + }, + data: data + }], + color: ['#005732','#ff3333','#c23531'] + }; + + return option; + } + + function getOptionThum(metric) { + var data = getMetricData(metric); + var option = { + title: { + text: metric.name, + left: 'center', + textStyle: { + fontWeight: 'normal', + fontSize: 15 + } + }, + backgroundColor: 'transparent', + grid:{ + right: '7%', + left: '5%', + bottom: '5%', + containLabel: true + }, + tooltip : { + trigger: 'axis', + formatter : function(params) { + return getTooltip(params, metric.metricType); + }, + position: function(point, params, dom) { + return getTooltipPosition(point, params, dom); + } + }, + xAxis : { + type : 'time', + splitLine: { + show: false + }, + splitNumber: 2 + }, + yAxis : { + type : 'value', + scale : true, + name: formatter_yaxis_name(metric), + axisLabel: { + formatter: formatter_value + }, + splitNumber: 2 + } + }; + option.series = getSeries(metric); + return option; + } + + function getTooltipPosition(point, params, dom) { + return [point[0]/2, point[1]/2]; + } + + function formatter_value(value, index) { + if (value < 1000) { + return value; + } else { + return value/1000; + } + } + + function formatter_yaxis_name(metric) { + if (metric.dq <= 100) { + return 'dq (%)'; + } else { + return 'dq (k)'; + } + } + + function getTooltip(params, metricType) { + var result = ''; + if (params.length > 0) { + + if(metricType == 'Bollinger'){ + result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ + '<br /> Value : ' + params[2].data[1] + + '<br /> Average : ' + params[3].data[1] + + '<br /> Bands : ' + params[0].data[1] + '--' + params[1].data[1]; + }else if(metricType == 'Trend'){ + result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ + '<br /> Value : ' + params[0].data[1] + + '<br /> -7 days : ' + params[1].data[1]; + }else if(metricType == 'MAD'){ + result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ + '<br /> Value : ' + params[2].data[1] + + '<br /> Bands : ' + params[0].data[1] + '--' + params[1].data[1]; + }else if(metricType == 'Count' || metricType == ''){ + result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ + '<br /> Value : ' + params[0].data[1]; + } + } + + return result; + } + + function getUTCTimeStamp(timestamp) { + var TzOffset = new Date(timestamp).getTimezoneOffset()/60; + return timestamp-TzOffset*60*60*1000; + } + + function getOptionSide(metric) { + var data = getMetricData(metric); + var option = { + title: { + show: false + }, + backgroundColor: 'transparent', + grid:{ + right: '5%', + left: '5%', + bottom: '5%', + top: 30, + containLabel: true + + }, + tooltip : { + trigger: 'axis', + formatter : function(params) { + return getTooltip(params, metric.metricType); + } + }, + xAxis : { + type : 'time', + splitLine: { + show: false + }, + splitNumber: 2 + }, + yAxis : { + type : 'value', + scale : true, + name: formatter_yaxis_name(metric), + axisLabel: { + formatter: formatter_value + }, + splitNumber: 2 + } + }; + option.series = getSeries(metric); + return option; + } + + function getSeries(metric) { + var series = {}; + if(metric.metricType == 'Bollinger'){ + series = getSeriesBollinger(metric); + }else if(metric.metricType == 'Trend'){ + series = getSeriesTrend(metric); + }else if(metric.metricType == 'MAD'){ + series = getSeriesMAD(metric); + }else if(metric.metricType == 'Count' || metric.metricType == ''){ + series = getSeriesCount(metric); + } + return series; + } + + function getOptionBig(metric) { + var data = getMetricData(metric); + var option = { + title: { + text: metric.name, + link: '/#/viewrule/' + metric.name, + target: 'self', + left: 'center', + textStyle: { + fontSize: 25 + } + }, + grid: { + right: '2%', + left: '2%', + containLabel: true + }, + dataZoom: [{ + type: 'inside', + start: 75, + throttle: 50 + },{ + show: true, + start: 75 + }], + tooltip : { + trigger: 'axis', + formatter : function(params) { + return getTooltip(params, metric.metricType); + } + }, + xAxis : { + type : 'time', + splitLine: { + show: false + } + }, + yAxis : { + type : 'value', + scale : true, + name: formatter_yaxis_name(metric), + axisLabel: { + formatter: formatter_value + } + }, + animation: true + }; + option.series = getSeries(metric); + if (metric.metricType == 'MAD') { + option.series = getMADBigSeries(option.series); + } else if (metric.metricType == 'Bollinger') { + option.series = getBollingerBigSeries(option.series); + } + return option; + } + + function getBollingerBigSeries(series) { + var dataLow = series[0].data; + var data = series[2].data; + var result = []; + for (var i = 0; i < data.length; i++) { + if (data[i][1] < dataLow[i][1]) { + var item = {}; + item.coord = data[i]; + var diff = Number(dataLow[i][1])-Number(data[i][1]); + item.label = { + normal: { + formatter: 'low '+diff + } + }; + item.itemStyle = { + normal: { + color: '#c23531' + } + }; + result.push(item); + } + } + series[2].markPoint = {}; + series[2].markPoint.data = result; + console.log(series); + return series; + } + + function getMADBigSeries(series) { + var dataLow = series[0].data; + var data = series[2].data; + var result = []; + for (var i = 0; i < data.length; i++) { + if (data[i][1] < dataLow[i][1]) { + var item = {}; + item.coord = data[i]; + var diff = Number(dataLow[i][1])-Number(data[i][1]); + item.label = { + normal: { + formatter: Math.round(diff/1000) + 'K below lower band' + } + }; + item.itemStyle = { + normal: { + color: '#c23531' + } + }; + result.push(item); + } + } + series[2].markPoint = {}; + series[2].markPoint.data = result; + console.log(series); + return series; + } + + function getMetricData(metric) { + var data = []; + var chartData = metric.details; + for(var i = 0; i < chartData.length; i++){ + data.push([formatTimeStamp(chartData[i].timestamp), parseFloat(chartData[i].value.toFixed(2))]); + } + + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesMADLow(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].mad.lower)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesMADUp(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].mad.upper-chartData[i].mad.lower)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesBollingerLow(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.lower)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesBollingerUp(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.upper-chartData[i].bolling.lower)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesBollingerMean(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.mean)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function getSeriesTrendComparision(metric) { + var data = []; + var chartData = metric.details; + for (var i = 0; i < chartData.length; i++) { + data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].comparisionValue)]); + } + data.sort(function(a, b){ + return a[0] - b[0]; + }); + return data; + } + + function formatTimeStamp(timestamp) { + var TzOffset = new Date(timestamp).getTimezoneOffset()/60-7; + return timestamp+TzOffset*60*60*1000; + } + + function getSeriesCount(metric) { + var series = []; + var data = getMetricData(metric); + series.push({ + type: 'line', + data: data, + smooth:true, + lineStyle: { + normal: { + color: '#d48265' + } + }, + itemStyle: { + normal: { + color: '#d48265' + } + } + }); + return series; + } + + function getSeriesTrend(metric) { + var series = []; + var data = getMetricData(metric); + var dataComparision = getSeriesTrendComparision(metric); + series.push({ + type: 'line', + smooth:true, + data: data, + lineStyle: { + normal: { + color: '#d48265' + } + }, + itemStyle: { + normal: { + color: '#d48265' + } + } + }); + series.push({ + type: 'line', + smooth:true, + data: dataComparision, + lineStyle: { + normal: { + color: '#f15c80', + type: 'dashed' + } + }, + itemStyle: { + normal: { + color: '#f15c80' + } + } + }); + return series; + } + + function getSeriesBollinger(metric) { + var series = []; + var dataLow = getSeriesBollingerLow(metric); + var dataUp = getSeriesBollingerUp(metric); + var dataMean = getSeriesBollingerMean(metric); + var data = getMetricData(metric); + series.push({ + name: 'L', + type: 'line', + smooth:true, + data: dataLow, + lineStyle: { + normal: { + opacity: 0 + } + }, + stack: 'MAD-area', + symbol: 'none' + }); + series.push({ + name: 'U', + type: 'line', + smooth:true, + data: dataUp, + lineStyle: { + normal: { + opacity: 0 + } + }, + areaStyle: { + normal: { + color: '#eee', + opacity: 0.2 + } + }, + stack: 'MAD-area', + symbol: 'none' + }); + series.push({ + type: 'line', + smooth:true, + data: data, + lineStyle: { + normal: { + color: '#d48265' + } + }, + itemStyle: { + normal: { + color: '#d48265' + } + } + }); + series.push({ + type: 'line', + smooth:true, + data: dataMean, + lineStyle: { + normal: { + color: '#f15c80', + type: 'dashed' + } + }, + itemStyle: { + normal: { + color: '#f15c80' + } + } + }); + return series; + } + + function getSeriesMAD(metric) { + var series = []; + var dataLow = getSeriesMADLow(metric); + var dataUp = getSeriesMADUp(metric); + var data = getMetricData(metric); + series.push({ + name: 'L', + type: 'line', + smooth:true, + data: dataLow, + lineStyle: { + normal: { + opacity: 0 + } + }, + stack: 'MAD-area', + symbol: 'none' + }); + series.push({ + name: 'U', + type: 'line', + smooth:true, + data: dataUp, + lineStyle: { + normal: { + opacity: 0 + } + }, + areaStyle: { + normal: { + color: '#eee', + opacity: 0.2 + } + }, + stack: 'MAD-area', + symbol: 'none' + }); + series.push({ + type: 'line', + smooth:true, + data: data, + lineStyle: { + normal: { + color: '#d48265' + } + }, + itemStyle: { + normal: { + color: '#d48265' + } + } + }); + return series; + } + +});
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/js/services/index.js ---------------------------------------------------------------------- diff --git a/ui/js/services/index.js b/ui/js/services/index.js new file mode 100644 index 0000000..17a5aa7 --- /dev/null +++ b/ui/js/services/index.js @@ -0,0 +1,15 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +define(['./services', './bark-chart'], function () {}); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/js/services/module.js ---------------------------------------------------------------------- diff --git a/ui/js/services/module.js b/ui/js/services/module.js new file mode 100644 index 0000000..f8fbecb --- /dev/null +++ b/ui/js/services/module.js @@ -0,0 +1,18 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ +define(['angular'], function (ng) { + 'use strict'; + return ng.module('app.services', []); +}); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/js/services/services.js ---------------------------------------------------------------------- diff --git a/ui/js/services/services.js b/ui/js/services/services.js new file mode 100644 index 0000000..6c3dbeb --- /dev/null +++ b/ui/js/services/services.js @@ -0,0 +1,100 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +define(['./module'], function (services) { + 'use strict'; + //version + services.value('version', '0.1'); + + services.factory('$config', function(){ + + + var BACKEND_SERVER = ''; + // var BACKEND_SERVER = 'http://localhost:8080'; //dev env + + + + var API_ROOT_PATH = '/api/v1'; + + var config = { + // URI paths, always have a trailing / + uri: { + base: BACKEND_SERVER + API_ROOT_PATH, + + //mock data + // statistics:'/js/mock_data/statistics.json', + //briefmetrics:'/js/mock_data/briefmetrics.json', + //heatmap: '/js/mock_data/briefmetrics.json', + // dbtree: '/js/mock_data/dbtree1.json', + // schemadefinition: '/js/mock_data/schemadefinition.json', + // rulemetric: '/js/mock_data/rulemetric.json', + // dashboard: '/js/mock_data/briefmetrics.json' , + // allModels: "http://localhost:8080/"; + API_ROOT_PATH + '/model/allModels', + // newModel: "http://localhost:8080/"; + API_ROOT_PATH + '/model/newModel' , + // deleteModel: "http://localhost:8080"; + API_ROOT_PATH + '/model/deleteModel' , + + //real data + //data asset + dbtree: BACKEND_SERVER + API_ROOT_PATH + '/dataassets/metadata', + schemadefinition: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + dataassetlist: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + adddataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + updatedataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + getdataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + deletedataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + + //mydashboard + getmydashboard: BACKEND_SERVER + API_ROOT_PATH + '/metrics/mydashboard/', + getsubscribe: BACKEND_SERVER + API_ROOT_PATH + '/subscribe/', + newsubscribe: BACKEND_SERVER + API_ROOT_PATH + '/subscribe', + + //metrics + statistics: BACKEND_SERVER + API_ROOT_PATH + '/metrics/statics', + briefmetrics: BACKEND_SERVER + API_ROOT_PATH + '/metrics/briefmetrics', + heatmap: BACKEND_SERVER + API_ROOT_PATH + '/metrics/heatmap' , + metricdetail: BACKEND_SERVER + API_ROOT_PATH + '/metrics/complete', + rulemetric: BACKEND_SERVER + API_ROOT_PATH + '/metrics/brief', + dashboard: BACKEND_SERVER + API_ROOT_PATH + '/metrics/dashboard' , + + metricsample: BACKEND_SERVER + API_ROOT_PATH + '/metrics/sample', + metricdownload: BACKEND_SERVER + API_ROOT_PATH + '/metrics/download', + + //Models + allModels: BACKEND_SERVER + API_ROOT_PATH + '/models' , + deleteModel: BACKEND_SERVER + API_ROOT_PATH + '/models', + getModel: BACKEND_SERVER + API_ROOT_PATH + '/models', + enableModel: BACKEND_SERVER + API_ROOT_PATH + '/models/enableModel', + + newAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/models' , + newValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/models' , + newAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/models' , + newPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/models' , + // newAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/models/newAccuracyModel' , + // newValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newValidityModel' , + // newAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newAnomalyModel' , + // newPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newPublishModel' , + // getAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getAccuracyModel', + // getValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getValidityModel', + // getPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getPublishModel', + // getAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getAnomalyModel', + + //Notification + getnotifications: BACKEND_SERVER + API_ROOT_PATH + '/notifications', + } + + }; + + return config; + }); +}); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/b3vHigh.jpg ---------------------------------------------------------------------- diff --git a/ui/login/b3vHigh.jpg b/ui/login/b3vHigh.jpg new file mode 100644 index 0000000..0d6949d Binary files /dev/null and b/ui/login/b3vHigh.jpg differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/background.jpg ---------------------------------------------------------------------- diff --git a/ui/login/background.jpg b/ui/login/background.jpg new file mode 100644 index 0000000..70e05c1 Binary files /dev/null and b/ui/login/background.jpg differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/login.css ---------------------------------------------------------------------- diff --git a/ui/login/login.css b/ui/login/login.css new file mode 100644 index 0000000..5b2f037 --- /dev/null +++ b/ui/login/login.css @@ -0,0 +1,87 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +html, body { + height: 100%; +} + +body { + background-image: url("./background.jpg"); + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} + +#content { + background-color: transparent; +} + +hr { + margin-bottom: 30px; +} + +@media (min-width: 992px) { + + #content-row { + margin-top:12em; + margin-bottom:7em; + } + + #bark-description { + display: block; + } + + #bark-description-2 { + display: none; + } +} + +@media (max-width:991px) { + + #content-row { + margin-top:0em; + margin-bottom:0em; + } + + #bark-description { + display: none; + } + + #bark-description-2 { + margin-top: 3em; + display: block; + } +} + +#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); +} + +#loginMsg { + 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/9b67bab1/ui/login/login.html ---------------------------------------------------------------------- diff --git a/ui/login/login.html b/ui/login/login.html new file mode 100644 index 0000000..5052545 --- /dev/null +++ b/ui/login/login.html @@ -0,0 +1,116 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> + +<!DOCTYPE html> +<html lang="en"> + +<head> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content=""> + <meta name="author" content=""> + <!-- <link rel="icon" href="/img/favicon.ico"> --> + + <title>Griffin - Data Quality Service</title> + <link rel="icon" href="../img/favicon.ico"> + <!-- Bootstrap Core CSS --> + <link href="../bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet"> + <link href="login.css" rel="stylesheet"> + <!-- Custom Fonts --> + <!-- <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> --> + <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js";></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js";></script> + <![endif]--> +</head> +<body> + + <div id="content" class="container-fluid"> + <div class="row" id="content-row"> + + <div class="col-md-6 col-md-offset-1 col-xs-12"> + <div id="bark-description"> + <h3> + Data Quality Service Platform on eBay Cloud. + </h3><br> + <p> + Automates your data quality validation + </p><br> + <p> + Health monitoring, Profiling and detection + </p><br> + <p> + Unified Visualization + </p><br> + <p> + One set of tools to build data quality pipelines + </p> + </div> + </div> + + <div class="col-md-3 col-md-offset-1 col-xs-12"> + <div id="login-form"> + <div style="text-align:center;margin-bottom:30px;"> + <img src="../img/logo.gif" class="img-rounded" style="width:80%;"> + </div> + + <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;"> + + <input type="password" class="form-control" placeholder="password" autocomplete="on"> + + <div class="checkbox"> + <label style="color:white;"> + <input type="checkbox" value="remember-me" checked>Remember me + </label> + </div> + + <button class="btn btn-default btn-large btn-block" id="login-btn" style="margin-bottom: 20px;">Log in</button> + + <div id="loginMsg">Login failed. Try again.</div> + </div> + </div> + + <div class="col-xs-12"> + <div id="bark-description-2"> + <h3> + Data Quality Service Platform on the eBay Cloud. + </h3><br> + <p> + Automates your data quality validation + </p><br> + <p> + Health monitoring, Profiling and detection + </p><br> + <p> + Unified Visualization + </p><br> + <p> + One set of tools to build data quality pipelines + </p> + </div> + </div> + </div> + + </div> + + <script src="../bower_components/jquery/dist/jquery.js"></script> + <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script> + <script src="login.js"></script> +</body> +</html> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/login.js ---------------------------------------------------------------------- diff --git a/ui/login/login.js b/ui/login/login.js new file mode 100644 index 0000000..49ae847 --- /dev/null +++ b/ui/login/login.js @@ -0,0 +1,108 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +$(document).ready(function() { + $('input:eq(1)').keyup(function(evt){ + if(evt.which == 13){//enter + evt.preventDefault(); + $('#login-btn').click(); + $('#login-btn').focus(); + } + }); + + $('input:eq(0)').focus(function(evt){ + $('#loginMsg').hide(); + }); + + $('input:eq(1)').focus(function(evt){ + $('#loginMsg').hide(); + }); + + $('#login-btn').click(function() { + + + + var name = $('input:eq(0)').val(); + var password = $('input:eq(1)').val(); + + var loginUrl = '/api/v1/login/authenticate'; + + + + loginBtnWait(); + $.ajax({ + type: 'POST', + url: loginUrl, + data: JSON.stringify({username:name, password:password}), + contentType: 'application/json', + dataType: 'json', + success: function(data){ + console.log(data); + if(data.status == 0){//logon success + //console.log($('input:eq(3)').val()); + if($('input:eq(2)').prop('checked')){ + setCookie('ntAccount', data.ntAccount, 30); + setCookie('fullName', data.fullName, 30); + }else{ + setCookie('ntAccount', data.ntAccount); + setCookie('fullName', data.fullName); + } + + loginBtnActive() + window.location.replace('/'); + }else{ + showLoginFailed(); + loginBtnActive(); + }; + }, + error: function(jqXHR, textStatus, errorThrown){ + showLoginFailed(); + loginBtnActive(); + } + + }); + }); + + function setCookie(name, value, days){ + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toGMTString(); + } else { + expires = ""; + } + document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/"; + } + + function getCookie(key) { + var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); + return keyValue ? keyValue[2] : null; + } + + function loginBtnWait() { + $('#login-btn').addClass('disabled') + .text('Logging in......'); + } + + function loginBtnActive() { + $('#login-btn').removeClass('disabled') + .text('Log in'); + } + + function showLoginFailed() { + $('#loginMsg').show() + .text('Login failed. Try again.'); + } +}); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/logo.gif ---------------------------------------------------------------------- diff --git a/ui/login/logo.gif b/ui/login/logo.gif new file mode 100644 index 0000000..689ef16 Binary files /dev/null and b/ui/login/logo.gif differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/login/pad.png ---------------------------------------------------------------------- diff --git a/ui/login/pad.png b/ui/login/pad.png new file mode 100644 index 0000000..c5c532b Binary files /dev/null and b/ui/login/pad.png differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/package.json ---------------------------------------------------------------------- diff --git a/ui/package.json b/ui/package.json new file mode 100644 index 0000000..7d3427f --- /dev/null +++ b/ui/package.json @@ -0,0 +1,27 @@ +{ + "name": "Griffin", + "version": "0.1.0", + "private": true, + "scripts": { + "start": "npm run lite", + "lite": "lite-server", + "test": "karma start tests/ut/karma.conf.js" + }, + "dependencies": {}, + "devDependencies": { + "bower": "^1.7.7", + "angular-mocks": "^1.5.3", + "frisby": "^0.8.5", + "jasmine-core": "^2.4.1", + "karma": "^0.13.22", + "karma-chrome-launcher": "^0.2.2", + "karma-coverage": "^0.5.3", + "karma-jasmine": "^0.3.8", + "karma-mocha-reporter": "^1.1.6", + "karma-phantomjs-launcher": "^1.0.0", + "karma-requirejs": "^0.2.6", + "lite-server": "^2.1.0", + "phantomjs-prebuilt": "^2.1.7", + "requirejs": "^2.2.0" + } +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/dataassets/confirmation-dataasset.html ---------------------------------------------------------------------- diff --git a/ui/pages/dataassets/confirmation-dataasset.html b/ui/pages/dataassets/confirmation-dataasset.html new file mode 100644 index 0000000..93f5145 --- /dev/null +++ b/ui/pages/dataassets/confirmation-dataasset.html @@ -0,0 +1,120 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid" id="viewruleContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div><!--//row--> + <div class="row"> + + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Asset Name: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.assetName}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Asset Type: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.type|strmap:assetTypeOptions}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + HDFS Path: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.path || 'N/A'}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Data folder pattern: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.folderFormat || 'N/A'}} + </div> + </div> + + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Platform: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.platform}} + </div> + </div> + + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Organization: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{form.data.basic.system|strmap:systemOptions}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Schema: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{form.data.basic.schema}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Owner: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{form.data.basic.owner}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Hive partition columns: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{form.data.basic.partitions}} + </div> + </div> + + + </div> + </div> + + + </div><!--//row--> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/dataassets/confirmation-delete-dataasset.html ---------------------------------------------------------------------- diff --git a/ui/pages/dataassets/confirmation-delete-dataasset.html b/ui/pages/dataassets/confirmation-delete-dataasset.html new file mode 100644 index 0000000..b397314 --- /dev/null +++ b/ui/pages/dataassets/confirmation-delete-dataasset.html @@ -0,0 +1,100 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid" id="viewruleContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div><!--//row--> + <div class="row"> + + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Asset Name: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{selectedRow.assetName}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Asset Type: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{selectedRow.assetType}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + HDFS Path: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{selectedRow.assetHDFSPath || 'N/A'}} + </div> + </div> + + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Platform: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{selectedRow.platform}} + </div> + </div> + + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Organization: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{selectedRow.system}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Schema: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{selectedRow.schema}} + </div> + </div> + + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Owner: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{selectedRow.owner}} + </div> + </div> + + + </div> + </div> + + + </div><!--//row--> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/dataassets/createdataasset.html ---------------------------------------------------------------------- diff --git a/ui/pages/dataassets/createdataasset.html b/ui/pages/dataassets/createdataasset.html new file mode 100644 index 0000000..13bbb4d --- /dev/null +++ b/ui/pages/dataassets/createdataasset.html @@ -0,0 +1,237 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid"> + <div class="row pageTitle"> + <h5 class="over-title margin-bottom-15">Register Data Asset</h5> + </div><!--//row--> + <div class="row"> + <form name="Form" id="form" novalidate> + <div id="wizard" class="swMain" > + <!-- <ul> + <li> + <a href="" class="onlyone selected" > + <div class="stepNumber"> + 1 + </div> + <span class="stepDesc text-small"> Configuration </span> + </a> + </ul> --> + + <div id="step-1" ng-show="currentStep == 1" class="formStep" > + <label class="stepDesc">Please setup the data asset required information.</label> + <div class="container-fluid"> + + <!-- schema definition list --> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <legend> + Required Information + </legend> + <div class="y-scrollable"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" ng-class="{'has-error':Form.assetName.$dirty&&Form.assetName.$invalid, 'has-success':Form.assetName.$valid}"> + <label for="assetName" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Asset Name<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.assetName" id="assetName" name="assetName" placeholder="Please input the asset name, which should be your Hive table name" required ng-pattern="'([0-9a-zA-Z\\_\\-\\.])+'"> + <span class="error text-small block " ng-if="Form.assetName.$dirty && Form.assetName.$error.required">Asset Name is required.</span> + <span class="error text-small block " ng-if="Form.assetName.$dirty && Form.assetName.$error.pattern">Only letter, number, "-", "_" and "." are allowed</span> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" ng-class="{'has-error':Form.typeSelector.$dirty&&Form.typeSelector.$invalid, 'has-success':Form.typeSelector.$valid}"> + <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Asset Type<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <select id="typeSelector" name="typeSelector" class="form-control" ng-model="form.basic.type" ng-change="updateHdfsPath(form.basic.type)" required> + <option value="">Please select...</option> + <option ng-repeat="row in assetTypeOptions" value="{{$index}}" >{{row}}</option> + </select> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" ng-class="{'has-error':Form.path.$dirty&&Form.path.$invalid, 'has-success':Form.path.$valid}"> + <label for="path" class="col-md-2 col-lg-2 col-sm-2 control-label"> + HDFS Path<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.path" id="path" name="path" placeholder="Please input the HDFS path(example: /user/b_des/yosha/dmg_complete)." required ng-pattern="regex"> + <span class="error text-small block " ng-if="Form.path.$dirty && Form.path.$error.required">Asset HDFS path is required.</span> + <span class="error text-small block" ng-if="Form.path.$error.pattern">Valid path pattern is "^\/\S(?:[0-9a-zA-Z\_\-]+\/?)+"</span> + </div> + </div> + </div> + <!-- <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Data folder pattern: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" ng-focus="showFormatInfo=true" ng-blur="showFormatInfo=false" ng-model="form.basic.folderFormat" placeholder="please input the sub folder name format where your data will be stored, such as 'dt=[YY][MM][DD]'" > + <span ng-show="showFormatInfo" class="bark-tooltiptext" >You can use [YY], [MM], [DD] and [HH], some examples here: <br/> + <b style="color:#77b300">[YYYY]/[MM]/[DD]/[HH]</b> means the hourly data could be located in the folder of "{{form.basic.path}}2016/02/03/16"<br/> + <b style="color:#77b300">[YY]-[MM]-[DD]</b> means the daily data could be located in the folder of "{{form.basic.path}}16-02-03" + </span> + </div> + </div> + </div> --> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" ng-class="{'has-error':Form.platformSelector.$dirty&&Form.platformSelector.$invalid, 'has-success':Form.platformSelector.$valid}"> + <label for="platformSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Platform<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.platform" disabled> + <!-- <select id="platformSelector" name="platformSelector" class="form-control" ng-model="form.basic.platform" ng-change="getSystemOptions(form.basic.platform)" required> + <option value="">Please select...</option> + <option ng-repeat="row in platformOptions" value="{{$index}}" >{{row.platform}}</option> + </select> --> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group" ng-class="{'has-error':Form.systemSelector.$dirty&&Form.systemSelector.$invalid, 'has-success':Form.systemSelector.$valid}"> + <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Organization<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <select id="systemSelector" name="systemSelector" class="form-control" ng-model="form.basic.system" required> + <option value="">Please select...</option> + <option ng-repeat="row in systemOptions" value="{{$index}}" >{{row}}</option> + </select> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Schema<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <div class="row"> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name<span class="symbol required"></span></label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Type<span class="symbol required"></span></label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Description</label> + <label class="col-md-4 col-lg-4 col-sm-4 text-info">Sample</label> + <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addSchema()"><i class="glyphicon glyphicon-plus"></i></span> + </div> + <div class="row" ng-repeat="item in form.basic.schema"> + <p> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/> + </span> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'stype'+$index}}" class="form-control" placeholder="type" ng-model="item.type" required/> + </span> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" class="form-control" placeholder="desc" ng-model="item.desc" /> + </span> + <span class="col-md-4 col-lg-4 col-sm-4"> + <input type="text" class="form-control" placeholder="sample" ng-model="item.sample" /> + </span> + <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.schema.length==1 || deleteSchema($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span> + </p> + </div> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Owner: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled> + </div> + </div> + </div> +<!-- + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Hive partition columns</span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <div class="row"> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name</label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">format</label> + <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addPatitionColumn()"><i class="glyphicon glyphicon-plus"></i></span> + </div> + <div class="row" ng-repeat="item in form.basic.partitions"> + <p> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/> + </span> + + <span class="col-md-2 col-lg-3 col-sm-2"> + <select id="formatSelector" name="formatSelector+$index" class="form-control" ng-model="item.format" required> + <option ng-repeat="row in formatTypeOptions" value="{{row}}" >{{row}}</option> + </select> + </span> + <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.partitions.length==0 || deletePartition($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span> + </p> + </div> + </div> + </div> + </div> --> + + </div> + + </fieldset> + + </div> + + <div class="form-group btn-container" > + <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)"> + Submit + </button> + </div> + </div> + </div> + + <div class="modal fade" id="confirm-pu" role="dialog"> + <div class="modal-dialog modal-xg modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Save the data asset with the below information?</h4> + </div> + <div class="modal-body"> + <ng-include src="'/pages/dataassets/confirmation-dataasset.html'"/> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button> + </div> + </div> + </div> + </div> + </div> + </form> + </div><!--//row--> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/dataassets/dataassets.html ---------------------------------------------------------------------- diff --git a/ui/pages/dataassets/dataassets.html b/ui/pages/dataassets/dataassets.html new file mode 100644 index 0000000..d294e8f --- /dev/null +++ b/ui/pages/dataassets/dataassets.html @@ -0,0 +1,112 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="bs-component" > + <p> + <a class="btn btn-primary btn-o btn-wide" href="#/createdataasset"><i class="fa fa-plus"></i> Register Data Asset</a> + </p> + <div id="assetContainer"> + <table st-table="displayed" st-pipe="paging" class="table table-striped"> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="10">Asset Name</th> + <th st-ratio="10">Asset Type</th> + <th st-ratio="20">Asset HDFS Path</th> + <!-- <th st-ratio="10">Platform</th> --> + <th st-ratio="10">Organization</th> + <th st-ratio="20">Creation Time</th> + <th st-ratio="10">Owner</th> + <th st-ratio="10">Action</th> + </tr> + </thead> + <tbody ng-if="!displayed || displayed.length == 0"> + <tr> + <td colspan="7" style="text-align:center">No content.</td> + </tr> + </tbody> + <tbody ng-repeat="row in displayed" style="word-break:break-all;"> + <tr> + <td ng-class="{accordion:true}" ng-click="row.showDetail=!(row.showDetail)"> + <i ng-show="!row.showDetail" class="fa fa-chevron-circle-right blue"></i> + <i ng-show="row.showDetail" class="fa fa-chevron-circle-down blue"></i> + {{row.assetName}}</td> + <td>{{row.assetType || 'N/A'}}</td> + <td>{{row.assetHDFSPath || 'N/A'}}</td> + <!-- <td>{{row.platform || 'N/A'}}</td> --> + <td>{{row.system || 'N/A'}}</td> + <td>{{(row.timestamp | date: 'short':'-0700') || 'N/A' }}</td> + <td>{{row.owner || 'N/A'}}</td> + <td> + <a ng-class="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="#/dataassets/{{row._id}}" alt="edit" title="edit"> + <i class="fa fa-pencil"></i> + </a> + + <a ng-class="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" ng-click="remove(row)" alt="delete" title="delete"> + <i class="fa fa-trash-o"></i> + </a> + </td> + </tr> + <tr ng-show="row.showDetail"> + <td colspan="7" style="padding:20px 30px 10px 30px;"> + <table st-table="rowCollection" class="table table-striped" style="word-wrap: break-word;"> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="15">Schema Name</th> + <th st-ratio="15">Schema Type</th> + <th st-ratio="15">Description</th> + <th st-ratio="15">Sample</th> + </tr> + </thead> + <tbody> + <tr ng-if="!row.schema || row.schema.length == 0"> + <td colspan="7" style="text-align:center">No content.</td> + </tr> + <tr ng-repeat="item in row.schema"> + <td>{{item.name}}</td> + <td>{{item.type}}</td> + <td>{{item.desc || 'N/A'}}</td> + <td>{{item.sample || 'N/A'}}</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td colspan="8" class="text-right"> + <div st-items-by-page="10" st-pagination="" st-displayed-pages="10"></div> + </td> + </tr> + </tfoot> + </table> + </div> + <div class="modal fade" id="confirm-delete" role="dialog"> + <div class="modal-dialog modal-xg modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Delete the data asset with the below information?</h4> + </div> + <div class="modal-body"> + <ng-include src="'/pages/dataassets/confirmation-delete-dataasset.html'"/> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" ng-click="sendDeleteRequest()">Yes</button> + <button type="button" class="btn btn-default" data-dismiss="modal">No</button> + </div> + </div> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/dataassets/editdataasset.html ---------------------------------------------------------------------- diff --git a/ui/pages/dataassets/editdataasset.html b/ui/pages/dataassets/editdataasset.html new file mode 100644 index 0000000..8d22e91 --- /dev/null +++ b/ui/pages/dataassets/editdataasset.html @@ -0,0 +1,219 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Edit Data Asset</h5> + </div><!--//row--> + <div class="row"> + <form name="Form" id="form" novalidate> + <div id="wizard" class="swMain" > + <!-- <ul> + <li> + <a href="" class="onlyone selected" > + <div class="stepNumber"> + 1 + </div> + <span class="stepDesc text-small"> Configuration </span> + </a> + </ul> --> + + <div id="step-1" ng-show="currentStep == 1" class="formStep" > + <label class="stepDesc">Please setup the data asset required information.</label> + <div class="container-fluid"> + + <!-- schema definition list --> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <legend> + Required Information + </legend> + <div class="y-scrollable"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="assetName" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Asset Name<span class="symbol required">: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.assetName" id="assetName" name="assetName" placeholder="Please input the asset name." disabled> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Asset Type<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <select id="typeSelector" name="typeSelector" class="form-control" ng-model="form.basic.type" ng-change="updateHdfsPath(form.basic.type)" disabled> + <option value="">Please select...</option> + <option ng-repeat="row in assetTypeOptions" value="{{$index}}" >{{row}}</option> + </select> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="path" class="col-md-2 col-lg-2 col-sm-2 control-label"> + HDFS Path<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.path" id="path" name="path" placeholder="Please input the HDFS path."> + <span class="error text-small block " ng-if="Form.path.$dirty && Form.path.$invalid">Asset HDFS path is required.</span> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="platformSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Platform<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" ng-model="form.basic.platform" disabled> + <!-- <select id="platformSelector" name="platformSelector" class="form-control" ng-model="form.basic.platform" ng-change="getSystemOptions(form.basic.platform)" required disabled> + <option value="">Please select...</option> + <option ng-repeat="row in platformOptions" value="{{$index}}" >{{row.platform}}</option> + </select> --> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> + Organization<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <select id="systemSelector" name="systemSelector" class="form-control" ng-model="form.basic.system" required disabled> + <option value="">Please select...</option> + <option ng-repeat="row in systemOptions" value="{{$index}}" >{{row}}</option> + </select> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Schema<span class="symbol required"></span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <div class="row"> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name<span class="symbol required"></span></label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Type<span class="symbol required"></span></label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Description</label> + <label class="col-md-4 col-lg-4 col-sm-4 text-info">Sample</label> + <!-- <span class="col-md-2 col-lg-2 col-sm-2" ng-click="addSchema()"><i class="glyphicon glyphicon-plus"></i></span> --> + </div> + <div class="row" ng-repeat="item in form.basic.schema"> + <p> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required disabled/> + </span> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'stype'+$index}}" class="form-control" placeholder="type" ng-model="item.type" required disabled/> + </span> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" class="form-control" placeholder="desc" ng-model="item.desc" /> + </span> + <span class="col-md-4 col-lg-4 col-sm-4"> + <input type="text" class="form-control" placeholder="sample" ng-model="item.sample" /> + </span> + <!-- <span class="col-md-2 col-lg-2 col-sm-2 mt5" ng-click="form.basic.schema.length==1 || deleteSchema($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span> --> + </p> + </div> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Owner: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled> + </div> + </div> + </div> + + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + time partition columns</span>: + </label> + + <div class="col-md-10 col-lg-10 col-sm-10 "> + <div class="row"> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name</label> + <label class="col-md-2 col-lg-2 col-sm-2 text-info">format</label> + <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addPatitionColumn()"><i class="glyphicon glyphicon-plus"></i></span> + </div> + <div class="row" ng-repeat="item in form.basic.partitions"> + <p> + <span class="col-md-2 col-lg-2 col-sm-2"> + <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/> + </span> + + <span class="col-md-2 col-lg-3 col-sm-2"> + <select id="formatSelector" name="formatSelector+$index" class="form-control" ng-model="item.format" required> + <option ng-repeat="row in formatTypeOptions" value="{{row}}" >{{row}}</option> + </select> + </span> + <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.partitions.length==0 || deletePartition($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span> + </p> + </div> + </div> + </div> + </div> + + + </div> + </fieldset> + + </div> + + <div class="form-group btn-container" > + <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)"> + Submit + </button> + </div> + </div> + </div> + + <div class="modal fade" id="confirm-pu" role="dialog"> + <div class="modal-dialog modal-xg modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Save the data asset with the below information?</h4> + </div> + <div class="modal-body"> + <ng-include src="'/pages/dataassets/confirmation-dataasset.html'"/> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button> + </div> + </div> + </div> + </div> + </div> + </form> + </div><!--//row--> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/health/health.html ---------------------------------------------------------------------- diff --git a/ui/pages/health/health.html b/ui/pages/health/health.html new file mode 100644 index 0000000..ceb2d65 --- /dev/null +++ b/ui/pages/health/health.html @@ -0,0 +1,39 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="bs-component"> + <ul class="nav nav-tabs "> + <li class="active"> + <a href="#heatmap" data-toggle="tab">Heatmap</a> + </li> + <li> + <a href="#topology" data-toggle="tab">Topology</a> + </li> + + </ul> +</div> + +<div class="tab-content"> + <div class="tab-pane fade active in" id="heatmap" > + <div id="chart1"></div> + </div> + <div class="tab-pane fade " id="topology"> + <!--under construction--> + <div style="height:400px;line-height:400px;text-align:center;width:100%;font-size:48px"> + <img src="/img/construction.gif" style="max-height:120px;"/> + Under construction! Coming soon! + </div> + </div> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/metrics/dashboard.html ---------------------------------------------------------------------- diff --git a/ui/pages/metrics/dashboard.html b/ui/pages/metrics/dashboard.html new file mode 100644 index 0000000..b899fc0 --- /dev/null +++ b/ui/pages/metrics/dashboard.html @@ -0,0 +1,59 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div id="dashboard" class="bs-component" > + <div class="container-fluid"> + <div class="row col-lg-12" style="margin-top: 15px;"> + <div class="form-group"> + <span> + <label>Organization: </label> + <select ng-disabled="orgSelectDisabled" class="form-control" style="padding: 4px 6px;height: 30px;width: 230px;background-color: #d1d3d2;display: inline-block;margin-left: 10px;" ng-model="selectedOrgIndex" ng-change="changeOrg()"> + <option value="">-- All --</option> + <option ng-repeat="opt in originalData" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option> + </select> + </span> + <span style="padding-left:30px;"> + <label>Data Asset: </label> + <select class="form-control" style="padding: 4px 6px;height: 30px;width: 230px;background-color: #d1d3d2;display: inline-block;margin-left: 10px;" ng-model="selectedAssetIndex" ng-change="changeAsset()"> + <option value="">-- All --</option> + <option ng-repeat="opt in assetOptions" value="{{$index}}">{{opt}}</option> + </select> + </span> + </div> + </div> + <div ng-repeat="outerItems in dashboard"> + <div class="row" > + <div class="col-sm-12 col-md-12 col-lg-12"> + <h4>{{outerItems.name}}</h4> + </div> + </div> + <div class="row"> + + <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" ng-repeat="items in outerItems.metrics" style="margin-bottom:30px;"> + + <div class="row-fluid" style="cursor: pointer;"> + <div id={{'thumbnail'+$parent.$index+'-'+$index}} ng-click="showBig(items)" class="thumb-chart" style="border: 2px solid;"></div> + <p class="text-right"> + <a href ng-click="getSample(items)" style="font-size: 11px;"> + <u>Download Sample</u> + </a> + </p> + </div> + </div> + </div> + + </div> + </div> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/metrics/download-sample.html ---------------------------------------------------------------------- diff --git a/ui/pages/metrics/download-sample.html b/ui/pages/metrics/download-sample.html new file mode 100644 index 0000000..ea5998b --- /dev/null +++ b/ui/pages/metrics/download-sample.html @@ -0,0 +1,48 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid" id="viewsample-content" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Download sample</h5> + </div><!--//row--> + <div class="row"> + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> + <div ng-if="sample.length==0">No data</div> + <div ng-if="sample.length>0" ng-repeat="item in sample"> + <span style="color: #fff"> + {{item.date | date: 'MM/dd/yy HH:mm':'-0700'}} + </span> + + <span> + {{item.path}} + </span> + + <span> + <a target="_self" href="{{downloadUrl + '/' + item.path}}" download style="font-size: 11px"> + <u>Download</u> + </a> + </span> + </div> + + </div> + <p> + Click the "Download" link to download sample data. You can also find the complete data file from the path listed above, and then you can back-fill the missed data + </p> + </div> + + + </div><!--//row--> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/metrics/metrics.css ---------------------------------------------------------------------- diff --git a/ui/pages/metrics/metrics.css b/ui/pages/metrics/metrics.css new file mode 100644 index 0000000..e41cea2 --- /dev/null +++ b/ui/pages/metrics/metrics.css @@ -0,0 +1,22 @@ +/* + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ +.thumb-chart:hover{ + transform: scale(1.05, 1.05); + box-shadow: 0 1px 2px 2px #ccc; +} + +.side-chart:hover { + box-shadow: 0 1px 2px 2px #ccc; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/mydashboard/confirmation-subscribe.html ---------------------------------------------------------------------- diff --git a/ui/pages/mydashboard/confirmation-subscribe.html b/ui/pages/mydashboard/confirmation-subscribe.html new file mode 100644 index 0000000..d75d1ac --- /dev/null +++ b/ui/pages/mydashboard/confirmation-subscribe.html @@ -0,0 +1,38 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div class="container-fluid" id="viewruleContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div><!--//row--> + <div class="row"> + + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Subscribe info: + </label> + + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + <pre style="background-color: #202020; color: #fff; max-height: 500px;">{{form.data | json}}</pre> + </div> + </div> + </div> + </div> + + + </div><!--//row--> + +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/9b67bab1/ui/pages/mydashboard/mydashboard.html ---------------------------------------------------------------------- diff --git a/ui/pages/mydashboard/mydashboard.html b/ui/pages/mydashboard/mydashboard.html new file mode 100644 index 0000000..4d66914 --- /dev/null +++ b/ui/pages/mydashboard/mydashboard.html @@ -0,0 +1,44 @@ +<!-- + Copyright (c) 2016 eBay Software Foundation. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + --> +<div id="mydashboard" class="bs-component" > + <div class="container-fluid"> + <div class="row col-lg-12" style="margin-top: 15px;"> + <a class="btn btn-primary btn-o btn-wide" href="#/subscribemodel"><i class="fa fa-plus"></i> Subscribe Models</a> + </div> + <div ng-repeat="outerItems in dashboard"> + <div class="row" > + <div class="col-sm-12 col-md-12 col-lg-12"> + <h4>{{outerItems.name}}</h4> + </div> + </div> + <div class="row"> + + <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" ng-repeat="items in outerItems.metrics" style="margin-bottom:30px;"> + + <div class="row-fluid" style="cursor: pointer;"> + <div id={{'thumbnail'+$parent.$index+'-'+$index}} ng-click="showBig(items)" class="thumb-chart" style="border: 2px solid;"></div> + <p class="text-right"> + <a href ng-click="getSample(items)" style="font-size: 11px;"> + <u>Download Sample</u> + </a> + </p> + </div> + </div> + </div> + + </div> + </div> + +</div>
