Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Containers Provider Dashboard conversion to use Angular/PF components #2499

Merged
merged 17 commits into from Jul 27, 2018
Merged

Containers Provider Dashboard conversion to use Angular/PF components #2499

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b630035
First cut of Containers Provider Dashboard using Angular/PF components
h-kataria Oct 22, 2017
be7fda5
Added Trends Chart support
h-kataria Oct 23, 2017
7d0788c
Some further changes towards deduplication of chartsMixins code
h-kataria Oct 23, 2017
e1e6043
Fixed value in where clause that was changed for testing purposes
h-kataria Oct 23, 2017
50ef447
Fixed current state image on aggregate status card
h-kataria Oct 23, 2017
780a15f
styling change for aggregate status cards.
h-kataria Oct 23, 2017
f47a01d
some further cleanup and styling changes
h-kataria Oct 24, 2017
3ba28cd
Deleted controller that is no longer needed
h-kataria Oct 24, 2017
3963fef
Show spinners for all charts until they are individually loaded.
h-kataria Oct 24, 2017
287ae18
Addressed some code climate warnings.
h-kataria Nov 10, 2017
8e7df0c
Fixing spec test failure
h-kataria Jan 23, 2018
e935740
Styling changes to make it consistent with other dashboard screens.
h-kataria Jan 24, 2018
662d96d
Change after merge conflict.
h-kataria Feb 27, 2018
6ff7625
Added gettext to JS controllers
h-kataria Jul 25, 2018
8525ad1
Fixed 'New Image Usage Trend' chart data format
h-kataria Jul 25, 2018
e50a3be
Show count and link on Containers Dashboard view in aggregate card.
h-kataria Jul 26, 2018
c369f5c
Fixed font issue on aggregate status card
h-kataria Jul 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
69 changes: 69 additions & 0 deletions app/assets/javascripts/components/pf_charts/trends-chart.component.js
View file
Open in desktop
@@ -0,0 +1,69 @@
angular.module( 'patternfly.charts' ).component('pfTrendsChart', {
bindings: {
config: '<',
chartData: '<',
chartHeight: '<?',
showXAxis: '<?',
showYAxis: '<?',
},
templateUrl: '/static/pf_charts/trends-chart.html.haml',
controller: trendsChartController,
});
trendsChartController.$inject = [];

function trendsChartController() {
'use strict';
var vm = this;
var prevChartData;
var prevConfig;
var SMALL = 30;
var LARGE = 60;

vm.updateAll = function() {
// Need to deep watch changes
prevChartData = angular.copy(vm.chartData);
prevConfig = angular.copy(vm.config);

vm.showLargeCardLayout = (! vm.config.layout || vm.config.layout === 'large');
vm.showSmallCardLayout = (vm.config.layout === 'small');
vm.showActualValue = (! vm.config.valueType || vm.config.valueType === 'actual');
vm.showPercentageValue = (vm.config.valueType === 'percentage');
};

vm.getPercentageValue = function() {
var pctValue = 0;

if (vm.chartData.dataAvailable !== false && vm.chartData.total > 0) {
pctValue = Math.round(vm.getLatestValue() / vm.chartData.total * 100.0);
}
return pctValue;
};
vm.getLatestValue = function() {
var latestValue = 0;
if (vm.chartData.yData && vm.chartData.yData.length > 0) {
latestValue = vm.chartData.yData[vm.chartData.yData.length - 1];
}
return latestValue;
};
vm.getChartHeight = function() {
var retValue = LARGE;
if (vm.chartHeight) {
retValue = vm.chartHeight;
} else if (vm.config.layout === 'small') {
retValue = SMALL;
}
return retValue;
};

vm.$onChanges = function() {
vm.updateAll();
};

vm.$doCheck = function() {
// do a deep compare on chartData and config
if (! angular.equals(vm.chartData, prevChartData) || ! angular.equals(vm.config, prevConfig)) {
vm.updateAll();
}
};
}

