From ebaca787c3be336e8b72867a563913f475fb583a Mon Sep 17 00:00:00 2001 From: zombieJ Date: Wed, 25 Jan 2017 15:01:27 +0800 Subject: [PATCH 1/5] add queue list --- .../webapp/app/apps/jpm/ctrl/queueCtrl.js | 69 +++++++++++++++++++ .../src/main/webapp/app/apps/jpm/index.js | 12 +++- .../app/apps/jpm/partials/queue/overview.html | 19 +++++ 3 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js create mode 100644 eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js new file mode 100644 index 0000000000..f894e7aadf --- /dev/null +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js @@ -0,0 +1,69 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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. + */ + +(function () { + /** + * `register` without params will load the module which using require + */ + register(function (jpmApp) { + jpmApp.controller("queueCtrl", function ($q, $wrapState, $element, $scope, $timeout, PageConfig, Time, Entity, JPM) { + PageConfig.title = "Queue"; + PageConfig.subTitle = "Overview"; + + $scope.site = $wrapState.param.siteId; + + $scope.refresh = function () { + console.log('refresh!!!'); + + var startTime = new Time('startTime'); + var endTime = new Time('endTime'); + var intervalMin = Time.diffInterval(startTime, endTime) / 1000 / 60; + JPM.aggMetricsToEntities( + JPM.groups('RunningQueueService', { site: $scope.site }, ['queue', 'parentQueue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) + )._promise.then(function (list) { + /* $scope.topUserJobCountTrendSeries = $.map(list, function (subList) { + return JPM.metricsToSeries(subList[0].tags.user, subList, { + stack: "user", + areaStyle: {normal: {}} + }); + }); + + var flatten = flattenTrendSeries("User", $scope.topUserJobCountTrendSeries); + $scope.topUserJobCountSeries = flatten.series; + $scope.topUserJobCountSeriesCategory = flatten.category; */ + console.log('~>', list); + + $scope.queueTrendSeries = $.map(list, function (subList) { + // console.log('>>>', subList); + + return JPM.metricsToSeries(subList[0].tags.queue, subList, { + stack: "queue", + areaStyle: {normal: {}} + }); + }); + console.log('=>', $scope.queueTrendSeries); + }); + }; + + Time.onReload(function () { + $scope.refresh(); + }, $scope); + $scope.refresh(); + }); + }); +})(); diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js index 7348853e47..b494dc30a1 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js @@ -55,18 +55,25 @@ reloadOnSearch: false, templateUrl: "partials/job/compare.html", controller: "compareCtrl" + + }).route("jpmQueue", { + url: "/jpm/queue?startTime&endTime", + site: true, + templateUrl: "partials/queue/overview.html", + controller: "queueCtrl", + resolve: { time: true } }); jpmApp.portal({name: "YARN Jobs", icon: "taxi", list: [ {name: "Overview", path: "jpm/overview"}, {name: "Job Statistics", path: "jpm/statistics"}, - {name: "Job List", path: "jpm/list"} + {name: "Job List", path: "jpm/list"}, + {name: "Queue", path: "jpm/queue"} ]}, true); jpmApp.service("JPM", function ($q, $http, Time, Site, Application) { var JPM = window._JPM = {}; - // TODO: timestamp support JPM.QUERY_LIST = '${baseURL}/rest/entities?query=${query}[${condition}]{${fields}}&pageSize=${limit}&startTime=${startTime}&endTime=${endTime}'; JPM.QUERY_GROUPS = '${baseURL}/rest/entities?query=${query}[${condition}]<${groups}>{${field}}${order}${top}&pageSize=${limit}&startTime=${startTime}&endTime=${endTime}'; JPM.QUERY_GROUPS_INTERVAL = '${baseURL}/rest/entities?query=${query}[${condition}]<${groups}>{${field}}${order}${top}&pageSize=${limit}&startTime=${startTime}&endTime=${endTime}&intervalmin=${intervalMin}&timeSeries=true'; @@ -484,4 +491,5 @@ jpmApp.require("ctrl/detailCtrl.js"); jpmApp.require("ctrl/jobTaskCtrl.js"); jpmApp.require("ctrl/compareCtrl.js"); + jpmApp.require("ctrl/queueCtrl.js"); })(); diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html new file mode 100644 index 0000000000..77919179e1 --- /dev/null +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html @@ -0,0 +1,19 @@ + + +Hello World!!! \ No newline at end of file From 3e9f56d64a4d739950a1b52a1dcc0c79c2c4fa56 Mon Sep 17 00:00:00 2001 From: zombieJ Date: Mon, 6 Feb 2017 14:41:25 +0800 Subject: [PATCH 2/5] udpate nav page --- .../src/main/webapp/app/dev/index.html | 6 +-- .../main/webapp/app/dev/public/css/main.css | 9 ++++ .../app/dev/public/js/services/pageSrv.js | 41 ++++++++++++++++++- eagle-server/src/main/webapp/app/package.json | 2 +- 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/eagle-server/src/main/webapp/app/dev/index.html b/eagle-server/src/main/webapp/app/dev/index.html index 74d5c579e2..26b12ee0e8 100644 --- a/eagle-server/src/main/webapp/app/dev/index.html +++ b/eagle-server/src/main/webapp/app/dev/index.html @@ -162,13 +162,13 @@

    -
  1. +
  2. - + {{navPath.title || navPath.path}} - + {{navPath.title || navPath.path}}
    3. diff --git a/eagle-server/src/main/webapp/app/dev/public/css/main.css b/eagle-server/src/main/webapp/app/dev/public/css/main.css index 895d514494..85835136d2 100644 --- a/eagle-server/src/main/webapp/app/dev/public/css/main.css +++ b/eagle-server/src/main/webapp/app/dev/public/css/main.css @@ -277,6 +277,15 @@ ul.stepGuide li > .title { overflow-x: auto; } +.box-header > .box-tools { + white-space: nowrap; +} + +.box-header > .box-tools > .form-control { + display: inline-block; + width: initial; +} + /* ======================================================================== * = Tab = * ======================================================================== */ diff --git a/eagle-server/src/main/webapp/app/dev/public/js/services/pageSrv.js b/eagle-server/src/main/webapp/app/dev/public/js/services/pageSrv.js index 2c6108729a..f4ea2f44f4 100644 --- a/eagle-server/src/main/webapp/app/dev/public/js/services/pageSrv.js +++ b/eagle-server/src/main/webapp/app/dev/public/js/services/pageSrv.js @@ -24,7 +24,7 @@ // ============================================================ // = Page = // ============================================================ - serviceModule.service('PageConfig', function() { + serviceModule.service('PageConfig', function($wrapState) { function PageConfig() { } @@ -35,6 +35,45 @@ PageConfig.hideTitle = false; }; + var cachedNavPath = []; + var cachedGenNavPath = []; + PageConfig.getNavPath = function () { + if (cachedNavPath !== PageConfig.navPath || cachedGenNavPath.length !== cachedNavPath.length) { + cachedNavPath = PageConfig.navPath; + cachedGenNavPath = $.map(cachedNavPath, function (navPath) { + var pathEntity = $.extend({}, navPath); + + if (!pathEntity.path || !pathEntity.param) return pathEntity; + + // Parse param as `key=value` format + var params = {}; + $.each(pathEntity.param, function (i, param) { + if (!param) return; + + var match = param.match(/^([^=]+)(=(.*))?$/); + var key = match[1]; + var value = match[3]; + params[key] = value !== undefined ? value : $wrapState.param[key]; + }); + + // Generate path with param + var path = "/" + pathEntity.path.replace(/^[\\\/]/, ""); + if (params.siteId) { + pathEntity.path = "/site/" + $wrapState.param.siteId + path; + delete params.siteId; + } else { + pathEntity.path = path; + } + pathEntity.path += '?' + $.map(params, function (value, key) { + return key + '=' + value; + }).join('&'); + + return pathEntity; + }); + } + return cachedGenNavPath; + }; + return PageConfig; }); diff --git a/eagle-server/src/main/webapp/app/package.json b/eagle-server/src/main/webapp/app/package.json index 4ee3eda924..2c5d272d6e 100644 --- a/eagle-server/src/main/webapp/app/package.json +++ b/eagle-server/src/main/webapp/app/package.json @@ -23,7 +23,7 @@ "angular-ui-router": "0.3.1", "bootstrap": "3.3.6", "d3": "3.5.16", - "echarts": "^3.3.2", + "echarts": "^3.4.0", "font-awesome": "4.7.0", "jquery": "2.2.4", "jquery-slimscroll": "1.3.6", From 84ecee7bbe26ef4ed9a764a0e0119220dfb7460c Mon Sep 17 00:00:00 2001 From: zombieJ Date: Mon, 6 Feb 2017 20:07:12 +0800 Subject: [PATCH 3/5] queue support lines --- .../webapp/app/apps/jpm/ctrl/queueCtrl.js | 159 +++++++++++++++--- .../src/main/webapp/app/apps/jpm/index.js | 36 ++-- .../app/apps/jpm/partials/queue/overview.html | 40 ++++- .../main/webapp/app/apps/jpm/style/index.css | 8 + 4 files changed, 207 insertions(+), 36 deletions(-) diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js index f894e7aadf..4bff893f17 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js @@ -21,42 +21,160 @@ * `register` without params will load the module which using require */ register(function (jpmApp) { + var QUEUE_ROOT = 'unassigned'; + jpmApp.controller("queueCtrl", function ($q, $wrapState, $element, $scope, $timeout, PageConfig, Time, Entity, JPM) { + $scope.site = $wrapState.param.siteId; + $scope.currentQueue = $wrapState.param.queue; + $scope.selectedQueue = ''; + $scope.selectedSubQueue = ''; + $scope.trendLoading = true; + PageConfig.title = "Queue"; - PageConfig.subTitle = "Overview"; + PageConfig.subTitle = $scope.currentQueue || "Overview"; + var navPath = PageConfig.navPath = []; - $scope.site = $wrapState.param.siteId; + $scope.chartOption = { + tooltip: { + formatter: function (points) { + return points[0].name + "
    " + + $.map(points, function (point) { + return ' ' + + point.seriesName + ": " + + Math.floor(point.value) + '%'; + }).reverse().join("
    "); + } + }, + yAxis: [{ + axisLabel: {formatter: function (value) { + return value + '%'; + }} + }] + }; - $scope.refresh = function () { - console.log('refresh!!!'); + // Load queue tree + (function () { + var startTime = new Time('startTime'); + var endTime = startTime.clone().add(1, 'h'); + JPM + .groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue', 'parentQueue'], 'count', 60, startTime, endTime) + ._promise + .then(function (list) { + $.each(list, function (i, entity) { + var parent = entity.key[1]; + $scope.parentQueue = parent === QUEUE_ROOT ? null : parent; + + // Update navigation path + navPath.push( + { + title: $scope.parentQueue || 'queue list', + icon: 'sitemap', + param: ['siteId', 'startTime', 'endTime', $scope.parentQueue && 'queue=' + $scope.parentQueue], + path: "/jpm/queue" + }, + {title: $scope.currentQueue} + ); + return false; + }); + }); + })(); + + // Refresh Trend Chart + $scope.refresh = function () { + $scope.trendLoading = true; var startTime = new Time('startTime'); var endTime = new Time('endTime'); var intervalMin = Time.diffInterval(startTime, endTime) / 1000 / 60; - JPM.aggMetricsToEntities( - JPM.groups('RunningQueueService', { site: $scope.site }, ['queue', 'parentQueue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) + var condition = {site: $scope.site}; + if ($scope.currentQueue) condition.parentQueue = $scope.currentQueue; + + var promiseList = []; + // Load sub queue trend + promiseList.push(JPM.aggMetricsToEntities( + JPM.groups('RunningQueueService', condition, ['queue', 'parentQueue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) )._promise.then(function (list) { - /* $scope.topUserJobCountTrendSeries = $.map(list, function (subList) { - return JPM.metricsToSeries(subList[0].tags.user, subList, { - stack: "user", + // Filter top queue + var queueTrendSeries = $.map(list, function (subList) { + var tags = subList[0].tags; + if (!$scope.currentQueue && tags.parentQueue !== QUEUE_ROOT) return; + + return JPM.metricsToSeries(subList[0].tags.queue, subList, { + stack: "queue", areaStyle: {normal: {}} }); }); - var flatten = flattenTrendSeries("User", $scope.topUserJobCountTrendSeries); - $scope.topUserJobCountSeries = flatten.series; - $scope.topUserJobCountSeriesCategory = flatten.category; */ - console.log('~>', list); + $scope.selectedQueue = common.getValueByPath(queueTrendSeries, ['0', 'name']); + $scope.refreshQueueStatistic(); - $scope.queueTrendSeries = $.map(list, function (subList) { - // console.log('>>>', subList); + return queueTrendSeries; + // $scope.trendLoading = false; + })); - return JPM.metricsToSeries(subList[0].tags.queue, subList, { - stack: "queue", - areaStyle: {normal: {}} + // Load parent capacity line + if ($scope.currentQueue) { + var DISPLAY_MARK_NAME = ['Guaranteed Capacity', 'Max Capacity']; + promiseList.push(JPM.aggMetricsToEntities( + JPM.groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue'], 'max(absoluteCapacity), max(absoluteMaxCapacity)', intervalMin, startTime, endTime) + )._promise.then(function (list) { + return $.map(list, function (valueSeries, i) { + var pointValue = common.getValueByPath(valueSeries, [0, 'value', 0]); + + return JPM.metricsToSeries(DISPLAY_MARK_NAME[i], valueSeries, { + markPoint: { + silent: true, + label: { + normal: { + formatter: function () { + return DISPLAY_MARK_NAME[i]; + }, + position: 'insideRight', + textStyle: { + color: '#337ab7', + fontWeight: 'bolder', + fontSize: 14, + } + } + }, + data: [ + { + name: '', + coord: [valueSeries.length - 1, pointValue], + symbolSize: 40, + itemStyle: { + normal: {color: 'rgba(0,0,0,0)'} + } + } + ], + }, + lineStyle: { + normal: { type: 'dashed' } + } + }); }); - }); - console.log('=>', $scope.queueTrendSeries); + })); + } + + $q.all(promiseList).then(function (seriesList) { + $scope.queueTrendSeries = seriesList[0]; + if (seriesList[1]) $scope.queueTrendSeries = $scope.queueTrendSeries.concat(seriesList[1]); + $scope.trendLoading = false; + }); + }; + + // Refresh Queue static info + $scope.refreshQueueStatistic = function () { + var startTime = new Time('startTime'); + var endTime = new Time('endTime'); + }; + + // Go to sub queue view + $scope.switchToSubQueue = function () { + $wrapState.go(".", { + queue: $scope.selectedSubQueue, + startTime: Time.format('startTime'), + endTime: Time.format('endTime'), }); }; @@ -64,6 +182,7 @@ $scope.refresh(); }, $scope); $scope.refresh(); + }); }); })(); diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js index b494dc30a1..234c539b05 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/index.js @@ -57,7 +57,7 @@ controller: "compareCtrl" }).route("jpmQueue", { - url: "/jpm/queue?startTime&endTime", + url: "/jpm/queue?queue&startTime&endTime", site: true, templateUrl: "partials/queue/overview.html", controller: "queueCtrl", @@ -149,6 +149,7 @@ }; JPM.condition = function (condition) { + if (typeof condition === 'string') return condition; return $.map(condition, function (value, key) { return "@" + key + '="' + value + '"'; }).join(" AND "); @@ -196,7 +197,8 @@ _list._aggInfo = { groups: groups, startTime: Time(startTime).valueOf(), - interval: intervalMin * 60 * 1000 + interval: intervalMin * 60 * 1000, + order: fields[orderId] }; _list._promise.then(function () { if(top) _list.reverse(); @@ -317,7 +319,7 @@ _list._aggInfo = { groups: groups, startTime: Time(startTime).valueOf(), - interval: intervalMin * 60 * 1000 + interval: intervalMin * 60 * 1000, }; _list._promise.then(function () { _list.reverse(); @@ -338,19 +340,23 @@ tags[group] = obj.key[j]; }); - var _subList = $.map(obj.value[0], function (value, index) { - return { - timestamp: _startTime + index * _interval, - value: [value], - tags: tags - }; - }); + $.each(obj.value, function (j, values) { + if (list._aggInfo.order && j === list.length - 1) return; - if(flatten) { - _list.push.apply(_list, _subList); - } else { - _list.push(_subList); - } + var _subList = $.map(values, function (value, index) { + return { + timestamp: _startTime + index * _interval, + value: [value], + tags: tags + }; + }); + + if(flatten) { + _list.push.apply(_list, _subList); + } else { + _list.push(_subList); + } + }); }); _list.done = true; return _list; diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html index 77919179e1..35e29f54e9 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html @@ -16,4 +16,42 @@ limitations under the License. --> -Hello World!!! \ No newline at end of file +
    +
    +

    + Queue Capacity Trend +

    +
    + +
    +
    +
    +
    +
    +

    No Data

    +
    +
    + +
    + +
    +
    + +
    +
      +
    • User
      • +
    • Job
      • + +
    • + +
      • +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/style/index.css b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/style/index.css index fbe238f001..f63d67c97f 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/style/index.css +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/style/index.css @@ -39,6 +39,14 @@ height: 350px; } +.jpm-chart .jpm-chart-tip { + position: absolute; + top: 50%; + margin: -20px 0 0 0; + width: 100%; + text-align: center; +} + .with-border .jpm-chart { padding-bottom: 15px; margin-bottom: 15px; From 8c07b913e63b6ff547d16fa63a85bdc324f2aeda Mon Sep 17 00:00:00 2001 From: zombieJ Date: Mon, 6 Feb 2017 20:25:02 +0800 Subject: [PATCH 4/5] update sub queue list --- .../webapp/app/apps/jpm/ctrl/queueCtrl.js | 35 +++++++++++++++---- .../app/apps/jpm/partials/queue/overview.html | 6 ++-- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js index 4bff893f17..f37b4878d0 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js @@ -94,12 +94,16 @@ promiseList.push(JPM.aggMetricsToEntities( JPM.groups('RunningQueueService', condition, ['queue', 'parentQueue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) )._promise.then(function (list) { + $scope.subQueueList = []; + // Filter top queue var queueTrendSeries = $.map(list, function (subList) { var tags = subList[0].tags; if (!$scope.currentQueue && tags.parentQueue !== QUEUE_ROOT) return; - return JPM.metricsToSeries(subList[0].tags.queue, subList, { + var name = subList[0].tags.queue; + $scope.subQueueList.push(name); + return JPM.metricsToSeries(name, subList, { stack: "queue", areaStyle: {normal: {}} }); @@ -109,17 +113,30 @@ $scope.refreshQueueStatistic(); return queueTrendSeries; - // $scope.trendLoading = false; })); - // Load parent capacity line if ($scope.currentQueue) { + // Load current queue trend + promiseList.push(JPM.aggMetricsToEntities( + JPM.groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) + )._promise.then(function (list) { + // Filter top queue + var queueTrendSeries = $.map(list, function (subList) { + return JPM.metricsToSeries(subList[0].tags.queue, subList, { + areaStyle: {normal: {}} + }); + }); + + return queueTrendSeries; + })); + + // Load parent capacity line var DISPLAY_MARK_NAME = ['Guaranteed Capacity', 'Max Capacity']; promiseList.push(JPM.aggMetricsToEntities( JPM.groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue'], 'max(absoluteCapacity), max(absoluteMaxCapacity)', intervalMin, startTime, endTime) )._promise.then(function (list) { return $.map(list, function (valueSeries, i) { - var pointValue = common.getValueByPath(valueSeries, [0, 'value', 0]); + var pointValue = common.getValueByPath(valueSeries, [0, 'value', 0], 0); return JPM.metricsToSeries(DISPLAY_MARK_NAME[i], valueSeries, { markPoint: { @@ -131,7 +148,7 @@ }, position: 'insideRight', textStyle: { - color: '#337ab7', + color: '#333', fontWeight: 'bolder', fontSize: 14, } @@ -158,7 +175,13 @@ $q.all(promiseList).then(function (seriesList) { $scope.queueTrendSeries = seriesList[0]; - if (seriesList[1]) $scope.queueTrendSeries = $scope.queueTrendSeries.concat(seriesList[1]); + + if (seriesList[1]) { + if (!seriesList[0].length) { + $scope.queueTrendSeries = seriesList[1]; + } + $scope.queueTrendSeries = $scope.queueTrendSeries.concat(seriesList[2]); + } $scope.trendLoading = false; }); }; diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html index 35e29f54e9..dbdca6b254 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html @@ -21,10 +21,10 @@

    Queue Capacity Trend

    -
    +
    @@ -47,7 +47,7 @@

    From 8d0f91fcdfb7c6955ece44fdee00d6796c6b34c6 Mon Sep 17 00:00:00 2001 From: zombieJ Date: Tue, 7 Feb 2017 12:41:06 +0800 Subject: [PATCH 5/5] update 0 mem --- .../webapp/app/apps/jpm/ctrl/queueCtrl.js | 119 ++++++++++-------- .../app/apps/jpm/partials/queue/overview.html | 4 +- 2 files changed, 71 insertions(+), 52 deletions(-) diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js index f37b4878d0..70988f452e 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/ctrl/queueCtrl.js @@ -24,6 +24,9 @@ var QUEUE_ROOT = 'unassigned'; jpmApp.controller("queueCtrl", function ($q, $wrapState, $element, $scope, $timeout, PageConfig, Time, Entity, JPM) { + var TEXT_MAX_CAPACITY = 'Max Capacity'; + var DISPLAY_MARK_NAME = ['Guaranteed Capacity', TEXT_MAX_CAPACITY]; + $scope.site = $wrapState.param.siteId; $scope.currentQueue = $wrapState.param.queue; $scope.selectedQueue = ''; @@ -118,69 +121,85 @@ if ($scope.currentQueue) { // Load current queue trend promiseList.push(JPM.aggMetricsToEntities( - JPM.groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue'], 'max(absoluteUsedCapacity)', intervalMin, startTime, endTime) + JPM.groups('RunningQueueService', + { site: $scope.site, queue: $scope.currentQueue }, + ['queue'], + 'max(absoluteUsedCapacity), max(memory), max(absoluteCapacity), max(absoluteMaxCapacity)', + intervalMin, startTime, endTime) )._promise.then(function (list) { // Filter top queue - var queueTrendSeries = $.map(list, function (subList) { - return JPM.metricsToSeries(subList[0].tags.queue, subList, { - areaStyle: {normal: {}} - }); - }); - - return queueTrendSeries; - })); + return $.map(list, function (valueSeries, seriesIndex) { + var seriesName = valueSeries[0].tags.queue; + var option = {}; + if (seriesIndex === 0) { + option.areaStyle = {normal: {}}; + } else if (seriesIndex === 1) { + return; + } else { + seriesName = DISPLAY_MARK_NAME[seriesIndex - 2]; + var markDisplayText = seriesName; + + if (seriesName === TEXT_MAX_CAPACITY) { + var lastMemory = list[1][list[1].length - 1].value[0]; + var lastCapacity = list[0][list[0].length - 1].value[0]; + var lastMaxCapacity = list[seriesIndex][list[seriesIndex].length - 1].value[0]; + var lastMaxMemory = lastMemory / lastCapacity * lastMaxCapacity; + lastMaxMemory *= 1024 * 1024; + + if (!isNaN(lastMaxMemory)) markDisplayText += '(Memory:' + common.number.abbr(lastMaxMemory, true, 0) + ')'; + } - // Load parent capacity line - var DISPLAY_MARK_NAME = ['Guaranteed Capacity', 'Max Capacity']; - promiseList.push(JPM.aggMetricsToEntities( - JPM.groups('RunningQueueService', { site: $scope.site, queue: $scope.currentQueue }, ['queue'], 'max(absoluteCapacity), max(absoluteMaxCapacity)', intervalMin, startTime, endTime) - )._promise.then(function (list) { - return $.map(list, function (valueSeries, i) { - var pointValue = common.getValueByPath(valueSeries, [0, 'value', 0], 0); - - return JPM.metricsToSeries(DISPLAY_MARK_NAME[i], valueSeries, { - markPoint: { - silent: true, - label: { - normal: { - formatter: function () { - return DISPLAY_MARK_NAME[i]; - }, - position: 'insideRight', - textStyle: { - color: '#333', - fontWeight: 'bolder', - fontSize: 14, + var pointValue = common.getValueByPath(valueSeries, [valueSeries.length - 1, 'value', 0], 0); + option = { + markPoint: { + silent: true, + label: { + normal: { + formatter: function () { + return markDisplayText; + }, + position: 'insideRight', + textStyle: { + color: '#333', + fontSize: 12, + } } - } - }, - data: [ - { - name: '', - coord: [valueSeries.length - 1, pointValue], - symbolSize: 40, - itemStyle: { - normal: {color: 'rgba(0,0,0,0)'} + }, + data: [ + { + name: '', + coord: [valueSeries.length - 1, pointValue], + symbolSize: 30, + itemStyle: { + normal: {color: 'rgba(0,0,0,0)'} + } } - } - ], - }, - lineStyle: { - normal: { type: 'dashed' } - } - }); + ], + }, + lineStyle: { + normal: { type: 'dotted' } + } + }; + } + + return JPM.metricsToSeries(seriesName, valueSeries, option); }); })); } $q.all(promiseList).then(function (seriesList) { - $scope.queueTrendSeries = seriesList[0]; + + var subQueuesSeries = seriesList[0]; + $scope.queueTrendSeries = subQueuesSeries; if (seriesList[1]) { - if (!seriesList[0].length) { - $scope.queueTrendSeries = seriesList[1]; + var queueSeries = [seriesList[1][0]]; + var capacitySeries = seriesList[1].slice(1); + + if (!subQueuesSeries.length) { + $scope.queueTrendSeries = queueSeries; } - $scope.queueTrendSeries = $scope.queueTrendSeries.concat(seriesList[2]); + $scope.queueTrendSeries = $scope.queueTrendSeries.concat(capacitySeries); } $scope.trendLoading = false; }); diff --git a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html index dbdca6b254..732fbb2175 100644 --- a/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html +++ b/eagle-jpm/eagle-jpm-web/src/main/webapp/app/apps/jpm/partials/queue/overview.html @@ -40,7 +40,7 @@

    + \ No newline at end of file