Implement PageHeader in logs viewer page

ui/src/logs/components/LogViewerHeader.tsx

@@ -3,6 +3,8 @@ import React, {PureComponent} from 'react'
 import {Source, Namespace} from 'src/types'
 import classnames from 'classnames'
 import Dropdown from 'src/shared/components/Dropdown'
+import PageHeader from 'src/shared/components/PageHeader'
+import PageHeaderTitle from 'src/shared/components/PageHeaderTitle'
 import TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown'
 
 import {TimeRange} from 'src/types'
@@ -27,37 +29,47 @@ interface Props {
 
 class LogViewerHeader extends PureComponent<Props> {
   public render(): JSX.Element {
-    const {timeRange} = this.props
     return (
-      <div className="page-header full-width">
+      <PageHeader
-        <div className="page-header--container">
+        renderTitle={this.renderHeaderTitle}
-          <div className="page-header--left">
+        fullWidth={true}
-            {this.status}
+        renderOptions={this.renderHeaderOptions}
-            <h1 className="page-header--title logs-viewer-header-title">
+      />
-              Log Viewer
+    )
-            </h1>
+  }
-          </div>
+
-          <div className="page-header--right">
+  private renderHeaderTitle = (): JSX.Element => {
-            <Dropdown
+    return (
-              className="dropdown-300"
+      <>
-              items={this.sourceDropDownItems}
+        {this.status}
-              selected={this.selectedSource}
+        <PageHeaderTitle title="Logs Viewer" />
-              onChoose={this.handleChooseSource}
+      </>
-            />
+    )
-            <Dropdown
+  }
-              className="dropdown-180"
+
-              iconName="disks"
+  private renderHeaderOptions = (): JSX.Element => {
-              items={this.namespaceDropDownItems}
+    const {timeRange} = this.props
-              selected={this.selectedNamespace}
+
-              onChoose={this.handleChooseNamespace}
+    return (
-            />
+      <>
-            <TimeRangeDropdown
+        <Dropdown
-              onChooseTimeRange={this.handleChooseTimeRange}
+          className="dropdown-300"
-              selected={timeRange}
+          items={this.sourceDropDownItems}
-            />
+          selected={this.selectedSource}
-          </div>
+          onChoose={this.handleChooseSource}
-        </div>
+        />
-      </div>
+        <Dropdown
+          className="dropdown-180"
+          iconName="disks"
+          items={this.namespaceDropDownItems}
+          selected={this.selectedNamespace}
+          onChoose={this.handleChooseNamespace}
+        />
+        <TimeRangeDropdown
+          onChooseTimeRange={this.handleChooseTimeRange}
+          selected={timeRange}
+        />
+      </>
     )
   }
 

ui/src/style/pages/logs-viewer.scss

@@ -16,10 +16,6 @@ $logs-viewer-gutter: 60px;
   flex-wrap: nowrap;
 }
 
-.logs-viewer-header-title {
-  margin-left: 10px;
-}
-
 .logs-viewer--graph-container {
   padding: 22px ($logs-viewer-gutter - 16px) 10px ($logs-viewer-gutter - 16px);
   height: $logs-viewer-graph-height;
@@ -268,6 +264,8 @@ $logs-viewer-gutter: 60px;
     width: 26px;
     justify-content: center;
   }
+  
+  margin-right: 10px;
 }
 
 .message--cell {