ui: Fixes for various small UI bugs

A grab bag of various micro-fixes, each closing a github issue.

Fixes #12658

The custom time range displayed in the top bar on the cluster overview page is
currently displaying times in the local time zone, which does not match the
ticks on graphs. This change converts it to display in UTC.

Fixes #12997

Disables the "searchable" option on our dropdowns to prevent the blinking-cursor
effect. This option is not necessary for dropdowns at our current cluster sizes,
and the "search" mode of dropdowns has not been styled, so we simply disable the
search option.

Fixes #13002

Axis on "Capacity" graph is now properly labeled with Byte units.

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>;