Implement PageHeader in rule builder page

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">

ui/src/kapacitor/components/RuleHeader.js

@@ -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