Merge pull request #14007 from mrtracy/mtracy/timespan_utc

ui: Fixes for various small UI bugs

pkg/ui/app/components/dropdown.tsx

@@ -45,7 +45,7 @@ export default class Dropdown extends React.Component<DropdownOwnProps, {}> {
         onClick={() => this.props.onArrowClick(ArrowDirection.LEFT)}>
       </span>
       <span className="dropdown__title">{this.props.title}{this.props.title ? ":" : ""}</span>
-      <Select className="dropdown__select" clearable={false} options={options} value={selected} onChange={onChange} />
+      <Select className="dropdown__select" clearable={false} searchable={false} options={options} value={selected} onChange={onChange} />
       <span
         className="dropdown__side-arrow"
         disabled={_.includes(disabledArrows, ArrowDirection.RIGHT)}

pkg/ui/app/containers/nodeGraphs.tsx

@@ -160,7 +160,7 @@ class NodeGraphs extends React.Component<NodeGraphsProps, {}> {
             </Axis>
           </LineGraph>
           <LineGraph title="Capacity" sources={storeSources} tooltip={`Summary of total and available capacity ${specifier}.`}>
-            <Axis>
+            <Axis units={AxisUnits.Bytes}>
               <Metric name="cr.store.capacity" title="Capacity" />
               {
                 // TODO(mrtracy): We really want to display a used capacity

pkg/ui/app/containers/timescale.tsx

@@ -25,8 +25,8 @@ interface TimeRangeProps {
 // TimeRange is a prettified string representation of the current timescale.
 class TimeRange extends React.Component<TimeRangeProps, {}> {
   render() {
-    let s = this.props.start;
-    let e = this.props.end;
+    let s = this.props.start.clone().utc();
+    let e = this.props.end.clone().utc();
     let startTimeSpan = <span className="time-range__time">{s.format("HH:mm:SS")}</span>;
     let endTimeSpan = <span className="time-range__time">{e.format("HH:mm:SS")}</span>;
     let startDateSpan = <span className="time-range__date">{s.format("MMM DD, YYYY")}</span>;