Condense page header

ui/src/logs/components/LogViewerHeader.tsx

@@ -26,7 +26,12 @@ class LogViewerHeader extends PureComponent<Props> {
   public render(): JSX.Element {
     const {timeRange} = this.props
     return (
-      <>
+      <div className="page-header full-width">
+        <div className="page-header__container">
+          <div className="page-header__left">
+            <h1 className="page-header__title">Log Viewer</h1>
+          </div>
+          <div className="page-header__right">
             <Dropdown
               className="dropdown-300"
               items={this.sourceDropDownItems}
@@ -34,7 +39,8 @@ class LogViewerHeader extends PureComponent<Props> {
               onChoose={this.handleChooseSource}
             />
             <Dropdown
-          className="dropdown-300"
+              className="dropdown-180"
+              iconName="disks"
               items={this.namespaceDropDownItems}
               selected={this.selectedNamespace}
               onChoose={this.handleChooseNamespace}
@@ -43,7 +49,9 @@ class LogViewerHeader extends PureComponent<Props> {
               onChooseTimeRange={this.handleChooseTimeRange}
               selected={timeRange}
             />
-      </>
+          </div>
+        </div>
+      </div>
     )
   }
 

ui/src/logs/components/TimeRangeDropdown.tsx

@@ -56,16 +56,12 @@ class TimeRangeDropdown extends Component<Props, State> {
 
   public render() {
     const {selected, preventCustomTimeRange, page} = this.props
-    const {customTimeRange, isCustomTimeRangeOpen, isOpen} = this.state
+    const {customTimeRange, isCustomTimeRangeOpen} = this.state
 
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className="time-range-dropdown">
-          <div
-            className={classnames('dropdown dropdown-290', {
-              open: isOpen,
-            })}
-          >
+          <div className={this.dropdownClassName}>
             <div
               className="btn btn-sm btn-default dropdown-toggle"
               onClick={this.toggleMenu}
@@ -132,6 +128,21 @@ class TimeRangeDropdown extends Component<Props, State> {
     )
   }
 
+  private get dropdownClassName(): string {
+    const {
+      isOpen,
+      customTimeRange: {lower, upper},
+    } = this.state
+
+    const absoluteTimeRange = !!lower || !!upper
+
+    return classnames('dropdown', {
+      'dropdown-290': absoluteTimeRange,
+      'dropdown-120': !absoluteTimeRange,
+      open: isOpen,
+    })
+  }
+
   private findTimeRangeInputValue = ({upper, lower}: TimeRange) => {
     if (upper && lower) {
       if (upper === 'now()') {

ui/src/logs/containers/LogsPage.tsx

@@ -33,14 +33,7 @@ class LogsPage extends PureComponent<Props> {
   public render() {
     return (
       <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Log Viewer</h1>
-            </div>
-            <div className="page-header__right">{this.header}</div>
-          </div>
-        </div>
+        {this.header}
         <div className="page-contents logs-viewer">
           <GraphContainer thing="wooo" />
           <TableContainer thing="snooo" />