(ui): Add top level shift buttons

ui/src/components/MetricsFetchControls.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
+import Button, { ButtonProps } from "@material-ui/core/Button";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
 import Popover from "@material-ui/core/Popover";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
@@ -53,6 +54,12 @@ const useStyles = makeStyles((theme) => ({
   endTimeCaption: {
     marginRight: theme.spacing(1),
   },
+  shiftButtons: {
+    marginLeft: theme.spacing(1),
+  },
+  buttonGroupRoot: {
+    height: 30,
+  },
   endTimeShiftControls: {
     padding: theme.spacing(1),
     display: "flex",
@@ -331,6 +338,7 @@ function MetricsFetchControls(props: Props) {
       <Typography variant="caption" className={classes.endTimeCaption}>
         {formatTime(props.endTimeSec)}
       </Typography>
+      <div>
         <Button
           aria-describedby={id}
           variant="outlined"
@@ -366,26 +374,31 @@ function MetricsFetchControls(props: Props) {
                 direction="left"
                 text="2h"
                 onClick={shiftBy(-2 * hour)}
+                dense={true}
               />
               <ShiftButton
                 direction="left"
                 text="1h"
                 onClick={shiftBy(-1 * hour)}
+                dense={true}
               />
               <ShiftButton
                 direction="left"
                 text="30m"
                 onClick={shiftBy(-30 * minute)}
+                dense={true}
               />
               <ShiftButton
                 direction="left"
                 text="15m"
                 onClick={shiftBy(-15 * minute)}
+                dense={true}
               />
               <ShiftButton
                 direction="left"
                 text="5m"
                 onClick={shiftBy(-5 * minute)}
+                dense={true}
               />
             </div>
             <div className={classes.rightShiftButtons}>
@@ -393,26 +406,31 @@ function MetricsFetchControls(props: Props) {
                 direction="right"
                 text="5m"
                 onClick={shiftBy(5 * minute)}
+                dense={true}
               />
               <ShiftButton
                 direction="right"
                 text="15m"
                 onClick={shiftBy(15 * minute)}
+                dense={true}
               />
               <ShiftButton
                 direction="right"
                 text="30m"
                 onClick={shiftBy(30 * minute)}
+                dense={true}
               />
               <ShiftButton
                 direction="right"
                 text="1h"
                 onClick={shiftBy(1 * hour)}
+                dense={true}
               />
               <ShiftButton
                 direction="right"
                 text="2h"
                 onClick={shiftBy(2 * hour)}
+                dense={true}
               />
             </div>
           </div>
@@ -595,6 +613,37 @@ function MetricsFetchControls(props: Props) {
           </div>
         </Popover>
       </div>
+      <div className={classes.shiftButtons}>
+        <ButtonGroup
+          classes={{ root: classes.buttonGroupRoot }}
+          size="small"
+          aria-label="shift buttons"
+        >
+          <ShiftButton
+            direction="left"
+            text={
+              state.durationOption === "custom" ? "1h" : state.durationOption
+            }
+            onClick={
+              state.durationOption === "custom"
+                ? shiftBy(-1 * hour)
+                : shiftBy(-props.durationSec)
+            }
+          />
+          <ShiftButton
+            direction="right"
+            text={
+              state.durationOption === "custom" ? "1h" : state.durationOption
+            }
+            onClick={
+              state.durationOption === "custom"
+                ? shiftBy(1 * hour)
+                : shiftBy(props.durationSec)
+            }
+          />
+        </ButtonGroup>
+      </div>
+    </div>
   );
 }
 
@@ -605,10 +654,11 @@ function formatTime(unixtime: number): string {
   return dayjs.unix(unixtime).format("ddd, DD MMM YYYY HH:mm:ss ") + tz;
 }
 
-interface ShiftButtonProps {
+interface ShiftButtonProps extends ButtonProps {
   text: string;
   onClick: () => void;
   direction: "left" | "right";
+  dense?: boolean;
 }
 
 const useShiftButtonStyles = makeStyles((theme) => ({
@@ -616,9 +666,9 @@ const useShiftButtonStyles = makeStyles((theme) => ({
   label: { fontSize: 12, textTransform: "none" },
   iconRoot: {
     marginRight: (props: ShiftButtonProps) =>
-      props.direction === "left" ? -8 : 0,
+      props.direction === "left" && props.dense ? -8 : 0,
     marginLeft: (props: ShiftButtonProps) =>
-      props.direction === "right" ? -8 : 0,
+      props.direction === "right" && props.dense ? -8 : 0,
     color: theme.palette.grey[700],
   },
 }));
@@ -627,12 +677,12 @@ function ShiftButton(props: ShiftButtonProps) {
   const classes = useShiftButtonStyles(props);
   return (
     <Button
+      {...props}
       classes={{
         root: classes.root,
         label: classes.label,
       }}
       size="small"
-      onClick={props.onClick}
     >
       {props.direction === "left" && (
         <ArrowLeftIcon classes={{ root: classes.iconRoot }} />
@@ -645,4 +695,8 @@ function ShiftButton(props: ShiftButtonProps) {
   );
 }
 
+ShiftButton.defaultProps = {
+  dense: false,
+};
+
 export default connect(mapStateToProps)(MetricsFetchControls);