From e2b4ab4d6105c1f16e84ca276eda0e1e72b94fb8 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 10:56:49 -0700
Subject: [PATCH] Implement PageHeader in rule builder page

---
 ui/src/kapacitor/components/KapacitorRule.js | 23 ++++++++---
 ui/src/kapacitor/components/RuleHeader.js    | 40 --------------------
 2 files changed, 18 insertions(+), 45 deletions(-)
 delete mode 100644 ui/src/kapacitor/components/RuleHeader.js

diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index 172a15bcea..f3da4d9713 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
+import PageHeader from 'src/shared/components/PageHeader'
 import NameSection from 'src/kapacitor/components/NameSection'
 import ValuesSection from 'src/kapacitor/components/ValuesSection'
-import RuleHeader from 'src/kapacitor/components/RuleHeader'
+import RuleHeaderSave from 'src/kapacitor/components/RuleHeaderSave'
 import RuleHandlers from 'src/kapacitor/components/RuleHandlers'
 import RuleMessage from 'src/kapacitor/components/RuleMessage'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
@@ -166,6 +167,18 @@ class KapacitorRule extends Component {
     ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
   }
 
+  renderHeaderOptions = () => {
+    const {source} = this.props
+
+    return (
+      <RuleHeaderSave
+        source={source}
+        onSave={this.handleSave}
+        validationError={this.validationError()}
+      />
+    )
+  }
+
   render() {
     const {
       rule,
@@ -180,10 +193,10 @@ class KapacitorRule extends Component {
 
     return (
       <div className="page">
-        <RuleHeader
-          source={source}
-          onSave={this.handleSave}
-          validationError={this.validationError()}
+        <PageHeader
+          title="Alert Rule Builder"
+          renderOptions={this.renderHeaderOptions}
+          sourceIndicator={true}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
           <div className="container-fluid">
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js
deleted file mode 100644
index e4d84c62ca..0000000000
--- a/ui/src/kapacitor/components/RuleHeader.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import RuleHeaderSave from 'src/kapacitor/components/RuleHeaderSave'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class RuleHeader extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const {source, onSave, validationError} = this.props
-
-    return (
-      <div className="page-header">
-        <div className="page-header--container">
-          <div className="page-header--left">
-            <h1 className="page-header--title">Alert Rule Builder</h1>
-          </div>
-          <RuleHeaderSave
-            source={source}
-            onSave={onSave}
-            validationError={validationError}
-          />
-        </div>
-      </div>
-    )
-  }
-}
-
-const {func, shape, string} = PropTypes
-
-RuleHeader.propTypes = {
-  source: shape({}).isRequired,
-  onSave: func.isRequired,
-  validationError: string.isRequired,
-}
-
-export default RuleHeader