200 changes: 0 additions & 200 deletions app/assets/javascripts/controllers/container_dashboard/container_dashboard_controller.js
View file
Open in desktop
@@ -1,200 +0,0 @@
/* global miqHttpInject */

ManageIQ.angular.app.controller('containerDashboardController', ['$scope', 'dashboardUtilsFactory', 'containerChartsMixin', 'dashboardService',
function($scope, dashboardUtilsFactory, chartsMixin, dashboardService) {
document.getElementById('center_div').className += ' miq-body';

// Obj-status cards init
$scope.objectStatus = {
providers: dashboardUtilsFactory.createProvidersStatus(),
alerts: dashboardUtilsFactory.createAlertsStatus(),
nodes: dashboardUtilsFactory.createNodesStatus(),
containers: dashboardUtilsFactory.createContainersStatus(),
registries: dashboardUtilsFactory.createRegistriesStatus(),
projects: dashboardUtilsFactory.createProjectsStatus(),
pods: dashboardUtilsFactory.createPodsStatus(),
services: dashboardUtilsFactory.createServicesStatus(),
images: dashboardUtilsFactory.createImagesStatus(),
routes: dashboardUtilsFactory.createRoutesStatus(),
};

$scope.loadingDone = false;

// Heatmaps init
$scope.nodeCpuUsage = {
title: __('CPU'),
id: 'nodeCpuUsageMap',
loadingDone: false,
};

$scope.nodeMemoryUsage = {
title: __('Memory'),
id: 'nodeMemoryUsageMap',
loadingDone: false,
};

$scope.heatmaps = [$scope.nodeCpuUsage, $scope.nodeMemoryUsage];
$scope.nodeHeatMapUsageLegendLabels = chartsMixin.nodeHeatMapUsageLegendLabels;
$scope.dashboardHeatmapChartHeight = chartsMixin.dashboardHeatmapChartHeight;

// Node Utilization
$scope.cpuUsageConfig = chartsMixin.chartConfig.cpuUsageConfig;
$scope.cpuUsageSparklineConfig = {
tooltipFn: chartsMixin.dailyTimeTooltip,
chartId: 'cpuSparklineChart',
};
$scope.cpuUsageDonutConfig = {
chartId: 'cpuDonutChart',
thresholds: { 'warning': '60', 'error': '90' },
};
$scope.memoryUsageConfig = chartsMixin.chartConfig.memoryUsageConfig;
$scope.memoryUsageSparklineConfig = {
tooltipFn: chartsMixin.dailyTimeTooltip,
chartId: 'memorySparklineChart',
};
$scope.memoryUsageDonutConfig = {
chartId: 'memoryDonutChart',
thresholds: { 'warning': '60', 'error': '90' },
};

function getContainerDashboardData(response) {
'use strict';

var data = response.data.data;

// Obj-status (entity count row)
var providers = data.providers;
if (providers) {
if ($scope.id) {
$scope.providerTypeName = providers[0].typeName;
$scope.providerTypeIconImage = providers[0].iconImage;
$scope.providerStatusIconImage = providers[0].statusIcon;
$scope.isSingleProvider = true;
} else {
$scope.isSingleProvider = false;
$scope.objectStatus.providers.count = 0;
$scope.objectStatus.providers.notifications = [];
providers.forEach(function(item) {
$scope.objectStatus.providers.count += item.count;
$scope.objectStatus.providers.notifications.push({
iconImage: item.iconImage,
count: item.count,
});
});
}

if ($scope.objectStatus.providers.count > 0) {
$scope.objectStatus.providers.href = data.providers_link;
}
}

$scope.hasAlerts = data.alerts.dataAvailable;
dashboardUtilsFactory.updateAlertsStatus($scope.objectStatus.alerts, data.alerts);
dashboardUtilsFactory.updateStatus($scope.objectStatus.nodes, data.status.nodes);
dashboardUtilsFactory.updateStatus($scope.objectStatus.containers, data.status.containers);
dashboardUtilsFactory.updateStatus($scope.objectStatus.registries, data.status.registries);
dashboardUtilsFactory.updateStatus($scope.objectStatus.projects, data.status.projects);
dashboardUtilsFactory.updateStatus($scope.objectStatus.pods, data.status.pods);
dashboardUtilsFactory.updateStatus($scope.objectStatus.services, data.status.services);
dashboardUtilsFactory.updateStatus($scope.objectStatus.images, data.status.images);
dashboardUtilsFactory.updateStatus($scope.objectStatus.routes, data.status.routes);

// Node utilization donut
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 if (data.ems_utilization.interval_name === 'realtime') {
$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.memory.xData = data.ems_utilization.xy_data.memory.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.xy_data.memory,
'dates',
$scope.memoryUsageConfig.units);

// Heatmaps
$scope.nodeCpuUsage = chartsMixin.processHeatmapData($scope.nodeCpuUsage, data.heatmaps.nodeCpuUsage);
$scope.nodeCpuUsage.loadingDone = true;

$scope.nodeMemoryUsage =
chartsMixin.processHeatmapData($scope.nodeMemoryUsage, data.heatmaps.nodeMemoryUsage);
$scope.nodeMemoryUsage.loadingDone = true;

// Network metrics
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.hourlyNetworkUsageConfig;
$scope.networkUtilizationConfig.timeFrame = __('Last 10 minutes');
}

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
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.podEntityTrend = chartsMixin.processPodUtilizationData(data.pod_metrics.xy_data,
'dates',
$scope.podEntityTrendConfig.createdLabel,
$scope.podEntityTrendConfig.deletedLabel);

// Image metrics
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.imageEntityTrend = chartsMixin.processUtilizationData(data.image_metrics.xy_data,
'dates',
$scope.imageEntityTrendConfig.createdLabel);

// Trend lines data
$scope.loadingDone = true;
}

dashboardService.autoUpdateDashboard($scope, '/container_dashboard/data', getContainerDashboardData);
}]);
10 changes: 5 additions & 5 deletions ...ets/javascripts/controllers/container_dashboard/container_project_dashboard_controller.js
View file
Open in desktop
@@ -1,6 +1,6 @@
/* global miqHttpInject */

