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 Jan 2, 2017
1 parent 5273d7b commit 199fac0
Show file tree
Hide file tree
Showing 7 changed files with 382 additions and 110 deletions.
155 changes: 129 additions & 26 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 @@ -108,45 +108,148 @@ miqHttpInject(angular.module('containerDashboard', ['ui.bootstrap', 'patternfly'
dashboardUtilsFactory.updateStatus($scope.objectStatus.routes, data.status.routes);

// Node utilization donut
$scope.cpuUsageData = chartsMixin.processUtilizationData(data.ems_utilization.cpu,
"dates",
$scope.cpuUsageConfig.units);
$scope.memoryUsageData = chartsMixin.processUtilizationData(data.ems_utilization.mem,
"dates",
$scope.memoryUsageConfig.units);
if (data.daily_ems_utilization.cpu != undefined) {
$scope.cpuUsageData = chartsMixin.processUtilizationData(data.daily_ems_utilization.cpu,
"dates",
$scope.cpuUsageConfig.units);
} else if (data.hourly_ems_utilization.cpu != undefined) {
data.hourly_ems_utilization.cpu.xData = data.hourly_ems_utilization.cpu.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
$scope.cpuUsageData = chartsMixin.processUtilizationData(data.hourly_ems_utilization.cpu,
"dates",
$scope.cpuUsageConfig.units);
$scope.cpuUsageConfig.timeFrame = 'Last 24 hours';
$scope.cpuUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
} else {
if (data.realtime_ems_utilization.cpu != undefined) {
data.realtime_ems_utilization.cpu.xData = data.realtime_ems_utilization.cpu.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}
$scope.cpuUsageData = chartsMixin.processUtilizationData(data.realtime_ems_utilization.cpu,
"dates",
$scope.cpuUsageConfig.units);
$scope.cpuUsageConfig.timeFrame = 'Last 10 minutes';
$scope.cpuUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
}

if (data.daily_ems_utilization.mem != undefined) {
$scope.memoryUsageData = chartsMixin.processUtilizationData(data.daily_ems_utilization.mem,
"dates",
$scope.memoryUsageConfig.units);
} else if (data.hourly_ems_utilization.mem != undefined) {
data.hourly_ems_utilization.mem.xData = data.hourly_ems_utilization.mem.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
$scope.memoryUsageData = chartsMixin.processUtilizationData(data.hourly_ems_utilization.mem,
"dates",
$scope.memoryUsageConfig.units);
$scope.memoryUsageConfig.timeFrame = 'Last 24 hours';
$scope.memoryUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
} else {
if (data.realtime_ems_utilization.mem != undefined) {
data.realtime_ems_utilization.mem.xData = data.realtime_ems_utilization.mem.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}
$scope.memoryUsageData = chartsMixin.processUtilizationData(data.realtime_ems_utilization.mem,
"dates",
$scope.memoryUsageConfig.units);
$scope.memoryUsageConfig.timeFrame = 'Last 10 minutes';
$scope.memoryUsageSparklineConfig.tooltipFn = chartsMixin.hourlyTimeTooltip;
}

// Heatmaps
$scope.nodeCpuUsage = chartsMixin.processHeatmapData($scope.nodeCpuUsage, data.heatmaps.nodeCpuUsage);
if (data.hourly_heatmaps.nodeCpuUsage != undefined) {
$scope.nodeCpuUsage = chartsMixin.processHeatmapData($scope.nodeCpuUsage,
data.hourly_heatmaps.nodeCpuUsage);
} else {
$scope.nodeCpuUsage = chartsMixin.processHeatmapData($scope.nodeCpuUsage,
data.realtime_heatmaps.nodeCpuUsage);
}
$scope.nodeCpuUsage.loadingDone = true;

$scope.nodeMemoryUsage =
chartsMixin.processHeatmapData($scope.nodeMemoryUsage, data.heatmaps.nodeMemoryUsage);
if (data.hourly_heatmaps.nodeMemoryUsage != undefined) {
$scope.nodeMemoryUsage = chartsMixin.processHeatmapData($scope.nodeMemoryUsage,
data.hourly_heatmaps.nodeMemoryUsage);
} else {
$scope.nodeMemoryUsage = chartsMixin.processHeatmapData($scope.nodeMemoryUsage,
data.realtime_heatmaps.nodeMemoryUsage);
}
$scope.nodeMemoryUsage.loadingDone = true;

// Network metrics
$scope.networkUtilizationDailyConfig = chartsMixin.chartConfig.dailyNetworkUsageConfig;
if (data.daily_network_metrics != undefined && data.daily_network_metrics.xData.length > 1) {
$scope.networkUtilizationConfig = chartsMixin.chartConfig.dailyNetworkUsageConfig;
$scope.networkUtilization =
chartsMixin.processUtilizationData(data.daily_network_metrics,
"dates",
$scope.networkUtilizationConfig.units);
} else if (data.hourly_network_metrics != undefined && data.hourly_network_metrics.xData.length > 1) {
data.hourly_network_metrics.xData = data.hourly_network_metrics.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});

$scope.dailyNetworkUtilization =
chartsMixin.processUtilizationData(data.daily_network_metrics,
"dates",
$scope.networkUtilizationDailyConfig.units);
$scope.networkUtilizationConfig = chartsMixin.chartConfig.hourlyNetworkUsageConfig;
$scope.networkUtilization =
chartsMixin.processUtilizationData(data.hourly_network_metrics,
"dates",
$scope.networkUtilizationConfig.units);
} else {
if (data.realtime_network_metrics != undefined) {
data.realtime_network_metrics.xData = data.realtime_network_metrics.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}
$scope.networkUtilizationConfig = chartsMixin.chartConfig.realtimeNetworkUsageConfig;
$scope.networkUtilization =
chartsMixin.processUtilizationData(data.realtime_network_metrics,
"dates",
$scope.networkUtilizationConfig.units);
}

// Pod metrics
$scope.podEntityTrendDailyConfig = chartsMixin.chartConfig.dailyPodUsageConfig;

$scope.dailyPodEntityTrend =
chartsMixin.processPodUtilizationData(data.daily_pod_metrics,
"dates",
$scope.podEntityTrendDailyConfig.createdLabel,
$scope.podEntityTrendDailyConfig.deletedLabel);
if (data.daily_pod_metrics != undefined && data.daily_pod_metrics.xData.length > 1) {
$scope.podEntityTrendConfig = chartsMixin.chartConfig.dailyPodUsageConfig;
$scope.podEntityTrend =
chartsMixin.processPodUtilizationData(data.daily_pod_metrics,
"dates",
$scope.podEntityTrendConfig.createdLabel,
$scope.podEntityTrendConfig.deletedLabel);
} else {
if (data.hourly_pod_metrics != undefined) {
data.hourly_pod_metrics.xData = data.hourly_pod_metrics.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}
$scope.podEntityTrendConfig = chartsMixin.chartConfig.hourlyPodUsageConfig;
$scope.podEntityTrend =
chartsMixin.processPodUtilizationData(data.hourly_pod_metrics,
"dates",
$scope.podEntityTrendConfig.createdLabel,
$scope.podEntityTrendConfig.deletedLabel);
}

// Image metrics
$scope.imageEntityTrendDailyConfig = chartsMixin.chartConfig.dailyImageUsageConfig;

$scope.dailyImageEntityTrend =
if (data.daily_image_metrics != undefined && data.daily_image_metrics.xData.length > 1) {
$scope.imageEntityTrendConfig = chartsMixin.chartConfig.dailyImageUsageConfig;
$scope.imageEntityTrend =
chartsMixin.processUtilizationData(data.daily_image_metrics,
"dates",
$scope.imageEntityTrendDailyConfig.createdLabel);
"dates",
$scope.imageEntityTrendConfig.createdLabel);
} else {
if (data.hourly_image_metrics != undefined) {
data.hourly_image_metrics.xData = data.hourly_image_metrics.xData.map(function (date) {
return dashboardUtilsFactory.parseDate(date)
});
}
$scope.imageEntityTrendConfig = chartsMixin.chartConfig.hourlyImageUsageConfig;
$scope.imageEntityTrend =
chartsMixin.processUtilizationData(data.hourly_image_metrics,
"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 199fac0

Please sign in to comment.