mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for custom structure in bar charts (#563)

Browse Source 
Added support for custom structure in bar charts so we can customize bar order & label

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>
This commit is contained in:
Alex
2021-01-19 14:18:53 -06:00
committed by GitHub
parent dbe456c1a9
commit e7f16b4899
5 changed files with 188 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
portal-ui/bindata_assetfs.go
View File

File diff suppressed because one or more lines are too long

24
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx
View File

@@ -1,5 +1,5 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
@@ -43,18 +43,16 @@ const styles = (theme: Theme) =>
const CustomizedAxisTick = ({ x, y, payload }: any) => {
return (
<g transform={`translate(${x},${y})`}>
<Text
width={50}
fontSize={"63%"}
textAnchor="end"
verticalAnchor="middle"
angle={0}
fill="#333"
>
{payload.value}
</Text>
</g>
<text
width={50}
fontSize={"63%"}
textAnchor="end"
fill="#333"
transform={`translate(${x},${y})`}
dy={3}
>
{payload.value}
</text>
);
};

7
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/types.ts
View File

@@ -1,5 +1,5 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
@@ -43,3 +43,8 @@ export interface ISinglePieConfiguration {
export interface IDataSRep {
value: number;
}
export interface IBarChartRelation {
originTag: string;
displayTag: string;
}

4
portal-ui/src/screens/Console/Dashboard/Prometheus/types.ts
View File

@@ -1,5 +1,5 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
@@ -16,6 +16,7 @@
import {
IBarChartConfiguration,
IBarChartRelation,
IDataSRep,
ILinearGraphConfiguration,
IPieChartConfiguration,
@@ -46,4 +47,5 @@ export interface IDashboardPanel {
disableYAxis?: boolean;
xAxisFormatter?: (item: string) => string;
yAxisFormatter?: (item: string) => string;
customStructure?: IBarChartRelation[];
}

73
portal-ui/src/screens/Console/Dashboard/Prometheus/utils.ts
View File

@@ -1,5 +1,5 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
@@ -135,6 +135,33 @@ export const panelsConfiguration: IDashboardPanel[] = [
},
},
],
customStructure: [
{ originTag: "LESS_THAN_1024_B", displayTag: "Less than 1024B" },
{
originTag: "BETWEEN_1024_B_AND_1_MB",
displayTag: "Between 1024B and 1MB",
},
{
originTag: "BETWEEN_1_MB_AND_10_MB",
displayTag: "Between 1MB and 10MB",
},
{
originTag: "BETWEEN_10_MB_AND_64_MB",
displayTag: "Between 10MB and 64MB",
},
{
originTag: "BETWEEN_64_MB_AND_128_MB",
displayTag: "Between 64MB and 128MB",
},
{
originTag: "BETWEEN_128_MB_AND_512_MB",
displayTag: "Between 128MB and 512MB",
},
{
originTag: "GREATER_THAN_512_MB",
displayTag: "Greater than 512MB",
},
],
type: widgetType.barChart,
layoutIdentifier: "panel-5",
},
@@ -523,20 +550,44 @@ export const getWidgetsWithValue = (payload: any[]) => {
case widgetType.barChart:
if (typeOfPayload === "bargauge") {
const chartBars = get(payloadData, "targets[0].result", []);
const sortFunction = (value1: any[], value2: any[]) =>
value1[0] - value2[0];
const values = chartBars.map((elementValue: any) => {
const metricKeyItem = Object.keys(elementValue.metric);
let values = [];
if (panelItem.customStructure) {
values = panelItem.customStructure.map((structureItem) => {
const metricTake = chartBars.find((element: any) => {
const metricKeyItem = Object.keys(element.metric);
const metricName = elementValue.metric[metricKeyItem[0]];
const metricName = element.metric[metricKeyItem[0]];
const elements = get(elementValue, "values", []);
return metricName === structureItem.originTag;
});
const sortResult = elements.sort(
(value1: any[], value2: any[]) => value1[0] - value2[0]
);
const lastValue = sortResult[sortResult.length - 1];
return { name: metricName, a: parseInt(lastValue[1]) };
});
const elements = get(metricTake, "values", []);
const sortResult = elements.sort(sortFunction);
const lastValue = sortResult[sortResult.length - 1];
return {
name: structureItem.displayTag,
a: parseInt(lastValue[1]),
};
});
} else {
// If no configuration is set, we construct the series for bar chart and return the element
values = chartBars.map((elementValue: any) => {
const metricKeyItem = Object.keys(elementValue.metric);
const metricName = elementValue.metric[metricKeyItem[0]];
const elements = get(elementValue, "values", []);
const sortResult = elements.sort(sortFunction);
const lastValue = sortResult[sortResult.length - 1];
return { name: metricName, a: parseInt(lastValue[1]) };
});
}
return {
...panelItem,