Skip to content

Bug 1787483: Fixes negative values in capacity breakdown #3853

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

Merged
openshift-merge-robot merged 1 commit into from
Jan 3, 2020
Merged

Bug 1787483: Fixes negative values in capacity breakdown #3853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...-plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/breakdown-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const BreakdownCardBody: React.FC<BreakdownBodyProps> = ({
const legends = chartData.map((d: StackDataPoint) => ({
name: [d.name, d.label],
labels: { fill: d.color },
symbol: { fill: d.fill },
link: d.link,
}));

Expand Down
8 changes: 3 additions & 5 deletions ...plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/breakdown-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@ import { DataPoint } from '@console/internal/components/graphs';
import { K8sKind, referenceForModel } from '@console/internal/module/k8s';
import { resourcePathFromModel } from '@console/internal/components/utils';
import { CEPH_STORAGE_NAMESPACE } from '@console/ceph-storage-plugin/src/constants';
import { isAvailableBar, getBarRadius, StackDataPoint } from './utils';
import { getBarRadius, StackDataPoint } from './utils';
import { OTHER, CLUSTERWIDE, BUCKETCLASSKIND } from './consts';
import './breakdown-card.scss';

const LinkableLegend: React.FC<LinkableLegendProps> = React.memo((props: LinkableLegendProps) => {
const { metricModel, datum, ocsVersion } = props;
let href: string = resourcePathFromModel(metricModel, datum.link, CEPH_STORAGE_NAMESPACE);
const style = {};
const customLegend = (
<Tooltip content={datum.link} enableFlip>
<ChartLabel
Expand All @@ -45,7 +44,7 @@ const LinkableLegend: React.FC<LinkableLegendProps> = React.memo((props: Linkabl
}
}
return (
<Link to={href} style={style} className="capacity-breakdown-card__legend-link">
<Link to={href} className="capacity-breakdown-card__legend-link">
{customLegend}
</Link>
);
Expand All @@ -60,7 +59,7 @@ export const BreakdownChart: React.FC<BreakdownChartProps> = ({
const chartData = data.map((d: StackDataPoint, index) => (
<ChartBar
key={d.id}
style={{ data: { stroke: 'white', strokeWidth: 0.7, ...isAvailableBar(d.name) } }}
style={{ data: { stroke: 'white', strokeWidth: 0.7, fill: d.fill } }}
cornerRadius={getBarRadius(index, data.length)}
barWidth={18}
padding={0}
Expand Down Expand Up @@ -93,7 +92,6 @@ export const BreakdownChart: React.FC<BreakdownChartProps> = ({
right: 0,
left: 0,
}}
themeColor={ChartThemeColor.multiOrdered}
>
<ChartAxis
style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' } }}
Expand Down
8 changes: 8 additions & 0 deletions ...h-storage-plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ export enum Colors {
LINK = '#0066cc',
}

export const COLORMAP = [
'rgb(236, 122, 8)',
'rgb(139, 193, 247)',
'rgb(76, 177, 64)',
'rgb(160, 158, 220)',
'rgb(0, 149, 150)',
];

export const OTHER = 'Other';
export const CLUSTERWIDE = 'Cluster-wide';
export const BUCKETCLASSKIND = 'BucketClass';
Expand Down
26 changes: 18 additions & 8 deletions ...h-storage-plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import { DataPoint } from '@console/internal/components/graphs';
import { Humanize } from '@console/internal/components/utils';
import { Colors, OTHER_TOOLTIP } from './consts';
import { Colors, COLORMAP, OTHER_TOOLTIP } from './consts';

const getTotal = (stats: StackDataPoint[]) =>
stats.reduce((total, dataPoint) => total + dataPoint.y, 0);
Expand All @@ -19,6 +19,7 @@ const addOthers = (
name: 'Other',
color: Colors.OTHER,
label: humanize(others).string,
fill: 'rgb(96, 98, 103)',
link: OTHER_TOOLTIP,
id: 6,
};
Expand Down Expand Up @@ -48,6 +49,7 @@ export const addAvailable = (
link: '',
color: '',
label: humanize(availableInBytes).string,
fill: '#b8bbbe',
id: 7,
};
newChartData = [...newChartData, availableData] as StackDataPoint[];
Expand All @@ -66,24 +68,31 @@ export const getBarRadius = (index: number, length: number) => {
return barRadius;
};

export const isAvailableBar = (name: string) => {
let barColor = {};
if (name === 'Available') {
barColor = { fill: Colors.AVAILABLE };
}
return barColor;
export const sortInstantVectorStats = (stats: DataPoint[]): DataPoint[] => {
stats.sort((a, b) => {
const y1 = a.y;
const y2 = b.y;
if (y1 === y2) {
const x1 = a.x;
const x2 = b.x;
return x1 < x2 ? -1 : x1 > x2 ? 1 : 0;
}
return y2 - y1;
});
return stats.length === 6 ? stats.splice(0, 5) : stats;
};

export const getStackChartStats: GetStackStats = (response, humanize) =>
response.map((r, i) => {
const capacity = humanize(r.y).string;
return {
// INFO: x value needs to be same for single bar stack chart
// x value needs to be same for single bar stack chart
x: '0',
y: r.y,
name: _.truncate(`${r.x}`, { length: 12 }),
link: `${r.x}`,
color: Colors.LINK,
fill: COLORMAP[i],
label: capacity,
id: i,
};
Expand All @@ -98,6 +107,7 @@ export type StackDataPoint = {
label: string;
link: string;
color: string;
fill: string;
id: number;
};

Expand Down
7 changes: 4 additions & 3 deletions ...omponents/dashboard-page/storage-dashboard/capacity-breakdown/capacity-breakdown-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { breakdownQueryMap, CAPACITY_BREAKDOWN_QUERIES } from '../../../../const
import { PROJECTS } from '../../../../constants/index';
import { BreakdownCardBody } from '../breakdown-card/breakdown-body';
import { HeaderPrometheusViewLink } from '../breakdown-card/breakdown-header';
import { getStackChartStats } from '../breakdown-card/utils';
import { getStackChartStats, sortInstantVectorStats } from '../breakdown-card/utils';
import './capacity-breakdown-card.scss';

const keys = Object.keys(breakdownQueryMap);
Expand Down Expand Up @@ -42,8 +42,9 @@ const BreakdownCard: React.FC<DashboardItemProps> = ({
const queriesDataLoaded = queryKeys.some((q) => !prometheusResults.getIn([queries[q], 'data']));

const humanize = humanizeBinaryBytes;
const top5MetricsData = getInstantVectorStats(results[0], metric);
const top5MetricsStats = getStackChartStats(top5MetricsData, humanize);
const top6MetricsData = getInstantVectorStats(results[0], metric);
const top5SortedMetricsData = sortInstantVectorStats(top6MetricsData);
const top5MetricsStats = getStackChartStats(top5SortedMetricsData, humanize);
const metricTotal = _.get(results[1], 'data.result[0].value[1]');
const cephTotal = _.get(results[2], 'data.result[0].value[1]');
const cephUsed = _.get(results[3], 'data.result[0].value[1]');
Expand Down
20 changes: 10 additions & 10 deletions frontend/packages/ceph-storage-plugin/src/constants/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,16 @@ export const CAPACITY_USAGE_QUERIES = {

export const CAPACITY_BREAKDOWN_QUERIES = {
[StorageDashboardQuery.PROJECTS_TOTAL_USED]:
'sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (namespace)',
'sum(sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (namespace))',
[StorageDashboardQuery.PROJECTS_BY_USED]:
'sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (namespace)',
[StorageDashboardQuery.STORAGE_CLASSES_TOTAL_USED]:
'sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (storageclass, provisioner)',
'sum(sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (storageclass, provisioner))',
[StorageDashboardQuery.STORAGE_CLASSES_BY_USED]:
'sum(kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (storageclass, provisioner)',
[StorageDashboardQuery.PODS_BY_USED]:
'sum((kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_right() kube_pod_spec_volumes_persistentvolumeclaims_info) * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (pod,namespace)',
[StorageDashboardQuery.PODS_TOTAL_USED]:
'sum(sum((kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_right() kube_pod_spec_volumes_persistentvolumeclaims_info) * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (pod,namespace))',
[StorageDashboardQuery.PODS_BY_USED]:
'sum((kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_right() kube_pod_spec_volumes_persistentvolumeclaims_info) * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass) group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"})) by (pod,namespace)',
[StorageDashboardQuery.CEPH_CAPACITY_TOTAL]: 'ceph_cluster_total_bytes',
[StorageDashboardQuery.CEPH_CAPACITY_USED]: 'ceph_cluster_total_used_bytes',
Expand All @@ -78,9 +78,9 @@ export const breakdownQueryMap = {
model: ProjectModel,
metric: 'namespace',
queries: {
[StorageDashboardQuery.PROJECTS_BY_USED]: `(sort_desc(topk(5,(${
[StorageDashboardQuery.PROJECTS_BY_USED]: `(topk(6,(${
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PROJECTS_BY_USED]
}))))`,
})))`,
[StorageDashboardQuery.PROJECTS_TOTAL_USED]:
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PROJECTS_TOTAL_USED],
[StorageDashboardQuery.CEPH_CAPACITY_TOTAL]:
Expand All @@ -93,9 +93,9 @@ export const breakdownQueryMap = {
model: StorageClassModel,
metric: 'storageclass',
queries: {
[StorageDashboardQuery.STORAGE_CLASSES_BY_USED]: `(sort_desc(topk(5,(${
[StorageDashboardQuery.STORAGE_CLASSES_BY_USED]: `(topk(6,(${
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.STORAGE_CLASSES_BY_USED]
}))))`,
})))`,
[StorageDashboardQuery.STORAGE_CLASSES_TOTAL_USED]:
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.STORAGE_CLASSES_TOTAL_USED],
[StorageDashboardQuery.CEPH_CAPACITY_TOTAL]:
Expand All @@ -108,9 +108,9 @@ export const breakdownQueryMap = {
model: PodModel,
metric: 'pod',
queries: {
[StorageDashboardQuery.PODS_BY_USED]: `(sort_desc(topk(5, (${
[StorageDashboardQuery.PODS_BY_USED]: `(topk(6,(${
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PODS_BY_USED]
}))))`,
})))`,
[StorageDashboardQuery.PODS_TOTAL_USED]:
CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PODS_TOTAL_USED],
[StorageDashboardQuery.CEPH_CAPACITY_TOTAL]:
Expand Down