You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2017/03/03 12:16:11 UTC
[05/51] [partial] incubator-griffin git commit: Init move
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/js/services/bark-chart.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/services/bark-chart.js b/griffin-ui/js/services/bark-chart.js
new file mode 100644
index 0000000..05a10c0
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/js/services/index.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/services/index.js b/griffin-ui/js/services/index.js
new file mode 100644
index 0000000..17a5aa7
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/js/services/module.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/services/module.js b/griffin-ui/js/services/module.js
new file mode 100644
index 0000000..f8fbecb
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/js/services/services.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/services/services.js b/griffin-ui/js/services/services.js
new file mode 100644
index 0000000..6c3dbeb
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/login/b3vHigh.jpg
----------------------------------------------------------------------
diff --git a/griffin-ui/login/b3vHigh.jpg b/griffin-ui/login/b3vHigh.jpg
new file mode 100644
index 0000000..0d6949d
Binary files /dev/null and b/griffin-ui/login/b3vHigh.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/login/background.jpg
----------------------------------------------------------------------
diff --git a/griffin-ui/login/background.jpg b/griffin-ui/login/background.jpg
new file mode 100644
index 0000000..70e05c1
Binary files /dev/null and b/griffin-ui/login/background.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/login/login.css
----------------------------------------------------------------------
diff --git a/griffin-ui/login/login.css b/griffin-ui/login/login.css
new file mode 100644
index 0000000..5b2f037
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/login/login.html
----------------------------------------------------------------------
diff --git a/griffin-ui/login/login.html b/griffin-ui/login/login.html
new file mode 100644
index 0000000..5052545
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/login/login.js
----------------------------------------------------------------------
diff --git a/griffin-ui/login/login.js b/griffin-ui/login/login.js
new file mode 100644
index 0000000..49ae847
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/login/logo.gif
----------------------------------------------------------------------
diff --git a/griffin-ui/login/logo.gif b/griffin-ui/login/logo.gif
new file mode 100644
index 0000000..689ef16
Binary files /dev/null and b/griffin-ui/login/logo.gif differ
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/login/pad.png
----------------------------------------------------------------------
diff --git a/griffin-ui/login/pad.png b/griffin-ui/login/pad.png
new file mode 100644
index 0000000..c5c532b
Binary files /dev/null and b/griffin-ui/login/pad.png differ
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/package.json
----------------------------------------------------------------------
diff --git a/griffin-ui/package.json b/griffin-ui/package.json
new file mode 100644
index 0000000..7d3427f
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/dataassets/confirmation-dataasset.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/dataassets/confirmation-dataasset.html b/griffin-ui/pages/dataassets/confirmation-dataasset.html
new file mode 100644
index 0000000..93f5145
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/dataassets/confirmation-delete-dataasset.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/dataassets/confirmation-delete-dataasset.html b/griffin-ui/pages/dataassets/confirmation-delete-dataasset.html
new file mode 100644
index 0000000..b397314
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/dataassets/createdataasset.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/dataassets/createdataasset.html b/griffin-ui/pages/dataassets/createdataasset.html
new file mode 100644
index 0000000..13bbb4d
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/dataassets/dataassets.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/dataassets/dataassets.html b/griffin-ui/pages/dataassets/dataassets.html
new file mode 100644
index 0000000..d294e8f
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/dataassets/editdataasset.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/dataassets/editdataasset.html b/griffin-ui/pages/dataassets/editdataasset.html
new file mode 100644
index 0000000..8d22e91
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/health/health.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/health/health.html b/griffin-ui/pages/health/health.html
new file mode 100644
index 0000000..ceb2d65
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/metrics/dashboard.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/metrics/dashboard.html b/griffin-ui/pages/metrics/dashboard.html
new file mode 100644
index 0000000..b899fc0
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/metrics/download-sample.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/metrics/download-sample.html b/griffin-ui/pages/metrics/download-sample.html
new file mode 100644
index 0000000..ea5998b
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/metrics/metrics.css
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/metrics/metrics.css b/griffin-ui/pages/metrics/metrics.css
new file mode 100644
index 0000000..e41cea2
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/mydashboard/confirmation-subscribe.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/mydashboard/confirmation-subscribe.html b/griffin-ui/pages/mydashboard/confirmation-subscribe.html
new file mode 100644
index 0000000..d75d1ac
--- /dev/null
+++ b/griffin-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/a8ba6ba9/griffin-ui/pages/mydashboard/mydashboard.html
----------------------------------------------------------------------
diff --git a/griffin-ui/pages/mydashboard/mydashboard.html b/griffin-ui/pages/mydashboard/mydashboard.html
new file mode 100644
index 0000000..4d66914
--- /dev/null
+++ b/griffin-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>