Condense page header

ui/src/logs/components/LogViewerHeader.tsx

@@ -26,24 +26,32 @@ class LogViewerHeader extends PureComponent<Props> {
   public render(): JSX.Element {
     const {timeRange} = this.props
     return (
-      <>
+      <div className="page-header full-width">
-        <Dropdown
+        <div className="page-header__container">
-          className="dropdown-300"
+          <div className="page-header__left">
-          items={this.sourceDropDownItems}
+            <h1 className="page-header__title">Log Viewer</h1>
-          selected={this.selectedSource}
+          </div>
-          onChoose={this.handleChooseSource}
+          <div className="page-header__right">
-        />
+            <Dropdown
-        <Dropdown
+              className="dropdown-300"
-          className="dropdown-300"
+              items={this.sourceDropDownItems}
-          items={this.namespaceDropDownItems}
+              selected={this.selectedSource}
-          selected={this.selectedNamespace}
+              onChoose={this.handleChooseSource}
-          onChoose={this.handleChooseNamespace}
+            />
-        />
+            <Dropdown
-        <TimeRangeDropdown
+              className="dropdown-180"
-          onChooseTimeRange={this.handleChooseTimeRange}
+              iconName="disks"
-          selected={timeRange}
+              items={this.namespaceDropDownItems}
-        />
+              selected={this.selectedNamespace}
-      </>
+              onChoose={this.handleChooseNamespace}
+            />
+            <TimeRangeDropdown
+              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
+          <div className={this.dropdownClassName}>
-            className={classnames('dropdown dropdown-290', {
-              open: isOpen,
-            })}
-          >
             <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">
+        {this.header}
-          <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>
         <div className="page-contents logs-viewer">
           <GraphContainer thing="wooo" />
           <TableContainer thing="snooo" />