Merge branch 'master' into feature/onboarding-wizard

ui/src/dashboards/components/DashboardHeader.tsx

@@ -5,7 +5,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
 import PageHeaderTitle from 'src/reusable_ui/components/page_layout/PageHeaderTitle'
-import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import GraphTips from 'src/shared/components/GraphTips'
 import RenameDashboard from 'src/dashboards/components/rename_dashboard/RenameDashboard'
@@ -116,7 +116,6 @@ class DashboardHeader extends Component<Props, State> {
           onChoose={handleChooseAutoRefresh}
           onManualRefresh={onManualRefresh}
           selected={autoRefresh}
-          iconName="refresh"
         />
         <TimeRangeDropdown
           onChooseTimeRange={this.handleChooseTimeRange}

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -15,7 +15,7 @@ import WriteDataForm from 'src/data_explorer/components/WriteDataForm'
 import ResizeContainer from 'src/shared/components/ResizeContainer'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
-import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import GraphTips from 'src/shared/components/GraphTips'
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
@@ -219,7 +219,6 @@ export class DataExplorer extends PureComponent<Props, State> {
           Write Data
         </div>
         <AutoRefreshDropdown
-          iconName="refresh"
           selected={autoRefresh}
           onChoose={handleChooseAutoRefresh}
           onManualRefresh={onManualRefresh}

ui/src/hosts/containers/HostsPage.js

@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux'
 import _ from 'lodash'
 
 import HostsTable from 'src/hosts/components/HostsTable'
-import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
+import AutoRefreshDropdown from 'shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
 
@@ -143,7 +143,6 @@ export class HostsPage extends Component {
 
     return (
       <AutoRefreshDropdown
-        iconName="refresh"
         selected={autoRefresh}
         onChoose={onChooseAutoRefresh}
         onManualRefresh={onManualRefresh}

ui/src/reusable_ui/components/dropdowns/Dropdown.scss

@@ -3,6 +3,21 @@
   ------------------------------------------------------------------------------
 */
 
+.dropdown {
+  &.dropdown-xs {
+    height: $form-xs-height;
+  }
+  &.dropdown-sm {
+    height: $form-sm-height;
+  }
+  &.dropdown-md {
+    height: $form-md-height;
+  }
+  &.dropdown-lg {
+    height: $form-lg-height;
+  }
+}
+
 /* Dropdown Menu */
 .dropdown--menu-container {
   overflow: hidden;
@@ -110,7 +125,6 @@
 }
 
 /* Themes */
-/* Currently only a single theme, I plan on adding more later */
 
 @mixin dropdownMenuColor($backgroundA, $backgroundB, $hoverA, $hoverB, $dividerA, $dividerB, $dividerText, $scrollA, $scrollB) {
   @include gradient-h($backgroundA, $backgroundB);

ui/src/reusable_ui/components/dropdowns/DropdownButton.scss

@@ -9,15 +9,15 @@
 }
 
 .dropdown--selected,
-.dropdown--button > span.icon.dropdown--icon,
-.dropdown--button > span.icon.dropdown--caret {
+.dropdown--icon,
+.dropdown--caret {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 
-span.icon.dropdown--icon {
-  top: 49%;
+.dropdown--icon {
+  top: 48%;
 }
 
 .dropdown--selected {
@@ -25,12 +25,11 @@ span.icon.dropdown--icon {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: calc(100% - 20px);
 }
 
-.dropdown--button > span.icon.dropdown--caret {
+.dropdown--caret {
   margin: 0;
-  font-size: 1em;
+  font-size: 0.9em;
 }
 
 /* Button Size Modifiers */

ui/src/shared/components/AutoRefreshDropdown.js

@@ -1,90 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import OnClickOutside from 'shared/components/OnClickOutside'
-
-import autoRefreshItems from 'shared/data/autoRefreshes'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class AutoRefreshDropdown extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpen: false,
-    }
-  }
-
-  findAutoRefreshItem(milliseconds) {
-    return autoRefreshItems.find(values => values.milliseconds === milliseconds)
-  }
-
-  handleClickOutside() {
-    this.setState({isOpen: false})
-  }
-
-  handleSelection = milliseconds => () => {
-    this.props.onChoose(milliseconds)
-    this.setState({isOpen: false})
-  }
-
-  toggleMenu = () => this.setState({isOpen: !this.state.isOpen})
-
-  render() {
-    const {selected, onManualRefresh} = this.props
-    const {isOpen} = this.state
-    const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)
-
-    return (
-      <div
-        className={classnames('autorefresh-dropdown', {
-          paused: +milliseconds === 0,
-        })}
-      >
-        <div className={classnames('dropdown dropdown-120', {open: isOpen})}>
-          <div
-            className="btn btn-sm btn-default dropdown-toggle"
-            onClick={this.toggleMenu}
-          >
-            <span
-              className={classnames(
-                'icon',
-                +milliseconds > 0 ? 'refresh' : 'pause'
-              )}
-            />
-            <span className="dropdown-selected">{inputValue}</span>
-            <span className="caret" />
-          </div>
-          <ul className="dropdown-menu">
-            <li className="dropdown-header">AutoRefresh</li>
-            {autoRefreshItems.map(item => (
-              <li className="dropdown-item" key={item.menuOption}>
-                <a href="#" onClick={this.handleSelection(item.milliseconds)}>
-                  {item.menuOption}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-        {+milliseconds === 0 ? (
-          <div
-            className="btn btn-sm btn-default btn-square"
-            onClick={onManualRefresh}
-          >
-            <span className="icon refresh" />
-          </div>
-        ) : null}
-      </div>
-    )
-  }
-}
-
-const {number, func} = PropTypes
-
-AutoRefreshDropdown.propTypes = {
-  selected: number.isRequired,
-  onChoose: func.isRequired,
-  onManualRefresh: func,
-}
-
-export default OnClickOutside(AutoRefreshDropdown)

ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss

@@ -0,0 +1,17 @@
+/*
+  Auto Refresh Dropdown
+  ------------------------------------------------------------------------------
+*/
+
+.autorefresh-dropdown {
+  display: flex;
+  flex-wrap: nowrap;
+
+  &.paused .dropdown {
+    margin-right: $ix-marg-a;
+  }
+
+  &.paused .dropdown--selected {
+    opacity: 0;
+  }
+}

ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx

@@ -0,0 +1,124 @@
+// Libraries
+import React, {Component} from 'react'
+import classnames from 'classnames'
+
+// Components
+import {Dropdown, Button, ButtonShape, IconFont} from 'src/reusable_ui'
+
+// Constants
+import autoRefreshOptions, {
+  AutoRefreshOption,
+  AutoRefreshOptionType,
+} from 'src/shared/components/dropdown_auto_refresh/autoRefreshOptions'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  selected: number
+  onChoose: (milliseconds: number) => void
+  onManualRefresh: () => void
+}
+
+@ErrorHandling
+class AutoRefreshDropdown extends Component<Props> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+    }
+  }
+
+  public render() {
+    return (
+      <div className={this.className}>
+        <Dropdown
+          icon={this.dropdownIcon}
+          widthPixels={this.dropdownWidthPixels}
+          onChange={this.handleDropdownChange}
+          selectedID={this.selectedID}
+        >
+          {autoRefreshOptions.map(option => {
+            if (option.type === AutoRefreshOptionType.Header) {
+              return (
+                <Dropdown.Divider
+                  key={option.id}
+                  id={option.id}
+                  text={option.label}
+                />
+              )
+            }
+
+            return (
+              <Dropdown.Item key={option.id} id={option.id} value={option}>
+                {option.label}
+              </Dropdown.Item>
+            )
+          })}
+        </Dropdown>
+        {this.manualRefreshButton}
+      </div>
+    )
+  }
+
+  public handleDropdownChange = (
+    autoRefreshOption: AutoRefreshOption
+  ): void => {
+    const {onChoose} = this.props
+    const {milliseconds} = autoRefreshOption
+
+    onChoose(milliseconds)
+  }
+
+  private get isPaused(): boolean {
+    const {selected} = this.props
+
+    return selected === 0
+  }
+
+  private get className(): string {
+    return classnames('autorefresh-dropdown', {paused: this.isPaused})
+  }
+
+  private get dropdownIcon(): IconFont {
+    if (this.isPaused) {
+      return IconFont.Pause
+    }
+
+    return IconFont.Refresh
+  }
+
+  private get dropdownWidthPixels(): number {
+    if (this.isPaused) {
+      return 50
+    }
+
+    return 84
+  }
+
+  private get selectedID(): string {
+    const {selected} = this.props
+    const selectedOption = autoRefreshOptions.find(
+      option => option.milliseconds === selected
+    )
+
+    return selectedOption.id
+  }
+
+  private get manualRefreshButton(): JSX.Element {
+    const {onManualRefresh} = this.props
+
+    if (this.isPaused) {
+      return (
+        <Button
+          shape={ButtonShape.Square}
+          icon={IconFont.Refresh}
+          onClick={onManualRefresh}
+        />
+      )
+    }
+
+    return null
+  }
+}
+
+export default AutoRefreshDropdown

ui/src/shared/components/dropdown_auto_refresh/autoRefreshOptions.ts

@@ -0,0 +1,58 @@
+export enum AutoRefreshOptionType {
+  Option = 'option',
+  Header = 'header',
+}
+
+export interface AutoRefreshOption {
+  id: string
+  milliseconds: number
+  label: string
+  type: AutoRefreshOptionType
+}
+
+const autoRefreshOptions: AutoRefreshOption[] = [
+  {
+    id: 'auto-refresh-header',
+    milliseconds: 9999,
+    label: 'Refresh',
+    type: AutoRefreshOptionType.Header,
+  },
+  {
+    id: 'auto-refresh-paused',
+    milliseconds: 0,
+    label: 'Paused',
+    type: AutoRefreshOptionType.Option,
+  },
+  {
+    id: 'auto-refresh-5s',
+    milliseconds: 5000,
+    label: '5s',
+    type: AutoRefreshOptionType.Option,
+  },
+  {
+    id: 'auto-refresh-10s',
+    milliseconds: 10000,
+    label: '10s',
+    type: AutoRefreshOptionType.Option,
+  },
+  {
+    id: 'auto-refresh-15s',
+    milliseconds: 15000,
+    label: '15s',
+    type: AutoRefreshOptionType.Option,
+  },
+  {
+    id: 'auto-refresh-30s',
+    milliseconds: 30000,
+    label: '30s',
+    type: AutoRefreshOptionType.Option,
+  },
+  {
+    id: 'auto-refresh-60s',
+    milliseconds: 60000,
+    label: '60s',
+    type: AutoRefreshOptionType.Option,
+  },
+]
+
+export default autoRefreshOptions

ui/src/shared/data/autoRefreshes.js

@@ -1,30 +0,0 @@
-const autoRefreshItems = [
-  {milliseconds: 0, inputValue: 'Paused', menuOption: 'Paused'},
-  {
-    milliseconds: 5000,
-    inputValue: 'Every 5s',
-    menuOption: 'Every 5s',
-  },
-  {
-    milliseconds: 10000,
-    inputValue: 'Every 10s',
-    menuOption: 'Every 10s',
-  },
-  {
-    milliseconds: 15000,
-    inputValue: 'Every 15s',
-    menuOption: 'Every 15s',
-  },
-  {
-    milliseconds: 30000,
-    inputValue: 'Every 30s',
-    menuOption: 'Every 30s',
-  },
-  {
-    milliseconds: 60000,
-    inputValue: 'Every 60s',
-    menuOption: 'Every 60s',
-  },
-]
-
-export default autoRefreshItems

ui/src/style/chronograf.scss

@@ -95,6 +95,7 @@
 @import '../reusable_ui/components/inputs/Input.scss';
 @import '../reusable_ui/components/form_layout/Form.scss';
 @import '../dashboards/components/rename_dashboard/RenameDashboard.scss';
+@import '../shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss';
 
 // Pages
 @import 'pages/config-endpoints';

ui/src/style/modules/_variables.scss

@@ -69,19 +69,19 @@ $ix-app-heading-height: 60px;
 $ix-app-wrapper-z: 3;
 
 $form-xs-height: 22px;
-$form-xs-padding: 7px;
+$form-xs-padding: 6px;
 $form-xs-font: 13px;
 
 $form-sm-height: 30px;
-$form-sm-padding: 11px;
+$form-sm-padding: 9px;
 $form-sm-font: 13px;
 
 $form-md-height: 38px;
-$form-md-padding: 14px;
+$form-md-padding: 12px;
 $form-md-font: 15px;
 
 $form-lg-height: 46px;
-$form-lg-padding: 17px;
+$form-lg-padding: 15px;
 $form-lg-font: 17px;
 
 // Drag & Drop

ui/src/style/unsorted.scss

@@ -364,22 +364,6 @@ $tick-script-overlay-margin: 30px;
   }
 }
 
-/*
-  Auto Refresh Dropdown
-  -----------------------------------------------------------------------------
-*/
-.autorefresh-dropdown {
-  display: flex;
-  flex-wrap: nowrap;
-
-  &.paused .dropdown {
-    margin-right: 4px;
-  }
-  &.paused .dropdown > .btn.dropdown-toggle {
-    width: 126px;
-  }
-}
-
 /*
   Dashboard Switcher
   -----------------------------------------------------------------------------