Consolidate redundant logic

2017-10-20 15:29:44 -07:00 · 2017-10-20 15:29:44 -07:00 · a154c0befb
parent 084cf77f75
commit a154c0befb
5 changed files with 73 additions and 88 deletions
--- a/ui/src/dashboards/components/DashboardHeader.js
+++ b/ui/src/dashboards/components/DashboardHeader.js
@ -9,17 +9,15 @@ import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
 import DashboardSwitcher from 'src/dashboards/components/DashboardSwitcher'

 const DashboardHeader = ({
-  hosts,
+  names,
  onSave,
-  sourceID,
  onCancel,
  isEditMode,
  isHidden,
  dashboard,
  onAddCell,
-  dashboards,
  autoRefresh,
-  dashboardName,
+  activeDashboard,
  onEditDashboard,
  onManualRefresh,
  handleChooseTimeRange,
@ -41,30 +39,22 @@ const DashboardHeader = ({
                : 'page-header__left'
            }
          >
-            {dashboards && dashboards.length > 1
+            {names && names.length > 1
              ? <DashboardSwitcher
-                  dashboards={dashboards}
-                  currentDashboard={dashboardName}
-                  sourceID={sourceID}
-                />
-              : null}
-            {hosts && hosts.length > 1
-              ? <DashboardSwitcher
-                  hosts={hosts}
-                  currentDashboard={dashboardName}
-                  sourceID={sourceID}
+                  names={names}
+                  activeDashboard={activeDashboard}
                />
              : null}
            {dashboard
              ? <DashboardHeaderEdit
                  onSave={onSave}
                  onCancel={onCancel}
-                  dashboardName={dashboardName}
+                  activeDashboard={activeDashboard}
                  onEditDashboard={onEditDashboard}
                  isEditMode={isEditMode}
                />
              : <h1 className="page-header__title">
-                  {dashboardName}
+                  {activeDashboard}
                </h1>}
          </div>
          <div className="page-header__right">
@ -119,7 +109,7 @@ DashboardHeader.defaultProps = {
 }

 DashboardHeader.propTypes = {
-  dashboardName: string.isRequired,
+  activeDashboard: string.isRequired,
  onEditDashboard: func,
  dashboard: shape({}),
  timeRange: shape({
@ -139,9 +129,7 @@ DashboardHeader.propTypes = {
  zoomedTimeRange: shape({}),
  onCancel: func,
  onSave: func,
-  dashboards: arrayOf(shape({})),
-  sourceID: string,
-  hosts: arrayOf(shape({})),
+  names: arrayOf(shape({})).isRequired,
 }

 export default DashboardHeader
--- a/ui/src/dashboards/components/DashboardHeaderEdit.js
+++ b/ui/src/dashboards/components/DashboardHeaderEdit.js
@ -31,7 +31,7 @@ class DashboardEditHeader extends Component {
      this.inputRef.blur()
    }
    if (e.key === 'Escape') {
-      this.inputRef.value = this.props.dashboardName
+      this.inputRef.value = this.props.activeDashboard
      this.setState({reset: true}, () => this.inputRef.blur())
    }
  }
@ -41,7 +41,7 @@ class DashboardEditHeader extends Component {
  }

  render() {
-    const {onEditDashboard, isEditMode, dashboardName} = this.props
+    const {onEditDashboard, isEditMode, activeDashboard} = this.props

    return (
      <div className="dashboard-title">
@ -50,7 +50,7 @@ class DashboardEditHeader extends Component {
              maxLength={DASHBOARD_NAME_MAX_LENGTH}
              type="text"
              className="dashboard-title--input form-control input-sm"
-              defaultValue={dashboardName}
+              defaultValue={activeDashboard}
              autoComplete="off"
              autoFocus={true}
              spellCheck={false}
@ -61,7 +61,7 @@ class DashboardEditHeader extends Component {
              ref={r => (this.inputRef = r)}
            />
          : <h1 onClick={onEditDashboard}>
-              {dashboardName}
+              {activeDashboard}
            </h1>}
      </div>
    )
@ -71,7 +71,7 @@ class DashboardEditHeader extends Component {
 const {bool, func, string} = PropTypes

 DashboardEditHeader.propTypes = {
-  dashboardName: string.isRequired,
+  activeDashboard: string.isRequired,
  onSave: func.isRequired,
  onCancel: func.isRequired,
  isEditMode: bool,
--- a/ui/src/dashboards/components/DashboardSwitcher.js
+++ b/ui/src/dashboards/components/DashboardSwitcher.js
@ -26,45 +26,9 @@ class DashboardSwitcher extends Component {
  }

  render() {
-    const {dashboards, currentDashboard, sourceID, hosts, appParam} = this.props
+    const {activeDashboard, names} = this.props
    const {isOpen} = this.state
-
-    let dropdownItems
-
-    if (hosts) {
-      dropdownItems = hosts.map((host, i) => {
-        return (
-          <li className="dropdown-item" key={i}>
-            <Link
-              to={`/sources/${sourceID}/hosts/${host + appParam}`}
-              onClick={this.handleCloseMenu}
-            >
-              {host}
-            </Link>
-          </li>
-        )
-      })
-    }
-
-    if (dashboards) {
-      dropdownItems = _.sortBy(dashboards, d =>
-        d.name.toLowerCase()
-      ).map((d, i) =>
-        <li
-          className={classnames('dropdown-item', {
-            active: d.name === currentDashboard,
-          })}
-          key={i}
-        >
-          <Link
-            to={`/sources/${sourceID}/dashboards/${d.id}`}
-            onClick={this.handleCloseMenu}
-          >
-            {d.name}
-          </Link>
-        </li>
-      )
-    }
+    const sorted = _.sortBy(names, ({name}) => name.toLowerCase())

    return (
      <div
@ -77,21 +41,49 @@ class DashboardSwitcher extends Component {
          <span className="icon dash-f" />
        </button>
        <ul className="dropdown-menu">
-          {dropdownItems}
+          {sorted.map(({name, link}) =>
+            <NameLink
+              key={link}
+              name={name}
+              link={link}
+              activeName={activeDashboard}
+              onClose={this.handleCloseMenu}
+            />
+          )}
        </ul>
      </div>
    )
  }
 }

-const {arrayOf, shape, string} = PropTypes
+const NameLink = ({name, link, activeName, onClose}) =>
+  <li
+    className={classnames('dropdown-item', {
+      active: name === activeName,
+    })}
+  >
+    <Link to={link} onClick={onClose}>
+      {name}
+    </Link>
+  </li>
+
+const {arrayOf, func, shape, string} = PropTypes

 DashboardSwitcher.propTypes = {
-  currentDashboard: string.isRequired,
-  dashboards: arrayOf(shape({})).isRequired,
-  sourceID: string.isRequired,
-  hosts: shape({}),
-  appParam: string,
+  activeDashboard: string.isRequired,
+  names: arrayOf(
+    shape({
+      link: string.isRequired,
+      name: string.isRequired,
+    })
+  ).isRequired,
+}
+
+NameLink.propTypes = {
+  name: string.isRequired,
+  link: string.isRequired,
+  activeName: string.isRequired,
+  onClose: func.isRequired,
 }

 export default OnClickOutside(DashboardSwitcher)
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@ -39,12 +39,13 @@ class DashboardPage extends Component {
      selectedCell: null,
      isTemplating: false,
      zoomedTimeRange: {zoomedLower: null, zoomedUpper: null},
+      names: [],
    }
  }

  async componentDidMount() {
    const {
-      params: {dashboardID},
+      params: {dashboardID, sourceID},
      dashboardActions: {
        getDashboardsAsync,
        updateTempVarValues,
@ -61,6 +62,13 @@ class DashboardPage extends Component {
    // Refresh and persists influxql generated template variable values
    await updateTempVarValues(source, dashboard)
    await putDashboardByID(dashboardID)
+
+    const names = dashboards.map(d => ({
+      name: d.name,
+      link: `/sources/${sourceID}/dashboards/${d.id}`,
+    }))
+
+    this.setState({names})
  }

  handleOpenTemplateManager = () => {
@ -277,7 +285,7 @@ class DashboardPage extends Component {
      templatesIncludingDashTime = []
    }

-    const {selectedCell, isEditMode, isTemplating} = this.state
+    const {selectedCell, isEditMode, isTemplating, names} = this.state

    return (
      <div className="page">
@ -308,6 +316,7 @@ class DashboardPage extends Component {
            />
          : null}
        <DashboardHeader
+          names={names}
          sourceID={sourceID}
          dashboard={dashboard}
          dashboards={dashboards}
@ -321,7 +330,7 @@ class DashboardPage extends Component {
          onSave={this.handleRenameDashboard}
          onCancel={this.handleCancelEditDashboard}
          onEditDashboard={this.handleEditDashboard}
-          dashboardName={dashboard ? dashboard.name : ''}
+          activeDashboard={dashboard ? dashboard.name : ''}
          showTemplateControlBar={showTemplateControlBar}
          handleChooseAutoRefresh={handleChooseAutoRefresh}
          handleChooseTimeRange={this.handleChooseTimeRange}
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@ -28,7 +28,7 @@ class HostPage extends Component {
    super(props)
    this.state = {
      layouts: [],
-      hosts: [],
+      hosts: {},
      timeRange: timeRanges.find(tr => tr.lower === 'now() - 1h'),
      dygraphs: [],
    }
@ -47,6 +47,7 @@ class HostPage extends Component {
      mappings,
      source.telegraf
    )
+
    const measurements = await getMeasurementsForHost(source, params.hostID)

    const host = newHosts[this.props.params.hostID]
@ -164,35 +165,30 @@ class HostPage extends Component {

  render() {
    const {
-      source,
      autoRefresh,
-      source: {id},
      onManualRefresh,
-      params: {hostID},
+      params: {hostID, sourceID},
      inPresentationMode,
      handleChooseAutoRefresh,
-      location: {query: {app}},
      handleClickPresentationButton,
    } = this.props
    const {layouts, timeRange, hosts} = this.state
-    const appParam = app ? `?app=${app}` : ''
-
-    const hostsList = Object.keys(hosts)
+    const names = _.map(hosts, ({name}) => ({
+      name,
+      link: `/sources/${sourceID}/hosts/${name}`,
+    }))

    return (
      <div className="page">
        <DashboardHeader
-          sourceID={id}
-          source={source}
-          hosts={hostsList}
-          appParam={appParam}
-          dashboardName={hostID}
+          names={names}
          timeRange={timeRange}
+          activeDashboard={hostID}
          autoRefresh={autoRefresh}
          isHidden={inPresentationMode}
          onManualRefresh={onManualRefresh}
-          handleChooseTimeRange={this.handleChooseTimeRange}
          handleChooseAutoRefresh={handleChooseAutoRefresh}
+          handleChooseTimeRange={this.handleChooseTimeRange}
          handleClickPresentationButton={handleClickPresentationButton}
        />
        <FancyScrollbar