From 64d80ceb749a04c48472c26856b2213f60de7256 Mon Sep 17 00:00:00 2001 From: Ar Date: Mon, 18 Feb 2019 22:17:30 +0800 Subject: [PATCH 01/21] Set reverse proxy of webpack --- smart-zeppelin/zeppelin-web/webpack.config.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/smart-zeppelin/zeppelin-web/webpack.config.js b/smart-zeppelin/zeppelin-web/webpack.config.js index b84ae7d3f3f..bb487316fc6 100644 --- a/smart-zeppelin/zeppelin-web/webpack.config.js +++ b/smart-zeppelin/zeppelin-web/webpack.config.js @@ -104,7 +104,7 @@ module.exports = function makeWebpackConfig () { // Output path from the view of the page // Uses webpack-dev-server in development - publicPath: isProd ? '' : 'http://localhost:9000/', + publicPath: isProd ? '' : 'http://localhost:1234/', // Filename for entry points // Only adds hash in build mode @@ -268,7 +268,7 @@ module.exports = function makeWebpackConfig () { */ config.devServer = { historyApiFallback: true, - port: 9000, + port: 1234, inline: true, hot: true, progress: true, @@ -279,6 +279,16 @@ module.exports = function makeWebpackConfig () { require('express').static(path.join(__dirname, './bower_components/'))); }, stats: 'minimal', + proxy: { + '/api': 'http://localhost:7045', + '/smart/api/v1/cluster/primary/hist_utilization': 'https://www.easy-mock.com/mock/5c685d51c5d6817e50999e8d/smart/api/v1/cluster/primary/hist_utilization/cache', + '/smart/api': 'http://localhost:7045', + '/extensions': 'http://localhost:7045', + '/jax': 'http://localhost:7045', + '/liverload.js': 'http://localhost:7045', + // secure: false, + // changeOrigin: true + } }; return config; From 1ef5060d2f0739fd67b1c66858d98105f8e4e996 Mon Sep 17 00:00:00 2001 From: Ar Date: Tue, 19 Feb 2019 01:11:35 +0800 Subject: [PATCH 02/21] Change original charts to thumbnail and add a universal charts to show details. --- .../views/cluster/storage/bigChart.js | 97 ++++++ .../views/cluster/storage/storage.js | 26 +- .../views/cluster/storage/storages.html | 37 ++- .../zeppelin-web/src/assets/resp.json | 300 ++++++++++++++++++ smart-zeppelin/zeppelin-web/src/index.js | 1 + 5 files changed, 446 insertions(+), 15 deletions(-) create mode 100644 smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js create mode 100644 smart-zeppelin/zeppelin-web/src/assets/resp.json diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js new file mode 100644 index 00000000000..7d3e7885796 --- /dev/null +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js @@ -0,0 +1,97 @@ +/* + * 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. + */ + +import AreachartVisualization from '../../../../visualization/builtins/storage-areachart'; +angular.module('zeppelinWebApp').controller('BigChartCtrl', BigChartCtrl); +BigChartCtrl.$inject = ['$scope', 'baseUrlSrv', '$filter', '$http', 'conf', '$interval', '$rootScope']; +function BigChartCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $rootScope) { + var tableData = { + columns: [ + {name: 'time', index: 0, aggr: 'sum'}, + {name: 'value(%)', index: 1, aggr: 'sum'} + ], + rows:[], + comment: '' + }; + var config = {}; + + var timeGranularity = 60; + var timeRegular = 'HH:mm'; + + var builtInViz; + + var getStorageData = function () { + // $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' + // + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') + $http.get('assets/resp.json') + .then(function(response) { + var storageData = angular.fromJson(response.data).body; + var rows = new Array(); + angular.forEach(storageData, function (data, index) { + rows.push([$filter('date')(new Date(data.timeStamp), timeRegular), + (data.used / data.total * 100).toFixed(2)]); + }); + tableData.rows = rows; + initAreaChart(); + }); + }; + + $scope.initStorage = function (storage) { + $scope.storageType = storage; + getStorageData(); + }; + + $scope.selectTimeGranularity = function (time) { + if (time === 0) { + timeGranularity = 60; + timeRegular = 'HH:mm' + } else if (time === 1) { + timeGranularity = 3600; + timeRegular = 'dd HH:mm' + } else if (time === 2) { + timeGranularity = 3600 * 24; + timeRegular = 'MM-dd' + } + getStorageData(); + }; + + var initAreaChart = function() { + var targetEl = angular.element('#bigChart'); + //generate area chart. + targetEl.height(300); + if (!builtInViz) { + builtInViz = new AreachartVisualization(targetEl, config); + angular.element(window).resize(function () { + builtInViz.resize(); + }); + } + + var transformation = builtInViz.getTransformation(); + var transformed = transformation.transform(tableData); + builtInViz.render(transformed); + builtInViz.activate(); + }; + + var timer=$interval(function(){ + getStorageData(); + },30000); + + $scope.$on('$destroy',function(){ + $interval.cancel(timer); + }); + + $rootScope.$on('$bigChartInit', function (event, storageType) { + $scope.initStorage(storageType); + }) +} diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js index 0f45b677fcc..5541cfb752f 100644 --- a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js @@ -14,15 +14,15 @@ import AreachartVisualization from '../../../../visualization/builtins/storage-areachart'; angular.module('zeppelinWebApp').controller('StorageCtrl', StorageCtrl); -StorageCtrl.$inject = ['$scope', 'baseUrlSrv', '$filter', '$http', 'conf', '$interval']; -function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval) { +StorageCtrl.$inject = ['$scope', 'baseUrlSrv', '$filter', '$http', 'conf', '$interval', '$rootScope']; +function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $rootScope) { var tableData = { columns: [ - {name: "time", index: 0, aggr: "sum"}, - {name: "value(%)", index: 1, aggr: "sum"} + {name: 'time', index: 0, aggr: 'sum'}, + {name: 'value(%)', index: 1, aggr: 'sum'} ], rows:[], - comment: "" + comment: '' }; var config = {}; @@ -32,8 +32,9 @@ function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval) { var builtInViz; var getStorageData = function () { - $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' - + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') + // $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' + // + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') + $http.get('assets/resp.json') .then(function(response) { var storageData = angular.fromJson(response.data).body; var rows = new Array(); @@ -68,7 +69,7 @@ function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval) { var initAreaChart = function() { var targetEl = angular.element('#' + $scope.storageType); //generate area chart. - targetEl.height(300); + targetEl.height(150); if (!builtInViz) { builtInViz = new AreachartVisualization(targetEl, config); angular.element(window).resize(function () { @@ -89,4 +90,13 @@ function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval) { $scope.$on('$destroy',function(){ $interval.cancel(timer); }); + + $scope.showBigChart = function (storageType) { + let bigChartModal = angular.element('#bigChartModal'); + $rootScope.$emit('$bigChartInit', storageType); + bigChartModal.modal({ + backdrop: 'static', + keyboard: true + }); + }; } diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html index 6cbd16a41fa..ae64238edcb 100644 --- a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html @@ -15,15 +15,38 @@
+ ng-click="showBigChart(storage)" + class="col-md-2 box">

{{storage|uppercase}} Utilization

-
-
- - - +
+
+ +
diff --git a/smart-zeppelin/zeppelin-web/src/assets/resp.json b/smart-zeppelin/zeppelin-web/src/assets/resp.json new file mode 100644 index 00000000000..383ad0f9390 --- /dev/null +++ b/smart-zeppelin/zeppelin-web/src/assets/resp.json @@ -0,0 +1,300 @@ +{ + "status": "OK", + "body": [ + { + "timeStamp": 1550310900001, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900002, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900003, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900004, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900005, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900006, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900007, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900008, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900009, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900010, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900011, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900012, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900013, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900014, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900015, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900016, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900017, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900018, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900019, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900020, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900021, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900022, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900023, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900024, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900025, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900026, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900027, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900028, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900029, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900030, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900031, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900032, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900033, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900034, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900035, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900036, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900037, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900038, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900039, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900040, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900041, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900042, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900043, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900044, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900045, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900046, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900047, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900048, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900049, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900050, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900051, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900052, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900053, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900054, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900055, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900056, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900057, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900058, + "total": 0, + "used": 0 + }, + { + "timeStamp": 1550310900059, + "total": 0, + "used": 0 + } + ] +} diff --git a/smart-zeppelin/zeppelin-web/src/index.js b/smart-zeppelin/zeppelin-web/src/index.js index 5d72d0fc1f2..1ee2fa822ec 100644 --- a/smart-zeppelin/zeppelin-web/src/index.js +++ b/smart-zeppelin/zeppelin-web/src/index.js @@ -73,6 +73,7 @@ import './app/dashboard/services/models/models.js'; import './app/dashboard/views/cluster/cluster_hottestFiles.js'; import './app/dashboard/views/cluster/cluster_fileInCache.js'; import './app/dashboard/views/cluster/storage/storage.js'; +import './app/dashboard/views/cluster/storage/bigChart.js' import './app/dashboard/views/cluster/nodeinfo/nodes.js'; import './app/dashboard/views/cluster/storage/storages.js'; import './app/dashboard/views/actions/actions.js'; From c3a0a89791387c8ee44ccf40f04a8ab7cbff4dd1 Mon Sep 17 00:00:00 2001 From: Ar Date: Tue, 19 Feb 2019 16:59:35 +0800 Subject: [PATCH 03/21] Build release web ui --- .../views/cluster/storage/bigChart.css | 14 +++++++++ .../views/cluster/storage/bigChart.js | 15 ++++++--- .../views/cluster/storage/storage.js | 6 ++-- .../views/cluster/storage/storages.html | 31 +++++++++++++------ smart-zeppelin/zeppelin-web/src/index.html | 1 + smart-zeppelin/zeppelin-web/webpack.config.js | 5 ++- 6 files changed, 54 insertions(+), 18 deletions(-) create mode 100644 smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.css diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.css b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.css new file mode 100644 index 00000000000..b7867424c26 --- /dev/null +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.css @@ -0,0 +1,14 @@ +.thumbnail-thumbnail-margin-right { + margin-right: 10px; +} + +.storage-thumbnail { + position: relative; + transition: all 0.4s; + cursor: pointer; +} + +.storage-thumbnail:hover { + top: -5px; + box-shadow: 0 5px 25px -6px #8f8f8f ; +} diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js index 7d3e7885796..cb95ae17c92 100644 --- a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/bigChart.js @@ -32,9 +32,9 @@ function BigChartCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $root var builtInViz; var getStorageData = function () { - // $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' - // + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') - $http.get('assets/resp.json') + $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' + + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') + // $http.get('assets/resp.json') .then(function(response) { var storageData = angular.fromJson(response.data).body; var rows = new Array(); @@ -69,7 +69,7 @@ function BigChartCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $root var initAreaChart = function() { var targetEl = angular.element('#bigChart'); //generate area chart. - targetEl.height(300); + targetEl.height(500); if (!builtInViz) { builtInViz = new AreachartVisualization(targetEl, config); angular.element(window).resize(function () { @@ -83,6 +83,13 @@ function BigChartCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $root builtInViz.activate(); }; + $(document).on('shown.bs.modal', function () { + let fixBigChartSize = document.createEvent('MouseEvents'); + fixBigChartSize.initEvent('click', true, true); + document.querySelector('#bigChartModal .nv-legend-text').dispatchEvent(fixBigChartSize); + } + ); + var timer=$interval(function(){ getStorageData(); },30000); diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js index 5541cfb752f..1277f44a361 100644 --- a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storage.js @@ -32,9 +32,9 @@ function StorageCtrl($scope, baseUrlSrv, $filter, $http, conf, $interval, $rootS var builtInViz; var getStorageData = function () { - // $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' - // + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') - $http.get('assets/resp.json') + $http.get(baseUrlSrv.getSmartApiRoot() + conf.restapiProtocol + '/cluster/primary/hist_utilization/' + + $scope.storageType + '/' + timeGranularity + '000/-' + timeGranularity * 60 + '000/0') + // $http.get('assets/resp.json') .then(function(response) { var storageData = angular.fromJson(response.data).body; var rows = new Array(); diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html index ae64238edcb..97efb30379c 100644 --- a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html +++ b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/cluster/storage/storages.html @@ -16,8 +16,8 @@ ng-controller="StorageCtrl" ng-init="initStorage(storage);" ng-click="showBigChart(storage)" - class="col-md-2 box"> -

{{storage|uppercase}} Utilization

+ class="col-md-2 box thumbnail-thumbnail-margin-right storage-thumbnail"> +

{{storage|uppercase}} Utilization

@@ -27,22 +27,33 @@

{{storage|uppercase}} Utilization