Rename prop to indicate intended use

ui/src/alerts/containers/AlertsApp.tsx

@@ -97,7 +97,7 @@ class AlertsApp extends PureComponent<Props, State> {
       <div className="page alert-history-page">
         <PageHeader
           titleText="Alert History"
-          renderPageControls={this.renderPageControls}
+          optionsComponents={this.optionsComponents}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -111,7 +111,7 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     const {timeRange} = this.state
 
     return (

ui/src/dashboards/components/DashboardHeader.tsx

@@ -53,7 +53,7 @@ class DashboardHeader extends Component<Props> {
         fullWidth={true}
         sourceIndicator={true}
         titleComponents={this.renderPageTitle}
-        renderPageControls={this.renderPageControls}
+        optionsComponents={this.optionsComponents}
         inPresentationMode={isHidden}
       />
     )
@@ -68,7 +68,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     const {
       handleChooseAutoRefresh,
       onManualRefresh,

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -119,7 +119,7 @@ export class DataExplorer extends PureComponent<Props, State> {
         <PageHeader
           titleText="Data Explorer"
           fullWidth={true}
-          renderPageControls={this.renderPageControls}
+          optionsComponents={this.optionsComponents}
           sourceIndicator={true}
         />
         <ResizeContainer
@@ -186,7 +186,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     return buildRawText(this.activeQuery, timeRange)
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     const {
       timeRange,
       autoRefresh,

ui/src/flux/components/FluxHeader.tsx

@@ -22,12 +22,12 @@ class FluxHeader extends PureComponent<Props> {
       <PageHeader
         titleText="Flux Editor"
         fullWidth={true}
-        renderPageControls={this.renderPageControls}
+        optionsComponents={this.optionsComponents}
       />
     )
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     return (
       <button onClick={this.overlay} className="btn btn-sm btn-default">
         Edit Connection

ui/src/hosts/containers/HostsPage.js

@@ -116,7 +116,7 @@ export class HostsPage extends Component {
       <div className="page hosts-list-page">
         <PageHeader
           title="Host List"
-          renderPageControls={this.renderPageControls}
+          optionsComponents={this.optionsComponents}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -137,7 +137,7 @@ export class HostsPage extends Component {
     )
   }
 
-  renderPageControls = () => {
+  optionsComponents = () => {
     const {autoRefresh, onChooseAutoRefresh, onManualRefresh} = this.props
 
     return (

ui/src/kapacitor/components/KapacitorRule.js

@@ -167,7 +167,7 @@ class KapacitorRule extends Component {
     ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
   }
 
-  renderPageControls = () => {
+  optionsComponents = () => {
     return (
       <RuleHeaderSave
         onSave={this.handleSave}
@@ -192,7 +192,7 @@ class KapacitorRule extends Component {
       <div className="page">
         <PageHeader
           title="Alert Rule Builder"
-          renderPageControls={this.renderPageControls}
+          optionsComponents={this.optionsComponents}
           sourceIndicator={true}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">

ui/src/kapacitor/components/TickscriptHeader.tsx

@@ -23,12 +23,12 @@ class TickscriptHeader extends Component<Props> {
         titleText="TICKscript Editor"
         fullWidth={true}
         sourceIndicator={true}
-        renderPageControls={this.renderPageControls}
+        optionsComponents={this.optionsComponents}
       />
     )
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     const {
       task,
       onSave,

ui/src/kapacitor/containers/KapacitorRulesPage.tsx

@@ -91,7 +91,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
       titleText="Manage Tasks"
-      renderPageControls={renderHeaderOptions()}
+      optionsComponents={renderHeaderOptions()}
       sourceIndicator={true}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">

ui/src/logs/components/LogViewerHeader.tsx

@@ -33,7 +33,7 @@ class LogViewerHeader extends PureComponent<Props> {
       <PageHeader
         titleComponents={this.renderHeaderTitle}
         fullWidth={true}
-        renderPageControls={this.renderPageControls}
+        optionsComponents={this.optionsComponents}
       />
     )
   }
@@ -47,7 +47,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private get renderPageControls(): JSX.Element {
+  private get optionsComponents(): JSX.Element {
     const {timeRange} = this.props
 
     return (

ui/src/shared/components/PageHeader.tsx

@@ -7,7 +7,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 interface Props {
   titleText?: string
   titleComponents?: ReactElement<any>
-  renderPageControls?: ReactElement<any>
+  optionsComponents?: ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
   inPresentationMode?: boolean
@@ -61,13 +61,13 @@ class PageHeader extends Component<Props> {
   }
 
   private get renderRight(): JSX.Element {
-    const {renderPageControls} = this.props
+    const {optionsComponents} = this.props
 
-    if (!renderPageControls) {
+    if (!optionsComponents) {
       return
     }
 
-    return renderPageControls
+    return optionsComponents
   }
 
   private get className(): string {

ui/src/status/containers/StatusPage.js

@@ -61,7 +61,7 @@ class StatusPage extends Component {
         <PageHeader
           title="Status"
           fullWidth={true}
-          renderPageControls={this.renderPageControls()}
+          optionsComponents={this.optionsComponents()}
         />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">
@@ -85,7 +85,7 @@ class StatusPage extends Component {
     )
   }
 
-  renderPageControls = () => {
+  optionsComponents = () => {
     return <SourceIndicator />
   }
 }