From 3121d665800c2dc48f08de331f0bbf8a84dd6496 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:51:08 -0700
Subject: [PATCH] Implement PageHeader on manage tasks page

---
 .../containers/KapacitorRulesPage.tsx         | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 4749474a6..ddd577b37 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -10,6 +10,7 @@ import KapacitorRules from 'src/kapacitor/components/KapacitorRules'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {Source, Kapacitor, AlertRule} from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -89,20 +90,7 @@ interface PageContentsProps {
 
 const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
-    <div className="page-header">
-      <div className="page-header--container">
-        <div className="page-header--left">
-          <h1 className="page-header--title">Manage Tasks</h1>
-        </div>
-        <div className="page-header--right">
-          <QuestionMarkTooltip
-            tipID="manage-tasks--tooltip"
-            tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
-          />
-          <SourceIndicator />
-        </div>
-      </div>
-    </div>
+    <PageHeader title="Manage Tasks" renderOptions={renderHeaderOptions} />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
@@ -113,6 +101,18 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
+const renderHeaderOptions = (): JSX.Element => {
+  return (
+    <>
+      <QuestionMarkTooltip
+        tipID="manage-tasks--tooltip"
+        tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
+      />
+      <SourceIndicator />{' '}
+    </>
+  )
+}
+
 const mapStateToProps = state => {
   return {
     rules: Object.values(state.rules),