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

Migrated Date Selectors & Chart Tooltips styles (#3107)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-10-26 22:41:40 -06:00
committed by GitHub
parent 3ad3bccadb
commit 0043833f36
5 changed files with 228 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
View File

@@ -179,7 +179,7 @@ const SetRetention = ({
onSubmit(e); onSubmit(e);
}} }}
> >
<FormLayout> <FormLayout withBorders={false} containerPadding={false}>
<Box className={"inputItem"}> <Box className={"inputItem"}>
<strong>Selected Object</strong>: {objectName} <strong>Selected Object</strong>: {objectName}
</Box> </Box>
@@ -212,22 +212,20 @@ const SetRetention = ({
{ label: "Compliance", value: ObjectRetentionMode.Compliance }, { label: "Compliance", value: ObjectRetentionMode.Compliance },
]} ]}
/> />
<Box className={"inputItem"}> <DateSelector
<DateSelector id="date"
id="date" label="Date"
label="Date" disableOptions={dateFieldDisabled()}
disableOptions={dateFieldDisabled()} ref={dateElement}
ref={dateElement} value={date}
value={date} borderBottom={true}
borderBottom={true} onDateChange={(date: string, isValid: boolean) => {
onDateChange={(date: string, isValid: boolean) => { setIsDateValid(isValid);
setIsDateValid(isValid); if (isValid) {
if (isValid) { setDate(date);
setDate(date); }
} }}
}} />
/>
</Box>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}> <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button <Button
id={"reset"} id={"reset"}

108
portal-ui/src/screens/Console/Common/FormComponents/DateSelector/DateSelector.tsx
View File

