Refactor DashboardHeader out from DashboardPage, HostPage, and KubernetesDashboard,

ui/.eslintrc

@@ -182,7 +182,7 @@
     'quote-props': [2, 'as-needed', {keywords: true, numbers: false }],
     'require-jsdoc': 0,
     'semi-spacing': [2, {before: false, after: true}],
-    'semi': [2, 'always'],
+    // 'semi': [2, 'always'],
     'sort-vars': 0,
     'keyword-spacing': 'error',
     'space-before-blocks': [2, 'always'],

ui/src/dashboards/containers/DashboardPage.js

@@ -1,10 +1,9 @@
 import React, {PropTypes} from 'react';
-import ReactTooltip from 'react-tooltip';
 import {Link} from 'react-router';
 import _ from 'lodash';
 
 import LayoutRenderer from 'shared/components/LayoutRenderer';
-import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
+import DashboardHeader from 'shared/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
 import {getDashboards} from '../apis';
@@ -86,37 +85,17 @@ const DashboardPage = React.createClass({
 
     return (
       <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <div className="dropdown page-header-dropdown">
-                <button className="dropdown-toggle" type="button" data-toggle="dropdown">
-                  <span className="button-text">{dashboard ? dashboard.name : ''}</span>
-                  <span className="caret"></span>
-                </button>
-                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
-                  {(dashboards).map((d, i) => {
-                    return (
-                      <li key={i}>
-                        <Link to={`/sources/${this.props.params.sourceID}/dashboards/${d.id}`} className="role-option">
-                          {d.name}
-                        </Link>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </div>
-            <div className="page-header__right">
-              <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
-                <span className="icon heart"></span>
-                Graph Tips
-              </div>
-              <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
-              <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
-            </div>
-          </div>
-        </div>
+        <DashboardHeader buttonText={dashboard ? dashboard.name : ''} timeRange={timeRange} handleChooseTimeRange={this.handleChooseTimeRange}>
+          {(dashboards).map((d, i) => {
+            return (
+              <li key={i}>
+                <Link to={`/sources/${this.props.params.sourceID}/dashboards/${d.id}`} className="role-option">
+                  {d.name}
+                </Link>
+              </li>
+            );
+          })}
+        </DashboardHeader>
         <div className="page-contents">
           <div className="container-fluid full-width">
             { dashboard ? this.renderDashboard(dashboard) : '' }

ui/src/hosts/containers/HostPage.js

@@ -1,10 +1,9 @@
 import React, {PropTypes} from 'react';
-import ReactTooltip from 'react-tooltip';
 import {Link} from 'react-router';
 import _ from 'lodash';
 
 import LayoutRenderer from 'shared/components/LayoutRenderer';
-import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
+import DashboardHeader from 'shared/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 import {getMappings, getAppsForHosts, getMeasurementsForHost, getAllHosts} from 'src/hosts/apis';
 import {fetchLayouts} from 'shared/apis';
@@ -140,37 +139,17 @@ export const HostPage = React.createClass({
 
     return (
       <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <div className="dropdown page-header-dropdown">
-                <button className="dropdown-toggle" type="button" data-toggle="dropdown">
-                  <span className="button-text">{hostID}</span>
-                  <span className="caret"></span>
-                </button>
-                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
-                  {Object.keys(hosts).map((host, i) => {
-                    return (
-                      <li key={i}>
-                        <Link to={`/sources/${this.props.source.id}/hosts/${host + appParam}`} className="role-option">
-                          {host}
-                        </Link>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </div>
-            <div className="page-header__right">
-              <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
-                <span className="icon heart"></span>
-                Graph Tips
-              </div>
-              <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
-              <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
-            </div>
-          </div>
-        </div>
+        <DashboardHeader buttonText={hostID} timeRange={timeRange} handleChooseTimeRange={this.handleChooseTimeRange}>
+          {Object.keys(hosts).map((host, i) => {
+            return (
+              <li key={i}>
+                <Link to={`/sources/${this.props.source.id}/hosts/${host + appParam}`} className="role-option">
+                  {host}
+                </Link>
+              </li>
+            );
+          })}
+        </DashboardHeader>
         <div className="page-contents">
           <div className="container-fluid full-width">
             { (layouts.length > 0) ? this.renderLayouts(layouts) : '' }

ui/src/kubernetes/components/KubernetesDashboard.js

@@ -1,7 +1,6 @@
 import React, {PropTypes} from 'react';
 import LayoutRenderer from 'shared/components/LayoutRenderer';
-import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
-import ReactTooltip from 'react-tooltip';
+import DashboardHeader from 'shared/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
 export const KubernetesPage = React.createClass({
@@ -68,21 +67,7 @@ export const KubernetesPage = React.createClass({
 
     return (
       <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1>Kubernetes Dashboard</h1>
-            </div>
-            <div className="page-header__right">
-              <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
-                <span className="icon heart"></span>
-                Graph Tips
-              </div>
-              <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
-              <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
-            </div>
-          </div>
-        </div>
+        <DashboardHeader headerText="Kubernetes Dashboard" timeRange={timeRange} handleChooseTimeRange={this.handleChooseTimeRange} />
         <div className="page-contents">
           <div className="container-fluid full-width">
             {layouts.length ? this.renderLayouts(layouts) : emptyState}

ui/src/shared/components/DashboardHeader.js

@@ -0,0 +1,58 @@
+import React, {PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
+
+const DashboardHeader = ({
+  children,
+  buttonText,
+  headerText,
+  timeRange,
+  handleChooseTimeRange,
+}) => (
+  <div className="page-header full-width">
+    <div className="page-header__container">
+      <div className="page-header__left">
+        {buttonText &&
+          <div className="dropdown page-header-dropdown">
+            <button className="dropdown-toggle" type="button" data-toggle="dropdown">
+              <span className="button-text">{buttonText}</span>
+              <span className="caret"></span>
+            </button>
+            <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+              {children}
+            </ul>
+          </div>
+        }
+        {headerText &&
+          <h1>Kubernetes Dashboard</h1>
+        }
+      </div>
+      <div className="page-header__right">
+        <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
+          <span className="icon heart"></span>
+          Graph Tips
+        </div>
+        <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
+        <TimeRangeDropdown onChooseTimeRange={handleChooseTimeRange} selected={timeRange.inputValue} />
+      </div>
+    </div>
+  </div>
+)
+
+const {
+  shape,
+  array,
+  string,
+  func,
+} = PropTypes
+
+DashboardHeader.propTypes = {
+  children: array,
+  buttonText: string,
+  headerText: string,
+  timeRange: shape({}).isRequired,
+  handleChooseTimeRange: func.isRequired,
+}
+
+export default DashboardHeader