ManageIQ.angular.app.controller('containerProjectDashboardController', ['$scope', 'dashboardUtilsFactory', 'containerChartsMixin', 'dashboardService',
ManageIQ.angular.app.controller('containerProjectDashboardController', ['$scope', 'dashboardUtilsFactory', 'chartsMixin', 'dashboardService',
function($scope, dashboardUtilsFactory, chartsMixin, dashboardService) {
document.getElementById("center_div").className += " miq-body";

Expand Down Expand Up @@ -48,11 +48,11 @@ ManageIQ.angular.app.controller('containerProjectDashboardController', ['$scope'
});
}

$scope.cpuUsageData = chartsMixin.processUtilizationData(data.project_utilization.xy_data.cpu,
$scope.cpuUsageData = chartsMixin.processData(data.project_utilization.xy_data.cpu,
'dates',
$scope.cpuUsageConfig.units);

$scope.memoryUsageData = chartsMixin.processUtilizationData(data.project_utilization.xy_data.memory,
$scope.memoryUsageData = chartsMixin.processData(data.project_utilization.xy_data.memory,
'dates',
$scope.memoryUsageConfig.units);

Expand All @@ -72,7 +72,7 @@ ManageIQ.angular.app.controller('containerProjectDashboardController', ['$scope'
});
}

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

Expand All @@ -81,7 +81,7 @@ ManageIQ.angular.app.controller('containerProjectDashboardController', ['$scope'
$scope.barChartLayoutInline = { 'type': 'inline' };
angular.forEach(data.quota, function(item) {
$scope.quotas.push({
'title': __(item.resource),
'title': item.resource,
'units': item.units,
'data': {
'used': item.quota_observed,
Expand Down