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,17 +29,29 @@ 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}
+        renderOptions={this.renderHeaderOptions}
+      />
+    )
+  }
+
+  private renderHeaderTitle = (): JSX.Element => {
+    return (
+      <>
         {this.status}
-            <h1 className="page-header--title logs-viewer-header-title">
+        <PageHeaderTitle title="Logs Viewer" />
-              Log Viewer
+      </>
-            </h1>
+    )
-          </div>
+  }
-          <div className="page-header--right">
+
+  private renderHeaderOptions = (): JSX.Element => {
+    const {timeRange} = this.props
+
+    return (
+      <>
         <Dropdown
           className="dropdown-300"
           items={this.sourceDropDownItems}
@@ -55,9 +69,7 @@ class LogViewerHeader extends PureComponent<Props> {
           onChooseTimeRange={this.handleChooseTimeRange}
           selected={timeRange}
         />
-          </div>
+      </>
-        </div>
-      </div>
     )
   }
 

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 {