diff --git a/portal-ui/src/icons/OpenListIcon.tsx b/portal-ui/src/icons/OpenListIcon.tsx new file mode 100644 index 000000000..98724e337 --- /dev/null +++ b/portal-ui/src/icons/OpenListIcon.tsx @@ -0,0 +1,36 @@ +// This file is part of MinIO Console Server +// 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 +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SvgIcon, SvgIconProps } from "@material-ui/core"; + +const OpenListIcon = (props: SvgIconProps) => { + return ( + + + + + + ); +}; + +export default OpenListIcon; diff --git a/portal-ui/src/icons/SyncIcon.tsx b/portal-ui/src/icons/SyncIcon.tsx index f780420a0..b24680a36 100644 --- a/portal-ui/src/icons/SyncIcon.tsx +++ b/portal-ui/src/icons/SyncIcon.tsx @@ -19,8 +19,14 @@ import { SvgIcon } from "@material-ui/core"; const SyncIcon = () => { return ( - - + + ); diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index 24fccabd4..2527ce846 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -101,3 +101,4 @@ export { default as CalendarIcon } from "./CalendarIcon"; export { default as UptimeIcon } from "./UptimeIcon"; export { default as LambdaIcon } from "./LambdaIcon"; export { default as TiersIcon } from "./TiersIcon"; +export { default as OpenListIcon } from "./OpenListIcon"; diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx new file mode 100644 index 000000000..cacf0be9b --- /dev/null +++ b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx @@ -0,0 +1,113 @@ +// This file is part of MinIO Console Server +// 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 +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import React, { Fragment } from "react"; +import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; +import { Grid, Button } from "@material-ui/core"; +import ScheduleIcon from "@material-ui/icons/Schedule"; +import WatchLaterIcon from "@material-ui/icons/WatchLater"; +import { actionsTray, widgetContainerCommon } from "../common/styleLibrary"; +import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper"; +import SyncIcon from "../../../../../icons/SyncIcon"; + +interface IDateRangeSelector { + classes: any; + timeStart: any; + setTimeStart: (date: any) => void; + timeEnd: any; + setTimeEnd: (date: any) => void; + triggerSync: () => void; +} + +const styles = (theme: Theme) => + createStyles({ + ...actionsTray, + ...widgetContainerCommon, + syncButton: { + "&.MuiButton-root .MuiButton-iconSizeMedium > *:first-child": { + fontSize: 18, + }, + }, + schedulerIcon: { + opacity: 0.4, + fontSize: 10, + "& svg": { + width: 18, + height: 18, + }, + }, + selectorLabel: { + color: "#9D9E9D", + fontWeight: "bold", + whiteSpace: "nowrap", + marginLeft: 10, + fontSize: 12, + } + }); + +const DateRangeSelector = ({ + classes, + timeStart, + setTimeStart, + timeEnd, + setTimeEnd, + triggerSync, +}: IDateRangeSelector) => { + return ( + + + Filter: +
+ + + + Start Time: + +   + + + + End Time: + +
+ + + + ); +}; + +export default withStyles(styles)(DateRangeSelector); diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx index 2a87ecf98..4e175a7cc 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx @@ -23,12 +23,14 @@ import ScheduleIcon from "@material-ui/icons/Schedule"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import HelpIcon from "../../../../../icons/HelpIcon"; import { fieldBasic, tooltipHelper } from "../common/styleLibrary"; +import { OpenListIcon } from "../../../../../icons"; interface IDateTimePicker { value: any; onChange: (value: any) => any; classes: any; forSearchBlock?: boolean; + forFilterContained?: boolean; label?: string; required?: boolean; tooltip?: string; @@ -66,6 +68,31 @@ const styles = (theme: Theme) => color: "#393939", }, }, + dateSelectorFilterOverride: { + width: 180, + height: 42, + marginLeft: 20, + padding: 0, + borderRadius: 5, + "&.MuiInput-underline:hover:not(.Mui-disabled):before": { + borderBottom: 0, + }, + "&:hover": { + "&:before, &:after": { + borderColor: "transparent", + borderBottom: 0, + }, + }, + "&:before, &:after": { + borderColor: "transparent", + borderBottom: 0, + }, + "& input": { + fontSize: 12, + fontWeight: "bold", + color: "#081C42", + }, + }, dateSelectorFormOverride: { width: "100%", maxWidth: 840, @@ -80,6 +107,11 @@ const styles = (theme: Theme) => position: "relative", paddingRight: 25, }, + openListIcon: { + color: "#9D9E9D", + width: 8, + marginTop: 2, + }, ...fieldBasic, ...tooltipHelper, }); @@ -89,6 +121,7 @@ const DateTimePickerWrapper = ({ onChange, classes, forSearchBlock = false, + forFilterContained = false, label, tooltip = "", required, @@ -108,6 +141,24 @@ const DateTimePickerWrapper = ({ }; } + if (forFilterContained) { + adornment = { + endAdornment: ( + + + + ), + }; + } + + let classOverriden = ""; + + if (forSearchBlock) { + classOverriden = classes.dateSelectorOverride; + } else if (forFilterContained) { + classOverriden = classes.dateSelectorFilterOverride; + } + const inputItem = ( - + {label !== "" && ( diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index d3d2557a4..db71f4d3e 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -133,7 +133,7 @@ export const radioIcons = { export const containerForHeader = (bottomSpacing: any) => ({ container: { position: "relative" as const, - padding: "8px 16px 0", + padding: "20px 35px 0", "& h6": { color: "#777777", fontSize: 30, @@ -173,8 +173,18 @@ export const actionsTray = { }, }, timeContainers: { + display: "flex" as const, + "& button": { + flexGrow: 0, + marginLeft: 15, + }, height: 40, maxWidth: 1185, + marginBottom: 15, + justifyContent: "flex-start" as const, + "& > *": { + marginRight: 15, + } }, actionsTray: { display: "flex" as const, @@ -184,6 +194,19 @@ export const actionsTray = { marginLeft: 15, }, }, + filterContainer: { + backgroundColor: "#fff", + border: "#EEF1F4 2px solid", + borderRadius: 2, + display: "flex", + alignItems: "center", + padding: "0 12px", + }, + divisorLine: { + borderRight: "#EEF1F4 1px solid", + height: 20, + margin: "0 15px", + } }; export const searchField = { @@ -434,7 +457,6 @@ export const logsCommon = { export const widgetCommon = { singleValueContainer: { height: 200, - minWidth: 280, maxWidth: 1185, border: "#eef1f4 2px solid", backgroundColor: "#fff", diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx index 1af8909e4..70282173c 100644 --- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx @@ -17,8 +17,7 @@ import React, { Fragment, useCallback, useEffect, useState } from "react"; import { connect } from "react-redux"; 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, GridSize } from "@material-ui/core"; import { @@ -32,12 +31,13 @@ import { ErrorResponseHandler } from "../../../../common/types"; import { setErrorSnackMessage } from "../../../../actions"; import DateTimePickerWrapper from "../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper"; import api from "../../../../common/api"; -import SyncIcon from "../../../../icons/SyncIcon"; + import TabSelector from "../../Common/TabSelector/TabSelector"; import MergedWidgets from "./MergedWidgets"; import { componentToUse } from "./widgetUtils"; import ZoomWidget from "./ZoomWidget"; import { AppState } from "../../../../store"; +import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector"; interface IPrDashboard { classes: any; @@ -254,45 +254,13 @@ const PrDashboard = ({ apiPrefix={apiPrefix} /> )} - - Filter: - - - - Start Time: - - - - - End Time: - - - +