Skip to content

Commit

Permalink
Containers Dashboard: Show hourly and realtime trends
Browse files Browse the repository at this point in the history
  • Loading branch information
@zakiva
zakiva committed Mar 1, 2017
1 parent 2f06953 commit 7392ace
Show file tree
Hide file tree
Showing 8 changed files with 452 additions and 152 deletions.
87 changes: 69 additions & 18 deletions app/assets/javascripts/controllers/container_dashboard/container_dashboard_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,32 @@
dashboardUtilsFactory.updateStatus($scope.objectStatus.routes, data.status.routes);

// Node utilization donut
$scope.cpuUsageData = chartsMixin.processUtilizationData(data.ems_utilization.cpu,
if (data.ems_utilization.interval_name != "daily") {
$scope.cpuUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
$scope.memoryUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
if (data.ems_utilization.interval_name == "hourly") {
$scope.cpuUsageConfig.timeFrame = __('Last 24 hours');
$scope.memoryUsageConfig.timeFrame = __('Last 24 hours');
} else {
$scope.cpuUsageConfig.timeFrame = __('Last 10 minutes');
$scope.memoryUsageConfig.timeFrame = __('Last 10 minutes');
}
}

if (data.ems_utilization.xy_data.cpu != null) {
data.ems_utilization.xy_data.cpu.xData = data.ems_utilization.xy_data.cpu.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
data.ems_utilization.xy_data.mem.xData = data.ems_utilization.xy_data.mem.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}

$scope.cpuUsageData = chartsMixin.processUtilizationData(data.ems_utilization.xy_data.cpu,
'dates',
$scope.cpuUsageConfig.units);
$scope.memoryUsageData = chartsMixin.processUtilizationData(data.ems_utilization.mem,

$scope.memoryUsageData = chartsMixin.processUtilizationData(data.ems_utilization.xy_data.mem,
'dates',
$scope.memoryUsageConfig.units);

Expand All @@ -133,29 +155,58 @@
$scope.nodeMemoryUsage.loadingDone = true;

// Network metrics
$scope.networkUtilizationDailyConfig = chartsMixin.chartConfig.dailyNetworkUsageConfig;
if (data.network_metrics.interval_name == "daily") {
$scope.networkUtilizationConfig = chartsMixin.chartConfig.dailyNetworkUsageConfig;
} else if (data.network_metrics.interval_name == "hourly") {
$scope.networkUtilizationConfig = chartsMixin.chartConfig.hourlyNetworkUsageConfig;
} else {
$scope.networkUtilizationConfig = chartsMixin.chartConfig.realtimeNetworkUsageConfig;
}

$scope.dailyNetworkUtilization =
chartsMixin.processUtilizationData(data.daily_network_metrics,
'dates',
$scope.networkUtilizationDailyConfig.units);
if (data.network_metrics.xy_data != null) {
data.network_metrics.xy_data.xData = data.network_metrics.xy_data.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}

$scope.networkUtilization = chartsMixin.processUtilizationData(data.network_metrics.xy_data,
'dates',
$scope.networkUtilizationConfig.units);

// Pod metrics
$scope.podEntityTrendDailyConfig = chartsMixin.chartConfig.dailyPodUsageConfig;
if (data.pod_metrics.interval_name == "daily") {
$scope.podEntityTrendConfig = chartsMixin.chartConfig.dailyPodUsageConfig;
} else {
$scope.podEntityTrendConfig = chartsMixin.chartConfig.hourlyPodUsageConfig;
}

if (data.pod_metrics.xy_data != null) {
data.pod_metrics.xy_data.xData = data.pod_metrics.xy_data.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}

$scope.dailyPodEntityTrend =
chartsMixin.processPodUtilizationData(data.daily_pod_metrics,
'dates',
$scope.podEntityTrendDailyConfig.createdLabel,
$scope.podEntityTrendDailyConfig.deletedLabel);
$scope.podEntityTrend = chartsMixin.processPodUtilizationData(data.pod_metrics.xy_data,
'dates',
$scope.podEntityTrendConfig.createdLabel,
$scope.podEntityTrendConfig.deletedLabel);

// Image metrics
$scope.imageEntityTrendDailyConfig = chartsMixin.chartConfig.dailyImageUsageConfig;
if (data.image_metrics.interval_name == "daily") {
$scope.imageEntityTrendConfig = chartsMixin.chartConfig.dailyImageUsageConfig;
} else {
$scope.imageEntityTrendConfig = chartsMixin.chartConfig.hourlyImageUsageConfig;
}

if (data.image_metrics.xy_data != null) {
data.image_metrics.xy_data.xData = data.image_metrics.xy_data.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}

$scope.dailyImageEntityTrend =
chartsMixin.processUtilizationData(data.daily_image_metrics,
'dates',
$scope.imageEntityTrendDailyConfig.createdLabel);
$scope.imageEntityTrend = chartsMixin.processUtilizationData(data.image_metrics.xy_data,
'dates',
$scope.imageEntityTrendConfig.createdLabel);

// Trend lines data
$scope.loadingDone = true;
Expand Down
69 changes: 68 additions & 1 deletion app/assets/javascripts/controllers/container_dashboard/util/charts-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
});
};

