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

Fixed widgets overlaps & some style adjustments in Dashboard (#1087)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2021-09-28 14:51:38 -05:00
committed by GitHub
parent 3d27cd2bd3
commit 8fd1e0db9c
9 changed files with 131 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -132,6 +132,7 @@ export const radioIcons = {
export const containerForHeader = (bottomSpacing: any) => ({
container: {
position: "relative" as const,
padding: "8px 16px 0",
"& h6": {
color: "#777777",
@@ -417,6 +418,7 @@ export const widgetCommon = {
minWidth: 280,
maxWidth: 1185,
border: "#eef1f4 2px solid",
backgroundColor: "#fff",
borderRadius: 10,
width: "100%",
padding: 16,
@@ -470,6 +472,19 @@ export const widgetCommon = {
},
};
export const widgetContainerCommon = {
widgetPanelDelimiter: {
padding: 10,
},
dashboardRow: {
display: "flex" as const,
flexDirection: "row" as const,
justifyContent: "flex-start" as const,
flexWrap: "wrap" as const,
maxWidth: 1180,
},
};
export const tooltipCommon = {
customTooltip: {
backgroundColor: "rgba(255, 255, 255, 0.90)",

90
portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
View File

@@ -25,6 +25,7 @@ import DriveInfoCard from "./DriveInfoCard";
import CommonCard from "../CommonCard";
import TabSelector from "../../Common/TabSelector/TabSelector";
import GeneralUsePaginator from "../../Common/GeneralUsePaginator/GeneralUsePaginator";
import { widgetContainerCommon } from "../../Common/FormComponents/common/styleLibrary";
const styles = (theme: Theme) =>
createStyles({
@@ -48,6 +49,7 @@ const styles = (theme: Theme) =>
maxWidth: 1185,
width: "100%",
},
...widgetContainerCommon,
});
interface IDashboardProps {
@@ -93,10 +95,12 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
}
return 0;
});
} else return [];
}
return [];
};
const serverArray = makeServerArray(usage);
const serverArray = makeServerArray(usage || null);
const usageToRepresent = prettyUsage(
usage && usage.usage ? usage.usage.toString() : "0"
@@ -129,29 +133,65 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
<Grid item xs={12} className={classes.generalStatusTitle}>
General Status
</Grid>
<Grid item xs={12} className={classes.generalStatusCards}>
<CommonCard
title={"All Buckets"}
metricValue={usage ? prettyNumber(usage.buckets) : 0}
extraMargin
/>
<CommonCard
title={"Usage"}
metricValue={usageToRepresent.total}
metricUnit={usageToRepresent.unit}
extraMargin
/>
<CommonCard
title={"Total Objects"}
metricValue={usage ? prettyNumber(usage.objects) : 0}
extraMargin
/>
<CommonCard
title={"Servers"}
metricValue={usage ? prettyNumber(serverArray.length) : 0}
subMessage={{ message: "Total" }}
extraMargin
/>
<Grid item xs={12} className={classes.dashboardRow}>
<Grid
item
xs={7}
sm={8}
md={6}
lg={3}
className={classes.widgetPanelDelimiter}
>
<CommonCard
title={"All Buckets"}
metricValue={usage ? prettyNumber(usage.buckets) : 0}
extraMargin
/>
</Grid>
<Grid
item
xs={7}
sm={8}
md={6}
lg={3}
className={classes.widgetPanelDelimiter}
>
<CommonCard
title={"Usage"}
metricValue={usageToRepresent.total}
metricUnit={usageToRepresent.unit}
extraMargin
/>
</Grid>
<Grid
item
xs={7}
sm={8}
md={6}
lg={3}
className={classes.widgetPanelDelimiter}
>
<CommonCard
title={"Total Objects"}
metricValue={usage ? prettyNumber(usage.objects) : 0}
extraMargin
/>
</Grid>
<Grid
item
xs={7}
sm={8}
md={6}
lg={3}
className={classes.widgetPanelDelimiter}
>
<CommonCard
title={"Servers"}
metricValue={usage ? prettyNumber(serverArray.length) : 0}
subMessage={{ message: "Total" }}
extraMargin
/>
</Grid>
</Grid>
<Grid item xs={12}>
<TabSelector

2
portal-ui/src/screens/Console/Dashboard/Chart.tsx
View File

@@ -32,7 +32,7 @@ export default function Chart() {
return (
<React.Fragment>
<Title>Today</Title>
<ResponsiveContainer>
<ResponsiveContainer width="99%">
<LineChart
data={data}
margin={{

4
portal-ui/src/screens/Console/Dashboard/CommonCard.tsx
View File

@@ -46,7 +46,9 @@ const styles = (theme: Theme) =>
...widgetCommon,
cardRoot: {
...widgetCommon.singleValueContainer,
maxWidth: 280,
"&.MuiPaper-root": {
borderRadius: 10,
},
},
cardsContainer: {
maxHeight: 440,

80
portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
View File

@@ -20,8 +20,11 @@ import Grid from "@material-ui/core/Grid";
import ScheduleIcon from "@material-ui/icons/Schedule";
import WatchLaterIcon from "@material-ui/icons/WatchLater";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { Button } from "@material-ui/core";
import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
import { Button, GridSize } from "@material-ui/core";
import {
actionsTray,
widgetContainerCommon,
} from "../../Common/FormComponents/common/styleLibrary";
import { IDashboardPanel, widgetType } from "./types";
import { getWidgetsWithValue, panelsConfiguration } from "./utils";
import { TabPanel } from "../../../shared/tabs";
@@ -48,13 +51,7 @@ interface IPrDashboard {
const styles = (theme: Theme) =>
createStyles({
...actionsTray,
widgetsContainer: {
position: "relative",
display: "flex",
flexGrow: 1,
width: "100%",
height: "100%",
},
...widgetContainerCommon,
syncButton: {
"&.MuiButton-root .MuiButton-iconSizeMedium > *:first-child": {
fontSize: 18,
@@ -71,9 +68,6 @@ const styles = (theme: Theme) =>
flexWrap: "wrap",
maxWidth: 1180,
},
widgetPanelDelimiter: {
margin: 10,
},
schedulerIcon: {
opacity: 0.4,
fontSize: 10,
@@ -183,7 +177,13 @@ const PrDashboard = ({
return filterPanels?.map((panelLine, indexLine) => {
const totalPanelsContained = panelLine.length;
const perc = 100 / totalPanelsContained;
let perc = Math.floor(12 / totalPanelsContained);
if (perc < 1) {
perc = 1;
} else if (perc > 12) {
perc = 12;
}
return (
<Grid
@@ -198,33 +198,39 @@ const PrDashboard = ({
);
return (
<div
<Grid
key={`widget-${panelInline}-${indexPanel}`}
className={classes.widgetPanelDelimiter}
style={{ width: `calc(${perc}% - 20px)` }}
item
xs={7}
sm={8}
md={6}
lg={perc as GridSize}
>
{panelInfo ? (
<Fragment>
{panelInfo.mergedPanels ? (
<Fragment>
<MergedWidgets
title={panelInfo.title}
leftComponent={componentToUse(
panelInfo.mergedPanels[0],
0
)}
rightComponent={componentToUse(
panelInfo.mergedPanels[1],
1
)}
/>
</Fragment>
) : (
componentToUse(panelInfo, indexPanel)
)}
</Fragment>
) : null}
</div>
<Grid item xs={12}>
{panelInfo ? (
<Fragment>
{panelInfo.mergedPanels ? (
<Fragment>
<MergedWidgets
title={panelInfo.title}
leftComponent={componentToUse(
panelInfo.mergedPanels[0],
0
)}
rightComponent={componentToUse(
panelInfo.mergedPanels[1],
1
)}
/>
</Fragment>
) : (
componentToUse(panelInfo, indexPanel)
)}
</Fragment>
) : null}
</Grid>
</Grid>
);
})}
</Grid>

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

@@ -156,7 +156,7 @@ const BarChartWidget = ({
)}
{!loading && (
<div className={classes.contentContainer}>
<ResponsiveContainer>
<ResponsiveContainer width="99%">
<BarChart
data={data as object[]}
layout={"vertical"}

2
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx
View File

@@ -181,7 +181,7 @@ const LinearGraphWidget = ({
{!loading && (
<React.Fragment>
<div className={classes.chartCont}>
<ResponsiveContainer>
<ResponsiveContainer width="99%">
<AreaChart
data={data}
margin={{

2
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/PieChartWidget.tsx
View File

@@ -143,7 +143,7 @@ const PieChartWidget = ({
{middleLabel && splitSizeMetric(middleLabel)}
</span>
<div className={classes.chartContainer}>
<ResponsiveContainer>
<ResponsiveContainer width="99%">
<PieChart margin={{ top: 5, bottom: 5 }}>
{dataOuter && (
<Pie

2
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
View File

@@ -119,7 +119,7 @@ const SingleRepWidget = ({
)}
{!loading && (
<div className={classes.contentContainer}>
<ResponsiveContainer>
<ResponsiveContainer width="99%">
<AreaChart data={data}>
<defs>
<linearGradient id={gradientID} x1="0" y1="0" x2="0" y2="1">