@@ -20,35 +20,13 @@ import React, {
useImperativeHandle, useImperativeHandle,
useState, useState,
} from "react"; } from "react";
import clsx from "clsx"; import { Box, HelpIcon, InputLabel, Select, Tooltip } from "mds";
import { Box, Grid, HelpIcon, InputLabel, Select, Switch, Tooltip } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
import { days, months, validDate, years } from "./utils"; import { days, months, validDate, years } from "./utils";
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
fieldContainer: {
...fieldBasic.fieldContainer,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
paddingBottom: 10,
marginTop: 11,
marginBottom: 6,
},
});
interface IDateSelectorProps { interface IDateSelectorProps {
classes: any;
id: string; id: string;
label: string; label: string;
disableOptions?: boolean; disableOptions?: boolean;
addSwitch?: boolean;
tooltip?: string; tooltip?: string;
borderBottom?: boolean; borderBottom?: boolean;
value?: string; value?: string;
@@ -58,11 +36,9 @@ interface IDateSelectorProps {
const DateSelector = forwardRef( const DateSelector = forwardRef(
( (
{ {
classes,
id, id,
label, label,
disableOptions = false, disableOptions = false,
addSwitch = false,
tooltip = "", tooltip = "",
borderBottom = false, borderBottom = false,
onDateChange, onDateChange,
@@ -72,7 +48,6 @@ const DateSelector = forwardRef(
) => { ) => {
useImperativeHandle(ref, () => ({ resetDate })); useImperativeHandle(ref, () => ({ resetDate }));
const [dateEnabled, setDateEnabled] = useState<boolean>(false);
const [month, setMonth] = useState<string>(""); const [month, setMonth] = useState<string>("");
const [day, setDay] = useState<string>(""); const [day, setDay] = useState<string>("");
const [year, setYear] = useState<string>(""); const [year, setYear] = useState<string>("");
@@ -104,8 +79,6 @@ const DateSelector = forwardRef(
const isDateDisabled = () => { const isDateDisabled = () => {
if (disableOptions) { if (disableOptions) {
return disableOptions; return disableOptions;
} else if (addSwitch) {
return !dateEnabled;
} else { } else {
return false; return false;
} }
@@ -116,45 +89,43 @@ const DateSelector = forwardRef(
const yearsForDrop = [{ value: "", label: "<Year>" }, ...years]; const yearsForDrop = [{ value: "", label: "<Year>" }, ...years];
return ( return (
<Grid <Box className={"inputItem"}>
item <Box
xs={12} sx={{
className={clsx(classes.fieldContainer, { display: "flex",
[classes.fieldContainerBorder]: borderBottom, alignItems: "center",
})} gap: 5,
> marginBottom: 5,
<div className={classes.labelContainer}> }}
<Grid container> >
<InputLabel htmlFor={id}> <InputLabel htmlFor={id}>
<span>{label}</span> <span>{label}</span>
{tooltip !== "" && ( {tooltip !== "" && (
<div className={classes.tooltipContainer}> <Box
<Tooltip tooltip={tooltip} placement="top"> sx={{
<div className={classes.tooltip}> marginLeft: 5,
<HelpIcon /> display: "flex",
</div> alignItems: "center",
</Tooltip> "& .min-icon": {
</div> width: 13,
)} },
</InputLabel>
{addSwitch && (
<Switch
indicatorLabels={["Specific Date", "Default (7 Days)"]}
checked={dateEnabled}
value={"date_enabled"}
id="date-status"
name="date-status"
onChange={(e) => {
setDateEnabled(e.target.checked);
if (!e.target.checked) {
onDateChange("", true);
}
}} }}
switchOnly >
/> <Tooltip tooltip={tooltip} placement="top">
<Box
sx={{
"& .min-icon": {
width: 13,
},
}}
>
<HelpIcon />
</Box>
</Tooltip>
</Box>
)} )}
</Grid> </InputLabel>
</div> </Box>
<Box sx={{ display: "flex", gap: 12 }}> <Box sx={{ display: "flex", gap: 12 }}>
<Select <Select
id={`${id}-month`} id={`${id}-month`}
@@ -190,11 +161,14 @@ const DateSelector = forwardRef(
options={yearsForDrop} options={yearsForDrop}
label={""} label={""}
disabled={isDateDisabled()} disabled={isDateDisabled()}
sx={{
marginBottom: 12,
}}
/> />
</Box> </Box>
</Grid> </Box>
); );
}, },
); );
export default withStyles(styles)(DateSelector); export default DateSelector;

288
portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
View File

@@ -14,16 +14,11 @@
// You should have received a copy of the GNU Affero General Public License // 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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { Theme } from "@mui/material/styles"; import { Box, InputBox, InputLabel, LinkIcon } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
import { Grid, InputBox, InputLabel, LinkIcon } from "mds";
interface IDaysSelector { interface IDaysSelector {
classes: any;
id: string; id: string;
initialDate: Date; initialDate: Date;
maxDays?: number; maxDays?: number;
@@ -32,74 +27,6 @@ interface IDaysSelector {
onChange: (newDate: string, isValid: boolean) => void; onChange: (newDate: string, isValid: boolean) => void;
} }
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
labelContainer: {
display: "flex",
alignItems: "center",
marginBottom: 15,
},
fieldContainer: {
...fieldBasic.fieldContainer,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
paddingBottom: 10,
marginTop: 11,
marginBottom: 6,
},
durationInputs: {
display: "flex",
alignItems: "flex-start",
justifyContent: "flex-start",
gap: 10,
},
validityIndicator: {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginTop: 25,
marginLeft: 10,
},
invalidDurationText: {
marginTop: 15,
display: "flex",
color: "red",
fontSize: 11,
},
reverseInput: {
flexFlow: "row-reverse",
"& > label": {
fontWeight: 400,
marginLeft: 15,
marginRight: 25,
},
},
validityText: {
fontSize: 14,
marginTop: 15,
display: "flex",
alignItems: "center",
justifyContent: "center",
"@media (max-width: 900px)": {
flexFlow: "column",
},
"& > .min-icon": {
color: "#5E5E5E",
width: 15,
height: 15,
marginRight: 10,
},
},
validTill: {
fontWeight: "bold",
marginLeft: 15,
},
});
const calculateNewTime = ( const calculateNewTime = (
initialDate: Date, initialDate: Date,
days: number, days: number,
@@ -110,7 +37,6 @@ const calculateNewTime = (
}; };
const DaysSelector = ({ const DaysSelector = ({
classes,
id, id,
initialDate, initialDate,
label, label,
@@ -204,88 +130,136 @@ const DaysSelector = ({
}; };
return ( return (
<Fragment> <Box className={"inputItem"}>
<Grid container className={classes.fieldContainer}> <Box
<Grid item xs={12} className={classes.labelContainer}> sx={{
<InputLabel htmlFor={id}>{label}</InputLabel> display: "flex",
</Grid> alignItems: "center",
<Grid item xs={12} className={classes.durationInputs}> marginBottom: 5,
<Grid item xs className={classes.dateInputContainer}> }}
<InputBox >
id={id} <InputLabel htmlFor={id}>{label}</InputLabel>
className={`${classes.reverseInput} removeArrows`} </Box>
type="number" <Box
min="0" sx={{
max={maxDays ? maxDays.toString() : "999"} display: "flex",
label="Days" alignItems: "flex-start",
name={id} justifyContent: "space-evenly",
onChange={(e) => { gap: 10,
setSelectedDays(parseInt(e.target.value)); "& .reverseInput": {
}} flexFlow: "row-reverse",
value={selectedDays.toString()} "& > label": {
sx={extraStyles} fontWeight: 400,
noLabelMinWidth marginLeft: 15,
/> marginRight: 25,
</Grid> },
<Grid item xs className={classes.dateInputContainer}> },
<InputBox }}
id={id} >
className={`${classes.reverseInput} removeArrows`} <Box>
type="number" <InputBox
min="0" id={id}
max="23" className={`reverseInput removeArrows`}
label="Hours" type="number"
name={id} min="0"
onChange={(e) => { max={maxDays ? maxDays.toString() : "999"}
setSelectedHours(parseInt(e.target.value)); label="Days"
}} name={id}
value={selectedHours.toString()} onChange={(e) => {
sx={extraStyles} setSelectedDays(parseInt(e.target.value));
noLabelMinWidth }}
/> value={selectedDays.toString()}
</Grid> sx={extraStyles}
<Grid item xs className={classes.dateInputContainer}> noLabelMinWidth
<InputBox />
id={id} </Box>
className={`${classes.reverseInput} removeArrows`} <Box>
type="number" <InputBox
min="0" id={id}
max="59" className={`reverseInput removeArrows`}
label="Minutes" type="number"
name={id} min="0"
onChange={(e) => { max="23"
setSelectedMinutes(parseInt(e.target.value)); label="Hours"
}} name={id}
value={selectedMinutes.toString()} onChange={(e) => {
sx={extraStyles} setSelectedHours(parseInt(e.target.value));
noLabelMinWidth }}
/> value={selectedHours.toString()}
</Grid> sx={extraStyles}
</Grid> noLabelMinWidth
<Grid />
item </Box>
xs={12} <Box>
className={`${classes.validityIndicator} ${classes.formFieldRow}`} <InputBox
> id={id}
{validDate ? ( className={`reverseInput removeArrows`}
<div className={classes.validityText}> type="number"
<LinkIcon /> min="0"
<div className={classes.validityLabel}> max="59"
{entity} will be available until: label="Minutes"
</div>{" "} name={id}
<div className={classes.validTill}> onChange={(e) => {
{dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")} setSelectedMinutes(parseInt(e.target.value));
</div> }}
value={selectedMinutes.toString()}
sx={extraStyles}
noLabelMinWidth
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginTop: 25,
marginLeft: 10,
marginBottom: 15,
"& .validityText": {
fontSize: 14,
marginTop: 15,
display: "flex",
alignItems: "center",
justifyContent: "center",
"@media (max-width: 900px)": {
flexFlow: "column",
},
"& > .min-icon": {
color: "#5E5E5E",
width: 15,
height: 15,
marginRight: 10,
},
},
"& .validTill": {
fontWeight: "bold",
marginLeft: 15,
},
"& .invalidDurationText": {
marginTop: 15,
display: "flex",
color: "red",
fontSize: 11,
},
}}
>
{validDate ? (
<div className={"validityText"}>
<LinkIcon />
<div>{entity} will be available until:</div>{" "}
<div className={"validTill"}>
{dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")}
</div> </div>
) : ( </div>
<div className={classes.invalidDurationText}> ) : (
Please select a valid duration. <div className={"invalidDurationText"}>
</div> Please select a valid duration.
)} </div>
</Grid> )}
</Grid> </Box>
</Fragment> </Box>
); );
}; };
export default withStyles(styles)(DaysSelector); export default DaysSelector;

41
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/tooltips/BarChartTooltip.tsx
View File

@@ -15,51 +15,50 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react"; import React from "react";
import { Theme } from "@mui/material/styles"; import { Box } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary"; import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary";
const styles = (theme: Theme) =>
createStyles({
...tooltipCommon,
});
const BarChartTooltip = ({ const BarChartTooltip = ({
active, active,
payload, payload,
label, label,
barChartConfiguration, barChartConfiguration,
classes,
}: any) => { }: any) => {
if (active) { if (active) {
return ( return (
<div className={classes.customTooltip}> <Box sx={tooltipCommon.customTooltip}>
<div className={classes.timeStampTitle}>{label}</div> <Box sx={tooltipCommon.timeStampTitle}>{label}</Box>
{payload && {payload &&
payload.map((pl: any, index: number) => { payload.map((pl: any, index: number) => {
return ( return (
<div <Box
className={classes.labelContainer} sx={tooltipCommon.labelContainer}
key={`pltiem-${index}-${label}`} key={`pltiem-${index}-${label}`}
> >
<div <Box
className={classes.labelColor} sx={tooltipCommon.labelColor}
style={{ style={{
backgroundColor: barChartConfiguration[index].color, backgroundColor: barChartConfiguration[index].color,
}} }}
/> />
<div className={classes.itemValue}> <Box
<span className={classes.valueContainer}>{pl.value}</span> sx={{
</div> ...tooltipCommon.itemValue,
</div> "& span.valueContainer": {
...tooltipCommon.valueContainer,
},
}}
>
<span className={"valueContainer"}>{pl.value}</span>
</Box>
</Box>
); );
})} })}
</div> </Box>
); );
} }
return null; return null;
}; };
export default withStyles(styles)(BarChartTooltip); export default BarChartTooltip;

43
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/tooltips/LineChartTooltip.tsx
View File

@@ -15,58 +15,57 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react"; import React from "react";
import { Theme } from "@mui/material/styles"; import { Box } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { getTimeFromTimestamp } from "../../../../../../common/utils"; import { getTimeFromTimestamp } from "../../../../../../common/utils";
import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary"; import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary";
const styles = (theme: Theme) =>
createStyles({
...tooltipCommon,
});
const LineChartTooltip = ({ const LineChartTooltip = ({
active, active,
payload, payload,
label, label,
linearConfiguration, linearConfiguration,
yAxisFormatter, yAxisFormatter,
classes,
}: any) => { }: any) => {
if (active) { if (active) {
return ( return (
<div className={classes.customTooltip}> <Box sx={tooltipCommon.customTooltip}>
<div className={classes.timeStampTitle}> <Box sx={tooltipCommon.timeStampTitle}>
{getTimeFromTimestamp(label, true)} {getTimeFromTimestamp(label, true)}
</div> </Box>
{payload && {payload &&
payload.map((pl: any, index: number) => { payload.map((pl: any, index: number) => {
return ( return (
<div <Box
className={classes.labelContainer} sx={tooltipCommon.labelContainer}
key={`lbPl-${index}-${linearConfiguration[index].keyLabel}`} key={`lbPl-${index}-${linearConfiguration[index].keyLabel}`}
> >
<div <Box
className={classes.labelColor} sx={tooltipCommon.labelColor}
style={{ style={{
backgroundColor: linearConfiguration[index].lineColor, backgroundColor: linearConfiguration[index].lineColor,
}} }}
/> />
<div className={classes.itemValue}> <Box
<span className={classes.valueContainer}> sx={{
...tooltipCommon.itemValue,
"& span.valueContainer": {
...tooltipCommon.valueContainer,
},
}}
>
<span className={"valueContainer"}>
{linearConfiguration[index].keyLabel}:{" "} {linearConfiguration[index].keyLabel}:{" "}
{yAxisFormatter(pl.value)} {yAxisFormatter(pl.value)}
</span> </span>
</div> </Box>
</div> </Box>
); );
})} })}
</div> </Box>
); );
} }
return null; return null;
}; };
export default withStyles(styles)(LineChartTooltip); export default LineChartTooltip;