Changed styles for range date selector in Prometheus dashboard (#1111)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
2021-10-15 13:53:55 -05:00
parent ed73d99590
commit aadc66a739
7 changed files with 249 additions and 48 deletions
--- a/portal-ui/src/icons/OpenListIcon.tsx
+++ 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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const OpenListIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 95 82"
+      >
+        <path
+          d="M34.52,22.407a15,15,0,0,1,25.959,0L81.956,59.481A15,15,0,0,1,68.976,82H26.024a15,15,0,0,1-12.98-22.519Z"
+          transform="translate(95 82) rotate(180)"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default OpenListIcon;
--- 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 (
    <SvgIcon>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"></path>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.016 208.01">
+        <path
+          id="sync-icn"
+          d="M18652.848-5631.2c0-.057.006-.114.006-.166l-5.4,6.524-9.992,11.438c-11.006,12.6-30.166-4.136-19.16-16.739l33.545-38.416a12.732,12.732,0,0,1,18.1-1.222l38.41,33.549c12.6,11.006-4.133,30.171-16.74,19.165l-14.342-12.527-2.316-2.123c0,.175.023.346.023.517a73.159,73.159,0,0,0,73.078,73.078,73.28,73.28,0,0,0,59.584-30.763,11.067,11.067,0,0,1,15.432-2.6,11.062,11.062,0,0,1,2.6,15.432,95.45,95.45,0,0,1-77.611,40.059A95.316,95.316,0,0,1,18652.848-5631.2Zm163.207,21.989-38.4-33.549c-12.6-11.011,4.131-30.176,16.738-19.17l14.338,12.532,2.32,2.118c0-.171-.023-.336-.023-.512a73.159,73.159,0,0,0-73.078-73.078,73.289,73.289,0,0,0-59.588,30.759,11.068,11.068,0,0,1-15.432,2.6,11.071,11.071,0,0,1-2.6-15.431,95.439,95.439,0,0,1,77.615-40.06,95.317,95.317,0,0,1,95.209,95.209c0,.057-.01.109-.01.166l5.4-6.529,9.992-11.433c11.006-12.6,30.17,4.136,19.16,16.739l-33.545,38.415a12.894,12.894,0,0,1-9.689,4.43A12.7,12.7,0,0,1,18816.055-5609.21Z"
+          transform="translate(-18614.49 5743.5)"
+          stroke-miterlimit="10"
+          stroke-width="1"
+        />
      </svg>
    </SvgIcon>
  );
--- 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";
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
+++ 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 <http://www.gnu.org/licenses/>.
+
+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 (
+    <Fragment>
+      <Grid item xs={12} className={classes.timeContainers}>
+        <span className={classes.filterTitle}>Filter:</span>
+        <div className={classes.filterContainer}>
+          <span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
+            <ScheduleIcon />
+          </span>
+          <span className={classes.selectorLabel}>Start Time:</span>
+          <DateTimePickerWrapper
+            value={timeStart}
+            onChange={setTimeStart}
+            forFilterContained
+            id="stTime"
+            noInputIcon
+          />
+          <span className={classes.divisorLine}>&nbsp;</span>
+          <span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
+            <WatchLaterIcon />
+          </span>
+          <span className={classes.selectorLabel}>End Time:</span>
+          <DateTimePickerWrapper
+            value={timeEnd}
+            onChange={setTimeEnd}
+            forFilterContained
+            id="endTime"
+            noInputIcon
+          />
+        </div>
+        <Button
+          type="button"
+          variant="contained"
+          color="primary"
+          onClick={triggerSync}
+          endIcon={<SyncIcon />}
+          className={classes.syncButton}
+        >
+          Sync
+        </Button>
+      </Grid>
+    </Fragment>
+  );
+};
+
+export default withStyles(styles)(DateRangeSelector);
--- 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: (
+        <InputAdornment position="end">
+          <OpenListIcon className={classes.openListIcon} />
+        </InputAdornment>
+      ),
+    };
+  }
+
+  let classOverriden = "";
+
+  if (forSearchBlock) {
+    classOverriden = classes.dateSelectorOverride;
+  } else if (forFilterContained) {
+    classOverriden = classes.dateSelectorFilterOverride;
+  }
+
  const inputItem = (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DateTimePicker
@@ -115,7 +166,7 @@ const DateTimePickerWrapper = ({
        onChange={onChange}
        InputProps={{
          ...adornment,
-          className: forSearchBlock ? classes.dateSelectorOverride : "",
+          className: classOverriden,
        }}
        label=""
        ampm={false}
@@ -138,7 +189,11 @@ const DateTimePickerWrapper = ({

  return (
    <Fragment>
-      <Grid item xs={12} className={`${classes.fieldContainer}`}>
+      <Grid
+        item
+        xs={12}
+        className={!forFilterContained ? classes.fieldContainer : ""}
+      >
        {label !== "" && (
          <InputLabel htmlFor={id} className={classes.inputLabel}>
            <span>
--- 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",
--- 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}
        />
      )}
-      <Grid
-        item
-        xs={12}
-        className={`${classes.actionsTray} ${classes.timeContainers}`}
-      >
-        <span className={classes.filterTitle}>Filter:</span>
-        <span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
-          <ScheduleIcon />
-        </span>
-        <span className={classes.label}>Start Time:</span>
-        <DateTimePickerWrapper
-          value={timeStart}
-          onChange={setTimeStart}
-          forSearchBlock
-          id="stTime"
-          noInputIcon
-        />
-        <span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
-          <WatchLaterIcon />
-        </span>
-        <span className={classes.label}>End Time:</span>
-        <DateTimePickerWrapper
-          value={timeEnd}
-          onChange={setTimeEnd}
-          forSearchBlock
-          id="endTime"
-          noInputIcon
-        />
-        <Button
-          type="button"
-          variant="contained"
-          color="primary"
-          onClick={triggerLoad}
-          endIcon={<SyncIcon />}
-          className={classes.syncButton}
-        >
-          Sync
-        </Button>
-      </Grid>
+      <DateRangeSelector
+        timeStart={timeStart}
+        setTimeStart={setTimeStart}
+        timeEnd={timeEnd}
+        setTimeEnd={setTimeEnd}
+        triggerSync={triggerLoad}
+      />
      <Grid item xs={12}>
        <TabSelector
          selectedTab={curTab}