var hourlyTimeTooltip = function (data) {
var theMoment = moment(data[0].x);
return _.template('<div class="tooltip-inner"><%- col1 %>: <%- col2 %></div>')({
col1: theMoment.format('h:mm A'),
col2: data[0].value + ' ' + data[0].name
});
};

var dailyPodTimeTooltip = function (data) {
var theMoment = moment(data[0].x);
return _.template('<div class="tooltip-inner"><%- col1 %></br> <%- col2 %></div>')({
Expand All @@ -17,6 +25,14 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
});
};

var hourlyPodTimeTooltip = function (data) {
var theMoment = moment(data[0].x);
return _.template('<div class="tooltip-inner"><%- col1 %>: <%- col2 %></div>')({
col1: theMoment.format('h:mm A'),
col2: data[0].value + ' ' + data[0].name + ', ' + data[1].value + ' ' + data[1].name
});
};

var lineChartTooltipPositionFactory = function(chartId) {
var elementQuery = '#' + chartId + 'lineChart';

Expand All @@ -43,6 +59,7 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
cpuUsageConfig: {
chartId: 'cpuUsageChart',
title: __('CPU'),
timeFrame: __('Last 30 Days'),
units: __('Cores'),
usageDataName: __('Used'),
legendLeftText: __('Last 30 Days'),
Expand All @@ -52,6 +69,7 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
memoryUsageConfig: {
chartId: 'memoryUsageChart',
title: __('Memory'),
timeFrame: __('Last 30 Days'),
units: __('GB'),
usageDataName: __('Used'),
legendLeftText: __('Last 30 Days'),
Expand All @@ -66,9 +84,26 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
dataName : __('KBps'),
tooltipFn : dailyTimeTooltip
},
hourlyNetworkUsageConfig: {
chartId : 'networkUsageHourlyChart',
headTitle: __('Network Utilization Trend'),
timeFrame: __('Last 24 Hours'),
units : __('KBps'),
dataName : __('KBps'),
tooltipFn : hourlyTimeTooltip
},
realtimeNetworkUsageConfig: {
chartId : 'networkUsageHourlyChart',
headTitle: __('Network Utilization Trend'),
timeFrame: __('Last 10 minutes'),
units : __('KBps'),
dataName : __('KBps'),
tooltipFn : hourlyTimeTooltip
},
dailyPodUsageConfig: {
chartId : 'podUsageDailyChart',
headTitle : __('Pod Creation and Deletion Trends'),
timeFrame : __('Last 30 days'),
createdLabel: __('Created'),
deletedLabel: __('Deleted'),
tooltip : {
Expand All @@ -81,9 +116,26 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
grid : {y: {show: false}},
setAreaChart: true
},
hourlyPodUsageConfig: {
chartId : 'podUsageHourlyChart',
headTitle : __('Pod Creation and Deletion Trends'),
timeFrame : __('Last 24 hours'),
createdLabel: __('Created'),
deletedLabel: __('Deleted'),
tooltip : {
contents: hourlyPodTimeTooltip,
position: lineChartTooltipPositionFactory('podUsageHourlyChart'),
},
point : {r: 1},
size : {height: 145},
color : {pattern: [pfUtils.colorPalette.blue, pfUtils.colorPalette.green]},
grid : {y: {show: false}},
setAreaChart: true
},
dailyImageUsageConfig: {
chartId : 'imageUsageDailyChart',
headTitle : __('New Image Usage Trend'),
timeFrame : __('Last 30 days'),
createdLabel: __('Images'),
tooltip : {
contents: dailyTimeTooltip,
Expand All @@ -93,6 +145,20 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
size : {height: 93},
grid : {y: {show: false}},
setAreaChart: true
},
hourlyImageUsageConfig: {
chartId : 'imageUsageHourlyChart',
headTitle : __('New Image Usage Trend'),
timeFrame : __('Last 24 hours'),
createdLabel: __('Images'),
tooltip : {
contents: hourlyTimeTooltip,
position: lineChartTooltipPositionFactory('imageUsageHourlyChart'),
},
point : {r: 1},
size : {height: 93},
grid : {y: {show: false}},
setAreaChart: true
}
};

Expand Down Expand Up @@ -151,6 +217,7 @@ angular.module('miq.util').factory('chartsMixin', ['pfUtils', function(pfUtils)
processHeatmapData: processHeatmapData,
processUtilizationData: processUtilizationData,
processPodUtilizationData: processPodUtilizationData,
dailyTimeTooltip: dailyTimeTooltip
dailyTimeTooltip: dailyTimeTooltip,
hourlyTimeTooltip: hourlyTimeTooltip
};
}]);
Loading

0 comments on commit 7392ace

Please sign in to comment.