Dashboard widgets async (#762)
* Make Widgets load asynchronously Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> * Added loading spinners to all widgets Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
GitHub
@@ -14,7 +14,7 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import ReactGridLayout from "react-grid-layout";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
@@ -26,12 +26,6 @@ import {
|
||||
} from "../../Common/FormComponents/common/styleLibrary";
|
||||
|
||||
import { AutoSizer } from "react-virtualized";
|
||||
import {
|
||||
IBarChartConfiguration,
|
||||
IDataSRep,
|
||||
ILinearGraphConfiguration,
|
||||
IPieChartConfiguration,
|
||||
} from "./Widgets/types";
|
||||
import { IDashboardPanel, widgetType } from "./types";
|
||||
import {
|
||||
getDashboardDistribution,
|
||||
@@ -104,29 +98,27 @@ const PrDashboard = ({ classes, displayErrorMessage }: IPrDashboard) => {
|
||||
return (
|
||||
<SingleValueWidget
|
||||
title={value.title}
|
||||
data={value.data as string}
|
||||
panelItem={value}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
/>
|
||||
);
|
||||
case widgetType.pieChart:
|
||||
return (
|
||||
<PieChartWidget
|
||||
title={value.title}
|
||||
dataInner={value.data as object[]}
|
||||
dataOuter={(value.dataOuter as object[]) || null}
|
||||
pieChartConfiguration={
|
||||
value.widgetConfiguration as IPieChartConfiguration
|
||||
}
|
||||
middleLabel={value.innerLabel}
|
||||
panelItem={value}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
/>
|
||||
);
|
||||
case widgetType.linearGraph:
|
||||
return (
|
||||
<LinearGraphWidget
|
||||
title={value.title}
|
||||
data={value.data as object[]}
|
||||
linearConfiguration={
|
||||
value.widgetConfiguration as ILinearGraphConfiguration[]
|
||||
}
|
||||
panelItem={value}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
hideYAxis={value.disableYAxis}
|
||||
xAxisFormatter={value.xAxisFormatter}
|
||||
yAxisFormatter={value.yAxisFormatter}
|
||||
@@ -141,10 +133,9 @@ const PrDashboard = ({ classes, displayErrorMessage }: IPrDashboard) => {
|
||||
return (
|
||||
<BarChartWidget
|
||||
title={value.title}
|
||||
data={value.data as object[]}
|
||||
barChartConfiguration={
|
||||
value.widgetConfiguration as IBarChartConfiguration[]
|
||||
}
|
||||
panelItem={value}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
/>
|
||||
);
|
||||
case widgetType.singleRep:
|
||||
@@ -152,8 +143,9 @@ const PrDashboard = ({ classes, displayErrorMessage }: IPrDashboard) => {
|
||||
return (
|
||||
<SingleRepWidget
|
||||
title={value.title}
|
||||
data={value.data as IDataSRep[]}
|
||||
label={value.innerLabel as string}
|
||||
panelItem={value}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
color={value.color as string}
|
||||
fillColor={fillColor as string}
|
||||
/>
|
||||
@@ -169,7 +161,7 @@ const PrDashboard = ({ classes, displayErrorMessage }: IPrDashboard) => {
|
||||
);
|
||||
});
|
||||
},
|
||||
[panelInformation, dashboardDistr]
|
||||
[panelInformation, dashboardDistr, timeEnd, timeStart]
|
||||
);
|
||||
|
||||
const fetchUsage = useCallback(() => {
|
||||
|
||||
@@ -14,30 +14,45 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
} from "recharts";
|
||||
import { IBarChartConfiguration } from "./types";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
|
||||
import BarChartTooltip from "./tooltips/BarChartTooltip";
|
||||
import { setErrorSnackMessage } from "../../../../../actions";
|
||||
import { connect } from "react-redux";
|
||||
import { IDashboardPanel } from "../types";
|
||||
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
|
||||
import api from "../../../../../common/api";
|
||||
import { widgetDetailsToPanel } from "../utils";
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
|
||||
interface IBarChartWidget {
|
||||
classes: any;
|
||||
title: string;
|
||||
barChartConfiguration: IBarChartConfiguration[];
|
||||
data: object[];
|
||||
panelItem: IDashboardPanel;
|
||||
timeStart: MaterialUiPickersDate;
|
||||
timeEnd: MaterialUiPickersDate;
|
||||
displayErrorMessage: any;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
...widgetCommon,
|
||||
loadingAlign: {
|
||||
width: "100%",
|
||||
paddingTop: "15px",
|
||||
textAlign: "center",
|
||||
margin: "auto",
|
||||
},
|
||||
});
|
||||
|
||||
const CustomizedAxisTick = ({ x, y, payload }: any) => {
|
||||
@@ -58,46 +73,102 @@ const CustomizedAxisTick = ({ x, y, payload }: any) => {
|
||||
const BarChartWidget = ({
|
||||
classes,
|
||||
title,
|
||||
barChartConfiguration,
|
||||
data,
|
||||
panelItem,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
displayErrorMessage,
|
||||
}: IBarChartWidget) => {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [data, setData] = useState<any>([]);
|
||||
const [result, setResult] = useState<IDashboardPanel | null>(null);
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
let stepCalc = 0;
|
||||
if (timeStart !== null && timeEnd !== null) {
|
||||
const secondsInPeriod = timeEnd.unix() - timeStart.unix();
|
||||
const periods = Math.floor(secondsInPeriod / 60);
|
||||
|
||||
stepCalc = periods < 1 ? 15 : periods;
|
||||
}
|
||||
|
||||
api
|
||||
.invoke(
|
||||
"GET",
|
||||
`/api/v1/admin/info/widgets/${panelItem.id}/?step=${stepCalc}&${
|
||||
timeStart !== null ? `&start=${timeStart.unix()}` : ""
|
||||
}${timeStart !== null && timeEnd !== null ? "&" : ""}${
|
||||
timeEnd !== null ? `end=${timeEnd.unix()}` : ""
|
||||
}`
|
||||
)
|
||||
.then((res: any) => {
|
||||
const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
|
||||
setData(widgetsWithValue.data);
|
||||
setResult(widgetsWithValue);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
displayErrorMessage(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [loading, panelItem, timeEnd, timeStart, displayErrorMessage]);
|
||||
|
||||
const barChartConfiguration = result
|
||||
? (result.widgetConfiguration as IBarChartConfiguration[])
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className={classes.singleValueContainer}>
|
||||
<div className={classes.titleContainer}>{title}</div>
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={data} layout={"vertical"} barCategoryGap={1}>
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
dataKey="name"
|
||||
type="category"
|
||||
interval={0}
|
||||
tick={<CustomizedAxisTick />}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={150}
|
||||
/>
|
||||
{barChartConfiguration.map((bar) => (
|
||||
<Bar
|
||||
key={`bar-${bar.dataKey}`}
|
||||
dataKey={bar.dataKey}
|
||||
fill={bar.color}
|
||||
background={bar.background}
|
||||
{loading && (
|
||||
<div className={classes.loadingAlign}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)}
|
||||
{!loading && (
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<BarChart
|
||||
data={data as object[]}
|
||||
layout={"vertical"}
|
||||
barCategoryGap={1}
|
||||
>
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
dataKey="name"
|
||||
type="category"
|
||||
interval={0}
|
||||
tick={<CustomizedAxisTick />}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={150}
|
||||
/>
|
||||
))}
|
||||
<Tooltip
|
||||
cursor={{ fill: "rgba(255, 255, 255, 0.3)" }}
|
||||
content={
|
||||
<BarChartTooltip
|
||||
barChartConfiguration={barChartConfiguration}
|
||||
{barChartConfiguration.map((bar) => (
|
||||
<Bar
|
||||
key={`bar-${bar.dataKey}`}
|
||||
dataKey={bar.dataKey}
|
||||
fill={bar.color}
|
||||
background={bar.background}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
))}
|
||||
<Tooltip
|
||||
cursor={{ fill: "rgba(255, 255, 255, 0.3)" }}
|
||||
content={
|
||||
<BarChartTooltip
|
||||
barChartConfiguration={barChartConfiguration}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(BarChartWidget);
|
||||
const connector = connect(null, {
|
||||
displayErrorMessage: setErrorSnackMessage,
|
||||
});
|
||||
|
||||
export default withStyles(styles)(connector(BarChartWidget));
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
@@ -28,12 +28,21 @@ import { ILinearGraphConfiguration } from "./types";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
|
||||
import LineChartTooltip from "./tooltips/LineChartTooltip";
|
||||
import { IDashboardPanel } from "../types";
|
||||
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../../../actions";
|
||||
import api from "../../../../../common/api";
|
||||
import { widgetDetailsToPanel } from "../utils";
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
|
||||
interface ILinearGraphWidget {
|
||||
classes: any;
|
||||
title: string;
|
||||
linearConfiguration: ILinearGraphConfiguration[];
|
||||
data: object[];
|
||||
panelItem: IDashboardPanel;
|
||||
timeStart: MaterialUiPickersDate;
|
||||
timeEnd: MaterialUiPickersDate;
|
||||
displayErrorMessage: any;
|
||||
hideYAxis?: boolean;
|
||||
yAxisFormatter?: (item: string) => string;
|
||||
xAxisFormatter?: (item: string) => string;
|
||||
@@ -64,18 +73,58 @@ const styles = (theme: Theme) =>
|
||||
position: "relative",
|
||||
textAlign: "center",
|
||||
},
|
||||
loadingAlign: {
|
||||
margin: "auto",
|
||||
},
|
||||
});
|
||||
|
||||
const LinearGraphWidget = ({
|
||||
classes,
|
||||
title,
|
||||
linearConfiguration,
|
||||
data,
|
||||
displayErrorMessage,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
panelItem,
|
||||
hideYAxis = false,
|
||||
yAxisFormatter = (item: string) => item,
|
||||
xAxisFormatter = (item: string) => item,
|
||||
panelWidth = 0,
|
||||
}: ILinearGraphWidget) => {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [data, setData] = useState<object[]>([]);
|
||||
const [result, setResult] = useState<IDashboardPanel | null>(null);
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
let stepCalc = 0;
|
||||
if (timeStart !== null && timeEnd !== null) {
|
||||
const secondsInPeriod = timeEnd.unix() - timeStart.unix();
|
||||
const periods = Math.floor(secondsInPeriod / 60);
|
||||
|
||||
stepCalc = periods < 1 ? 15 : periods;
|
||||
}
|
||||
|
||||
api
|
||||
.invoke(
|
||||
"GET",
|
||||
`/api/v1/admin/info/widgets/${panelItem.id}/?step=${stepCalc}&${
|
||||
timeStart !== null ? `&start=${timeStart.unix()}` : ""
|
||||
}${timeStart !== null && timeEnd !== null ? "&" : ""}${
|
||||
timeEnd !== null ? `end=${timeEnd.unix()}` : ""
|
||||
}`
|
||||
)
|
||||
.then((res: any) => {
|
||||
const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
|
||||
setData(widgetsWithValue.data);
|
||||
setResult(widgetsWithValue);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
displayErrorMessage(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [loading, panelItem, timeEnd, timeStart, displayErrorMessage]);
|
||||
|
||||
let intervalCount = 5;
|
||||
|
||||
if (panelWidth !== 0) {
|
||||
@@ -91,84 +140,100 @@ const LinearGraphWidget = ({
|
||||
intervalCount = 30;
|
||||
}
|
||||
}
|
||||
|
||||
const linearConfiguration = result
|
||||
? (result?.widgetConfiguration as ILinearGraphConfiguration[])
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className={classes.singleValueContainer}>
|
||||
<div className={classes.titleContainer}>{title}</div>
|
||||
<div className={classes.containerElements}>
|
||||
<div className={classes.chartCont}>
|
||||
<ResponsiveContainer>
|
||||
<AreaChart
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 20,
|
||||
left: hideYAxis ? 20 : 5,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tickFormatter={(value: any) => xAxisFormatter(value)}
|
||||
interval={intervalCount}
|
||||
tick={{ fontSize: "70%" }}
|
||||
tickCount={10}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, (dataMax: number) => dataMax * 4]}
|
||||
hide={hideYAxis}
|
||||
tickFormatter={(value: any) => yAxisFormatter(value)}
|
||||
tick={{ fontSize: "70%" }}
|
||||
/>
|
||||
{loading && <CircularProgress className={classes.loadingAlign} />}
|
||||
{!loading && (
|
||||
<React.Fragment>
|
||||
<div className={classes.chartCont}>
|
||||
<ResponsiveContainer>
|
||||
<AreaChart
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 20,
|
||||
left: hideYAxis ? 20 : 5,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tickFormatter={(value: any) => xAxisFormatter(value)}
|
||||
interval={intervalCount}
|
||||
tick={{ fontSize: "70%" }}
|
||||
tickCount={10}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, (dataMax: number) => dataMax * 4]}
|
||||
hide={hideYAxis}
|
||||
tickFormatter={(value: any) => yAxisFormatter(value)}
|
||||
tick={{ fontSize: "70%" }}
|
||||
/>
|
||||
{linearConfiguration.map((section, index) => {
|
||||
return (
|
||||
<Area
|
||||
key={`area-${section.dataKey}-${index.toString()}`}
|
||||
type="monotone"
|
||||
dataKey={section.dataKey}
|
||||
stroke={section.lineColor}
|
||||
fill={section.fillColor}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Tooltip
|
||||
content={
|
||||
<LineChartTooltip
|
||||
linearConfiguration={linearConfiguration}
|
||||
yAxisFormatter={yAxisFormatter}
|
||||
/>
|
||||
}
|
||||
wrapperStyle={{
|
||||
zIndex: 5000,
|
||||
}}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className={classes.legendChart}>
|
||||
{linearConfiguration.map((section, index) => {
|
||||
return (
|
||||
<Area
|
||||
key={`area-${section.dataKey}-${index.toString()}`}
|
||||
type="monotone"
|
||||
dataKey={section.dataKey}
|
||||
stroke={section.lineColor}
|
||||
fill={section.fillColor}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<div
|
||||
className={classes.singleLegendContainer}
|
||||
key={`legend-${section.keyLabel}-${index.toString()}`}
|
||||
>
|
||||
<div
|
||||
className={classes.colorContainer}
|
||||
style={{ backgroundColor: section.lineColor }}
|
||||
/>
|
||||
<div className={classes.legendLabel}>
|
||||
{section.keyLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<Tooltip
|
||||
content={
|
||||
<LineChartTooltip
|
||||
linearConfiguration={linearConfiguration}
|
||||
yAxisFormatter={yAxisFormatter}
|
||||
/>
|
||||
}
|
||||
wrapperStyle={{
|
||||
zIndex: 5000,
|
||||
}}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className={classes.legendChart}>
|
||||
{linearConfiguration.map((section, index) => {
|
||||
return (
|
||||
<div
|
||||
className={classes.singleLegendContainer}
|
||||
key={`legend-${section.keyLabel}-${index.toString()}`}
|
||||
>
|
||||
<div
|
||||
className={classes.colorContainer}
|
||||
style={{ backgroundColor: section.lineColor }}
|
||||
/>
|
||||
<div className={classes.legendLabel}>{section.keyLabel}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(LinearGraphWidget);
|
||||
const connector = connect(null, {
|
||||
displayErrorMessage: setErrorSnackMessage,
|
||||
});
|
||||
|
||||
export default withStyles(styles)(connector(LinearGraphWidget));
|
||||
|
||||
@@ -14,143 +14,210 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import get from "lodash/get";
|
||||
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
|
||||
import { IPieChartConfiguration } from "./types";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../../../actions";
|
||||
import { IDashboardPanel } from "../types";
|
||||
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
|
||||
import api from "../../../../../common/api";
|
||||
import { widgetDetailsToPanel } from "../utils";
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
|
||||
interface IPieChartWidget {
|
||||
classes: any;
|
||||
title: string;
|
||||
pieChartConfiguration: IPieChartConfiguration;
|
||||
dataInner: object[];
|
||||
dataOuter?: object[];
|
||||
middleLabel?: string;
|
||||
panelItem: IDashboardPanel;
|
||||
timeStart: MaterialUiPickersDate;
|
||||
timeEnd: MaterialUiPickersDate;
|
||||
displayErrorMessage: any;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
...widgetCommon,
|
||||
loadingAlign: {
|
||||
width: "100%",
|
||||
paddingTop: "15px",
|
||||
textAlign: "center",
|
||||
margin: "auto",
|
||||
},
|
||||
});
|
||||
|
||||
const PieChartWidget = ({
|
||||
classes,
|
||||
title,
|
||||
pieChartConfiguration,
|
||||
dataInner,
|
||||
dataOuter,
|
||||
middleLabel = "",
|
||||
panelItem,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
displayErrorMessage,
|
||||
}: IPieChartWidget) => {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [dataInner, setDataInner] = useState<object[]>([]);
|
||||
const [dataOuter, setDataOuter] = useState<object[]>([]);
|
||||
const [result, setResult] = useState<IDashboardPanel | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
let stepCalc = 0;
|
||||
if (timeStart !== null && timeEnd !== null) {
|
||||
const secondsInPeriod = timeEnd.unix() - timeStart.unix();
|
||||
const periods = Math.floor(secondsInPeriod / 60);
|
||||
|
||||
stepCalc = periods < 1 ? 15 : periods;
|
||||
}
|
||||
|
||||
api
|
||||
.invoke(
|
||||
"GET",
|
||||
`/api/v1/admin/info/widgets/${panelItem.id}/?step=${stepCalc}&${
|
||||
timeStart !== null ? `&start=${timeStart.unix()}` : ""
|
||||
}${timeStart !== null && timeEnd !== null ? "&" : ""}${
|
||||
timeEnd !== null ? `end=${timeEnd.unix()}` : ""
|
||||
}`
|
||||
)
|
||||
.then((res: any) => {
|
||||
const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
|
||||
setDataInner(widgetsWithValue.data);
|
||||
setDataOuter(widgetsWithValue.dataOuter as object[]);
|
||||
setResult(widgetsWithValue);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
displayErrorMessage(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [loading, panelItem, timeEnd, timeStart, displayErrorMessage]);
|
||||
|
||||
const pieChartConfiguration = result
|
||||
? (result.widgetConfiguration as IPieChartConfiguration)
|
||||
: [];
|
||||
const middleLabel = result?.innerLabel;
|
||||
|
||||
const innerColors = get(pieChartConfiguration, "innerChart.colorList", []);
|
||||
const outerColors = get(pieChartConfiguration, "outerChart.colorList", []);
|
||||
|
||||
return (
|
||||
<div className={classes.singleValueContainer}>
|
||||
<div className={classes.titleContainer}>{title}</div>
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<PieChart margin={{ top: 5, bottom: 5 }}>
|
||||
{dataOuter && (
|
||||
<Pie
|
||||
data={dataOuter}
|
||||
cx={"50%"}
|
||||
cy={"50%"}
|
||||
dataKey="value"
|
||||
innerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.innerRadius",
|
||||
0
|
||||
)}
|
||||
outerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.outerRadius",
|
||||
"80%"
|
||||
)}
|
||||
startAngle={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.startAngle",
|
||||
0
|
||||
)}
|
||||
endAngle={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.endAngle",
|
||||
360
|
||||
)}
|
||||
fill="#201763"
|
||||
>
|
||||
{dataOuter.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cellOuter-${index}`}
|
||||
fill={
|
||||
typeof outerColors[index] == "undefined"
|
||||
? "#393939"
|
||||
: outerColors[index]
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
)}
|
||||
{dataInner && (
|
||||
<Pie
|
||||
data={dataInner}
|
||||
dataKey="value"
|
||||
cx={"50%"}
|
||||
cy={"50%"}
|
||||
innerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.innerRadius",
|
||||
0
|
||||
)}
|
||||
outerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.outerRadius",
|
||||
"80%"
|
||||
)}
|
||||
startAngle={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.startAngle",
|
||||
0
|
||||
)}
|
||||
endAngle={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.endAngle",
|
||||
360
|
||||
)}
|
||||
fill="#201763"
|
||||
>
|
||||
{dataInner.map((entry, index) => {
|
||||
return (
|
||||
{loading && (
|
||||
<div className={classes.loadingAlign}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)}
|
||||
{!loading && (
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<PieChart margin={{ top: 5, bottom: 5 }}>
|
||||
{dataOuter && (
|
||||
<Pie
|
||||
data={dataOuter as object[]}
|
||||
cx={"50%"}
|
||||
cy={"50%"}
|
||||
dataKey="value"
|
||||
innerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.innerRadius",
|
||||
0
|
||||
)}
|
||||
outerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.outerRadius",
|
||||
"80%"
|
||||
)}
|
||||
startAngle={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.startAngle",
|
||||
0
|
||||
)}
|
||||
endAngle={get(
|
||||
pieChartConfiguration,
|
||||
"outerChart.endAngle",
|
||||
360
|
||||
)}
|
||||
fill="#201763"
|
||||
>
|
||||
{dataOuter.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
key={`cellOuter-${index}`}
|
||||
fill={
|
||||
typeof innerColors[index] == "undefined"
|
||||
typeof outerColors[index] == "undefined"
|
||||
? "#393939"
|
||||
: innerColors[index]
|
||||
: outerColors[index]
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Pie>
|
||||
)}
|
||||
{middleLabel && (
|
||||
<text
|
||||
x={"50%"}
|
||||
y={"50%"}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontWeight={600}
|
||||
fontSize={14}
|
||||
>
|
||||
{middleLabel}
|
||||
</text>
|
||||
)}
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
))}
|
||||
</Pie>
|
||||
)}
|
||||
{dataInner && (
|
||||
<Pie
|
||||
data={dataInner as object[]}
|
||||
dataKey="value"
|
||||
cx={"50%"}
|
||||
cy={"50%"}
|
||||
innerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.innerRadius",
|
||||
0
|
||||
)}
|
||||
outerRadius={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.outerRadius",
|
||||
"80%"
|
||||
)}
|
||||
startAngle={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.startAngle",
|
||||
0
|
||||
)}
|
||||
endAngle={get(
|
||||
pieChartConfiguration,
|
||||
"innerChart.endAngle",
|
||||
360
|
||||
)}
|
||||
fill="#201763"
|
||||
>
|
||||
{dataInner.map((entry, index) => {
|
||||
return (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={
|
||||
typeof innerColors[index] == "undefined"
|
||||
? "#393939"
|
||||
: innerColors[index]
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Pie>
|
||||
)}
|
||||
{middleLabel && (
|
||||
<text
|
||||
x={"50%"}
|
||||
y={"50%"}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontWeight={600}
|
||||
fontSize={14}
|
||||
>
|
||||
{middleLabel}
|
||||
</text>
|
||||
)}
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(PieChartWidget);
|
||||
const connector = connect(null, {
|
||||
displayErrorMessage: setErrorSnackMessage,
|
||||
});
|
||||
|
||||
export default withStyles(styles)(connector(PieChartWidget));
|
||||
|
||||
@@ -14,64 +14,129 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Area, AreaChart, ResponsiveContainer, YAxis } from "recharts";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
|
||||
import { IDataSRep } from "./types";
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../../../actions";
|
||||
import { IDashboardPanel } from "../types";
|
||||
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
|
||||
import api from "../../../../../common/api";
|
||||
import { widgetDetailsToPanel } from "../utils";
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
|
||||
interface ISingleRepWidget {
|
||||
classes: any;
|
||||
title: string;
|
||||
data: IDataSRep[];
|
||||
panelItem: IDashboardPanel;
|
||||
timeStart: MaterialUiPickersDate;
|
||||
timeEnd: MaterialUiPickersDate;
|
||||
displayErrorMessage: any;
|
||||
color: string;
|
||||
fillColor: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
...widgetCommon,
|
||||
loadingAlign: {
|
||||
width: "100%",
|
||||
paddingTop: "5px",
|
||||
textAlign: "center",
|
||||
margin: "auto",
|
||||
},
|
||||
});
|
||||
|
||||
const SingleRepWidget = ({
|
||||
classes,
|
||||
title,
|
||||
data,
|
||||
panelItem,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
displayErrorMessage,
|
||||
color,
|
||||
fillColor,
|
||||
label,
|
||||
}: ISingleRepWidget) => {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [data, setData] = useState<IDataSRep[]>([]);
|
||||
const [result, setResult] = useState<IDashboardPanel | null>(null);
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
let stepCalc = 0;
|
||||
if (timeStart !== null && timeEnd !== null) {
|
||||
const secondsInPeriod = timeEnd.unix() - timeStart.unix();
|
||||
const periods = Math.floor(secondsInPeriod / 60);
|
||||
|
||||
stepCalc = periods < 1 ? 15 : periods;
|
||||
}
|
||||
|
||||
api
|
||||
.invoke(
|
||||
"GET",
|
||||
`/api/v1/admin/info/widgets/${panelItem.id}/?step=${stepCalc}&${
|
||||
timeStart !== null ? `&start=${timeStart.unix()}` : ""
|
||||
}${timeStart !== null && timeEnd !== null ? "&" : ""}${
|
||||
timeEnd !== null ? `end=${timeEnd.unix()}` : ""
|
||||
}`
|
||||
)
|
||||
.then((res: any) => {
|
||||
const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
|
||||
setResult(widgetsWithValue);
|
||||
setData(widgetsWithValue.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
displayErrorMessage(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [loading, panelItem, timeEnd, timeStart, displayErrorMessage]);
|
||||
return (
|
||||
<div className={classes.singleValueContainer}>
|
||||
<div className={classes.titleContainer}>{title}</div>
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<AreaChart data={data}>
|
||||
<YAxis domain={[0, (dataMax: number) => dataMax * 2]} hide={true} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey={"value"}
|
||||
stroke={color}
|
||||
fill={fillColor}
|
||||
fillOpacity={1}
|
||||
/>
|
||||
<text
|
||||
x={"50%"}
|
||||
y={"50%"}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontWeight={600}
|
||||
fontSize={18}
|
||||
fill={color}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{loading && (
|
||||
<div className={classes.loadingAlign}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)}
|
||||
{!loading && (
|
||||
<div className={classes.contentContainer}>
|
||||
<ResponsiveContainer>
|
||||
<AreaChart data={data}>
|
||||
<YAxis
|
||||
domain={[0, (dataMax: number) => dataMax * 2]}
|
||||
hide={true}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey={"value"}
|
||||
stroke={color}
|
||||
fill={fillColor}
|
||||
fillOpacity={1}
|
||||
/>
|
||||
<text
|
||||
x={"50%"}
|
||||
y={"50%"}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontWeight={600}
|
||||
fontSize={18}
|
||||
fill={color}
|
||||
>
|
||||
{result ? result.innerLabel : ""}
|
||||
</text>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(SingleRepWidget);
|
||||
const connector = connect(null, {
|
||||
displayErrorMessage: setErrorSnackMessage,
|
||||
});
|
||||
|
||||
export default withStyles(styles)(connector(SingleRepWidget));
|
||||
|
||||
@@ -14,13 +14,23 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
|
||||
import api from "../../../../../common/api";
|
||||
import { widgetDetailsToPanel } from "../utils";
|
||||
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
|
||||
import { IDashboardPanel } from "../types";
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../../../actions";
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
|
||||
interface ISingleValueWidget {
|
||||
title: string;
|
||||
data: string;
|
||||
panelItem: IDashboardPanel;
|
||||
timeStart: MaterialUiPickersDate;
|
||||
timeEnd: MaterialUiPickersDate;
|
||||
displayErrorMessage: any;
|
||||
classes: any;
|
||||
}
|
||||
|
||||
@@ -34,15 +44,69 @@ const styles = (theme: Theme) =>
|
||||
fontSize: 18,
|
||||
textAlign: "center" as const,
|
||||
},
|
||||
loadingAlign: {
|
||||
width: "100%",
|
||||
paddingTop: "15px",
|
||||
textAlign: "center",
|
||||
margin: "auto",
|
||||
},
|
||||
});
|
||||
|
||||
const SingleValueWidget = ({ title, data, classes }: ISingleValueWidget) => {
|
||||
const SingleValueWidget = ({
|
||||
title,
|
||||
panelItem,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
displayErrorMessage,
|
||||
classes,
|
||||
}: ISingleValueWidget) => {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [data, setData] = useState<string>("");
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
let stepCalc = 0;
|
||||
if (timeStart !== null && timeEnd !== null) {
|
||||
const secondsInPeriod = timeEnd.unix() - timeStart.unix();
|
||||
const periods = Math.floor(secondsInPeriod / 60);
|
||||
|
||||
stepCalc = periods < 1 ? 15 : periods;
|
||||
}
|
||||
|
||||
api
|
||||
.invoke(
|
||||
"GET",
|
||||
`/api/v1/admin/info/widgets/${panelItem.id}/?step=${stepCalc}&${
|
||||
timeStart !== null ? `&start=${timeStart.unix()}` : ""
|
||||
}${timeStart !== null && timeEnd !== null ? "&" : ""}${
|
||||
timeEnd !== null ? `end=${timeEnd.unix()}` : ""
|
||||
}`
|
||||
)
|
||||
.then((res: any) => {
|
||||
const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
|
||||
setData(widgetsWithValue.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
displayErrorMessage(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [loading, panelItem, timeEnd, timeStart, displayErrorMessage]);
|
||||
return (
|
||||
<div className={classes.singleValueContainer}>
|
||||
<div className={classes.titleContainer}>{title}</div>
|
||||
<div className={classes.contentContainer}>{data}</div>
|
||||
{loading && (
|
||||
<div className={classes.loadingAlign}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)}
|
||||
{!loading && <div className={classes.contentContainer}>{data}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(SingleValueWidget);
|
||||
const connector = connect(null, {
|
||||
displayErrorMessage: setErrorSnackMessage,
|
||||
});
|
||||
|
||||
export default withStyles(styles)(connector(SingleValueWidget));
|
||||
|
||||
@@ -31,6 +31,7 @@ export enum widgetType {
|
||||
}
|
||||
|
||||
export interface IDashboardPanel {
|
||||
id: number;
|
||||
title: string;
|
||||
data: string | object[] | IDataSRep[];
|
||||
dataOuter?: string | object[];
|
||||
|
||||
@@ -331,6 +331,7 @@ const roundNumber = (value: string) => {
|
||||
|
||||
export const panelsConfiguration: IDashboardPanel[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Uptime",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
@@ -338,18 +339,21 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
labelDisplayFunction: niceDays,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Total Online Disks",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
layoutIdentifier: "panel-1",
|
||||
},
|
||||
{
|
||||
id: 78,
|
||||
title: "Total Offline Disks",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
layoutIdentifier: "panel-2",
|
||||
},
|
||||
{
|
||||
id: 50,
|
||||
title: "Current Usable Capacity",
|
||||
data: [],
|
||||
dataOuter: [{ name: "outer", value: 100 }],
|
||||
@@ -375,6 +379,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
labelDisplayFunction: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 68,
|
||||
title: "Data Usage Growth",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -391,6 +396,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 52,
|
||||
title: "Object size distribution",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -433,18 +439,21 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
layoutIdentifier: "panel-5",
|
||||
},
|
||||
{
|
||||
id: 53,
|
||||
title: "Total Online Servers",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
layoutIdentifier: "panel-6",
|
||||
},
|
||||
{
|
||||
id: 69,
|
||||
title: "Total Offline Servers",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
layoutIdentifier: "panel-7",
|
||||
},
|
||||
{
|
||||
id: 66,
|
||||
title: "Number of Buckets",
|
||||
data: [],
|
||||
innerLabel: "N/A",
|
||||
@@ -454,6 +463,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
layoutIdentifier: "panel-8",
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
title: "Number of Objects",
|
||||
data: [],
|
||||
innerLabel: "N/A",
|
||||
@@ -463,6 +473,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
layoutIdentifier: "panel-9",
|
||||
},
|
||||
{
|
||||
id: 63,
|
||||
title: "S3 API Data Received Rate",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -479,6 +490,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
yAxisFormatter: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 61,
|
||||
title: "Total Open FDs",
|
||||
data: [],
|
||||
innerLabel: "N/A",
|
||||
@@ -488,6 +500,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
fillColor: "#A6E8C4",
|
||||
},
|
||||
{
|
||||
id: 62,
|
||||
title: "Total Goroutines",
|
||||
data: [],
|
||||
innerLabel: "N/A",
|
||||
@@ -497,6 +510,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
fillColor: "#F4CECE",
|
||||
},
|
||||
{
|
||||
id: 77,
|
||||
title: "Node CPU Usage",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -513,6 +527,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 60,
|
||||
title: "S3 API Request Rate",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -528,6 +543,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 70,
|
||||
title: "S3 API Data Sent Rate",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -544,6 +560,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
yAxisFormatter: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: "Internode Data Transfer",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -560,6 +577,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 73,
|
||||
title: "Node IO",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -576,6 +594,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 80,
|
||||
title: "Time Since Last Heal Activity",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
@@ -583,6 +602,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
labelDisplayFunction: niceDaysFromNS,
|
||||
},
|
||||
{
|
||||
id: 81,
|
||||
title: "Time Since Last Scan Activity",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
@@ -590,6 +610,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
labelDisplayFunction: niceDaysFromNS,
|
||||
},
|
||||
{
|
||||
id: 71,
|
||||
title: "S3 API Request Error Rate",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -605,6 +626,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 76,
|
||||
title: "Node Memory Usage",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -621,6 +643,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
yAxisFormatter: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 74,
|
||||
title: "Drive Used Capacity",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -637,6 +660,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
yAxisFormatter: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 82,
|
||||
title: "Drives Free Inodes",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -653,6 +677,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "Node Syscalls",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -669,6 +694,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Node File Descriptors",
|
||||
data: [],
|
||||
widgetConfiguration: [
|
||||
@@ -685,6 +711,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
xAxisFormatter: getTimeFromTimestamp,
|
||||
},
|
||||
{
|
||||
id: 65,
|
||||
title: "Total S3 Traffic Inbound",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
@@ -692,6 +719,7 @@ export const panelsConfiguration: IDashboardPanel[] = [
|
||||
labelDisplayFunction: niceBytes,
|
||||
},
|
||||
{
|
||||
id: 64,
|
||||
title: "Total S3 Traffic Outbound",
|
||||
data: "N/A",
|
||||
type: widgetType.singleValue,
|
||||
@@ -737,297 +765,303 @@ const constructLabelNames = (metrics: any, legendFormat: string) => {
|
||||
|
||||
let cleanLegend = replacedLegend.replace(/{{(.*?)}}/g, "");
|
||||
|
||||
if (countVarsOpen === countVarsClose && countVarsOpen !== 0 && countVarsClose !== 0) {
|
||||
|
||||
if (
|
||||
countVarsOpen === countVarsClose &&
|
||||
countVarsOpen !== 0 &&
|
||||
countVarsClose !== 0
|
||||
) {
|
||||
keysToReplace.forEach((element) => {
|
||||
replacedLegend = replacedLegend.replace(element, metrics[element]);
|
||||
})
|
||||
});
|
||||
|
||||
cleanLegend = replacedLegend;
|
||||
}
|
||||
|
||||
|
||||
// In case not all the legends were replaced, we remove the placeholders.
|
||||
return cleanLegend;
|
||||
};
|
||||
|
||||
export const getWidgetsWithValue = (payload: any[]) => {
|
||||
return panelsConfiguration.map((panelItem) => {
|
||||
export const getWidgetsWithValue = (payload: any[]): IDashboardPanel[] => {
|
||||
return panelsConfiguration.map((panelItem: IDashboardPanel) => {
|
||||
const payloadData = payload.find(
|
||||
(panelT) =>
|
||||
panelT.title.toLowerCase().trim() ===
|
||||
panelItem.title.toLowerCase().trim()
|
||||
);
|
||||
return widgetDetailsToPanel(payloadData, panelItem);
|
||||
});
|
||||
};
|
||||
|
||||
if (!payloadData) {
|
||||
return panelItem;
|
||||
}
|
||||
export const widgetDetailsToPanel = (
|
||||
payloadData: any,
|
||||
panelItem: IDashboardPanel
|
||||
) => {
|
||||
if (!payloadData) {
|
||||
return panelItem;
|
||||
}
|
||||
|
||||
const typeOfPayload = payloadData.type;
|
||||
const typeOfPayload = payloadData.type;
|
||||
|
||||
switch (panelItem.type) {
|
||||
case widgetType.singleValue:
|
||||
if (typeOfPayload === "stat" || typeOfPayload === "singlestat") {
|
||||
// We sort values & get the last value
|
||||
let elements = get(payloadData, "targets[0].result[0].values", []);
|
||||
switch (panelItem.type) {
|
||||
case widgetType.singleValue:
|
||||
if (typeOfPayload === "stat" || typeOfPayload === "singlestat") {
|
||||
// We sort values & get the last value
|
||||
let elements = get(payloadData, "targets[0].result[0].values", []);
|
||||
|
||||
if (elements === null) {
|
||||
elements = [];
|
||||
}
|
||||
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
|
||||
const valueDisplay = calculateMainValue(elements, metricCalc);
|
||||
|
||||
const data = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(valueDisplay[1])
|
||||
: valueDisplay[1];
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data,
|
||||
};
|
||||
if (elements === null) {
|
||||
elements = [];
|
||||
}
|
||||
break;
|
||||
case widgetType.pieChart:
|
||||
if (typeOfPayload === "gauge") {
|
||||
let chartSeries = get(payloadData, "targets[0].result", []);
|
||||
|
||||
if (chartSeries === null) {
|
||||
chartSeries = [];
|
||||
}
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
const valueDisplay = calculateMainValue(elements, metricCalc);
|
||||
|
||||
const valuesArray =
|
||||
chartSeries.length > 0 ? chartSeries[0].values : [];
|
||||
const data = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(valueDisplay[1])
|
||||
: valueDisplay[1];
|
||||
|
||||
const totalValues = calculateMainValue(valuesArray, metricCalc);
|
||||
return {
|
||||
...panelItem,
|
||||
data,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.pieChart:
|
||||
if (typeOfPayload === "gauge") {
|
||||
let chartSeries = get(payloadData, "targets[0].result", []);
|
||||
|
||||
const values = chartSeries.map((elementValue: any) => {
|
||||
const values = get(elementValue, "values", []);
|
||||
const metricKeyItem = Object.keys(elementValue.metric);
|
||||
|
||||
const sortResult = values.sort(
|
||||
(value1: any[], value2: any[]) => value1[0] - value2[0]
|
||||
);
|
||||
|
||||
const metricName = elementValue.metric[metricKeyItem[0]];
|
||||
const value = sortResult[sortResult.length - 1];
|
||||
return { name: metricName, value: parseInt(value) };
|
||||
});
|
||||
|
||||
const innerLabel = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(totalValues[1])
|
||||
: totalValues[1];
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data: values,
|
||||
innerLabel,
|
||||
};
|
||||
if (chartSeries === null) {
|
||||
chartSeries = [];
|
||||
}
|
||||
break;
|
||||
case widgetType.linearGraph:
|
||||
if (typeOfPayload === "graph") {
|
||||
let targets = get(payloadData, "targets", []);
|
||||
if (targets === null) {
|
||||
targets = [];
|
||||
}
|
||||
|
||||
const series: any[] = [];
|
||||
const plotValues: any[] = [];
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
|
||||
targets.forEach(
|
||||
(
|
||||
targetMaster: { legendFormat: string; result: any[] },
|
||||
index: number
|
||||
) => {
|
||||
// Add a new serie to plot variables in case it is not from multiple values
|
||||
let results = get(targetMaster, "result", []);
|
||||
const legendFormat = targetMaster.legendFormat;
|
||||
if (results === null) {
|
||||
results = [];
|
||||
}
|
||||
const valuesArray = chartSeries.length > 0 ? chartSeries[0].values : [];
|
||||
|
||||
results.forEach((itemVals: { metric: object; values: any[] }) => {
|
||||
// Label Creation
|
||||
const labelName = constructLabelNames(
|
||||
itemVals.metric,
|
||||
legendFormat
|
||||
);
|
||||
const keyName = `key_${index}${labelName}`;
|
||||
const totalValues = calculateMainValue(valuesArray, metricCalc);
|
||||
|
||||
// series creation with recently created label
|
||||
series.push({
|
||||
dataKey: keyName,
|
||||
keyLabel: labelName,
|
||||
lineColor: "",
|
||||
fillColor: "",
|
||||
});
|
||||
const values = chartSeries.map((elementValue: any) => {
|
||||
const values = get(elementValue, "values", []);
|
||||
const metricKeyItem = Object.keys(elementValue.metric);
|
||||
|
||||
// we iterate over values and create elements
|
||||
let values = get(itemVals, "values", []);
|
||||
if (values === null) {
|
||||
values = [];
|
||||
}
|
||||
|
||||
values.forEach((valInfo: any[]) => {
|
||||
const itemIndex = plotValues.findIndex(
|
||||
(element) => element.name === valInfo[0]
|
||||
);
|
||||
|
||||
// Element not exists yet
|
||||
if (itemIndex === -1) {
|
||||
let itemToPush: any = { name: valInfo[0] };
|
||||
itemToPush[keyName] = valInfo[1];
|
||||
|
||||
plotValues.push(itemToPush);
|
||||
} else {
|
||||
plotValues[itemIndex][keyName] = valInfo[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const sortedSeries = series.sort((series1: any, series2: any) => {
|
||||
if (series1.keyLabel < series2.keyLabel) {
|
||||
return -1;
|
||||
}
|
||||
if (series1.keyLabel > series2.keyLabel) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const seriesWithColors = sortedSeries.map(
|
||||
(serialC: any, index: number) => {
|
||||
return {
|
||||
...serialC,
|
||||
lineColor:
|
||||
colorsMain[index] || textToRGBColor(serialC.keyLabel),
|
||||
fillColor:
|
||||
colorsMain[index] || textToRGBColor(serialC.keyLabel),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const sortedVals = plotValues.sort(
|
||||
(value1: any, value2: any) => value1.name - value2.name
|
||||
);
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
widgetConfiguration: seriesWithColors,
|
||||
data: sortedVals,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.barChart:
|
||||
if (typeOfPayload === "bargauge") {
|
||||
let chartBars = get(payloadData, "targets[0].result", []);
|
||||
|
||||
if (chartBars === null) {
|
||||
chartBars = [];
|
||||
}
|
||||
|
||||
const sortFunction = (value1: any[], value2: any[]) =>
|
||||
value1[0] - value2[0];
|
||||
|
||||
let values = [];
|
||||
if (panelItem.customStructure) {
|
||||
values = panelItem.customStructure.map((structureItem) => {
|
||||
const metricTake = chartBars.find((element: any) => {
|
||||
const metricKeyItem = Object.keys(element.metric);
|
||||
|
||||
const metricName = element.metric[metricKeyItem[0]];
|
||||
|
||||
return metricName === structureItem.originTag;
|
||||
});
|
||||
|
||||
const elements = get(metricTake, "values", []);
|
||||
|
||||
const sortResult = elements.sort(sortFunction);
|
||||
const lastValue = sortResult[sortResult.length - 1] || ["", "0"];
|
||||
|
||||
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] || ["", "0"];
|
||||
return { name: metricName, a: parseInt(lastValue[1]) };
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data: values,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.singleRep:
|
||||
if (typeOfPayload === "stat") {
|
||||
// We sort values & get the last value
|
||||
let elements = get(payloadData, "targets[0].result[0].values", []);
|
||||
if (elements === null) {
|
||||
elements = [];
|
||||
}
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
|
||||
const valueDisplay = calculateMainValue(elements, metricCalc);
|
||||
|
||||
const sortResult = elements.sort(
|
||||
const sortResult = values.sort(
|
||||
(value1: any[], value2: any[]) => value1[0] - value2[0]
|
||||
);
|
||||
|
||||
let valuesForBackground = [];
|
||||
const metricName = elementValue.metric[metricKeyItem[0]];
|
||||
const value = sortResult[sortResult.length - 1];
|
||||
return { name: metricName, value: parseInt(value) };
|
||||
});
|
||||
|
||||
if (sortResult.length === 1) {
|
||||
valuesForBackground.push({ value: 0 });
|
||||
}
|
||||
const innerLabel = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(totalValues[1])
|
||||
: totalValues[1];
|
||||
|
||||
sortResult.forEach((eachVal: any) => {
|
||||
valuesForBackground.push({ value: parseInt(eachVal[1]) });
|
||||
});
|
||||
|
||||
const innerLabel = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(valueDisplay[1])
|
||||
: valueDisplay[1];
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data: valuesForBackground,
|
||||
innerLabel,
|
||||
};
|
||||
return {
|
||||
...panelItem,
|
||||
data: values,
|
||||
innerLabel,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.linearGraph:
|
||||
if (typeOfPayload === "graph") {
|
||||
let targets = get(payloadData, "targets", []);
|
||||
if (targets === null) {
|
||||
targets = [];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return panelItem;
|
||||
});
|
||||
const series: any[] = [];
|
||||
const plotValues: any[] = [];
|
||||
|
||||
targets.forEach(
|
||||
(
|
||||
targetMaster: { legendFormat: string; result: any[] },
|
||||
index: number
|
||||
) => {
|
||||
// Add a new serie to plot variables in case it is not from multiple values
|
||||
let results = get(targetMaster, "result", []);
|
||||
const legendFormat = targetMaster.legendFormat;
|
||||
if (results === null) {
|
||||
results = [];
|
||||
}
|
||||
|
||||
results.forEach((itemVals: { metric: object; values: any[] }) => {
|
||||
// Label Creation
|
||||
const labelName = constructLabelNames(
|
||||
itemVals.metric,
|
||||
legendFormat
|
||||
);
|
||||
const keyName = `key_${index}${labelName}`;
|
||||
|
||||
// series creation with recently created label
|
||||
series.push({
|
||||
dataKey: keyName,
|
||||
keyLabel: labelName,
|
||||
lineColor: "",
|
||||
fillColor: "",
|
||||
});
|
||||
|
||||
// we iterate over values and create elements
|
||||
let values = get(itemVals, "values", []);
|
||||
if (values === null) {
|
||||
values = [];
|
||||
}
|
||||
|
||||
values.forEach((valInfo: any[]) => {
|
||||
const itemIndex = plotValues.findIndex(
|
||||
(element) => element.name === valInfo[0]
|
||||
);
|
||||
|
||||
// Element not exists yet
|
||||
if (itemIndex === -1) {
|
||||
let itemToPush: any = { name: valInfo[0] };
|
||||
itemToPush[keyName] = valInfo[1];
|
||||
|
||||
plotValues.push(itemToPush);
|
||||
} else {
|
||||
plotValues[itemIndex][keyName] = valInfo[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const sortedSeries = series.sort((series1: any, series2: any) => {
|
||||
if (series1.keyLabel < series2.keyLabel) {
|
||||
return -1;
|
||||
}
|
||||
if (series1.keyLabel > series2.keyLabel) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const seriesWithColors = sortedSeries.map(
|
||||
(serialC: any, index: number) => {
|
||||
return {
|
||||
...serialC,
|
||||
lineColor: colorsMain[index] || textToRGBColor(serialC.keyLabel),
|
||||
fillColor: colorsMain[index] || textToRGBColor(serialC.keyLabel),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const sortedVals = plotValues.sort(
|
||||
(value1: any, value2: any) => value1.name - value2.name
|
||||
);
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
widgetConfiguration: seriesWithColors,
|
||||
data: sortedVals,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.barChart:
|
||||
if (typeOfPayload === "bargauge") {
|
||||
let chartBars = get(payloadData, "targets[0].result", []);
|
||||
|
||||
if (chartBars === null) {
|
||||
chartBars = [];
|
||||
}
|
||||
|
||||
const sortFunction = (value1: any[], value2: any[]) =>
|
||||
value1[0] - value2[0];
|
||||
|
||||
let values = [];
|
||||
if (panelItem.customStructure) {
|
||||
values = panelItem.customStructure.map((structureItem) => {
|
||||
const metricTake = chartBars.find((element: any) => {
|
||||
const metricKeyItem = Object.keys(element.metric);
|
||||
|
||||
const metricName = element.metric[metricKeyItem[0]];
|
||||
|
||||
return metricName === structureItem.originTag;
|
||||
});
|
||||
|
||||
const elements = get(metricTake, "values", []);
|
||||
|
||||
const sortResult = elements.sort(sortFunction);
|
||||
const lastValue = sortResult[sortResult.length - 1] || ["", "0"];
|
||||
|
||||
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] || ["", "0"];
|
||||
return { name: metricName, a: parseInt(lastValue[1]) };
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data: values,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case widgetType.singleRep:
|
||||
if (typeOfPayload === "stat") {
|
||||
// We sort values & get the last value
|
||||
let elements = get(payloadData, "targets[0].result[0].values", []);
|
||||
if (elements === null) {
|
||||
elements = [];
|
||||
}
|
||||
const metricCalc = get(
|
||||
payloadData,
|
||||
"options.reduceOptions.calcs[0]",
|
||||
"lastNotNull"
|
||||
);
|
||||
|
||||
const valueDisplay = calculateMainValue(elements, metricCalc);
|
||||
|
||||
const sortResult = elements.sort(
|
||||
(value1: any[], value2: any[]) => value1[0] - value2[0]
|
||||
);
|
||||
|
||||
let valuesForBackground = [];
|
||||
|
||||
if (sortResult.length === 1) {
|
||||
valuesForBackground.push({ value: 0 });
|
||||
}
|
||||
|
||||
sortResult.forEach((eachVal: any) => {
|
||||
valuesForBackground.push({ value: parseInt(eachVal[1]) });
|
||||
});
|
||||
|
||||
const innerLabel = panelItem.labelDisplayFunction
|
||||
? panelItem.labelDisplayFunction(valueDisplay[1])
|
||||
: valueDisplay[1];
|
||||
|
||||
return {
|
||||
...panelItem,
|
||||
data: valuesForBackground,
|
||||
innerLabel,
|
||||
};
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return panelItem;
|
||||
};
|
||||
|
||||
export const saveDashboardDistribution = (configuration: Layout[]) => {
|
||||
|
||||
Reference in New Issue
Block a user