From d3e9ae9701161deb20d79829a825e52958617292 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 11:28:25 -0700
Subject: [PATCH 001/100] Introduce presentational components for page header &
 title

---
 ui/src/shared/components/PageHeader.tsx      | 25 ++++++++++++++++++++
 ui/src/shared/components/PageHeaderTitle.tsx | 11 +++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 ui/src/shared/components/PageHeader.tsx
 create mode 100644 ui/src/shared/components/PageHeaderTitle.tsx

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
new file mode 100644
index 000000000..a73d1bde0
--- /dev/null
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -0,0 +1,25 @@
+import React, {SFC, ReactElement} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  renderLeft: () => ReactElement<any>
+  renderRight?: () => ReactElement<any>
+  fullWidth: boolean
+}
+
+const PageHeader: SFC<Props> = ({renderLeft, renderRight, fullWidth}) => {
+  const className = classnames('page-header', {'full-width': fullWidth})
+
+  return (
+    <div className={className}>
+      <div className="page-header--container">
+        <div className="page-header--left">{renderLeft()}</div>
+        {renderRight && (
+          <div className="page-header--right">{renderRight()}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PageHeader
diff --git a/ui/src/shared/components/PageHeaderTitle.tsx b/ui/src/shared/components/PageHeaderTitle.tsx
new file mode 100644
index 000000000..46cdc6a23
--- /dev/null
+++ b/ui/src/shared/components/PageHeaderTitle.tsx
@@ -0,0 +1,11 @@
+import React, {SFC} from 'react'
+
+interface Props {
+  title: string
+}
+
+const PageTitle: SFC<Props> = ({title}) => (
+  <h1 className="page-header--title">{title}</h1>
+)
+
+export default PageTitle

From d1cedfd45eacf9cf03be926b9913f6d6962f36f5 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 11:28:43 -0700
Subject: [PATCH 002/100] Rename page header class names to follow BEM
 conventions

---
 ui/src/admin/containers/AdminInfluxDBPage.js  |  8 ++++----
 .../chronograf/AdminChronografPage.js         |  6 +++---
 ui/src/alerts/containers/AlertsApp.tsx        |  8 ++++----
 .../dashboards/components/DashboardHeader.js  | 12 +++++------
 .../components/DashboardsHeader.tsx           |  8 ++++----
 .../TemplateVariableManager.js                |  6 +++---
 .../components/WriteDataHeader.tsx            |  6 +++---
 ui/src/data_explorer/containers/Header.tsx    |  8 ++++----
 ui/src/flux/components/FluxHeader.tsx         |  8 ++++----
 ui/src/flux/components/FluxOverlay.tsx        |  6 +++---
 ui/src/hosts/containers/HostsPage.js          |  8 ++++----
 ui/src/kapacitor/components/KapacitorForm.tsx |  6 +++---
 ui/src/kapacitor/components/RuleHeader.js     |  6 +++---
 ui/src/kapacitor/components/RuleHeaderSave.js |  2 +-
 .../kapacitor/components/TICKscriptOverlay.js |  6 +++---
 .../kapacitor/components/TickscriptHeader.tsx |  8 ++++----
 .../containers/KapacitorRulesPage.tsx         |  8 ++++----
 ui/src/logs/components/LogViewerHeader.tsx    |  8 ++++----
 ui/src/sources/containers/ManageSources.tsx   |  8 ++++----
 ui/src/sources/containers/SourcePage.js       |  8 ++++----
 ui/src/status/containers/StatusPage.js        |  8 ++++----
 ui/src/style/layout/page-header.scss          | 20 +++++++++----------
 ui/src/style/unsorted.scss                    |  4 ++--
 23 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js
index d39060fbc..02d59569f 100644
--- a/ui/src/admin/containers/AdminInfluxDBPage.js
+++ b/ui/src/admin/containers/AdminInfluxDBPage.js
@@ -224,11 +224,11 @@ class AdminInfluxDBPage extends Component {
     return (
       <div className="page">
         <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">InfluxDB Admin</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">InfluxDB Admin</h1>
             </div>
-            <div className="page-header__right">
+            <div className="page-header--right">
               <SourceIndicator />
             </div>
           </div>
diff --git a/ui/src/admin/containers/chronograf/AdminChronografPage.js b/ui/src/admin/containers/chronograf/AdminChronografPage.js
index 5e1eb9f77..964c34ee4 100644
--- a/ui/src/admin/containers/chronograf/AdminChronografPage.js
+++ b/ui/src/admin/containers/chronograf/AdminChronografPage.js
@@ -50,9 +50,9 @@ const sections = me => [
 const AdminChronografPage = ({me, source, params: {tab}}) => (
   <div className="page">
     <div className="page-header">
-      <div className="page-header__container">
-        <div className="page-header__left">
-          <h1 className="page-header__title">Chronograf Admin</h1>
+      <div className="page-header--container">
+        <div className="page-header--left">
+          <h1 className="page-header--title">Chronograf Admin</h1>
         </div>
       </div>
     </div>
diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 0eae2a813..5f0dcf086 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -96,11 +96,11 @@ class AlertsApp extends PureComponent<Props, State> {
     ) : (
       <div className="page alert-history-page">
         <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Alert History</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">Alert History</h1>
             </div>
-            <div className="page-header__right">
+            <div className="page-header--right">
               <SourceIndicator />
               <CustomTimeRangeDropdown
                 onApplyTimeRange={this.handleApplyTime}
diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js
index 7bb67bb0e..46efa78f4 100644
--- a/ui/src/dashboards/components/DashboardHeader.js
+++ b/ui/src/dashboards/components/DashboardHeader.js
@@ -33,12 +33,12 @@ const DashboardHeader = ({
 }) =>
   isHidden ? null : (
     <div className="page-header full-width">
-      <div className="page-header__container">
+      <div className="page-header--container">
         <div
           className={
             dashboard
-              ? 'page-header__left page-header__dash-editable'
-              : 'page-header__left'
+              ? 'page-header--left page-header__dash-editable'
+              : 'page-header--left'
           }
         >
           {names && names.length > 1 ? (
@@ -51,7 +51,7 @@ const DashboardHeader = ({
             <Authorized
               requiredRole={EDITOR_ROLE}
               replaceWithIfNotAuthorized={
-                <h1 className="page-header__title">{activeDashboard}</h1>
+                <h1 className="page-header--title">{activeDashboard}</h1>
               }
             >
               <DashboardHeaderEdit
@@ -63,10 +63,10 @@ const DashboardHeader = ({
               />
             </Authorized>
           ) : (
-            <h1 className="page-header__title">{activeDashboard}</h1>
+            <h1 className="page-header--title">{activeDashboard}</h1>
           )}
         </div>
-        <div className="page-header__right">
+        <div className="page-header--right">
           <GraphTips />
           <SourceIndicator />
           {dashboard ? (
diff --git a/ui/src/dashboards/components/DashboardsHeader.tsx b/ui/src/dashboards/components/DashboardsHeader.tsx
index 7dde2440d..2eec2b0be 100644
--- a/ui/src/dashboards/components/DashboardsHeader.tsx
+++ b/ui/src/dashboards/components/DashboardsHeader.tsx
@@ -4,11 +4,11 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 const DashboardsHeader = (): JSX.Element => (
   <div className="page-header">
-    <div className="page-header__container">
-      <div className="page-header__left">
-        <h1 className="page-header__title">Dashboards</h1>
+    <div className="page-header--container">
+      <div className="page-header--left">
+        <h1 className="page-header--title">Dashboards</h1>
       </div>
-      <div className="page-header__right">
+      <div className="page-header--right">
         <SourceIndicator />
       </div>
     </div>
diff --git a/ui/src/dashboards/components/template_variables/TemplateVariableManager.js b/ui/src/dashboards/components/template_variables/TemplateVariableManager.js
index 5cdd9dbf6..251a6d618 100644
--- a/ui/src/dashboards/components/template_variables/TemplateVariableManager.js
+++ b/ui/src/dashboards/components/template_variables/TemplateVariableManager.js
@@ -22,10 +22,10 @@ const TemplateVariableManager = ({
 }) => (
   <div className="template-variable-manager">
     <div className="template-variable-manager--header">
-      <div className="page-header__left">
-        <h1 className="page-header__title">Template Variables</h1>
+      <div className="page-header--left">
+        <h1 className="page-header--title">Template Variables</h1>
       </div>
-      <div className="page-header__right">
+      <div className="page-header--right">
         <button
           className="btn btn-primary btn-sm"
           type="button"
diff --git a/ui/src/data_explorer/components/WriteDataHeader.tsx b/ui/src/data_explorer/components/WriteDataHeader.tsx
index 73304a75f..0d6a5f85f 100644
--- a/ui/src/data_explorer/components/WriteDataHeader.tsx
+++ b/ui/src/data_explorer/components/WriteDataHeader.tsx
@@ -24,8 +24,8 @@ class WriteDataHeader extends PureComponent<Props> {
 
     return (
       <div className="write-data-form--header">
-        <div className="page-header__left">
-          <h1 className="page-header__title">Write Data To</h1>
+        <div className="page-header--left">
+          <h1 className="page-header--title">Write Data To</h1>
           <DatabaseDropdown
             source={source}
             onSelectDatabase={handleSelectDatabase}
@@ -45,7 +45,7 @@ class WriteDataHeader extends PureComponent<Props> {
             </li>
           </ul>
         </div>
-        <div className="page-header__right">
+        <div className="page-header--right">
           <span className="page-header__dismiss" onClick={onClose} />
         </div>
       </div>
diff --git a/ui/src/data_explorer/containers/Header.tsx b/ui/src/data_explorer/containers/Header.tsx
index 82cfc3113..b057535b0 100644
--- a/ui/src/data_explorer/containers/Header.tsx
+++ b/ui/src/data_explorer/containers/Header.tsx
@@ -27,11 +27,11 @@ class Header extends PureComponent<Props> {
     } = this.props
     return (
       <div className="page-header full-width">
-        <div className="page-header__container">
-          <div className="page-header__left">
-            <h1 className="page-header__title">Data Explorer</h1>
+        <div className="page-header--container">
+          <div className="page-header--left">
+            <h1 className="page-header--title">Data Explorer</h1>
           </div>
-          <div className="page-header__right">
+          <div className="page-header--right">
             <GraphTips />
             <SourceIndicator />
             <div
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index 40ff8325a..d83149fd8 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -19,11 +19,11 @@ class FluxHeader extends PureComponent<Props> {
   public render() {
     return (
       <div className="page-header full-width">
-        <div className="page-header__container">
-          <div className="page-header__left">
-            <h1 className="page-header__title">Flux Editor</h1>
+        <div className="page-header--container">
+          <div className="page-header--left">
+            <h1 className="page-header--title">Flux Editor</h1>
           </div>
-          <div className="page-header__right">
+          <div className="page-header--right">
             <button onClick={this.overlay} className="btn btn-sm btn-default">
               Edit Connection
             </button>
diff --git a/ui/src/flux/components/FluxOverlay.tsx b/ui/src/flux/components/FluxOverlay.tsx
index 6f59936a0..51b0ef0b5 100644
--- a/ui/src/flux/components/FluxOverlay.tsx
+++ b/ui/src/flux/components/FluxOverlay.tsx
@@ -29,10 +29,10 @@ class FluxOverlay extends PureComponent<Props> {
     return (
       <div className="flux-overlay">
         <div className="template-variable-manager--header">
-          <div className="page-header__left">
-            <h1 className="page-header__title">Connect to Flux</h1>
+          <div className="page-header--left">
+            <h1 className="page-header--title">Connect to Flux</h1>
           </div>
-          <div className="page-header__right">
+          <div className="page-header--right">
             <span
               className="page-header__dismiss"
               onClick={this.props.onDismiss}
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index bcc8ae73d..5f5a63905 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/ui/src/hosts/containers/HostsPage.js
@@ -120,11 +120,11 @@ export class HostsPage extends Component {
     return (
       <div className="page hosts-list-page">
         <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Host List</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">Host List</h1>
             </div>
-            <div className="page-header__right">
+            <div className="page-header--right">
               <SourceIndicator />
               <AutoRefreshDropdown
                 iconName="refresh"
diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx
index 436775eee..20d79aedb 100644
--- a/ui/src/kapacitor/components/KapacitorForm.tsx
+++ b/ui/src/kapacitor/components/KapacitorForm.tsx
@@ -39,9 +39,9 @@ class KapacitorForm extends PureComponent<Props> {
     return (
       <div className="page">
         <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">{this.headerText}</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">{this.headerText}</h1>
             </div>
           </div>
         </div>
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js
index 9ecf4c2eb..e4d84c62c 100644
--- a/ui/src/kapacitor/components/RuleHeader.js
+++ b/ui/src/kapacitor/components/RuleHeader.js
@@ -14,9 +14,9 @@ class RuleHeader extends Component {
 
     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 className="page-header--container">
+          <div className="page-header--left">
+            <h1 className="page-header--title">Alert Rule Builder</h1>
           </div>
           <RuleHeaderSave
             source={source}
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js
index 5516eeec0..c87805d25 100644
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ b/ui/src/kapacitor/components/RuleHeaderSave.js
@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
 import SourceIndicator from 'shared/components/SourceIndicator'
 
 const RuleHeaderSave = ({onSave, validationError}) => (
-  <div className="page-header__right">
+  <div className="page-header--right">
     <SourceIndicator />
     {validationError ? (
       <button
diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js
index 084b5acbc..7cf382169 100644
--- a/ui/src/kapacitor/components/TICKscriptOverlay.js
+++ b/ui/src/kapacitor/components/TICKscriptOverlay.js
@@ -6,10 +6,10 @@ const TICKscriptOverlay = ({tickscript, onClose}) => (
   <OverlayTechnologies>
     <div className="tick-script-overlay">
       <div className="write-data-form--header">
-        <div className="page-header__left">
-          <h1 className="page-header__title">Generated TICKscript</h1>
+        <div className="page-header--left">
+          <h1 className="page-header--title">Generated TICKscript</h1>
         </div>
-        <div className="page-header__right">
+        <div className="page-header--right">
           <span className="page-header__dismiss" onClick={onClose} />
         </div>
       </div>
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index be43c77f3..ca08a65ed 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -27,9 +27,9 @@ const TickscriptHeader: SFC<Props> = ({
   onToggleLogsVisibility,
 }) => (
   <div className="page-header full-width">
-    <div className="page-header__container">
-      <div className="page-header__left">
-        <h1 className="page-header__title">TICKscript Editor</h1>
+    <div className="page-header--container">
+      <div className="page-header--left">
+        <h1 className="page-header--title">TICKscript Editor</h1>
       </div>
       {areLogsEnabled && (
         <LogsToggle
@@ -37,7 +37,7 @@ const TickscriptHeader: SFC<Props> = ({
           onToggleLogsVisibility={onToggleLogsVisibility}
         />
       )}
-      <div className="page-header__right">
+      <div className="page-header--right">
         <SourceIndicator />
         <TickscriptSave
           task={task}
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 566364476..4749474a6 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -90,11 +90,11 @@ interface PageContentsProps {
 const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <div className="page-header">
-      <div className="page-header__container">
-        <div className="page-header__left">
-          <h1 className="page-header__title">Manage Tasks</h1>
+      <div className="page-header--container">
+        <div className="page-header--left">
+          <h1 className="page-header--title">Manage Tasks</h1>
         </div>
-        <div className="page-header__right">
+        <div className="page-header--right">
           <QuestionMarkTooltip
             tipID="manage-tasks--tooltip"
             tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index 2b463746b..7b0cd834b 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -30,14 +30,14 @@ class LogViewerHeader extends PureComponent<Props> {
     const {timeRange} = this.props
     return (
       <div className="page-header full-width">
-        <div className="page-header__container">
-          <div className="page-header__left">
+        <div className="page-header--container">
+          <div className="page-header--left">
             {this.status}
-            <h1 className="page-header__title logs-viewer-header-title">
+            <h1 className="page-header--title logs-viewer-header-title">
               Log Viewer
             </h1>
           </div>
-          <div className="page-header__right">
+          <div className="page-header--right">
             <Dropdown
               className="dropdown-300"
               items={this.sourceDropDownItems}
diff --git a/ui/src/sources/containers/ManageSources.tsx b/ui/src/sources/containers/ManageSources.tsx
index 8a701210f..ae1cf2f7d 100644
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@@ -50,11 +50,11 @@ class ManageSources extends PureComponent<Props> {
     return (
       <div className="page" id="manage-sources-page">
         <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Configuration</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">Configuration</h1>
             </div>
-            <div className="page-header__right">
+            <div className="page-header--right">
               <SourceIndicator />
             </div>
           </div>
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index 7d44ace13..673972d7a 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@@ -209,17 +209,17 @@ class SourcePage extends Component {
       <div className={`${isInitialSource ? '' : 'page'}`}>
         <Notifications />
         <div className="page-header">
-          <div className="page-header__container page-header__source-page">
+          <div className="page-header--container page-header__source-page">
             <div className="page-header__col-md-8">
-              <div className="page-header__left">
-                <h1 className="page-header__title">
+              <div className="page-header--left">
+                <h1 className="page-header--title">
                   {editMode
                     ? 'Configure InfluxDB Connection'
                     : 'Add a New InfluxDB Connection'}
                 </h1>
               </div>
               {isInitialSource ? null : (
-                <div className="page-header__right">
+                <div className="page-header--right">
                   <SourceIndicator />
                 </div>
               )}
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index 157e7a658..6a6f28505 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.js
@@ -58,11 +58,11 @@ class StatusPage extends Component {
     return (
       <div className="page">
         <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Status</h1>
+          <div className="page-header--container">
+            <div className="page-header--left">
+              <h1 className="page-header--title">Status</h1>
             </div>
-            <div className="page-header__right">
+            <div className="page-header--right">
               <SourceIndicator />
             </div>
           </div>
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 9b2d89cc3..7b46b71c7 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -1,6 +1,6 @@
 /*
-    Page Header
-    ----------------------------------------------
+  Page Header
+  ------------------------------------------------------------------------------
 */
 $page-header-size: 19px;
 $page-header-weight: 400 !important;
@@ -19,10 +19,10 @@ $page-header-weight: 400 !important;
   border: none;
   margin: 0;
 }
-.page-header.full-width .page-header__container {
+.page-header.full-width .page-header--container {
   max-width: 100%;
 }
-.page-header__container {
+.page-header--container {
   position: relative;
   width: 100%;
   display: flex;
@@ -32,7 +32,7 @@ $page-header-weight: 400 !important;
   width: 100%;
   max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding);
 }
-.page-header__container.page-header__source-page {
+.page-header--container.page-header__source-page {
   justify-content: center;
 }
 .page-header__col-md-8 {
@@ -52,18 +52,18 @@ $page-header-weight: 400 !important;
     width: 66.66667%;
   }
 }
-.page-header__left,
-.page-header__right {
+.page-header--left,
+.page-header--right {
   display: flex;
   align-items: center;
 }
-.page-header__left {
+.page-header--left {
   justify-content: flex-start;
   > * {
     margin: 0 4px 0 0;
   }
 }
-.page-header__right {
+.page-header--right {
   justify-content: flex-end;
   > * {
     margin: 0 0 0 4px !important;
@@ -73,7 +73,7 @@ $page-header-weight: 400 !important;
     }
   }
 }
-.page-header__title {
+.page-header--title {
   letter-spacing: 0;
   text-transform: none;
   font-size: $page-header-size;
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index 99e877c96..779282e25 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -390,7 +390,7 @@ $tick-script-overlay-margin: 30px;
 .dropdown.dashboard-switcher .btn.dropdown-toggle {
   justify-content: center;
 }
-.dropdown.dashboard-switcher + h1.page-header__title {
+.dropdown.dashboard-switcher + h1.page-header--title {
   margin-left: 6px;
 }
 
@@ -404,7 +404,7 @@ $tick-script-overlay-margin: 30px;
 */
 $dash-editable-header-padding: 7px;
 
-.page-header__left.page-header__dash-editable,
+.page-header--left.page-header__dash-editable,
 .dashboard-title,
 .dashboard-title input[type='text'].form-control.dashboard-title--input,
 .dashboard-title h1 {

From 72a7dfda8148e282f86301f93d85e8fc00030df3 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 11:56:29 -0700
Subject: [PATCH 003/100] Make page header accept either a string title or a
 render prop

---
 ui/src/shared/components/PageHeader.tsx | 26 +++++++++---
 ui/src/style/layout/page-header.scss    | 53 +++++++++++++++----------
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index a73d1bde0..d53a3922a 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,21 +1,37 @@
 import React, {SFC, ReactElement} from 'react'
 import classnames from 'classnames'
+import Title from 'src/shared/components/PageHeaderTitle'
 
 interface Props {
-  renderLeft: () => ReactElement<any>
-  renderRight?: () => ReactElement<any>
+  pageTitle?: string
+  renderTitle?: () => ReactElement<any>
+  renderOptions?: () => ReactElement<any>
   fullWidth: boolean
 }
 
-const PageHeader: SFC<Props> = ({renderLeft, renderRight, fullWidth}) => {
+const PageHeader: SFC<Props> = ({
+  pageTitle,
+  renderTitle,
+  renderOptions,
+  fullWidth,
+}) => {
+  if (!pageTitle && !renderTitle) {
+    console.error('PageHeader requires either PageTitle or RenderTitle props')
+  }
+
   const className = classnames('page-header', {'full-width': fullWidth})
+  let renderLeft = renderTitle
+
+  if (!renderTitle) {
+    renderLeft = () => <Title title={pageTitle} />
+  }
 
   return (
     <div className={className}>
       <div className="page-header--container">
         <div className="page-header--left">{renderLeft()}</div>
-        {renderRight && (
-          <div className="page-header--right">{renderRight()}</div>
+        {renderOptions && (
+          <div className="page-header--Options">{renderOptions()}</div>
         )}
       </div>
     </div>
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 7b46b71c7..4d924b1d1 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -19,9 +19,7 @@ $page-header-weight: 400 !important;
   border: none;
   margin: 0;
 }
-.page-header.full-width .page-header--container {
-  max-width: 100%;
-}
+
 .page-header--container {
   position: relative;
   width: 100%;
@@ -32,26 +30,13 @@ $page-header-weight: 400 !important;
   width: 100%;
   max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding);
 }
-.page-header--container.page-header__source-page {
-  justify-content: center;
-}
-.page-header__col-md-8 {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-@media screen and (min-width: 992px) {
-  /*
-    NOTE:
-    Breakpoint and % width are based on the bootstrap grid
-    If the source form column sizing is ever changed, this
-    will have to be manually updated
-  */
-  .page-header__col-md-8 {
-    width: 66.66667%;
-  }
+
+// If specified as a full width page header
+.page-header.full-width .page-header--container {
+  max-width: 100%;
 }
+
+// Left & Right halves of the page header
 .page-header--left,
 .page-header--right {
   display: flex;
@@ -73,6 +58,8 @@ $page-header-weight: 400 !important;
     }
   }
 }
+
+// Intended to be a <h1>
 .page-header--title {
   letter-spacing: 0;
   text-transform: none;
@@ -84,6 +71,28 @@ $page-header-weight: 400 !important;
   @include no-user-select();
   cursor: default;
 }
+
+// Misc styles to be refactors
+.page-header--container.page-header__source-page {
+  justify-content: center;
+}
+.page-header__col-md-8 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+@media screen and (min-width: 992px) {
+  /*
+    NOTE:
+    Breakpoint and % width are based on the bootstrap grid
+    If the source form column sizing is ever changed, this
+    will have to be manually updated
+  */
+  .page-header__col-md-8 {
+    width: 66.66667%;
+  }
+}
 .page-header__dismiss {
   width: ($chronograf-page-header-height - 20px);
   height: ($chronograf-page-header-height - 20px);

From 39e136f0546a0440e37b1926bed882fff27f756c Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 11:56:49 -0700
Subject: [PATCH 004/100] Make full width prop optional

---
 ui/src/shared/components/PageHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index d53a3922a..766285356 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -6,7 +6,7 @@ interface Props {
   pageTitle?: string
   renderTitle?: () => ReactElement<any>
   renderOptions?: () => ReactElement<any>
-  fullWidth: boolean
+  fullWidth?: boolean
 }
 
 const PageHeader: SFC<Props> = ({

From 4537b373c19128f56b84a15a0f085de04a32379a Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 13 Jun 2018 12:29:23 -0700
Subject: [PATCH 005/100] Add cancelable promise wrapper

Co-authored-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/shared/apis/flux/metaQueries.ts | 50 ++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/ui/src/shared/apis/flux/metaQueries.ts b/ui/src/shared/apis/flux/metaQueries.ts
index af326241c..ec479de7e 100644
--- a/ui/src/shared/apis/flux/metaQueries.ts
+++ b/ui/src/shared/apis/flux/metaQueries.ts
@@ -113,6 +113,56 @@ const tagsetFilter = (filter: SchemaFilter[]): string => {
   return `|> filter(fn: (r) => ${predicates.join(' and ')} )`
 }
 
+interface CanceledResolvedValue<T> {
+  isCanceled: boolean
+  value: T | null
+}
+
+interface CanceledRejectedValue {
+  isCanceled: boolean
+  error: Error | null
+}
+
+type PossiblyCanceledValue<T> = CanceledResolvedValue<T> | CanceledRejectedValue
+
+interface WrappedCancelablePromise<T> {
+  promise: Promise<PossiblyCanceledValue<T>>
+  cancel: () => void
+}
+
+export const makeCancelable = <T>(
+  promise: Promise<T>
+): WrappedCancelablePromise<T> => {
+  let isCanceled = false
+
+  const wrappedPromise = new Promise<PossiblyCanceledValue<T>>(
+    async (resolve, reject) => {
+      try {
+        const value = await promise
+
+        if (isCanceled) {
+          reject({isCanceled, value: null})
+        } else {
+          resolve({isCanceled, value})
+        }
+      } catch (error) {
+        if (isCanceled) {
+          reject({isCanceled, error: null})
+        } else {
+          reject({isCanceled, error})
+        }
+      }
+    }
+  )
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      isCanceled = true
+    },
+  }
+}
+
 const proxy = async (service: Service, script: string) => {
   const and = encodeURIComponent('&')
   const mark = encodeURIComponent('?')

From 5443822d02c033d7a4d3f6340835d3741e5f6254 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:28:48 -0700
Subject: [PATCH 006/100] Shorten name of prop

Also fixing a css classname typo
---
 ui/src/shared/components/PageHeader.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 766285356..e75e0c5b9 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -3,27 +3,27 @@ import classnames from 'classnames'
 import Title from 'src/shared/components/PageHeaderTitle'
 
 interface Props {
-  pageTitle?: string
+  title?: string
   renderTitle?: () => ReactElement<any>
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
 }
 
 const PageHeader: SFC<Props> = ({
-  pageTitle,
+  title,
   renderTitle,
   renderOptions,
   fullWidth,
 }) => {
-  if (!pageTitle && !renderTitle) {
-    console.error('PageHeader requires either PageTitle or RenderTitle props')
+  if (!title && !renderTitle) {
+    console.error('PageHeader requires either title or RenderTitle props')
   }
 
   const className = classnames('page-header', {'full-width': fullWidth})
   let renderLeft = renderTitle
 
   if (!renderTitle) {
-    renderLeft = () => <Title title={pageTitle} />
+    renderLeft = () => <Title title={title} />
   }
 
   return (
@@ -31,7 +31,7 @@ const PageHeader: SFC<Props> = ({
       <div className="page-header--container">
         <div className="page-header--left">{renderLeft()}</div>
         {renderOptions && (
-          <div className="page-header--Options">{renderOptions()}</div>
+          <div className="page-header--right">{renderOptions()}</div>
         )}
       </div>
     </div>

From df0c8200ca0f3b76c7f4cbf58fb3c02d5d5774d0 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:37:51 -0700
Subject: [PATCH 007/100] Implement PageHeader on hosts index page

---
 ui/src/hosts/containers/HostsPage.js | 46 ++++++++++++++--------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index 5f5a63905..18debc9b3 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/ui/src/hosts/containers/HostsPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, {Fragment, Component} from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
@@ -8,6 +8,7 @@ import HostsTable from 'src/hosts/components/HostsTable'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {getCpuAndLoadForHosts, getLayouts, getAppsForHosts} from '../apis'
 import {getEnv} from 'src/shared/apis/env'
@@ -110,31 +111,14 @@ export class HostsPage extends Component {
   }
 
   render() {
-    const {
-      source,
-      autoRefresh,
-      onChooseAutoRefresh,
-      onManualRefresh,
-    } = this.props
+    const {source} = this.props
     const {hosts, hostsLoading, hostsError} = this.state
     return (
       <div className="page hosts-list-page">
-        <div className="page-header">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">Host List</h1>
-            </div>
-            <div className="page-header--right">
-              <SourceIndicator />
-              <AutoRefreshDropdown
-                iconName="refresh"
-                selected={autoRefresh}
-                onChoose={onChooseAutoRefresh}
-                onManualRefresh={onManualRefresh}
-              />
-            </div>
-          </div>
-        </div>
+        <PageHeader
+          title="Host List"
+          renderOptions={this.renderHeaderOptions}
+        />
         <div className="page-contents">
           <div className="container-fluid">
             <div className="row">
@@ -153,6 +137,22 @@ export class HostsPage extends Component {
     )
   }
 
+  renderHeaderOptions = () => {
+    const {autoRefresh, onChooseAutoRefresh, onManualRefresh} = this.props
+
+    return (
+      <Fragment>
+        <SourceIndicator />
+        <AutoRefreshDropdown
+          iconName="refresh"
+          selected={autoRefresh}
+          onChoose={onChooseAutoRefresh}
+          onManualRefresh={onManualRefresh}
+        />
+      </Fragment>
+    )
+  }
+
   componentWillUnmount() {
     clearInterval(this.intervalID)
     this.intervalID = false

From 1c8754718e5e7247239bff8f23affe6abd199cd9 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:38:13 -0700
Subject: [PATCH 008/100] Implement PageHeader on data explorer

Also removing header component in the process
---
 .../data_explorer/containers/DataExplorer.tsx | 54 +++++++++++++---
 ui/src/data_explorer/containers/Header.tsx    | 63 -------------------
 2 files changed, 44 insertions(+), 73 deletions(-)
 delete mode 100644 ui/src/data_explorer/containers/Header.tsx

diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index 4dbd39309..9af920f13 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@@ -12,10 +12,14 @@ import {stripPrefix} from 'src/utils/basepath'
 import QueryMaker from 'src/data_explorer/components/QueryMaker'
 import Visualization from 'src/data_explorer/components/Visualization'
 import WriteDataForm from 'src/data_explorer/components/WriteDataForm'
-import Header from 'src/data_explorer/containers/Header'
 import ResizeContainer from 'src/shared/components/ResizeContainer'
 import OverlayTechnologies from 'src/shared/components/OverlayTechnologies'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
+import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import GraphTips from 'src/shared/components/GraphTips'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {VIS_VIEWS, AUTO_GROUP_BY, TEMPLATES} from 'src/shared/constants'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
@@ -93,11 +97,9 @@ export class DataExplorer extends PureComponent<Props, State> {
       autoRefresh,
       queryConfigs,
       manualRefresh,
-      onManualRefresh,
       errorThrownAction,
       writeLineProtocol,
       queryConfigActions,
-      handleChooseAutoRefresh,
     } = this.props
 
     const {showWriteForm} = this.state
@@ -115,13 +117,10 @@ export class DataExplorer extends PureComponent<Props, State> {
             />
           </OverlayTechnologies>
         ) : null}
-        <Header
-          timeRange={timeRange}
-          autoRefresh={autoRefresh}
-          showWriteForm={this.handleOpenWriteData}
-          onChooseTimeRange={this.handleChooseTimeRange}
-          onChooseAutoRefresh={handleChooseAutoRefresh}
-          onManualRefresh={onManualRefresh}
+        <PageHeader
+          title="Data Explorer"
+          fullWidth={true}
+          renderOptions={this.renderHeaderOptions}
         />
         <ResizeContainer
           containerClass="page-contents"
@@ -186,6 +185,41 @@ export class DataExplorer extends PureComponent<Props, State> {
     const {timeRange} = this.props
     return buildRawText(this.activeQuery, timeRange)
   }
+
+  private renderHeaderOptions = (): JSX.Element => {
+    const {
+      timeRange,
+      autoRefresh,
+      onManualRefresh,
+      handleChooseAutoRefresh,
+    } = this.props
+
+    return (
+      <>
+        <GraphTips />
+        <SourceIndicator />
+        <div
+          className="btn btn-sm btn-default"
+          onClick={this.handleOpenWriteData}
+          data-test="write-data-button"
+        >
+          <span className="icon pencil" />
+          Write Data
+        </div>
+        <AutoRefreshDropdown
+          iconName="refresh"
+          selected={autoRefresh}
+          onChoose={handleChooseAutoRefresh}
+          onManualRefresh={onManualRefresh}
+        />
+        <TimeRangeDropdown
+          selected={timeRange}
+          page="DataExplorer"
+          onChooseTimeRange={this.handleChooseTimeRange}
+        />
+      </>
+    )
+  }
 }
 
 const mapStateToProps = state => {
diff --git a/ui/src/data_explorer/containers/Header.tsx b/ui/src/data_explorer/containers/Header.tsx
deleted file mode 100644
index b057535b0..000000000
--- a/ui/src/data_explorer/containers/Header.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {PureComponent} from 'react'
-
-import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
-import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
-import GraphTips from 'src/shared/components/GraphTips'
-import {TimeRange} from 'src/types'
-
-interface Props {
-  onChooseAutoRefresh: () => void
-  onManualRefresh: () => void
-  onChooseTimeRange: (timeRange: TimeRange) => void
-  showWriteForm: () => void
-  autoRefresh: number
-  timeRange: TimeRange
-}
-
-class Header extends PureComponent<Props> {
-  public render() {
-    const {
-      timeRange,
-      autoRefresh,
-      showWriteForm,
-      onManualRefresh,
-      onChooseTimeRange,
-      onChooseAutoRefresh,
-    } = this.props
-    return (
-      <div className="page-header full-width">
-        <div className="page-header--container">
-          <div className="page-header--left">
-            <h1 className="page-header--title">Data Explorer</h1>
-          </div>
-          <div className="page-header--right">
-            <GraphTips />
-            <SourceIndicator />
-            <div
-              className="btn btn-sm btn-default"
-              onClick={showWriteForm}
-              data-test="write-data-button"
-            >
-              <span className="icon pencil" />
-              Write Data
-            </div>
-            <AutoRefreshDropdown
-              iconName="refresh"
-              selected={autoRefresh}
-              onChoose={onChooseAutoRefresh}
-              onManualRefresh={onManualRefresh}
-            />
-            <TimeRangeDropdown
-              selected={timeRange}
-              page="DataExplorer"
-              onChooseTimeRange={onChooseTimeRange}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Header

From e40f172d9ff3ae72e759827bfa0f8eb0cf9cf25d Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:41:12 -0700
Subject: [PATCH 009/100] Implement PageHeader in Flux Editor page

---
 ui/src/flux/components/FluxHeader.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index d83149fd8..5ec4b569c 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -3,6 +3,7 @@ import {connect} from 'react-redux'
 
 import FluxOverlay from 'src/flux/components/FluxOverlay'
 import {OverlayContext} from 'src/shared/components/OverlayTechnology'
+import PageHeader from 'src/shared/components/PageHeader'
 import {
   showOverlay as showOverlayAction,
   ShowOverlay,
@@ -18,18 +19,19 @@ interface Props {
 class FluxHeader extends PureComponent<Props> {
   public render() {
     return (
-      <div className="page-header full-width">
-        <div className="page-header--container">
-          <div className="page-header--left">
-            <h1 className="page-header--title">Flux Editor</h1>
-          </div>
-          <div className="page-header--right">
-            <button onClick={this.overlay} className="btn btn-sm btn-default">
-              Edit Connection
-            </button>
-          </div>
-        </div>
-      </div>
+      <PageHeader
+        title="Flux Editor"
+        fullWidth={true}
+        renderOptions={this.renderOptions}
+      />
+    )
+  }
+
+  private renderOptions = (): JSX.Element => {
+    return (
+      <button onClick={this.overlay} className="btn btn-sm btn-default">
+        Edit Connection
+      </button>
     )
   }
 

From 6b763c6faff52d21ceb474b5b8adc8ac70543f26 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:45:39 -0700
Subject: [PATCH 010/100] Implement PageHeader on dashboards index page

---
 .../dashboards/components/DashboardsHeader.tsx | 18 ------------------
 .../dashboards/containers/DashboardsPage.tsx   | 12 ++++++++++--
 2 files changed, 10 insertions(+), 20 deletions(-)
 delete mode 100644 ui/src/dashboards/components/DashboardsHeader.tsx

diff --git a/ui/src/dashboards/components/DashboardsHeader.tsx b/ui/src/dashboards/components/DashboardsHeader.tsx
deleted file mode 100644
index 2eec2b0be..000000000
--- a/ui/src/dashboards/components/DashboardsHeader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-import SourceIndicator from 'src/shared/components/SourceIndicator'
-
-const DashboardsHeader = (): JSX.Element => (
-  <div className="page-header">
-    <div className="page-header--container">
-      <div className="page-header--left">
-        <h1 className="page-header--title">Dashboards</h1>
-      </div>
-      <div className="page-header--right">
-        <SourceIndicator />
-      </div>
-    </div>
-  </div>
-)
-
-export default DashboardsHeader
diff --git a/ui/src/dashboards/containers/DashboardsPage.tsx b/ui/src/dashboards/containers/DashboardsPage.tsx
index 87878ca9e..75382391d 100644
--- a/ui/src/dashboards/containers/DashboardsPage.tsx
+++ b/ui/src/dashboards/containers/DashboardsPage.tsx
@@ -4,8 +4,9 @@ import {connect} from 'react-redux'
 import download from 'src/external/download'
 import _ from 'lodash'
 
-import DashboardsHeader from 'src/dashboards/components/DashboardsHeader'
 import DashboardsContents from 'src/dashboards/components/DashboardsPageContents'
+import PageHeader from 'src/shared/components/PageHeader'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 import {createDashboard} from 'src/dashboards/apis'
 import {
@@ -54,7 +55,10 @@ class DashboardsPage extends PureComponent<Props> {
 
     return (
       <div className="page">
-        <DashboardsHeader />
+        <PageHeader
+          title="Dashboards"
+          renderOptions={this.renderHeaderOptions}
+        />
         <DashboardsContents
           dashboardLink={dashboardLink}
           dashboards={dashboards}
@@ -69,6 +73,10 @@ class DashboardsPage extends PureComponent<Props> {
     )
   }
 
+  private renderHeaderOptions = (): JSX.Element => {
+    return <SourceIndicator />
+  }
+
   private handleCreateDashboard = async (): Promise<void> => {
     const {
       source: {id},

From a40033263564f4332772ef3b1006fbb833ff0706 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:48:11 -0700
Subject: [PATCH 011/100] Implement PageHeader in status page

---
 ui/src/status/containers/StatusPage.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index 6a6f28505..ce5fecbcc 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.js
@@ -5,6 +5,7 @@ import {connect} from 'react-redux'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import LayoutRenderer from 'shared/components/LayoutRenderer'
+import PageHeader from 'shared/components/PageHeader'
 
 import {fixtureStatusPageCells} from 'src/status/fixtures'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -57,16 +58,11 @@ class StatusPage extends Component {
 
     return (
       <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">Status</h1>
-            </div>
-            <div className="page-header--right">
-              <SourceIndicator />
-            </div>
-          </div>
-        </div>
+        <PageHeader
+          title="Status"
+          fullWidth={true}
+          renderOptions={this.renderHeaderOptions}
+        />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">
             {cells.length ? (
@@ -88,6 +84,10 @@ class StatusPage extends Component {
       </div>
     )
   }
+
+  renderHeaderOptions = () => {
+    return <SourceIndicator />
+  }
 }
 
 const {number, shape, string} = PropTypes

From 3121d665800c2dc48f08de331f0bbf8a84dd6496 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:51:08 -0700
Subject: [PATCH 012/100] Implement PageHeader on manage tasks page

---
 .../containers/KapacitorRulesPage.tsx         | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 4749474a6..ddd577b37 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -10,6 +10,7 @@ import KapacitorRules from 'src/kapacitor/components/KapacitorRules'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {Source, Kapacitor, AlertRule} from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -89,20 +90,7 @@ interface PageContentsProps {
 
 const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
-    <div className="page-header">
-      <div className="page-header--container">
-        <div className="page-header--left">
-          <h1 className="page-header--title">Manage Tasks</h1>
-        </div>
-        <div className="page-header--right">
-          <QuestionMarkTooltip
-            tipID="manage-tasks--tooltip"
-            tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
-          />
-          <SourceIndicator />
-        </div>
-      </div>
-    </div>
+    <PageHeader title="Manage Tasks" renderOptions={renderHeaderOptions} />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
@@ -113,6 +101,18 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
+const renderHeaderOptions = (): JSX.Element => {
+  return (
+    <>
+      <QuestionMarkTooltip
+        tipID="manage-tasks--tooltip"
+        tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
+      />
+      <SourceIndicator />{' '}
+    </>
+  )
+}
+
 const mapStateToProps = state => {
   return {
     rules: Object.values(state.rules),

From c343e9995d944bacf11a062c4f2875c898b351c9 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 13:54:37 -0700
Subject: [PATCH 013/100] Implement PageHeader on alert history page

---
 ui/src/alerts/containers/AlertsApp.tsx | 35 +++++++++++++++-----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 5f0dcf086..6ed158671 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -4,6 +4,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 import AlertsTable from 'src/alerts/components/AlertsTable'
 import NoKapacitorError from 'src/shared/components/NoKapacitorError'
 import CustomTimeRangeDropdown from 'src/shared/components/CustomTimeRangeDropdown'
+import PageHeader from 'src/shared/components/PageHeader'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {getAlerts} from 'src/alerts/apis'
@@ -85,7 +86,7 @@ class AlertsApp extends PureComponent<Props, State> {
   }
   public render() {
     const {isWidget, source} = this.props
-    const {loading, timeRange} = this.state
+    const {loading} = this.state
 
     if (loading || !source) {
       return <div className="page-spinner" />
@@ -95,20 +96,10 @@ class AlertsApp extends PureComponent<Props, State> {
       this.renderSubComponents()
     ) : (
       <div className="page alert-history-page">
-        <div className="page-header">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">Alert History</h1>
-            </div>
-            <div className="page-header--right">
-              <SourceIndicator />
-              <CustomTimeRangeDropdown
-                onApplyTimeRange={this.handleApplyTime}
-                timeRange={timeRange}
-              />
-            </div>
-          </div>
-        </div>
+        <PageHeader
+          title="Alert History"
+          renderOptions={this.renderHeaderOptions}
+        />
         <div className="page-contents">
           <div className="container-fluid">
             <div className="row">
@@ -120,6 +111,20 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
+  private renderHeaderOptions = (): JSX.Element => {
+    const {timeRange} = this.state
+
+    return (
+      <>
+        <SourceIndicator />
+        <CustomTimeRangeDropdown
+          onApplyTimeRange={this.handleApplyTime}
+          timeRange={timeRange}
+        />
+      </>
+    )
+  }
+
   private fetchAlerts = (): void => {
     getAlerts(
       this.props.source.links.proxy,

From 56d5699e1057a4d476e6ad58e3df662a14967532 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:05:43 -0700
Subject: [PATCH 014/100] Implement PageHeader in logs viewer page

---
 ui/src/logs/components/LogViewerHeader.tsx | 72 +++++++++++++---------
 ui/src/style/pages/logs-viewer.scss        |  6 +-
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index 7b0cd834b..8713c2504 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -3,6 +3,8 @@ import React, {PureComponent} from 'react'
 import {Source, Namespace} from 'src/types'
 import classnames from 'classnames'
 import Dropdown from 'src/shared/components/Dropdown'
+import PageHeader from 'src/shared/components/PageHeader'
+import PageHeaderTitle from 'src/shared/components/PageHeaderTitle'
 import TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown'
 
 import {TimeRange} from 'src/types'
@@ -27,37 +29,47 @@ interface Props {
 
 class LogViewerHeader extends PureComponent<Props> {
   public render(): JSX.Element {
-    const {timeRange} = this.props
     return (
-      <div className="page-header full-width">
-        <div className="page-header--container">
-          <div className="page-header--left">
-            {this.status}
-            <h1 className="page-header--title logs-viewer-header-title">
-              Log Viewer
-            </h1>
-          </div>
-          <div className="page-header--right">
-            <Dropdown
-              className="dropdown-300"
-              items={this.sourceDropDownItems}
-              selected={this.selectedSource}
-              onChoose={this.handleChooseSource}
-            />
-            <Dropdown
-              className="dropdown-180"
-              iconName="disks"
-              items={this.namespaceDropDownItems}
-              selected={this.selectedNamespace}
-              onChoose={this.handleChooseNamespace}
-            />
-            <TimeRangeDropdown
-              onChooseTimeRange={this.handleChooseTimeRange}
-              selected={timeRange}
-            />
-          </div>
-        </div>
-      </div>
+      <PageHeader
+        renderTitle={this.renderHeaderTitle}
+        fullWidth={true}
+        renderOptions={this.renderHeaderOptions}
+      />
+    )
+  }
+
+  private renderHeaderTitle = (): JSX.Element => {
+    return (
+      <>
+        {this.status}
+        <PageHeaderTitle title="Logs Viewer" />
+      </>
+    )
+  }
+
+  private renderHeaderOptions = (): JSX.Element => {
+    const {timeRange} = this.props
+
+    return (
+      <>
+        <Dropdown
+          className="dropdown-300"
+          items={this.sourceDropDownItems}
+          selected={this.selectedSource}
+          onChoose={this.handleChooseSource}
+        />
+        <Dropdown
+          className="dropdown-180"
+          iconName="disks"
+          items={this.namespaceDropDownItems}
+          selected={this.selectedNamespace}
+          onChoose={this.handleChooseNamespace}
+        />
+        <TimeRangeDropdown
+          onChooseTimeRange={this.handleChooseTimeRange}
+          selected={timeRange}
+        />
+      </>
     )
   }
 
diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss
index 811007126..ded203e53 100644
--- a/ui/src/style/pages/logs-viewer.scss
+++ b/ui/src/style/pages/logs-viewer.scss
@@ -16,10 +16,6 @@ $logs-viewer-gutter: 60px;
   flex-wrap: nowrap;
 }
 
-.logs-viewer-header-title {
-  margin-left: 10px;
-}
-
 .logs-viewer--graph-container {
   padding: 22px ($logs-viewer-gutter - 16px) 10px ($logs-viewer-gutter - 16px);
   height: $logs-viewer-graph-height;
@@ -268,6 +264,8 @@ $logs-viewer-gutter: 60px;
     width: 26px;
     justify-content: center;
   }
+  
+  margin-right: 10px;
 }
 
 .message--cell {

From 3659197fceffc21d46a3346558831c59676a9f1a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:09:58 -0700
Subject: [PATCH 015/100] Add option to show SourceIndicator in PageHeader

Trying to keep this thing DRY, since the source indicator is present on
a lot of pages
---
 ui/src/shared/components/PageHeader.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index e75e0c5b9..e5cecd423 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,19 +1,22 @@
 import React, {SFC, ReactElement} from 'react'
 import classnames from 'classnames'
 import Title from 'src/shared/components/PageHeaderTitle'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 interface Props {
   title?: string
   renderTitle?: () => ReactElement<any>
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
+  sourceIndicator?: boolean
 }
 
 const PageHeader: SFC<Props> = ({
   title,
+  fullWidth,
   renderTitle,
   renderOptions,
-  fullWidth,
+  sourceIndicator,
 }) => {
   if (!title && !renderTitle) {
     console.error('PageHeader requires either title or RenderTitle props')
@@ -30,9 +33,10 @@ const PageHeader: SFC<Props> = ({
     <div className={className}>
       <div className="page-header--container">
         <div className="page-header--left">{renderLeft()}</div>
-        {renderOptions && (
-          <div className="page-header--right">{renderOptions()}</div>
-        )}
+        <div className="page-header--right">
+          {sourceIndicator && <SourceIndicator />}
+          {renderOptions && renderOptions()}
+        </div>
       </div>
     </div>
   )

From 29994b19478d0b93724dc14e44e40111a8dbca3c Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:14:27 -0700
Subject: [PATCH 016/100] Stop passing SourceIndicator as part of page header
 options render prop

---
 ui/src/alerts/containers/AlertsApp.tsx        | 13 +++++--------
 .../dashboards/containers/DashboardsPage.tsx  | 10 +---------
 .../data_explorer/containers/DataExplorer.tsx |  3 +--
 ui/src/hosts/containers/HostsPage.js          | 19 ++++++++-----------
 .../containers/KapacitorRulesPage.tsx         | 18 +++++++++---------
 5 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 6ed158671..a4ac349a3 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react'
 
-import SourceIndicator from 'src/shared/components/SourceIndicator'
 import AlertsTable from 'src/alerts/components/AlertsTable'
 import NoKapacitorError from 'src/shared/components/NoKapacitorError'
 import CustomTimeRangeDropdown from 'src/shared/components/CustomTimeRangeDropdown'
@@ -99,6 +98,7 @@ class AlertsApp extends PureComponent<Props, State> {
         <PageHeader
           title="Alert History"
           renderOptions={this.renderHeaderOptions}
+          sourceIndicator={true}
         />
         <div className="page-contents">
           <div className="container-fluid">
@@ -115,13 +115,10 @@ class AlertsApp extends PureComponent<Props, State> {
     const {timeRange} = this.state
 
     return (
-      <>
-        <SourceIndicator />
-        <CustomTimeRangeDropdown
-          onApplyTimeRange={this.handleApplyTime}
-          timeRange={timeRange}
-        />
-      </>
+      <CustomTimeRangeDropdown
+        onApplyTimeRange={this.handleApplyTime}
+        timeRange={timeRange}
+      />
     )
   }
 
diff --git a/ui/src/dashboards/containers/DashboardsPage.tsx b/ui/src/dashboards/containers/DashboardsPage.tsx
index 75382391d..bf73a16a2 100644
--- a/ui/src/dashboards/containers/DashboardsPage.tsx
+++ b/ui/src/dashboards/containers/DashboardsPage.tsx
@@ -6,7 +6,6 @@ import _ from 'lodash'
 
 import DashboardsContents from 'src/dashboards/components/DashboardsPageContents'
 import PageHeader from 'src/shared/components/PageHeader'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 import {createDashboard} from 'src/dashboards/apis'
 import {
@@ -55,10 +54,7 @@ class DashboardsPage extends PureComponent<Props> {
 
     return (
       <div className="page">
-        <PageHeader
-          title="Dashboards"
-          renderOptions={this.renderHeaderOptions}
-        />
+        <PageHeader title="Dashboards" sourceIndicator={true} />
         <DashboardsContents
           dashboardLink={dashboardLink}
           dashboards={dashboards}
@@ -73,10 +69,6 @@ class DashboardsPage extends PureComponent<Props> {
     )
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
-    return <SourceIndicator />
-  }
-
   private handleCreateDashboard = async (): Promise<void> => {
     const {
       source: {id},
diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index 9af920f13..328bb45dd 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@@ -17,7 +17,6 @@ import OverlayTechnologies from 'src/shared/components/OverlayTechnologies'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
 import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
 import GraphTips from 'src/shared/components/GraphTips'
 import PageHeader from 'src/shared/components/PageHeader'
 
@@ -121,6 +120,7 @@ export class DataExplorer extends PureComponent<Props, State> {
           title="Data Explorer"
           fullWidth={true}
           renderOptions={this.renderHeaderOptions}
+          sourceIndicator={true}
         />
         <ResizeContainer
           containerClass="page-contents"
@@ -197,7 +197,6 @@ export class DataExplorer extends PureComponent<Props, State> {
     return (
       <>
         <GraphTips />
-        <SourceIndicator />
         <div
           className="btn btn-sm btn-default"
           onClick={this.handleOpenWriteData}
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index 18debc9b3..e0ef33d7c 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/ui/src/hosts/containers/HostsPage.js
@@ -1,11 +1,10 @@
-import React, {Fragment, Component} from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import _ from 'lodash'
 
 import HostsTable from 'src/hosts/components/HostsTable'
-import SourceIndicator from 'shared/components/SourceIndicator'
 import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
 import PageHeader from 'src/shared/components/PageHeader'
@@ -118,6 +117,7 @@ export class HostsPage extends Component {
         <PageHeader
           title="Host List"
           renderOptions={this.renderHeaderOptions}
+          sourceIndicator={true}
         />
         <div className="page-contents">
           <div className="container-fluid">
@@ -141,15 +141,12 @@ export class HostsPage extends Component {
     const {autoRefresh, onChooseAutoRefresh, onManualRefresh} = this.props
 
     return (
-      <Fragment>
-        <SourceIndicator />
-        <AutoRefreshDropdown
-          iconName="refresh"
-          selected={autoRefresh}
-          onChoose={onChooseAutoRefresh}
-          onManualRefresh={onManualRefresh}
-        />
-      </Fragment>
+      <AutoRefreshDropdown
+        iconName="refresh"
+        selected={autoRefresh}
+        onChoose={onChooseAutoRefresh}
+        onManualRefresh={onManualRefresh}
+      />
     )
   }
 
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index ddd577b37..4ac316d47 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -7,7 +7,6 @@ import {getActiveKapacitor} from 'src/shared/apis'
 import * as kapacitorActionCreators from '../actions/view'
 
 import KapacitorRules from 'src/kapacitor/components/KapacitorRules'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
 import PageHeader from 'src/shared/components/PageHeader'
@@ -90,7 +89,11 @@ interface PageContentsProps {
 
 const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
-    <PageHeader title="Manage Tasks" renderOptions={renderHeaderOptions} />
+    <PageHeader
+      title="Manage Tasks"
+      renderOptions={renderHeaderOptions}
+      sourceIndicator={true}
+    />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
@@ -103,13 +106,10 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
 
 const renderHeaderOptions = (): JSX.Element => {
   return (
-    <>
-      <QuestionMarkTooltip
-        tipID="manage-tasks--tooltip"
-        tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
-      />
-      <SourceIndicator />{' '}
-    </>
+    <QuestionMarkTooltip
+      tipID="manage-tasks--tooltip"
+      tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
+    />
   )
 }
 

From 7e5d9fdeed1d26277d9ef5d456d49473f57190f3 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:15:43 -0700
Subject: [PATCH 017/100] Implement PageHeader in influxdb admin page

---
 ui/src/admin/containers/AdminInfluxDBPage.js | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js
index 02d59569f..e61754671 100644
--- a/ui/src/admin/containers/AdminInfluxDBPage.js
+++ b/ui/src/admin/containers/AdminInfluxDBPage.js
@@ -29,7 +29,7 @@ import UsersTable from 'src/admin/components/UsersTable'
 import RolesTable from 'src/admin/components/RolesTable'
 import QueriesPage from 'src/admin/containers/QueriesPage'
 import DatabaseManagerPage from 'src/admin/containers/DatabaseManagerPage'
-import SourceIndicator from 'shared/components/SourceIndicator'
+import PageHeader from 'shared/components/PageHeader'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import SubSections from 'shared/components/SubSections'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -223,16 +223,7 @@ class AdminInfluxDBPage extends Component {
 
     return (
       <div className="page">
-        <div className="page-header">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">InfluxDB Admin</h1>
-            </div>
-            <div className="page-header--right">
-              <SourceIndicator />
-            </div>
-          </div>
-        </div>
+        <PageHeader title="InfluxDB Admin" sourceIndicator={true} />
         <FancyScrollbar className="page-contents">
           {users ? (
             <div className="container-fluid">

From 2b48c44779da920d4f27982dc3fd21db2adcfec5 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 13 Jun 2018 14:15:53 -0700
Subject: [PATCH 018/100] Refactor cancelable promise result into union type

Instead of returning objects with a boolean isCanceled property we
preferred to introduce a new custom error type for canceled promises.

Co-authored-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/shared/apis/flux/metaQueries.ts | 30 +++++++++++---------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/ui/src/shared/apis/flux/metaQueries.ts b/ui/src/shared/apis/flux/metaQueries.ts
index ec479de7e..5b4d46111 100644
--- a/ui/src/shared/apis/flux/metaQueries.ts
+++ b/ui/src/shared/apis/flux/metaQueries.ts
@@ -113,43 +113,39 @@ const tagsetFilter = (filter: SchemaFilter[]): string => {
   return `|> filter(fn: (r) => ${predicates.join(' and ')} )`
 }
 
-interface CanceledResolvedValue<T> {
-  isCanceled: boolean
-  value: T | null
-}
-
-interface CanceledRejectedValue {
-  isCanceled: boolean
-  error: Error | null
-}
-
-type PossiblyCanceledValue<T> = CanceledResolvedValue<T> | CanceledRejectedValue
+type CancelablePromiseResult<T> = T | CanceledPromiseError | Error
 
 interface WrappedCancelablePromise<T> {
-  promise: Promise<PossiblyCanceledValue<T>>
+  promise: Promise<CancelablePromiseResult<T>>
   cancel: () => void
 }
 
+class CanceledPromiseError extends Error {
+  constructor() {
+    super('Canceled Promise')
+  }
+}
+
 export const makeCancelable = <T>(
   promise: Promise<T>
 ): WrappedCancelablePromise<T> => {
   let isCanceled = false
 
-  const wrappedPromise = new Promise<PossiblyCanceledValue<T>>(
+  const wrappedPromise = new Promise<CancelablePromiseResult<T>>(
     async (resolve, reject) => {
       try {
         const value = await promise
 
         if (isCanceled) {
-          reject({isCanceled, value: null})
+          reject(new CanceledPromiseError())
         } else {
-          resolve({isCanceled, value})
+          resolve(value)
         }
       } catch (error) {
         if (isCanceled) {
-          reject({isCanceled, error: null})
+          reject(new CanceledPromiseError())
         } else {
-          reject({isCanceled, error})
+          reject(error)
         }
       }
     }

From c43e6b7dbd31a1d0eb655065c039de81c97836d4 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:19:15 -0700
Subject: [PATCH 019/100] Implement PageHeader in manage sources page

---
 ui/src/sources/containers/ManageSources.tsx | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/ui/src/sources/containers/ManageSources.tsx b/ui/src/sources/containers/ManageSources.tsx
index ae1cf2f7d..e11ff1236 100644
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@@ -6,7 +6,7 @@ import * as actions from 'src/shared/actions/sources'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
+import PageHeader from 'src/shared/components/PageHeader'
 import InfluxTable from 'src/sources/components/InfluxTable'
 
 import {
@@ -49,16 +49,7 @@ class ManageSources extends PureComponent<Props> {
 
     return (
       <div className="page" id="manage-sources-page">
-        <div className="page-header">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">Configuration</h1>
-            </div>
-            <div className="page-header--right">
-              <SourceIndicator />
-            </div>
-          </div>
-        </div>
+        <PageHeader title="Configuration" sourceIndicator={true} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <InfluxTable

From f563a2c014841963ecc3dcefb544e28019529be7 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 14:34:59 -0700
Subject: [PATCH 020/100] Fix failing test

Might have to find a better way to ensure these subcomponents exist now
that they are being passed in as render props
---
 ui/test/hosts/containers/HostsPage.test.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ui/test/hosts/containers/HostsPage.test.tsx b/ui/test/hosts/containers/HostsPage.test.tsx
index 0474bebc1..92a15a806 100644
--- a/ui/test/hosts/containers/HostsPage.test.tsx
+++ b/ui/test/hosts/containers/HostsPage.test.tsx
@@ -3,8 +3,7 @@ import {shallow} from 'enzyme'
 
 import {HostsPage} from 'src/hosts/containers/HostsPage'
 import HostsTable from 'src/hosts/components/HostsTable'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
-import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {source} from 'test/resources'
 
@@ -33,12 +32,10 @@ describe('Hosts.Containers.HostsPage', () => {
   describe('rendering', () => {
     it('renders all children components', () => {
       const {wrapper} = setup()
-      const sourceIndicator = wrapper.find(SourceIndicator)
-      const autoRefreshDropdown = wrapper.find(AutoRefreshDropdown)
+      const pageHeader = wrapper.find(PageHeader)
       const hostsTable = wrapper.find(HostsTable)
 
-      expect(sourceIndicator.exists()).toBe(true)
-      expect(autoRefreshDropdown.exists()).toBe(true)
+      expect(pageHeader.exists()).toBe(true)
       expect(hostsTable.exists()).toBe(true)
     })
 

From 2de09469c2cb40c4e2a79d5f06c9a73ad1521d4b Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 13 Jun 2018 15:56:20 -0700
Subject: [PATCH 021/100] Extract types and utils for canceling promises

Simplifies canceled promise generic type to utilize a single parameter.
Reject messages for promises can be type any.

Co-authored-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/shared/apis/flux/metaQueries.ts | 46 --------------------------
 ui/src/types/promises.ts               |  4 +++
 ui/src/utils/promises.ts               | 32 ++++++++++++++++++
 3 files changed, 36 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/types/promises.ts
 create mode 100644 ui/src/utils/promises.ts

diff --git a/ui/src/shared/apis/flux/metaQueries.ts b/ui/src/shared/apis/flux/metaQueries.ts
index 5b4d46111..af326241c 100644
--- a/ui/src/shared/apis/flux/metaQueries.ts
+++ b/ui/src/shared/apis/flux/metaQueries.ts
@@ -113,52 +113,6 @@ const tagsetFilter = (filter: SchemaFilter[]): string => {
   return `|> filter(fn: (r) => ${predicates.join(' and ')} )`
 }
 
-type CancelablePromiseResult<T> = T | CanceledPromiseError | Error
-
-interface WrappedCancelablePromise<T> {
-  promise: Promise<CancelablePromiseResult<T>>
-  cancel: () => void
-}
-
-class CanceledPromiseError extends Error {
-  constructor() {
-    super('Canceled Promise')
-  }
-}
-
-export const makeCancelable = <T>(
-  promise: Promise<T>
-): WrappedCancelablePromise<T> => {
-  let isCanceled = false
-
-  const wrappedPromise = new Promise<CancelablePromiseResult<T>>(
-    async (resolve, reject) => {
-      try {
-        const value = await promise
-
-        if (isCanceled) {
-          reject(new CanceledPromiseError())
-        } else {
-          resolve(value)
-        }
-      } catch (error) {
-        if (isCanceled) {
-          reject(new CanceledPromiseError())
-        } else {
-          reject(error)
-        }
-      }
-    }
-  )
-
-  return {
-    promise: wrappedPromise,
-    cancel() {
-      isCanceled = true
-    },
-  }
-}
-
 const proxy = async (service: Service, script: string) => {
   const and = encodeURIComponent('&')
   const mark = encodeURIComponent('?')
diff --git a/ui/src/types/promises.ts b/ui/src/types/promises.ts
new file mode 100644
index 000000000..765e1e388
--- /dev/null
+++ b/ui/src/types/promises.ts
@@ -0,0 +1,4 @@
+export interface WrappedCancelablePromise<T> {
+  promise: Promise<T>
+  cancel: () => void
+}
diff --git a/ui/src/utils/promises.ts b/ui/src/utils/promises.ts
new file mode 100644
index 000000000..4987984ad
--- /dev/null
+++ b/ui/src/utils/promises.ts
@@ -0,0 +1,32 @@
+import {WrappedCancelablePromise} from 'src/types/promises'
+
+export const makeCancelable = <T>(
+  promise: Promise<T>
+): WrappedCancelablePromise<T> => {
+  let isCanceled = false
+
+  const wrappedPromise = new Promise<T>(async (resolve, reject) => {
+    try {
+      const value = await promise
+
+      if (isCanceled) {
+        reject({isCanceled})
+      } else {
+        resolve(value)
+      }
+    } catch (error) {
+      if (isCanceled) {
+        reject({isCanceled})
+      } else {
+        reject(error)
+      }
+    }
+  })
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      isCanceled = true
+    },
+  }
+}

From 6804bbcb4c11a3302065541dc10bf8e0e68cf791 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 13 Jun 2018 16:04:25 -0700
Subject: [PATCH 022/100] Cancel fetch response promise on FilterArgs unmount

Co-authored-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/flux/components/FilterArgs.tsx | 31 ++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/ui/src/flux/components/FilterArgs.tsx b/ui/src/flux/components/FilterArgs.tsx
index 65b281c35..2dcf81924 100644
--- a/ui/src/flux/components/FilterArgs.tsx
+++ b/ui/src/flux/components/FilterArgs.tsx
@@ -5,9 +5,11 @@ import {tagKeys as fetchTagKeys} from 'src/shared/apis/flux/metaQueries'
 import parseValuesColumn from 'src/shared/parsing/flux/values'
 import FilterTagList from 'src/flux/components/FilterTagList'
 import Walker from 'src/flux/ast/walker'
+import {makeCancelable} from 'src/utils/promises'
 
 import {Service} from 'src/types'
 import {Links, OnChangeArg, Func, FilterNode} from 'src/types/flux'
+import {WrappedCancelablePromise} from 'src/types/promises'
 
 interface Props {
   links: Links
@@ -28,6 +30,8 @@ interface State {
 }
 
 class FilterArgs extends PureComponent<Props, State> {
+  private fetchTagKeysResponse?: WrappedCancelablePromise<string>
+
   constructor(props) {
     super(props)
     this.state = {
@@ -52,15 +56,24 @@ class FilterArgs extends PureComponent<Props, State> {
   }
 
   public async componentDidMount() {
-    const {db, service} = this.props
-
     try {
       this.convertStringToNodes()
-      const response = await fetchTagKeys(service, db, [])
+      const response = await this.getTagKeys()
       const tagKeys = parseValuesColumn(response)
-      this.setState({tagKeys})
+
+      this.setState({
+        tagKeys,
+      })
     } catch (error) {
-      console.error(error)
+      if (!error.isCanceled) {
+        console.error(error)
+      }
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.fetchTagKeysResponse) {
+      this.fetchTagKeysResponse.cancel()
     }
   }
 
@@ -91,6 +104,14 @@ class FilterArgs extends PureComponent<Props, State> {
       />
     )
   }
+
+  private getTagKeys(): Promise<string> {
+    const {db, service} = this.props
+
+    this.fetchTagKeysResponse = makeCancelable(fetchTagKeys(service, db, []))
+
+    return this.fetchTagKeysResponse.promise
+  }
 }
 
 const mapStateToProps = ({links}) => {

From bea25481240338a27364f7633689664377f7a9c9 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 15 Jun 2018 09:18:52 -0700
Subject: [PATCH 023/100] Introduce delete body

---
 ui/src/flux/components/BodyBuilder.tsx       | 13 ++++++++++--
 ui/src/flux/components/BodyDelete.tsx        | 22 ++++++++++++++++++++
 ui/src/flux/components/TimeMachine.tsx       | 12 ++++++++++-
 ui/src/flux/constants/ast.ts                 | 16 ++++++++++++++
 ui/src/flux/constants/index.ts               |  3 ++-
 ui/src/flux/containers/FluxPage.tsx          | 13 ++++++++++--
 ui/src/types/flux.ts                         |  1 +
 ui/test/flux/components/TimeMachine.test.tsx |  1 +
 8 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/flux/components/BodyDelete.tsx

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index f182dd9f6..612fcb936 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -5,6 +5,7 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import ExpressionNode from 'src/flux/components/ExpressionNode'
 import VariableName from 'src/flux/components/VariableName'
 import FuncSelector from 'src/flux/components/FuncSelector'
+import BodyDelete from 'src/flux/components/BodyDelete'
 import {funcNames} from 'src/flux/constants'
 
 import {Service} from 'src/types'
@@ -16,6 +17,7 @@ interface Props {
   suggestions: Suggestion[]
   onAppendFrom: () => void
   onAppendJoin: () => void
+  onDeleteBody: (bodyID: string) => void
 }
 
 interface Body extends FlatBody {
@@ -24,12 +26,17 @@ interface Body extends FlatBody {
 
 class BodyBuilder extends PureComponent<Props> {
   public render() {
-    const bodybuilder = this.props.body.map((b, i) => {
+    const {body, onDeleteBody} = this.props
+
+    const bodybuilder = body.map((b, i) => {
       if (b.declarations.length) {
-        return b.declarations.map(d => {
+        return b.declarations.map((d, dIndex) => {
           if (d.funcs) {
             return (
               <div className="declaration" key={i}>
+                {!dIndex && (
+                  <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
+                )}
                 <VariableName name={d.name} assignedToQuery={true} />
                 <ExpressionNode
                   bodyID={b.id}
@@ -45,6 +52,7 @@ class BodyBuilder extends PureComponent<Props> {
 
           return (
             <div className="declaration" key={i}>
+              <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
               <VariableName name={b.source} assignedToQuery={false} />
             </div>
           )
@@ -53,6 +61,7 @@ class BodyBuilder extends PureComponent<Props> {
 
       return (
         <div className="declaration" key={i}>
+          <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
           <ExpressionNode
             bodyID={b.id}
             funcs={b.funcs}
diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx
new file mode 100644
index 000000000..46bf07b78
--- /dev/null
+++ b/ui/src/flux/components/BodyDelete.tsx
@@ -0,0 +1,22 @@
+import React, {PureComponent} from 'react'
+
+interface Props {
+  bodyID: string
+  onDeleteBody: (bodyID: string) => void
+}
+
+class BodyDelete extends PureComponent<Props> {
+  public render() {
+    return (
+      <button className="btn btn-xs btn-danger" onClick={this.handleDelete}>
+        Delete
+      </button>
+    )
+  }
+
+  private handleDelete = (): void => {
+    this.props.onDeleteBody(this.props.bodyID)
+  }
+}
+
+export default BodyDelete
diff --git a/ui/src/flux/components/TimeMachine.tsx b/ui/src/flux/components/TimeMachine.tsx
index b92368654..45556135f 100644
--- a/ui/src/flux/components/TimeMachine.tsx
+++ b/ui/src/flux/components/TimeMachine.tsx
@@ -7,6 +7,7 @@ import {
   Suggestion,
   OnChangeScript,
   OnSubmitScript,
+  OnDeleteBody,
   FlatBody,
   ScriptStatus,
 } from 'src/types/flux'
@@ -22,6 +23,7 @@ interface Props {
   status: ScriptStatus
   suggestions: Suggestion[]
   onChangeScript: OnChangeScript
+  onDeleteBody: OnDeleteBody
   onSubmitScript: OnSubmitScript
   onAppendFrom: () => void
   onAppendJoin: () => void
@@ -63,7 +65,14 @@ class TimeMachine extends PureComponent<Props> {
   }
 
   private get builder() {
-    const {body, service, suggestions, onAppendFrom, onAppendJoin} = this.props
+    const {
+      body,
+      service,
+      suggestions,
+      onAppendFrom,
+      onDeleteBody,
+      onAppendJoin,
+    } = this.props
 
     return {
       name: 'Build',
@@ -75,6 +84,7 @@ class TimeMachine extends PureComponent<Props> {
           body={body}
           service={service}
           suggestions={suggestions}
+          onDeleteBody={onDeleteBody}
           onAppendFrom={onAppendFrom}
           onAppendJoin={onAppendJoin}
         />
diff --git a/ui/src/flux/constants/ast.ts b/ui/src/flux/constants/ast.ts
index e542d8b43..30822212a 100644
--- a/ui/src/flux/constants/ast.ts
+++ b/ui/src/flux/constants/ast.ts
@@ -1,3 +1,19 @@
+export const emptyAST = {
+  type: 'Program',
+  location: {
+    start: {
+      line: 1,
+      column: 1,
+    },
+    end: {
+      line: 1,
+      column: 1,
+    },
+    source: '',
+  },
+  body: [],
+}
+
 export const ast = {
   type: 'File',
   start: 0,
diff --git a/ui/src/flux/constants/index.ts b/ui/src/flux/constants/index.ts
index 81695e650..b81ebaa08 100644
--- a/ui/src/flux/constants/index.ts
+++ b/ui/src/flux/constants/index.ts
@@ -1,4 +1,4 @@
-import {ast} from 'src/flux/constants/ast'
+import {ast, emptyAST} from 'src/flux/constants/ast'
 import * as editor from 'src/flux/constants/editor'
 import * as argTypes from 'src/flux/constants/argumentTypes'
 import * as funcNames from 'src/flux/constants/funcNames'
@@ -10,6 +10,7 @@ const MAX_RESPONSE_BYTES = 1e7 // 10 MB
 
 export {
   ast,
+  emptyAST,
   funcNames,
   argTypes,
   editor,
diff --git a/ui/src/flux/containers/FluxPage.tsx b/ui/src/flux/containers/FluxPage.tsx
index 11b9ded99..24be29632 100644
--- a/ui/src/flux/containers/FluxPage.tsx
+++ b/ui/src/flux/containers/FluxPage.tsx
@@ -15,7 +15,7 @@ import {UpdateScript} from 'src/flux/actions'
 
 import {bodyNodes} from 'src/flux/helpers'
 import {getSuggestions, getAST, getTimeSeries} from 'src/flux/apis'
-import {builder, argTypes} from 'src/flux/constants'
+import {builder, argTypes, emptyAST} from 'src/flux/constants'
 
 import {Source, Service, Notification, FluxTable} from 'src/types'
 import {
@@ -114,6 +114,7 @@ export class FluxPage extends PureComponent<Props, State> {
               onAppendJoin={this.handleAppendJoin}
               onChangeScript={this.handleChangeScript}
               onSubmitScript={this.handleSubmitScript}
+              onDeleteBody={this.handleDeleteBody}
             />
           </div>
         </KeyboardShortcuts>
@@ -331,6 +332,13 @@ export class FluxPage extends PureComponent<Props, State> {
     this.getASTResponse(script)
   }
 
+  private handleDeleteBody = (bodyID: string): void => {
+    const newBody = this.state.body.filter(b => b.id !== bodyID)
+    const script = this.getBodyToScript(newBody)
+
+    this.getASTResponse(script)
+  }
+
   private handleScriptUpToYield = (
     bodyID: string,
     declarationID: string,
@@ -601,7 +609,8 @@ export class FluxPage extends PureComponent<Props, State> {
     const {links} = this.props
 
     if (!script) {
-      return
+      this.props.updateScript(script)
+      return this.setState({ast: emptyAST, body: []})
     }
 
     try {
diff --git a/ui/src/types/flux.ts b/ui/src/types/flux.ts
index 88014180c..d1756c6c6 100644
--- a/ui/src/types/flux.ts
+++ b/ui/src/types/flux.ts
@@ -21,6 +21,7 @@ export type ScriptUpToYield = (
   yieldNodeIndex: number,
   isYieldable: boolean
 ) => string
+export type OnDeleteBody = (bodyID: string) => void
 
 export interface ScriptStatus {
   type: string
diff --git a/ui/test/flux/components/TimeMachine.test.tsx b/ui/test/flux/components/TimeMachine.test.tsx
index f701c5cfa..2fa66c20a 100644
--- a/ui/test/flux/components/TimeMachine.test.tsx
+++ b/ui/test/flux/components/TimeMachine.test.tsx
@@ -15,6 +15,7 @@ const setup = () => {
     onValidate: () => {},
     onAppendFrom: () => {},
     onAppendJoin: () => {},
+    onDeleteBody: () => {},
     status: {type: '', text: ''},
   }
 

From b9d1424b9dee2ddaee5b30b167f025ef9464a064 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:24:27 -0700
Subject: [PATCH 024/100] Add optional prop for tooltip position

---
 ui/src/shared/components/ConfirmButton.tsx | 42 ++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx
index c211b3990..36549ab4c 100644
--- a/ui/src/shared/components/ConfirmButton.tsx
+++ b/ui/src/shared/components/ConfirmButton.tsx
@@ -2,6 +2,8 @@ import React, {PureComponent} from 'react'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+type Position = 'top' | 'bottom' | 'left' | 'right'
+
 interface Props {
   text?: string
   confirmText?: string
@@ -12,6 +14,7 @@ interface Props {
   icon?: string
   disabled?: boolean
   customClass?: string
+  position?: Position
 }
 
 interface State {
@@ -47,10 +50,11 @@ class ConfirmButton extends PureComponent<Props, State> {
           className={this.className}
           onClick={this.handleButtonClick}
           ref={r => (this.buttonDiv = r)}
+          title={confirmText}
         >
           {icon && <span className={`icon ${icon}`} />}
           {text && text}
-          <div className={`confirm-button--tooltip ${this.calculatedPosition}`}>
+          <div className={this.tooltipClassName}>
             <div
               className="confirm-button--confirmation"
               onClick={this.handleConfirmClick}
@@ -64,18 +68,6 @@ class ConfirmButton extends PureComponent<Props, State> {
     )
   }
 
-  private get className() {
-    const {type, size, square, disabled, customClass} = this.props
-    const {expanded} = this.state
-
-    const customClassString = customClass ? ` ${customClass}` : ''
-    const squareString = square ? ' btn-square' : ''
-    const expandedString = expanded ? ' active' : ''
-    const disabledString = disabled ? ' disabled' : ''
-
-    return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
-  }
-
   private handleButtonClick = () => {
     if (this.props.disabled) {
       return
@@ -92,9 +84,23 @@ class ConfirmButton extends PureComponent<Props, State> {
     this.setState({expanded: false})
   }
 
-  private get calculatedPosition() {
-    if (!this.buttonDiv || !this.tooltipDiv) {
-      return ''
+  private get className(): string {
+    const {type, size, square, disabled, customClass} = this.props
+    const {expanded} = this.state
+
+    const customClassString = customClass ? ` ${customClass}` : ''
+    const squareString = square ? ' btn-square' : ''
+    const expandedString = expanded ? ' active' : ''
+    const disabledString = disabled ? ' disabled' : ''
+
+    return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
+  }
+
+  private get tooltipClassName(): string {
+    const {position} = this.props
+
+    if (position) {
+      return `confirm-button--tooltip ${position}`
     }
 
     const windowWidth = window.innerWidth
@@ -104,10 +110,10 @@ class ConfirmButton extends PureComponent<Props, State> {
     const rightGap = windowWidth - buttonRect.right
 
     if (tooltipRect.width / 2 > rightGap) {
-      return 'left'
+      return 'confirm-button--tooltip left'
     }
 
-    return 'bottom'
+    return 'confirm-button--tooltip bottom'
   }
 }
 

From fe3babb9f472cb55fef00c834aaec733345e6d57 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:25:46 -0700
Subject: [PATCH 025/100] Use ConfirmButton instead of regular delete if func
 is from

---
 ui/src/flux/components/FuncNode.tsx           | 41 ++++++++++++++-----
 .../components/time-machine/flux-builder.scss |  3 +-
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 84594a233..2b339f538 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -2,6 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
 
+import ConfirmButton from 'src/shared/components/ConfirmButton'
 import FuncArgs from 'src/flux/components/FuncArgs'
 import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
 import {
@@ -103,13 +104,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     return (
       <div className="func-node--menu">
         {this.yieldToggleButton}
-        <button
-          className="btn btn-sm btn-square btn-danger"
-          onClick={this.handleDelete}
-          title="Delete this Function"
-        >
-          <span className="icon trash" />
-        </button>
+        {this.deleteButton}
       </div>
     )
   }
@@ -140,6 +135,32 @@ export default class FuncNode extends PureComponent<Props, State> {
     )
   }
 
+  private get deleteButton(): JSX.Element {
+    const {name} = this.props.func
+
+    if (name === 'from') {
+      return (
+        <ConfirmButton
+          icon="trash"
+          type="btn-danger"
+          confirmText="Delete this query"
+          square={true}
+          confirmAction={this.handleDelete}
+        />
+      )
+    }
+
+    return (
+      <button
+        className="btn btn-sm btn-square btn-danger"
+        onClick={this.handleDelete}
+        title="Delete this Function"
+      >
+        <span className="icon remove" />
+      </button>
+    )
+  }
+
   private get nodeClassName(): string {
     const {isYielding} = this.props
     const {editing} = this.state
@@ -147,14 +168,14 @@ export default class FuncNode extends PureComponent<Props, State> {
     return classnames('func-node', {active: isYielding || editing})
   }
 
-  private handleDelete = (e: MouseEvent<HTMLElement>): void => {
-    e.stopPropagation()
+  private handleDelete = (): void => {
     const {func, bodyID, declarationID} = this.props
 
     this.props.onDelete({funcID: func.id, bodyID, declarationID})
   }
 
-  private handleToggleEdit = (): void => {
+  private handleToggleEdit = (e: MouseEvent<HTMLElement>): void => {
+    e.stopPropagation()
     this.setState({editing: !this.state.editing})
   }
 
diff --git a/ui/src/style/components/time-machine/flux-builder.scss b/ui/src/style/components/time-machine/flux-builder.scss
index 6e7e2925c..f5bac9c86 100644
--- a/ui/src/style/components/time-machine/flux-builder.scss
+++ b/ui/src/style/components/time-machine/flux-builder.scss
@@ -258,7 +258,8 @@ $flux-invalid-hover: $c-dreamsicle;
   opacity: 0;
   transition: opacity 0.25s ease;
 
-  > button.btn {
+  > button.btn,
+  > .confirm-button {
     margin-left: 4px;
   }
 }

From 9f150011acbfd6d605775704f2e9a0ee032f67c7 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:38:45 -0700
Subject: [PATCH 026/100] Guard against unrendered button or tooltip

---
 ui/src/shared/components/ConfirmButton.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx
index 36549ab4c..f3b506e92 100644
--- a/ui/src/shared/components/ConfirmButton.tsx
+++ b/ui/src/shared/components/ConfirmButton.tsx
@@ -103,6 +103,10 @@ class ConfirmButton extends PureComponent<Props, State> {
       return `confirm-button--tooltip ${position}`
     }
 
+    if (!this.buttonDiv || !this.tooltipDiv) {
+      return 'confirm-button--tooltip bottom'
+    }
+
     const windowWidth = window.innerWidth
     const buttonRect = this.buttonDiv.getBoundingClientRect()
     const tooltipRect = this.tooltipDiv.getBoundingClientRect()

From 20843e762be47deb5f6c5ff2fcbd9fb705a2d6ad Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:39:09 -0700
Subject: [PATCH 027/100] Add styles for confirm button tooltip positions

---
 ui/src/style/components/confirm-button.scss | 65 ++++++++++++---------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss
index 74bc7a193..a2b1280b0 100644
--- a/ui/src/style/components/confirm-button.scss
+++ b/ui/src/style/components/confirm-button.scss
@@ -11,18 +11,26 @@
     position: absolute;
     z-index: 1;
 
-
+    &.top {
+      bottom: calc(100% + 4px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
     &.bottom {
       top: calc(100% + 4px);
       left: 50%;
       transform: translateX(-50%);
     }
-
     &.left {
       top: 50%;
       right: calc(100% + 4px);
       transform: translateY(-50%);
     }
+    &.right {
+      top: 50%;
+      left: calc(100% + 4px);
+      transform: translateY(-50%);
+    }
   }
 }
 .confirm-button--confirmation {
@@ -43,11 +51,7 @@
   &:after {
     content: '';
     border: 8px solid transparent;
-    border-bottom-color: $c-curacao;
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
     transition: border-color 0.25s ease;
     z-index: 100;
   }
@@ -56,28 +60,35 @@
     background-color: $c-dreamsicle;
     cursor: pointer;
   }
-  &:hover:after {
-    border-bottom-color: $c-dreamsicle;
-  }
-}
 
-.confirm-button--tooltip.bottom .confirm-button--confirmation:after {
-  bottom: 100%;
-  left: 50%;
-  border-bottom-color: $c-curacao;
-  transform: translateX(-50%);
-}
-.confirm-button--tooltip.bottom .confirm-button--confirmation:hover:after {
-  border-bottom-color: $c-dreamsicle;
-}
-.confirm-button--tooltip.left .confirm-button--confirmation:after {
-  left: 100%;
-  top: 50%;
-  border-left-color: $c-curacao;
-  transform: translateY(-50%);
-}
-.confirm-button--tooltip.left .confirm-button--confirmation:hover:after {
-  border-left-color: $c-dreamsicle;
+  .top &:after {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: $c-curacao;
+  }
+  .top &:hover:after {border-top-color: $c-dreamsicle;}
+  .bottom &:after {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: $c-curacao;
+  }
+  .bottom &:hover:after {border-bottom-color: $c-dreamsicle;}
+  .left &:after {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    border-left-color: $c-curacao;
+  }
+  .left &:hover:after {border-left-color: $c-dreamsicle;}
+  .right &:after {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    border-right-color: $c-curacao;
+  }
+  .right &:hover:after {border-right-color: $c-dreamsicle;}
 }
 
 .confirm-button.active {

From 69d669a05338c8417f14a6b59234601d447d9669 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:50:10 -0700
Subject: [PATCH 028/100] Use ConfirmButton in BodyDelete

---
 ui/src/flux/components/BodyDelete.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx
index 46bf07b78..a358fa5b7 100644
--- a/ui/src/flux/components/BodyDelete.tsx
+++ b/ui/src/flux/components/BodyDelete.tsx
@@ -1,4 +1,5 @@
 import React, {PureComponent} from 'react'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
 
 interface Props {
   bodyID: string
@@ -8,9 +9,14 @@ interface Props {
 class BodyDelete extends PureComponent<Props> {
   public render() {
     return (
-      <button className="btn btn-xs btn-danger" onClick={this.handleDelete}>
-        Delete
-      </button>
+      <ConfirmButton
+        icon="trash"
+        type="btn-danger"
+        confirmText="Delete this query"
+        square={true}
+        confirmAction={this.handleDelete}
+        position="right"
+      />
     )
   }
 

From bdb833225d161b43292622c2997719f6ad05701b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:50:27 -0700
Subject: [PATCH 029/100] Separate hover interactions between func node and
 func node menu

---
 ui/src/flux/components/FuncNode.tsx           | 19 +++++++++++--------
 .../components/time-machine/flux-builder.scss | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 2b339f538..79ae66c07 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -54,14 +54,16 @@ export default class FuncNode extends PureComponent<Props, State> {
 
     return (
       <>
-        <div
-          className={this.nodeClassName}
-          onClick={this.handleToggleEdit}
-          title="Edit function arguments"
-        >
-          <div className="func-node--connector" />
-          <div className="func-node--name">{func.name}</div>
-          <FuncArgsPreview func={func} />
+        <div className="func-node--wrapper">
+          <div
+            className={this.nodeClassName}
+            onClick={this.handleToggleEdit}
+            title="Edit function arguments"
+          >
+            <div className="func-node--connector" />
+            <div className="func-node--name">{func.name}</div>
+            <FuncArgsPreview func={func} />
+          </div>
           {this.funcMenu}
         </div>
         {this.funcArgs}
@@ -146,6 +148,7 @@ export default class FuncNode extends PureComponent<Props, State> {
           confirmText="Delete this query"
           square={true}
           confirmAction={this.handleDelete}
+          position="right"
         />
       )
     }
diff --git a/ui/src/style/components/time-machine/flux-builder.scss b/ui/src/style/components/time-machine/flux-builder.scss
index f5bac9c86..7866f92c3 100644
--- a/ui/src/style/components/time-machine/flux-builder.scss
+++ b/ui/src/style/components/time-machine/flux-builder.scss
@@ -144,6 +144,8 @@ $flux-invalid-hover: $c-dreamsicle;
 
   &:hover,
   &.active {
+    cursor: pointer !important;
+
     .func-node--preview {
       color: $g20-white;
     }
@@ -196,7 +198,7 @@ $flux-invalid-hover: $c-dreamsicle;
 }
 
 // When a query exists unassigned to a variable
-.func-node:first-child {
+.func-node--wrapper:first-child .func-node {
   margin-left: 0;
   padding-left: $flux-node-gap;
   .func-node--connector {
@@ -248,13 +250,14 @@ $flux-invalid-hover: $c-dreamsicle;
   }
 }
 
+.func-node--wrapper {
+  display: flex;
+  align-items: center;
+}
+
 .func-node--menu {
   display: flex;
   align-items: center;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(100%, -50%);
   opacity: 0;
   transition: opacity 0.25s ease;
 
@@ -264,9 +267,9 @@ $flux-invalid-hover: $c-dreamsicle;
   }
 }
 
-.func-node:hover .func-node--menu,
-.func-node.editing .func-node--menu,
-.func-node.active .func-node--menu {
+.func-node--wrapper:hover .func-node--menu,
+.func-node.editing + .func-node--menu,
+.func-node.active + .func-node--menu {
   opacity: 1;
 }
 

From 3cc963d067af34ea175660286998c852d2f51f81 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:06:15 -0700
Subject: [PATCH 030/100] Allow for optional "type" for body delete

Used in the confirmation dialog to refer correctly to the object being
deleted
---
 ui/src/flux/components/BodyDelete.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx
index a358fa5b7..156df3920 100644
--- a/ui/src/flux/components/BodyDelete.tsx
+++ b/ui/src/flux/components/BodyDelete.tsx
@@ -1,18 +1,25 @@
 import React, {PureComponent} from 'react'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 
+type BodyType = 'variable' | 'query'
+
 interface Props {
   bodyID: string
+  type?: BodyType
   onDeleteBody: (bodyID: string) => void
 }
 
 class BodyDelete extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    type: 'query',
+  }
+
   public render() {
     return (
       <ConfirmButton
         icon="trash"
         type="btn-danger"
-        confirmText="Delete this query"
+        confirmText={this.confirmText}
         square={true}
         confirmAction={this.handleDelete}
         position="right"
@@ -23,6 +30,12 @@ class BodyDelete extends PureComponent<Props> {
   private handleDelete = (): void => {
     this.props.onDeleteBody(this.props.bodyID)
   }
+
+  private get confirmText(): string {
+    const {type} = this.props
+
+    return `Delete this ${type}`
+  }
 }
 
 export default BodyDelete

From 0e7d66838388421b0ee8196cfac3aefb9757017e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:06:35 -0700
Subject: [PATCH 031/100] Move Body type into shared flux types

---
 ui/src/flux/components/BodyBuilder.tsx | 6 +-----
 ui/src/types/flux.ts                   | 3 +++
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index 612fcb936..9a1848f40 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -9,7 +9,7 @@ import BodyDelete from 'src/flux/components/BodyDelete'
 import {funcNames} from 'src/flux/constants'
 
 import {Service} from 'src/types'
-import {FlatBody, Suggestion} from 'src/types/flux'
+import {Body, Suggestion} from 'src/types/flux'
 
 interface Props {
   service: Service
@@ -20,10 +20,6 @@ interface Props {
   onDeleteBody: (bodyID: string) => void
 }
 
-interface Body extends FlatBody {
-  id: string
-}
-
 class BodyBuilder extends PureComponent<Props> {
   public render() {
     const {body, onDeleteBody} = this.props
diff --git a/ui/src/types/flux.ts b/ui/src/types/flux.ts
index d1756c6c6..ccfae353f 100644
--- a/ui/src/types/flux.ts
+++ b/ui/src/types/flux.ts
@@ -106,6 +106,9 @@ export interface FlatBody {
   funcs?: Func[]
   declarations?: FlatDeclaration[]
 }
+export interface Body extends FlatBody {
+  id: string
+}
 
 export interface Func {
   type: string

From 98fc7878231fb1e03bc13063ae3d8264a844b810 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:07:01 -0700
Subject: [PATCH 032/100] Style BodyDelete when used on a variable

---
 ui/src/flux/components/BodyBuilder.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index 9a1848f40..09cdd60d2 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -48,8 +48,16 @@ class BodyBuilder extends PureComponent<Props> {
 
           return (
             <div className="declaration" key={i}>
-              <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
-              <VariableName name={b.source} assignedToQuery={false} />
+              <div className="func-node--wrapper">
+                <VariableName name={b.source} assignedToQuery={false} />
+                <div className="func-node--menu">
+                  <BodyDelete
+                    bodyID={b.id}
+                    type="variable"
+                    onDeleteBody={onDeleteBody}
+                  />
+                </div>
+              </div>
             </div>
           )
         })

From a910c3b21b3c1e57d4b0988b24c3ea901dffae14 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:11:08 -0700
Subject: [PATCH 033/100] Rename component to be consistent

---
 ui/src/flux/components/BodyBuilder.tsx                      | 6 +++---
 .../flux/components/{VariableName.tsx => VariableNode.tsx}  | 0
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename ui/src/flux/components/{VariableName.tsx => VariableNode.tsx} (100%)

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index 09cdd60d2..436dac535 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import ExpressionNode from 'src/flux/components/ExpressionNode'
-import VariableName from 'src/flux/components/VariableName'
+import VariableNode from 'src/flux/components/VariableNode'
 import FuncSelector from 'src/flux/components/FuncSelector'
 import BodyDelete from 'src/flux/components/BodyDelete'
 import {funcNames} from 'src/flux/constants'
@@ -33,7 +33,7 @@ class BodyBuilder extends PureComponent<Props> {
                 {!dIndex && (
                   <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
                 )}
-                <VariableName name={d.name} assignedToQuery={true} />
+                <VariableNode name={d.name} assignedToQuery={true} />
                 <ExpressionNode
                   bodyID={b.id}
                   declarationID={d.id}
@@ -49,7 +49,7 @@ class BodyBuilder extends PureComponent<Props> {
           return (
             <div className="declaration" key={i}>
               <div className="func-node--wrapper">
-                <VariableName name={b.source} assignedToQuery={false} />
+                <VariableNode name={b.source} assignedToQuery={false} />
                 <div className="func-node--menu">
                   <BodyDelete
                     bodyID={b.id}
diff --git a/ui/src/flux/components/VariableName.tsx b/ui/src/flux/components/VariableNode.tsx
similarity index 100%
rename from ui/src/flux/components/VariableName.tsx
rename to ui/src/flux/components/VariableNode.tsx

From aa59a6e1cbcec39b7ff2902000933d7031323ef9 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:23:11 -0700
Subject: [PATCH 034/100] Shorten copy

---
 ui/src/flux/components/BodyDelete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx
index 156df3920..29bcd2fee 100644
--- a/ui/src/flux/components/BodyDelete.tsx
+++ b/ui/src/flux/components/BodyDelete.tsx
@@ -34,7 +34,7 @@ class BodyDelete extends PureComponent<Props> {
   private get confirmText(): string {
     const {type} = this.props
 
-    return `Delete this ${type}`
+    return `Delete ${type}`
   }
 }
 

From 339f55c8c22b19e11339669470dfcb17409f6991 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:24:37 -0700
Subject: [PATCH 035/100] Move BodyDelete into func node menu

---
 ui/src/flux/components/BodyBuilder.tsx    |  8 +++-----
 ui/src/flux/components/ExpressionNode.tsx |  4 ++++
 ui/src/flux/components/FuncNode.tsx       | 18 +++++-------------
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index 436dac535..9e50b1afc 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -26,13 +26,10 @@ class BodyBuilder extends PureComponent<Props> {
 
     const bodybuilder = body.map((b, i) => {
       if (b.declarations.length) {
-        return b.declarations.map((d, dIndex) => {
+        return b.declarations.map(d => {
           if (d.funcs) {
             return (
               <div className="declaration" key={i}>
-                {!dIndex && (
-                  <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
-                )}
                 <VariableNode name={d.name} assignedToQuery={true} />
                 <ExpressionNode
                   bodyID={b.id}
@@ -41,6 +38,7 @@ class BodyBuilder extends PureComponent<Props> {
                   funcs={d.funcs}
                   declarationsFromBody={this.declarationsFromBody}
                   isLastBody={this.isLastBody(i)}
+                  onDeleteBody={onDeleteBody}
                 />
               </div>
             )
@@ -65,13 +63,13 @@ class BodyBuilder extends PureComponent<Props> {
 
       return (
         <div className="declaration" key={i}>
-          <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
           <ExpressionNode
             bodyID={b.id}
             funcs={b.funcs}
             funcNames={this.funcNames}
             declarationsFromBody={this.declarationsFromBody}
             isLastBody={this.isLastBody(i)}
+            onDeleteBody={onDeleteBody}
           />
         </div>
       )
diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index b70d4f4aa..8275fd6cf 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -15,6 +15,7 @@ interface Props {
   declarationID?: string
   declarationsFromBody: string[]
   isLastBody: boolean
+  onDeleteBody: (bodyID: string) => void
 }
 
 interface State {
@@ -42,6 +43,7 @@ class ExpressionNode extends PureComponent<Props, State> {
       funcNames,
       funcs,
       declarationsFromBody,
+      onDeleteBody,
     } = this.props
 
     const {nonYieldableIndexesToggled} = this.state
@@ -106,6 +108,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                     onGenerateScript={onGenerateScript}
                     declarationsFromBody={declarationsFromBody}
                     onToggleYieldWithLast={this.handleToggleYieldWithLast}
+                    onDeleteBody={onDeleteBody}
                   />
                 )
 
@@ -152,6 +155,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                         onGenerateScript={onGenerateScript}
                         declarationsFromBody={declarationsFromBody}
                         onToggleYieldWithLast={this.handleToggleYieldWithLast}
+                        onDeleteBody={onDeleteBody}
                       />
                       <YieldFuncNode
                         index={i}
diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 79ae66c07..0eeefd076 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -2,7 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
 
-import ConfirmButton from 'src/shared/components/ConfirmButton'
+import BodyDelete from 'src/flux/components/BodyDelete'
 import FuncArgs from 'src/flux/components/FuncArgs'
 import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
 import {
@@ -29,6 +29,7 @@ interface Props {
   declarationsFromBody: string[]
   isYielding: boolean
   isYieldable: boolean
+  onDeleteBody: (bodyID: string) => void
 }
 
 interface State {
@@ -138,19 +139,10 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   private get deleteButton(): JSX.Element {
-    const {name} = this.props.func
+    const {func, bodyID, onDeleteBody} = this.props
 
-    if (name === 'from') {
-      return (
-        <ConfirmButton
-          icon="trash"
-          type="btn-danger"
-          confirmText="Delete this query"
-          square={true}
-          confirmAction={this.handleDelete}
-          position="right"
-        />
-      )
+    if (func.name === 'from') {
+      return <BodyDelete onDeleteBody={onDeleteBody} bodyID={bodyID} />
     }
 
     return (

From 8e4eb72575025468d85f23e975623bf4c8614d96 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:37:01 -0700
Subject: [PATCH 036/100] Don't ask for confirmation when deleting a variable

---
 ui/src/flux/components/BodyDelete.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx
index 29bcd2fee..d5f6c0461 100644
--- a/ui/src/flux/components/BodyDelete.tsx
+++ b/ui/src/flux/components/BodyDelete.tsx
@@ -15,11 +15,25 @@ class BodyDelete extends PureComponent<Props> {
   }
 
   public render() {
+    const {type} = this.props
+
+    if (type === 'variable') {
+      return (
+        <button
+          className="btn btn-sm btn-square btn-danger"
+          title="Delete Variable"
+          onClick={this.handleDelete}
+        >
+          <span className="icon remove" />
+        </button>
+      )
+    }
+
     return (
       <ConfirmButton
         icon="trash"
         type="btn-danger"
-        confirmText={this.confirmText}
+        confirmText="Delete Query"
         square={true}
         confirmAction={this.handleDelete}
         position="right"
@@ -30,12 +44,6 @@ class BodyDelete extends PureComponent<Props> {
   private handleDelete = (): void => {
     this.props.onDeleteBody(this.props.bodyID)
   }
-
-  private get confirmText(): string {
-    const {type} = this.props
-
-    return `Delete ${type}`
-  }
 }
 
 export default BodyDelete

From a00a82ef3b34540b621efa3eac27d5ff4d03b709 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 16:50:56 -0700
Subject: [PATCH 037/100] Add ability to delete a query assigned to a var from
 the var

---
 ui/src/flux/components/BodyBuilder.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
index 9e50b1afc..faa31eb32 100644
--- a/ui/src/flux/components/BodyBuilder.tsx
+++ b/ui/src/flux/components/BodyBuilder.tsx
@@ -30,7 +30,12 @@ class BodyBuilder extends PureComponent<Props> {
           if (d.funcs) {
             return (
               <div className="declaration" key={i}>
-                <VariableNode name={d.name} assignedToQuery={true} />
+                <div className="func-node--wrapper">
+                  <VariableNode name={d.name} assignedToQuery={true} />
+                  <div className="func-node--menu">
+                    <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
+                  </div>
+                </div>
                 <ExpressionNode
                   bodyID={b.id}
                   declarationID={d.id}

From 7a0d13ca46dce22833986fe1228637f863a33a0d Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Mon, 18 Jun 2018 09:23:57 -0700
Subject: [PATCH 038/100] Add back erroneously removed handleClickOutside
 functions to annotation components

---
 ui/src/shared/components/AnnotationInput.tsx | 4 ++++
 ui/src/shared/components/NewAnnotation.tsx   | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/ui/src/shared/components/AnnotationInput.tsx b/ui/src/shared/components/AnnotationInput.tsx
index 8d8129048..58e766ca7 100644
--- a/ui/src/shared/components/AnnotationInput.tsx
+++ b/ui/src/shared/components/AnnotationInput.tsx
@@ -45,6 +45,10 @@ class AnnotationInput extends Component<Props, State> {
       </div>
     )
   }
+  public handleClickOutside = () => {
+    this.props.onConfirmUpdate()
+    this.setState({isEditing: false})
+  }
 
   private handleInputClick = () => {
     this.setState({isEditing: true})
diff --git a/ui/src/shared/components/NewAnnotation.tsx b/ui/src/shared/components/NewAnnotation.tsx
index a06e4dda6..f1436eac5 100644
--- a/ui/src/shared/components/NewAnnotation.tsx
+++ b/ui/src/shared/components/NewAnnotation.tsx
@@ -112,6 +112,13 @@ class NewAnnotation extends Component<Props, State> {
     )
   }
 
+  public handleClickOutside = () => {
+    const {onDismissAddingAnnotation, isTempHovering} = this.props
+    if (!isTempHovering) {
+      onDismissAddingAnnotation()
+    }
+  }
+
   private clampWithinGraphTimerange = (timestamp: number): number => {
     const [xRangeStart] = this.props.dygraph.xAxisRange()
     return Math.max(xRangeStart, timestamp)

From fe89912a570758e6af7db405f209031f960636b7 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Mon, 18 Jun 2018 09:52:36 -0700
Subject: [PATCH 039/100] Fix template variables null property bug

---
 ui/src/tempVars/constants/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/tempVars/constants/index.ts b/ui/src/tempVars/constants/index.ts
index 909cf8e0e..6fe11741c 100644
--- a/ui/src/tempVars/constants/index.ts
+++ b/ui/src/tempVars/constants/index.ts
@@ -97,6 +97,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
       values: [],
       type: TemplateType.CSV,
       label: '',
+      query: {},
     }
   },
   [TemplateType.TagKeys]: () => {

From d38ae8db322d9c608b058180b36a62c23cb06847 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 10:56:49 -0700
Subject: [PATCH 040/100] Implement PageHeader in rule builder page

---
 ui/src/kapacitor/components/KapacitorRule.js | 23 ++++++++---
 ui/src/kapacitor/components/RuleHeader.js    | 40 --------------------
 2 files changed, 18 insertions(+), 45 deletions(-)
 delete mode 100644 ui/src/kapacitor/components/RuleHeader.js

diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index 172a15bce..f3da4d971 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/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">
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js
deleted file mode 100644
index e4d84c62c..000000000
--- a/ui/src/kapacitor/components/RuleHeader.js
+++ /dev/null
@@ -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

From 57fbb0943210b865d58d9f1aa87f217209d5f924 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 10:59:57 -0700
Subject: [PATCH 041/100] Refactor RuleHeaderSave

Remove excess markup and source indicator
---
 ui/src/kapacitor/components/KapacitorRule.js  | 3 ---
 ui/src/kapacitor/components/RuleHeaderSave.js | 8 +++-----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index f3da4d971..4c983c5f9 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -168,11 +168,8 @@ class KapacitorRule extends Component {
   }
 
   renderHeaderOptions = () => {
-    const {source} = this.props
-
     return (
       <RuleHeaderSave
-        source={source}
         onSave={this.handleSave}
         validationError={this.validationError()}
       />
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js
index c87805d25..5d488b7b2 100644
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ b/ui/src/kapacitor/components/RuleHeaderSave.js
@@ -1,11 +1,9 @@
-import React from 'react'
+import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
-import SourceIndicator from 'shared/components/SourceIndicator'
 
 const RuleHeaderSave = ({onSave, validationError}) => (
-  <div className="page-header--right">
-    <SourceIndicator />
+  <Fragment>
     {validationError ? (
       <button
         className="btn btn-success btn-sm disabled"
@@ -26,7 +24,7 @@ const RuleHeaderSave = ({onSave, validationError}) => (
       place="bottom"
       class="influx-tooltip kapacitor-tooltip"
     />
-  </div>
+  </Fragment>
 )
 
 const {func, string} = PropTypes

From cee454d6d5f12d037950d20de6010f8cb5c7ba9b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:03:46 -0700
Subject: [PATCH 042/100] Convert component to TypeScript

---
 .../{RuleHeaderSave.js => RuleHeaderSave.tsx} | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)
 rename ui/src/kapacitor/components/{RuleHeaderSave.js => RuleHeaderSave.tsx} (66%)

diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.tsx
similarity index 66%
rename from ui/src/kapacitor/components/RuleHeaderSave.js
rename to ui/src/kapacitor/components/RuleHeaderSave.tsx
index 5d488b7b2..249cd73d2 100644
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ b/ui/src/kapacitor/components/RuleHeaderSave.tsx
@@ -1,9 +1,13 @@
-import React, {Fragment} from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 import ReactTooltip from 'react-tooltip'
 
-const RuleHeaderSave = ({onSave, validationError}) => (
-  <Fragment>
+interface Props {
+  onSave: () => void
+  validationError?: string
+}
+
+const RuleHeaderSave: SFC<Props> = ({onSave, validationError}) => (
+  <>
     {validationError ? (
       <button
         className="btn btn-success btn-sm disabled"
@@ -24,14 +28,7 @@ const RuleHeaderSave = ({onSave, validationError}) => (
       place="bottom"
       class="influx-tooltip kapacitor-tooltip"
     />
-  </Fragment>
+  </>
 )
 
-const {func, string} = PropTypes
-
-RuleHeaderSave.propTypes = {
-  onSave: func.isRequired,
-  validationError: string.isRequired,
-}
-
 export default RuleHeaderSave

From 647e3af36d6b26f691e762a2d10b96ef5f9eba8a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:22:36 -0700
Subject: [PATCH 043/100] Refactor PageHeader into pure component that accepts
 a center prop

---
 ui/src/shared/components/PageHeader.tsx | 93 +++++++++++++++++--------
 ui/src/style/layout/page-header.scss    |  9 ++-
 2 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index e5cecd423..0691e4d7b 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,4 +1,4 @@
-import React, {SFC, ReactElement} from 'react'
+import React, {PureComponent, ReactElement} from 'react'
 import classnames from 'classnames'
 import Title from 'src/shared/components/PageHeaderTitle'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
@@ -6,40 +6,77 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 interface Props {
   title?: string
   renderTitle?: () => ReactElement<any>
+  renderCenter?: () => ReactElement<any>
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
 }
 
-const PageHeader: SFC<Props> = ({
-  title,
-  fullWidth,
-  renderTitle,
-  renderOptions,
-  sourceIndicator,
-}) => {
-  if (!title && !renderTitle) {
-    console.error('PageHeader requires either title or RenderTitle props')
-  }
-
-  const className = classnames('page-header', {'full-width': fullWidth})
-  let renderLeft = renderTitle
-
-  if (!renderTitle) {
-    renderLeft = () => <Title title={title} />
-  }
-
-  return (
-    <div className={className}>
-      <div className="page-header--container">
-        <div className="page-header--left">{renderLeft()}</div>
-        <div className="page-header--right">
-          {sourceIndicator && <SourceIndicator />}
-          {renderOptions && renderOptions()}
+class PageHeader extends PureComponent<Props> {
+  public render() {
+    return (
+      <div className={this.className}>
+        <div className="page-header--container">
+          <div className="page-header--left">{this.renderLeft}</div>
+          {this.renderCenter}
+          <div className="page-header--right">
+            {this.sourceIndicator}
+            {this.renderRight}
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
+
+  private get sourceIndicator(): JSX.Element {
+    const {sourceIndicator} = this.props
+
+    if (!sourceIndicator) {
+      return
+    }
+
+    return <SourceIndicator />
+  }
+
+  private get renderLeft(): JSX.Element {
+    const {title, renderTitle} = this.props
+
+    if (!title && !renderTitle) {
+      console.error('PageHeader requires either title or RenderTitle props')
+    }
+
+    if (!renderTitle) {
+      return <Title title={title} />
+    }
+
+    return renderTitle()
+  }
+
+  private get renderCenter(): JSX.Element {
+    const {renderCenter} = this.props
+
+    if (!renderCenter) {
+      return
+    }
+
+    return <div className="page-header--center">{renderCenter()}</div>
+  }
+
+  private get renderRight(): JSX.Element {
+    const {renderOptions} = this.props
+
+    if (!renderOptions) {
+      return
+    }
+
+    return renderOptions()
+  }
+
+  private get className(): string {
+    const {fullWidth} = this.props
+
+    return classnames('page-header', {'full-width': fullWidth})
+  }
 }
 
 export default PageHeader
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 4d924b1d1..6c8f56815 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -36,8 +36,9 @@ $page-header-weight: 400 !important;
   max-width: 100%;
 }
 
-// Left & Right halves of the page header
+// Left, Center, and Right pieces of the page header
 .page-header--left,
+.page-header--center,
 .page-header--right {
   display: flex;
   align-items: center;
@@ -58,6 +59,12 @@ $page-header-weight: 400 !important;
     }
   }
 }
+.page-header--center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
 // Intended to be a <h1>
 .page-header--title {

From 3ecafecf4233309bc9d280a8786a2b90c3f7831e Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie@Aliries-MacBook-Pro.local>
Date: Mon, 18 Jun 2018 11:32:36 -0700
Subject: [PATCH 044/100] Fix misimported template variables constants

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Alirie Gray <alirie.gray@gmail.com>
---
 ui/src/dashboards/components/QueryTextArea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
index ea152f8cd..655ef51e8 100644
--- a/ui/src/dashboards/components/QueryTextArea.js
+++ b/ui/src/dashboards/components/QueryTextArea.js
@@ -12,7 +12,7 @@ import {
   applyMasks,
   insertTempVar,
   unMask,
-} from 'src/dashboards/constants'
+} from 'src/tempVars/constants'
 
 @ErrorHandling
 class QueryTextArea extends Component {

From 14f2ee8056b0711cb2b7d90e9b88eeb476f32f44 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:34:18 -0700
Subject: [PATCH 045/100] Convert component to TypeScript

---
 .../{LogsToggle.js => LogsToggle.tsx}         | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)
 rename ui/src/kapacitor/components/{LogsToggle.js => LogsToggle.tsx} (57%)

diff --git a/ui/src/kapacitor/components/LogsToggle.js b/ui/src/kapacitor/components/LogsToggle.tsx
similarity index 57%
rename from ui/src/kapacitor/components/LogsToggle.js
rename to ui/src/kapacitor/components/LogsToggle.tsx
index a95bd8610..5a3baba2d 100644
--- a/ui/src/kapacitor/components/LogsToggle.js
+++ b/ui/src/kapacitor/components/LogsToggle.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) => (
-  <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite logs-toggle">
+interface Props {
+  areLogsVisible: boolean
+  onToggleLogsVisibility: () => void
+}
+
+const LogsToggle: SFC<Props> = ({areLogsVisible, onToggleLogsVisibility}) => (
+  <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
     <li
       className={areLogsVisible ? null : 'active'}
       onClick={onToggleLogsVisibility}
@@ -18,11 +22,4 @@ const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) => (
   </ul>
 )
 
-const {bool, func} = PropTypes
-
-LogsToggle.propTypes = {
-  areLogsVisible: bool,
-  onToggleLogsVisibility: func.isRequired,
-}
-
 export default LogsToggle

From 642684dc36884e755d0e2e6220948e47c4bf91f1 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:48:24 -0700
Subject: [PATCH 046/100] Implement PageHeader in tickscript editor

---
 ui/src/kapacitor/components/LogsToggle.tsx    |  77 ++++++++++---
 .../kapacitor/components/TickscriptHeader.tsx | 104 ++++++++++--------
 ui/src/shared/components/PageHeader.tsx       |   6 +-
 3 files changed, 122 insertions(+), 65 deletions(-)

diff --git a/ui/src/kapacitor/components/LogsToggle.tsx b/ui/src/kapacitor/components/LogsToggle.tsx
index 5a3baba2d..ecbd9750a 100644
--- a/ui/src/kapacitor/components/LogsToggle.tsx
+++ b/ui/src/kapacitor/components/LogsToggle.tsx
@@ -1,25 +1,68 @@
-import React, {SFC} from 'react'
+import React, {PureComponent} from 'react'
 
 interface Props {
   areLogsVisible: boolean
+  areLogsEnabled: boolean
   onToggleLogsVisibility: () => void
 }
 
-const LogsToggle: SFC<Props> = ({areLogsVisible, onToggleLogsVisibility}) => (
-  <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
-    <li
-      className={areLogsVisible ? null : 'active'}
-      onClick={onToggleLogsVisibility}
-    >
-      Editor
-    </li>
-    <li
-      className={areLogsVisible ? 'active' : null}
-      onClick={onToggleLogsVisibility}
-    >
-      Editor + Logs
-    </li>
-  </ul>
-)
+class LogsToggle extends PureComponent<Props> {
+  public render() {
+    return (
+      <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
+        {this.leftTab}
+        {this.rightTab}
+      </ul>
+    )
+  }
+
+  private get leftTab(): JSX.Element {
+    const {areLogsEnabled, areLogsVisible, onToggleLogsVisibility} = this.props
+
+    if (areLogsEnabled) {
+      return (
+        <li
+          className={areLogsVisible ? null : 'active'}
+          onClick={onToggleLogsVisibility}
+        >
+          Editor
+        </li>
+      )
+    }
+
+    return (
+      <li
+        className={areLogsVisible ? 'disabled' : ' disabled active'}
+        title="Log viewing is currently disabled"
+      >
+        Editor
+      </li>
+    )
+  }
+
+  private get rightTab(): JSX.Element {
+    const {areLogsEnabled, areLogsVisible, onToggleLogsVisibility} = this.props
+
+    if (areLogsEnabled) {
+      return (
+        <li
+          className={areLogsVisible ? 'active' : null}
+          onClick={onToggleLogsVisibility}
+        >
+          Editor + Logs
+        </li>
+      )
+    }
+
+    return (
+      <li
+        className={areLogsVisible ? 'disabled active' : ' disabled'}
+        title="Log viewing is currently disabled"
+      >
+        Editor + Logs
+      </li>
+    )
+  }
+}
 
 export default LogsToggle
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index ca08a65ed..e088d1827 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -1,6 +1,6 @@
-import React, {SFC} from 'react'
+import React, {PureComponent} from 'react'
 
-import SourceIndicator from 'src/shared/components/SourceIndicator'
+import PageHeader from 'src/shared/components/PageHeader'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 import TickscriptSave, {Task} from 'src/kapacitor/components/TickscriptSave'
@@ -16,53 +16,69 @@ interface Props {
   onToggleLogsVisibility: () => void
 }
 
-const TickscriptHeader: SFC<Props> = ({
-  task,
-  onSave,
-  onExit,
-  unsavedChanges,
-  areLogsEnabled,
-  areLogsVisible,
-  isNewTickscript,
-  onToggleLogsVisibility,
-}) => (
-  <div className="page-header full-width">
-    <div className="page-header--container">
-      <div className="page-header--left">
-        <h1 className="page-header--title">TICKscript Editor</h1>
-      </div>
-      {areLogsEnabled && (
-        <LogsToggle
-          areLogsVisible={areLogsVisible}
-          onToggleLogsVisibility={onToggleLogsVisibility}
-        />
-      )}
-      <div className="page-header--right">
-        <SourceIndicator />
+class TickscriptHeader extends PureComponent<Props> {
+  public render() {
+    return (
+      <PageHeader
+        title="TICKscript Editor"
+        fullWidth={true}
+        sourceIndicator={true}
+        renderCenter={this.logsToggle}
+        renderOptions={this.saveAndExit}
+      />
+    )
+  }
+
+  private logsToggle = (): JSX.Element => {
+    const {areLogsEnabled, areLogsVisible, onToggleLogsVisibility} = this.props
+
+    return (
+      <LogsToggle
+        areLogsEnabled={areLogsEnabled}
+        areLogsVisible={areLogsVisible}
+        onToggleLogsVisibility={onToggleLogsVisibility}
+      />
+    )
+  }
+
+  private saveAndExit = (): JSX.Element => {
+    const {task, onSave, onExit, unsavedChanges, isNewTickscript} = this.props
+
+    if (unsavedChanges) {
+      return (
+        <>
+          <TickscriptSave
+            task={task}
+            onSave={onSave}
+            unsavedChanges={unsavedChanges}
+            isNewTickscript={isNewTickscript}
+          />
+          <ConfirmButton
+            text="Exit"
+            confirmText="Discard unsaved changes?"
+            confirmAction={onExit}
+          />
+        </>
+      )
+    }
+    return (
+      <>
         <TickscriptSave
           task={task}
           onSave={onSave}
           unsavedChanges={unsavedChanges}
           isNewTickscript={isNewTickscript}
         />
-        {unsavedChanges ? (
-          <ConfirmButton
-            text="Exit"
-            confirmText="Discard unsaved changes?"
-            confirmAction={onExit}
-          />
-        ) : (
-          <button
-            className="btn btn-default btn-sm"
-            title="Return to Alert Rules"
-            onClick={onExit}
-          >
-            Exit
-          </button>
-        )}
-      </div>
-    </div>
-  </div>
-)
+        <button
+          className="btn btn-default btn-sm"
+          title="Return to Alert Rules"
+          onClick={onExit}
+        >
+          Exit
+        </button>
+      </>
+    )
+  }
+}
 
 export default TickscriptHeader
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 0691e4d7b..6843b5231 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -55,11 +55,9 @@ class PageHeader extends PureComponent<Props> {
   private get renderCenter(): JSX.Element {
     const {renderCenter} = this.props
 
-    if (!renderCenter) {
-      return
+    if (renderCenter) {
+      return <div className="page-header--center">{renderCenter()}</div>
     }
-
-    return <div className="page-header--center">{renderCenter()}</div>
   }
 
   private get renderRight(): JSX.Element {

From 548dfbfadddbc53499352f15948220a6cf10d970 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:54:48 -0700
Subject: [PATCH 047/100] Improve styles for active & disabled states of radio
 buttons

---
 ui/src/style/theme/_radio-buttons.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/style/theme/_radio-buttons.scss b/ui/src/style/theme/_radio-buttons.scss
index c090c8acb..7df7837ed 100644
--- a/ui/src/style/theme/_radio-buttons.scss
+++ b/ui/src/style/theme/_radio-buttons.scss
@@ -47,6 +47,12 @@
         cursor: not-allowed;
       }
     }
+    &.disabled.active,
+    &[disabled="true"].active {
+      background-color: $g5-pepper;
+      color: $g10-wolf;
+    }
+
     &:last-child {margin-right: 0;}
   }
 }
@@ -100,5 +106,10 @@
         color: $g7-graphite;
       }
     }
+    &.disabled.active,
+    &[disabled="true"].active {
+      background-color: $g5-pepper;
+      color: $g10-wolf;
+    }
   }
 }

From 8c3f830f0260111e1f5790e4cb950e5d77e1475b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 11:58:58 -0700
Subject: [PATCH 048/100] Implement PageHeader in kapacitor config page

---
 ui/src/kapacitor/components/KapacitorForm.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx
index 20d79aedb..300a15a92 100644
--- a/ui/src/kapacitor/components/KapacitorForm.tsx
+++ b/ui/src/kapacitor/components/KapacitorForm.tsx
@@ -3,6 +3,7 @@ import React, {ChangeEvent, MouseEvent, PureComponent} from 'react'
 import AlertOutputs from 'src/kapacitor/components/AlertOutputs'
 import Input from 'src/kapacitor/components/KapacitorFormInput'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import PageHeader from 'src/shared/components/PageHeader'
 import KapacitorFormSkipVerify from 'src/kapacitor/components/KapacitorFormSkipVerify'
 
 import {Kapacitor, Source, Notification, NotificationFunc} from 'src/types'
@@ -38,13 +39,7 @@ class KapacitorForm extends PureComponent<Props> {
 
     return (
       <div className="page">
-        <div className="page-header">
-          <div className="page-header--container">
-            <div className="page-header--left">
-              <h1 className="page-header--title">{this.headerText}</h1>
-            </div>
-          </div>
-        </div>
+        <PageHeader title={this.headerText} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">

From fbe11ccac568140fdb0373d6609e91c3e676e395 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 12:02:25 -0700
Subject: [PATCH 049/100] Implement PageHeader in chrono admin pages

---
 .../admin/containers/chronograf/AdminChronografPage.js   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/ui/src/admin/containers/chronograf/AdminChronografPage.js b/ui/src/admin/containers/chronograf/AdminChronografPage.js
index 964c34ee4..b672f1ea8 100644
--- a/ui/src/admin/containers/chronograf/AdminChronografPage.js
+++ b/ui/src/admin/containers/chronograf/AdminChronografPage.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
+import PageHeader from 'src/shared/components/PageHeader'
 import SubSections from 'src/shared/components/SubSections'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
@@ -49,13 +50,7 @@ const sections = me => [
 
 const AdminChronografPage = ({me, source, params: {tab}}) => (
   <div className="page">
-    <div className="page-header">
-      <div className="page-header--container">
-        <div className="page-header--left">
-          <h1 className="page-header--title">Chronograf Admin</h1>
-        </div>
-      </div>
-    </div>
+    <PageHeader title="Chronograf Admin" />
     <FancyScrollbar className="page-contents">
       <div className="container-fluid">
         <SubSections

From 9b5192492168c3bd5907a65d7c244db8604e7c38 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Mon, 18 Jun 2018 13:45:11 -0700
Subject: [PATCH 050/100] Actually type notifications

---
 ui/src/dashboards/actions/index.ts            |   4 +-
 ui/src/dashboards/containers/DashboardPage.js |   2 +-
 ui/src/kapacitor/components/AlertTabs.tsx     |   2 +-
 ui/src/shared/copy/notifications.ts           | 408 +++++++++++-------
 ui/src/sources/containers/ManageSources.tsx   |   2 +-
 ui/src/sources/containers/SourcePage.tsx      | 302 +++++++++++++
 ui/src/status/actions/index.ts                |  76 ++++
 ui/src/status/components/GettingStarted.tsx   |  97 +++++
 ui/src/status/components/JSONFeedReader.tsx   |  45 ++
 ui/src/status/components/NewsFeed.tsx         |  83 ++++
 ui/src/status/constants/index.ts              |   1 +
 ui/src/status/containers/StatusPage.tsx       | 108 +++++
 ui/src/status/reducers/JSONFeed.ts            |  51 +++
 ui/src/status/reducers/index.ts               |   4 +
 ui/src/types/notifications.ts                 |   2 +-
 ui/src/types/status.ts                        |  22 +
 ui/test/normalizers/dashboardTime.test.js     |   2 +-
 17 files changed, 1043 insertions(+), 168 deletions(-)
 create mode 100644 ui/src/sources/containers/SourcePage.tsx
 create mode 100644 ui/src/status/actions/index.ts
 create mode 100644 ui/src/status/components/GettingStarted.tsx
 create mode 100644 ui/src/status/components/JSONFeedReader.tsx
 create mode 100644 ui/src/status/components/NewsFeed.tsx
 create mode 100644 ui/src/status/constants/index.ts
 create mode 100644 ui/src/status/containers/StatusPage.tsx
 create mode 100644 ui/src/status/reducers/JSONFeed.ts
 create mode 100644 ui/src/status/reducers/index.ts
 create mode 100644 ui/src/types/status.ts

diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts
index cc2c61f35..1ce5f0487 100644
--- a/ui/src/dashboards/actions/index.ts
+++ b/ui/src/dashboards/actions/index.ts
@@ -417,7 +417,7 @@ export const getDashboardsNamesAsync = (sourceID: string) => async (
   }
 }
 
-export const getDashboardAsync = (dashboardID: string) => async (
+export const getDashboardAsync = (dashboardID: number) => async (
   dispatch
 ): Promise<Dashboard | null> => {
   try {
@@ -813,7 +813,7 @@ const syncDashboardFromURLQueryParams = (
 }
 
 export const getDashboardWithHydratedAndSyncedTempVarsAsync = (
-  dashboardID: string,
+  dashboardID: number,
   source: Source,
   router: InjectedRouter,
   location: Location
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index 5cfbaffbc..e0a385597 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -526,7 +526,7 @@ DashboardPage.propTypes = {
   sources: arrayOf(shape({})).isRequired,
   params: shape({
     sourceID: string.isRequired,
-    dashboardID: string.isRequired,
+    dashboardID: number.isRequired,
   }).isRequired,
   location: shape({
     pathname: string.isRequired,
diff --git a/ui/src/kapacitor/components/AlertTabs.tsx b/ui/src/kapacitor/components/AlertTabs.tsx
index 4cda960e8..8772c549d 100644
--- a/ui/src/kapacitor/components/AlertTabs.tsx
+++ b/ui/src/kapacitor/components/AlertTabs.tsx
@@ -134,7 +134,7 @@ class AlertTabs extends PureComponent<Props, State> {
       this.setState({services})
     } catch (error) {
       this.setState({services: null})
-      this.props.notify(notifyCouldNotRetrieveKapacitorServices(kapacitor))
+      this.props.notify(notifyCouldNotRetrieveKapacitorServices(kapacitor.name))
     }
   }
 
diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts
index 4e99e9a74..8cfecc36d 100644
--- a/ui/src/shared/copy/notifications.ts
+++ b/ui/src/shared/copy/notifications.ts
@@ -1,22 +1,28 @@
 // All copy for notifications should be stored here for easy editing
 // and ensuring stylistic consistency
+import {Notification} from 'src/types'
+
+type NotificationExcludingMessage = Pick<
+  Notification,
+  Exclude<keyof Notification, 'message'>
+>
 
 import {FIVE_SECONDS, TEN_SECONDS, INFINITE} from 'src/shared/constants/index'
 import {MAX_RESPONSE_BYTES} from 'src/flux/constants'
 
-const defaultErrorNotification = {
+const defaultErrorNotification: NotificationExcludingMessage = {
   type: 'error',
   icon: 'alert-triangle',
   duration: TEN_SECONDS,
 }
 
-const defaultSuccessNotification = {
+const defaultSuccessNotification: NotificationExcludingMessage = {
   type: 'success',
   icon: 'checkmark',
   duration: FIVE_SECONDS,
 }
 
-const defaultDeletionNotification = {
+const defaultDeletionNotification: NotificationExcludingMessage = {
   type: 'primary',
   icon: 'trash',
   duration: FIVE_SECONDS,
@@ -24,209 +30,240 @@ const defaultDeletionNotification = {
 
 //  Misc Notifications
 //  ----------------------------------------------------------------------------
-export const notifyGenericFail = () => 'Could not communicate with server.'
+export const notifyGenericFail = (): string =>
+  'Could not communicate with server.'
 
-export const notifyNewVersion = version => ({
+export const notifyNewVersion = (version: string): Notification => ({
   type: 'info',
   icon: 'cubo-uniform',
   duration: INFINITE,
   message: `Welcome to the latest Chronograf${version}. Local settings cleared.`,
 })
 
-export const notifyLoadLocalSettingsFailed = error => ({
+export const notifyLoadLocalSettingsFailed = (error: string): Notification => ({
   ...defaultErrorNotification,
   message: `Loading local settings failed: ${error}`,
 })
 
-export const notifyErrorWithAltText = (type, message) => ({
+export const notifyErrorWithAltText = (
+  type: string,
+  message: string
+): Notification => ({
   type,
   icon: 'triangle',
   duration: TEN_SECONDS,
   message,
 })
 
-export const notifyPresentationMode = () => ({
+export const notifyPresentationMode = (): Notification => ({
   type: 'primary',
   icon: 'expand-b',
   duration: 7500,
   message: 'Press ESC to exit Presentation Mode.',
 })
 
-export const notifyDataWritten = () => ({
+export const notifyDataWritten = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Data was written successfully.',
 })
 
-export const notifyDataWriteFailed = errorMessage => ({
+export const notifyDataWriteFailed = (errorMessage: string): Notification => ({
   ...defaultErrorNotification,
   message: `Data write failed: ${errorMessage}`,
 })
 
-export const notifySessionTimedOut = () => ({
+export const notifySessionTimedOut = (): Notification => ({
   type: 'primary',
   icon: 'triangle',
   duration: INFINITE,
   message: 'Your session has timed out. Log in again to continue.',
 })
 
-export const notifyServerError = {
+export const notifyServerError: Notification = {
   ...defaultErrorNotification,
   message: 'Internal Server Error. Check API Logs.',
 }
 
-export const notifyCouldNotRetrieveKapacitors = sourceID => ({
+export const notifyCouldNotRetrieveKapacitors = (
+  sourceID: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `Internal Server Error. Could not retrieve Kapacitor Connections for source ${sourceID}.`,
 })
 
-export const notifyCouldNotRetrieveKapacitorServices = kapacitor => ({
+export const notifyCouldNotRetrieveKapacitorServices = (
+  kapacitor: string
+): Notification => ({
   ...defaultErrorNotification,
-  message: `Interanl Server Error. Could not retrieve services for Kapacitor ${kapacitor}`,
+  message: `Internal Server Error. Could not retrieve services for Kapacitor ${kapacitor}`,
 })
 
-export const notifyCouldNotDeleteKapacitor = () => ({
+export const notifyCouldNotDeleteKapacitor = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Internal Server Error. Could not delete Kapacitor Connection.',
 })
 
-export const notifyCSVDownloadFailed = () => ({
+export const notifyCSVDownloadFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Unable to download .CSV file',
 })
 
 //  Hosts Page Notifications
 //  ----------------------------------------------------------------------------
-export const notifyUnableToGetHosts = () => ({
+export const notifyUnableToGetHosts = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Unable to get Hosts.',
 })
 
-export const notifyUnableToGetApps = () => ({
+export const notifyUnableToGetApps = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Unable to get Apps for Hosts.',
 })
 
 //  InfluxDB Sources Notifications
 //  ----------------------------------------------------------------------------
-export const notifySourceCreationSucceeded = sourceName => ({
+export const notifySourceCreationSucceeded = (
+  sourceName: string
+): Notification => ({
   ...defaultSuccessNotification,
   icon: 'server2',
   message: `Connected to InfluxDB ${sourceName} successfully.`,
 })
 
-export const notifySourceCreationFailed = (sourceName, errorMessage) => ({
+export const notifySourceCreationFailed = (
+  sourceName: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   icon: 'server2',
   message: `Unable to connect to InfluxDB ${sourceName}: ${errorMessage}`,
 })
 
-export const notifySourceUdpated = sourceName => ({
+export const notifySourceUdpated = (sourceName: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'server2',
   message: `Updated InfluxDB ${sourceName} Connection successfully.`,
 })
 
-export const notifySourceUdpateFailed = (sourceName, errorMessage) => ({
+export const notifySourceUdpateFailed = (
+  sourceName: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   icon: 'server2',
   message: `Failed to update InfluxDB ${sourceName} Connection: ${errorMessage}`,
 })
 
-export const notifySourceDeleted = (sourceName: string) => ({
+export const notifySourceDeleted = (sourceName: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'server2',
   message: `${sourceName} deleted successfully.`,
 })
 
-export const notifySourceDeleteFailed = sourceName => ({
+export const notifySourceDeleteFailed = (sourceName: string): Notification => ({
   ...defaultErrorNotification,
   icon: 'server2',
   message: `There was a problem deleting ${sourceName}.`,
 })
 
-export const notifySourceNoLongerAvailable = sourceName =>
-  `Source ${sourceName} is no longer available. Please ensure InfluxDB is running.`
+export const notifySourceNoLongerAvailable = (
+  sourceName: string
+): Notification => ({
+  ...defaultErrorNotification,
+  icon: 'server2',
+  message: `Source ${sourceName} is no longer available. Please ensure InfluxDB is running.`,
+})
 
-export const notifyNoSourcesAvailable = sourceName =>
-  `Unable to connect to source ${sourceName}. No other sources available.`
-
-export const notifyUnableToRetrieveSources = () => 'Unable to retrieve sources.'
-
-export const notifyUnableToConnectSource = sourceName =>
-  `Unable to connect to source ${sourceName}.`
-
-export const notifyErrorConnectingToSource = errorMessage =>
-  `Unable to connect to InfluxDB source: ${errorMessage}`
+export const notifyErrorConnectingToSource = (
+  errorMessage: string
+): Notification => ({
+  ...defaultErrorNotification,
+  icon: 'server2',
+  message: `Unable to connect to InfluxDB source: ${errorMessage}`,
+})
 
 //  Multitenancy User Notifications
 //  ----------------------------------------------------------------------------
-export const notifyUserRemovedFromAllOrgs = () => ({
+export const notifyUserRemovedFromAllOrgs = (): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message:
     'You have been removed from all organizations. Please contact your administrator.',
 })
 
-export const notifyUserRemovedFromCurrentOrg = () => ({
+export const notifyUserRemovedFromCurrentOrg = (): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message: 'You were removed from your current organization.',
 })
 
-export const notifyOrgHasNoSources = () => ({
+export const notifyOrgHasNoSources = (): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message: 'Organization has no sources configured.',
 })
 
-export const notifyUserSwitchedOrgs = (orgName, roleName) => ({
+export const notifyUserSwitchedOrgs = (
+  orgName: string,
+  roleName: string
+): Notification => ({
   ...defaultSuccessNotification,
   type: 'primary',
   message: `Now logged in to '${orgName}' as '${roleName}'.`,
 })
 
-export const notifyOrgIsPrivate = () => ({
+export const notifyOrgIsPrivate = (): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message:
     'This organization is private. To gain access, you must be explicitly added by an administrator.',
 })
 
-export const notifyCurrentOrgDeleted = () => ({
+export const notifyCurrentOrgDeleted = (): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message: 'Your current organization was deleted.',
 })
 
-export const notifyJSONFeedFailed = url => ({
+export const notifyJSONFeedFailed = (url: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to fetch JSON Feed for News Feed from '${url}'`,
 })
 
 //  Chronograf Admin Notifications
 //  ----------------------------------------------------------------------------
-export const notifyMappingDeleted = (id, scheme) => ({
+export const notifyMappingDeleted = (
+  id: string,
+  scheme: string
+): Notification => ({
   ...defaultSuccessNotification,
   message: `Mapping ${id}/${scheme} deleted successfully.`,
 })
 
-export const notifyChronografUserAddedToOrg = (user, organization) =>
-  `${user} has been added to ${organization} successfully.`
+export const notifyChronografUserAddedToOrg = (
+  user: string,
+  organization: string
+): string => `${user} has been added to ${organization} successfully.`
 
-export const notifyChronografUserRemovedFromOrg = (user, organization) =>
-  `${user} has been removed from ${organization} successfully.`
+export const notifyChronografUserRemovedFromOrg = (
+  user: string,
+  organization: string
+): string => `${user} has been removed from ${organization} successfully.`
 
-export const notifyChronografUserUpdated = message => ({
+export const notifyChronografUserUpdated = (message: string): Notification => ({
   ...defaultSuccessNotification,
   message,
 })
 
-export const notifyChronografOrgDeleted = orgName => ({
+export const notifyChronografOrgDeleted = (orgName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Organization ${orgName} deleted successfully.`,
 })
 
-export const notifyChronografUserDeleted = (user, isAbsoluteDelete) => ({
+export const notifyChronografUserDeleted = (
+  user: string,
+  isAbsoluteDelete: boolean
+): Notification => ({
   ...defaultSuccessNotification,
   message: `${user} has been removed from ${
     isAbsoluteDelete
@@ -235,7 +272,7 @@ export const notifyChronografUserDeleted = (user, isAbsoluteDelete) => ({
   }`,
 })
 
-export const notifyChronografUserMissingNameAndProvider = () => ({
+export const notifyChronografUserMissingNameAndProvider = (): Notification => ({
   ...defaultErrorNotification,
   type: 'warning',
   message: 'User must have a Name and Provider.',
@@ -243,220 +280,238 @@ export const notifyChronografUserMissingNameAndProvider = () => ({
 
 //  InfluxDB Admin Notifications
 //  ----------------------------------------------------------------------------
-export const notifyDBUserCreated = () => ({
+export const notifyDBUserCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'User created successfully.',
 })
 
-export const notifyDBUserCreationFailed = errorMessage =>
+export const notifyDBUserCreationFailed = (errorMessage: string): string =>
   `Failed to create User: ${errorMessage}`
 
-export const notifyDBUserDeleted = userName => ({
+export const notifyDBUserDeleted = (userName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `User "${userName}" deleted successfully.`,
 })
 
-export const notifyDBUserDeleteFailed = errorMessage =>
+export const notifyDBUserDeleteFailed = (errorMessage: string): string =>
   `Failed to delete User: ${errorMessage}`
 
-export const notifyDBUserPermissionsUpdated = () => ({
+export const notifyDBUserPermissionsUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'User Permissions updated successfully.',
 })
 
-export const notifyDBUserPermissionsUpdateFailed = errorMessage =>
-  `Failed to update User Permissions: ${errorMessage}`
+export const notifyDBUserPermissionsUpdateFailed = (
+  errorMessage: string
+): string => `Failed to update User Permissions: ${errorMessage}`
 
-export const notifyDBUserRolesUpdated = () => ({
+export const notifyDBUserRolesUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'User Roles updated successfully.',
 })
 
-export const notifyDBUserRolesUpdateFailed = errorMessage =>
+export const notifyDBUserRolesUpdateFailed = (errorMessage: string): string =>
   `Failed to update User Roles: ${errorMessage}`
 
-export const notifyDBUserPasswordUpdated = () => ({
+export const notifyDBUserPasswordUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'User Password updated successfully.',
 })
 
-export const notifyDBUserPasswordUpdateFailed = errorMessage =>
-  `Failed to update User Password: ${errorMessage}`
+export const notifyDBUserPasswordUpdateFailed = (
+  errorMessage: string
+): string => `Failed to update User Password: ${errorMessage}`
 
-export const notifyDatabaseCreated = () => ({
+export const notifyDatabaseCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Database created successfully.',
 })
 
-export const notifyDBCreationFailed = errorMessage =>
+export const notifyDBCreationFailed = (errorMessage: string): string =>
   `Failed to create Database: ${errorMessage}`
 
-export const notifyDBDeleted = databaseName => ({
+export const notifyDBDeleted = (databaseName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Database "${databaseName}" deleted successfully.`,
 })
 
-export const notifyDBDeleteFailed = errorMessage =>
+export const notifyDBDeleteFailed = (errorMessage: string): string =>
   `Failed to delete Database: ${errorMessage}`
 
-export const notifyRoleCreated = () => ({
+export const notifyRoleCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Role created successfully.',
 })
 
-export const notifyRoleCreationFailed = errorMessage =>
+export const notifyRoleCreationFailed = (errorMessage: string): string =>
   `Failed to create Role: ${errorMessage}`
 
-export const notifyRoleDeleted = roleName => ({
+export const notifyRoleDeleted = (roleName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Role "${roleName}" deleted successfully.`,
 })
 
-export const notifyRoleDeleteFailed = errorMessage =>
+export const notifyRoleDeleteFailed = (errorMessage: string): string =>
   `Failed to delete Role: ${errorMessage}`
 
-export const notifyRoleUsersUpdated = () => ({
+export const notifyRoleUsersUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Role Users updated successfully.',
 })
 
-export const notifyRoleUsersUpdateFailed = errorMessage =>
+export const notifyRoleUsersUpdateFailed = (errorMessage: string): string =>
   `Failed to update Role Users: ${errorMessage}`
 
-export const notifyRolePermissionsUpdated = () => ({
+export const notifyRolePermissionsUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Role Permissions updated successfully.',
 })
 
-export const notifyRolePermissionsUpdateFailed = errorMessage =>
-  `Failed to update Role Permissions: ${errorMessage}`
+export const notifyRolePermissionsUpdateFailed = (
+  errorMessage: string
+): string => `Failed to update Role Permissions: ${errorMessage}`
 
-export const notifyRetentionPolicyCreated = () => ({
+export const notifyRetentionPolicyCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Retention Policy created successfully.',
 })
 
-export const notifyRetentionPolicyCreationError = () => ({
+export const notifyRetentionPolicyCreationError = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Failed to create Retention Policy. Please check name and duration.',
 })
 
-export const notifyRetentionPolicyCreationFailed = errorMessage =>
-  `Failed to create Retention Policy: ${errorMessage}`
+export const notifyRetentionPolicyCreationFailed = (
+  errorMessage: string
+): string => `Failed to create Retention Policy: ${errorMessage}`
 
-export const notifyRetentionPolicyDeleted = rpName => ({
+export const notifyRetentionPolicyDeleted = (rpName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Retention Policy "${rpName}" deleted successfully.`,
 })
 
-export const notifyRetentionPolicyDeleteFailed = errorMessage =>
-  `Failed to delete Retention Policy: ${errorMessage}`
+export const notifyRetentionPolicyDeleteFailed = (
+  errorMessage: string
+): string => `Failed to delete Retention Policy: ${errorMessage}`
 
-export const notifyRetentionPolicyUpdated = () => ({
+export const notifyRetentionPolicyUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Retention Policy updated successfully.',
 })
 
-export const notifyRetentionPolicyUpdateFailed = errorMessage =>
-  `Failed to update Retention Policy: ${errorMessage}`
+export const notifyRetentionPolicyUpdateFailed = (
+  errorMessage: string
+): string => `Failed to update Retention Policy: ${errorMessage}`
 
-export const notifyQueriesError = errorMessage => ({
+export const notifyQueriesError = (errorMessage: string): Notification => ({
   ...defaultErrorNotification,
-  errorMessage,
+  message: errorMessage,
 })
 
-export const notifyRetentionPolicyCantHaveEmptyFields = () => ({
+export const notifyRetentionPolicyCantHaveEmptyFields = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Fields cannot be empty.',
 })
 
-export const notifyDatabaseDeleteConfirmationRequired = databaseName => ({
+export const notifyDatabaseDeleteConfirmationRequired = (
+  databaseName: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `Type "DELETE ${databaseName}" to confirm. This action cannot be undone.`,
 })
 
-export const notifyDBUserNamePasswordInvalid = () => ({
+export const notifyDBUserNamePasswordInvalid = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Username and/or Password too short.',
 })
 
-export const notifyRoleNameInvalid = () => ({
+export const notifyRoleNameInvalid = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Role name is too short.',
 })
 
-export const notifyDatabaseNameInvalid = () => ({
+export const notifyDatabaseNameInvalid = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Database name cannot be blank.',
 })
 
-export const notifyDatabaseNameAlreadyExists = () => ({
+export const notifyDatabaseNameAlreadyExists = (): Notification => ({
   ...defaultErrorNotification,
   message: 'A Database by this name already exists.',
 })
 
 //  Dashboard Notifications
 //  ----------------------------------------------------------------------------
-export const notifyTempVarAlreadyExists = tempVarName => ({
+export const notifyTempVarAlreadyExists = (
+  tempVarName: string
+): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
   message: `Variable '${tempVarName}' already exists. Please enter a new value.`,
 })
 
-export const notifyDashboardNotFound = dashboardID => ({
+export const notifyDashboardNotFound = (dashboardID: number): Notification => ({
   ...defaultErrorNotification,
   icon: 'dash-h',
   message: `Dashboard ${dashboardID} could not be found`,
 })
 
-export const notifyDashboardDeleted = name => ({
+export const notifyDashboardDeleted = (name: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
   message: `Dashboard ${name} deleted successfully.`,
 })
 
-export const notifyDashboardExported = name => ({
+export const notifyDashboardExported = (name: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
   message: `Dashboard ${name} exported successfully.`,
 })
 
-export const notifyDashboardExportFailed = (name, errorMessage) => ({
+export const notifyDashboardExportFailed = (
+  name: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message: `Failed to export Dashboard ${name}: ${errorMessage}.`,
 })
 
-export const notifyDashboardImported = name => ({
+export const notifyDashboardImported = (name: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
   message: `Dashboard ${name} imported successfully.`,
 })
 
-export const notifyDashboardImportFailed = (fileName, errorMessage) => ({
+export const notifyDashboardImportFailed = (
+  fileName: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   duration: INFINITE,
   message: `Failed to import Dashboard from file ${fileName}: ${errorMessage}.`,
 })
 
-export const notifyDashboardDeleteFailed = (name, errorMessage) =>
-  `Failed to delete Dashboard ${name}: ${errorMessage}.`
+export const notifyDashboardDeleteFailed = (
+  name: string,
+  errorMessage: string
+): string => `Failed to delete Dashboard ${name}: ${errorMessage}.`
 
-export const notifyCellAdded = name => ({
+export const notifyCellAdded = (name: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
   duration: 1900,
   message: `Added "${name}" to dashboard.`,
 })
 
-export const notifyCellDeleted = name => ({
+export const notifyCellDeleted = (name: string): Notification => ({
   ...defaultDeletionNotification,
   icon: 'dash-h',
   duration: 1900,
   message: `Deleted "${name}" from dashboard.`,
 })
 
-export const notifyBuilderDisabled = () => ({
+export const notifyBuilderDisabled = (): Notification => ({
   type: 'info',
   icon: 'graphline',
   duration: 7500,
@@ -465,249 +520,280 @@ export const notifyBuilderDisabled = () => ({
 
 //  Template Variables & URL Queries
 //  ----------------------------------------------------------------------------
-export const notifyInvalidTempVarValueInURLQuery = ({key, value}) => ({
+interface KeyValueString {
+  key: string
+  value: string
+}
+export const notifyInvalidTempVarValueInURLQuery = ({
+  key,
+  value,
+}: KeyValueString): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
   message: `Invalid URL query value of '${value}' supplied for template variable '${key}'.`,
 })
 
-export const notifyInvalidTimeRangeValueInURLQuery = () => ({
+export const notifyInvalidTimeRangeValueInURLQuery = (): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
   message: `Invalid URL query value supplied for lower or upper time range.`,
 })
 
-export const notifyInvalidZoomedTimeRangeValueInURLQuery = () => ({
+export const notifyInvalidZoomedTimeRangeValueInURLQuery = (): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
   message: `Invalid URL query value supplied for zoomed lower or zoomed upper time range.`,
 })
 
-export const notifyViewerUnauthorizedToSetTempVars = () => ({
+export const notifyViewerUnauthorizedToSetTempVars = (): Notification => ({
   ...defaultErrorNotification,
   message: `Viewer role unauthorized to override template variable values from URL.`,
 })
 
 //  Rule Builder Notifications
 //  ----------------------------------------------------------------------------
-export const notifyAlertRuleCreated = ruleName => ({
+export const notifyAlertRuleCreated = (ruleName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `${ruleName} created successfully.`,
 })
 
-export const notifyAlertRuleCreateFailed = (ruleName, errorMessage) => ({
+export const notifyAlertRuleCreateFailed = (
+  ruleName: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `There was a problem creating ${ruleName}: ${errorMessage}`,
 })
 
-export const notifyAlertRuleUpdated = ruleName => ({
+export const notifyAlertRuleUpdated = (ruleName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `${ruleName} saved successfully.`,
 })
 
-export const notifyAlertRuleUpdateFailed = (ruleName, errorMessage) => ({
+export const notifyAlertRuleUpdateFailed = (
+  ruleName: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `There was a problem saving ${ruleName}: ${errorMessage}`,
 })
 
-export const notifyAlertRuleDeleted = ruleName => ({
+export const notifyAlertRuleDeleted = (ruleName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `${ruleName} deleted successfully.`,
 })
 
-export const notifyAlertRuleDeleteFailed = ruleName => ({
+export const notifyAlertRuleDeleteFailed = (
+  ruleName: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `${ruleName} could not be deleted.`,
 })
 
-export const notifyAlertRuleStatusUpdated = (ruleName, updatedStatus) => ({
+export const notifyAlertRuleStatusUpdated = (
+  ruleName: string,
+  updatedStatus: string
+): Notification => ({
   ...defaultSuccessNotification,
   message: `${ruleName} ${updatedStatus} successfully.`,
 })
 
-export const notifyAlertRuleStatusUpdateFailed = (ruleName, updatedStatus) => ({
+export const notifyAlertRuleStatusUpdateFailed = (
+  ruleName: string,
+  updatedStatus: string
+): Notification => ({
   ...defaultSuccessNotification,
   message: `${ruleName} could not be ${updatedStatus}.`,
 })
 
-export const notifyAlertRuleRequiresQuery = () =>
+export const notifyAlertRuleRequiresQuery = (): string =>
   'Please select a Database, Measurement, and Field.'
 
-export const notifyAlertRuleRequiresConditionValue = () =>
+export const notifyAlertRuleRequiresConditionValue = (): string =>
   'Please enter a value in the Conditions section.'
 
-export const notifyAlertRuleDeadmanInvalid = () =>
+export const notifyAlertRuleDeadmanInvalid = (): string =>
   'Deadman rules require a Database and Measurement.'
 
 //  Kapacitor Configuration Notifications
 //  ----------------------------------------------------------------------------
-export const notifyKapacitorNameAlreadyTaken = kapacitorName => ({
+export const notifyKapacitorNameAlreadyTaken = (
+  kapacitorName: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `There is already a Kapacitor Connection named "${kapacitorName}".`,
 })
 
-export const notifyCouldNotFindKapacitor = () => ({
+export const notifyCouldNotFindKapacitor = (): Notification => ({
   ...defaultErrorNotification,
   message: 'We could not find a Kapacitor configuration for this source.',
 })
 
-export const notifyRefreshKapacitorFailed = () => ({
+export const notifyRefreshKapacitorFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'There was an error getting the Kapacitor configuration.',
 })
 
-export const notifyAlertEndpointSaved = endpoint => ({
+export const notifyAlertEndpointSaved = (endpoint: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Alert configuration for ${endpoint} saved successfully.`,
 })
 
-export const notifyAlertEndpointSaveFailed = (endpoint, errorMessage) => ({
+export const notifyAlertEndpointSaveFailed = (
+  endpoint: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `There was an error saving the alert configuration for ${endpoint}: ${errorMessage}`,
 })
 
 export const notifyAlertEndpointDeleteFailed = (
-  endpoint,
-  config,
-  errorMessage
-) => ({
+  endpoint: string,
+  config: string,
+  errorMessage: string
+): Notification => ({
   ...defaultErrorNotification,
   message: `There was an error deleting the alert configuration for ${endpoint}/${config}: ${errorMessage}`,
 })
 
-export const notifyAlertEndpointDeleted = (endpoint, config) => ({
+export const notifyAlertEndpointDeleted = (
+  endpoint: string,
+  config: string
+): Notification => ({
   ...defaultSuccessNotification,
   message: `Alert configuration for ${endpoint}/${config} deleted successfully.`,
 })
 
-export const notifyTestAlertSent = endpoint => ({
+export const notifyTestAlertSent = (endpoint: string): Notification => ({
   ...defaultSuccessNotification,
   duration: TEN_SECONDS,
   message: `Test Alert sent to ${endpoint}. If the Alert does not reach its destination, please check your endpoint configuration settings.`,
 })
 
-export const notifyTestAlertFailed = (endpoint, errorMessage?) => ({
+export const notifyTestAlertFailed = (
+  endpoint: string,
+  errorMessage: string = ''
+): Notification => ({
   ...defaultErrorNotification,
-  message: `There was an error sending a Test Alert to ${endpoint}${
-    errorMessage ? `: ${errorMessage}` : '.'
-  }`,
+  message: `There was an error sending a Test Alert to ${endpoint} ${errorMessage}.`,
 })
 
-export const notifyInvalidBatchSizeValue = () => ({
+export const notifyInvalidBatchSizeValue = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Batch Size cannot be empty.',
 })
 
-export const notifyKapacitorConnectionFailed = () => ({
+export const notifyKapacitorConnectionFailed = (): Notification => ({
   ...defaultErrorNotification,
   message:
     'Could not connect to Kapacitor. Check your connection settings in the Configuration page.',
 })
 
-export const notifyKapacitorCreated = () => ({
+export const notifyKapacitorCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message:
     'Connected to Kapacitor successfully! Configuring endpoints is optional.',
 })
 
-export const notifyKapacitorCreateFailed = () => ({
+export const notifyKapacitorCreateFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'There was a problem connecting to Kapacitor.',
 })
 
-export const notifyKapacitorUpdated = () => ({
+export const notifyKapacitorUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'Kapacitor Connection updated successfully.',
 })
 
-export const notifyKapacitorUpdateFailed = () => ({
+export const notifyKapacitorUpdateFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'There was a problem updating the Kapacitor Connection.',
 })
 
 //  TICKscript Notifications
 //  ----------------------------------------------------------------------------
-export const notifyTickScriptCreated = () => ({
+export const notifyTickScriptCreated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'TICKscript successfully created.',
 })
 
-export const notifyTickscriptCreationFailed = () =>
+export const notifyTickscriptCreationFailed = (): string =>
   'Failed to create TICKscript.'
 
-export const notifyTickscriptUpdated = () => ({
+export const notifyTickscriptUpdated = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'TICKscript successfully updated.',
 })
 
-export const notifyTickscriptUpdateFailed = () => 'Failed to update TICKscript.'
+export const notifyTickscriptUpdateFailed = (): string =>
+  'Failed to update TICKscript.'
 
-export const notifyTickscriptLoggingUnavailable = () => ({
+export const notifyTickscriptLoggingUnavailable = (): Notification => ({
   type: 'warning',
   icon: 'alert-triangle',
   duration: INFINITE,
   message: 'Kapacitor version 1.4 required to view TICKscript logs',
 })
 
-export const notifyTickscriptLoggingError = () => ({
+export const notifyTickscriptLoggingError = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Could not collect kapacitor logs',
 })
 
-export const notifyKapacitorNotFound = () => ({
+export const notifyKapacitorNotFound = (): Notification => ({
   ...defaultErrorNotification,
   message: 'We could not find a Kapacitor configuration for this source.',
 })
 
 // Flux notifications
-export const validateSuccess = () => ({
+export const validateSuccess = (): Notification => ({
   ...defaultSuccessNotification,
   message: 'No errors found. Happy Happy Joy Joy!',
 })
 
-export const notifyCopyToClipboardSuccess = text => ({
+export const notifyCopyToClipboardSuccess = (text: string): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
   message: `'${text}' has been copied to clipboard.`,
 })
 
-export const notifyCopyToClipboardFailed = text => ({
+export const notifyCopyToClipboardFailed = (text: string): Notification => ({
   ...defaultErrorNotification,
   message: `'${text}' was not copied to clipboard.`,
 })
 
 // Service notifications
-export const couldNotGetServices = {
+export const couldNotGetServices: Notification = {
   ...defaultErrorNotification,
   message: 'We could not get services',
 }
 
-export const fluxCreated = {
+export const fluxCreated: Notification = {
   ...defaultSuccessNotification,
   message: 'Flux Connection Created.  Script your heart out!',
 }
 
-export const fluxNotCreated = (message: string) => ({
+export const fluxNotCreated = (message: string): Notification => ({
   ...defaultErrorNotification,
   message,
 })
 
-export const fluxNotUpdated = (message: string) => ({
+export const fluxNotUpdated = (message: string): Notification => ({
   ...defaultErrorNotification,
   message,
 })
 
-export const fluxUpdated = {
+export const fluxUpdated: Notification = {
   ...defaultSuccessNotification,
   message: 'Connection Updated. Rejoice!',
 }
 
-export const fluxTimeSeriesError = (message: string) => ({
+export const fluxTimeSeriesError = (message: string): Notification => ({
   ...defaultErrorNotification,
   message: `Could not get data: ${message}`,
 })
 
-export const fluxResponseTruncatedError = () => {
+export const fluxResponseTruncatedError = (): Notification => {
   const BYTES_TO_MB = 1 / 1e6
   const APPROX_MAX_RESPONSE_MB = +(MAX_RESPONSE_BYTES * BYTES_TO_MB).toFixed(2)
 
diff --git a/ui/src/sources/containers/ManageSources.tsx b/ui/src/sources/containers/ManageSources.tsx
index 8a701210f..d6336d47a 100644
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@@ -19,7 +19,7 @@ import {Source, NotificationFunc} from 'src/types'
 interface Props {
   source: Source
   sources: Source[]
-  notify: NotificationFunc
+  notify: (n: NotificationFunc) => void
   deleteKapacitor: actions.DeleteKapacitorAsync
   fetchKapacitors: actions.FetchKapacitorsAsync
   removeAndLoadSources: actions.RemoveAndLoadSources
diff --git a/ui/src/sources/containers/SourcePage.tsx b/ui/src/sources/containers/SourcePage.tsx
new file mode 100644
index 000000000..9212b9acf
--- /dev/null
+++ b/ui/src/sources/containers/SourcePage.tsx
@@ -0,0 +1,302 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {withRouter} from 'react-router'
+import _ from 'lodash'
+import {getSource} from 'src/shared/apis'
+import {createSource, updateSource} from 'src/shared/apis'
+import {
+  addSource as addSourceAction,
+  updateSource as updateSourceAction,
+} from 'src/shared/actions/sources'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import Notifications from 'src/shared/components/Notifications'
+import SourceForm from 'src/sources/components/SourceForm'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import {DEFAULT_SOURCE} from 'src/shared/constants'
+const initialPath = '/sources/new'
+
+import {
+  notifyErrorConnectingToSource,
+  notifySourceCreationSucceeded,
+  notifySourceCreationFailed,
+  notifySourceUdpated,
+  notifySourceUdpateFailed,
+} from 'src/shared/copy/notifications'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Source} from 'src/types'
+
+interface Props {
+  params: shape({
+    id: string,
+    sourceID: string,
+  }),
+  router: shape({
+    push: func.isRequired,
+  }).isRequired,
+  location: shape({
+    query: shape({
+      redirectPath: string,
+    }).isRequired,
+  }).isRequired,
+  notify: func.isRequired,
+  addSource: func.isRequired,
+  updateSource: func.isRequired,}
+
+interface State { 
+  isLoading: boolean
+  source: Source
+  editMode: boolean
+  isInitialSource: boolean}
+  
+@ErrorHandling
+class SourcePage extends Component<Props, State> {
+  constructor(props:Props) {
+    super(props)
+
+    this.state = {
+      isLoading: true,
+      source: DEFAULT_SOURCE,
+      editMode: props.params.id !== undefined,
+      isInitialSource: props.router.location.pathname === initialPath,
+    }
+  }
+
+  componentDidMount() {
+    const {editMode} = this.state
+    const {params, notify} = this.props
+
+    if (!editMode) {
+      return this.setState({isLoading: false})
+    }
+
+    getSource(params.id)
+      .then(({data: source}) => {
+        this.setState({
+          source: {...DEFAULT_SOURCE, ...source},
+          isLoading: false,
+        })
+      })
+      .catch(error => {
+        notify(notifyErrorConnectingToSource(this._parseError(error)))
+        this.setState({isLoading: false})
+      })
+  }
+
+  handleInputChange = e => {
+    let val = e.target.value
+    const name = e.target.name
+
+    if (e.target.type === 'checkbox') {
+      val = e.target.checked
+    }
+
+    this.setState(prevState => {
+      const source = {
+        ...prevState.source,
+        [name]: val,
+      }
+
+      return {...prevState, source}
+    })
+  }
+
+  handleBlurSourceURL = () => {
+    const {source, editMode} = this.state
+    if (editMode) {
+      this.setState(this._normalizeSource)
+      return
+    }
+
+    if (!source.url) {
+      return
+    }
+
+    this.setState(this._normalizeSource, this._createSourceOnBlur)
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    const {isCreated, editMode} = this.state
+    const isNewSource = !editMode
+
+    if (!isCreated && isNewSource) {
+      return this.setState(this._normalizeSource, this._createSource)
+    }
+
+    this.setState(this._normalizeSource, this._updateSource)
+  }
+
+  gotoPurgatory = () => {
+    const {router} = this.props
+    router.push('/purgatory')
+  }
+
+  _normalizeSource({source}) {
+    const url = source.url.trim()
+    if (source.url.startsWith('http')) {
+      return {source: {...source, url}}
+    }
+    return {source: {...source, url: `http://${url}`}}
+  }
+
+  _createSourceOnBlur = () => {
+    const {source} = this.state
+    // if there is a type on source it has already been created
+    if (source.type) {
+      return
+    }
+    createSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.addSource(sourceFromServer)
+        this.setState({
+          source: {...DEFAULT_SOURCE, ...sourceFromServer},
+          isCreated: true,
+        })
+      })
+      .catch(err => {
+        // dont want to flash this until they submit
+        const error = this._parseError(err)
+        console.error('Error creating InfluxDB connection: ', error)
+      })
+  }
+
+  _createSource = () => {
+    const {source} = this.state
+    const {notify} = this.props
+    createSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.addSource(sourceFromServer)
+        this._redirect(sourceFromServer)
+        notify(notifySourceCreationSucceeded(source.name))
+      })
+      .catch(error => {
+        notify(notifySourceCreationFailed(source.name, this._parseError(error)))
+      })
+  }
+
+  _updateSource = () => {
+    const {source} = this.state
+    const {notify} = this.props
+    updateSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.updateSource(sourceFromServer)
+        this._redirect(sourceFromServer)
+        notify(notifySourceUdpated(source.name))
+      })
+      .catch(error => {
+        notify(notifySourceUdpateFailed(source.name, this._parseError(error)))
+      })
+  }
+
+  _redirect = source => {
+    const {isInitialSource} = this.state
+    const {params, router} = this.props
+
+    if (isInitialSource) {
+      return this._redirectToApp(source)
+    }
+
+    router.push(`/sources/${params.sourceID}/manage-sources`)
+  }
+
+  _redirectToApp = source => {
+    const {location, router} = this.props
+    const {redirectPath} = location.query
+
+    if (!redirectPath) {
+      return router.push(`/sources/${source.id}/hosts`)
+    }
+
+    const fixedPath = redirectPath.replace(
+      /\/sources\/[^/]*/,
+      `/sources/${source.id}`
+    )
+    return router.push(fixedPath)
+  }
+
+  _parseError = error => {
+    return _.get(error, ['data', 'message'], error)
+  }
+
+  render() {
+    const {isLoading, source, editMode, isInitialSource} = this.state
+
+    if (isLoading) {
+      return <div className="page-spinner" />
+    }
+
+    return (
+      <div className={`${isInitialSource ? '' : 'page'}`}>
+        <Notifications />
+        <div className="page-header">
+          <div className="page-header__container page-header__source-page">
+            <div className="page-header__col-md-8">
+              <div className="page-header__left">
+                <h1 className="page-header__title">
+                  {editMode
+                    ? 'Configure InfluxDB Connection'
+                    : 'Add a New InfluxDB Connection'}
+                </h1>
+              </div>
+              {isInitialSource ? null : (
+                <div className="page-header__right">
+                  <SourceIndicator />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <FancyScrollbar className="page-contents">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-8 col-md-offset-2">
+                <div className="panel">
+                  <SourceForm
+                    source={source}
+                    editMode={editMode}
+                    onInputChange={this.handleInputChange}
+                    onSubmit={this.handleSubmit}
+                    onBlurSourceURL={this.handleBlurSourceURL}
+                    isInitialSource={isInitialSource}
+                    gotoPurgatory={this.gotoPurgatory}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </FancyScrollbar>
+      </div>
+    )
+  }
+}
+
+const {func, shape, string} = PropTypes
+
+SourcePage.propTypes = {
+  params: shape({
+    id: string,
+    sourceID: string,
+  }),
+  router: shape({
+    push: func.isRequired,
+  }).isRequired,
+  location: shape({
+    query: shape({
+      redirectPath: string,
+    }).isRequired,
+  }).isRequired,
+  notify: func.isRequired,
+  addSource: func.isRequired,
+  updateSource: func.isRequired,
+}
+
+const mapDispatchToProps = dispatch => ({
+  notify: bindActionCreators(notifyAction, dispatch),
+  addSource: bindActionCreators(addSourceAction, dispatch),
+  updateSource: bindActionCreators(updateSourceAction, dispatch),
+})
+export default connect(null, mapDispatchToProps)(withRouter(SourcePage))
diff --git a/ui/src/status/actions/index.ts b/ui/src/status/actions/index.ts
new file mode 100644
index 000000000..40b8cb3f8
--- /dev/null
+++ b/ui/src/status/actions/index.ts
@@ -0,0 +1,76 @@
+// he is a library for safely encoding and decoding HTML Entities
+import he from 'he'
+
+import {fetchJSONFeed as fetchJSONFeedAJAX} from 'src/status/apis'
+
+import {notify} from 'src/shared/actions/notifications'
+import {notifyJSONFeedFailed} from 'src/shared/copy/notifications'
+
+import {JSONFeedData} from 'src/types'
+
+export enum ActionTypes {
+  FETCH_JSON_FEED_REQUESTED = 'FETCH_JSON_FEED_REQUESTED',
+  FETCH_JSON_FEED_COMPLETED = 'FETCH_JSON_FEED_COMPLETED',
+  FETCH_JSON_FEED_FAILED = 'FETCH_JSON_FEED_FAILED',
+}
+
+interface FetchJSONFeedRequestedAction {
+  type: ActionTypes.FETCH_JSON_FEED_REQUESTED
+}
+
+interface FetchJSONFeedCompletedAction {
+  type: ActionTypes.FETCH_JSON_FEED_COMPLETED
+  payload: {data: JSONFeedData}
+}
+
+interface FetchJSONFeedFailedAction {
+  type: ActionTypes.FETCH_JSON_FEED_FAILED
+}
+
+export type Action =
+  | FetchJSONFeedRequestedAction
+  | FetchJSONFeedCompletedAction
+  | FetchJSONFeedFailedAction
+
+const fetchJSONFeedRequested = (): FetchJSONFeedRequestedAction => ({
+  type: ActionTypes.FETCH_JSON_FEED_REQUESTED,
+})
+
+const fetchJSONFeedCompleted = (
+  data: JSONFeedData
+): FetchJSONFeedCompletedAction => ({
+  type: ActionTypes.FETCH_JSON_FEED_COMPLETED,
+  payload: {data},
+})
+
+const fetchJSONFeedFailed = (): FetchJSONFeedFailedAction => ({
+  type: ActionTypes.FETCH_JSON_FEED_FAILED,
+})
+
+export const fetchJSONFeedAsync = (url: string) => async (
+  dispatch
+): Promise<void> => {
+  dispatch(fetchJSONFeedRequested())
+  try {
+    const {data} = await fetchJSONFeedAJAX(url)
+    // data could be from a webpage, and thus would be HTML
+    if (typeof data === 'string' || !data) {
+      dispatch(fetchJSONFeedFailed())
+    } else {
+      // decode HTML entities from response text
+      const decodedData = {
+        ...data,
+        items: data.items.map(item => {
+          item.title = he.decode(item.title)
+          item.content_text = he.decode(item.content_text)
+          return item
+        }),
+      }
+      dispatch(fetchJSONFeedCompleted(decodedData))
+    }
+  } catch (error) {
+    console.error(error)
+    dispatch(fetchJSONFeedFailed())
+    dispatch(notify(notifyJSONFeedFailed(url)))
+  }
+}
diff --git a/ui/src/status/components/GettingStarted.tsx b/ui/src/status/components/GettingStarted.tsx
new file mode 100644
index 000000000..cc3919a26
--- /dev/null
+++ b/ui/src/status/components/GettingStarted.tsx
@@ -0,0 +1,97 @@
+import React, {Component} from 'react'
+
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+@ErrorHandling
+class GettingStarted extends Component {
+  public render() {
+    return (
+      <FancyScrollbar className="getting-started--container">
+        <div className="getting-started">
+          <div className="getting-started--cell intro">
+            <h5>
+              <span className="icon cubo-uniform" /> Welcome to Chronograf!
+            </h5>
+            <p>Follow the links below to explore Chronograf’s features.</p>
+          </div>
+          <div className="getting-started--cell">
+            <p>
+              <strong>Install the TICK Stack</strong>
+              <br />Save some time and use this handy tool to install the rest
+              of the stack:
+            </p>
+            <p>
+              <a href="https://github.com/influxdata/sandbox" target="_blank">
+                <span className="icon github" /> TICK Sandbox
+              </a>
+            </p>
+          </div>
+          <div className="getting-started--cell">
+            <p>
+              <strong>Guides</strong>
+            </p>
+            <p>
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/create-a-dashboard/"
+                target="_blank"
+              >
+                Create a Dashboard
+              </a>
+              <br />
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/create-a-kapacitor-alert/"
+                target="_blank"
+              >
+                Create a Kapacitor Alert
+              </a>
+              <br />
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/configure-kapacitor-event-handlers/"
+                target="_blank"
+              >
+                Configure Kapacitor Event Handlers
+              </a>
+              <br />
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/transition-web-admin-interface/"
+                target="_blank"
+              >
+                Transition from InfluxDB's Web Admin Interface
+              </a>
+              <br />
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/dashboard-template-variables/"
+                target="_blank"
+              >
+                Dashboard Template Variables
+              </a>
+              <br />
+              <a
+                href="https://docs.influxdata.com/chronograf/latest/guides/advanced-kapacitor/"
+                target="_blank"
+              >
+                Advanced Kapacitor Usage
+              </a>
+            </p>
+          </div>
+          <div className="getting-started--cell">
+            <p>
+              <strong>Questions & Comments</strong>
+            </p>
+            <p>
+              If you have any product feedback please open a GitHub issue and
+              we'll take a look. For any questions or other issues try posting
+              on our&nbsp;
+              <a href="https://community.influxdata.com/" target="_blank">
+                Community Forum
+              </a>.
+            </p>
+          </div>
+        </div>
+      </FancyScrollbar>
+    )
+  }
+}
+
+export default GettingStarted
diff --git a/ui/src/status/components/JSONFeedReader.tsx b/ui/src/status/components/JSONFeedReader.tsx
new file mode 100644
index 000000000..8b1baab96
--- /dev/null
+++ b/ui/src/status/components/JSONFeedReader.tsx
@@ -0,0 +1,45 @@
+import React, {SFC} from 'react'
+import {JSONFeedData} from 'src/types'
+
+import moment from 'moment'
+
+interface Props {
+  data: JSONFeedData
+}
+
+const JSONFeedReader: SFC<Props> = ({data}) =>
+  data && data.items ? (
+    <div className="newsfeed">
+      {data.items
+        ? data.items.map(
+            ({
+              id,
+              date_published: datePublished,
+              url,
+              title,
+              author: {name},
+              image,
+              content_text: contentText,
+            }) => (
+              <div key={id} className="newsfeed--post">
+                <div className="newsfeed--date">
+                  {`${moment(datePublished).format('MMM DD')}`}
+                </div>
+                <div className="newsfeed--post-title">
+                  <a href={url} target="_blank">
+                    <h6>{title}</h6>
+                  </a>
+                  <span>by {name}</span>
+                </div>
+                <div className="newsfeed--content">
+                  {image ? <img src={image} /> : null}
+                  <p>{contentText}</p>
+                </div>
+              </div>
+            )
+          )
+        : null}
+    </div>
+  ) : null
+
+export default JSONFeedReader
diff --git a/ui/src/status/components/NewsFeed.tsx b/ui/src/status/components/NewsFeed.tsx
new file mode 100644
index 000000000..09877f97e
--- /dev/null
+++ b/ui/src/status/components/NewsFeed.tsx
@@ -0,0 +1,83 @@
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+
+import {fetchJSONFeedAsync} from 'src/status/actions'
+
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import JSONFeedReader from 'src/status/components/JSONFeedReader'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {JSONFeedData} from 'src/types'
+
+interface Props {
+  hasCompletedFetchOnce: boolean
+  isFetching: boolean
+  isFailed: boolean
+  data: JSONFeedData
+  fetchJSONFeed: (statusFeedURL: string) => void
+  statusFeedURL: string
+}
+
+@ErrorHandling
+class NewsFeed extends Component<Props> {
+  public render() {
+    const {hasCompletedFetchOnce, isFetching, isFailed, data} = this.props
+
+    if (!hasCompletedFetchOnce) {
+      return isFailed ? (
+        <div className="graph-empty">
+          <p>Failed to load News Feed</p>
+        </div>
+      ) : (
+        // TODO: Factor this out of here and AutoRefresh
+        <div className="graph-fetching">
+          <div className="graph-spinner" />
+        </div>
+      )
+    }
+
+    return (
+      <FancyScrollbar autoHide={false} className="newsfeed--container">
+        {isFetching ? (
+          // TODO: Factor this out of here and AutoRefresh
+          <div className="graph-panel__refreshing">
+            <div />
+            <div />
+            <div />
+          </div>
+        ) : null}
+        {isFailed ? (
+          <div className="graph-empty">
+            <p>Failed to refresh News Feed</p>
+          </div>
+        ) : null}
+        <JSONFeedReader data={data} />
+      </FancyScrollbar>
+    )
+  }
+
+  // TODO: implement interval polling a la AutoRefresh
+  public componentDidMount() {
+    const {statusFeedURL, fetchJSONFeed} = this.props
+
+    fetchJSONFeed(statusFeedURL)
+  }
+}
+const mstp = ({
+  links: {
+    external: {statusFeed: statusFeedURL},
+  },
+  JSONFeed: {hasCompletedFetchOnce, isFetching, isFailed, data},
+}) => ({
+  hasCompletedFetchOnce,
+  isFetching,
+  isFailed,
+  data,
+  statusFeedURL,
+})
+
+const mdtp = {
+  fetchJSONFeed: fetchJSONFeedAsync,
+}
+
+export default connect(mstp, mdtp)(NewsFeed)
diff --git a/ui/src/status/constants/index.ts b/ui/src/status/constants/index.ts
new file mode 100644
index 000000000..01421d10c
--- /dev/null
+++ b/ui/src/status/constants/index.ts
@@ -0,0 +1 @@
+export const RECENT_ALERTS_LIMIT = 30
diff --git a/ui/src/status/containers/StatusPage.tsx b/ui/src/status/containers/StatusPage.tsx
new file mode 100644
index 000000000..348f69b1e
--- /dev/null
+++ b/ui/src/status/containers/StatusPage.tsx
@@ -0,0 +1,108 @@
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import LayoutRenderer from 'src/shared/components/LayoutRenderer'
+
+import {fixtureStatusPageCells} from 'src/status/fixtures'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {
+  TEMP_VAR_DASHBOARD_TIME,
+  TEMP_VAR_UPPER_DASHBOARD_TIME,
+} from 'src/shared/constants'
+import {Source, TimeRange, Cell} from 'src/types'
+
+interface State {
+  cells: Cell[]
+}
+
+interface Props {
+  source: Source
+  autoRefresh: number
+  timeRange: TimeRange
+}
+
+@ErrorHandling
+class StatusPage extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      cells: fixtureStatusPageCells,
+    }
+  }
+
+  public render() {
+    const {source, autoRefresh, timeRange} = this.props
+    const {cells} = this.state
+
+    const dashboardTime = {
+      id: 'dashtime',
+      tempVar: TEMP_VAR_DASHBOARD_TIME,
+      type: 'constant',
+      values: [
+        {
+          value: timeRange.lower,
+          type: 'constant',
+          selected: true,
+        },
+      ],
+    }
+
+    const upperDashboardTime = {
+      id: 'upperdashtime',
+      tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
+      type: 'constant',
+      values: [
+        {
+          value: 'now()',
+          type: 'constant',
+          selected: true,
+        },
+      ],
+    }
+
+    const templates = [dashboardTime, upperDashboardTime]
+
+    return (
+      <div className="page">
+        <div className="page-header full-width">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">Status</h1>
+            </div>
+            <div className="page-header__right">
+              <SourceIndicator />
+            </div>
+          </div>
+        </div>
+        <FancyScrollbar className="page-contents">
+          <div className="dashboard container-fluid full-width">
+            {cells.length ? (
+              <LayoutRenderer
+                autoRefresh={autoRefresh}
+                timeRange={timeRange}
+                cells={cells}
+                templates={templates}
+                source={source}
+                shouldNotBeEditable={true}
+                isStatusPage={true}
+                isEditable={false}
+              />
+            ) : (
+              <span>Loading Status Page...</span>
+            )}
+          </div>
+        </FancyScrollbar>
+      </div>
+    )
+  }
+}
+
+const mstp = ({statusUI: {autoRefresh, timeRange}}) => ({
+  autoRefresh,
+  timeRange,
+})
+
+export default connect(mstp, null)(StatusPage)
diff --git a/ui/src/status/reducers/JSONFeed.ts b/ui/src/status/reducers/JSONFeed.ts
new file mode 100644
index 000000000..6f5a65a9d
--- /dev/null
+++ b/ui/src/status/reducers/JSONFeed.ts
@@ -0,0 +1,51 @@
+import {JSONFeedData} from 'src/types'
+import {Action, ActionTypes} from 'src/status/actions'
+
+export interface State {
+  hasCompletedFetchOnce: boolean
+  isFetching: boolean
+  isFailed: boolean
+  data: JSONFeedData
+}
+
+const initialState: State = {
+  hasCompletedFetchOnce: false,
+  isFetching: false,
+  isFailed: false,
+  data: null,
+}
+
+const JSONFeedReducer = (state: State = initialState, action: Action) => {
+  switch (action.type) {
+    case ActionTypes.FETCH_JSON_FEED_REQUESTED: {
+      return {...state, isFetching: true, isFailed: false}
+    }
+
+    case ActionTypes.FETCH_JSON_FEED_COMPLETED: {
+      const {data} = action.payload
+
+      return {
+        ...state,
+        hasCompletedFetchOnce: true,
+        isFetching: false,
+        isFailed: false,
+        data,
+      }
+    }
+
+    case ActionTypes.FETCH_JSON_FEED_FAILED: {
+      return {
+        ...state,
+        isFetching: false,
+        isFailed: true,
+        data: null,
+      }
+    }
+
+    default: {
+      return state
+    }
+  }
+}
+
+export default JSONFeedReducer
diff --git a/ui/src/status/reducers/index.ts b/ui/src/status/reducers/index.ts
new file mode 100644
index 000000000..ee4264828
--- /dev/null
+++ b/ui/src/status/reducers/index.ts
@@ -0,0 +1,4 @@
+import JSONFeed from 'src/status/reducers/JSONFeed'
+export default {
+  JSONFeed,
+}
diff --git a/ui/src/types/notifications.ts b/ui/src/types/notifications.ts
index 622b1b3b2..10f1b556c 100644
--- a/ui/src/types/notifications.ts
+++ b/ui/src/types/notifications.ts
@@ -6,6 +6,6 @@ export interface Notification {
   message: string
 }
 
-export type NotificationFunc = (message: any) => Notification
+export type NotificationFunc = (message: string) => Notification
 
 export type NotificationAction = (message: Notification) => void
diff --git a/ui/src/types/status.ts b/ui/src/types/status.ts
new file mode 100644
index 000000000..66efacedd
--- /dev/null
+++ b/ui/src/types/status.ts
@@ -0,0 +1,22 @@
+interface JSONFeedDataItem {
+  id: string
+  url: string
+  title: string
+  content_text: string
+  date_published: string
+  date_modified: string
+  image: string
+  author: {
+    name: string
+  }
+}
+
+export interface JSONFeedData {
+  version: string
+  user_comment: string
+  home_page_url: string
+  feed_url: string
+  title: string
+  description: string
+  items: JSONFeedDataItem[]
+}
diff --git a/ui/test/normalizers/dashboardTime.test.js b/ui/test/normalizers/dashboardTime.test.js
index d63055201..ab439144e 100644
--- a/ui/test/normalizers/dashboardTime.test.js
+++ b/ui/test/normalizers/dashboardTime.test.js
@@ -30,7 +30,7 @@ describe('Normalizers.DashboardTime', () => {
   })
 
   it('can remove timeRanges with incorrect dashboardID', () => {
-    const ranges = [{dashboardID: '1', upper, lower}, timeRange]
+    const ranges = [{dashboardID: 1, upper, lower}, timeRange]
 
     const actual = normalizer(ranges)
     const expected = [timeRange]

From acdd7a19b52fc7af4e83e80d94d8421e5265b254 Mon Sep 17 00:00:00 2001
From: Ricardo N Feliciano <FelicianoTech@gmail.com>
Date: Mon, 18 Jun 2018 17:56:17 -0400
Subject: [PATCH 051/100] CircleCI 2.0 (#3710)

* Migrate to CircleCI 2.0.

* Comment out filters to test all jobs.

* Restore deploy job filters.
---
 .circleci/config.yml | 138 +++++++++++++++++++++++++++++++++++++++++++
 circle.yml           |  91 ----------------------------
 2 files changed, 138 insertions(+), 91 deletions(-)
 create mode 100644 .circleci/config.yml
 delete mode 100644 circle.yml

diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 000000000..f05cf6f5e
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,138 @@
+workflows:
+  version: 2
+  main:
+    jobs:
+      - build
+      - deploy-nightly:
+          requires:
+            - build
+          filters:
+            branches:
+              only: master
+      - deploy-pre-release:
+          requires:
+            - build
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^[0-9]+(\.[0-9]+)*(\S*)([a|rc|beta]([0-9]+))+$/
+      - deploy-release:
+          requires:
+            - build
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^[0-9]+(\.[0-9]+)*$/
+
+
+version: 2
+jobs:
+  build:
+    environment:
+      DOCKER_TAG: chronograf-20180327
+    machine: true
+    steps:
+      - checkout
+      - run: |
+          ls -lah
+          pwd
+      - run: ./etc/scripts/docker/pull.sh
+      - run:
+          name: "Run Tests"
+          command: >
+            ./etc/scripts/docker/run.sh
+            --debug
+            --test
+            --no-build
+      - persist_to_workspace:
+          root: /home/circleci
+          paths:
+            - project
+
+  deploy-nightly:
+    environment:
+      DOCKER_TAG: chronograf-20180327
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci
+      - run: |
+          ./etc/scripts/docker/run.sh \
+            --debug \
+            --clean \
+            --package \
+            --platform all \
+            --arch all \
+            --upload \
+            --nightly \
+            --bucket=dl.influxdata.com/chronograf/releases
+          cp build/linux/static_amd64/chronograf .
+          cp build/linux/static_amd64/chronoctl .
+          docker build -t chronograf .
+          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker tag chronograf quay.io/influxdb/chronograf:nightly
+          docker push quay.io/influxdb/chronograf:nightly
+      - store_artifacts:
+          path: ./build/
+
+  deploy-pre-release:
+    environment:
+      DOCKER_TAG: chronograf-20180327
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci
+      - run: |
+          ./etc/scripts/docker/run.sh \
+            --clean \
+            --debug \
+            --release \
+            --package \
+            --platform all \
+            --arch all \
+            --upload-overwrite \
+            --upload \
+            --bucket dl.influxdata.com/chronograf/releases
+          cp build/linux/static_amd64/chronograf .
+          cp build/linux/static_amd64/chronoctl .
+          docker build -t chronograf .
+          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
+          docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
+          docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}
+          docker push quay.io/influxdb/chronograf:${CIRCLE_TAG}
+      - store_artifacts:
+          path: ./build/
+
+  deploy-release:
+    environment:
+      DOCKER_TAG: chronograf-20180327
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci
+      - run: |
+          ./etc/scripts/docker/run.sh \
+            --clean \
+            --debug \
+            --release \
+            --package \
+            --platform all \
+            --arch all \
+            --upload-overwrite \
+            --upload \
+            --bucket dl.influxdata.com/chronograf/releases
+          cp build/linux/static_amd64/chronograf .
+          cp build/linux/static_amd64/chronoctl .
+          docker build -t chronograf .
+          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
+          docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
+          docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}
+          docker push quay.io/influxdb/chronograf:${CIRCLE_TAG}
+          docker tag chronograf quay.io/influxdb/chronograf:latest
+          docker push quay.io/influxdb/chronograf:latest
+      - store_artifacts:
+          path: ./build/
diff --git a/circle.yml b/circle.yml
deleted file mode 100644
index 279d238e8..000000000
--- a/circle.yml
+++ /dev/null
@@ -1,91 +0,0 @@
----
-machine:
-  services:
-    - docker
-  environment:
-    DOCKER_TAG: chronograf-20180327
-
-dependencies:
-  override:
-    - ./etc/scripts/docker/pull.sh
-
-test:
-  override:
-    - >
-      ./etc/scripts/docker/run.sh
-      --debug
-      --test
-      --no-build
-
-deployment:
-  master:
-    branch: master
-    commands:
-      - >
-        ./etc/scripts/docker/run.sh
-        --debug
-        --clean
-        --package
-        --platform all
-        --arch all
-        --upload
-        --nightly
-        --bucket=dl.influxdata.com/chronograf/releases
-      - sudo chown -R ubuntu:ubuntu /home/ubuntu
-      - cp build/linux/static_amd64/chronograf .
-      - cp build/linux/static_amd64/chronoctl .
-      - docker build -t chronograf .
-      - docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
-      - docker tag chronograf quay.io/influxdb/chronograf:nightly
-      - docker push quay.io/influxdb/chronograf:nightly
-      - mv ./build/* $CIRCLE_ARTIFACTS
-  pre-release:
-    tag: /^[0-9]+(\.[0-9]+)*(\S*)([a|rc|beta]([0-9]+))+$/
-    commands:
-      - >
-        ./etc/scripts/docker/run.sh
-        --clean
-        --debug
-        --release
-        --package
-        --platform all
-        --arch all
-        --upload-overwrite
-        --upload
-        --bucket dl.influxdata.com/chronograf/releases
-      - sudo chown -R ubuntu:ubuntu /home/ubuntu
-      - cp build/linux/static_amd64/chronograf .
-      - cp build/linux/static_amd64/chronoctl .
-      - docker build -t chronograf .
-      - docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
-      - docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
-      - docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
-      - docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}
-      - docker push quay.io/influxdb/chronograf:${CIRCLE_TAG}
-      - mv ./build/* $CIRCLE_ARTIFACTS
-  release:
-    tag: /^[0-9]+(\.[0-9]+)*$/
-    commands:
-      - >
-        ./etc/scripts/docker/run.sh
-        --clean
-        --debug
-        --release
-        --package
-        --platform all
-        --arch all
-        --upload-overwrite
-        --upload
-        --bucket dl.influxdata.com/chronograf/releases
-      - sudo chown -R ubuntu:ubuntu /home/ubuntu
-      - cp build/linux/static_amd64/chronograf .
-      - cp build/linux/static_amd64/chronoctl .
-      - docker build -t chronograf .
-      - docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
-      - docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
-      - docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
-      - docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}
-      - docker push quay.io/influxdb/chronograf:${CIRCLE_TAG}
-      - docker tag chronograf quay.io/influxdb/chronograf:latest
-      - docker push quay.io/influxdb/chronograf:latest
-      - mv ./build/* $CIRCLE_ARTIFACTS

From 65210b4c2c4cd19c73a61224ba357b8a97c69ac4 Mon Sep 17 00:00:00 2001
From: Luke Morris <lukevmorris@gmail.com>
Date: Mon, 18 Jun 2018 16:06:34 -0700
Subject: [PATCH 052/100] Remove deprecated email flag

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f05cf6f5e..56c4969b9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -71,7 +71,7 @@ jobs:
           cp build/linux/static_amd64/chronograf .
           cp build/linux/static_amd64/chronoctl .
           docker build -t chronograf .
-          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker login -u "$QUAY_USER" -p $QUAY_PASS quay.io
           docker tag chronograf quay.io/influxdb/chronograf:nightly
           docker push quay.io/influxdb/chronograf:nightly
       - store_artifacts:
@@ -98,7 +98,7 @@ jobs:
           cp build/linux/static_amd64/chronograf .
           cp build/linux/static_amd64/chronoctl .
           docker build -t chronograf .
-          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker login -u "$QUAY_USER" -p $QUAY_PASS quay.io
           docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
           docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
           docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}
@@ -127,7 +127,7 @@ jobs:
           cp build/linux/static_amd64/chronograf .
           cp build/linux/static_amd64/chronoctl .
           docker build -t chronograf .
-          docker login -e $QUAY_EMAIL -u "$QUAY_USER" -p $QUAY_PASS quay.io
+          docker login -u "$QUAY_USER" -p $QUAY_PASS quay.io
           docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
           docker push quay.io/influxdb/chronograf:${CIRCLE_SHA1:0:7}
           docker tag chronograf quay.io/influxdb/chronograf:${CIRCLE_TAG}

From 3fdb6a1f3a537d0e598ea6e674a8772a13625780 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 18 Jun 2018 16:41:51 -0700
Subject: [PATCH 053/100] Fix type error when temp vars have no values

---
 ui/src/dashboards/utils/tempVars.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/dashboards/utils/tempVars.ts b/ui/src/dashboards/utils/tempVars.ts
index d122b8aed..1bb1544b8 100644
--- a/ui/src/dashboards/utils/tempVars.ts
+++ b/ui/src/dashboards/utils/tempVars.ts
@@ -32,7 +32,7 @@ export const generateURLQueryParamsFromTempVars = (
     const selected = values.find(value => value.selected === true)
     const strippedTempVar = stripTempVar(tempVar)
 
-    urlQueryParams[strippedTempVar] = selected.value
+    urlQueryParams[strippedTempVar] = _.get(selected, 'value', '')
   })
 
   return urlQueryParams

From 5d7958988fc76798bc6d339430c9ff49968e0b51 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Mon, 18 Jun 2018 16:57:56 -0700
Subject: [PATCH 054/100] Typescriptify Status Page and children

---
 .../containers/chronograf/AllUsersPage.tsx    |   2 +-
 ui/src/alerts/apis/index.ts                   |   2 +-
 ui/src/shared/actions/timeSeries.ts           |  45 ++-
 ui/src/shared/components/Dygraph.tsx          |   6 +-
 ui/src/shared/constants/index.tsx             |  21 ++
 ui/src/shared/data/timeRanges.ts              |   8 +-
 ui/src/sources/containers/ManageSources.tsx   |   4 +-
 ui/src/sources/containers/SourcePage.js       | 278 --------------
 ui/src/sources/containers/SourcePage.tsx      | 348 +++++++++---------
 ui/src/status/actions/index.js                |  49 ---
 ui/src/status/actions/index.ts                |   3 +-
 ui/src/status/apis/index.ts                   |   5 +-
 ui/src/status/components/GettingStarted.js    | 101 -----
 ui/src/status/components/JSONFeedReader.js    |  61 ---
 ui/src/status/components/NewsFeed.js          |  92 -----
 ui/src/status/constants/actionTypes.js        |   6 -
 ui/src/status/constants/index.js              |   1 -
 ui/src/status/containers/StatusPage.js        | 113 ------
 ui/src/status/containers/StatusPage.tsx       |  19 +-
 ui/src/status/fixtures.ts                     | 105 +++---
 ui/src/status/reducers/JSONFeed.js            |  43 ---
 ui/src/status/reducers/index.js               |   7 -
 ui/src/status/reducers/ui.js                  |  36 --
 ui/src/types/dashboard.ts                     |   3 +-
 ui/src/types/index.ts                         |   2 +
 25 files changed, 294 insertions(+), 1066 deletions(-)
 delete mode 100644 ui/src/sources/containers/SourcePage.js
 delete mode 100644 ui/src/status/actions/index.js
 delete mode 100644 ui/src/status/components/GettingStarted.js
 delete mode 100644 ui/src/status/components/JSONFeedReader.js
 delete mode 100644 ui/src/status/components/NewsFeed.js
 delete mode 100644 ui/src/status/constants/actionTypes.js
 delete mode 100644 ui/src/status/constants/index.js
 delete mode 100644 ui/src/status/containers/StatusPage.js
 delete mode 100644 ui/src/status/reducers/JSONFeed.js
 delete mode 100644 ui/src/status/reducers/index.js
 delete mode 100644 ui/src/status/reducers/ui.js

diff --git a/ui/src/admin/containers/chronograf/AllUsersPage.tsx b/ui/src/admin/containers/chronograf/AllUsersPage.tsx
index 8f42680e5..c2d514132 100644
--- a/ui/src/admin/containers/chronograf/AllUsersPage.tsx
+++ b/ui/src/admin/containers/chronograf/AllUsersPage.tsx
@@ -48,7 +48,7 @@ interface State {
 
 @ErrorHandling
 export class AllUsersPage extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
diff --git a/ui/src/alerts/apis/index.ts b/ui/src/alerts/apis/index.ts
index 4222e7fe7..4d8ae0833 100644
--- a/ui/src/alerts/apis/index.ts
+++ b/ui/src/alerts/apis/index.ts
@@ -1,5 +1,5 @@
 import {proxy} from 'src/utils/queryUrlGenerator'
-import {TimeRange} from '../../types'
+import {TimeRange} from 'src/types'
 
 export const getAlerts = (
   source: string,
diff --git a/ui/src/shared/actions/timeSeries.ts b/ui/src/shared/actions/timeSeries.ts
index 7f5c852ee..8b1f2fc69 100644
--- a/ui/src/shared/actions/timeSeries.ts
+++ b/ui/src/shared/actions/timeSeries.ts
@@ -3,15 +3,38 @@ import {noop} from 'src/shared/actions/app'
 import _ from 'lodash'
 
 import {errorThrown} from 'src/shared/actions/errors'
+import {TimeSeriesResponse} from 'src/types/series'
 
-export const handleLoading = (query, editQueryStatus) => {
+interface Query {
+  host: string | string[]
+  text: string
+  id: string
+  database?: string
+  db?: string
+  rp?: string
+}
+
+interface Payload {
+  source: string
+  query: Query
+  tempVars: any[]
+  db?: string
+  rp?: string
+  resolution?: number
+}
+
+export const handleLoading = (query: Query, editQueryStatus) => {
   editQueryStatus(query.id, {
     loading: true,
   })
 }
 
 // {results: [{}]}
-export const handleSuccess = (data, query, editQueryStatus) => {
+export const handleSuccess = (
+  data: TimeSeriesResponse,
+  query: Query,
+  editQueryStatus
+) => {
   const {results} = data
   const error = _.get(results, ['0', 'error'], false)
   const series = _.get(results, ['0', 'series'], false)
@@ -51,24 +74,6 @@ export const handleError = (error, query, editQueryStatus) => {
   })
 }
 
-interface Query {
-  host: string | string[]
-  text: string
-  id: string
-  database?: string
-  db?: string
-  rp?: string
-}
-
-interface Payload {
-  source: string
-  query: Query
-  tempVars: any[]
-  db?: string
-  rp?: string
-  resolution?: number
-}
-
 export const fetchTimeSeriesAsync = async (
   {source, db, rp, query, tempVars, resolution}: Payload,
   editQueryStatus = noop
diff --git a/ui/src/shared/components/Dygraph.tsx b/ui/src/shared/components/Dygraph.tsx
index 852802527..a9a275d89 100644
--- a/ui/src/shared/components/Dygraph.tsx
+++ b/ui/src/shared/components/Dygraph.tsx
@@ -175,8 +175,10 @@ class Dygraph extends Component<Props, State> {
   }
 
   public componentWillUnmount() {
-    this.dygraph.destroy()
-    delete this.dygraph
+    if (this.dygraph) {
+      this.dygraph.destroy()
+      delete this.dygraph
+    }
   }
 
   public shouldComponentUpdate(nextProps: Props, nextState: State) {
diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx
index 647848f3b..bc93c1a82 100644
--- a/ui/src/shared/constants/index.tsx
+++ b/ui/src/shared/constants/index.tsx
@@ -427,7 +427,23 @@ export const DYGRAPH_CONTAINER_H_MARGIN = 16
 export const DYGRAPH_CONTAINER_V_MARGIN = 8
 export const DYGRAPH_CONTAINER_XLABEL_MARGIN = 20
 
+export const DEFAULT_SOURCE_LINKS = {
+  self: '',
+  kapacitors: '',
+  proxy: '',
+  queries: '',
+  write: '',
+  permissions: '',
+  users: '',
+  roles: '',
+  databases: '',
+  annotations: '',
+  health: '',
+  services: '',
+}
+
 export const DEFAULT_SOURCE = {
+  id: '',
   url: 'http://localhost:8086',
   name: 'Influx 1',
   username: '',
@@ -436,6 +452,11 @@ export const DEFAULT_SOURCE = {
   telegraf: 'telegraf',
   insecureSkipVerify: false,
   metaUrl: '',
+  organization: '',
+  role: '',
+  defaultRP: '',
+  links: DEFAULT_SOURCE_LINKS,
+  type: '',
 }
 
 export const defaultIntervalValue = '333'
diff --git a/ui/src/shared/data/timeRanges.ts b/ui/src/shared/data/timeRanges.ts
index f711a56eb..0b6f91b47 100644
--- a/ui/src/shared/data/timeRanges.ts
+++ b/ui/src/shared/data/timeRanges.ts
@@ -6,6 +6,8 @@ interface TimeRangeOption extends TimeRange {
   menuOption: string
 }
 
+const nowminus30d = 'now() - 30d'
+
 export const timeRanges: TimeRangeOption[] = [
   {
     defaultGroupBy: '10s',
@@ -75,7 +77,7 @@ export const timeRanges: TimeRangeOption[] = [
     defaultGroupBy: '6h',
     seconds: 2592000,
     inputValue: 'Past 30d',
-    lower: 'now() - 30d',
+    lower: nowminus30d,
     upper: null,
     menuOption: 'Past 30d',
   },
@@ -89,3 +91,7 @@ export const defaultTimeRange = {
   seconds: 900,
   format: FORMAT_INFLUXQL,
 }
+
+export const STATUS_PAGE_TIME_RANGE = timeRanges.find(
+  tr => tr.lower === nowminus30d
+)
diff --git a/ui/src/sources/containers/ManageSources.tsx b/ui/src/sources/containers/ManageSources.tsx
index d6336d47a..e1aa15679 100644
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@@ -14,12 +14,12 @@ import {
   notifySourceDeleteFailed,
 } from 'src/shared/copy/notifications'
 
-import {Source, NotificationFunc} from 'src/types'
+import {Source, Notification} from 'src/types'
 
 interface Props {
   source: Source
   sources: Source[]
-  notify: (n: NotificationFunc) => void
+  notify: (n: Notification) => void
   deleteKapacitor: actions.DeleteKapacitorAsync
   fetchKapacitors: actions.FetchKapacitorsAsync
   removeAndLoadSources: actions.RemoveAndLoadSources
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
deleted file mode 100644
index 7d44ace13..000000000
--- a/ui/src/sources/containers/SourcePage.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {withRouter} from 'react-router'
-import _ from 'lodash'
-import {getSource} from 'shared/apis'
-import {createSource, updateSource} from 'shared/apis'
-import {
-  addSource as addSourceAction,
-  updateSource as updateSourceAction,
-} from 'shared/actions/sources'
-import {notify as notifyAction} from 'shared/actions/notifications'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
-
-import Notifications from 'shared/components/Notifications'
-import SourceForm from 'src/sources/components/SourceForm'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-import SourceIndicator from 'shared/components/SourceIndicator'
-import {DEFAULT_SOURCE} from 'shared/constants'
-const initialPath = '/sources/new'
-
-import {
-  notifyErrorConnectingToSource,
-  notifySourceCreationSucceeded,
-  notifySourceCreationFailed,
-  notifySourceUdpated,
-  notifySourceUdpateFailed,
-} from 'shared/copy/notifications'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class SourcePage extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isLoading: true,
-      source: DEFAULT_SOURCE,
-      editMode: props.params.id !== undefined,
-      isInitialSource: props.router.location.pathname === initialPath,
-    }
-  }
-
-  componentDidMount() {
-    const {editMode} = this.state
-    const {params, notify} = this.props
-
-    if (!editMode) {
-      return this.setState({isLoading: false})
-    }
-
-    getSource(params.id)
-      .then(({data: source}) => {
-        this.setState({
-          source: {...DEFAULT_SOURCE, ...source},
-          isLoading: false,
-        })
-      })
-      .catch(error => {
-        notify(notifyErrorConnectingToSource(this._parseError(error)))
-        this.setState({isLoading: false})
-      })
-  }
-
-  handleInputChange = e => {
-    let val = e.target.value
-    const name = e.target.name
-
-    if (e.target.type === 'checkbox') {
-      val = e.target.checked
-    }
-
-    this.setState(prevState => {
-      const source = {
-        ...prevState.source,
-        [name]: val,
-      }
-
-      return {...prevState, source}
-    })
-  }
-
-  handleBlurSourceURL = () => {
-    const {source, editMode} = this.state
-    if (editMode) {
-      this.setState(this._normalizeSource)
-      return
-    }
-
-    if (!source.url) {
-      return
-    }
-
-    this.setState(this._normalizeSource, this._createSourceOnBlur)
-  }
-
-  handleSubmit = e => {
-    e.preventDefault()
-    const {isCreated, editMode} = this.state
-    const isNewSource = !editMode
-
-    if (!isCreated && isNewSource) {
-      return this.setState(this._normalizeSource, this._createSource)
-    }
-
-    this.setState(this._normalizeSource, this._updateSource)
-  }
-
-  gotoPurgatory = () => {
-    const {router} = this.props
-    router.push('/purgatory')
-  }
-
-  _normalizeSource({source}) {
-    const url = source.url.trim()
-    if (source.url.startsWith('http')) {
-      return {source: {...source, url}}
-    }
-    return {source: {...source, url: `http://${url}`}}
-  }
-
-  _createSourceOnBlur = () => {
-    const {source} = this.state
-    // if there is a type on source it has already been created
-    if (source.type) {
-      return
-    }
-    createSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.addSource(sourceFromServer)
-        this.setState({
-          source: {...DEFAULT_SOURCE, ...sourceFromServer},
-          isCreated: true,
-        })
-      })
-      .catch(err => {
-        // dont want to flash this until they submit
-        const error = this._parseError(err)
-        console.error('Error creating InfluxDB connection: ', error)
-      })
-  }
-
-  _createSource = () => {
-    const {source} = this.state
-    const {notify} = this.props
-    createSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.addSource(sourceFromServer)
-        this._redirect(sourceFromServer)
-        notify(notifySourceCreationSucceeded(source.name))
-      })
-      .catch(error => {
-        notify(notifySourceCreationFailed(source.name, this._parseError(error)))
-      })
-  }
-
-  _updateSource = () => {
-    const {source} = this.state
-    const {notify} = this.props
-    updateSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.updateSource(sourceFromServer)
-        this._redirect(sourceFromServer)
-        notify(notifySourceUdpated(source.name))
-      })
-      .catch(error => {
-        notify(notifySourceUdpateFailed(source.name, this._parseError(error)))
-      })
-  }
-
-  _redirect = source => {
-    const {isInitialSource} = this.state
-    const {params, router} = this.props
-
-    if (isInitialSource) {
-      return this._redirectToApp(source)
-    }
-
-    router.push(`/sources/${params.sourceID}/manage-sources`)
-  }
-
-  _redirectToApp = source => {
-    const {location, router} = this.props
-    const {redirectPath} = location.query
-
-    if (!redirectPath) {
-      return router.push(`/sources/${source.id}/hosts`)
-    }
-
-    const fixedPath = redirectPath.replace(
-      /\/sources\/[^/]*/,
-      `/sources/${source.id}`
-    )
-    return router.push(fixedPath)
-  }
-
-  _parseError = error => {
-    return _.get(error, ['data', 'message'], error)
-  }
-
-  render() {
-    const {isLoading, source, editMode, isInitialSource} = this.state
-
-    if (isLoading) {
-      return <div className="page-spinner" />
-    }
-
-    return (
-      <div className={`${isInitialSource ? '' : 'page'}`}>
-        <Notifications />
-        <div className="page-header">
-          <div className="page-header__container page-header__source-page">
-            <div className="page-header__col-md-8">
-              <div className="page-header__left">
-                <h1 className="page-header__title">
-                  {editMode
-                    ? 'Configure InfluxDB Connection'
-                    : 'Add a New InfluxDB Connection'}
-                </h1>
-              </div>
-              {isInitialSource ? null : (
-                <div className="page-header__right">
-                  <SourceIndicator />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        <FancyScrollbar className="page-contents">
-          <div className="container-fluid">
-            <div className="row">
-              <div className="col-md-8 col-md-offset-2">
-                <div className="panel">
-                  <SourceForm
-                    source={source}
-                    editMode={editMode}
-                    onInputChange={this.handleInputChange}
-                    onSubmit={this.handleSubmit}
-                    onBlurSourceURL={this.handleBlurSourceURL}
-                    isInitialSource={isInitialSource}
-                    gotoPurgatory={this.gotoPurgatory}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </FancyScrollbar>
-      </div>
-    )
-  }
-}
-
-const {func, shape, string} = PropTypes
-
-SourcePage.propTypes = {
-  params: shape({
-    id: string,
-    sourceID: string,
-  }),
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  location: shape({
-    query: shape({
-      redirectPath: string,
-    }).isRequired,
-  }).isRequired,
-  notify: func.isRequired,
-  addSource: func.isRequired,
-  updateSource: func.isRequired,
-}
-
-const mapDispatchToProps = dispatch => ({
-  notify: bindActionCreators(notifyAction, dispatch),
-  addSource: bindActionCreators(addSourceAction, dispatch),
-  updateSource: bindActionCreators(updateSourceAction, dispatch),
-})
-export default connect(null, mapDispatchToProps)(withRouter(SourcePage))
diff --git a/ui/src/sources/containers/SourcePage.tsx b/ui/src/sources/containers/SourcePage.tsx
index 9212b9acf..c0a00dd28 100644
--- a/ui/src/sources/containers/SourcePage.tsx
+++ b/ui/src/sources/containers/SourcePage.tsx
@@ -1,7 +1,6 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {withRouter} from 'react-router'
-import _ from 'lodash'
+import React, {Component, ChangeEvent, FormEvent} from 'react'
+import {withRouter, InjectedRouter} from 'react-router'
+import {Location} from 'history'
 import {getSource} from 'src/shared/apis'
 import {createSource, updateSource} from 'src/shared/apis'
 import {
@@ -27,45 +26,47 @@ import {
   notifySourceUdpateFailed,
 } from 'src/shared/copy/notifications'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {Source} from 'src/types'
+import {Source, Notification, NotificationFunc} from 'src/types'
+import {getDeep} from 'src/utils/wrappers'
+
+interface Params {
+  id: string
+  hash: string
+  sourceID: string
+}
 
 interface Props {
-  params: shape({
-    id: string,
-    sourceID: string,
-  }),
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  location: shape({
-    query: shape({
-      redirectPath: string,
-    }).isRequired,
-  }).isRequired,
-  notify: func.isRequired,
-  addSource: func.isRequired,
-  updateSource: func.isRequired,}
+  location: Location
+  router: InjectedRouter
+  params: Params
+  notify: (notification: Notification | NotificationFunc) => void
+  addSource: (s: Source) => void
+  updateSource: (s: Source) => void
+}
 
-interface State { 
+interface State {
   isLoading: boolean
+  isCreated: boolean
   source: Source
   editMode: boolean
-  isInitialSource: boolean}
-  
+  isInitialSource: boolean
+}
+
 @ErrorHandling
 class SourcePage extends Component<Props, State> {
-  constructor(props:Props) {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
       isLoading: true,
+      isCreated: false,
       source: DEFAULT_SOURCE,
       editMode: props.params.id !== undefined,
-      isInitialSource: props.router.location.pathname === initialPath,
+      isInitialSource: props.location.pathname === initialPath,
     }
   }
 
-  componentDidMount() {
+  public componentDidMount() {
     const {editMode} = this.state
     const {params, notify} = this.props
 
@@ -81,148 +82,12 @@ class SourcePage extends Component<Props, State> {
         })
       })
       .catch(error => {
-        notify(notifyErrorConnectingToSource(this._parseError(error)))
+        notify(notifyErrorConnectingToSource(this.parseError(error)))
         this.setState({isLoading: false})
       })
   }
 
-  handleInputChange = e => {
-    let val = e.target.value
-    const name = e.target.name
-
-    if (e.target.type === 'checkbox') {
-      val = e.target.checked
-    }
-
-    this.setState(prevState => {
-      const source = {
-        ...prevState.source,
-        [name]: val,
-      }
-
-      return {...prevState, source}
-    })
-  }
-
-  handleBlurSourceURL = () => {
-    const {source, editMode} = this.state
-    if (editMode) {
-      this.setState(this._normalizeSource)
-      return
-    }
-
-    if (!source.url) {
-      return
-    }
-
-    this.setState(this._normalizeSource, this._createSourceOnBlur)
-  }
-
-  handleSubmit = e => {
-    e.preventDefault()
-    const {isCreated, editMode} = this.state
-    const isNewSource = !editMode
-
-    if (!isCreated && isNewSource) {
-      return this.setState(this._normalizeSource, this._createSource)
-    }
-
-    this.setState(this._normalizeSource, this._updateSource)
-  }
-
-  gotoPurgatory = () => {
-    const {router} = this.props
-    router.push('/purgatory')
-  }
-
-  _normalizeSource({source}) {
-    const url = source.url.trim()
-    if (source.url.startsWith('http')) {
-      return {source: {...source, url}}
-    }
-    return {source: {...source, url: `http://${url}`}}
-  }
-
-  _createSourceOnBlur = () => {
-    const {source} = this.state
-    // if there is a type on source it has already been created
-    if (source.type) {
-      return
-    }
-    createSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.addSource(sourceFromServer)
-        this.setState({
-          source: {...DEFAULT_SOURCE, ...sourceFromServer},
-          isCreated: true,
-        })
-      })
-      .catch(err => {
-        // dont want to flash this until they submit
-        const error = this._parseError(err)
-        console.error('Error creating InfluxDB connection: ', error)
-      })
-  }
-
-  _createSource = () => {
-    const {source} = this.state
-    const {notify} = this.props
-    createSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.addSource(sourceFromServer)
-        this._redirect(sourceFromServer)
-        notify(notifySourceCreationSucceeded(source.name))
-      })
-      .catch(error => {
-        notify(notifySourceCreationFailed(source.name, this._parseError(error)))
-      })
-  }
-
-  _updateSource = () => {
-    const {source} = this.state
-    const {notify} = this.props
-    updateSource(source)
-      .then(({data: sourceFromServer}) => {
-        this.props.updateSource(sourceFromServer)
-        this._redirect(sourceFromServer)
-        notify(notifySourceUdpated(source.name))
-      })
-      .catch(error => {
-        notify(notifySourceUdpateFailed(source.name, this._parseError(error)))
-      })
-  }
-
-  _redirect = source => {
-    const {isInitialSource} = this.state
-    const {params, router} = this.props
-
-    if (isInitialSource) {
-      return this._redirectToApp(source)
-    }
-
-    router.push(`/sources/${params.sourceID}/manage-sources`)
-  }
-
-  _redirectToApp = source => {
-    const {location, router} = this.props
-    const {redirectPath} = location.query
-
-    if (!redirectPath) {
-      return router.push(`/sources/${source.id}/hosts`)
-    }
-
-    const fixedPath = redirectPath.replace(
-      /\/sources\/[^/]*/,
-      `/sources/${source.id}`
-    )
-    return router.push(fixedPath)
-  }
-
-  _parseError = error => {
-    return _.get(error, ['data', 'message'], error)
-  }
-
-  render() {
+  public render() {
     const {isLoading, source, editMode, isInitialSource} = this.state
 
     if (isLoading) {
@@ -272,26 +137,143 @@ class SourcePage extends Component<Props, State> {
       </div>
     )
   }
-}
 
-const {func, shape, string} = PropTypes
+  private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let val: string | boolean = e.target.value
+    const name = e.target.name
 
-SourcePage.propTypes = {
-  params: shape({
-    id: string,
-    sourceID: string,
-  }),
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  location: shape({
-    query: shape({
-      redirectPath: string,
-    }).isRequired,
-  }).isRequired,
-  notify: func.isRequired,
-  addSource: func.isRequired,
-  updateSource: func.isRequired,
+    if (e.target.type === 'checkbox') {
+      val = e.target.checked
+    }
+
+    this.setState(prevState => {
+      const source = {
+        ...prevState.source,
+        [name]: val,
+      }
+
+      return {...prevState, source}
+    })
+  }
+
+  private handleBlurSourceURL = () => {
+    const {source, editMode} = this.state
+    if (editMode) {
+      this.setState(this.normalizeSource)
+      return
+    }
+
+    if (!source.url) {
+      return
+    }
+
+    this.setState(this.normalizeSource, this.createSourceOnBlur)
+  }
+
+  private handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const {isCreated, editMode} = this.state
+    const isNewSource = !editMode
+
+    if (!isCreated && isNewSource) {
+      return this.setState(this.normalizeSource, this.createSource)
+    }
+
+    this.setState(this.normalizeSource, this.updateSource)
+  }
+
+  private gotoPurgatory = () => {
+    const {router} = this.props
+    router.push('/purgatory')
+  }
+
+  private normalizeSource() {
+    const {source} = this.state
+    const url = source.url.trim()
+    if (source.url.startsWith('http')) {
+      return {source: {...source, url}}
+    }
+    return {source: {...source, url: `http://${url}`}}
+  }
+
+  private createSourceOnBlur = () => {
+    const {source} = this.state
+    // if there is a type on source it has already been created
+    if (source.type) {
+      return
+    }
+    createSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.addSource(sourceFromServer)
+        this.setState({
+          source: {...DEFAULT_SOURCE, ...sourceFromServer},
+          isCreated: true,
+        })
+      })
+      .catch(err => {
+        // dont want to flash this until they submit
+        const error = this.parseError(err)
+        console.error('Error creating InfluxDB connection: ', error)
+      })
+  }
+
+  private createSource = () => {
+    const {source} = this.state
+    const {notify} = this.props
+    createSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.addSource(sourceFromServer)
+        this.redirect(sourceFromServer)
+        notify(notifySourceCreationSucceeded(source.name))
+      })
+      .catch(error => {
+        notify(notifySourceCreationFailed(source.name, this.parseError(error)))
+      })
+  }
+
+  private updateSource = () => {
+    const {source} = this.state
+    const {notify} = this.props
+    updateSource(source)
+      .then(({data: sourceFromServer}) => {
+        this.props.updateSource(sourceFromServer)
+        this.redirect(sourceFromServer)
+        notify(notifySourceUdpated(source.name))
+      })
+      .catch(error => {
+        notify(notifySourceUdpateFailed(source.name, this.parseError(error)))
+      })
+  }
+
+  private redirect = (source: Source) => {
+    const {isInitialSource} = this.state
+    const {params, router} = this.props
+
+    if (isInitialSource) {
+      return this.redirectToApp(source)
+    }
+
+    router.push(`/sources/${params.sourceID}/manage-sources`)
+  }
+
+  private redirectToApp = (source: Source) => {
+    const {location, router} = this.props
+    const {redirectPath} = location.query
+
+    if (!redirectPath) {
+      return router.push(`/sources/${source.id}/hosts`)
+    }
+
+    const fixedPath = redirectPath.replace(
+      /\/sources\/[^/]*/,
+      `/sources/${source.id}`
+    )
+    return router.push(fixedPath)
+  }
+
+  private parseError = error => {
+    return getDeep<string>(error, 'data.message', '')
+  }
 }
 
 const mapDispatchToProps = dispatch => ({
@@ -299,4 +281,4 @@ const mapDispatchToProps = dispatch => ({
   addSource: bindActionCreators(addSourceAction, dispatch),
   updateSource: bindActionCreators(updateSourceAction, dispatch),
 })
-export default connect(null, mapDispatchToProps)(withRouter(SourcePage))
+export default withRouter(connect(null, mapDispatchToProps)(SourcePage))
diff --git a/ui/src/status/actions/index.js b/ui/src/status/actions/index.js
deleted file mode 100644
index 0aa93af11..000000000
--- a/ui/src/status/actions/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// he is a library for safely encoding and decoding HTML Entities
-import he from 'he'
-
-import {fetchJSONFeed as fetchJSONFeedAJAX} from 'src/status/apis'
-
-import {notify} from 'src/shared/actions/notifications'
-import {notifyJSONFeedFailed} from 'src/shared/copy/notifications'
-
-import * as actionTypes from 'src/status/constants/actionTypes'
-
-const fetchJSONFeedRequested = () => ({
-  type: actionTypes.FETCH_JSON_FEED_REQUESTED,
-})
-
-const fetchJSONFeedCompleted = data => ({
-  type: actionTypes.FETCH_JSON_FEED_COMPLETED,
-  payload: {data},
-})
-
-const fetchJSONFeedFailed = () => ({
-  type: actionTypes.FETCH_JSON_FEED_FAILED,
-})
-
-export const fetchJSONFeedAsync = url => async dispatch => {
-  dispatch(fetchJSONFeedRequested())
-  try {
-    const {data} = await fetchJSONFeedAJAX(url)
-    // data could be from a webpage, and thus would be HTML
-    if (typeof data === 'string' || !data) {
-      dispatch(fetchJSONFeedFailed())
-    } else {
-      // decode HTML entities from response text
-      const decodedData = {
-        ...data,
-        items: data.items.map(item => {
-          item.title = he.decode(item.title)
-          item.content_text = he.decode(item.content_text)
-          return item
-        }),
-      }
-
-      dispatch(fetchJSONFeedCompleted(decodedData))
-    }
-  } catch (error) {
-    console.error(error)
-    dispatch(fetchJSONFeedFailed())
-    dispatch(notify(notifyJSONFeedFailed(url)))
-  }
-}
diff --git a/ui/src/status/actions/index.ts b/ui/src/status/actions/index.ts
index 40b8cb3f8..b8e37416e 100644
--- a/ui/src/status/actions/index.ts
+++ b/ui/src/status/actions/index.ts
@@ -7,6 +7,7 @@ import {notify} from 'src/shared/actions/notifications'
 import {notifyJSONFeedFailed} from 'src/shared/copy/notifications'
 
 import {JSONFeedData} from 'src/types'
+import {AxiosResponse} from 'axios'
 
 export enum ActionTypes {
   FETCH_JSON_FEED_REQUESTED = 'FETCH_JSON_FEED_REQUESTED',
@@ -52,7 +53,7 @@ export const fetchJSONFeedAsync = (url: string) => async (
 ): Promise<void> => {
   dispatch(fetchJSONFeedRequested())
   try {
-    const {data} = await fetchJSONFeedAJAX(url)
+    const {data} = (await fetchJSONFeedAJAX(url)) as AxiosResponse<JSONFeedData>
     // data could be from a webpage, and thus would be HTML
     if (typeof data === 'string' || !data) {
       dispatch(fetchJSONFeedFailed())
diff --git a/ui/src/status/apis/index.ts b/ui/src/status/apis/index.ts
index 7bb8642f1..1ac19fa75 100644
--- a/ui/src/status/apis/index.ts
+++ b/ui/src/status/apis/index.ts
@@ -1,9 +1,10 @@
 import AJAX from 'src/utils/ajax'
+import {JSONFeedData} from 'src/types'
 
 const excludeBasepath = true // don't prefix route of external link with basepath/
 
-export const fetchJSONFeed = url =>
-  AJAX(
+export const fetchJSONFeed = (url: string) =>
+  AJAX<JSONFeedData>(
     {
       method: 'GET',
       url,
diff --git a/ui/src/status/components/GettingStarted.js b/ui/src/status/components/GettingStarted.js
deleted file mode 100644
index a3d1d179e..000000000
--- a/ui/src/status/components/GettingStarted.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, {Component} from 'react'
-
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class GettingStarted extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return (
-      <FancyScrollbar className="getting-started--container">
-        <div className="getting-started">
-          <div className="getting-started--cell intro">
-            <h5>
-              <span className="icon cubo-uniform" /> Welcome to Chronograf!
-            </h5>
-            <p>Follow the links below to explore Chronograf’s features.</p>
-          </div>
-          <div className="getting-started--cell">
-            <p>
-              <strong>Install the TICK Stack</strong>
-              <br />Save some time and use this handy tool to install the rest
-              of the stack:
-            </p>
-            <p>
-              <a href="https://github.com/influxdata/sandbox" target="_blank">
-                <span className="icon github" /> TICK Sandbox
-              </a>
-            </p>
-          </div>
-          <div className="getting-started--cell">
-            <p>
-              <strong>Guides</strong>
-            </p>
-            <p>
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/create-a-dashboard/"
-                target="_blank"
-              >
-                Create a Dashboard
-              </a>
-              <br />
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/create-a-kapacitor-alert/"
-                target="_blank"
-              >
-                Create a Kapacitor Alert
-              </a>
-              <br />
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/configure-kapacitor-event-handlers/"
-                target="_blank"
-              >
-                Configure Kapacitor Event Handlers
-              </a>
-              <br />
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/transition-web-admin-interface/"
-                target="_blank"
-              >
-                Transition from InfluxDB's Web Admin Interface
-              </a>
-              <br />
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/dashboard-template-variables/"
-                target="_blank"
-              >
-                Dashboard Template Variables
-              </a>
-              <br />
-              <a
-                href="https://docs.influxdata.com/chronograf/latest/guides/advanced-kapacitor/"
-                target="_blank"
-              >
-                Advanced Kapacitor Usage
-              </a>
-            </p>
-          </div>
-          <div className="getting-started--cell">
-            <p>
-              <strong>Questions & Comments</strong>
-            </p>
-            <p>
-              If you have any product feedback please open a GitHub issue and
-              we'll take a look. For any questions or other issues try posting
-              on our&nbsp;
-              <a href="https://community.influxdata.com/" target="_blank">
-                Community Forum
-              </a>.
-            </p>
-          </div>
-        </div>
-      </FancyScrollbar>
-    )
-  }
-}
-
-export default GettingStarted
diff --git a/ui/src/status/components/JSONFeedReader.js b/ui/src/status/components/JSONFeedReader.js
deleted file mode 100644
index a5adbf60c..000000000
--- a/ui/src/status/components/JSONFeedReader.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import moment from 'moment'
-
-const JSONFeedReader = ({data}) =>
-  data && data.items ? (
-    <div className="newsfeed">
-      {data.items
-        ? data.items.map(
-            ({
-              id,
-              date_published: datePublished,
-              url,
-              title,
-              author: {name},
-              image,
-              content_text: contentText,
-            }) => (
-              <div key={id} className="newsfeed--post">
-                <div className="newsfeed--date">
-                  {`${moment(datePublished).format('MMM DD')}`}
-                </div>
-                <div className="newsfeed--post-title">
-                  <a href={url} target="_blank">
-                    <h6>{title}</h6>
-                  </a>
-                  <span>by {name}</span>
-                </div>
-                <div className="newsfeed--content">
-                  {image ? <img src={image} /> : null}
-                  <p>{contentText}</p>
-                </div>
-              </div>
-            )
-          )
-        : null}
-    </div>
-  ) : null
-
-const {arrayOf, shape, string} = PropTypes
-
-JSONFeedReader.propTypes = {
-  data: shape({
-    items: arrayOf(
-      shape({
-        author: shape({
-          name: string.isRequired,
-        }).isRequired,
-        content_text: string.isRequired,
-        date_published: string.isRequired,
-        id: string.isRequired,
-        image: string,
-        title: string.isRequired,
-        url: string.isRequired,
-      })
-    ),
-  }).isRequired,
-}
-
-export default JSONFeedReader
diff --git a/ui/src/status/components/NewsFeed.js b/ui/src/status/components/NewsFeed.js
deleted file mode 100644
index 8aa84fb77..000000000
--- a/ui/src/status/components/NewsFeed.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
-
-import {fetchJSONFeedAsync} from 'src/status/actions'
-
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-import JSONFeedReader from 'src/status/components/JSONFeedReader'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class NewsFeed extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  // TODO: implement shouldComponentUpdate based on fetching conditions
-
-  render() {
-    const {hasCompletedFetchOnce, isFetching, isFailed, data} = this.props
-
-    if (!hasCompletedFetchOnce) {
-      return isFailed ? (
-        <div className="graph-empty">
-          <p>Failed to load News Feed</p>
-        </div>
-      ) : (
-        // TODO: Factor this out of here and AutoRefresh
-        <div className="graph-fetching">
-          <div className="graph-spinner" />
-        </div>
-      )
-    }
-
-    return (
-      <FancyScrollbar autoHide={false} className="newsfeed--container">
-        {isFetching ? (
-          // TODO: Factor this out of here and AutoRefresh
-          <div className="graph-panel__refreshing">
-            <div />
-            <div />
-            <div />
-          </div>
-        ) : null}
-        {isFailed ? (
-          <div className="graph-empty">
-            <p>Failed to refresh News Feed</p>
-          </div>
-        ) : null}
-        <JSONFeedReader data={data} />
-      </FancyScrollbar>
-    )
-  }
-
-  // TODO: implement interval polling a la AutoRefresh
-  componentDidMount() {
-    const {statusFeedURL, fetchJSONFeed} = this.props
-
-    fetchJSONFeed(statusFeedURL)
-  }
-}
-
-const {bool, func, shape, string} = PropTypes
-
-NewsFeed.propTypes = {
-  hasCompletedFetchOnce: bool.isRequired,
-  isFetching: bool.isRequired,
-  isFailed: bool.isRequired,
-  data: shape(),
-  fetchJSONFeed: func.isRequired,
-  statusFeedURL: string,
-}
-
-const mapStateToProps = ({
-  links: {
-    external: {statusFeed: statusFeedURL},
-  },
-  JSONFeed: {hasCompletedFetchOnce, isFetching, isFailed, data},
-}) => ({
-  hasCompletedFetchOnce,
-  isFetching,
-  isFailed,
-  data,
-  statusFeedURL,
-})
-
-const mapDispatchToProps = dispatch => ({
-  fetchJSONFeed: bindActionCreators(fetchJSONFeedAsync, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewsFeed)
diff --git a/ui/src/status/constants/actionTypes.js b/ui/src/status/constants/actionTypes.js
deleted file mode 100644
index d49669bb2..000000000
--- a/ui/src/status/constants/actionTypes.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const SET_STATUS_PAGE_AUTOREFRESH = 'SET_STATUS_PAGE_AUTOREFRESH'
-export const SET_STATUS_PAGE_TIME_RANGE = 'SET_STATUS_PAGE_TIME_RANGE'
-
-export const FETCH_JSON_FEED_REQUESTED = 'FETCH_JSON_FEED_REQUESTED'
-export const FETCH_JSON_FEED_COMPLETED = 'FETCH_JSON_FEED_COMPLETED'
-export const FETCH_JSON_FEED_FAILED = 'FETCH_JSON_FEED_FAILED'
diff --git a/ui/src/status/constants/index.js b/ui/src/status/constants/index.js
deleted file mode 100644
index 01421d10c..000000000
--- a/ui/src/status/constants/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export const RECENT_ALERTS_LIMIT = 30
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
deleted file mode 100644
index 157e7a658..000000000
--- a/ui/src/status/containers/StatusPage.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-
-import SourceIndicator from 'shared/components/SourceIndicator'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-import LayoutRenderer from 'shared/components/LayoutRenderer'
-
-import {fixtureStatusPageCells} from 'src/status/fixtures'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-import {
-  TEMP_VAR_DASHBOARD_TIME,
-  TEMP_VAR_UPPER_DASHBOARD_TIME,
-} from 'src/shared/constants'
-
-@ErrorHandling
-class StatusPage extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      cells: fixtureStatusPageCells,
-    }
-  }
-
-  render() {
-    const {source, autoRefresh, timeRange} = this.props
-    const {cells} = this.state
-
-    const dashboardTime = {
-      id: 'dashtime',
-      tempVar: TEMP_VAR_DASHBOARD_TIME,
-      type: 'constant',
-      values: [
-        {
-          value: timeRange.lower,
-          type: 'constant',
-          selected: true,
-        },
-      ],
-    }
-
-    const upperDashboardTime = {
-      id: 'upperdashtime',
-      tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
-      type: 'constant',
-      values: [
-        {
-          value: 'now()',
-          type: 'constant',
-          selected: true,
-        },
-      ],
-    }
-
-    const templates = [dashboardTime, upperDashboardTime]
-
-    return (
-      <div className="page">
-        <div className="page-header full-width">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Status</h1>
-            </div>
-            <div className="page-header__right">
-              <SourceIndicator />
-            </div>
-          </div>
-        </div>
-        <FancyScrollbar className="page-contents">
-          <div className="dashboard container-fluid full-width">
-            {cells.length ? (
-              <LayoutRenderer
-                autoRefresh={autoRefresh}
-                timeRange={timeRange}
-                cells={cells}
-                templates={templates}
-                source={source}
-                shouldNotBeEditable={true}
-                isStatusPage={true}
-                isEditable={false}
-              />
-            ) : (
-              <span>Loading Status Page...</span>
-            )}
-          </div>
-        </FancyScrollbar>
-      </div>
-    )
-  }
-}
-
-const {number, shape, string} = PropTypes
-
-StatusPage.propTypes = {
-  source: shape({
-    name: string.isRequired,
-    links: shape({
-      proxy: string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  autoRefresh: number.isRequired,
-  timeRange: shape({
-    lower: string.isRequired,
-  }).isRequired,
-}
-
-const mapStateToProps = ({statusUI: {autoRefresh, timeRange}}) => ({
-  autoRefresh,
-  timeRange,
-})
-
-export default connect(mapStateToProps, null)(StatusPage)
diff --git a/ui/src/status/containers/StatusPage.tsx b/ui/src/status/containers/StatusPage.tsx
index 348f69b1e..6492ee48b 100644
--- a/ui/src/status/containers/StatusPage.tsx
+++ b/ui/src/status/containers/StatusPage.tsx
@@ -1,9 +1,10 @@
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
 
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import LayoutRenderer from 'src/shared/components/LayoutRenderer'
+import {STATUS_PAGE_TIME_RANGE} from 'src/shared/data/timeRanges'
+import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
 
 import {fixtureStatusPageCells} from 'src/status/fixtures'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -11,7 +12,7 @@ import {
   TEMP_VAR_DASHBOARD_TIME,
   TEMP_VAR_UPPER_DASHBOARD_TIME,
 } from 'src/shared/constants'
-import {Source, TimeRange, Cell} from 'src/types'
+import {Source, Cell} from 'src/types'
 
 interface State {
   cells: Cell[]
@@ -19,10 +20,11 @@ interface State {
 
 interface Props {
   source: Source
-  autoRefresh: number
-  timeRange: TimeRange
 }
 
+const autoRefresh = AUTOREFRESH_DEFAULT
+const timeRange = STATUS_PAGE_TIME_RANGE
+
 @ErrorHandling
 class StatusPage extends Component<Props, State> {
   constructor(props: Props) {
@@ -34,7 +36,7 @@ class StatusPage extends Component<Props, State> {
   }
 
   public render() {
-    const {source, autoRefresh, timeRange} = this.props
+    const {source} = this.props
     const {cells} = this.state
 
     const dashboardTime = {
@@ -100,9 +102,4 @@ class StatusPage extends Component<Props, State> {
   }
 }
 
-const mstp = ({statusUI: {autoRefresh, timeRange}}) => ({
-  autoRefresh,
-  timeRange,
-})
-
-export default connect(mstp, null)(StatusPage)
+export default StatusPage
diff --git a/ui/src/status/fixtures.ts b/ui/src/status/fixtures.ts
index 67bdcbf92..5bf0b171d 100644
--- a/ui/src/status/fixtures.ts
+++ b/ui/src/status/fixtures.ts
@@ -1,9 +1,40 @@
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants'
+import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
+import {DEFAULT_AXIS} from 'src/dashboards/constants/cellEditor'
+import {Cell, CellQuery} from 'src/types'
+import {CellType} from 'src/types/dashboard'
 
-export const fixtureStatusPageCells = [
+const emptyQuery: CellQuery = {
+  query: '',
+  source: '',
+  queryConfig: {
+    database: '',
+    measurement: '',
+    retentionPolicy: '',
+    fields: [],
+    tags: {},
+    groupBy: {},
+    areTagsAccepted: false,
+    rawText: null,
+    range: null,
+  },
+}
+
+const emptyAxes = {
+  axes: {
+    x: DEFAULT_AXIS,
+    y: DEFAULT_AXIS,
+    y2: DEFAULT_AXIS,
+  },
+}
+
+export const fixtureStatusPageCells: Cell[] = [
   {
+    ...NEW_DEFAULT_DASHBOARD_CELL,
+    ...emptyAxes,
     i: 'alerts-bar-graph',
+    type: CellType.Bar,
     isWidget: false,
     x: 0,
     y: 0,
@@ -15,7 +46,7 @@ export const fixtureStatusPageCells = [
     queries: [
       {
         query: `SELECT count("value") AS "count_value" FROM "chronograf"."autogen"."alerts" WHERE time > ${TEMP_VAR_DASHBOARD_TIME} GROUP BY time(1d)`,
-        label: 'Events',
+        source: '',
         queryConfig: {
           database: 'chronograf',
           measurement: 'alerts',
@@ -44,90 +75,56 @@ export const fixtureStatusPageCells = [
         },
       },
     ],
-    type: 'bar',
     links: {
       self: '/chronograf/v1/status/23/cells/c-bar-graphs-fly',
     },
   },
   {
+    ...NEW_DEFAULT_DASHBOARD_CELL,
+    ...emptyAxes,
     i: 'recent-alerts',
+    type: CellType.Alerts,
     isWidget: true,
     name: 'Alerts – Last 30 Days',
-    type: 'alerts',
     x: 0,
     y: 5,
     w: 6.5,
     h: 6,
     legend: {},
-    queries: [
-      {
-        query: '',
-        queryConfig: {
-          database: '',
-          measurement: '',
-          retentionPolicy: '',
-          fields: [],
-          tags: {},
-          groupBy: {},
-          areTagsAccepted: false,
-          rawText: null,
-          range: null,
-        },
-      },
-    ],
+    queries: [emptyQuery],
+    colors: DEFAULT_LINE_COLORS,
+    links: {self: ''},
   },
   {
+    ...NEW_DEFAULT_DASHBOARD_CELL,
+    ...emptyAxes,
     i: 'news-feed',
+    type: CellType.News,
     isWidget: true,
     name: 'News Feed',
-    type: 'news',
     x: 6.5,
     y: 5,
     w: 3,
     h: 6,
     legend: {},
-    queries: [
-      {
-        query: '',
-        queryConfig: {
-          database: '',
-          measurement: '',
-          retentionPolicy: '',
-          fields: [],
-          tags: {},
-          groupBy: {},
-          areTagsAccepted: false,
-          rawText: null,
-          range: null,
-        },
-      },
-    ],
+    queries: [emptyQuery],
+    colors: DEFAULT_LINE_COLORS,
+    links: {self: ''},
   },
   {
+    ...NEW_DEFAULT_DASHBOARD_CELL,
+    ...emptyAxes,
     i: 'getting-started',
+    type: CellType.Guide,
     isWidget: true,
     name: 'Getting Started',
-    type: 'guide',
     x: 9.5,
     y: 5,
     w: 2.5,
     h: 6,
     legend: {},
-    queries: [
-      {
-        query: '',
-        queryConfig: {
-          database: '',
-          measurement: '',
-          retentionPolicy: '',
-          fields: [],
-          tags: {},
-          groupBy: {},
-          areTagsAccepted: false,
-          rawText: null,
-          range: null,
-        },
-      },
-    ],
+    queries: [emptyQuery],
+    colors: DEFAULT_LINE_COLORS,
+    links: {self: ''},
   },
 ]
diff --git a/ui/src/status/reducers/JSONFeed.js b/ui/src/status/reducers/JSONFeed.js
deleted file mode 100644
index 76d52d959..000000000
--- a/ui/src/status/reducers/JSONFeed.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as actionTypes from 'src/status/constants/actionTypes'
-
-const initialState = {
-  hasCompletedFetchOnce: false,
-  isFetching: false,
-  isFailed: false,
-  data: null,
-}
-
-const JSONFeedReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case actionTypes.FETCH_JSON_FEED_REQUESTED: {
-      return {...state, isFetching: true, isFailed: false}
-    }
-
-    case actionTypes.FETCH_JSON_FEED_COMPLETED: {
-      const {data} = action.payload
-
-      return {
-        ...state,
-        hasCompletedFetchOnce: true,
-        isFetching: false,
-        isFailed: false,
-        data,
-      }
-    }
-
-    case actionTypes.FETCH_JSON_FEED_FAILED: {
-      return {
-        ...state,
-        isFetching: false,
-        isFailed: true,
-        data: null,
-      }
-    }
-
-    default: {
-      return state
-    }
-  }
-}
-
-export default JSONFeedReducer
diff --git a/ui/src/status/reducers/index.js b/ui/src/status/reducers/index.js
deleted file mode 100644
index d0941c654..000000000
--- a/ui/src/status/reducers/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import statusUI from './ui'
-import JSONFeed from './JSONFeed'
-
-export default {
-  statusUI,
-  JSONFeed,
-}
diff --git a/ui/src/status/reducers/ui.js b/ui/src/status/reducers/ui.js
deleted file mode 100644
index a2a8ac7cd..000000000
--- a/ui/src/status/reducers/ui.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {AUTOREFRESH_DEFAULT} from 'shared/constants'
-import {timeRanges} from 'shared/data/timeRanges'
-
-import * as actionTypes from 'src/status/constants/actionTypes'
-
-const {lower, upper} = timeRanges.find(tr => tr.lower === 'now() - 30d')
-
-const initialState = {
-  autoRefresh: AUTOREFRESH_DEFAULT,
-  timeRange: {lower, upper},
-}
-
-const statusUI = (state = initialState, action) => {
-  switch (action.type) {
-    case actionTypes.SET_STATUS_PAGE_AUTOREFRESH: {
-      const {milliseconds} = action.payload
-
-      return {
-        ...state,
-        autoRefresh: milliseconds,
-      }
-    }
-
-    case actionTypes.SET_STATUS_PAGE_TIME_RANGE: {
-      const {timeRange} = action.payload
-
-      return {...state, timeRange}
-    }
-
-    default: {
-      return state
-    }
-  }
-}
-
-export default statusUI
diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts
index 0f3a31ea2..cd2141cb1 100644
--- a/ui/src/types/dashboard.ts
+++ b/ui/src/types/dashboard.ts
@@ -3,12 +3,12 @@ import {ColorString} from 'src/types/colors'
 import {Template} from 'src/types/tempVars'
 
 export interface Axis {
-  bounds: [string, string]
   label: string
   prefix: string
   suffix: string
   base: string
   scale: string
+  bounds?: [string, string]
 }
 
 export type TimeSeriesValue = string | number | null | undefined
@@ -76,6 +76,7 @@ export interface Cell {
   decimalPlaces: DecimalPlaces
   links: CellLinks
   legend: Legend
+  isWidget?: boolean
 }
 
 export enum CellType {
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index 60da481c9..d2443a520 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -40,6 +40,7 @@ import {
   DygraphClass,
   DygraphData,
 } from './dygraphs'
+import {JSONFeedData} from './status'
 
 export {
   Me,
@@ -96,4 +97,5 @@ export {
   SchemaFilter,
   RemoteDataState,
   URLQueryParams,
+  JSONFeedData,
 }

From dc6fd45f58a1dcf23488d218ce4c338c07054bdb Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 17:07:27 -0700
Subject: [PATCH 055/100] Convert Component to TypeScript and Implement
 PageHeader

---
 .../dashboards/components/DashboardHeader.js  | 147 --------------
 .../dashboards/components/DashboardHeader.tsx | 186 ++++++++++++++++++
 2 files changed, 186 insertions(+), 147 deletions(-)
 delete mode 100644 ui/src/dashboards/components/DashboardHeader.js
 create mode 100644 ui/src/dashboards/components/DashboardHeader.tsx

diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js
deleted file mode 100644
index 46efa78f4..000000000
--- a/ui/src/dashboards/components/DashboardHeader.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
-
-import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
-import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
-import SourceIndicator from 'shared/components/SourceIndicator'
-import GraphTips from 'shared/components/GraphTips'
-import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
-import DashboardSwitcher from 'src/dashboards/components/DashboardSwitcher'
-
-const DashboardHeader = ({
-  names,
-  onSave,
-  onCancel,
-  isEditMode,
-  isHidden,
-  dashboard,
-  onAddCell,
-  autoRefresh,
-  activeDashboard,
-  onEditDashboard,
-  onManualRefresh,
-  handleChooseTimeRange,
-  handleChooseAutoRefresh,
-  onToggleTempVarControls,
-  showTemplateControlBar,
-  timeRange: {upper, lower},
-  handleClickPresentationButton,
-  zoomedTimeRange: {lower: zoomedLower, upper: zoomedUpper},
-}) =>
-  isHidden ? null : (
-    <div className="page-header full-width">
-      <div className="page-header--container">
-        <div
-          className={
-            dashboard
-              ? 'page-header--left page-header__dash-editable'
-              : 'page-header--left'
-          }
-        >
-          {names && names.length > 1 ? (
-            <DashboardSwitcher
-              names={names}
-              activeDashboard={activeDashboard}
-            />
-          ) : null}
-          {dashboard ? (
-            <Authorized
-              requiredRole={EDITOR_ROLE}
-              replaceWithIfNotAuthorized={
-                <h1 className="page-header--title">{activeDashboard}</h1>
-              }
-            >
-              <DashboardHeaderEdit
-                onSave={onSave}
-                onCancel={onCancel}
-                activeDashboard={activeDashboard}
-                onEditDashboard={onEditDashboard}
-                isEditMode={isEditMode}
-              />
-            </Authorized>
-          ) : (
-            <h1 className="page-header--title">{activeDashboard}</h1>
-          )}
-        </div>
-        <div className="page-header--right">
-          <GraphTips />
-          <SourceIndicator />
-          {dashboard ? (
-            <Authorized requiredRole={EDITOR_ROLE}>
-              <button className="btn btn-primary btn-sm" onClick={onAddCell}>
-                <span className="icon plus" />
-                Add Cell
-              </button>
-            </Authorized>
-          ) : null}
-          {dashboard ? (
-            <div
-              className={classnames('btn btn-default btn-sm', {
-                active: showTemplateControlBar,
-              })}
-              onClick={onToggleTempVarControls}
-            >
-              <span className="icon cube" />Template Variables
-            </div>
-          ) : null}
-          <AutoRefreshDropdown
-            onChoose={handleChooseAutoRefresh}
-            onManualRefresh={onManualRefresh}
-            selected={autoRefresh}
-            iconName="refresh"
-          />
-          <TimeRangeDropdown
-            onChooseTimeRange={handleChooseTimeRange}
-            selected={{
-              upper: zoomedUpper || upper,
-              lower: zoomedLower || lower,
-            }}
-          />
-          <div
-            className="btn btn-default btn-sm btn-square"
-            onClick={handleClickPresentationButton}
-          >
-            <span className="icon expand-a" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-const {arrayOf, bool, func, number, shape, string} = PropTypes
-
-DashboardHeader.defaultProps = {
-  zoomedTimeRange: {
-    lower: null,
-    upper: null,
-  },
-}
-
-DashboardHeader.propTypes = {
-  activeDashboard: string.isRequired,
-  onEditDashboard: func,
-  dashboard: shape({}),
-  timeRange: shape({
-    lower: string,
-    upper: string,
-  }).isRequired,
-  autoRefresh: number.isRequired,
-  isHidden: bool.isRequired,
-  isEditMode: bool,
-  handleChooseTimeRange: func.isRequired,
-  handleChooseAutoRefresh: func.isRequired,
-  onManualRefresh: func.isRequired,
-  handleClickPresentationButton: func.isRequired,
-  onAddCell: func,
-  onToggleTempVarControls: func,
-  showTemplateControlBar: bool,
-  zoomedTimeRange: shape({}),
-  onCancel: func,
-  onSave: func,
-  names: arrayOf(shape({})).isRequired,
-}
-
-export default DashboardHeader
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
new file mode 100644
index 000000000..cf959b9a2
--- /dev/null
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -0,0 +1,186 @@
+import React, {PureComponent} from 'react'
+import classnames from 'classnames'
+
+import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
+
+import PageHeader from 'src/shared/components/PageHeader'
+import PageHeaderTitle from 'src/shared/components/PageHeaderTitle'
+import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
+import GraphTips from 'src/shared/components/GraphTips'
+import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
+import DashboardSwitcher from 'src/dashboards/components/DashboardSwitcher'
+import {Dashboard, TimeRange} from 'src/types'
+
+interface DashboardName {
+  text: string
+}
+
+interface Props {
+  activeDashboard: string
+  dashboard: Dashboard
+  onEditDashboard: () => void
+  timeRange: TimeRange
+  autoRefresh: number
+  isHidden: boolean
+  isEditMode?: boolean
+  handleChooseTimeRange: (timeRange: TimeRange) => void
+  handleChooseAutoRefresh: () => void
+  onManualRefresh: () => void
+  handleClickPresentationButton: () => void
+  onAddCell: () => void
+  onToggleTempVarControls: () => void
+  showTemplateControlBar: boolean
+  zoomedTimeRange: TimeRange
+  onCancel: () => void
+  onSave: () => void
+  names: DashboardName[]
+}
+
+class DashboardHeader extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    zoomedTimeRange: {
+      upper: null,
+      lower: null,
+    },
+  }
+
+  public render() {
+    return (
+      <PageHeader
+        fullWidth={true}
+        sourceIndicator={true}
+        renderTitle={this.title}
+        renderOptions={this.options}
+      />
+    )
+  }
+
+  private title = (): JSX.Element => {
+    return (
+      <>
+        {this.dashboardSwitcher}
+        {this.dashboardTitle}
+      </>
+    )
+  }
+
+  private options = (): JSX.Element => {
+    const {
+      handleChooseAutoRefresh,
+      onManualRefresh,
+      autoRefresh,
+      handleChooseTimeRange,
+      timeRange: {upper, lower},
+      zoomedTimeRange,
+      handleClickPresentationButton,
+    } = this.props
+
+    return (
+      <>
+        <GraphTips />
+        {this.addCellButton}
+        {this.tempVarsButton}
+        <AutoRefreshDropdown
+          onChoose={handleChooseAutoRefresh}
+          onManualRefresh={onManualRefresh}
+          selected={autoRefresh}
+          iconName="refresh"
+        />
+        <TimeRangeDropdown
+          onChooseTimeRange={handleChooseTimeRange}
+          selected={{
+            upper: zoomedTimeRange.upper || upper,
+            lower: zoomedTimeRange.lower || lower,
+          }}
+        />
+        <button
+          className="btn btn-default btn-sm btn-square"
+          onClick={handleClickPresentationButton}
+        >
+          <span className="icon expand-a" />
+        </button>
+      </>
+    )
+  }
+
+  private get addCellButton(): JSX.Element {
+    const {dashboard, onAddCell} = this.props
+
+    if (dashboard) {
+      return (
+        <Authorized requiredRole={EDITOR_ROLE}>
+          <button className="btn btn-primary btn-sm" onClick={onAddCell}>
+            <span className="icon plus" />
+            Add Cell
+          </button>
+        </Authorized>
+      )
+    }
+  }
+
+  private get tempVarsButton(): JSX.Element {
+    const {
+      dashboard,
+      showTemplateControlBar,
+      onToggleTempVarControls,
+    } = this.props
+
+    if (dashboard) {
+      return (
+        <div
+          className={classnames('btn btn-default btn-sm', {
+            active: showTemplateControlBar,
+          })}
+          onClick={onToggleTempVarControls}
+        >
+          <span className="icon cube" />Template Variables
+        </div>
+      )
+    }
+  }
+
+  private get dashboardSwitcher(): JSX.Element {
+    const {names, activeDashboard} = this.props
+
+    if (names && names.length > 1) {
+      return (
+        <DashboardSwitcher names={names} activeDashboard={activeDashboard} />
+      )
+    }
+  }
+
+  private get dashboardTitle(): JSX.Element {
+    const {
+      dashboard,
+      activeDashboard,
+      onSave,
+      onCancel,
+      onEditDashboard,
+      isEditMode,
+    } = this.props
+
+    if (dashboard) {
+      return (
+        <Authorized
+          requiredRole={EDITOR_ROLE}
+          replaceWithIfNotAuthorized={
+            <PageHeaderTitle title={activeDashboard} />
+          }
+        >
+          <DashboardHeaderEdit
+            onSave={onSave}
+            onCancel={onCancel}
+            activeDashboard={activeDashboard}
+            onEditDashboard={onEditDashboard}
+            isEditMode={isEditMode}
+          />
+        </Authorized>
+      )
+    }
+
+    return <PageHeaderTitle title={activeDashboard} />
+  }
+}
+
+export default DashboardHeader

From 2b6e628d5b021161f7567bbe2f39750067a7a7a4 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 17:38:12 -0700
Subject: [PATCH 056/100] Use component instead of pure component to prevent
 updating issues

---
 ui/src/dashboards/components/DashboardHeader.tsx | 10 +++++-----
 ui/src/shared/components/PageHeader.tsx          |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index cf959b9a2..18b22b4b7 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {Component} from 'react'
 import classnames from 'classnames'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
@@ -37,7 +37,7 @@ interface Props {
   names: DashboardName[]
 }
 
-class DashboardHeader extends PureComponent<Props> {
+class DashboardHeader extends Component<Props> {
   public static defaultProps: Partial<Props> = {
     zoomedTimeRange: {
       upper: null,
@@ -72,7 +72,7 @@ class DashboardHeader extends PureComponent<Props> {
       autoRefresh,
       handleChooseTimeRange,
       timeRange: {upper, lower},
-      zoomedTimeRange,
+      zoomedTimeRange: {upper: zoomedUpper, lower: zoomedLower},
       handleClickPresentationButton,
     } = this.props
 
@@ -90,8 +90,8 @@ class DashboardHeader extends PureComponent<Props> {
         <TimeRangeDropdown
           onChooseTimeRange={handleChooseTimeRange}
           selected={{
-            upper: zoomedTimeRange.upper || upper,
-            lower: zoomedTimeRange.lower || lower,
+            upper: zoomedUpper || upper,
+            lower: zoomedLower || lower,
           }}
         />
         <button
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 6843b5231..fadf2e888 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent, ReactElement} from 'react'
+import React, {Component, ReactElement} from 'react'
 import classnames from 'classnames'
 import Title from 'src/shared/components/PageHeaderTitle'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
@@ -12,7 +12,7 @@ interface Props {
   sourceIndicator?: boolean
 }
 
-class PageHeader extends PureComponent<Props> {
+class PageHeader extends Component<Props> {
   public render() {
     return (
       <div className={this.className}>

From 0b879fad2d950ebab25447b37a5a294e181c3cd6 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 15 Jun 2018 10:11:13 -0700
Subject: [PATCH 057/100] Convert Tickscript tree to typescript

---
 .../{LogItemHTTP.js => LogItemHTTP.tsx}       |  24 ++---
 ...gItemHTTPError.js => LogItemHTTPError.tsx} |  22 ++--
 ...luxDBDebug.js => LogItemInfluxDBDebug.tsx} |  22 ++--
 ...itorDebug.js => LogItemKapacitorDebug.tsx} |  21 ++--
 ...itorError.js => LogItemKapacitorError.tsx} |  21 ++--
 .../components/LogItemKapacitorPoint.js       |  51 ---------
 .../components/LogItemKapacitorPoint.tsx      |  55 ++++++++++
 .../{LogItemSession.js => LogItemSession.tsx} |  21 ++--
 .../{LogsTable.js => LogsTable.tsx}           |  24 ++---
 .../{LogsTableRow.js => LogsTableRow.tsx}     |  22 ++--
 ui/src/kapacitor/components/Tickscript.js     |  89 ---------------
 ui/src/kapacitor/components/Tickscript.tsx    | 101 ++++++++++++++++++
 ...ckscriptEditor.js => TickscriptEditor.tsx} |  28 ++---
 ...Console.js => TickscriptEditorConsole.tsx} |  20 ++--
 .../components/TickscriptEditorControls.js    |  48 ---------
 .../components/TickscriptEditorControls.tsx   |  67 ++++++++++++
 .../{TickscriptID.js => TickscriptID.tsx}     |  28 +++--
 ui/src/kapacitor/components/TickscriptType.js |  30 ------
 .../kapacitor/components/TickscriptType.tsx   |  40 +++++++
 .../kapacitor/containers/TickscriptPage.tsx   |  14 +--
 ui/src/types/kapacitor.ts                     |  19 +++-
 21 files changed, 389 insertions(+), 378 deletions(-)
 rename ui/src/kapacitor/components/{LogItemHTTP.js => LogItemHTTP.tsx} (58%)
 rename ui/src/kapacitor/components/{LogItemHTTPError.js => LogItemHTTPError.tsx} (63%)
 rename ui/src/kapacitor/components/{LogItemInfluxDBDebug.js => LogItemInfluxDBDebug.tsx} (65%)
 rename ui/src/kapacitor/components/{LogItemKapacitorDebug.js => LogItemKapacitorDebug.tsx} (64%)
 rename ui/src/kapacitor/components/{LogItemKapacitorError.js => LogItemKapacitorError.tsx} (64%)
 delete mode 100644 ui/src/kapacitor/components/LogItemKapacitorPoint.js
 create mode 100644 ui/src/kapacitor/components/LogItemKapacitorPoint.tsx
 rename ui/src/kapacitor/components/{LogItemSession.js => LogItemSession.tsx} (58%)
 rename ui/src/kapacitor/components/{LogsTable.js => LogsTable.tsx} (63%)
 rename ui/src/kapacitor/components/{LogsTableRow.js => LogsTableRow.tsx} (87%)
 delete mode 100644 ui/src/kapacitor/components/Tickscript.js
 create mode 100644 ui/src/kapacitor/components/Tickscript.tsx
 rename ui/src/kapacitor/components/{TickscriptEditor.js => TickscriptEditor.tsx} (74%)
 rename ui/src/kapacitor/components/{TickscriptEditorConsole.js => TickscriptEditorConsole.tsx} (68%)
 delete mode 100644 ui/src/kapacitor/components/TickscriptEditorControls.js
 create mode 100644 ui/src/kapacitor/components/TickscriptEditorControls.tsx
 rename ui/src/kapacitor/components/{TickscriptID.js => TickscriptID.tsx} (59%)
 delete mode 100644 ui/src/kapacitor/components/TickscriptType.js
 create mode 100644 ui/src/kapacitor/components/TickscriptType.tsx

diff --git a/ui/src/kapacitor/components/LogItemHTTP.js b/ui/src/kapacitor/components/LogItemHTTP.tsx
similarity index 58%
rename from ui/src/kapacitor/components/LogItemHTTP.js
rename to ui/src/kapacitor/components/LogItemHTTP.tsx
index 89607e151..b0e64c206 100644
--- a/ui/src/kapacitor/components/LogItemHTTP.js
+++ b/ui/src/kapacitor/components/LogItemHTTP.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemHTTP = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemHTTP: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -16,17 +21,4 @@ const LogItemHTTP = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemHTTP.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    method: string.isRequired,
-    username: string.isRequired,
-    host: string.isRequired,
-    duration: string.isRequired,
-  }),
-}
-
 export default LogItemHTTP
diff --git a/ui/src/kapacitor/components/LogItemHTTPError.js b/ui/src/kapacitor/components/LogItemHTTPError.tsx
similarity index 63%
rename from ui/src/kapacitor/components/LogItemHTTPError.js
rename to ui/src/kapacitor/components/LogItemHTTPError.tsx
index ecaba7233..4803e8d02 100644
--- a/ui/src/kapacitor/components/LogItemHTTPError.js
+++ b/ui/src/kapacitor/components/LogItemHTTPError.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemHTTPError = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemHTTPError: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row" key={logItem.key}>
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -16,15 +21,4 @@ const LogItemHTTPError = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemHTTPError.propTypes = {
-  logItem: shape({
-    key: string.isRequired,
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    msg: string.isRequired,
-  }),
-}
-
 export default LogItemHTTPError
diff --git a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js b/ui/src/kapacitor/components/LogItemInfluxDBDebug.tsx
similarity index 65%
rename from ui/src/kapacitor/components/LogItemInfluxDBDebug.js
rename to ui/src/kapacitor/components/LogItemInfluxDBDebug.tsx
index 0a2a833ed..3ba2e37a0 100644
--- a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
+++ b/ui/src/kapacitor/components/LogItemInfluxDBDebug.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemInfluxDBDebug = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemInfluxDBDebug: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -20,15 +25,4 @@ const LogItemInfluxDBDebug = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemInfluxDBDebug.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    msg: string.isRequired,
-    cluster: string.isRequired,
-  }),
-}
-
 export default LogItemInfluxDBDebug
diff --git a/ui/src/kapacitor/components/LogItemKapacitorDebug.js b/ui/src/kapacitor/components/LogItemKapacitorDebug.tsx
similarity index 64%
rename from ui/src/kapacitor/components/LogItemKapacitorDebug.js
rename to ui/src/kapacitor/components/LogItemKapacitorDebug.tsx
index 5d550d4ef..9694cb71a 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorDebug.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorDebug.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemKapacitorDebug = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemKapacitorDebug: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -16,14 +21,4 @@ const LogItemKapacitorDebug = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemKapacitorDebug.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    msg: string.isRequired,
-  }),
-}
-
 export default LogItemKapacitorDebug
diff --git a/ui/src/kapacitor/components/LogItemKapacitorError.js b/ui/src/kapacitor/components/LogItemKapacitorError.tsx
similarity index 64%
rename from ui/src/kapacitor/components/LogItemKapacitorError.js
rename to ui/src/kapacitor/components/LogItemKapacitorError.tsx
index d07c5b745..cb37daa0f 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorError.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorError.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemKapacitorError = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemKapacitorError: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -16,14 +21,4 @@ const LogItemKapacitorError = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemKapacitorError.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    msg: string.isRequired,
-  }),
-}
-
 export default LogItemKapacitorError
diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js
deleted file mode 100644
index 205d0eb57..000000000
--- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const renderKeysAndValues = (object, name) => {
-  if (!object) {
-    return <span className="logs-table--empty-cell">--</span>
-  }
-
-  const sortedObjKeys = Object.keys(object).sort()
-
-  return (
-    <div className="logs-table--column">
-      <h1>{`${sortedObjKeys.length} ${name}`}</h1>
-      <div className="logs-table--scrollbox">
-        {sortedObjKeys.map(objKey => (
-          <div key={objKey} className="logs-table--key-value">
-            {objKey}: <span>{object[objKey]}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-const LogItemKapacitorPoint = ({logItem}) => (
-  <div className="logs-table--row">
-    <div className="logs-table--divider">
-      <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">{logItem.ts}</div>
-    </div>
-    <div className="logs-table--details">
-      <div className="logs-table--service">Kapacitor Point</div>
-      <div className="logs-table--columns">
-        {renderKeysAndValues(logItem.tag, 'Tags')}
-        {renderKeysAndValues(logItem.field, 'Fields')}
-      </div>
-    </div>
-  </div>
-)
-
-const {shape, string} = PropTypes
-
-LogItemKapacitorPoint.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    tag: shape.isRequired,
-    field: shape.isRequired,
-  }),
-}
-
-export default LogItemKapacitorPoint
diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.tsx b/ui/src/kapacitor/components/LogItemKapacitorPoint.tsx
new file mode 100644
index 000000000..4e0c054e9
--- /dev/null
+++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.tsx
@@ -0,0 +1,55 @@
+import React, {PureComponent} from 'react'
+import _ from 'lodash'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+@ErrorHandling
+class LogItemKapacitorPoint extends PureComponent<Props> {
+  public render() {
+    const {logItem} = this.props
+    return (
+      <div className="logs-table--row">
+        <div className="logs-table--divider">
+          <div className={`logs-table--level ${logItem.lvl}`} />
+          <div className="logs-table--timestamp">{logItem.ts}</div>
+        </div>
+        <div className="logs-table--details">
+          <div className="logs-table--service">Kapacitor Point</div>
+          <div className="logs-table--columns">
+            {this.renderKeysAndValues(logItem.tag, 'Tags')}
+            {this.renderKeysAndValues(logItem.field, 'Fields')}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  private renderKeysAndValues = (object: any, name: string) => {
+    if (_.isEmpty(object)) {
+      return <span className="logs-table--empty-cell">--</span>
+    }
+
+    const sortedObjKeys = Object.keys(object).sort()
+
+    return (
+      <div className="logs-table--column">
+        <h1>{`${sortedObjKeys.length} ${name}`}</h1>
+        <div className="logs-table--scrollbox">
+          {sortedObjKeys.map(objKey => (
+            <div key={objKey} className="logs-table--key-value">
+              {objKey}: <span>{object[objKey]}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default LogItemKapacitorPoint
diff --git a/ui/src/kapacitor/components/LogItemSession.js b/ui/src/kapacitor/components/LogItemSession.tsx
similarity index 58%
rename from ui/src/kapacitor/components/LogItemSession.js
rename to ui/src/kapacitor/components/LogItemSession.tsx
index b3f45e9fb..cd6204273 100644
--- a/ui/src/kapacitor/components/LogItemSession.js
+++ b/ui/src/kapacitor/components/LogItemSession.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const LogItemSession = ({logItem}) => (
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogItemSession: SFC<Props> = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
@@ -13,14 +18,4 @@ const LogItemSession = ({logItem}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-LogItemSession.propTypes = {
-  logItem: shape({
-    lvl: string.isRequired,
-    ts: string.isRequired,
-    msg: string.isRequired,
-  }),
-}
-
 export default LogItemSession
diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.tsx
similarity index 63%
rename from ui/src/kapacitor/components/LogsTable.js
rename to ui/src/kapacitor/components/LogsTable.tsx
index 96a1a75c5..083f432ec 100644
--- a/ui/src/kapacitor/components/LogsTable.js
+++ b/ui/src/kapacitor/components/LogsTable.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
 import LogsTableRow from 'src/kapacitor/components/LogsTableRow'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
+import {LogItem} from 'src/types/kapacitor'
+
 const numLogsToRender = 200
 
-const LogsTable = ({logs}) => (
+interface Props {
+  logs: LogItem[]
+}
+
+const LogsTable: SFC<Props> = ({logs}) => (
   <div className="logs-table">
     <div className="logs-table--header">
       {`${numLogsToRender} Most Recent Logs`}
@@ -22,17 +27,4 @@ const LogsTable = ({logs}) => (
   </div>
 )
 
-const {arrayOf, shape, string} = PropTypes
-
-LogsTable.propTypes = {
-  logs: arrayOf(
-    shape({
-      key: string.isRequired,
-      ts: string.isRequired,
-      lvl: string.isRequired,
-      msg: string.isRequired,
-    })
-  ).isRequired,
-}
-
 export default LogsTable
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.tsx
similarity index 87%
rename from ui/src/kapacitor/components/LogsTableRow.js
rename to ui/src/kapacitor/components/LogsTableRow.tsx
index 74dec4b69..0a1dacaff 100644
--- a/ui/src/kapacitor/components/LogsTableRow.js
+++ b/ui/src/kapacitor/components/LogsTableRow.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
 import LogItemSession from 'src/kapacitor/components/LogItemSession'
 import LogItemHTTP from 'src/kapacitor/components/LogItemHTTP'
@@ -9,7 +8,13 @@ import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorErro
 import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug'
 import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug'
 
-const LogsTableRow = ({logItem}) => {
+import {LogItem} from 'src/types/kapacitor'
+
+interface Props {
+  logItem: LogItem
+}
+
+const LogsTableRow: SFC<Props> = ({logItem}) => {
   if (logItem.service === 'sessions') {
     return <LogItemSession logItem={logItem} />
   }
@@ -51,15 +56,4 @@ const LogsTableRow = ({logItem}) => {
   )
 }
 
-const {shape, string} = PropTypes
-
-LogsTableRow.propTypes = {
-  logItem: shape({
-    key: string.isRequired,
-    ts: string.isRequired,
-    lvl: string.isRequired,
-    msg: string.isRequired,
-  }).isRequired,
-}
-
 export default LogsTableRow
diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js
deleted file mode 100644
index 020fb98bc..000000000
--- a/ui/src/kapacitor/components/Tickscript.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
-import TickscriptEditor from 'src/kapacitor/components/TickscriptEditor'
-import TickscriptEditorControls from 'src/kapacitor/components/TickscriptEditorControls'
-import TickscriptEditorConsole from 'src/kapacitor/components/TickscriptEditorConsole'
-import LogsTable from 'src/kapacitor/components/LogsTable'
-
-const Tickscript = ({
-  onSave,
-  onExit,
-  task,
-  logs,
-  consoleMessage,
-  onSelectDbrps,
-  onChangeScript,
-  onChangeType,
-  onChangeID,
-  unsavedChanges,
-  isNewTickscript,
-  areLogsVisible,
-  areLogsEnabled,
-  onToggleLogsVisibility,
-}) => (
-  <div className="page">
-    <TickscriptHeader
-      task={task}
-      onSave={onSave}
-      onExit={onExit}
-      unsavedChanges={unsavedChanges}
-      areLogsVisible={areLogsVisible}
-      areLogsEnabled={areLogsEnabled}
-      onToggleLogsVisibility={onToggleLogsVisibility}
-      isNewTickscript={isNewTickscript}
-    />
-    <div className="page-contents--split">
-      <div
-        className="tickscript"
-        style={areLogsVisible ? {maxWidth: '50%'} : null}
-      >
-        <TickscriptEditorControls
-          isNewTickscript={isNewTickscript}
-          onSelectDbrps={onSelectDbrps}
-          onChangeType={onChangeType}
-          onChangeID={onChangeID}
-          task={task}
-        />
-        <TickscriptEditor
-          script={task.tickscript}
-          onChangeScript={onChangeScript}
-        />
-        <TickscriptEditorConsole
-          consoleMessage={consoleMessage}
-          unsavedChanges={unsavedChanges}
-        />
-      </div>
-      {areLogsVisible ? <LogsTable logs={logs} /> : null}
-    </div>
-  </div>
-)
-
-const {arrayOf, bool, func, shape, string} = PropTypes
-
-Tickscript.propTypes = {
-  logs: arrayOf(shape()).isRequired,
-  onSave: func.isRequired,
-  onExit: func.isRequired,
-  source: shape({
-    id: string,
-  }),
-  areLogsVisible: bool,
-  areLogsEnabled: bool,
-  onToggleLogsVisibility: func.isRequired,
-  task: shape({
-    id: string,
-    script: string,
-    dbsrps: arrayOf(shape()),
-  }).isRequired,
-  onChangeScript: func.isRequired,
-  onSelectDbrps: func.isRequired,
-  consoleMessage: string,
-  onChangeType: func.isRequired,
-  onChangeID: func.isRequired,
-  isNewTickscript: bool.isRequired,
-  unsavedChanges: bool,
-}
-
-export default Tickscript
diff --git a/ui/src/kapacitor/components/Tickscript.tsx b/ui/src/kapacitor/components/Tickscript.tsx
new file mode 100644
index 000000000..96eb847e5
--- /dev/null
+++ b/ui/src/kapacitor/components/Tickscript.tsx
@@ -0,0 +1,101 @@
+import React, {PureComponent, MouseEvent, ChangeEvent} from 'react'
+
+import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
+import TickscriptEditor from 'src/kapacitor/components/TickscriptEditor'
+import TickscriptEditorControls from 'src/kapacitor/components/TickscriptEditorControls'
+import TickscriptEditorConsole from 'src/kapacitor/components/TickscriptEditorConsole'
+import LogsTable from 'src/kapacitor/components/LogsTable'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {Task} from 'src/types'
+import {LogItem, DBRP} from 'src/types/kapacitor'
+
+interface Props {
+  logs: LogItem[]
+  onSave: () => void
+  onExit: () => void
+  areLogsVisible: boolean
+  areLogsEnabled: boolean
+  onToggleLogsVisibility: () => void
+  task: Task
+  onChangeScript: (tickscript: string) => void
+  onSelectDbrps: (dbrps: DBRP[]) => void
+  consoleMessage: string
+  onChangeType: (type: string) => (event: MouseEvent<HTMLLIElement>) => void
+  onChangeID: (e: ChangeEvent<HTMLInputElement>) => void
+  isNewTickscript: boolean
+  unsavedChanges: boolean
+}
+
+@ErrorHandling
+class Tickscript extends PureComponent<Props> {
+  public render() {
+    const {
+      onSave,
+      onExit,
+      task,
+      consoleMessage,
+      onSelectDbrps,
+      onChangeScript,
+      onChangeType,
+      onChangeID,
+      unsavedChanges,
+      isNewTickscript,
+      areLogsVisible,
+      areLogsEnabled,
+      onToggleLogsVisibility,
+    } = this.props
+    return (
+      <div className="page">
+        <TickscriptHeader
+          task={task}
+          onSave={onSave}
+          onExit={onExit}
+          unsavedChanges={unsavedChanges}
+          areLogsVisible={areLogsVisible}
+          areLogsEnabled={areLogsEnabled}
+          onToggleLogsVisibility={onToggleLogsVisibility}
+          isNewTickscript={isNewTickscript}
+        />
+        <div className="page-contents--split">
+          <div className="tickscript" style={this.style}>
+            <TickscriptEditorControls
+              isNewTickscript={isNewTickscript}
+              onSelectDbrps={onSelectDbrps}
+              onChangeType={onChangeType}
+              onChangeID={onChangeID}
+              task={task}
+            />
+            <TickscriptEditor
+              script={task.tickscript}
+              onChangeScript={onChangeScript}
+            />
+            <TickscriptEditorConsole
+              consoleMessage={consoleMessage}
+              unsavedChanges={unsavedChanges}
+            />
+          </div>
+          {this.logsTable}
+        </div>
+      </div>
+    )
+  }
+
+  private get style() {
+    const {areLogsVisible} = this.props
+    if (areLogsVisible) {
+      return {maxWidth: '50%'}
+    }
+  }
+
+  private get logsTable() {
+    const {areLogsVisible, logs} = this.props
+
+    if (areLogsVisible) {
+      return <LogsTable logs={logs} />
+    }
+  }
+}
+
+export default Tickscript
diff --git a/ui/src/kapacitor/components/TickscriptEditor.js b/ui/src/kapacitor/components/TickscriptEditor.tsx
similarity index 74%
rename from ui/src/kapacitor/components/TickscriptEditor.js
rename to ui/src/kapacitor/components/TickscriptEditor.tsx
index 77bb2ce54..4a5b1a14d 100644
--- a/ui/src/kapacitor/components/TickscriptEditor.js
+++ b/ui/src/kapacitor/components/TickscriptEditor.tsx
@@ -1,20 +1,24 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+
 import {Controlled as CodeMirror} from 'react-codemirror2'
 import 'src/external/codemirror'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+interface Props {
+  onChangeScript: (tickscript: string) => void
+  script: string
+}
+
+const NOOP = () => {}
+
 @ErrorHandling
-class TickscriptEditor extends Component {
+class TickscriptEditor extends Component<Props> {
   constructor(props) {
     super(props)
   }
 
-  updateCode = (_, __, script) => {
-    this.props.onChangeScript(script)
-  }
-
-  render() {
+  public render() {
     const {script} = this.props
 
     const options = {
@@ -31,17 +35,15 @@ class TickscriptEditor extends Component {
           value={script}
           onBeforeChange={this.updateCode}
           options={options}
+          onTouchStart={NOOP}
         />
       </div>
     )
   }
-}
 
-const {func, string} = PropTypes
-
-TickscriptEditor.propTypes = {
-  onChangeScript: func,
-  script: string,
+  private updateCode = (_, __, script) => {
+    this.props.onChangeScript(script)
+  }
 }
 
 export default TickscriptEditor
diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.tsx
similarity index 68%
rename from ui/src/kapacitor/components/TickscriptEditorConsole.js
rename to ui/src/kapacitor/components/TickscriptEditorConsole.tsx
index 29841d02e..b7b10c44e 100644
--- a/ui/src/kapacitor/components/TickscriptEditorConsole.js
+++ b/ui/src/kapacitor/components/TickscriptEditorConsole.tsx
@@ -1,7 +1,14 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => {
+interface Props {
+  consoleMessage: string
+  unsavedChanges: boolean
+}
+
+const TickscriptEditorConsole: SFC<Props> = ({
+  consoleMessage,
+  unsavedChanges,
+}) => {
   let consoleOutput = 'TICKscript is valid'
   let consoleClass = 'tickscript-console--valid'
 
@@ -20,11 +27,4 @@ const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => {
   )
 }
 
-const {bool, string} = PropTypes
-
-TickscriptEditorConsole.propTypes = {
-  consoleMessage: string,
-  unsavedChanges: bool,
-}
-
 export default TickscriptEditorConsole
diff --git a/ui/src/kapacitor/components/TickscriptEditorControls.js b/ui/src/kapacitor/components/TickscriptEditorControls.js
deleted file mode 100644
index d8b123b4d..000000000
--- a/ui/src/kapacitor/components/TickscriptEditorControls.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import TickscriptType from 'src/kapacitor/components/TickscriptType'
-import MultiSelectDBDropdown from 'shared/components/MultiSelectDBDropdown'
-import TickscriptID, {
-  TickscriptStaticID,
-} from 'src/kapacitor/components/TickscriptID'
-
-const addName = list => list.map(l => ({...l, name: `${l.db}.${l.rp}`}))
-
-const TickscriptEditorControls = ({
-  isNewTickscript,
-  onSelectDbrps,
-  onChangeType,
-  onChangeID,
-  task,
-}) => (
-  <div className="tickscript-controls">
-    {isNewTickscript ? (
-      <TickscriptID onChangeID={onChangeID} id={task.id} />
-    ) : (
-      <TickscriptStaticID id={task.name ? task.name : task.id} />
-    )}
-    <div className="tickscript-controls--right">
-      <TickscriptType type={task.type} onChangeType={onChangeType} />
-      <MultiSelectDBDropdown
-        selectedItems={addName(task.dbrps)}
-        onApply={onSelectDbrps}
-      />
-    </div>
-  </div>
-)
-
-const {arrayOf, bool, func, shape, string} = PropTypes
-
-TickscriptEditorControls.propTypes = {
-  isNewTickscript: bool.isRequired,
-  onSelectDbrps: func.isRequired,
-  onChangeType: func.isRequired,
-  onChangeID: func.isRequired,
-  task: shape({
-    id: string,
-    script: string,
-    dbsrps: arrayOf(shape()),
-  }).isRequired,
-}
-
-export default TickscriptEditorControls
diff --git a/ui/src/kapacitor/components/TickscriptEditorControls.tsx b/ui/src/kapacitor/components/TickscriptEditorControls.tsx
new file mode 100644
index 000000000..079b94922
--- /dev/null
+++ b/ui/src/kapacitor/components/TickscriptEditorControls.tsx
@@ -0,0 +1,67 @@
+import React, {Component, MouseEvent, ChangeEvent} from 'react'
+
+import TickscriptType from 'src/kapacitor/components/TickscriptType'
+import MultiSelectDBDropdown from 'src/shared/components/MultiSelectDBDropdown'
+import TickscriptID, {
+  TickscriptStaticID,
+} from 'src/kapacitor/components/TickscriptID'
+
+import {Task} from 'src/types'
+import {DBRP} from 'src/types/kapacitor'
+
+interface DBRPDropdownItem extends DBRP {
+  name: string
+}
+
+interface Props {
+  isNewTickscript: boolean
+  onSelectDbrps: (dbrps: DBRP[]) => void
+  onChangeType: (type: string) => (event: MouseEvent<HTMLLIElement>) => void
+  onChangeID: (e: ChangeEvent<HTMLInputElement>) => void
+  task: Task
+}
+
+class TickscriptEditorControls extends Component<Props> {
+  public render() {
+    const {onSelectDbrps, onChangeType, task} = this.props
+    return (
+      <div className="tickscript-controls">
+        {this.tickscriptID}
+        <div className="tickscript-controls--right">
+          <TickscriptType type={task.type} onChangeType={onChangeType} />
+          <MultiSelectDBDropdown
+            selectedItems={this.addName(task.dbrps)}
+            onApply={onSelectDbrps}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  private get tickscriptID() {
+    const {isNewTickscript, onChangeID, task} = this.props
+
+    if (isNewTickscript) {
+      return <TickscriptID onChangeID={onChangeID} id={task.id} />
+    }
+
+    return <TickscriptStaticID id={this.taskID} />
+  }
+
+  private get taskID() {
+    const {
+      task: {name, id},
+    } = this.props
+    if (name) {
+      return name
+    }
+    return id
+  }
+
+  private addName = (list: DBRP[]): DBRPDropdownItem[] => {
+    const listWithName = list.map(l => ({...l, name: `${l.db}.${l.rp}`}))
+    return listWithName
+  }
+}
+
+export default TickscriptEditorControls
diff --git a/ui/src/kapacitor/components/TickscriptID.js b/ui/src/kapacitor/components/TickscriptID.tsx
similarity index 59%
rename from ui/src/kapacitor/components/TickscriptID.js
rename to ui/src/kapacitor/components/TickscriptID.tsx
index 93750f2d5..59ea53990 100644
--- a/ui/src/kapacitor/components/TickscriptID.js
+++ b/ui/src/kapacitor/components/TickscriptID.tsx
@@ -1,14 +1,18 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import React, {Component, SFC, ChangeEvent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+interface TickscriptIDProps {
+  onChangeID: (e: ChangeEvent<HTMLInputElement>) => void
+  id: string
+}
+
 @ErrorHandling
-class TickscriptID extends Component {
+class TickscriptID extends Component<TickscriptIDProps> {
   constructor(props) {
     super(props)
   }
 
-  render() {
+  public render() {
     const {onChangeID, id} = this.props
 
     return (
@@ -25,19 +29,11 @@ class TickscriptID extends Component {
   }
 }
 
-export const TickscriptStaticID = ({id}) => (
+interface TickscriptStaticIDProps {
+  id: string
+}
+export const TickscriptStaticID: SFC<TickscriptStaticIDProps> = ({id}) => (
   <h1 className="tickscript-controls--name">{id}</h1>
 )
 
-const {func, string} = PropTypes
-
-TickscriptID.propTypes = {
-  onChangeID: func.isRequired,
-  id: string.isRequired,
-}
-
-TickscriptStaticID.propTypes = {
-  id: string.isRequired,
-}
-
 export default TickscriptID
diff --git a/ui/src/kapacitor/components/TickscriptType.js b/ui/src/kapacitor/components/TickscriptType.js
deleted file mode 100644
index f708be3c7..000000000
--- a/ui/src/kapacitor/components/TickscriptType.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-const STREAM = 'stream'
-const BATCH = 'batch'
-
-const TickscriptType = ({type, onChangeType}) => (
-  <ul className="nav nav-tablist nav-tablist-sm">
-    <li
-      className={type === STREAM ? 'active' : ''}
-      onClick={onChangeType(STREAM)}
-    >
-      Stream
-    </li>
-    <li
-      className={type === BATCH ? 'active' : ''}
-      onClick={onChangeType(BATCH)}
-    >
-      Batch
-    </li>
-  </ul>
-)
-
-const {string, func} = PropTypes
-
-TickscriptType.propTypes = {
-  type: string,
-  onChangeType: func,
-}
-
-export default TickscriptType
diff --git a/ui/src/kapacitor/components/TickscriptType.tsx b/ui/src/kapacitor/components/TickscriptType.tsx
new file mode 100644
index 000000000..105a660c5
--- /dev/null
+++ b/ui/src/kapacitor/components/TickscriptType.tsx
@@ -0,0 +1,40 @@
+import React, {PureComponent, MouseEvent} from 'react'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  type: string
+  onChangeType: (type: string) => (event: MouseEvent<HTMLLIElement>) => void
+}
+
+const STREAM = 'stream'
+const BATCH = 'batch'
+
+@ErrorHandling
+class TickscriptType extends PureComponent<Props> {
+  public render() {
+    const {onChangeType} = this.props
+    return (
+      <ul className="nav nav-tablist nav-tablist-sm">
+        <li
+          className={this.getClassName(STREAM)}
+          onClick={onChangeType(STREAM)}
+        >
+          Stream
+        </li>
+        <li className={this.getClassName(BATCH)} onClick={onChangeType(BATCH)}>
+          Batch
+        </li>
+      </ul>
+    )
+  }
+
+  private getClassName(type: string) {
+    if (type === this.props.type) {
+      return 'active'
+    }
+    return ''
+  }
+}
+
+export default TickscriptType
diff --git a/ui/src/kapacitor/containers/TickscriptPage.tsx b/ui/src/kapacitor/containers/TickscriptPage.tsx
index 422d7896a..0b8a8c152 100644
--- a/ui/src/kapacitor/containers/TickscriptPage.tsx
+++ b/ui/src/kapacitor/containers/TickscriptPage.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import uuid from 'uuid'
@@ -18,7 +18,7 @@ import {
   Notification,
   NotificationFunc,
 } from 'src/types'
-
+import {LogItem, DBRP} from 'src/types/kapacitor'
 import {
   notifyTickscriptLoggingUnavailable,
   notifyTickscriptLoggingError,
@@ -76,7 +76,7 @@ interface State {
   task: Task
   consoleMessage: string
   isEditingID: boolean
-  logs: object[]
+  logs: LogItem[]
   areLogsVisible: boolean
   areLogsEnabled: boolean
   failStr: string
@@ -247,22 +247,22 @@ export class TickscriptPage extends PureComponent<Props, State> {
     return router.push(`/sources/${sourceID}/alert-rules`)
   }
 
-  private handleChangeScript = tickscript => {
+  private handleChangeScript = (tickscript: string) => {
     this.setState({
       task: {...this.state.task, tickscript},
       unsavedChanges: true,
     })
   }
 
-  private handleSelectDbrps = dbrps => {
+  private handleSelectDbrps = (dbrps: DBRP[]) => {
     this.setState({task: {...this.state.task, dbrps}, unsavedChanges: true})
   }
 
-  private handleChangeType = type => () => {
+  private handleChangeType = (type: string) => () => {
     this.setState({task: {...this.state.task, type}, unsavedChanges: true})
   }
 
-  private handleChangeID = e => {
+  private handleChangeID = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       task: {...this.state.task, id: e.target.value},
       unsavedChanges: true,
diff --git a/ui/src/types/kapacitor.ts b/ui/src/types/kapacitor.ts
index 96e2ba829..653d54906 100644
--- a/ui/src/types/kapacitor.ts
+++ b/ui/src/types/kapacitor.ts
@@ -186,7 +186,7 @@ interface OpsGenie {
 }
 
 // Talk sends alerts to Jane Talk (https://jianliao.com/site)
-interface Talk {} // tslint:disable-line
+interface Talk { } // tslint:disable-line
 
 // TriggerValues specifies the alerting logic for a specific trigger type
 interface TriggerValues {
@@ -411,3 +411,20 @@ export interface RuleValues {
   rangeValue?: string | null
   operator?: string
 }
+
+export interface LogItem {
+  key: string
+  service: string
+  lvl: string
+  ts: string
+  msg: string
+  id: string
+  tags: string
+  method?: string
+  username?: string
+  host?: string
+  duration?: string
+  tag?: object
+  field?: object
+  cluster?: string
+}

From 3af5ce7064656270e23c8768f39ec15c2cb2cd6a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 18:22:16 -0700
Subject: [PATCH 058/100] Don't render page header if in presentation mode

---
 .../dashboards/components/DashboardHeader.tsx |  1 -
 ui/src/shared/components/PageHeader.tsx       | 19 ++++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 18b22b4b7..7846d1843 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -22,7 +22,6 @@ interface Props {
   onEditDashboard: () => void
   timeRange: TimeRange
   autoRefresh: number
-  isHidden: boolean
   isEditMode?: boolean
   handleChooseTimeRange: (timeRange: TimeRange) => void
   handleChooseAutoRefresh: () => void
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index fadf2e888..72858d496 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,5 +1,7 @@
 import React, {Component, ReactElement} from 'react'
 import classnames from 'classnames'
+import {connect} from 'react-redux'
+
 import Title from 'src/shared/components/PageHeaderTitle'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 
@@ -10,10 +12,17 @@ interface Props {
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
+  inPresentationMode: boolean
 }
 
 class PageHeader extends Component<Props> {
   public render() {
+    const {inPresentationMode} = this.props
+
+    if (inPresentationMode) {
+      return
+    }
+
     return (
       <div className={this.className}>
         <div className="page-header--container">
@@ -77,4 +86,12 @@ class PageHeader extends Component<Props> {
   }
 }
 
-export default PageHeader
+const mapStateToProps = ({
+  app: {
+    ephemeral: {inPresentationMode},
+  },
+}) => ({
+  inPresentationMode,
+})
+
+export default connect(mapStateToProps)(PageHeader)

From c6587f36be69691c2e4454215b2db9bbb7e8fcdc Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 18:47:39 -0700
Subject: [PATCH 059/100] Refactor confirm button to use classnames instead of
 ternaries

---
 ui/src/shared/components/ConfirmButton.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx
index f3b506e92..4674697be 100644
--- a/ui/src/shared/components/ConfirmButton.tsx
+++ b/ui/src/shared/components/ConfirmButton.tsx
@@ -1,4 +1,5 @@
 import React, {PureComponent} from 'react'
+import classnames from 'classnames'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -88,12 +89,12 @@ class ConfirmButton extends PureComponent<Props, State> {
     const {type, size, square, disabled, customClass} = this.props
     const {expanded} = this.state
 
-    const customClassString = customClass ? ` ${customClass}` : ''
-    const squareString = square ? ' btn-square' : ''
-    const expandedString = expanded ? ' active' : ''
-    const disabledString = disabled ? ' disabled' : ''
-
-    return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
+    return classnames(`confirm-button btn ${type} ${size}`, {
+      [customClass]: customClass,
+      'btn-square': square,
+      active: expanded,
+      disabled,
+    })
   }
 
   private get tooltipClassName(): string {

From 28bbdbf3cd4c9f197a27998b6743ec24a28bf898 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 18 Jun 2018 18:50:14 -0700
Subject: [PATCH 060/100] Updoot changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e01e7e5cc..213a92d53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 1.  [#3474](https://github.com/influxdata/chronograf/pull/3474): Sort task table on Manage Alert page alphabetically
 1.  [#3590](https://github.com/influxdata/chronograf/pull/3590): Redesign icons in side navigation
+1.  [#3696](https://github.com/influxdata/chronograf/pull/3696): Add ability to delete entire queries in Flux Editor
 
 ### Bug Fixes
 

From f9f33fe7ea114fed278354dcefb5f56ee969b6fc Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 19 Jun 2018 11:05:18 -0700
Subject: [PATCH 061/100] Fix merge errors and rollback Source object updates

---
 ui/src/shared/constants/index.tsx        | 21 ------
 ui/src/sources/containers/SourcePage.tsx | 96 ++++++++++++------------
 2 files changed, 47 insertions(+), 70 deletions(-)

diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx
index abf21ed5b..216ed85f1 100644
--- a/ui/src/shared/constants/index.tsx
+++ b/ui/src/shared/constants/index.tsx
@@ -428,23 +428,7 @@ export const DYGRAPH_CONTAINER_H_MARGIN = 16
 export const DYGRAPH_CONTAINER_V_MARGIN = 8
 export const DYGRAPH_CONTAINER_XLABEL_MARGIN = 20
 
-export const DEFAULT_SOURCE_LINKS = {
-  self: '',
-  kapacitors: '',
-  proxy: '',
-  queries: '',
-  write: '',
-  permissions: '',
-  users: '',
-  roles: '',
-  databases: '',
-  annotations: '',
-  health: '',
-  services: '',
-}
-
 export const DEFAULT_SOURCE = {
-  id: '',
   url: 'http://localhost:8086',
   name: 'Influx 1',
   username: '',
@@ -453,11 +437,6 @@ export const DEFAULT_SOURCE = {
   telegraf: 'telegraf',
   insecureSkipVerify: false,
   metaUrl: '',
-  organization: '',
-  role: '',
-  defaultRP: '',
-  links: DEFAULT_SOURCE_LINKS,
-  type: '',
 }
 
 export const defaultIntervalValue = '333'
diff --git a/ui/src/sources/containers/SourcePage.tsx b/ui/src/sources/containers/SourcePage.tsx
index 950e1c8ff..decee0215 100644
--- a/ui/src/sources/containers/SourcePage.tsx
+++ b/ui/src/sources/containers/SourcePage.tsx
@@ -1,5 +1,6 @@
-import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
+import React, {PureComponent, MouseEvent, ChangeEvent} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
+import _ from 'lodash'
 import {getSource} from 'src/shared/apis'
 import {createSource, updateSource} from 'src/shared/apis'
 import {
@@ -19,6 +20,9 @@ import SourceForm from 'src/sources/components/SourceForm'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 import {DEFAULT_SOURCE} from 'src/shared/constants'
+import {Source} from 'src/types'
+
+const INITIAL_PATH = '/sources/new'
 
 import {
   notifySourceUdpated,
@@ -28,10 +32,6 @@ import {
   notifySourceCreationSucceeded,
 } from 'src/shared/copy/notifications'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {Source} from 'src/types'
-import {getDeep} from 'src/utils/wrappers'
-
-const INITIAL_PATH = '/sources/new'
 
 interface Props extends WithRouterProps {
   notify: PublishNotification
@@ -40,8 +40,8 @@ interface Props extends WithRouterProps {
 }
 
 interface State {
-  isLoading: boolean
   isCreated: boolean
+  isLoading: boolean
   source: Partial<Source>
   editMode: boolean
   isInitialSource: boolean
@@ -56,8 +56,8 @@ class SourcePage extends PureComponent<Props, State> {
       isLoading: true,
       isCreated: false,
       source: DEFAULT_SOURCE,
-      editMode: this.props.params.id !== undefined,
-      isInitialSource: this.props.location.pathname === INITIAL_PATH,
+      editMode: props.params.id !== undefined,
+      isInitialSource: props.router.location.pathname === INITIAL_PATH,
     }
   }
 
@@ -132,39 +132,7 @@ class SourcePage extends PureComponent<Props, State> {
     )
   }
 
-  private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let val: string | boolean = e.target.value
-    const name = e.target.name
-
-    if (e.target.type === 'checkbox') {
-      val = e.target.checked
-    }
-
-    this.setState(prevState => {
-      const source = {
-        ...prevState.source,
-        [name]: val,
-      }
-
-      return {...prevState, source}
-    })
-  }
-
-  private handleBlurSourceURL = () => {
-    const {source, editMode} = this.state
-    if (editMode) {
-      this.setState(this.normalizeSource)
-      return
-    }
-
-    if (!source.url) {
-      return
-    }
-
-    this.setState(this.normalizeSource, this.createSourceOnBlur)
-  }
-
-  private handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+  private handleSubmit = (e: MouseEvent<HTMLFormElement>): void => {
     e.preventDefault()
     const {isCreated, editMode} = this.state
     const isNewSource = !editMode
@@ -181,10 +149,8 @@ class SourcePage extends PureComponent<Props, State> {
     router.push('/purgatory')
   }
 
-  private normalizeSource() {
-    const {source} = this.state
-    // private normalizeSource({source}) {
-    // const url = source.url.trim()
+  private normalizeSource({source}) {
+    const url = source.url.trim()
     if (source.url.startsWith('http')) {
       return {source: {...source, url}}
     }
@@ -250,7 +216,11 @@ class SourcePage extends PureComponent<Props, State> {
     router.push(`/sources/${params.sourceID}/manage-sources`)
   }
 
-  private redirectToApp = (source: Source) => {
+  private parseError = (error): string => {
+    return _.get(error, ['data', 'message'], error)
+  }
+
+  private redirectToApp = source => {
     const {location, router} = this.props
     const {redirectPath} = location.query
 
@@ -265,8 +235,36 @@ class SourcePage extends PureComponent<Props, State> {
     return router.push(fixedPath)
   }
 
-  private parseError = error => {
-    return getDeep<string>(error, 'data.message', '')
+  private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value
+    const name = e.target.name
+
+    if (e.target.type === 'checkbox') {
+      val = e.target.checked as any
+    }
+
+    this.setState(prevState => {
+      const source = {
+        ...prevState.source,
+        [name]: val,
+      }
+
+      return {...prevState, source}
+    })
+  }
+
+  private handleBlurSourceURL = () => {
+    const {source, editMode} = this.state
+    if (editMode) {
+      this.setState(this.normalizeSource)
+      return
+    }
+
+    if (!source.url) {
+      return
+    }
+
+    this.setState(this.normalizeSource, this.createSourceOnBlur)
   }
 }
 
@@ -276,4 +274,4 @@ const mdtp = {
   updateSource: updateSourceAction,
 }
 
-export default withRouter(connect(null, mdtp)(SourcePage))
+export default connect(null, mdtp)(withRouter(SourcePage))

From 2bbe80032d6828f45f42ef22fb1fb28b772922f4 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 19 Jun 2018 11:16:43 -0700
Subject: [PATCH 062/100] Fix failing test

---
 ui/test/normalizers/dashboardTime.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/test/normalizers/dashboardTime.test.js b/ui/test/normalizers/dashboardTime.test.js
index ab439144e..d63055201 100644
--- a/ui/test/normalizers/dashboardTime.test.js
+++ b/ui/test/normalizers/dashboardTime.test.js
@@ -30,7 +30,7 @@ describe('Normalizers.DashboardTime', () => {
   })
 
   it('can remove timeRanges with incorrect dashboardID', () => {
-    const ranges = [{dashboardID: 1, upper, lower}, timeRange]
+    const ranges = [{dashboardID: '1', upper, lower}, timeRange]
 
     const actual = normalizer(ranges)
     const expected = [timeRange]

From 1c1c5fe216cdc524e85ae0180a150a607a9c1123 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 11:29:24 -0700
Subject: [PATCH 063/100] Remove connection to redux from page header

---
 ui/src/dashboards/components/DashboardHeader.tsx |  4 ++++
 ui/src/shared/components/PageHeader.tsx          | 15 +++------------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 7846d1843..81759b6ff 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -34,6 +34,7 @@ interface Props {
   onCancel: () => void
   onSave: () => void
   names: DashboardName[]
+  isHidden: boolean
 }
 
 class DashboardHeader extends Component<Props> {
@@ -45,12 +46,15 @@ class DashboardHeader extends Component<Props> {
   }
 
   public render() {
+    const {isHidden} = this.props
+
     return (
       <PageHeader
         fullWidth={true}
         sourceIndicator={true}
         renderTitle={this.title}
         renderOptions={this.options}
+        inPresentationMode={isHidden}
       />
     )
   }
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 72858d496..0edea5d82 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -1,6 +1,5 @@
 import React, {Component, ReactElement} from 'react'
 import classnames from 'classnames'
-import {connect} from 'react-redux'
 
 import Title from 'src/shared/components/PageHeaderTitle'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
@@ -12,7 +11,7 @@ interface Props {
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
-  inPresentationMode: boolean
+  inPresentationMode?: boolean
 }
 
 class PageHeader extends Component<Props> {
@@ -20,7 +19,7 @@ class PageHeader extends Component<Props> {
     const {inPresentationMode} = this.props
 
     if (inPresentationMode) {
-      return
+      return null
     }
 
     return (
@@ -86,12 +85,4 @@ class PageHeader extends Component<Props> {
   }
 }
 
-const mapStateToProps = ({
-  app: {
-    ephemeral: {inPresentationMode},
-  },
-}) => ({
-  inPresentationMode,
-})
-
-export default connect(mapStateToProps)(PageHeader)
+export default PageHeader

From 913239bf7c3601e3bc0c544f9e99e9ac30e232bc Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 11:29:45 -0700
Subject: [PATCH 064/100] Fix nesting issue in test

---
 ui/test/kapacitor/containers/TickscriptPage.test.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/test/kapacitor/containers/TickscriptPage.test.tsx b/ui/test/kapacitor/containers/TickscriptPage.test.tsx
index 5edd94054..dc9e30b66 100644
--- a/ui/test/kapacitor/containers/TickscriptPage.test.tsx
+++ b/ui/test/kapacitor/containers/TickscriptPage.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 import {TickscriptPage} from 'src/kapacitor/containers/TickscriptPage'
 import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
+import PageHeader from 'src/shared/components/PageHeader'
 import TickscriptSave from 'src/kapacitor/components/TickscriptSave'
 import {source, kapacitorRules} from 'test/resources'
 
@@ -39,7 +40,7 @@ const setup = (override?) => {
   }
 }
 
-describe('Kapacitor.Containers.TickscriptPage', () => {
+describe.only('Kapacitor.Containers.TickscriptPage', () => {
   afterEach(() => {
     jest.clearAllMocks()
   })
@@ -72,7 +73,8 @@ describe('Kapacitor.Containers.TickscriptPage', () => {
         })
 
         const header = wrapper.dive().find(TickscriptHeader)
-        const save = header.dive().find(TickscriptSave)
+        const pageHeader = header.dive().find(PageHeader)
+        const save = pageHeader.dive().find(TickscriptSave)
 
         save.dive().simulate('click')
 
@@ -101,7 +103,8 @@ describe('Kapacitor.Containers.TickscriptPage', () => {
         })
 
         const header = wrapper.dive().find(TickscriptHeader)
-        const save = header.dive().find(TickscriptSave)
+        const pageHeader = header.dive().find(PageHeader)
+        const save = pageHeader.dive().find(TickscriptSave)
 
         save.dive().simulate('click')
 

From a3c3fc6e1e0fbebe170a12903aa2761362b84440 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 11:29:56 -0700
Subject: [PATCH 065/100] fix nesting issue in test

---
 .../components/TickscriptHeader.test.tsx        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/test/kapacitor/components/TickscriptHeader.test.tsx b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
index df18c9bcb..e3a03b12d 100644
--- a/ui/test/kapacitor/components/TickscriptHeader.test.tsx
+++ b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import {shallow} from 'enzyme'
+import {mount} from 'enzyme'
 
+import PageHeader from 'src/shared/components/PageHeader'
 import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
 import TickscriptSave from 'src/kapacitor/components/TickscriptSave'
 
@@ -20,7 +21,7 @@ const setup = (override?) => {
     ...override,
   }
 
-  const wrapper = shallow(<TickscriptHeader {...props} />)
+  const wrapper = mount(<TickscriptHeader {...props} />)
 
   return {
     wrapper,
@@ -40,7 +41,8 @@ describe('Kapacitor.Components.TickscriptHeader', () => {
       it('is disabled if there are no changes', () => {
         const {wrapper} = setup({unsavedChanges: false})
 
-        const save = wrapper.find(TickscriptSave).dive()
+        const pageHeader = wrapper.find(PageHeader)
+        const save = pageHeader.find(TickscriptSave)
         const saveButton = save.find('button')
 
         expect(saveButton.props().disabled).toBe(true)
@@ -49,7 +51,8 @@ describe('Kapacitor.Components.TickscriptHeader', () => {
       it('is disabled if there are no dbrps', () => {
         const {wrapper} = setup({unsavedChanges: true})
 
-        const save = wrapper.find(TickscriptSave).dive()
+        const pageHeader = wrapper.find(PageHeader)
+        const save = pageHeader.find(TickscriptSave)
         const saveButton = save.find('button')
 
         expect(saveButton.props().disabled).toBe(true)
@@ -62,7 +65,8 @@ describe('Kapacitor.Components.TickscriptHeader', () => {
           const task = {id: '1', dbrps: []}
           const {wrapper} = setup({isNewTickscript: true, task})
 
-          const save = wrapper.find(TickscriptSave).dive()
+          const pageHeader = wrapper.find(PageHeader)
+          const save = pageHeader.find(TickscriptSave)
           const saveButton = save.find('button')
 
           expect(saveButton.props().disabled).toBe(true)
@@ -74,7 +78,8 @@ describe('Kapacitor.Components.TickscriptHeader', () => {
           const task = {id: '', dbrps: [{db: 'db1', rp: 'rp1'}]}
           const {wrapper} = setup({isNewTickscript: true, task})
 
-          const save = wrapper.find(TickscriptSave).dive()
+          const pageHeader = wrapper.find(PageHeader)
+          const save = pageHeader.find(TickscriptSave)
           const saveButton = save.find('button')
 
           expect(saveButton.props().disabled).toBe(true)

From 7f72fc992c71b119adc300afbebd7b6a0f0dd306 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 11:38:40 -0700
Subject: [PATCH 066/100] Preserve template variable name when editing type

---
 .../tempVars/components/TemplateVariableEditor.tsx   | 11 ++++++++---
 ui/src/tempVars/constants/index.ts                   | 12 ++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ui/src/tempVars/components/TemplateVariableEditor.tsx b/ui/src/tempVars/components/TemplateVariableEditor.tsx
index 8d15b5edc..296c3fb23 100644
--- a/ui/src/tempVars/components/TemplateVariableEditor.tsx
+++ b/ui/src/tempVars/components/TemplateVariableEditor.tsx
@@ -182,10 +182,10 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
 
   private handleChooseType = ({type}) => {
     const {
-      nextTemplate: {id},
+      nextTemplate: {id, tempVar},
     } = this.state
 
-    const nextNextTemplate = {...DEFAULT_TEMPLATES[type](), id}
+    const nextNextTemplate = {...DEFAULT_TEMPLATES[type](), id, tempVar}
 
     this.setState({nextTemplate: nextNextTemplate})
   }
@@ -204,7 +204,12 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
 
   private formatName = (): void => {
     const {nextTemplate} = this.state
-    const tempVar = formatName(nextTemplate.tempVar)
+
+    let tempVar = formatName(nextTemplate.tempVar)
+
+    if (tempVar === '::') {
+      tempVar = ''
+    }
 
     this.setState({nextTemplate: {...nextTemplate, tempVar}})
   }
diff --git a/ui/src/tempVars/constants/index.ts b/ui/src/tempVars/constants/index.ts
index 6fe11741c..414c2e546 100644
--- a/ui/src/tempVars/constants/index.ts
+++ b/ui/src/tempVars/constants/index.ts
@@ -62,7 +62,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.Databases]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-databases:',
+      tempVar: '',
       values: [
         {
           value: '_internal',
@@ -80,7 +80,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.Measurements]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-measurements:',
+      tempVar: '',
       values: [],
       type: TemplateType.Measurements,
       label: '',
@@ -93,7 +93,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.CSV]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-values:',
+      tempVar: '',
       values: [],
       type: TemplateType.CSV,
       label: '',
@@ -103,7 +103,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.TagKeys]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-tag-keys:',
+      tempVar: '',
       values: [],
       type: TemplateType.TagKeys,
       label: '',
@@ -115,7 +115,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.FieldKeys]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-field-keys:',
+      tempVar: '',
       values: [],
       type: TemplateType.FieldKeys,
       label: '',
@@ -127,7 +127,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
   [TemplateType.TagValues]: () => {
     return {
       id: uuid.v4(),
-      tempVar: ':my-tag-values:',
+      tempVar: '',
       values: [],
       type: TemplateType.TagValues,
       label: '',

From 8c6cb9b6cae0b26508ab6de87f9d284967c7a51e Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 18 Jun 2018 15:22:55 -0400
Subject: [PATCH 067/100] Check for yields before filter and range funcs in
 expression

Co-authored-by: Iris Scholten <ischolten.is@gmail.com>
---
 ui/src/flux/components/ExpressionNode.tsx | 40 ++++++++++++++++++++---
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index 8275fd6cf..fab99cf98 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -18,10 +18,12 @@ interface Props {
   onDeleteBody: (bodyID: string) => void
 }
 
+interface YieldToggles {
+  [x: number]: boolean
+}
+
 interface State {
-  nonYieldableIndexesToggled: {
-    [x: number]: boolean
-  }
+  nonYieldableIndexesToggled: YieldToggles
   isImplicitYieldToggled: boolean
 }
 
@@ -31,7 +33,7 @@ class ExpressionNode extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      nonYieldableIndexesToggled: {},
+      nonYieldableIndexesToggled: this.nonYieldableNodesFromScript,
       isImplicitYieldToggled: this.isImplicitYieldToggled,
     }
   }
@@ -210,6 +212,36 @@ class ExpressionNode extends PureComponent<Props, State> {
     return false
   }
 
+  private get nonYieldableNodesFromScript(): YieldToggles {
+    const {funcs} = this.props
+    let isBeforeFilter = true
+    let isBeforeRange = true
+
+    return _.reduce(
+      funcs,
+      (acc: YieldToggles, f, index) => {
+        if (f.name === 'range') {
+          isBeforeRange = false
+        }
+
+        if (f.name === 'filter') {
+          isBeforeFilter = false
+        }
+
+        if (isBeforeFilter || isBeforeRange) {
+          const nextNode = _.get(funcs, `${index + 1}`, null)
+
+          if (nextNode && nextNode.name === 'yield') {
+            return {...acc, [index]: true}
+          }
+        }
+
+        return acc
+      },
+      {}
+    )
+  }
+
   private get isImplicitYieldToggled(): boolean {
     const {isLastBody} = this.props
 

From b0bcce10a39484d83799d37087f1b3923e0233c9 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 18 Jun 2018 19:14:07 -0400
Subject: [PATCH 068/100] Add response error handling in builder

Co-authored-by: Iris Scholten <ischolten.is@gmail.com>
---
 ui/src/flux/apis/index.ts                 | 28 +++++++++++++++++++----
 ui/src/flux/components/ExpressionNode.tsx | 15 ++++++++++++
 ui/src/flux/components/FuncNode.tsx       |  7 +++++-
 ui/src/shared/parsing/flux/response.ts    | 13 +++++++++++
 4 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/ui/src/flux/apis/index.ts b/ui/src/flux/apis/index.ts
index 65d5d5661..e2232d360 100644
--- a/ui/src/flux/apis/index.ts
+++ b/ui/src/flux/apis/index.ts
@@ -3,7 +3,10 @@ import _ from 'lodash'
 import AJAX from 'src/utils/ajax'
 import {Service, FluxTable} from 'src/types'
 import {updateService} from 'src/shared/apis'
-import {parseResponse} from 'src/shared/parsing/flux/response'
+import {
+  parseResponse,
+  parseResponseError,
+} from 'src/shared/parsing/flux/response'
 import {MAX_RESPONSE_BYTES} from 'src/flux/constants'
 
 export const getSuggestions = async (url: string) => {
@@ -56,6 +59,9 @@ export const getTimeSeries = async (
     service.links.proxy
   }?path=/v1/query${mark}orgName=defaulorgname${and}q=${garbage}`
 
+  let responseBody: string
+  let responseByteLength: number
+
   try {
     // We are using the `fetch` API here since the `AJAX` utility lacks support
     // for limiting response size. The `AJAX` utility depends on
@@ -66,16 +72,28 @@ export const getTimeSeries = async (
     const resp = await fetch(url, {method: 'POST'})
     const {body, byteLength} = await decodeFluxRespWithLimit(resp)
 
-    return {
-      tables: parseResponse(body),
-      didTruncate: byteLength >= MAX_RESPONSE_BYTES,
-    }
+    responseBody = body
+    responseByteLength = byteLength
   } catch (error) {
     console.error('Problem fetching data', error)
 
     throw _.get(error, 'headers.x-influx-error', false) ||
       _.get(error, 'data.message', 'unknown error 🤷')
   }
+
+  try {
+    return {
+      tables: parseResponse(responseBody),
+      didTruncate: responseByteLength >= MAX_RESPONSE_BYTES,
+    }
+  } catch (error) {
+    console.error('Could not parse response body', error)
+
+    return {
+      tables: parseResponseError(responseBody),
+      didTruncate: false,
+    }
+  }
 }
 
 export const updateScript = async (service: Service, script: string) => {
diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index fab99cf98..6bb1dda1e 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -38,6 +38,17 @@ class ExpressionNode extends PureComponent<Props, State> {
     }
   }
 
+  public componentDidUpdate(prevProps) {
+    const {funcs: prevFuncs} = prevProps
+    const {funcs} = this.props
+
+    if (!_.isEqual(prevFuncs, funcs)) {
+      this.setState({
+        nonYieldableIndexesToggled: this.nonYieldableNodesFromScript,
+      })
+    }
+  }
+
   public render() {
     const {
       declarationID,
@@ -122,6 +133,10 @@ class ExpressionNode extends PureComponent<Props, State> {
                     false
                   )
 
+                  if (this.isBeforeFuncYield(i)) {
+                    return funcNode
+                  }
+
                   return (
                     <Fragment key={`${i}-notInScript`}>
                       {funcNode}
diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 0eeefd076..56c3f2458 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -184,12 +184,17 @@ export default class FuncNode extends PureComponent<Props, State> {
       declarationID,
       isYieldable,
       onToggleYieldWithLast,
+      isYielding,
     } = this.props
 
     if (isYieldable) {
       onToggleYield(bodyID, declarationID, index)
     } else {
-      onToggleYieldWithLast(index)
+      if (isYielding) {
+        onToggleYield(bodyID, declarationID, index)
+      } else {
+        onToggleYieldWithLast(index)
+      }
     }
   }
 
diff --git a/ui/src/shared/parsing/flux/response.ts b/ui/src/shared/parsing/flux/response.ts
index 5f9f369a6..b56f964ac 100644
--- a/ui/src/shared/parsing/flux/response.ts
+++ b/ui/src/shared/parsing/flux/response.ts
@@ -4,6 +4,19 @@ import uuid from 'uuid'
 
 import {FluxTable} from 'src/types'
 
+export const parseResponseError = (response: string): FluxTable[] => {
+  const {data} = Papa.parse(response.trim())
+
+  return [
+    {
+      id: uuid.v4(),
+      name: 'Error',
+      partitionKey: {},
+      data,
+    },
+  ]
+}
+
 export const parseResponse = (response: string): FluxTable[] => {
   const trimmedReponse = response.trim()
 

From bbd2d7aaddc2822236579203c42a708a689270c6 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Tue, 19 Jun 2018 12:53:01 -0400
Subject: [PATCH 069/100] Update FuncNode toggle to check when script yields

Updating FuncNode toggle to use a prop to determine when toggling
the script yield or yield with last in the ExpressionNode. The
is Yielding prop is not ineffective for determining how to toggle
a FuncNode. This also fixes an issue where toggling was not
updating FuncMenu styles.
---
 ui/src/flux/components/ExpressionNode.tsx | 33 +++++++++++++++--------
 ui/src/flux/components/FuncNode.tsx       | 12 +++------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index 6bb1dda1e..5fe996ea3 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -116,7 +116,8 @@ class ExpressionNode extends PureComponent<Props, State> {
                     onDelete={onDeleteFuncNode}
                     onToggleYield={onToggleYield}
                     isYieldable={isAfterFilter && isAfterRange}
-                    isYielding={this.isBeforeFuncYield(i)}
+                    isYielding={this.isBeforeYielding(i)}
+                    isYieldedInScript={this.isYieldNodeIndex(i + 1)}
                     declarationID={declarationID}
                     onGenerateScript={onGenerateScript}
                     declarationsFromBody={declarationsFromBody}
@@ -125,7 +126,10 @@ class ExpressionNode extends PureComponent<Props, State> {
                   />
                 )
 
-                if (nonYieldableIndexesToggled[i]) {
+                if (
+                  nonYieldableIndexesToggled[i] &&
+                  !this.isYieldNodeIndex(i + 1)
+                ) {
                   const script = scriptUpToYield(
                     bodyID,
                     declarationID,
@@ -133,10 +137,6 @@ class ExpressionNode extends PureComponent<Props, State> {
                     false
                   )
 
-                  if (this.isBeforeFuncYield(i)) {
-                    return funcNode
-                  }
-
                   return (
                     <Fragment key={`${i}-notInScript`}>
                       {funcNode}
@@ -167,7 +167,8 @@ class ExpressionNode extends PureComponent<Props, State> {
                         onDelete={onDeleteFuncNode}
                         onToggleYield={this.handleHideImplicitYield}
                         isYieldable={isAfterFilter && isAfterRange}
-                        isYielding={this.isBeforeFuncYield(i)}
+                        isYielding={this.isBeforeYielding(i)}
+                        isYieldedInScript={this.isYieldNodeIndex(i + 1)}
                         declarationID={declarationID}
                         onGenerateScript={onGenerateScript}
                         declarationsFromBody={declarationsFromBody}
@@ -202,9 +203,14 @@ class ExpressionNode extends PureComponent<Props, State> {
     )
   }
 
-  private isBeforeFuncYield(funcIndex: number): boolean {
+  private isBeforeYielding(funcIndex: number): boolean {
     const {funcs, isLastBody} = this.props
-    const {isImplicitYieldToggled} = this.state
+    const {isImplicitYieldToggled, nonYieldableIndexesToggled} = this.state
+    const beforeToggledLastYield = !!nonYieldableIndexesToggled[funcIndex]
+
+    if (beforeToggledLastYield) {
+      return true
+    }
 
     if (
       funcIndex === funcs.length - 1 &&
@@ -218,9 +224,14 @@ class ExpressionNode extends PureComponent<Props, State> {
       return false
     }
 
-    const nextFunc = funcs[funcIndex + 1]
+    return this.isYieldNodeIndex(funcIndex + 1)
+  }
 
-    if (nextFunc.name === 'yield') {
+  private isYieldNodeIndex(funcIndex) {
+    const {funcs} = this.props
+    const nextFunc = _.get(funcs, `${funcIndex}`, null)
+
+    if (nextFunc && nextFunc.name === 'yield') {
       return true
     }
 
diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 56c3f2458..e116dd249 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -30,6 +30,7 @@ interface Props {
   isYielding: boolean
   isYieldable: boolean
   onDeleteBody: (bodyID: string) => void
+  isYieldedInScript: boolean
 }
 
 interface State {
@@ -182,19 +183,14 @@ export default class FuncNode extends PureComponent<Props, State> {
       index,
       bodyID,
       declarationID,
-      isYieldable,
       onToggleYieldWithLast,
-      isYielding,
+      isYieldedInScript,
     } = this.props
 
-    if (isYieldable) {
+    if (isYieldedInScript) {
       onToggleYield(bodyID, declarationID, index)
     } else {
-      if (isYielding) {
-        onToggleYield(bodyID, declarationID, index)
-      } else {
-        onToggleYieldWithLast(index)
-      }
+      onToggleYieldWithLast(index)
     }
   }
 

From d4c9a96a9d7d40d9a114aca93a3f32ebdb3a9261 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 19 Jun 2018 11:44:42 -0700
Subject: [PATCH 070/100] Remove implicit yield functionality

Co-authored-by: Delmer Reed <delmer814+1@gmail.com>
---
 ui/src/flux/components/ExpressionNode.tsx | 85 +----------------------
 1 file changed, 3 insertions(+), 82 deletions(-)

diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index 5fe996ea3..b02fe494a 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -24,7 +24,6 @@ interface YieldToggles {
 
 interface State {
   nonYieldableIndexesToggled: YieldToggles
-  isImplicitYieldToggled: boolean
 }
 
 // an Expression is a group of one or more functions
@@ -34,7 +33,6 @@ class ExpressionNode extends PureComponent<Props, State> {
 
     this.state = {
       nonYieldableIndexesToggled: this.nonYieldableNodesFromScript,
-      isImplicitYieldToggled: this.isImplicitYieldToggled,
     }
   }
 
@@ -151,44 +149,8 @@ class ExpressionNode extends PureComponent<Props, State> {
                       />
                     </Fragment>
                   )
-                } else if (this.isEndOfScript(i)) {
-                  const script = scriptUpToYield(bodyID, declarationID, i, true)
-
-                  return (
-                    <Fragment key={`${i}-notInScript`}>
-                      <FuncNode
-                        key={i}
-                        index={i}
-                        func={func}
-                        funcs={funcs}
-                        bodyID={bodyID}
-                        service={service}
-                        onChangeArg={onChangeArg}
-                        onDelete={onDeleteFuncNode}
-                        onToggleYield={this.handleHideImplicitYield}
-                        isYieldable={isAfterFilter && isAfterRange}
-                        isYielding={this.isBeforeYielding(i)}
-                        isYieldedInScript={this.isYieldNodeIndex(i + 1)}
-                        declarationID={declarationID}
-                        onGenerateScript={onGenerateScript}
-                        declarationsFromBody={declarationsFromBody}
-                        onToggleYieldWithLast={this.handleToggleYieldWithLast}
-                        onDeleteBody={onDeleteBody}
-                      />
-                      <YieldFuncNode
-                        index={i}
-                        func={func}
-                        data={data}
-                        script={script}
-                        bodyID={bodyID}
-                        service={service}
-                        declarationID={declarationID}
-                      />
-                    </Fragment>
-                  )
-                } else {
-                  return funcNode
                 }
+                return funcNode
               })}
               <FuncSelector
                 bodyID={bodyID}
@@ -204,26 +166,13 @@ class ExpressionNode extends PureComponent<Props, State> {
   }
 
   private isBeforeYielding(funcIndex: number): boolean {
-    const {funcs, isLastBody} = this.props
-    const {isImplicitYieldToggled, nonYieldableIndexesToggled} = this.state
+    const {nonYieldableIndexesToggled} = this.state
     const beforeToggledLastYield = !!nonYieldableIndexesToggled[funcIndex]
 
     if (beforeToggledLastYield) {
       return true
     }
 
-    if (
-      funcIndex === funcs.length - 1 &&
-      isLastBody &&
-      isImplicitYieldToggled
-    ) {
-      return true
-    }
-
-    if (funcIndex === funcs.length - 1) {
-      return false
-    }
-
     return this.isYieldNodeIndex(funcIndex + 1)
   }
 
@@ -255,9 +204,7 @@ class ExpressionNode extends PureComponent<Props, State> {
         }
 
         if (isBeforeFilter || isBeforeRange) {
-          const nextNode = _.get(funcs, `${index + 1}`, null)
-
-          if (nextNode && nextNode.name === 'yield') {
+          if (this.isYieldNodeIndex(index + 1)) {
             return {...acc, [index]: true}
           }
         }
@@ -268,18 +215,6 @@ class ExpressionNode extends PureComponent<Props, State> {
     )
   }
 
-  private get isImplicitYieldToggled(): boolean {
-    const {isLastBody} = this.props
-
-    return isLastBody && this.isLastFuncYield
-  }
-
-  private get isLastFuncYield(): boolean {
-    const {funcs} = this.props
-
-    return _.get(funcs, `${funcs.length - 1}.name`) !== 'yield'
-  }
-
   // if funcNode is not yieldable, add last before yield()
   private handleToggleYieldWithLast = (funcNodeIndex: number) => {
     this.setState(({nonYieldableIndexesToggled}) => {
@@ -293,20 +228,6 @@ class ExpressionNode extends PureComponent<Props, State> {
       }
     })
   }
-
-  private handleHideImplicitYield = () => {
-    this.setState(() => ({
-      isImplicitYieldToggled: false,
-    }))
-  }
-
-  private isEndOfScript(index: number): boolean {
-    const {isLastBody, funcs} = this.props
-    const {isImplicitYieldToggled} = this.state
-    const isLastScriptFunc = isLastBody && index === funcs.length - 1
-
-    return isLastScriptFunc && isImplicitYieldToggled
-  }
 }
 
 export default ExpressionNode

From d68d57edaa28236b1ccc7780d0f45eaf0be35bd6 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 13:21:27 -0700
Subject: [PATCH 071/100] Improve save button copy in TemplateVariableEditor

---
 .../components/TemplateVariableEditor.tsx     | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/ui/src/tempVars/components/TemplateVariableEditor.tsx b/ui/src/tempVars/components/TemplateVariableEditor.tsx
index 296c3fb23..724f758af 100644
--- a/ui/src/tempVars/components/TemplateVariableEditor.tsx
+++ b/ui/src/tempVars/components/TemplateVariableEditor.tsx
@@ -100,7 +100,9 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     return (
       <div className="edit-temp-var">
         <div className="edit-temp-var--header">
-          <h1 className="page-header__title">Edit Template Variable</h1>
+          <h1 className="page-header__title">
+            {isNew ? 'Create' : 'Edit'} Template Variable
+          </h1>
           <div className="edit-temp-var--header-controls">
             <button
               className="btn btn-default"
@@ -115,7 +117,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
               onClick={this.handleSave}
               disabled={!this.canSave}
             >
-              {this.isSaving ? 'Saving...' : 'Save'}
+              {this.saveButtonText}
             </button>
           </div>
         </div>
@@ -277,6 +279,24 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     )
   }
 
+  private get saveButtonText(): string {
+    const {isNew} = this.state
+
+    if (this.isSaving && isNew) {
+      return 'Creating...'
+    }
+
+    if (this.isSaving && !isNew) {
+      return 'Saving...'
+    }
+
+    if (!this.isSaving && isNew) {
+      return 'Create'
+    }
+
+    return 'Save'
+  }
+
   private handleDelete = (): void => {
     const {onDelete} = this.props
 

From e366db996b914781acce46a36771b6876eb014a5 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 13:34:58 -0700
Subject: [PATCH 072/100] Refactor component to guard against missing context

---
 ui/src/shared/components/SourceIndicator.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/shared/components/SourceIndicator.tsx b/ui/src/shared/components/SourceIndicator.tsx
index f35abf518..13af7cd09 100644
--- a/ui/src/shared/components/SourceIndicator.tsx
+++ b/ui/src/shared/components/SourceIndicator.tsx
@@ -11,16 +11,19 @@ interface Props {
   sourceOverride?: Source
 }
 
-const SourceIndicator: SFC<Props> = (
-  {sourceOverride},
-  {source: {name, url}}
-) => {
+const SourceIndicator: SFC<Props> = ({sourceOverride}, {source}) => {
+  if (!source) {
+    return null
+  }
+
+  const {name, url} = source
   const sourceName: string = _.get(sourceOverride, 'name', name)
   const sourceUrl: string = _.get(sourceOverride, 'url', url)
+
   const sourceNameTooltip: string = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
   const uuidTooltip: string = uuid.v4()
 
-  return sourceName ? (
+  return (
     <div
       className="source-indicator"
       data-for={uuidTooltip}
@@ -35,7 +38,7 @@ const SourceIndicator: SFC<Props> = (
         class="influx-tooltip"
       />
     </div>
-  ) : null
+  )
 }
 
 const {shape} = PropTypes

From aa4a6461b61ce9bd5edb0f28b17140ca39bbfdad Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 13:47:00 -0700
Subject: [PATCH 073/100] Remove only from test

---
 ui/test/kapacitor/containers/TickscriptPage.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/test/kapacitor/containers/TickscriptPage.test.tsx b/ui/test/kapacitor/containers/TickscriptPage.test.tsx
index dc9e30b66..656c4da10 100644
--- a/ui/test/kapacitor/containers/TickscriptPage.test.tsx
+++ b/ui/test/kapacitor/containers/TickscriptPage.test.tsx
@@ -40,7 +40,7 @@ const setup = (override?) => {
   }
 }
 
-describe.only('Kapacitor.Containers.TickscriptPage', () => {
+describe('Kapacitor.Containers.TickscriptPage', () => {
   afterEach(() => {
     jest.clearAllMocks()
   })

From 4ee1405dae7f1824913dad6d6a9200b1d2345b47 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 19 Jun 2018 14:50:16 -0700
Subject: [PATCH 074/100] Add map as a valid type of template variables in api

---
 bolt/internal/internal.go    |   2 +
 bolt/internal/internal.pb.go | 222 ++++++++++++++++++-----------------
 bolt/internal/internal.proto |   1 +
 chronograf.go                |   9 +-
 server/templates.go          |   6 +-
 server/templates_test.go     |  30 +++++
 6 files changed, 158 insertions(+), 112 deletions(-)

diff --git a/bolt/internal/internal.go b/bolt/internal/internal.go
index 07dc5adca..b9a59fc94 100644
--- a/bolt/internal/internal.go
+++ b/bolt/internal/internal.go
@@ -341,6 +341,7 @@ func MarshalDashboard(d chronograf.Dashboard) ([]byte, error) {
 				Selected: v.Selected,
 				Type:     v.Type,
 				Value:    v.Value,
+				Key:      v.Key,
 			}
 		}
 
@@ -522,6 +523,7 @@ func UnmarshalDashboard(data []byte, d *chronograf.Dashboard) error {
 				Selected: v.Selected,
 				Type:     v.Type,
 				Value:    v.Value,
+				Key:      v.Key,
 			}
 		}
 
diff --git a/bolt/internal/internal.pb.go b/bolt/internal/internal.pb.go
index 5c7cbe97f..19a76f781 100644
--- a/bolt/internal/internal.pb.go
+++ b/bolt/internal/internal.pb.go
@@ -640,6 +640,7 @@ type TemplateValue struct {
 	Type     string `protobuf:"bytes,1,opt,name=type,proto3" json:"type,omitempty"`
 	Value    string `protobuf:"bytes,2,opt,name=value,proto3" json:"value,omitempty"`
 	Selected bool   `protobuf:"varint,3,opt,name=selected,proto3" json:"selected,omitempty"`
+	Key      string `protobuf:"bytes,4,opt,name=key,proto3" json:"key,omitempty"`
 }
 
 func (m *TemplateValue) Reset()                    { *m = TemplateValue{} }
@@ -668,6 +669,13 @@ func (m *TemplateValue) GetSelected() bool {
 	return false
 }
 
+func (m *TemplateValue) GetKey() string {
+	if m != nil {
+		return m.Key
+	}
+	return ""
+}
+
 type TemplateQuery struct {
 	Command     string `protobuf:"bytes,1,opt,name=command,proto3" json:"command,omitempty"`
 	Db          string `protobuf:"bytes,2,opt,name=db,proto3" json:"db,omitempty"`
@@ -1388,111 +1396,111 @@ func init() {
 func init() { proto.RegisterFile("internal.proto", fileDescriptorInternal) }
 
 var fileDescriptorInternal = []byte{
-	// 1685 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x58, 0x5b, 0x8f, 0xe3, 0x48,
-	0x15, 0x96, 0x93, 0x38, 0x89, 0x4f, 0xd2, 0xbd, 0x2d, 0x33, 0xda, 0x35, 0x0b, 0x42, 0xc1, 0xe2,
-	0xd2, 0x5c, 0x76, 0x58, 0xf5, 0x0a, 0x09, 0xad, 0x76, 0x57, 0xea, 0xcb, 0xce, 0xd0, 0x73, 0xed,
-	0xa9, 0x74, 0x0f, 0x4f, 0x68, 0x55, 0xb1, 0x2b, 0x49, 0x69, 0x1d, 0xdb, 0x94, 0xcb, 0xdd, 0x6d,
-	0x9e, 0xf9, 0x1d, 0x48, 0x48, 0xf0, 0x8e, 0x10, 0x8f, 0x48, 0xbc, 0xf3, 0x03, 0xf8, 0x2b, 0xbc,
-	0xa2, 0x53, 0x17, 0xa7, 0xdc, 0x9d, 0x19, 0x0d, 0x12, 0xda, 0xb7, 0xfa, 0xce, 0x39, 0x39, 0x55,
-	0x75, 0x2e, 0x5f, 0x1d, 0x07, 0xf6, 0x79, 0x2e, 0x99, 0xc8, 0x69, 0xf6, 0xb0, 0x14, 0x85, 0x2c,
-	0xc2, 0xb1, 0xc5, 0xf1, 0x1f, 0xfa, 0x30, 0x9c, 0x17, 0xb5, 0x48, 0x58, 0xb8, 0x0f, 0xbd, 0xf3,
-	0xb3, 0xc8, 0x9b, 0x79, 0x87, 0x7d, 0xd2, 0x3b, 0x3f, 0x0b, 0x43, 0x18, 0xbc, 0xa0, 0x1b, 0x16,
-	0xf5, 0x66, 0xde, 0x61, 0x40, 0xd4, 0x1a, 0x65, 0x97, 0x4d, 0xc9, 0xa2, 0xbe, 0x96, 0xe1, 0x3a,
-	0xfc, 0x10, 0xc6, 0x57, 0x15, 0x7a, 0xdb, 0xb0, 0x68, 0xa0, 0xe4, 0x2d, 0x46, 0xdd, 0x05, 0xad,
-	0xaa, 0x9b, 0x42, 0xa4, 0x91, 0xaf, 0x75, 0x16, 0x87, 0x07, 0xd0, 0xbf, 0x22, 0xcf, 0xa2, 0xa1,
-	0x12, 0xe3, 0x32, 0x8c, 0x60, 0x74, 0xc6, 0x96, 0xb4, 0xce, 0x64, 0x34, 0x9a, 0x79, 0x87, 0x63,
-	0x62, 0x21, 0xfa, 0xb9, 0x64, 0x19, 0x5b, 0x09, 0xba, 0x8c, 0xc6, 0xda, 0x8f, 0xc5, 0xe1, 0x43,
-	0x08, 0xcf, 0xf3, 0x8a, 0x25, 0xb5, 0x60, 0xf3, 0xaf, 0x79, 0xf9, 0x9a, 0x09, 0xbe, 0x6c, 0xa2,
-	0x40, 0x39, 0xd8, 0xa1, 0xc1, 0x5d, 0x9e, 0x33, 0x49, 0x71, 0x6f, 0x50, 0xae, 0x2c, 0x0c, 0x63,
-	0x98, 0xce, 0xd7, 0x54, 0xb0, 0x74, 0xce, 0x12, 0xc1, 0x64, 0x34, 0x51, 0xea, 0x8e, 0x0c, 0x6d,
-	0x5e, 0x8a, 0x15, 0xcd, 0xf9, 0xef, 0xa9, 0xe4, 0x45, 0x1e, 0x4d, 0xb5, 0x8d, 0x2b, 0xc3, 0x28,
-	0x91, 0x22, 0x63, 0xd1, 0x9e, 0x8e, 0x12, 0xae, 0xc3, 0xef, 0x42, 0x60, 0x2e, 0x43, 0x2e, 0xa2,
-	0x7d, 0xa5, 0xd8, 0x0a, 0xe2, 0xbf, 0x7b, 0x10, 0x9c, 0xd1, 0x6a, 0xbd, 0x28, 0xa8, 0x48, 0xdf,
-	0x29, 0x13, 0x1f, 0x81, 0x9f, 0xb0, 0x2c, 0xab, 0xa2, 0xfe, 0xac, 0x7f, 0x38, 0x39, 0xfa, 0xe0,
-	0x61, 0x9b, 0xe2, 0xd6, 0xcf, 0x29, 0xcb, 0x32, 0xa2, 0xad, 0xc2, 0x8f, 0x21, 0x90, 0x6c, 0x53,
-	0x66, 0x54, 0xb2, 0x2a, 0x1a, 0xa8, 0x9f, 0x84, 0xdb, 0x9f, 0x5c, 0x1a, 0x15, 0xd9, 0x1a, 0xdd,
-	0xbb, 0xa8, 0x7f, 0xff, 0xa2, 0xf1, 0xbf, 0x07, 0xb0, 0xd7, 0xd9, 0x2e, 0x9c, 0x82, 0x77, 0xab,
-	0x4e, 0xee, 0x13, 0xef, 0x16, 0x51, 0xa3, 0x4e, 0xed, 0x13, 0xaf, 0x41, 0x74, 0xa3, 0x2a, 0xc7,
-	0x27, 0xde, 0x0d, 0xa2, 0xb5, 0xaa, 0x17, 0x9f, 0x78, 0xeb, 0xf0, 0x27, 0x30, 0xfa, 0x5d, 0xcd,
-	0x04, 0x67, 0x55, 0xe4, 0xab, 0xd3, 0xbd, 0xb7, 0x3d, 0xdd, 0xab, 0x9a, 0x89, 0x86, 0x58, 0x3d,
-	0x46, 0x43, 0xd5, 0x9a, 0x2e, 0x1c, 0xb5, 0x46, 0x99, 0xc4, 0xba, 0x1c, 0x69, 0x19, 0xae, 0x4d,
-	0x14, 0x75, 0xb5, 0x60, 0x14, 0x7f, 0x09, 0x03, 0x7a, 0xcb, 0xaa, 0x28, 0x50, 0xfe, 0xbf, 0xff,
-	0x86, 0x80, 0x3d, 0x3c, 0xbe, 0x65, 0xd5, 0x97, 0xb9, 0x14, 0x0d, 0x51, 0xe6, 0xe1, 0x8f, 0x61,
-	0x98, 0x14, 0x59, 0x21, 0xaa, 0x08, 0xee, 0x1e, 0xec, 0x14, 0xe5, 0xc4, 0xa8, 0xc3, 0x43, 0x18,
-	0x66, 0x6c, 0xc5, 0xf2, 0x54, 0xd5, 0xcd, 0xe4, 0xe8, 0x60, 0x6b, 0xf8, 0x4c, 0xc9, 0x89, 0xd1,
-	0x87, 0x9f, 0xc2, 0x54, 0xd2, 0x45, 0xc6, 0x5e, 0x96, 0x18, 0xc5, 0x4a, 0xd5, 0xd0, 0xe4, 0xe8,
-	0x7d, 0x27, 0x1f, 0x8e, 0x96, 0x74, 0x6c, 0xc3, 0xcf, 0x60, 0xba, 0xe4, 0x2c, 0x4b, 0xed, 0x6f,
-	0xf7, 0xd4, 0xa1, 0xa2, 0xed, 0x6f, 0x09, 0xcb, 0xe9, 0x06, 0x7f, 0xf1, 0x08, 0xcd, 0x48, 0xc7,
-	0x3a, 0xfc, 0x1e, 0x80, 0xe4, 0x1b, 0xf6, 0xa8, 0x10, 0x1b, 0x2a, 0x4d, 0x19, 0x3a, 0x92, 0xf0,
-	0x73, 0xd8, 0x4b, 0x59, 0xc2, 0x37, 0x34, 0xbb, 0xc8, 0x68, 0xc2, 0xaa, 0xe8, 0x3d, 0x75, 0x34,
-	0xb7, 0xba, 0x5c, 0x35, 0xe9, 0x5a, 0x7f, 0xf8, 0x18, 0x82, 0x36, 0x7c, 0xd8, 0xdf, 0x5f, 0xb3,
-	0x46, 0x15, 0x43, 0x40, 0x70, 0x19, 0xfe, 0x00, 0xfc, 0x6b, 0x9a, 0xd5, 0xba, 0x90, 0x27, 0x47,
-	0xfb, 0x5b, 0xaf, 0xc7, 0xb7, 0xbc, 0x22, 0x5a, 0xf9, 0x69, 0xef, 0x57, 0x5e, 0xfc, 0x18, 0xf6,
-	0x3a, 0x1b, 0xe1, 0xc1, 0x79, 0xf5, 0x65, 0xbe, 0x2c, 0x44, 0xc2, 0x52, 0xe5, 0x73, 0x4c, 0x1c,
-	0x49, 0xf8, 0x3e, 0x0c, 0x53, 0xbe, 0xe2, 0xb2, 0x32, 0xe5, 0x66, 0x50, 0xfc, 0x0f, 0x0f, 0xa6,
-	0x6e, 0x34, 0xc3, 0x9f, 0xc2, 0xc1, 0x35, 0x13, 0x92, 0x27, 0x34, 0xbb, 0xe4, 0x1b, 0x86, 0x1b,
-	0xab, 0x9f, 0x8c, 0xc9, 0x3d, 0x79, 0xf8, 0x31, 0x0c, 0xab, 0x42, 0xc8, 0x93, 0x46, 0x55, 0xed,
-	0xdb, 0xa2, 0x6c, 0xec, 0x90, 0xa7, 0x6e, 0x04, 0x2d, 0x4b, 0x9e, 0xaf, 0x2c, 0x17, 0x5a, 0x1c,
-	0xfe, 0x08, 0xf6, 0x97, 0xfc, 0xf6, 0x11, 0x17, 0x95, 0x3c, 0x2d, 0xb2, 0x7a, 0x93, 0xab, 0x0a,
-	0x1e, 0x93, 0x3b, 0xd2, 0x27, 0x83, 0xb1, 0x77, 0xd0, 0x7b, 0x32, 0x18, 0xfb, 0x07, 0xc3, 0xb8,
-	0x84, 0xfd, 0xee, 0x4e, 0xd8, 0x96, 0xf6, 0x10, 0x8a, 0x13, 0x74, 0x78, 0x3b, 0xb2, 0x70, 0x06,
-	0x93, 0x94, 0x57, 0x65, 0x46, 0x1b, 0x87, 0x36, 0x5c, 0x11, 0x72, 0xe0, 0x35, 0xaf, 0xf8, 0x22,
-	0xd3, 0x54, 0x3e, 0x26, 0x16, 0xc6, 0x2b, 0xf0, 0x55, 0x59, 0x3b, 0x24, 0x14, 0x58, 0x12, 0x52,
-	0xd4, 0xdf, 0x73, 0xa8, 0xff, 0x00, 0xfa, 0xbf, 0x66, 0xb7, 0xe6, 0x35, 0xc0, 0x65, 0x4b, 0x55,
-	0x03, 0x87, 0xaa, 0x1e, 0x80, 0xff, 0x5a, 0xa5, 0x5d, 0x53, 0x88, 0x06, 0xf1, 0x17, 0x30, 0xd4,
-	0x6d, 0xd1, 0x7a, 0xf6, 0x1c, 0xcf, 0x33, 0x98, 0xbc, 0x14, 0x9c, 0xe5, 0x52, 0x93, 0x8f, 0xb9,
-	0x82, 0x23, 0x8a, 0xff, 0xe6, 0xc1, 0x40, 0x65, 0x29, 0x86, 0x69, 0xc6, 0x56, 0x34, 0x69, 0x4e,
-	0x8a, 0x3a, 0x4f, 0xab, 0xc8, 0x9b, 0xf5, 0x0f, 0xfb, 0xa4, 0x23, 0xc3, 0xf2, 0x58, 0x68, 0x6d,
-	0x6f, 0xd6, 0x3f, 0x0c, 0x88, 0x41, 0x78, 0xb4, 0x8c, 0x2e, 0x58, 0x66, 0xae, 0xa0, 0x01, 0x5a,
-	0x97, 0x82, 0x2d, 0xf9, 0xad, 0xb9, 0x86, 0x41, 0x28, 0xaf, 0xea, 0x25, 0xca, 0xf5, 0x4d, 0x0c,
-	0xc2, 0x0b, 0x2c, 0x68, 0xd5, 0x32, 0x12, 0xae, 0xd1, 0x73, 0x95, 0xd0, 0xcc, 0x52, 0x92, 0x06,
-	0xf1, 0x3f, 0x3d, 0x7c, 0xc8, 0x34, 0xc5, 0xde, 0x8b, 0xf0, 0xb7, 0x61, 0x8c, 0xf4, 0xfb, 0xd5,
-	0x35, 0x15, 0xe6, 0xc2, 0x23, 0xc4, 0xaf, 0xa9, 0x08, 0x7f, 0x01, 0x43, 0xd5, 0x1c, 0x3b, 0xe8,
-	0xde, 0xba, 0x53, 0x51, 0x25, 0xc6, 0xac, 0x25, 0xc4, 0x81, 0x43, 0x88, 0xed, 0x65, 0x7d, 0xf7,
-	0xb2, 0x1f, 0x81, 0x8f, 0xcc, 0xda, 0xa8, 0xd3, 0xef, 0xf4, 0xac, 0xf9, 0x57, 0x5b, 0xc5, 0x57,
-	0xb0, 0xd7, 0xd9, 0xb1, 0xdd, 0xc9, 0xeb, 0xee, 0xb4, 0x6d, 0xf4, 0xc0, 0x34, 0x36, 0x36, 0x47,
-	0xc5, 0x32, 0x96, 0x48, 0x96, 0x9a, 0xaa, 0x6b, 0x71, 0xfc, 0x27, 0x6f, 0xeb, 0x57, 0xed, 0x87,
-	0x25, 0x9a, 0x14, 0x9b, 0x0d, 0xcd, 0x53, 0xe3, 0xda, 0x42, 0x8c, 0x5b, 0xba, 0x30, 0xae, 0x7b,
-	0xe9, 0x02, 0xb1, 0x28, 0x4d, 0x06, 0x7b, 0xa2, 0xc4, 0xda, 0xd9, 0x30, 0x5a, 0xd5, 0x82, 0x6d,
-	0x58, 0x2e, 0x4d, 0x08, 0x5c, 0x51, 0xf8, 0x01, 0x8c, 0x24, 0x5d, 0x7d, 0x85, 0xf4, 0x64, 0x32,
-	0x29, 0xe9, 0xea, 0x29, 0x6b, 0xc2, 0xef, 0x40, 0xa0, 0xf8, 0x52, 0xa9, 0x74, 0x3a, 0xc7, 0x4a,
-	0xf0, 0x94, 0x35, 0xf1, 0x5f, 0x7b, 0x30, 0x9c, 0x33, 0x71, 0xcd, 0xc4, 0x3b, 0xbd, 0xd0, 0xee,
-	0x5c, 0xd4, 0x7f, 0xcb, 0x5c, 0x34, 0xd8, 0x3d, 0x17, 0xf9, 0xdb, 0xb9, 0xe8, 0x01, 0xf8, 0x73,
-	0x91, 0x9c, 0x9f, 0xa9, 0x13, 0xf5, 0x89, 0x06, 0x58, 0x8d, 0xc7, 0x89, 0xe4, 0xd7, 0xcc, 0x0c,
-	0x4b, 0x06, 0xdd, 0x7b, 0xb8, 0xc7, 0x3b, 0x26, 0x94, 0xff, 0x75, 0x66, 0xb2, 0x2d, 0x0a, 0x4e,
-	0x8b, 0xc6, 0x30, 0xc5, 0xc1, 0x29, 0xa5, 0x92, 0x3e, 0x99, 0xbf, 0x7c, 0x61, 0xa7, 0x25, 0x57,
-	0x16, 0xff, 0xd1, 0x83, 0xe1, 0x33, 0xda, 0x14, 0xb5, 0xbc, 0x57, 0xed, 0x33, 0x98, 0x1c, 0x97,
-	0x65, 0xc6, 0x93, 0x4e, 0x87, 0x3b, 0x22, 0xb4, 0x78, 0xee, 0xe4, 0x51, 0xc7, 0xd0, 0x15, 0xe1,
-	0x83, 0x72, 0xaa, 0x86, 0x20, 0x3d, 0xd1, 0x38, 0x0f, 0x8a, 0x9e, 0x7d, 0x94, 0x12, 0x83, 0x7d,
-	0x5c, 0xcb, 0x62, 0x99, 0x15, 0x37, 0x2a, 0xaa, 0x63, 0xd2, 0xe2, 0xf8, 0x5f, 0x3d, 0x18, 0x7c,
-	0x53, 0x83, 0xcb, 0x14, 0x3c, 0x6e, 0x8a, 0xca, 0xe3, 0xed, 0x18, 0x33, 0x72, 0xc6, 0x98, 0x08,
-	0x46, 0x8d, 0xa0, 0xf9, 0x8a, 0x55, 0xd1, 0x58, 0xb1, 0x98, 0x85, 0x4a, 0xa3, 0xfa, 0x55, 0xcf,
-	0x2f, 0x01, 0xb1, 0xb0, 0xed, 0x3f, 0x70, 0xfa, 0xef, 0xe7, 0x66, 0xd4, 0x99, 0xdc, 0x1d, 0x0e,
-	0x76, 0x4d, 0x38, 0xff, 0xbf, 0x57, 0xfb, 0x3f, 0x1e, 0xf8, 0x6d, 0xf3, 0x9e, 0x76, 0x9b, 0xf7,
-	0x74, 0xdb, 0xbc, 0x67, 0x27, 0xb6, 0x79, 0xcf, 0x4e, 0x10, 0x93, 0x0b, 0xdb, 0xbc, 0xe4, 0x02,
-	0x93, 0xf5, 0x58, 0x14, 0x75, 0x79, 0xd2, 0xe8, 0xac, 0x06, 0xa4, 0xc5, 0x58, 0xf1, 0xbf, 0x59,
-	0x33, 0x61, 0x42, 0x1d, 0x10, 0x83, 0xb0, 0x3f, 0x9e, 0x29, 0x62, 0xd3, 0xc1, 0xd5, 0x20, 0xfc,
-	0x21, 0xf8, 0x04, 0x83, 0xa7, 0x22, 0xdc, 0xc9, 0x8b, 0x12, 0x13, 0xad, 0x45, 0xa7, 0xfa, 0x03,
-	0xc8, 0x34, 0x8a, 0xfd, 0x1c, 0xfa, 0x19, 0x0c, 0xe7, 0x6b, 0xbe, 0x94, 0x76, 0x60, 0xfc, 0x96,
-	0x43, 0x8c, 0x7c, 0xc3, 0x94, 0x8e, 0x18, 0x93, 0xf8, 0x15, 0x04, 0xad, 0x70, 0x7b, 0x1c, 0xcf,
-	0x3d, 0x4e, 0x08, 0x83, 0xab, 0x9c, 0x4b, 0x4b, 0x11, 0xb8, 0xc6, 0xcb, 0xbe, 0xaa, 0x69, 0x2e,
-	0xb9, 0x6c, 0x2c, 0x45, 0x58, 0x1c, 0x7f, 0x62, 0x8e, 0x8f, 0xee, 0xae, 0xca, 0x92, 0x09, 0x43,
-	0x37, 0x1a, 0xa8, 0x4d, 0x8a, 0x1b, 0xa6, 0x5f, 0x8a, 0x3e, 0xd1, 0x20, 0xfe, 0x2d, 0x04, 0xc7,
-	0x19, 0x13, 0x92, 0xd4, 0x19, 0xdb, 0xf5, 0x82, 0xab, 0x46, 0x35, 0x27, 0xc0, 0xf5, 0x96, 0x5a,
-	0xfa, 0x77, 0xa8, 0xe5, 0x29, 0x2d, 0xe9, 0xf9, 0x99, 0xaa, 0xf3, 0x3e, 0x31, 0x28, 0xfe, 0xb3,
-	0x07, 0x03, 0xe4, 0x30, 0xc7, 0xf5, 0xe0, 0x6d, 0xfc, 0x77, 0x21, 0x8a, 0x6b, 0x9e, 0x32, 0x61,
-	0x2f, 0x67, 0xb1, 0x0a, 0x7a, 0xb2, 0x66, 0xed, 0xa0, 0x60, 0x10, 0xd6, 0x1a, 0x7e, 0x2d, 0xd9,
-	0x5e, 0x72, 0x6a, 0x0d, 0xc5, 0x44, 0x2b, 0x71, 0x18, 0x9c, 0xd7, 0x25, 0x13, 0xc7, 0xe9, 0x86,
-	0xdb, 0x29, 0xca, 0x91, 0xc4, 0x5f, 0xe8, 0xef, 0xaf, 0x7b, 0x4c, 0xe8, 0xed, 0xfe, 0x56, 0xbb,
-	0x7b, 0xf2, 0xf8, 0x2f, 0x1e, 0x8c, 0x9e, 0x9b, 0xa9, 0xcd, 0xbd, 0x85, 0xf7, 0xc6, 0x5b, 0xf4,
-	0x3a, 0xb7, 0x38, 0x82, 0x07, 0xd6, 0xa6, 0xb3, 0xbf, 0x8e, 0xc2, 0x4e, 0x9d, 0x89, 0xe8, 0xa0,
-	0x4d, 0xd6, 0xbb, 0x7c, 0x7e, 0x5d, 0x76, 0x6d, 0x76, 0x25, 0xfc, 0x5e, 0x56, 0x66, 0x30, 0xb1,
-	0x9f, 0x9d, 0x45, 0x66, 0x1f, 0x26, 0x57, 0x14, 0x1f, 0xc1, 0xf0, 0xb4, 0xc8, 0x97, 0x7c, 0x15,
-	0x1e, 0xc2, 0xe0, 0xb8, 0x96, 0x6b, 0xe5, 0x71, 0x72, 0xf4, 0xc0, 0x69, 0xfc, 0x5a, 0xae, 0xb5,
-	0x0d, 0x51, 0x16, 0xf1, 0x67, 0x00, 0x5b, 0x19, 0xbe, 0x2e, 0xdb, 0x6c, 0xbc, 0x60, 0x37, 0x58,
-	0x32, 0x95, 0x19, 0xda, 0x77, 0x68, 0xe2, 0xcf, 0x21, 0x38, 0xa9, 0x79, 0x96, 0x9e, 0xe7, 0xcb,
-	0x02, 0xa9, 0xe3, 0x35, 0x13, 0xd5, 0x36, 0x5f, 0x16, 0x62, 0xb8, 0x91, 0x45, 0xda, 0x1e, 0x32,
-	0x68, 0x31, 0x54, 0x7f, 0x6a, 0x7c, 0xf2, 0xdf, 0x00, 0x00, 0x00, 0xff, 0xff, 0xd3, 0xfb, 0xbd,
-	0x7b, 0xe6, 0x10, 0x00, 0x00,
+	// 1691 bytes of a gzipped FileDescriptorProto
+	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x58, 0xdd, 0x8f, 0xe3, 0x48,
+	0x11, 0x97, 0x13, 0x3b, 0x89, 0x2b, 0x99, 0xb9, 0x91, 0x59, 0xdd, 0x99, 0x03, 0xa1, 0x60, 0xf1,
+	0x31, 0x7c, 0xdc, 0x72, 0x9a, 0x13, 0x12, 0x3a, 0xdd, 0x9d, 0x34, 0x1f, 0xb7, 0xcb, 0xec, 0xe7,
+	0x6c, 0x67, 0x76, 0x78, 0x42, 0xa7, 0x4e, 0xdc, 0x49, 0x5a, 0xe7, 0xd8, 0xa6, 0xdd, 0x9e, 0x19,
+	0xf3, 0xcc, 0xdf, 0x81, 0x84, 0x04, 0xef, 0x08, 0xf1, 0x88, 0xc4, 0x3b, 0x7f, 0x00, 0xff, 0x0a,
+	0xaf, 0xa8, 0xfa, 0xc3, 0x69, 0xcf, 0x64, 0x57, 0x8b, 0x84, 0xee, 0xad, 0x7f, 0x55, 0x95, 0xea,
+	0xea, 0xea, 0xaa, 0x5f, 0x97, 0x03, 0xfb, 0x3c, 0x97, 0x4c, 0xe4, 0x34, 0x7b, 0x58, 0x8a, 0x42,
+	0x16, 0xd1, 0xc8, 0xe2, 0xe4, 0x0f, 0x7d, 0x18, 0xcc, 0x8a, 0x5a, 0x2c, 0x58, 0xb4, 0x0f, 0xbd,
+	0xf3, 0xb3, 0xd8, 0x9b, 0x7a, 0x87, 0x7d, 0xd2, 0x3b, 0x3f, 0x8b, 0x22, 0xf0, 0x5f, 0xd0, 0x0d,
+	0x8b, 0x7b, 0x53, 0xef, 0x30, 0x24, 0x6a, 0x8d, 0xb2, 0xcb, 0xa6, 0x64, 0x71, 0x5f, 0xcb, 0x70,
+	0x1d, 0x7d, 0x08, 0xa3, 0xd7, 0x15, 0x7a, 0xdb, 0xb0, 0xd8, 0x57, 0xf2, 0x16, 0xa3, 0xee, 0x82,
+	0x56, 0xd5, 0x4d, 0x21, 0xd2, 0x38, 0xd0, 0x3a, 0x8b, 0xa3, 0x03, 0xe8, 0xbf, 0x26, 0xcf, 0xe2,
+	0x81, 0x12, 0xe3, 0x32, 0x8a, 0x61, 0x78, 0xc6, 0x96, 0xb4, 0xce, 0x64, 0x3c, 0x9c, 0x7a, 0x87,
+	0x23, 0x62, 0x21, 0xfa, 0xb9, 0x64, 0x19, 0x5b, 0x09, 0xba, 0x8c, 0x47, 0xda, 0x8f, 0xc5, 0xd1,
+	0x43, 0x88, 0xce, 0xf3, 0x8a, 0x2d, 0x6a, 0xc1, 0x66, 0x5f, 0xf3, 0xf2, 0x8a, 0x09, 0xbe, 0x6c,
+	0xe2, 0x50, 0x39, 0xd8, 0xa1, 0xc1, 0x5d, 0x9e, 0x33, 0x49, 0x71, 0x6f, 0x50, 0xae, 0x2c, 0x8c,
+	0x12, 0x98, 0xcc, 0xd6, 0x54, 0xb0, 0x74, 0xc6, 0x16, 0x82, 0xc9, 0x78, 0xac, 0xd4, 0x1d, 0x19,
+	0xda, 0xbc, 0x14, 0x2b, 0x9a, 0xf3, 0xdf, 0x53, 0xc9, 0x8b, 0x3c, 0x9e, 0x68, 0x1b, 0x57, 0x86,
+	0x59, 0x22, 0x45, 0xc6, 0xe2, 0x3d, 0x9d, 0x25, 0x5c, 0x47, 0xdf, 0x85, 0xd0, 0x1c, 0x86, 0x5c,
+	0xc4, 0xfb, 0x4a, 0xb1, 0x15, 0x24, 0x7f, 0xf7, 0x20, 0x3c, 0xa3, 0xd5, 0x7a, 0x5e, 0x50, 0x91,
+	0xbe, 0xd3, 0x4d, 0x7c, 0x04, 0xc1, 0x82, 0x65, 0x59, 0x15, 0xf7, 0xa7, 0xfd, 0xc3, 0xf1, 0xd1,
+	0x07, 0x0f, 0xdb, 0x2b, 0x6e, 0xfd, 0x9c, 0xb2, 0x2c, 0x23, 0xda, 0x2a, 0xfa, 0x18, 0x42, 0xc9,
+	0x36, 0x65, 0x46, 0x25, 0xab, 0x62, 0x5f, 0xfd, 0x24, 0xda, 0xfe, 0xe4, 0xd2, 0xa8, 0xc8, 0xd6,
+	0xe8, 0xde, 0x41, 0x83, 0xfb, 0x07, 0x4d, 0xfe, 0xed, 0xc3, 0x5e, 0x67, 0xbb, 0x68, 0x02, 0xde,
+	0xad, 0x8a, 0x3c, 0x20, 0xde, 0x2d, 0xa2, 0x46, 0x45, 0x1d, 0x10, 0xaf, 0x41, 0x74, 0xa3, 0x2a,
+	0x27, 0x20, 0xde, 0x0d, 0xa2, 0xb5, 0xaa, 0x97, 0x80, 0x78, 0xeb, 0xe8, 0x27, 0x30, 0xfc, 0x5d,
+	0xcd, 0x04, 0x67, 0x55, 0x1c, 0xa8, 0xe8, 0xde, 0xdb, 0x46, 0xf7, 0xaa, 0x66, 0xa2, 0x21, 0x56,
+	0x8f, 0xd9, 0x50, 0xb5, 0xa6, 0x0b, 0x47, 0xad, 0x51, 0x26, 0xb1, 0x2e, 0x87, 0x5a, 0x86, 0x6b,
+	0x93, 0x45, 0x5d, 0x2d, 0x98, 0xc5, 0x5f, 0x82, 0x4f, 0x6f, 0x59, 0x15, 0x87, 0xca, 0xff, 0xf7,
+	0xdf, 0x90, 0xb0, 0x87, 0xc7, 0xb7, 0xac, 0xfa, 0x32, 0x97, 0xa2, 0x21, 0xca, 0x3c, 0xfa, 0x31,
+	0x0c, 0x16, 0x45, 0x56, 0x88, 0x2a, 0x86, 0xbb, 0x81, 0x9d, 0xa2, 0x9c, 0x18, 0x75, 0x74, 0x08,
+	0x83, 0x8c, 0xad, 0x58, 0x9e, 0xaa, 0xba, 0x19, 0x1f, 0x1d, 0x6c, 0x0d, 0x9f, 0x29, 0x39, 0x31,
+	0xfa, 0xe8, 0x53, 0x98, 0x48, 0x3a, 0xcf, 0xd8, 0xcb, 0x12, 0xb3, 0x58, 0xa9, 0x1a, 0x1a, 0x1f,
+	0xbd, 0xef, 0xdc, 0x87, 0xa3, 0x25, 0x1d, 0xdb, 0xe8, 0x33, 0x98, 0x2c, 0x39, 0xcb, 0x52, 0xfb,
+	0xdb, 0x3d, 0x15, 0x54, 0xbc, 0xfd, 0x2d, 0x61, 0x39, 0xdd, 0xe0, 0x2f, 0x1e, 0xa1, 0x19, 0xe9,
+	0x58, 0x47, 0xdf, 0x03, 0x90, 0x7c, 0xc3, 0x1e, 0x15, 0x62, 0x43, 0xa5, 0x29, 0x43, 0x47, 0x12,
+	0x7d, 0x0e, 0x7b, 0x29, 0x5b, 0xf0, 0x0d, 0xcd, 0x2e, 0x32, 0xba, 0x60, 0x55, 0xfc, 0x9e, 0x0a,
+	0xcd, 0xad, 0x2e, 0x57, 0x4d, 0xba, 0xd6, 0x1f, 0x3e, 0x86, 0xb0, 0x4d, 0x1f, 0xf6, 0xf7, 0xd7,
+	0xac, 0x51, 0xc5, 0x10, 0x12, 0x5c, 0x46, 0x3f, 0x80, 0xe0, 0x9a, 0x66, 0xb5, 0x2e, 0xe4, 0xf1,
+	0xd1, 0xfe, 0xd6, 0xeb, 0xf1, 0x2d, 0xaf, 0x88, 0x56, 0x7e, 0xda, 0xfb, 0x95, 0x97, 0x3c, 0x86,
+	0xbd, 0xce, 0x46, 0x18, 0x38, 0xaf, 0xbe, 0xcc, 0x97, 0x85, 0x58, 0xb0, 0x54, 0xf9, 0x1c, 0x11,
+	0x47, 0x12, 0xbd, 0x0f, 0x83, 0x94, 0xaf, 0xb8, 0xac, 0x4c, 0xb9, 0x19, 0x94, 0xfc, 0xc3, 0x83,
+	0x89, 0x9b, 0xcd, 0xe8, 0xa7, 0x70, 0x70, 0xcd, 0x84, 0xe4, 0x0b, 0x9a, 0x5d, 0xf2, 0x0d, 0xc3,
+	0x8d, 0xd5, 0x4f, 0x46, 0xe4, 0x9e, 0x3c, 0xfa, 0x18, 0x06, 0x55, 0x21, 0xe4, 0x49, 0xa3, 0xaa,
+	0xf6, 0x6d, 0x59, 0x36, 0x76, 0xc8, 0x53, 0x37, 0x82, 0x96, 0x25, 0xcf, 0x57, 0x96, 0x0b, 0x2d,
+	0x8e, 0x7e, 0x04, 0xfb, 0x4b, 0x7e, 0xfb, 0x88, 0x8b, 0x4a, 0x9e, 0x16, 0x59, 0xbd, 0xc9, 0x55,
+	0x05, 0x8f, 0xc8, 0x1d, 0xe9, 0x13, 0x7f, 0xe4, 0x1d, 0xf4, 0x9e, 0xf8, 0xa3, 0xe0, 0x60, 0x90,
+	0x94, 0xb0, 0xdf, 0xdd, 0x09, 0xdb, 0xd2, 0x06, 0xa1, 0x38, 0x41, 0xa7, 0xb7, 0x23, 0x8b, 0xa6,
+	0x30, 0x4e, 0x79, 0x55, 0x66, 0xb4, 0x71, 0x68, 0xc3, 0x15, 0x21, 0x07, 0x5e, 0xf3, 0x8a, 0xcf,
+	0x33, 0x4d, 0xe5, 0x23, 0x62, 0x61, 0xb2, 0x82, 0x40, 0x95, 0xb5, 0x43, 0x42, 0xa1, 0x25, 0x21,
+	0x45, 0xfd, 0x3d, 0x87, 0xfa, 0x0f, 0xa0, 0xff, 0x6b, 0x76, 0x6b, 0x5e, 0x03, 0x5c, 0xb6, 0x54,
+	0xe5, 0x3b, 0x54, 0xf5, 0x00, 0x82, 0x2b, 0x75, 0xed, 0x9a, 0x42, 0x34, 0x48, 0xbe, 0x80, 0x81,
+	0x6e, 0x8b, 0xd6, 0xb3, 0xe7, 0x78, 0x9e, 0xc2, 0xf8, 0xa5, 0xe0, 0x2c, 0x97, 0x9a, 0x7c, 0xcc,
+	0x11, 0x1c, 0x51, 0xf2, 0x37, 0x0f, 0x7c, 0x75, 0x4b, 0x09, 0x4c, 0x32, 0xb6, 0xa2, 0x8b, 0xe6,
+	0xa4, 0xa8, 0xf3, 0xb4, 0x8a, 0xbd, 0x69, 0xff, 0xb0, 0x4f, 0x3a, 0x32, 0x2c, 0x8f, 0xb9, 0xd6,
+	0xf6, 0xa6, 0xfd, 0xc3, 0x90, 0x18, 0x84, 0xa1, 0x65, 0x74, 0xce, 0x32, 0x73, 0x04, 0x0d, 0xd0,
+	0xba, 0x14, 0x6c, 0xc9, 0x6f, 0xcd, 0x31, 0x0c, 0x42, 0x79, 0x55, 0x2f, 0x51, 0xae, 0x4f, 0x62,
+	0x10, 0x1e, 0x60, 0x4e, 0xab, 0x96, 0x91, 0x70, 0x8d, 0x9e, 0xab, 0x05, 0xcd, 0x2c, 0x25, 0x69,
+	0x90, 0xfc, 0xd3, 0xc3, 0x87, 0x4c, 0x53, 0xec, 0xbd, 0x0c, 0x7f, 0x1b, 0x46, 0x48, 0xbf, 0x5f,
+	0x5d, 0x53, 0x61, 0x0e, 0x3c, 0x44, 0x7c, 0x45, 0x45, 0xf4, 0x0b, 0x18, 0xa8, 0xe6, 0xd8, 0x41,
+	0xf7, 0xd6, 0x9d, 0xca, 0x2a, 0x31, 0x66, 0x2d, 0x21, 0xfa, 0x0e, 0x21, 0xb6, 0x87, 0x0d, 0xdc,
+	0xc3, 0x7e, 0x04, 0x01, 0x32, 0x6b, 0xa3, 0xa2, 0xdf, 0xe9, 0x59, 0xf3, 0xaf, 0xb6, 0x4a, 0x56,
+	0xb0, 0xd7, 0xd9, 0xb1, 0xdd, 0xc9, 0xeb, 0xee, 0xb4, 0x6d, 0xf4, 0xd0, 0x34, 0x36, 0x36, 0x47,
+	0xc5, 0x32, 0xb6, 0x90, 0x2c, 0x35, 0x55, 0xd7, 0x62, 0x4b, 0x16, 0x7e, 0x4b, 0x16, 0xc9, 0x9f,
+	0xbc, 0xed, 0x4e, 0x2a, 0x02, 0x2c, 0xda, 0x45, 0xb1, 0xd9, 0xd0, 0x3c, 0x35, 0x9b, 0x59, 0x88,
+	0x99, 0x4c, 0xe7, 0x66, 0xb3, 0x5e, 0x3a, 0x47, 0x2c, 0x4a, 0x73, 0xa7, 0x3d, 0x51, 0x62, 0x35,
+	0x6d, 0x18, 0xad, 0x6a, 0xc1, 0x36, 0x2c, 0x97, 0x66, 0x17, 0x57, 0x14, 0x7d, 0x00, 0x43, 0x49,
+	0x57, 0x5f, 0x61, 0x0c, 0xe6, 0x6e, 0x25, 0x5d, 0x3d, 0x65, 0x4d, 0xf4, 0x1d, 0x08, 0x15, 0x83,
+	0x2a, 0x95, 0xbe, 0xe0, 0x91, 0x12, 0x3c, 0x65, 0x4d, 0xf2, 0xd7, 0x1e, 0x0c, 0x66, 0x4c, 0x5c,
+	0x33, 0xf1, 0x4e, 0x6f, 0xb6, 0x3b, 0x29, 0xf5, 0xdf, 0x32, 0x29, 0xf9, 0xbb, 0x27, 0xa5, 0x60,
+	0x3b, 0x29, 0x3d, 0x80, 0x60, 0x26, 0x16, 0xe7, 0x67, 0x2a, 0xa2, 0x3e, 0xd1, 0x00, 0xeb, 0xf3,
+	0x78, 0x21, 0xf9, 0x35, 0x33, 0xe3, 0x93, 0x41, 0xf7, 0x9e, 0xf2, 0xd1, 0x8e, 0x99, 0xe5, 0x7f,
+	0x9d, 0xa2, 0x6c, 0xd3, 0x82, 0xd3, 0xb4, 0x09, 0x4c, 0x70, 0x94, 0x4a, 0xa9, 0xa4, 0x4f, 0x66,
+	0x2f, 0x5f, 0xd8, 0xf9, 0xc9, 0x95, 0x25, 0x7f, 0xf4, 0x60, 0xf0, 0x8c, 0x36, 0x45, 0x2d, 0xef,
+	0xd5, 0xff, 0x14, 0xc6, 0xc7, 0x65, 0x99, 0xf1, 0x45, 0xa7, 0xe7, 0x1d, 0x11, 0x5a, 0x3c, 0x77,
+	0xee, 0x51, 0xe7, 0xd0, 0x15, 0xe1, 0x13, 0x73, 0xaa, 0xc6, 0x22, 0x3d, 0xe3, 0x38, 0x4f, 0x8c,
+	0x9e, 0x86, 0x94, 0x12, 0x93, 0x7d, 0x5c, 0xcb, 0x62, 0x99, 0x15, 0x37, 0x2a, 0xab, 0x23, 0xd2,
+	0xe2, 0xe4, 0x5f, 0x3d, 0xf0, 0xbf, 0xa9, 0x51, 0x66, 0x02, 0x1e, 0x37, 0x45, 0xe5, 0xf1, 0x76,
+	0xb0, 0x19, 0x3a, 0x83, 0x4d, 0x0c, 0xc3, 0x46, 0xd0, 0x7c, 0xc5, 0xaa, 0x78, 0xa4, 0x78, 0xcd,
+	0x42, 0xa5, 0x51, 0x1d, 0xac, 0x27, 0x9a, 0x90, 0x58, 0xd8, 0x76, 0x24, 0x38, 0x1d, 0xf9, 0x73,
+	0x33, 0xfc, 0x8c, 0xef, 0x8e, 0x0b, 0xbb, 0x66, 0x9e, 0xff, 0xdf, 0x3b, 0xfe, 0x1f, 0x0f, 0x82,
+	0xb6, 0x79, 0x4f, 0xbb, 0xcd, 0x7b, 0xba, 0x6d, 0xde, 0xb3, 0x13, 0xdb, 0xbc, 0x67, 0x27, 0x88,
+	0xc9, 0x85, 0x6d, 0x5e, 0x72, 0x81, 0x97, 0xf5, 0x58, 0x14, 0x75, 0x79, 0xd2, 0xe8, 0x5b, 0x0d,
+	0x49, 0x8b, 0xb1, 0xe2, 0x7f, 0xb3, 0x66, 0xc2, 0xa4, 0x3a, 0x24, 0x06, 0x61, 0x7f, 0x3c, 0x53,
+	0x54, 0xa7, 0x93, 0xab, 0x41, 0xf4, 0x43, 0x08, 0x08, 0x26, 0x4f, 0x65, 0xb8, 0x73, 0x2f, 0x4a,
+	0x4c, 0xb4, 0x16, 0x9d, 0xea, 0x4f, 0x22, 0xd3, 0x28, 0xf6, 0x03, 0xe9, 0x67, 0x30, 0x98, 0xad,
+	0xf9, 0x52, 0xda, 0x11, 0xf2, 0x5b, 0x0e, 0x55, 0xf2, 0x0d, 0x53, 0x3a, 0x62, 0x4c, 0x92, 0x57,
+	0x10, 0xb6, 0xc2, 0x6d, 0x38, 0x9e, 0x1b, 0x4e, 0x04, 0xfe, 0xeb, 0x9c, 0x4b, 0x4b, 0x11, 0xb8,
+	0xc6, 0xc3, 0xbe, 0xaa, 0x69, 0x2e, 0xb9, 0x6c, 0x2c, 0x45, 0x58, 0x9c, 0x7c, 0x62, 0xc2, 0x47,
+	0x77, 0xaf, 0xcb, 0x92, 0x09, 0x43, 0x37, 0x1a, 0xa8, 0x4d, 0x8a, 0x1b, 0xa6, 0xdf, 0x8e, 0x3e,
+	0xd1, 0x20, 0xf9, 0x2d, 0x84, 0xc7, 0x19, 0x13, 0x92, 0xd4, 0x19, 0xdb, 0xf5, 0xa6, 0xab, 0x46,
+	0x35, 0x11, 0xe0, 0x7a, 0x4b, 0x2d, 0xfd, 0x3b, 0xd4, 0xf2, 0x94, 0x96, 0xf4, 0xfc, 0x4c, 0xd5,
+	0x79, 0x9f, 0x18, 0x94, 0xfc, 0xd9, 0x03, 0x1f, 0x39, 0xcc, 0x71, 0xed, 0xbf, 0x8d, 0xff, 0x2e,
+	0x44, 0x71, 0xcd, 0x53, 0x26, 0xec, 0xe1, 0x2c, 0x56, 0x49, 0x5f, 0xac, 0x59, 0x3b, 0x3a, 0x18,
+	0x84, 0xb5, 0x86, 0xdf, 0x4f, 0xb6, 0x97, 0x9c, 0x5a, 0x43, 0x31, 0xd1, 0x4a, 0x1c, 0x0f, 0x67,
+	0x75, 0xc9, 0xc4, 0x71, 0xba, 0xe1, 0x76, 0xae, 0x72, 0x24, 0xc9, 0x17, 0xfa, 0x8b, 0xec, 0x1e,
+	0x13, 0x7a, 0xbb, 0xbf, 0xde, 0xee, 0x46, 0x9e, 0xfc, 0xc5, 0x83, 0xe1, 0x73, 0x33, 0xc7, 0xb9,
+	0xa7, 0xf0, 0xde, 0x78, 0x8a, 0x5e, 0xe7, 0x14, 0x47, 0xf0, 0xc0, 0xda, 0x74, 0xf6, 0xd7, 0x59,
+	0xd8, 0xa9, 0x33, 0x19, 0xf5, 0xdb, 0xcb, 0x7a, 0x97, 0x0f, 0xb2, 0xcb, 0xae, 0xcd, 0xae, 0x0b,
+	0xbf, 0x77, 0x2b, 0x53, 0x18, 0xdb, 0x0f, 0xd1, 0x22, 0xb3, 0x0f, 0x93, 0x2b, 0x4a, 0x8e, 0x60,
+	0x70, 0x5a, 0xe4, 0x4b, 0xbe, 0x8a, 0x0e, 0xc1, 0x3f, 0xae, 0xe5, 0x5a, 0x79, 0x1c, 0x1f, 0x3d,
+	0x70, 0x1a, 0xbf, 0x96, 0x6b, 0x6d, 0x43, 0x94, 0x45, 0xf2, 0x19, 0xc0, 0x56, 0x86, 0xaf, 0xcb,
+	0xf6, 0x36, 0x5e, 0xb0, 0x1b, 0x2c, 0x99, 0xca, 0x8c, 0xf1, 0x3b, 0x34, 0xc9, 0xe7, 0x10, 0x9e,
+	0xd4, 0x3c, 0x4b, 0xcf, 0xf3, 0x65, 0x81, 0xd4, 0x71, 0xc5, 0x44, 0xb5, 0xbd, 0x2f, 0x0b, 0x31,
+	0xdd, 0xc8, 0x22, 0x6d, 0x0f, 0x19, 0x34, 0x1f, 0xa8, 0xbf, 0x39, 0x3e, 0xf9, 0x6f, 0x00, 0x00,
+	0x00, 0xff, 0xff, 0x5f, 0x2f, 0x55, 0x31, 0xf8, 0x10, 0x00, 0x00,
 }
diff --git a/bolt/internal/internal.proto b/bolt/internal/internal.proto
index 8fb2b33b6..27dec2513 100644
--- a/bolt/internal/internal.proto
+++ b/bolt/internal/internal.proto
@@ -100,6 +100,7 @@ message TemplateValue {
 	string type             = 1; // Type can be tagKey, tagValue, fieldKey, csv, measurement, database, constant
 	string value            = 2; // Value is the specific value used to replace a template in an InfluxQL query
 	bool selected           = 3; // Selected states that this variable has been picked to use for replacement
+	string key              = 4; // Key is the key for a specific Value if the Template Type is map (optional)
 }
 
 message TemplateQuery {
diff --git a/chronograf.go b/chronograf.go
index 6a63a02b5..3faeabe03 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -158,9 +158,10 @@ type Range struct {
 
 // TemplateValue is a value use to replace a template in an InfluxQL query
 type TemplateValue struct {
-	Value    string `json:"value"`    // Value is the specific value used to replace a template in an InfluxQL query
-	Type     string `json:"type"`     // Type can be tagKey, tagValue, fieldKey, csv, measurement, database, constant
-	Selected bool   `json:"selected"` // Selected states that this variable has been picked to use for replacement
+	Value    string `json:"value"`         // Value is the specific value used to replace a template in an InfluxQL query
+	Type     string `json:"type"`          // Type can be tagKey, tagValue, fieldKey, csv, measurement, database, constant
+	Selected bool   `json:"selected"`      // Selected states that this variable has been picked to use for replacement
+	Key      string `json:"key,omitempty"` // Key is the key for the Value if the Template Type is 'map'
 }
 
 // TemplateVar is a named variable within an InfluxQL query to be replaced with Values
@@ -176,7 +177,7 @@ type TemplateID string
 type Template struct {
 	TemplateVar
 	ID    TemplateID     `json:"id"`              // ID is the unique ID associated with this template
-	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, query, measurements, databases
+	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, query, measurements, databases, map
 	Label string         `json:"label"`           // Label is a user-facing description of the Template
 	Query *TemplateQuery `json:"query,omitempty"` // Query is used to generate the choices for a template
 }
diff --git a/server/templates.go b/server/templates.go
index 8b525f6ad..e70c1dab9 100644
--- a/server/templates.go
+++ b/server/templates.go
@@ -15,7 +15,7 @@ func ValidTemplateRequest(template *chronograf.Template) error {
 	switch template.Type {
 	default:
 		return fmt.Errorf("Unknown template type %s", template.Type)
-	case "query", "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases":
+	case "query", "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases", "map":
 	}
 
 	for _, v := range template.Values {
@@ -24,6 +24,10 @@ func ValidTemplateRequest(template *chronograf.Template) error {
 			return fmt.Errorf("Unknown template variable type %s", v.Type)
 		case "csv", "fieldKey", "tagKey", "tagValue", "measurement", "database", "constant":
 		}
+
+		if template.Type == "map" && v.Key == "" {
+			return fmt.Errorf("Templates of type 'map' require a 'key'")
+		}
 	}
 
 	if template.Type == "query" && template.Query == nil {
diff --git a/server/templates_test.go b/server/templates_test.go
index 8a9bec46f..83813342b 100644
--- a/server/templates_test.go
+++ b/server/templates_test.go
@@ -60,6 +60,36 @@ func TestValidTemplateRequest(t *testing.T) {
 				Type: "query",
 			},
 		},
+		{
+			name: "Valid Map type",
+			template: &chronograf.Template{
+				Type: "map",
+				TemplateVar: chronograf.TemplateVar{
+					Values: []chronograf.TemplateValue{
+						{
+							Key:   "key",
+							Value: "value",
+							Type:  "constant",
+						},
+					},
+				},
+			},
+		},
+		{
+			name:    "Map without Key",
+			wantErr: true,
+			template: &chronograf.Template{
+				Type: "map",
+				TemplateVar: chronograf.TemplateVar{
+					Values: []chronograf.TemplateValue{
+						{
+							Value: "value",
+							Type:  "constant",
+						},
+					},
+				},
+			},
+		},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {

From 3722925a0b2c4076f80ce9e74f7017f4ae1c2c2b Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 19 Jun 2018 14:57:48 -0700
Subject: [PATCH 075/100] Update swagger

---
 server/swagger.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/swagger.json b/server/swagger.json
index 8c3f36db5..ea89a0b95 100644
--- a/server/swagger.json
+++ b/server/swagger.json
@@ -4090,6 +4090,10 @@
           "enum": ["csv", "tagKey", "tagValue", "fieldKey", "timeStamp"],
           "description":
             "The type will change the format of the output value. tagKey/fieldKey are double quoted; tagValue are single quoted; csv and timeStamp are not quoted."
+        },
+        "key": {
+          "type": "string",
+          "description":"This will be the key for a specific value of a template variable. Used if the templateVar type is 'map'"
         }
       }
     },

From ea6446da4f93cac26877096352bb1f47b6dc350e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 15:06:03 -0700
Subject: [PATCH 076/100] Refactor SourceIndicator to use context API

---
 ui/src/shared/components/SourceIndicator.tsx | 52 +++++++++-----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/ui/src/shared/components/SourceIndicator.tsx b/ui/src/shared/components/SourceIndicator.tsx
index 13af7cd09..41e145242 100644
--- a/ui/src/shared/components/SourceIndicator.tsx
+++ b/ui/src/shared/components/SourceIndicator.tsx
@@ -1,50 +1,46 @@
 import React, {SFC} from 'react'
-import PropTypes from 'prop-types'
 import _ from 'lodash'
 import uuid from 'uuid'
 
 import ReactTooltip from 'react-tooltip'
-
+import {SourceContext} from 'src/CheckSources'
 import {Source} from 'src/types'
 
 interface Props {
   sourceOverride?: Source
 }
 
-const SourceIndicator: SFC<Props> = ({sourceOverride}, {source}) => {
-  if (!source) {
-    return null
-  }
-
+const getTooltipText = (source: Source, sourceOverride: Source): string => {
   const {name, url} = source
   const sourceName: string = _.get(sourceOverride, 'name', name)
   const sourceUrl: string = _.get(sourceOverride, 'url', url)
 
-  const sourceNameTooltip: string = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
+  return `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
+}
+
+const SourceIndicator: SFC<Props> = ({sourceOverride}) => {
   const uuidTooltip: string = uuid.v4()
 
   return (
-    <div
-      className="source-indicator"
-      data-for={uuidTooltip}
-      data-tip={sourceNameTooltip}
-    >
-      <span className="icon disks" />
-      <ReactTooltip
-        id={uuidTooltip}
-        effect="solid"
-        html={true}
-        place="left"
-        class="influx-tooltip"
-      />
-    </div>
+    <SourceContext.Consumer>
+      {(source: Source) => (
+        <div
+          className="source-indicator"
+          data-for={uuidTooltip}
+          data-tip={getTooltipText(source, sourceOverride)}
+        >
+          <span className="icon disks" />
+          <ReactTooltip
+            id={uuidTooltip}
+            effect="solid"
+            html={true}
+            place="left"
+            class="influx-tooltip"
+          />
+        </div>
+      )}
+    </SourceContext.Consumer>
   )
 }
 
-const {shape} = PropTypes
-
-SourceIndicator.contextTypes = {
-  source: shape({}),
-}
-
 export default SourceIndicator

From 6e220c16722ea655fcd5e879f4abfdc612813aac Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 15:06:21 -0700
Subject: [PATCH 077/100] Provide mock context in test to prevent fail

---
 ui/test/kapacitor/components/TickscriptHeader.test.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/test/kapacitor/components/TickscriptHeader.test.tsx b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
index e3a03b12d..ffbb759de 100644
--- a/ui/test/kapacitor/components/TickscriptHeader.test.tsx
+++ b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
@@ -4,6 +4,14 @@ import {mount} from 'enzyme'
 import PageHeader from 'src/shared/components/PageHeader'
 import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
 import TickscriptSave from 'src/kapacitor/components/TickscriptSave'
+import {source} from 'test/resources'
+
+const mockContext = jest.fn()
+jest.mock('src/CheckSources', () => ({
+  SourceContext: {
+    Consumer: ({children}) => children(mockContext()),
+  },
+}))
 
 const setup = (override?) => {
   const props = {
@@ -21,6 +29,8 @@ const setup = (override?) => {
     ...override,
   }
 
+  mockContext.mockReturnValue(source)
+
   const wrapper = mount(<TickscriptHeader {...props} />)
 
   return {

From 390bc7b983555c15fcb68393a5b13f7e0194891a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 19 Jun 2018 15:46:58 -0700
Subject: [PATCH 078/100] Implement PageHeader in SourceForm

---
 ui/src/sources/containers/SourcePage.tsx | 34 +++++++++++-------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/ui/src/sources/containers/SourcePage.tsx b/ui/src/sources/containers/SourcePage.tsx
index 2d2edf314..e43a52ef5 100644
--- a/ui/src/sources/containers/SourcePage.tsx
+++ b/ui/src/sources/containers/SourcePage.tsx
@@ -18,7 +18,7 @@ import {connect} from 'react-redux'
 import Notifications from 'src/shared/components/Notifications'
 import SourceForm from 'src/sources/components/SourceForm'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
+import PageHeader from 'src/shared/components/PageHeader'
 import {DEFAULT_SOURCE} from 'src/shared/constants'
 import {Source} from 'src/types'
 
@@ -91,24 +91,7 @@ class SourcePage extends PureComponent<Props, State> {
     return (
       <div className={`${isInitialSource ? '' : 'page'}`}>
         <Notifications />
-        <div className="page-header">
-          <div className="page-header__container page-header__source-page">
-            <div className="page-header__col-md-8">
-              <div className="page-header__left">
-                <h1 className="page-header__title">
-                  {editMode
-                    ? 'Configure InfluxDB Connection'
-                    : 'Add a New InfluxDB Connection'}
-                </h1>
-              </div>
-              {isInitialSource ? null : (
-                <div className="page-header__right">
-                  <SourceIndicator />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
+        <PageHeader title={this.pageTitle} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
@@ -131,6 +114,7 @@ class SourcePage extends PureComponent<Props, State> {
       </div>
     )
   }
+
   private handleSubmit = (e: MouseEvent<HTMLFormElement>): void => {
     e.preventDefault()
     const {isCreated, editMode} = this.state
@@ -140,10 +124,12 @@ class SourcePage extends PureComponent<Props, State> {
     }
     this.setState(this.normalizeSource, this.updateSource)
   }
+
   private gotoPurgatory = (): void => {
     const {router} = this.props
     router.push('/purgatory')
   }
+
   private normalizeSource({source}) {
     const url = source.url.trim()
     if (source.url.startsWith('http')) {
@@ -261,6 +247,16 @@ class SourcePage extends PureComponent<Props, State> {
 
     this.setState(this.normalizeSource, this.createSourceOnBlur)
   }
+
+  private get pageTitle(): string {
+    const {editMode} = this.state
+
+    if (editMode) {
+      return 'Configure InfluxDB Connection'
+    }
+
+    return 'Add a New InfluxDB Connection'
+  }
 }
 
 const mdtp = {

From fd1edf083fe369e926fbf463b51b57af710182a3 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 19 Jun 2018 16:19:15 -0700
Subject: [PATCH 079/100] Change Ascending arrows to point up instead of down

---
 ui/src/style/components/table-graph.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/style/components/table-graph.scss b/ui/src/style/components/table-graph.scss
index e5052dfc7..b79d9a584 100644
--- a/ui/src/style/components/table-graph.scss
+++ b/ui/src/style/components/table-graph.scss
@@ -86,7 +86,7 @@
       position: absolute;
       top: 50%;
       right: 6px;
-      transform: translateY(-50%);
+      transform: translateY(-50%) rotate(180deg);
       font-size: 13px;
       opacity: 0;
       transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
@@ -107,10 +107,10 @@
     }
   }
   &__sort-asc:before {
-    transform: translateY(-50%) rotate(0deg);
+    transform: translateY(-50%) rotate(180deg);
   }
   &__sort-desc:before {
-    transform: translateY(-50%) rotate(180deg);
+    transform: translateY(-50%) rotate(0deg);
   }
 }
 

From 065c3e19bc5ea159afc5cc58b2bd21e85c9ab7e9 Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie@Aliries-MacBook-Pro.local>
Date: Mon, 18 Jun 2018 16:43:16 -0700
Subject: [PATCH 080/100] Implement custom meta query template variable type

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Alirie Gray <alirie.gray@gmail.com>
---
 ui/src/shared/parsing/showSeries.ts           |  26 +++
 .../components/MetaQueryTemplateBuilder.tsx   | 166 ++++++++++++++++++
 .../components/TemplateVariableEditor.tsx     |   2 +
 ui/src/tempVars/constants/index.ts            |  16 ++
 ui/src/tempVars/utils/parsing.ts              |  84 +++++++++
 ui/src/types/tempVars.ts                      |   1 +
 6 files changed, 295 insertions(+)
 create mode 100644 ui/src/shared/parsing/showSeries.ts
 create mode 100644 ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
 create mode 100644 ui/src/tempVars/utils/parsing.ts

diff --git a/ui/src/shared/parsing/showSeries.ts b/ui/src/shared/parsing/showSeries.ts
new file mode 100644
index 000000000..3cad741e0
--- /dev/null
+++ b/ui/src/shared/parsing/showSeries.ts
@@ -0,0 +1,26 @@
+interface ParseShowSeriesResponse {
+  errors: string[]
+  series: string[]
+}
+
+const parseShowSeries = (response): ParseShowSeriesResponse => {
+  const results = response.results[0]
+
+  if (results.error) {
+    return {errors: [results.error], series: []}
+  }
+
+  const series = results.series[0]
+
+  if (!series.values) {
+    return {errors: [], series: []}
+  }
+
+  const seriesValues = series.values.map(s => {
+    return s[0]
+  })
+
+  return {errors: [], series: seriesValues}
+}
+
+export default parseShowSeries
diff --git a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
new file mode 100644
index 000000000..b78d64b5f
--- /dev/null
+++ b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
@@ -0,0 +1,166 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+import _ from 'lodash'
+
+import {proxy} from 'src/utils/queryUrlGenerator'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import TemplateMetaQueryPreview from 'src/tempVars/components/TemplateMetaQueryPreview'
+import {parseMetaQuery, isInvalidMetaQuery} from 'src/tempVars/utils/parsing'
+
+import {
+  TemplateBuilderProps,
+  RemoteDataState,
+  TemplateValueType,
+} from 'src/types'
+
+// TODO: Ensure save is wired up to changes
+
+const DEBOUNCE_DELAY = 750
+
+interface State {
+  metaQueryInput: string // bound to input
+  metaQuery: string // debounced view of metaQueryInput
+  metaQueryResults: string[]
+  metaQueryResultsStatus: RemoteDataState
+}
+
+@ErrorHandling
+class CustomMetaQueryTemplateBuilder extends PureComponent<
+  TemplateBuilderProps,
+  State
+> {
+  private handleMetaQueryChange: () => void = _.debounce(() => {
+    const {metaQuery, metaQueryInput} = this.state
+    const {template, onUpdateTemplate} = this.props
+
+    if (metaQuery === metaQueryInput) {
+      return
+    }
+
+    this.setState({metaQuery: metaQueryInput}, this.executeQuery)
+
+    const nextTemplate = {...template, query: {influxql: metaQueryInput}}
+
+    onUpdateTemplate(nextTemplate)
+  }, DEBOUNCE_DELAY)
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      metaQueryInput: '',
+      metaQuery: '',
+      metaQueryResults: [],
+      metaQueryResultsStatus: RemoteDataState.NotStarted,
+    }
+  }
+
+  public render() {
+    const {metaQueryInput} = this.state
+
+    return (
+      <div className="temp-builder csv-temp-builder">
+        <div className="form-group">
+          <label>Meta Query</label>
+          <div className="temp-builder--mq-controls">
+            <textarea
+              className="form-control"
+              value={metaQueryInput}
+              onChange={this.handleMetaQueryInputChange}
+              onBlur={this.handleMetaQueryChange}
+            />
+          </div>
+        </div>
+        {this.renderResults()}
+      </div>
+    )
+  }
+
+  private renderResults() {
+    const {metaQueryResults, metaQueryResultsStatus} = this.state
+
+    if (this.showInvalidMetaQueryMessage) {
+      return (
+        <div className="temp-builder-results">
+          <p className="error">Meta Query is not valid.</p>
+        </div>
+      )
+    }
+
+    return (
+      <TemplateMetaQueryPreview
+        items={metaQueryResults}
+        loadingStatus={metaQueryResultsStatus}
+      />
+    )
+  }
+
+  private get showInvalidMetaQueryMessage(): boolean {
+    const {metaQuery} = this.state
+
+    return this.isInvalidMetaQuery && metaQuery !== ''
+  }
+
+  private get isInvalidMetaQuery(): boolean {
+    const {metaQuery} = this.state
+
+    return isInvalidMetaQuery(metaQuery)
+  }
+
+  private handleMetaQueryInputChange = (
+    e: ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    this.setState({metaQueryInput: e.target.value})
+    this.handleMetaQueryChange()
+  }
+
+  private executeQuery = async (): Promise<void> => {
+    const {template, source, onUpdateTemplate} = this.props
+    const {metaQuery} = this.state
+
+    if (this.isInvalidMetaQuery) {
+      return
+    }
+
+    this.setState({metaQueryResultsStatus: RemoteDataState.Loading})
+
+    try {
+      const {data} = await proxy({
+        source: source.links.proxy,
+        query: metaQuery,
+      })
+
+      const metaQueryResults = parseMetaQuery(metaQuery, data)
+
+      this.setState({
+        metaQueryResults,
+        metaQueryResultsStatus: RemoteDataState.Done,
+      })
+
+      const nextValues = metaQueryResults.map(result => {
+        return {
+          type: TemplateValueType.Constant,
+          value: result,
+          selected: false,
+        }
+      })
+
+      if (nextValues[0]) {
+        nextValues[0].selected = true
+      }
+
+      const nextTemplate = {
+        ...template,
+        values: nextValues,
+      }
+
+      onUpdateTemplate(nextTemplate)
+    } catch {
+      this.setState({
+        metaQueryResults: [],
+        metaQueryResultsStatus: RemoteDataState.Error,
+      })
+    }
+  }
+}
+
+export default CustomMetaQueryTemplateBuilder
diff --git a/ui/src/tempVars/components/TemplateVariableEditor.tsx b/ui/src/tempVars/components/TemplateVariableEditor.tsx
index 296c3fb23..a0560d88f 100644
--- a/ui/src/tempVars/components/TemplateVariableEditor.tsx
+++ b/ui/src/tempVars/components/TemplateVariableEditor.tsx
@@ -18,6 +18,7 @@ import MeasurementsTemplateBuilder from 'src/tempVars/components/MeasurementsTem
 import FieldKeysTemplateBuilder from 'src/tempVars/components/FieldKeysTemplateBuilder'
 import TagKeysTemplateBuilder from 'src/tempVars/components/TagKeysTemplateBuilder'
 import TagValuesTemplateBuilder from 'src/tempVars/components/TagValuesTemplateBuilder'
+import MetaQueryTemplateBuilder from 'src/tempVars/components/MetaQueryTemplateBuilder'
 
 import {
   Template,
@@ -59,6 +60,7 @@ const TEMPLATE_BUILDERS = {
   [TemplateType.FieldKeys]: FieldKeysTemplateBuilder,
   [TemplateType.TagKeys]: TagKeysTemplateBuilder,
   [TemplateType.TagValues]: TagValuesTemplateBuilder,
+  [TemplateType.MetaQuery]: MetaQueryTemplateBuilder,
 }
 
 const formatName = name => `:${name.replace(/:/g, '')}:`
diff --git a/ui/src/tempVars/constants/index.ts b/ui/src/tempVars/constants/index.ts
index 414c2e546..1e14198cc 100644
--- a/ui/src/tempVars/constants/index.ts
+++ b/ui/src/tempVars/constants/index.ts
@@ -34,6 +34,10 @@ export const TEMPLATE_TYPES_LIST: TemplateTypesListItem[] = [
     text: 'CSV',
     type: TemplateType.CSV,
   },
+  {
+    text: 'Custom Meta Query',
+    type: TemplateType.MetaQuery,
+  },
 ]
 
 export const TEMPLATE_VARIABLE_TYPES = {
@@ -136,6 +140,18 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
       },
     }
   },
+  [TemplateType.MetaQuery]: () => {
+    return {
+      id: uuid.v4(),
+      tempVar: ':my-meta-query:',
+      values: [],
+      type: TemplateType.MetaQuery,
+      label: '',
+      query: {
+        influxql: '',
+      },
+    }
+  },
 }
 
 export const RESERVED_TEMPLATE_NAMES = [
diff --git a/ui/src/tempVars/utils/parsing.ts b/ui/src/tempVars/utils/parsing.ts
new file mode 100644
index 000000000..3af8a05c9
--- /dev/null
+++ b/ui/src/tempVars/utils/parsing.ts
@@ -0,0 +1,84 @@
+import parseShowDatabases from 'src/shared/parsing/showDatabases'
+import parseShowFieldKeys from 'src/shared/parsing/showFieldKeys'
+import parseShowTagKeys from 'src/shared/parsing/showTagKeys'
+import parseShowTagValues from 'src/shared/parsing/showTagValues'
+import parseShowMeasurements from 'src/shared/parsing/showMeasurements'
+import parseShowSeries from 'src/shared/parsing/showSeries'
+
+export const parseMetaQuery = (metaQuery: string, response): string[] => {
+  const metaQueryStart = getMetaQueryStart(metaQuery)
+
+  if (!metaQueryStart) {
+    throw new Error('Could not find parser for meta query')
+  }
+
+  const parser = PARSERS[metaQueryStart]
+  const extractor = EXTRACTORS[metaQueryStart]
+  const parsed = parser(response)
+
+  if (parsed.errors.length) {
+    throw new Error(parsed.errors)
+  }
+
+  return extractor(parsed)
+}
+
+export const isInvalidMetaQuery = (metaQuery: string): boolean =>
+  !getMetaQueryStart(metaQuery)
+
+const getMetaQueryStart = (metaQuery: string): string | null => {
+  const words = metaQuery
+    .trim()
+    .toUpperCase()
+    .split(' ')
+  const firstTwoWords = words.slice(0, 2).join(' ')
+  const firstThreeWords = words.slice(0, 3).join(' ')
+
+  return VALID_META_QUERY_STARTS.find(
+    q => q === firstTwoWords || q === firstThreeWords
+  )
+}
+
+const VALID_META_QUERY_STARTS = [
+  'SHOW DATABASES',
+  'SHOW MEASUREMENTS',
+  'SHOW SERIES',
+  'SHOW TAG VALUES',
+  'SHOW FIELD KEYS',
+  'SHOW TAG KEYS',
+]
+
+const PARSERS = {
+  'SHOW DATABASES': parseShowDatabases,
+  'SHOW FIELD KEYS': parseShowFieldKeys,
+  'SHOW MEASUREMENTS': parseShowMeasurements,
+  'SHOW SERIES': parseShowSeries,
+  'SHOW TAG VALUES': parseShowTagValues,
+  'SHOW TAG KEYS': parseShowTagKeys,
+}
+
+const EXTRACTORS = {
+  'SHOW DATABASES': parsed => parsed.databases,
+  'SHOW FIELD KEYS': parsed => {
+    const {fieldSets} = parsed
+    const fieldSetsValues = Object.values(fieldSets) as string[]
+
+    return fieldSetsValues.reduce((acc, current) => [...acc, ...current], [])
+  },
+  'SHOW MEASUREMENTS': parsed => {
+    const {measurementSets} = parsed
+
+    return measurementSets.reduce(
+      (acc, current) => [...acc, ...current.measurements],
+      []
+    )
+  },
+  'SHOW TAG KEYS': parsed => parsed.tagKeys,
+  'SHOW TAG VALUES': parsed => {
+    const {tags} = parsed
+    const tagsValues = Object.values(tags) as string[]
+
+    return tagsValues.reduce((acc, current) => [...acc, ...current], [])
+  },
+  'SHOW SERIES': parsed => parsed.series,
+}
diff --git a/ui/src/types/tempVars.ts b/ui/src/types/tempVars.ts
index 26d9b3f9a..9d49f4a41 100644
--- a/ui/src/types/tempVars.ts
+++ b/ui/src/types/tempVars.ts
@@ -36,6 +36,7 @@ export enum TemplateType {
   CSV = 'csv',
   Query = 'query',
   Databases = 'databases',
+  MetaQuery = 'metaQuery',
 }
 
 export interface Template {

From 2a494b4f75327e43080a666e9bc928808352d579 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 14:45:47 -0700
Subject: [PATCH 081/100] Support persisting "influxql" template variables

---
 chronograf.go            | 4 ++--
 influx/templates.go      | 2 +-
 server/templates.go      | 8 ++++----
 ui/src/types/tempVars.ts | 3 +--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/chronograf.go b/chronograf.go
index 3faeabe03..1fed8dbbb 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -159,7 +159,7 @@ type Range struct {
 // TemplateValue is a value use to replace a template in an InfluxQL query
 type TemplateValue struct {
 	Value    string `json:"value"`         // Value is the specific value used to replace a template in an InfluxQL query
-	Type     string `json:"type"`          // Type can be tagKey, tagValue, fieldKey, csv, measurement, database, constant
+	Type     string `json:"type"`          // Type can be tagKey, tagValue, fieldKey, csv, measurement, database, constant, influxql
 	Selected bool   `json:"selected"`      // Selected states that this variable has been picked to use for replacement
 	Key      string `json:"key,omitempty"` // Key is the key for the Value if the Template Type is 'map'
 }
@@ -177,7 +177,7 @@ type TemplateID string
 type Template struct {
 	TemplateVar
 	ID    TemplateID     `json:"id"`              // ID is the unique ID associated with this template
-	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, query, measurements, databases, map
+	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, query, measurements, databases, map, influxql
 	Label string         `json:"label"`           // Label is a user-facing description of the Template
 	Query *TemplateQuery `json:"query,omitempty"` // Query is used to generate the choices for a template
 }
diff --git a/influx/templates.go b/influx/templates.go
index fe6a24a40..86168f772 100644
--- a/influx/templates.go
+++ b/influx/templates.go
@@ -72,7 +72,7 @@ func RenderTemplate(query string, t chronograf.TemplateVar, now time.Time) (stri
 		return strings.Replace(q, t.Var, `"`+t.Values[0].Value+`"`, -1), nil
 	case "tagValue", "timeStamp":
 		return strings.Replace(q, t.Var, `'`+t.Values[0].Value+`'`, -1), nil
-	case "csv", "constant":
+	case "csv", "constant", "influxql":
 		return strings.Replace(q, t.Var, t.Values[0].Value, -1), nil
 	}
 
diff --git a/server/templates.go b/server/templates.go
index e70c1dab9..41109b35d 100644
--- a/server/templates.go
+++ b/server/templates.go
@@ -15,14 +15,14 @@ func ValidTemplateRequest(template *chronograf.Template) error {
 	switch template.Type {
 	default:
 		return fmt.Errorf("Unknown template type %s", template.Type)
-	case "query", "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases", "map":
+	case "query", "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases", "map", "influxql":
 	}
 
 	for _, v := range template.Values {
 		switch v.Type {
 		default:
 			return fmt.Errorf("Unknown template variable type %s", v.Type)
-		case "csv", "fieldKey", "tagKey", "tagValue", "measurement", "database", "constant":
+		case "csv", "fieldKey", "tagKey", "tagValue", "measurement", "database", "constant", "influxql":
 		}
 
 		if template.Type == "map" && v.Key == "" {
@@ -30,8 +30,8 @@ func ValidTemplateRequest(template *chronograf.Template) error {
 		}
 	}
 
-	if template.Type == "query" && template.Query == nil {
-		return fmt.Errorf("No query set for template of type 'query'")
+	if template.Type == "influxql" && template.Query == nil {
+		return fmt.Errorf("No query set for template of type 'influxql'")
 	}
 
 	return nil
diff --git a/ui/src/types/tempVars.ts b/ui/src/types/tempVars.ts
index 9d49f4a41..c51599edf 100644
--- a/ui/src/types/tempVars.ts
+++ b/ui/src/types/tempVars.ts
@@ -34,9 +34,8 @@ export enum TemplateType {
   TagKeys = 'tagKeys',
   TagValues = 'tagValues',
   CSV = 'csv',
-  Query = 'query',
   Databases = 'databases',
-  MetaQuery = 'metaQuery',
+  MetaQuery = 'influxql',
 }
 
 export interface Template {

From 9e0820e032de81ada2879ed11f70b23122c51a46 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 16:09:13 -0700
Subject: [PATCH 082/100] Hydrate MetaQueryTemplateBuilder correctly

---
 .../components/MetaQueryTemplateBuilder.tsx   | 22 ++++++++++---------
 ui/src/types/tempVars.ts                      |  1 +
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
index b78d64b5f..c21472bd5 100644
--- a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
@@ -12,8 +12,6 @@ import {
   TemplateValueType,
 } from 'src/types'
 
-// TODO: Ensure save is wired up to changes
-
 const DEBOUNCE_DELAY = 750
 
 interface State {
@@ -30,30 +28,31 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 > {
   private handleMetaQueryChange: () => void = _.debounce(() => {
     const {metaQuery, metaQueryInput} = this.state
-    const {template, onUpdateTemplate} = this.props
 
     if (metaQuery === metaQueryInput) {
       return
     }
 
     this.setState({metaQuery: metaQueryInput}, this.executeQuery)
-
-    const nextTemplate = {...template, query: {influxql: metaQueryInput}}
-
-    onUpdateTemplate(nextTemplate)
   }, DEBOUNCE_DELAY)
 
   constructor(props) {
     super(props)
 
+    const metaQuery = _.get(props.template, 'query.influxql', '')
+
     this.state = {
-      metaQueryInput: '',
-      metaQuery: '',
+      metaQuery,
+      metaQueryInput: metaQuery,
       metaQueryResults: [],
       metaQueryResultsStatus: RemoteDataState.NotStarted,
     }
   }
 
+  public componentDidMount() {
+    this.executeQuery()
+  }
+
   public render() {
     const {metaQueryInput} = this.state
 
@@ -138,7 +137,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 
       const nextValues = metaQueryResults.map(result => {
         return {
-          type: TemplateValueType.Constant,
+          type: TemplateValueType.MetaQuery,
           value: result,
           selected: false,
         }
@@ -151,6 +150,9 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
       const nextTemplate = {
         ...template,
         values: nextValues,
+        query: {
+          influxql: metaQuery,
+        },
       }
 
       onUpdateTemplate(nextTemplate)
diff --git a/ui/src/types/tempVars.ts b/ui/src/types/tempVars.ts
index c51599edf..cc17663c4 100644
--- a/ui/src/types/tempVars.ts
+++ b/ui/src/types/tempVars.ts
@@ -9,6 +9,7 @@ export enum TemplateValueType {
   CSV = 'csv',
   Points = 'points',
   Constant = 'constant',
+  MetaQuery = 'influxql',
 }
 
 export interface TemplateValue {

From 2c1dc440c384b0734094ad68f250336f674efc73 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 16:19:41 -0700
Subject: [PATCH 083/100] Refactor hydrateTempVarValuesAsync

---
 ui/src/dashboards/actions/index.ts | 32 +++++++++++++-----------------
 ui/src/dashboards/apis/index.js    | 17 ----------------
 ui/src/tempVars/constants/index.ts |  1 +
 3 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts
index 658574bd6..051a6659b 100644
--- a/ui/src/dashboards/actions/index.ts
+++ b/ui/src/dashboards/actions/index.ts
@@ -5,7 +5,9 @@ import {replace} from 'react-router-redux'
 import _ from 'lodash'
 import queryString from 'query-string'
 
+import {proxy} from 'src/utils/queryUrlGenerator'
 import {isUserAuthorized, EDITOR_ROLE} from 'src/auth/Authorized'
+import {parseMetaQuery} from 'src/tempVars/utils/parsing'
 
 import {
   getDashboards as getDashboardsAJAX,
@@ -15,7 +17,6 @@ import {
   updateDashboardCell as updateDashboardCellAJAX,
   addDashboardCell as addDashboardCellAJAX,
   deleteDashboardCell as deleteDashboardCellAJAX,
-  getTempVarValuesBySourceQuery,
   createDashboard as createDashboardAJAX,
 } from 'src/dashboards/apis'
 import {getMe} from 'src/shared/apis/auth'
@@ -48,7 +49,6 @@ import {
 } from 'src/shared/copy/notifications'
 
 import {makeQueryForTemplate} from 'src/dashboards/utils/tempVars'
-import parsers from 'src/shared/parsing'
 import {getDeep} from 'src/utils/wrappers'
 
 import idNormalizer, {TYPE_ID} from 'src/normalizers/id'
@@ -628,25 +628,21 @@ export const hydrateTempVarValuesAsync = (
     const dashboard = getState().dashboardUI.dashboards.find(
       d => d.id === dashboardID
     )
+    const templates: Template[] = dashboard.templates
+    const queries = templates
+      .filter(template => !!template.query.influxql)
+      .map(async template => {
+        const query = makeQueryForTemplate(template.query)
+        const response = await proxy({source: source.links.proxy, query})
+        const values = parseMetaQuery(query, response.data)
 
-    const tempsWithQueries = dashboard.templates.filter(
-      ({query}) => !!query.influxql
-    )
-
-    const asyncQueries = tempsWithQueries.map(({query}) =>
-      getTempVarValuesBySourceQuery(source, {
-        query: makeQueryForTemplate(query),
+        return {template, values}
       })
-    )
+    const results = await Promise.all(queries)
 
-    const results = await Promise.all(asyncQueries)
-
-    results.forEach(({data}, i) => {
-      const {type, query, id} = tempsWithQueries[i]
-      const parsed = parsers[type](data, query.tagKey || query.measurement)
-      const vals = parsed[type]
-      dispatch(editTemplateVariableValues(+dashboard.id, id, vals))
-    })
+    for (const {template, values} of results) {
+      dispatch(editTemplateVariableValues(+dashboard.id, template.id, values))
+    }
   } catch (error) {
     console.error(error)
     dispatch(errorThrown(error))
diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js
index 5719a0b05..ff04e841a 100644
--- a/ui/src/dashboards/apis/index.js
+++ b/ui/src/dashboards/apis/index.js
@@ -1,5 +1,4 @@
 import AJAX from 'utils/ajax'
-import {proxy} from 'utils/queryUrlGenerator'
 
 export function getDashboards() {
   return AJAX({
@@ -98,19 +97,3 @@ export const editTemplateVariables = async templateVariable => {
     throw error
   }
 }
-
-export const getTempVarValuesBySourceQuery = async (source, templateQuery) => {
-  const {
-    query,
-    db,
-    // rp, TODO
-    tempVars,
-  } = templateQuery
-  try {
-    // TODO: add rp as argument to proxy
-    return await proxy({source: source.links.proxy, query, db, tempVars})
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
-}
diff --git a/ui/src/tempVars/constants/index.ts b/ui/src/tempVars/constants/index.ts
index 1e14198cc..d5fa36e05 100644
--- a/ui/src/tempVars/constants/index.ts
+++ b/ui/src/tempVars/constants/index.ts
@@ -47,6 +47,7 @@ export const TEMPLATE_VARIABLE_TYPES = {
   [TemplateType.FieldKeys]: TemplateValueType.FieldKey,
   [TemplateType.TagKeys]: TemplateValueType.TagKey,
   [TemplateType.TagValues]: TemplateValueType.TagValue,
+  [TemplateType.MetaQuery]: TemplateValueType.MetaQuery,
 }
 
 export const TEMPLATE_VARIABLE_QUERIES = {

From 5a4781dd58f5b9ffdd5de0eca73a031701527dc7 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 19 Jun 2018 16:25:06 -0700
Subject: [PATCH 084/100] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d941200d..e8b3a6d1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@
 1.  [#3649](https://github.com/influxdata/chronograf/pull/3649): Fix erroneous icons in Date Picker widget
 1.  [#3697](https://github.com/influxdata/chronograf/pull/3697): Fix allowing hyphens in basepath
 1.  [#3698](https://github.com/influxdata/chronograf/pull/3698): Fix error in cell when tempVar returns no values
+1.  [#3733](https://github.com/influxdata/chronograf/pull/3733): Change arrows in table columns so that ascending sort points up and descending points down
 
 ## v1.5.0.0 [2018-05-15-RC]
 

From 0ced327a2a16a2202c7807094a486ba6e7e94291 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 16:37:02 -0700
Subject: [PATCH 085/100] Fix failing template test

---
 server/templates_test.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/templates_test.go b/server/templates_test.go
index 83813342b..cd775acea 100644
--- a/server/templates_test.go
+++ b/server/templates_test.go
@@ -57,7 +57,7 @@ func TestValidTemplateRequest(t *testing.T) {
 			name:    "No query set",
 			wantErr: true,
 			template: &chronograf.Template{
-				Type: "query",
+				Type: "influxql",
 			},
 		},
 		{

From 961ed5f5f29aac3dd1b195afb80d489f505ac12d Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 19 Jun 2018 16:39:28 -0700
Subject: [PATCH 086/100] Use more consistent naming

---
 ui/src/tempVars/utils/parsing.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/tempVars/utils/parsing.ts b/ui/src/tempVars/utils/parsing.ts
index 3af8a05c9..b31442aba 100644
--- a/ui/src/tempVars/utils/parsing.ts
+++ b/ui/src/tempVars/utils/parsing.ts
@@ -6,7 +6,7 @@ import parseShowMeasurements from 'src/shared/parsing/showMeasurements'
 import parseShowSeries from 'src/shared/parsing/showSeries'
 
 export const parseMetaQuery = (metaQuery: string, response): string[] => {
-  const metaQueryStart = getMetaQueryStart(metaQuery)
+  const metaQueryStart = getMetaQueryPrefix(metaQuery)
 
   if (!metaQueryStart) {
     throw new Error('Could not find parser for meta query')
@@ -24,9 +24,9 @@ export const parseMetaQuery = (metaQuery: string, response): string[] => {
 }
 
 export const isInvalidMetaQuery = (metaQuery: string): boolean =>
-  !getMetaQueryStart(metaQuery)
+  !getMetaQueryPrefix(metaQuery)
 
-const getMetaQueryStart = (metaQuery: string): string | null => {
+const getMetaQueryPrefix = (metaQuery: string): string | null => {
   const words = metaQuery
     .trim()
     .toUpperCase()
@@ -34,12 +34,12 @@ const getMetaQueryStart = (metaQuery: string): string | null => {
   const firstTwoWords = words.slice(0, 2).join(' ')
   const firstThreeWords = words.slice(0, 3).join(' ')
 
-  return VALID_META_QUERY_STARTS.find(
+  return VALID_META_QUERY_PREFIXES.find(
     q => q === firstTwoWords || q === firstThreeWords
   )
 }
 
-const VALID_META_QUERY_STARTS = [
+const VALID_META_QUERY_PREFIXES = [
   'SHOW DATABASES',
   'SHOW MEASUREMENTS',
   'SHOW SERIES',

From d362e43d3c2e22e1a7c3c52f9c3795895f9f0f3f Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 19 Jun 2018 17:12:30 -0700
Subject: [PATCH 087/100] TS things further

---
 ui/src/shared/actions/timeSeries.ts | 42 ++++++++++++++++-------------
 ui/src/shared/copy/notifications.ts |  7 ++---
 ui/src/shared/data/timeRanges.ts    |  6 ++---
 ui/src/status/actions/index.ts      |  3 ++-
 ui/src/status/fixtures.ts           | 20 +++++++-------
 ui/src/status/reducers/JSONFeed.ts  |  9 ++++---
 ui/src/types/query.ts               |  2 +-
 7 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/ui/src/shared/actions/timeSeries.ts b/ui/src/shared/actions/timeSeries.ts
index 8b1f2fc69..832a02593 100644
--- a/ui/src/shared/actions/timeSeries.ts
+++ b/ui/src/shared/actions/timeSeries.ts
@@ -1,9 +1,10 @@
 import {proxy} from 'src/utils/queryUrlGenerator'
 import {noop} from 'src/shared/actions/app'
-import _ from 'lodash'
 
 import {errorThrown} from 'src/shared/actions/errors'
-import {TimeSeriesResponse} from 'src/types/series'
+import {TimeSeriesResponse, TimeSeriesSeries} from 'src/types/series'
+import {Status} from 'src/types'
+import {getDeep} from 'src/utils/wrappers'
 
 interface Query {
   host: string | string[]
@@ -23,21 +24,24 @@ interface Payload {
   resolution?: number
 }
 
-export const handleLoading = (query: Query, editQueryStatus) => {
+type EditQueryStatusFunction = (queryID: string, status: Status) => void
+
+const handleLoading = (
+  query: Query,
+  editQueryStatus: EditQueryStatusFunction
+): void =>
   editQueryStatus(query.id, {
     loading: true,
   })
-}
 
-// {results: [{}]}
-export const handleSuccess = (
+const handleSuccess = (
   data: TimeSeriesResponse,
   query: Query,
-  editQueryStatus
-) => {
+  editQueryStatus: EditQueryStatusFunction
+): TimeSeriesResponse => {
   const {results} = data
-  const error = _.get(results, ['0', 'error'], false)
-  const series = _.get(results, ['0', 'series'], false)
+  const error = getDeep<string>(results, '0.error', null)
+  const series = getDeep<TimeSeriesSeries>(results, '0.series', null)
   // 200 from server and no results = warn
   if (!series && !error) {
     editQueryStatus(query.id, {
@@ -61,12 +65,14 @@ export const handleSuccess = (
   return data
 }
 
-export const handleError = (error, query, editQueryStatus) => {
-  const message = _.get(
-    error,
-    ['data', 'message'],
-    error.message || 'Could not retrieve data'
-  )
+const handleError = (
+  error,
+  query: Query,
+  editQueryStatus: EditQueryStatusFunction
+): void => {
+  const message =
+    getDeep<string>(error, 'data.message', '') ||
+    getDeep<string>(error, 'message', 'Could not retrieve data')
 
   // 400 from chrono server = fail
   editQueryStatus(query.id, {
@@ -76,8 +82,8 @@ export const handleError = (error, query, editQueryStatus) => {
 
 export const fetchTimeSeriesAsync = async (
   {source, db, rp, query, tempVars, resolution}: Payload,
-  editQueryStatus = noop
-) => {
+  editQueryStatus: EditQueryStatusFunction = noop
+): Promise<TimeSeriesResponse> => {
   handleLoading(query, editQueryStatus)
   try {
     const {data} = await proxy({
diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts
index 8cfecc36d..f592c889f 100644
--- a/ui/src/shared/copy/notifications.ts
+++ b/ui/src/shared/copy/notifications.ts
@@ -1,6 +1,7 @@
 // All copy for notifications should be stored here for easy editing
 // and ensuring stylistic consistency
 import {Notification} from 'src/types'
+import {TemplateUpdate} from 'src/types/tempVars'
 
 type NotificationExcludingMessage = Pick<
   Notification,
@@ -520,14 +521,10 @@ export const notifyBuilderDisabled = (): Notification => ({
 
 //  Template Variables & URL Queries
 //  ----------------------------------------------------------------------------
-interface KeyValueString {
-  key: string
-  value: string
-}
 export const notifyInvalidTempVarValueInURLQuery = ({
   key,
   value,
-}: KeyValueString): Notification => ({
+}: TemplateUpdate): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
   message: `Invalid URL query value of '${value}' supplied for template variable '${key}'.`,
diff --git a/ui/src/shared/data/timeRanges.ts b/ui/src/shared/data/timeRanges.ts
index 0b6f91b47..341f156ef 100644
--- a/ui/src/shared/data/timeRanges.ts
+++ b/ui/src/shared/data/timeRanges.ts
@@ -6,7 +6,7 @@ interface TimeRangeOption extends TimeRange {
   menuOption: string
 }
 
-const nowminus30d = 'now() - 30d'
+const nowMinus30d = 'now() - 30d'
 
 export const timeRanges: TimeRangeOption[] = [
   {
@@ -77,7 +77,7 @@ export const timeRanges: TimeRangeOption[] = [
     defaultGroupBy: '6h',
     seconds: 2592000,
     inputValue: 'Past 30d',
-    lower: nowminus30d,
+    lower: nowMinus30d,
     upper: null,
     menuOption: 'Past 30d',
   },
@@ -93,5 +93,5 @@ export const defaultTimeRange = {
 }
 
 export const STATUS_PAGE_TIME_RANGE = timeRanges.find(
-  tr => tr.lower === nowminus30d
+  tr => tr.lower === nowMinus30d
 )
diff --git a/ui/src/status/actions/index.ts b/ui/src/status/actions/index.ts
index b8e37416e..1f743796b 100644
--- a/ui/src/status/actions/index.ts
+++ b/ui/src/status/actions/index.ts
@@ -1,5 +1,6 @@
 // he is a library for safely encoding and decoding HTML Entities
 import he from 'he'
+import {Dispatch} from 'redux'
 
 import {fetchJSONFeed as fetchJSONFeedAJAX} from 'src/status/apis'
 
@@ -49,7 +50,7 @@ const fetchJSONFeedFailed = (): FetchJSONFeedFailedAction => ({
 })
 
 export const fetchJSONFeedAsync = (url: string) => async (
-  dispatch
+  dispatch: Dispatch<Action>
 ): Promise<void> => {
   dispatch(fetchJSONFeedRequested())
   try {
diff --git a/ui/src/status/fixtures.ts b/ui/src/status/fixtures.ts
index 5bf0b171d..95c44b5aa 100644
--- a/ui/src/status/fixtures.ts
+++ b/ui/src/status/fixtures.ts
@@ -2,7 +2,7 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants'
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 import {DEFAULT_AXIS} from 'src/dashboards/constants/cellEditor'
-import {Cell, CellQuery} from 'src/types'
+import {Cell, CellQuery, Axes} from 'src/types'
 import {CellType} from 'src/types/dashboard'
 
 const emptyQuery: CellQuery = {
@@ -21,18 +21,16 @@ const emptyQuery: CellQuery = {
   },
 }
 
-const emptyAxes = {
-  axes: {
-    x: DEFAULT_AXIS,
-    y: DEFAULT_AXIS,
-    y2: DEFAULT_AXIS,
-  },
+const emptyAxes: Axes = {
+  x: DEFAULT_AXIS,
+  y: DEFAULT_AXIS,
+  y2: DEFAULT_AXIS,
 }
 
 export const fixtureStatusPageCells: Cell[] = [
   {
     ...NEW_DEFAULT_DASHBOARD_CELL,
-    ...emptyAxes,
+    axes: emptyAxes,
     i: 'alerts-bar-graph',
     type: CellType.Bar,
     isWidget: false,
@@ -81,7 +79,7 @@ export const fixtureStatusPageCells: Cell[] = [
   },
   {
     ...NEW_DEFAULT_DASHBOARD_CELL,
-    ...emptyAxes,
+    axes: emptyAxes,
     i: 'recent-alerts',
     type: CellType.Alerts,
     isWidget: true,
@@ -97,7 +95,7 @@ export const fixtureStatusPageCells: Cell[] = [
   },
   {
     ...NEW_DEFAULT_DASHBOARD_CELL,
-    ...emptyAxes,
+    axes: emptyAxes,
     i: 'news-feed',
     type: CellType.News,
     isWidget: true,
@@ -113,7 +111,7 @@ export const fixtureStatusPageCells: Cell[] = [
   },
   {
     ...NEW_DEFAULT_DASHBOARD_CELL,
-    ...emptyAxes,
+    axes: emptyAxes,
     i: 'getting-started',
     type: CellType.Guide,
     isWidget: true,
diff --git a/ui/src/status/reducers/JSONFeed.ts b/ui/src/status/reducers/JSONFeed.ts
index 6f5a65a9d..31bc8c85b 100644
--- a/ui/src/status/reducers/JSONFeed.ts
+++ b/ui/src/status/reducers/JSONFeed.ts
@@ -1,21 +1,24 @@
 import {JSONFeedData} from 'src/types'
 import {Action, ActionTypes} from 'src/status/actions'
 
-export interface State {
+export interface JSONFeedReducerState {
   hasCompletedFetchOnce: boolean
   isFetching: boolean
   isFailed: boolean
   data: JSONFeedData
 }
 
-const initialState: State = {
+const initialState: JSONFeedReducerState = {
   hasCompletedFetchOnce: false,
   isFetching: false,
   isFailed: false,
   data: null,
 }
 
-const JSONFeedReducer = (state: State = initialState, action: Action) => {
+const JSONFeedReducer = (
+  state: JSONFeedReducerState = initialState,
+  action: Action
+): JSONFeedReducerState => {
   switch (action.type) {
     case ActionTypes.FETCH_JSON_FEED_REQUESTED: {
       return {...state, isFetching: true, isFailed: false}
diff --git a/ui/src/types/query.ts b/ui/src/types/query.ts
index 807bd7785..df3590cf5 100644
--- a/ui/src/types/query.ts
+++ b/ui/src/types/query.ts
@@ -77,7 +77,7 @@ export interface Namespace {
 }
 
 export interface Status {
-  loading?: string
+  loading?: boolean
   error?: string
   warn?: string
   success?: string

From c50f1523e0f25be82e283999ba1e180b7ac9f7c3 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 15 Jun 2018 16:40:34 -0700
Subject: [PATCH 088/100] Convert KapacitorRule tree to typescript

---
 ui/src/kapacitor/components/CodeData.js       |  24 --
 ui/src/kapacitor/components/CodeData.tsx      |  20 +
 ui/src/kapacitor/components/DataSection.tsx   |   2 +-
 .../components/{Deadman.js => Deadman.tsx}    |  30 +-
 .../{KapacitorRule.js => KapacitorRule.tsx}   | 342 ++++++++++--------
 .../{NameSection.js => NameSection.tsx}       |  60 ++-
 .../components/{Relative.js => Relative.tsx}  |  42 +--
 ui/src/kapacitor/components/RuleHandlers.tsx  |   2 +-
 .../{RuleHeader.js => RuleHeader.tsx}         |  25 +-
 ui/src/kapacitor/components/RuleHeaderSave.js |  39 --
 .../kapacitor/components/RuleHeaderSave.tsx   |  57 +++
 .../{RuleMessage.js => RuleMessage.tsx}       |  32 +-
 ...eTemplates.js => RuleMessageTemplates.tsx} |  29 +-
 ...RuleMessageText.js => RuleMessageText.tsx} |  19 +-
 ui/src/kapacitor/components/Threshold.js      |  85 -----
 ui/src/kapacitor/components/Threshold.tsx     | 122 +++++++
 .../{ValuesSection.js => ValuesSection.tsx}   |  63 ++--
 ...citorRulePage.js => KapacitorRulePage.tsx} |  98 ++---
 ui/src/shared/components/Tabs.tsx             |   6 +-
 ui/src/types/actions.ts                       |   4 +
 ui/src/types/kapacitor.ts                     |   3 +-
 21 files changed, 614 insertions(+), 490 deletions(-)
 delete mode 100644 ui/src/kapacitor/components/CodeData.js
 create mode 100644 ui/src/kapacitor/components/CodeData.tsx
 rename ui/src/kapacitor/components/{Deadman.js => Deadman.tsx} (58%)
 rename ui/src/kapacitor/components/{KapacitorRule.js => KapacitorRule.tsx} (74%)
 rename ui/src/kapacitor/components/{NameSection.js => NameSection.tsx} (54%)
 rename ui/src/kapacitor/components/{Relative.js => Relative.tsx} (73%)
 rename ui/src/kapacitor/components/{RuleHeader.js => RuleHeader.tsx} (72%)
 delete mode 100644 ui/src/kapacitor/components/RuleHeaderSave.js
 create mode 100644 ui/src/kapacitor/components/RuleHeaderSave.tsx
 rename ui/src/kapacitor/components/{RuleMessage.js => RuleMessage.tsx} (71%)
 rename ui/src/kapacitor/components/{RuleMessageTemplates.js => RuleMessageTemplates.tsx} (77%)
 rename ui/src/kapacitor/components/{RuleMessageText.js => RuleMessageText.tsx} (59%)
 delete mode 100644 ui/src/kapacitor/components/Threshold.js
 create mode 100644 ui/src/kapacitor/components/Threshold.tsx
 rename ui/src/kapacitor/components/{ValuesSection.js => ValuesSection.tsx} (75%)
 rename ui/src/kapacitor/containers/{KapacitorRulePage.js => KapacitorRulePage.tsx} (64%)

diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js
deleted file mode 100644
index 081c75aff..000000000
--- a/ui/src/kapacitor/components/CodeData.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const CodeData = ({onClickTemplate, template}) => (
-  <code
-    className="rule-builder--message-template"
-    data-tip={template.text}
-    onClick={onClickTemplate}
-  >
-    {template.label}
-  </code>
-)
-
-const {func, shape, string} = PropTypes
-
-CodeData.propTypes = {
-  onClickTemplate: func,
-  template: shape({
-    label: string,
-    text: string,
-  }),
-}
-
-export default CodeData
diff --git a/ui/src/kapacitor/components/CodeData.tsx b/ui/src/kapacitor/components/CodeData.tsx
new file mode 100644
index 000000000..301019625
--- /dev/null
+++ b/ui/src/kapacitor/components/CodeData.tsx
@@ -0,0 +1,20 @@
+import React, {SFC} from 'react'
+
+import {RuleMessage} from 'src/types/kapacitor'
+
+interface Props {
+  onClickTemplate: () => void
+  template: RuleMessage
+}
+
+const CodeData: SFC<Props> = ({onClickTemplate, template}) => (
+  <code
+    className="rule-builder--message-template"
+    data-tip={template.text}
+    onClick={onClickTemplate}
+  >
+    {template.label}
+  </code>
+)
+
+export default CodeData
diff --git a/ui/src/kapacitor/components/DataSection.tsx b/ui/src/kapacitor/components/DataSection.tsx
index bda68cb21..2211341fd 100644
--- a/ui/src/kapacitor/components/DataSection.tsx
+++ b/ui/src/kapacitor/components/DataSection.tsx
@@ -24,7 +24,7 @@ interface Props {
   query: QueryConfig
   isDeadman: boolean
   isKapacitorRule: boolean
-  onAddEvery: () => void
+  onAddEvery: (every?: string) => void
   timeRange: TimeRange
 }
 
diff --git a/ui/src/kapacitor/components/Deadman.js b/ui/src/kapacitor/components/Deadman.tsx
similarity index 58%
rename from ui/src/kapacitor/components/Deadman.js
rename to ui/src/kapacitor/components/Deadman.tsx
index b5419caf2..d5f56eaef 100644
--- a/ui/src/kapacitor/components/Deadman.js
+++ b/ui/src/kapacitor/components/Deadman.tsx
@@ -1,13 +1,24 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
+
 import {PERIODS} from 'src/kapacitor/constants'
-import Dropdown from 'shared/components/Dropdown'
+import Dropdown from 'src/shared/components/Dropdown'
+
+import {AlertRule} from 'src/types'
 
 const periods = PERIODS.map(text => {
   return {text}
 })
 
-const Deadman = ({rule, onChange}) => (
+interface Item {
+  text: string
+}
+
+interface Props {
+  rule: AlertRule
+  onChange: (item: Item) => void
+}
+
+const Deadman: SFC<Props> = ({rule, onChange}) => (
   <div className="rule-section--row rule-section--row-first rule-section--row-last">
     <p>Send Alert if Data is missing for</p>
     <Dropdown
@@ -20,15 +31,4 @@ const Deadman = ({rule, onChange}) => (
   </div>
 )
 
-const {shape, string, func} = PropTypes
-
-Deadman.propTypes = {
-  rule: shape({
-    values: shape({
-      period: string,
-    }),
-  }),
-  onChange: func.isRequired,
-}
-
 export default Deadman
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.tsx
similarity index 74%
rename from ui/src/kapacitor/components/KapacitorRule.js
rename to ui/src/kapacitor/components/KapacitorRule.tsx
index 172a15bce..7daf03776 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.tsx
@@ -1,20 +1,20 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import React, {Component, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
+import {InjectedRouter} from 'react-router'
 
 import NameSection from 'src/kapacitor/components/NameSection'
 import ValuesSection from 'src/kapacitor/components/ValuesSection'
 import RuleHeader from 'src/kapacitor/components/RuleHeader'
 import RuleHandlers from 'src/kapacitor/components/RuleHandlers'
 import RuleMessage from 'src/kapacitor/components/RuleMessage'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import {createRule, editRule} from 'src/kapacitor/apis'
-import buildInfluxQLQuery from 'utils/influxql'
-import {timeRanges} from 'shared/data/timeRanges'
+import buildInfluxQLQuery from 'src/utils/influxql'
+import {timeRanges} from 'src/shared/data/timeRanges'
 import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
-import {notify as notifyAction} from 'shared/actions/notifications'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 import {
   notifyAlertRuleCreated,
@@ -24,11 +24,52 @@ import {
   notifyAlertRuleRequiresQuery,
   notifyAlertRuleRequiresConditionValue,
   notifyAlertRuleDeadmanInvalid,
-} from 'shared/copy/notifications'
+} from 'src/shared/copy/notifications'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {
+  Source,
+  AlertRule,
+  Notification,
+  Kapacitor,
+  QueryConfig,
+  TimeRange,
+} from 'src/types'
+import {Handler} from 'src/types/kapacitor'
+import {
+  KapacitorQueryConfigActions,
+  KapacitorRuleActions,
+} from 'src/types/actions'
+
+interface Props {
+  source: Source
+  rule: AlertRule
+  query: QueryConfig
+  queryConfigs: QueryConfig[]
+  queryConfigActions: KapacitorQueryConfigActions
+  ruleActions: KapacitorRuleActions
+  notify: (message: Notification) => void
+  ruleID: string
+  handlersFromConfig: Handler[]
+  router: InjectedRouter
+  kapacitor: Kapacitor
+  configLink: string
+}
+
+interface Item {
+  text: string
+}
+
+interface TypeItem extends Item {
+  type: string
+}
+
+interface State {
+  timeRange: TimeRange
+}
+
 @ErrorHandling
-class KapacitorRule extends Component {
+class KapacitorRule extends Component<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
@@ -36,137 +77,7 @@ class KapacitorRule extends Component {
     }
   }
 
-  handleChooseTimeRange = ({lower}) => {
-    const timeRange = timeRanges.find(range => range.lower === lower)
-    this.setState({timeRange})
-  }
-
-  handleCreate = pathname => {
-    const {notify, queryConfigs, rule, source, router, kapacitor} = this.props
-
-    const newRule = Object.assign({}, rule, {
-      query: queryConfigs[rule.queryID],
-    })
-    delete newRule.queryID
-
-    createRule(kapacitor, newRule)
-      .then(() => {
-        router.push(pathname || `/sources/${source.id}/alert-rules`)
-        notify(notifyAlertRuleCreated(newRule.name))
-      })
-      .catch(e => {
-        notify(notifyAlertRuleCreateFailed(newRule.name, e.data.message))
-      })
-  }
-
-  handleEdit = pathname => {
-    const {notify, queryConfigs, rule, router, source} = this.props
-    const updatedRule = Object.assign({}, rule, {
-      query: queryConfigs[rule.queryID],
-    })
-
-    editRule(updatedRule)
-      .then(() => {
-        router.push(pathname || `/sources/${source.id}/alert-rules`)
-        notify(notifyAlertRuleUpdated(rule.name))
-      })
-      .catch(e => {
-        notify(notifyAlertRuleUpdateFailed(rule.name, e.data.message))
-      })
-  }
-
-  handleSave = () => {
-    const {rule} = this.props
-    if (rule.id === DEFAULT_RULE_ID) {
-      this.handleCreate()
-    } else {
-      this.handleEdit()
-    }
-  }
-
-  handleSaveToConfig = configName => () => {
-    const {rule, configLink, router} = this.props
-    const pathname = `${configLink}#${configName}`
-    if (this.validationError()) {
-      router.push({
-        pathname,
-      })
-      return
-    }
-    if (rule.id === DEFAULT_RULE_ID) {
-      this.handleCreate(pathname)
-    } else {
-      this.handleEdit(pathname)
-    }
-  }
-
-  handleAddEvery = frequency => {
-    const {
-      rule: {id: ruleID},
-      ruleActions: {addEvery},
-    } = this.props
-    addEvery(ruleID, frequency)
-  }
-
-  handleRemoveEvery = () => {
-    const {
-      rule: {id: ruleID},
-      ruleActions: {removeEvery},
-    } = this.props
-    removeEvery(ruleID)
-  }
-
-  validationError = () => {
-    const {rule, query} = this.props
-    if (rule.trigger === 'deadman') {
-      return this.deadmanValidation()
-    }
-
-    if (!buildInfluxQLQuery({}, query)) {
-      return notifyAlertRuleRequiresQuery()
-    }
-
-    if (!rule.values.value) {
-      return notifyAlertRuleRequiresConditionValue()
-    }
-
-    return ''
-  }
-
-  deadmanValidation = () => {
-    const {query} = this.props
-    if (query && (!query.database || !query.measurement)) {
-      return notifyAlertRuleDeadmanInvalid()
-    }
-
-    return ''
-  }
-
-  handleRuleTypeDropdownChange = ({type, text}) => {
-    const {ruleActions, rule} = this.props
-    ruleActions.updateRuleValues(rule.id, rule.trigger, {
-      ...this.props.rule.values,
-      [type]: text,
-    })
-  }
-
-  handleRuleTypeInputChange = e => {
-    const {ruleActions, rule} = this.props
-    const {lower, upper} = e.target.form
-
-    ruleActions.updateRuleValues(rule.id, rule.trigger, {
-      ...this.props.rule.values,
-      value: lower.value,
-      rangeValue: upper ? upper.value : '',
-    })
-  }
-
-  handleDeadmanChange = ({text}) => {
-    const {ruleActions, rule} = this.props
-    ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
-  }
-
-  render() {
+  public render() {
     const {
       rule,
       source,
@@ -183,7 +94,7 @@ class KapacitorRule extends Component {
         <RuleHeader
           source={source}
           onSave={this.handleSave}
-          validationError={this.validationError()}
+          validationError={this.validationError}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
           <div className="container-fluid">
@@ -215,7 +126,7 @@ class KapacitorRule extends Component {
                     ruleActions={ruleActions}
                     handlersFromConfig={handlersFromConfig}
                     onGoToConfig={this.handleSaveToConfig}
-                    validationError={this.validationError()}
+                    validationError={this.validationError}
                   />
                   <RuleMessage rule={rule} ruleActions={ruleActions} />
                 </div>
@@ -226,27 +137,138 @@ class KapacitorRule extends Component {
       </div>
     )
   }
-}
 
-const {arrayOf, func, shape, string} = PropTypes
+  private handleChooseTimeRange = ({lower}: TimeRange) => {
+    const timeRange = timeRanges.find(range => range.lower === lower)
+    this.setState({timeRange})
+  }
 
-KapacitorRule.propTypes = {
-  source: shape({}).isRequired,
-  rule: shape({
-    values: shape({}),
-  }).isRequired,
-  query: shape({}).isRequired,
-  queryConfigs: shape({}).isRequired,
-  queryConfigActions: shape({}).isRequired,
-  ruleActions: shape({}).isRequired,
-  notify: func.isRequired,
-  ruleID: string.isRequired,
-  handlersFromConfig: arrayOf(shape({})).isRequired,
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  kapacitor: shape({}).isRequired,
-  configLink: string.isRequired,
+  private handleCreate = (pathname?: string) => {
+    const {notify, queryConfigs, rule, source, router, kapacitor} = this.props
+
+    const newRule = Object.assign({}, rule, {
+      query: queryConfigs[rule.queryID],
+    })
+    delete newRule.queryID
+
+    createRule(kapacitor, newRule)
+      .then(() => {
+        router.push(pathname || `/sources/${source.id}/alert-rules`)
+        notify(notifyAlertRuleCreated(newRule.name))
+      })
+      .catch(e => {
+        notify(notifyAlertRuleCreateFailed(newRule.name, e.data.message))
+      })
+  }
+
+  private handleEdit = (pathname?: string) => {
+    const {notify, queryConfigs, rule, router, source} = this.props
+    const updatedRule = Object.assign({}, rule, {
+      query: queryConfigs[rule.queryID],
+    })
+
+    editRule(updatedRule)
+      .then(() => {
+        router.push(pathname || `/sources/${source.id}/alert-rules`)
+        notify(notifyAlertRuleUpdated(rule.name))
+      })
+      .catch(e => {
+        notify(notifyAlertRuleUpdateFailed(rule.name, e.data.message))
+      })
+  }
+
+  private handleSave = () => {
+    const {rule} = this.props
+    if (rule.id === DEFAULT_RULE_ID) {
+      this.handleCreate()
+    } else {
+      this.handleEdit()
+    }
+  }
+
+  private handleSaveToConfig = (configName: string) => () => {
+    const {rule, configLink, router} = this.props
+    const pathname = `${configLink}#${configName}`
+
+    if (this.validationError) {
+      router.push({
+        pathname,
+      })
+      return
+    }
+
+    if (rule.id === DEFAULT_RULE_ID) {
+      this.handleCreate(pathname)
+    } else {
+      this.handleEdit(pathname)
+    }
+  }
+
+  private handleAddEvery = (frequency: string) => {
+    const {
+      rule: {id: ruleID},
+      ruleActions: {addEvery},
+    } = this.props
+    addEvery(ruleID, frequency)
+  }
+
+  private handleRemoveEvery = () => {
+    const {
+      rule: {id: ruleID},
+      ruleActions: {removeEvery},
+    } = this.props
+    removeEvery(ruleID)
+  }
+
+  private get validationError(): string {
+    const {rule, query} = this.props
+    if (rule.trigger === 'deadman') {
+      return this.deadmanValidation()
+    }
+
+    if (!buildInfluxQLQuery({lower: ''}, query)) {
+      return notifyAlertRuleRequiresQuery()
+    }
+
+    if (!rule.values.value) {
+      return notifyAlertRuleRequiresConditionValue()
+    }
+
+    return ''
+  }
+
+  private deadmanValidation = () => {
+    const {query} = this.props
+    if (query && (!query.database || !query.measurement)) {
+      return notifyAlertRuleDeadmanInvalid()
+    }
+
+    return ''
+  }
+
+  private handleRuleTypeDropdownChange = ({type, text}: TypeItem) => {
+    const {ruleActions, rule} = this.props
+    ruleActions.updateRuleValues(rule.id, rule.trigger, {
+      ...this.props.rule.values,
+      [type]: text,
+    })
+  }
+
+  private handleRuleTypeInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {ruleActions, rule} = this.props
+    const {lower, upper} = e.target.form
+
+    ruleActions.updateRuleValues(rule.id, rule.trigger, {
+      ...this.props.rule.values,
+      value: lower.value,
+      rangeValue: upper ? upper.value : '',
+    })
+  }
+
+  private handleDeadmanChange = ({text}: Item) => {
+    const {ruleActions, rule} = this.props
+    ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
+  }
 }
 
 const mapDispatchToProps = dispatch => ({
diff --git a/ui/src/kapacitor/components/NameSection.js b/ui/src/kapacitor/components/NameSection.tsx
similarity index 54%
rename from ui/src/kapacitor/components/NameSection.js
rename to ui/src/kapacitor/components/NameSection.tsx
index c4491e9a6..c468515c9 100644
--- a/ui/src/kapacitor/components/NameSection.js
+++ b/ui/src/kapacitor/components/NameSection.tsx
@@ -1,11 +1,25 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import React, {Component, ChangeEvent, KeyboardEvent} from 'react'
+
 import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {AlertRule} from 'src/types'
+
+interface Props {
+  defaultName: string
+  onRuleRename: (id: string, name: string) => void
+  rule: AlertRule
+}
+
+interface State {
+  reset: boolean
+}
+
 @ErrorHandling
-class NameSection extends Component {
-  constructor(props) {
+class NameSection extends Component<Props, State> {
+  private inputRef: HTMLInputElement
+
+  constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -13,14 +27,22 @@ class NameSection extends Component {
     }
   }
 
-  handleInputBlur = reset => e => {
+  public handleInputBlur = (reset: boolean) => (
+    e: ChangeEvent<HTMLInputElement>
+  ): void => {
     const {defaultName, onRuleRename, rule} = this.props
 
-    onRuleRename(rule.id, reset ? defaultName : e.target.value)
+    let ruleName: string
+    if (reset) {
+      ruleName = defaultName
+    } else {
+      ruleName = e.target.value
+    }
+    onRuleRename(rule.id, ruleName)
     this.setState({reset: false})
   }
 
-  handleKeyDown = e => {
+  public handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       this.inputRef.blur()
     }
@@ -30,15 +52,13 @@ class NameSection extends Component {
     }
   }
 
-  render() {
-    const {rule, defaultName} = this.props
+  public render() {
+    const {defaultName} = this.props
     const {reset} = this.state
 
     return (
       <div className="rule-section">
-        <h3 className="rule-section--heading">
-          {rule.id === DEFAULT_RULE_ID ? 'Name this Alert Rule' : 'Name'}
-        </h3>
+        <h3 className="rule-section--heading">{this.header}</h3>
         <div className="rule-section--body">
           <div className="rule-section--row rule-section--row-first rule-section--row-last">
             <input
@@ -55,14 +75,18 @@ class NameSection extends Component {
       </div>
     )
   }
-}
 
-const {func, string, shape} = PropTypes
+  private get header() {
+    const {
+      rule: {id},
+    } = this.props
 
-NameSection.propTypes = {
-  defaultName: string.isRequired,
-  onRuleRename: func.isRequired,
-  rule: shape({}).isRequired,
+    if (id === DEFAULT_RULE_ID) {
+      return 'Name this Alert Rule'
+    }
+
+    return 'Name'
+  }
 }
 
 export default NameSection
diff --git a/ui/src/kapacitor/components/Relative.js b/ui/src/kapacitor/components/Relative.tsx
similarity index 73%
rename from ui/src/kapacitor/components/Relative.js
rename to ui/src/kapacitor/components/Relative.tsx
index 6b483f01e..c6cb23cbf 100644
--- a/ui/src/kapacitor/components/Relative.js
+++ b/ui/src/kapacitor/components/Relative.tsx
@@ -1,14 +1,27 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {CHANGES, RELATIVE_OPERATORS, SHIFTS} from 'src/kapacitor/constants'
-import Dropdown from 'shared/components/Dropdown'
+import React, {SFC, ChangeEvent} from 'react'
 
-const mapToItems = (arr, type) => arr.map(text => ({text, type}))
+import {CHANGES, RELATIVE_OPERATORS, SHIFTS} from 'src/kapacitor/constants'
+import Dropdown from 'src/shared/components/Dropdown'
+
+import {AlertRule} from 'src/types'
+
+const mapToItems = (arr: string[], type: string) =>
+  arr.map(text => ({text, type}))
 const changes = mapToItems(CHANGES, 'change')
 const shifts = mapToItems(SHIFTS, 'shift')
 const operators = mapToItems(RELATIVE_OPERATORS, 'operator')
 
-const Relative = ({
+interface TypeItem {
+  type: string
+  text: string
+}
+interface Props {
+  onRuleTypeInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onDropdownChange: (item: TypeItem) => void
+  rule: AlertRule
+}
+
+const Relative: SFC<Props> = ({
   onRuleTypeInputChange,
   onDropdownChange,
   rule: {
@@ -46,7 +59,7 @@ const Relative = ({
         style={{width: '160px', marginLeft: '6px'}}
         type="text"
         name="lower"
-        spellCheck="false"
+        spellCheck={false}
         value={value}
         onChange={onRuleTypeInputChange}
         required={true}
@@ -56,19 +69,4 @@ const Relative = ({
   </div>
 )
 
-const {shape, string, func} = PropTypes
-
-Relative.propTypes = {
-  onRuleTypeInputChange: func.isRequired,
-  onDropdownChange: func.isRequired,
-  rule: shape({
-    values: shape({
-      change: string,
-      shift: string,
-      operator: string,
-      value: string,
-    }),
-  }),
-}
-
 export default Relative
diff --git a/ui/src/kapacitor/components/RuleHandlers.tsx b/ui/src/kapacitor/components/RuleHandlers.tsx
index 2f7396045..fba7a456c 100644
--- a/ui/src/kapacitor/components/RuleHandlers.tsx
+++ b/ui/src/kapacitor/components/RuleHandlers.tsx
@@ -26,7 +26,7 @@ interface Props {
   rule: AlertRule
   ruleActions: RuleActions
   handlersFromConfig: Handler[]
-  onGoToConfig: () => void
+  onGoToConfig: (configName: string) => void
   validationError: string
 }
 
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.tsx
similarity index 72%
rename from ui/src/kapacitor/components/RuleHeader.js
rename to ui/src/kapacitor/components/RuleHeader.tsx
index 9ecf4c2eb..16a9d913d 100644
--- a/ui/src/kapacitor/components/RuleHeader.js
+++ b/ui/src/kapacitor/components/RuleHeader.tsx
@@ -1,15 +1,24 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+
 import RuleHeaderSave from 'src/kapacitor/components/RuleHeaderSave'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {Source} from 'src/types'
+
+interface Props {
+  source: Source
+  onSave: () => void
+  validationError: string
+}
+
 @ErrorHandling
-class RuleHeader extends Component {
-  constructor(props) {
+class RuleHeader extends Component<Props> {
+  constructor(props: Props) {
     super(props)
   }
 
-  render() {
+  public render() {
     const {source, onSave, validationError} = this.props
 
     return (
@@ -29,12 +38,4 @@ class RuleHeader extends Component {
   }
 }
 
-const {func, shape, string} = PropTypes
-
-RuleHeader.propTypes = {
-  source: shape({}).isRequired,
-  onSave: func.isRequired,
-  validationError: string.isRequired,
-}
-
 export default RuleHeader
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js
deleted file mode 100644
index 5516eeec0..000000000
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactTooltip from 'react-tooltip'
-import SourceIndicator from 'shared/components/SourceIndicator'
-
-const RuleHeaderSave = ({onSave, validationError}) => (
-  <div className="page-header__right">
-    <SourceIndicator />
-    {validationError ? (
-      <button
-        className="btn btn-success btn-sm disabled"
-        data-for="save-kapacitor-tooltip"
-        data-tip={validationError}
-      >
-        Save Rule
-      </button>
-    ) : (
-      <button className="btn btn-success btn-sm" onClick={onSave}>
-        Save Rule
-      </button>
-    )}
-    <ReactTooltip
-      id="save-kapacitor-tooltip"
-      effect="solid"
-      html={true}
-      place="bottom"
-      class="influx-tooltip kapacitor-tooltip"
-    />
-  </div>
-)
-
-const {func, string} = PropTypes
-
-RuleHeaderSave.propTypes = {
-  onSave: func.isRequired,
-  validationError: string.isRequired,
-}
-
-export default RuleHeaderSave
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.tsx b/ui/src/kapacitor/components/RuleHeaderSave.tsx
new file mode 100644
index 000000000..b7036d1d5
--- /dev/null
+++ b/ui/src/kapacitor/components/RuleHeaderSave.tsx
@@ -0,0 +1,57 @@
+import React, {Component} from 'react'
+
+import ReactTooltip from 'react-tooltip'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {Source} from 'src/types'
+
+interface Props {
+  onSave: () => void
+  validationError: string
+  source: Source
+}
+
+@ErrorHandling
+class RuleHeaderSave extends Component<Props> {
+  public render() {
+    const {source} = this.props
+    return (
+      <div className="page-header__right">
+        <SourceIndicator sourceOverride={source} />
+        {this.saveRuleButton}
+        <ReactTooltip
+          id="save-kapacitor-tooltip"
+          effect="solid"
+          html={true}
+          place="bottom"
+          class="influx-tooltip kapacitor-tooltip"
+        />
+      </div>
+    )
+  }
+
+  private get saveRuleButton() {
+    const {onSave, validationError} = this.props
+    if (validationError) {
+      return (
+        <button
+          className="btn btn-success btn-sm disabled"
+          data-for="save-kapacitor-tooltip"
+          data-tip={validationError}
+        >
+          Save Rule
+        </button>
+      )
+    } else {
+      return (
+        <button className="btn btn-success btn-sm" onClick={onSave}>
+          Save Rule
+        </button>
+      )
+    }
+  }
+}
+
+export default RuleHeaderSave
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.tsx
similarity index 71%
rename from ui/src/kapacitor/components/RuleMessage.js
rename to ui/src/kapacitor/components/RuleMessage.tsx
index 1d871f00d..230e987a5 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.tsx
@@ -1,22 +1,24 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import React, {Component, ChangeEvent} from 'react'
 
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {AlertRule} from 'src/types'
+import {KapacitorRuleActions} from 'src/types/actions'
+
+interface Props {
+  rule: AlertRule
+  ruleActions: KapacitorRuleActions
+}
+
 @ErrorHandling
-class RuleMessage extends Component {
+class RuleMessage extends Component<Props> {
   constructor(props) {
     super(props)
   }
 
-  handleChangeMessage = e => {
-    const {ruleActions, rule} = this.props
-    ruleActions.updateMessage(rule.id, e.target.value)
-  }
-
-  render() {
+  public render() {
     const {rule, ruleActions} = this.props
 
     return (
@@ -35,15 +37,11 @@ class RuleMessage extends Component {
       </div>
     )
   }
-}
 
-const {func, shape} = PropTypes
-
-RuleMessage.propTypes = {
-  rule: shape().isRequired,
-  ruleActions: shape({
-    updateMessage: func.isRequired,
-  }).isRequired,
+  private handleChangeMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const {ruleActions, rule} = this.props
+    ruleActions.updateMessage(rule.id, e.target.value)
+  }
 }
 
 export default RuleMessage
diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.tsx
similarity index 77%
rename from ui/src/kapacitor/components/RuleMessageTemplates.js
rename to ui/src/kapacitor/components/RuleMessageTemplates.tsx
index 5f6c1a663..840ae73d8 100644
--- a/ui/src/kapacitor/components/RuleMessageTemplates.js
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+
 import _ from 'lodash'
 import ReactTooltip from 'react-tooltip'
 
@@ -8,19 +8,22 @@ import CodeData from 'src/kapacitor/components/CodeData'
 import {RULE_MESSAGE_TEMPLATES} from 'src/kapacitor/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {RuleMessage} from 'src/types/kapacitor'
+import {AlertRule} from 'src/types'
+
+interface Props {
+  rule: AlertRule
+  updateMessage: (id: string, message: string) => void
+}
+
 // needs to be React Component for CodeData click handler to work
 @ErrorHandling
-class RuleMessageTemplates extends Component {
+class RuleMessageTemplates extends Component<Props> {
   constructor(props) {
     super(props)
   }
 
-  handleClickTemplate = template => () => {
-    const {updateMessage, rule} = this.props
-    updateMessage(rule.id, `${rule.message} ${template.label}`)
-  }
-
-  render() {
+  public render() {
     return (
       <div className="rule-section--row rule-section--row-last">
         <p>Templates:</p>
@@ -41,13 +44,11 @@ class RuleMessageTemplates extends Component {
       </div>
     )
   }
-}
 
-const {func, shape} = PropTypes
-
-RuleMessageTemplates.propTypes = {
-  rule: shape().isRequired,
-  updateMessage: func.isRequired,
+  private handleClickTemplate = (template: RuleMessage) => () => {
+    const {updateMessage, rule} = this.props
+    updateMessage(rule.id, `${rule.message} ${template.label}`)
+  }
 }
 
 export default RuleMessageTemplates
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.tsx
similarity index 59%
rename from ui/src/kapacitor/components/RuleMessageText.js
rename to ui/src/kapacitor/components/RuleMessageText.tsx
index cc3dfb9b0..f7e0a787f 100644
--- a/ui/src/kapacitor/components/RuleMessageText.js
+++ b/ui/src/kapacitor/components/RuleMessageText.tsx
@@ -1,7 +1,13 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC, ChangeEvent} from 'react'
 
-const RuleMessageText = ({rule, updateMessage}) => (
+import {AlertRule} from 'src/types'
+
+interface Props {
+  rule: AlertRule
+  updateMessage: (e: ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const RuleMessageText: SFC<Props> = ({rule, updateMessage}) => (
   <div className="rule-builder--message">
     <textarea
       className="form-control input-sm form-malachite monotype"
@@ -13,11 +19,4 @@ const RuleMessageText = ({rule, updateMessage}) => (
   </div>
 )
 
-const {func, shape} = PropTypes
-
-RuleMessageText.propTypes = {
-  rule: shape().isRequired,
-  updateMessage: func.isRequired,
-}
-
 export default RuleMessageText
diff --git a/ui/src/kapacitor/components/Threshold.js b/ui/src/kapacitor/components/Threshold.js
deleted file mode 100644
index 1c3ba10a3..000000000
--- a/ui/src/kapacitor/components/Threshold.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {THRESHOLD_OPERATORS} from 'src/kapacitor/constants'
-import Dropdown from 'shared/components/Dropdown'
-import _ from 'lodash'
-
-const mapToItems = (arr, type) => arr.map(text => ({text, type}))
-const operators = mapToItems(THRESHOLD_OPERATORS, 'operator')
-const noopSubmit = e => e.preventDefault()
-const getField = ({fields}) => {
-  const alias = _.get(fields, ['0', 'alias'], false)
-  if (!alias) {
-    return _.get(fields, ['0', 'value'], 'Select a Time-Series')
-  }
-
-  return alias
-}
-
-const Threshold = ({
-  rule: {
-    values: {operator, value, rangeValue},
-  },
-  query,
-  onDropdownChange,
-  onRuleTypeInputChange,
-}) => (
-  <div className="rule-section--row rule-section--row-first rule-section--border-bottom">
-    <p>Send Alert where</p>
-    <span className="rule-builder--metric">{getField(query)}</span>
-    <p>is</p>
-    <Dropdown
-      className="dropdown-180"
-      menuClass="dropdown-malachite"
-      items={operators}
-      selected={operator}
-      onChoose={onDropdownChange}
-    />
-    <form style={{display: 'flex'}} onSubmit={noopSubmit}>
-      <input
-        className="form-control input-sm form-malachite monotype"
-        style={{width: '160px', marginLeft: '6px'}}
-        type="text"
-        name="lower"
-        spellCheck="false"
-        value={value}
-        onChange={onRuleTypeInputChange}
-        placeholder={
-          operator === 'inside range' || operator === 'outside range'
-            ? 'Lower'
-            : null
-        }
-      />
-      {(operator === 'inside range' || operator === 'outside range') && (
-        <input
-          className="form-control input-sm form-malachite monotype"
-          name="upper"
-          style={{width: '160px'}}
-          placeholder="Upper"
-          type="text"
-          spellCheck="false"
-          value={rangeValue}
-          onChange={onRuleTypeInputChange}
-        />
-      )}
-    </form>
-  </div>
-)
-
-const {shape, string, func} = PropTypes
-
-Threshold.propTypes = {
-  rule: shape({
-    values: shape({
-      operator: string,
-      rangeOperator: string,
-      value: string,
-      rangeValue: string,
-    }),
-  }),
-  onDropdownChange: func.isRequired,
-  onRuleTypeInputChange: func.isRequired,
-  query: shape({}).isRequired,
-}
-
-export default Threshold
diff --git a/ui/src/kapacitor/components/Threshold.tsx b/ui/src/kapacitor/components/Threshold.tsx
new file mode 100644
index 000000000..5ff6d801f
--- /dev/null
+++ b/ui/src/kapacitor/components/Threshold.tsx
@@ -0,0 +1,122 @@
+import React, {Component, FormEvent, ChangeEvent} from 'react'
+
+import {THRESHOLD_OPERATORS} from 'src/kapacitor/constants'
+import Dropdown from 'src/shared/components/Dropdown'
+import {getDeep} from 'src/utils/wrappers'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {AlertRule, QueryConfig} from 'src/types'
+
+interface TypeItem {
+  type: string
+  text: string
+}
+
+interface Props {
+  rule: AlertRule
+  onDropdownChange: (item: TypeItem) => void
+  onRuleTypeInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  query: QueryConfig
+}
+
+@ErrorHandling
+class Threshold extends Component<Props> {
+  public render() {
+    const {
+      rule: {
+        values: {operator, value},
+      },
+      query,
+      onDropdownChange,
+      onRuleTypeInputChange,
+    } = this.props
+
+    return (
+      <div className="rule-section--row rule-section--row-first rule-section--border-bottom">
+        <p>Send Alert where</p>
+        <span className="rule-builder--metric">{this.getField(query)}</span>
+        <p>is</p>
+        <Dropdown
+          className="dropdown-180"
+          menuClass="dropdown-malachite"
+          items={this.operators}
+          selected={operator}
+          onChoose={onDropdownChange}
+        />
+        <form style={{display: 'flex'}} onSubmit={this.noopSubmit}>
+          <input
+            className="form-control input-sm form-malachite monotype"
+            style={{width: '160px', marginLeft: '6px'}}
+            type="text"
+            name="lower"
+            spellCheck={false}
+            value={value}
+            onChange={onRuleTypeInputChange}
+            placeholder={this.firstInputPlaceholder}
+          />
+          {this.secondInput}
+        </form>
+      </div>
+    )
+  }
+
+  private get operators() {
+    const type = 'operator'
+    return THRESHOLD_OPERATORS.map(text => {
+      return {text, type}
+    })
+  }
+
+  private get isSecondInputRequired() {
+    const {rule} = this.props
+    const operator = getDeep<string>(rule, 'values.operator', '')
+
+    if (operator === 'inside range' || operator === 'outside range') {
+      return true
+    }
+    return false
+  }
+
+  private get firstInputPlaceholder() {
+    if (this.isSecondInputRequired) {
+      return 'lower'
+    }
+
+    return null
+  }
+
+  private get secondInput() {
+    const {rule, onRuleTypeInputChange} = this.props
+
+    const rangeValue = getDeep<string>(rule, 'values.rangeValue', '')
+
+    if (this.isSecondInputRequired) {
+      return (
+        <input
+          className="form-control input-sm form-malachite monotype"
+          name="upper"
+          style={{width: '160px'}}
+          placeholder="Upper"
+          type="text"
+          spellCheck={false}
+          value={rangeValue}
+          onChange={onRuleTypeInputChange}
+        />
+      )
+    }
+  }
+
+  private noopSubmit = (e: FormEvent<HTMLElement>) => e.preventDefault()
+
+  private getField = ({fields}: QueryConfig): string => {
+    const alias = getDeep<string>(fields, '0.alias', '')
+
+    if (!alias) {
+      return getDeep<string>(fields, '0.value', 'Select a Time-Series')
+    }
+
+    return alias
+  }
+}
+
+export default Threshold
diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.tsx
similarity index 75%
rename from ui/src/kapacitor/components/ValuesSection.js
rename to ui/src/kapacitor/components/ValuesSection.tsx
index a495fa05a..31b180972 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
+import React, {SFC, ChangeEvent} from 'react'
 import _ from 'lodash'
 
 import Deadman from 'src/kapacitor/components/Deadman'
@@ -9,7 +7,16 @@ import Relative from 'src/kapacitor/components/Relative'
 import DataSection from 'src/kapacitor/components/DataSection'
 import RuleGraph from 'src/kapacitor/components/RuleGraph'
 
-import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
+import {
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Tabs,
+} from 'src/shared/components/Tabs'
+
+import {AlertRule, QueryConfig, Source, TimeRange} from 'src/types'
+import {KapacitorQueryConfigActions} from 'src/types/actions'
 
 const TABS = ['Threshold', 'Relative', 'Deadman']
 
@@ -22,13 +29,36 @@ const handleChooseTrigger = (rule, onChooseTrigger) => triggerIndex => {
 const initialIndex = rule => TABS.indexOf(_.startCase(rule.trigger))
 const isDeadman = rule => rule.trigger === 'deadman'
 
-const ValuesSection = ({
+interface Item {
+  text: string
+}
+
+interface TypeItem extends Item {
+  type: string
+}
+
+interface Props {
+  rule: AlertRule
+  onChooseTrigger: () => void
+  onUpdateValues: () => void
+  query: QueryConfig
+  onDeadmanChange: (item: Item) => void
+  onRuleTypeDropdownChange: (item: TypeItem) => void
+  onRuleTypeInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onAddEvery: (frequency: string) => void
+  onRemoveEvery: () => void
+  timeRange: TimeRange
+  queryConfigActions: KapacitorQueryConfigActions
+  source: Source
+  onChooseTimeRange: (timeRange: TimeRange) => void
+}
+
+const ValuesSection: SFC<Props> = ({
   rule,
   query,
   source,
   timeRange,
   onAddEvery,
-  onRemoveEvery,
   onChooseTrigger,
   onDeadmanChange,
   onChooseTimeRange,
@@ -58,7 +88,6 @@ const ValuesSection = ({
             isKapacitorRule={true}
             actions={queryConfigActions}
             onAddEvery={onAddEvery}
-            onRemoveEvery={onRemoveEvery}
             isDeadman={isDeadman(rule)}
           />
         </div>
@@ -97,24 +126,4 @@ const ValuesSection = ({
   </div>
 )
 
-const {shape, string, func} = PropTypes
-
-ValuesSection.propTypes = {
-  rule: shape({
-    id: string,
-  }).isRequired,
-  onChooseTrigger: func.isRequired,
-  onUpdateValues: func.isRequired,
-  query: shape({}).isRequired,
-  onDeadmanChange: func.isRequired,
-  onRuleTypeDropdownChange: func.isRequired,
-  onRuleTypeInputChange: func.isRequired,
-  onAddEvery: func.isRequired,
-  onRemoveEvery: func.isRequired,
-  timeRange: shape({}).isRequired,
-  queryConfigActions: shape({}).isRequired,
-  source: shape({}).isRequired,
-  onChooseTimeRange: func.isRequired,
-}
-
 export default ValuesSection
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.tsx
similarity index 64%
rename from ui/src/kapacitor/containers/KapacitorRulePage.js
rename to ui/src/kapacitor/containers/KapacitorRulePage.tsx
index 78fa9db17..607b80d76 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.tsx
@@ -1,26 +1,59 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import _ from 'lodash'
+import {InjectedRouter} from 'react-router'
 import {connect} from 'react-redux'
 
 import * as kapacitorRuleActionCreators from 'src/kapacitor/actions/view'
 import * as kapacitorQueryConfigActionCreators from 'src/kapacitor/actions/queryConfigs'
 
 import {bindActionCreators} from 'redux'
-import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index'
+import {getActiveKapacitor, getKapacitorConfig} from 'src/shared/apis/index'
 import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
 import parseHandlersFromConfig from 'src/shared/parsing/parseHandlersFromConfig'
-import {notify as notifyAction} from 'shared/actions/notifications'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 import {
   notifyKapacitorCreateFailed,
   notifyCouldNotFindKapacitor,
-} from 'shared/copy/notifications'
+} from 'src/shared/copy/notifications'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {
+  Source,
+  Notification,
+  AlertRule,
+  QueryConfig,
+  Kapacitor,
+} from 'src/types'
+import {
+  KapacitorQueryConfigActions,
+  KapacitorRuleActions,
+} from 'src/types/actions'
+
+interface Params {
+  ruleID: string
+}
+
+interface Props {
+  source: Source
+  notify: (notification: Notification) => void
+  rules: AlertRule[]
+  queryConfigs: QueryConfig[]
+  ruleActions: KapacitorRuleActions
+  queryConfigActions: KapacitorQueryConfigActions
+  params: Params
+  router: InjectedRouter
+}
+
+interface State {
+  handlersFromConfig: any[]
+  kapacitor: Kapacitor | {}
+}
+
 @ErrorHandling
-class KapacitorRulePage extends Component {
-  constructor(props) {
+class KapacitorRulePage extends Component<Props, State> {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -29,7 +62,7 @@ class KapacitorRulePage extends Component {
     }
   }
 
-  async componentDidMount() {
+  public async componentDidMount() {
     const {params, source, ruleActions, notify} = this.props
 
     if (params.ruleID === 'new') {
@@ -54,9 +87,8 @@ class KapacitorRulePage extends Component {
     }
   }
 
-  render() {
+  public render() {
     const {
-      rules,
       params,
       source,
       router,
@@ -65,8 +97,7 @@ class KapacitorRulePage extends Component {
       queryConfigActions,
     } = this.props
     const {handlersFromConfig, kapacitor} = this.state
-    const rule =
-      params.ruleID === 'new' ? rules[DEFAULT_RULE_ID] : rules[params.ruleID]
+    const rule = this.rule
     const query = rule && queryConfigs[rule.queryID]
 
     if (!query) {
@@ -84,41 +115,26 @@ class KapacitorRulePage extends Component {
         ruleID={params.ruleID}
         router={router}
         kapacitor={kapacitor}
-        configLink={`/sources/${source.id}/kapacitors/${kapacitor.id}/edit`}
+        configLink={`/sources/${source.id}/kapacitors/${this.kapacitorID}/edit`}
       />
     )
   }
-}
 
-const {func, shape, string} = PropTypes
+  private get kapacitorID(): string {
+    const {kapacitor} = this.state
+    return _.get(kapacitor, 'id')
+  }
 
-KapacitorRulePage.propTypes = {
-  source: shape({
-    links: shape({
-      proxy: string.isRequired,
-      self: string.isRequired,
-    }),
-  }),
-  notify: func,
-  rules: shape({}).isRequired,
-  queryConfigs: shape({}).isRequired,
-  ruleActions: shape({
-    loadDefaultRule: func.isRequired,
-    fetchRule: func.isRequired,
-    chooseTrigger: func.isRequired,
-    addEvery: func.isRequired,
-    removeEvery: func.isRequired,
-    updateRuleValues: func.isRequired,
-    updateMessage: func.isRequired,
-    updateRuleName: func.isRequired,
-  }).isRequired,
-  queryConfigActions: shape({}).isRequired,
-  params: shape({
-    ruleID: string,
-  }).isRequired,
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
+  private get rule(): AlertRule {
+    const {params, rules} = this.props
+    const ruleID = _.get(params, 'ruleID')
+
+    if (ruleID === 'new') {
+      return rules[DEFAULT_RULE_ID]
+    }
+
+    return rules[params.ruleID]
+  }
 }
 
 const mapStateToProps = ({rules, kapacitorQueryConfigs: queryConfigs}) => ({
diff --git a/ui/src/shared/components/Tabs.tsx b/ui/src/shared/components/Tabs.tsx
index 2945d045e..26d460876 100644
--- a/ui/src/shared/components/Tabs.tsx
+++ b/ui/src/shared/components/Tabs.tsx
@@ -48,7 +48,7 @@ interface TabListProps {
   activeIndex?: number
   onActivate?: (index: number) => void
   isKapacitorTabs?: string
-  customClass: string
+  customClass?: string
 }
 
 export const TabList: SFC<TabListProps> = ({
@@ -97,7 +97,7 @@ TabList.defaultProps = {
 interface TabPanelsProps {
   children: JSX.Element[] | JSX.Element
   activeIndex?: number
-  customClass: string
+  customClass?: string
 }
 
 export const TabPanels: SFC<TabPanelsProps> = ({
@@ -120,7 +120,7 @@ export const TabPanel: SFC<TabPanelProps> = ({children}) => (
 interface TabsProps {
   children: JSX.Element[] | JSX.Element
   onSelect?: (activeIndex: number) => void
-  tabContentsClass: string
+  tabContentsClass?: string
   tabsClass?: string
   initialIndex?: number
 }
diff --git a/ui/src/types/actions.ts b/ui/src/types/actions.ts
index 34a44f84f..a0ad38e95 100644
--- a/ui/src/types/actions.ts
+++ b/ui/src/types/actions.ts
@@ -1,4 +1,8 @@
 import * as kapacitorQueryConfigActions from 'src/kapacitor/actions/queryConfigs'
+import * as kapacitorRuleActionCreators from 'src/kapacitor/actions/view'
+
 type KapacitorQueryConfigActions = typeof kapacitorQueryConfigActions
+type KapacitorRuleActions = typeof kapacitorRuleActionCreators
 
 export {KapacitorQueryConfigActions}
+export {KapacitorRuleActions}
diff --git a/ui/src/types/kapacitor.ts b/ui/src/types/kapacitor.ts
index 653d54906..b4a518587 100644
--- a/ui/src/types/kapacitor.ts
+++ b/ui/src/types/kapacitor.ts
@@ -32,6 +32,7 @@ export interface AlertRule {
   error: string
   created: string
   modified: string
+  queryID?: string
   'last-enabled'?: string
 }
 
@@ -224,7 +225,7 @@ export interface RuleMessageTemplate {
   time: RuleMessage
 }
 
-interface RuleMessage {
+export interface RuleMessage {
   label: string
   text: string
 }

From 3e9de95d3f0b55e86611f4561fa7fd32496e444f Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 09:17:12 -0700
Subject: [PATCH 089/100] Remove unused "query" template type

---
 chronograf.go       | 2 +-
 server/templates.go | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/chronograf.go b/chronograf.go
index 1fed8dbbb..b26c3bea0 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -177,7 +177,7 @@ type TemplateID string
 type Template struct {
 	TemplateVar
 	ID    TemplateID     `json:"id"`              // ID is the unique ID associated with this template
-	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, query, measurements, databases, map, influxql
+	Type  string         `json:"type"`            // Type can be fieldKeys, tagKeys, tagValues, CSV, constant, measurements, databases, map, influxql
 	Label string         `json:"label"`           // Label is a user-facing description of the Template
 	Query *TemplateQuery `json:"query,omitempty"` // Query is used to generate the choices for a template
 }
diff --git a/server/templates.go b/server/templates.go
index 41109b35d..6f158ac3c 100644
--- a/server/templates.go
+++ b/server/templates.go
@@ -15,7 +15,7 @@ func ValidTemplateRequest(template *chronograf.Template) error {
 	switch template.Type {
 	default:
 		return fmt.Errorf("Unknown template type %s", template.Type)
-	case "query", "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases", "map", "influxql":
+	case "constant", "csv", "fieldKeys", "tagKeys", "tagValues", "measurements", "databases", "map", "influxql":
 	}
 
 	for _, v := range template.Values {

From 96b067e9f10f5eb4805e861d3c3d8ab521574a36 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 20 Jun 2018 12:57:55 -0400
Subject: [PATCH 090/100] Remove duplicate before/after filter and range checks

Removes component update checks for filter and range.
ExpressionNode now renders with a check for filter and range and
looks at the next func node index to determine how much script to pass
to YieldFuncNode. FuncNodes also utilize a isYielding and
isYieldingInScript to determine how to toggle yields.
---
 ui/src/flux/components/ExpressionNode.tsx | 99 +++++------------------
 ui/src/flux/components/FuncArg.tsx        |  4 +-
 ui/src/flux/components/FuncArgInput.tsx   |  4 +-
 ui/src/flux/components/FuncArgs.tsx       |  4 +-
 ui/src/flux/components/FuncNode.tsx       |  6 +-
 ui/src/flux/containers/FluxPage.tsx       |  2 +-
 ui/src/types/flux.ts                      |  2 +-
 7 files changed, 34 insertions(+), 87 deletions(-)

diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
index b02fe494a..b58232698 100644
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/ui/src/flux/components/ExpressionNode.tsx
@@ -1,12 +1,12 @@
 import React, {PureComponent, Fragment} from 'react'
-import _ from 'lodash'
 
 import {FluxContext} from 'src/flux/containers/FluxPage'
 import FuncSelector from 'src/flux/components/FuncSelector'
 import FuncNode from 'src/flux/components/FuncNode'
 import YieldFuncNode from 'src/flux/components/YieldFuncNode'
+import {getDeep} from 'src/utils/wrappers'
 
-import {Func} from 'src/types/flux'
+import {Func, Context} from 'src/types/flux'
 
 interface Props {
   funcNames: any[]
@@ -18,12 +18,10 @@ interface Props {
   onDeleteBody: (bodyID: string) => void
 }
 
-interface YieldToggles {
-  [x: number]: boolean
-}
-
 interface State {
-  nonYieldableIndexesToggled: YieldToggles
+  nonYieldableIndexesToggled: {
+    [x: number]: boolean
+  }
 }
 
 // an Expression is a group of one or more functions
@@ -32,18 +30,7 @@ class ExpressionNode extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      nonYieldableIndexesToggled: this.nonYieldableNodesFromScript,
-    }
-  }
-
-  public componentDidUpdate(prevProps) {
-    const {funcs: prevFuncs} = prevProps
-    const {funcs} = this.props
-
-    if (!_.isEqual(prevFuncs, funcs)) {
-      this.setState({
-        nonYieldableIndexesToggled: this.nonYieldableNodesFromScript,
-      })
+      nonYieldableIndexesToggled: {},
     }
   }
 
@@ -70,13 +57,17 @@ class ExpressionNode extends PureComponent<Props, State> {
           service,
           data,
           scriptUpToYield,
-        }) => {
+        }: Context) => {
           let isAfterRange = false
           let isAfterFilter = false
 
           return (
             <>
               {funcs.map((func, i) => {
+                if (func.name === 'yield') {
+                  return null
+                }
+
                 if (func.name === 'range') {
                   isAfterRange = true
                 }
@@ -85,22 +76,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                   isAfterFilter = true
                 }
 
-                if (func.name === 'yield') {
-                  const script = scriptUpToYield(bodyID, declarationID, i, true)
-
-                  return (
-                    <YieldFuncNode
-                      index={i}
-                      key={i}
-                      func={func}
-                      data={data}
-                      script={script}
-                      bodyID={bodyID}
-                      service={service}
-                      declarationID={declarationID}
-                    />
-                  )
-                }
+                const isYieldable = isAfterFilter && isAfterRange
 
                 const funcNode = (
                   <FuncNode
@@ -113,7 +89,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                     onChangeArg={onChangeArg}
                     onDelete={onDeleteFuncNode}
                     onToggleYield={onToggleYield}
-                    isYieldable={isAfterFilter && isAfterRange}
+                    isYieldable={isYieldable}
                     isYielding={this.isBeforeYielding(i)}
                     isYieldedInScript={this.isYieldNodeIndex(i + 1)}
                     declarationID={declarationID}
@@ -125,14 +101,14 @@ class ExpressionNode extends PureComponent<Props, State> {
                 )
 
                 if (
-                  nonYieldableIndexesToggled[i] &&
-                  !this.isYieldNodeIndex(i + 1)
+                  nonYieldableIndexesToggled[i] ||
+                  this.isYieldNodeIndex(i + 1)
                 ) {
-                  const script = scriptUpToYield(
+                  const script: string = scriptUpToYield(
                     bodyID,
                     declarationID,
                     i,
-                    false
+                    isYieldable
                   )
 
                   return (
@@ -150,6 +126,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                     </Fragment>
                   )
                 }
+
                 return funcNode
               })}
               <FuncSelector
@@ -176,47 +153,15 @@ class ExpressionNode extends PureComponent<Props, State> {
     return this.isYieldNodeIndex(funcIndex + 1)
   }
 
-  private isYieldNodeIndex(funcIndex) {
+  private isYieldNodeIndex(funcIndex: number): boolean {
     const {funcs} = this.props
-    const nextFunc = _.get(funcs, `${funcIndex}`, null)
+    const funcName = getDeep<string>(funcs, `${funcIndex}.name`, '')
 
-    if (nextFunc && nextFunc.name === 'yield') {
-      return true
-    }
-
-    return false
-  }
-
-  private get nonYieldableNodesFromScript(): YieldToggles {
-    const {funcs} = this.props
-    let isBeforeFilter = true
-    let isBeforeRange = true
-
-    return _.reduce(
-      funcs,
-      (acc: YieldToggles, f, index) => {
-        if (f.name === 'range') {
-          isBeforeRange = false
-        }
-
-        if (f.name === 'filter') {
-          isBeforeFilter = false
-        }
-
-        if (isBeforeFilter || isBeforeRange) {
-          if (this.isYieldNodeIndex(index + 1)) {
-            return {...acc, [index]: true}
-          }
-        }
-
-        return acc
-      },
-      {}
-    )
+    return funcName === 'yield'
   }
 
   // if funcNode is not yieldable, add last before yield()
-  private handleToggleYieldWithLast = (funcNodeIndex: number) => {
+  private handleToggleYieldWithLast = (funcNodeIndex: number): void => {
     this.setState(({nonYieldableIndexesToggled}) => {
       const isFuncYieldToggled = !!nonYieldableIndexesToggled[funcNodeIndex]
 
diff --git a/ui/src/flux/components/FuncArg.tsx b/ui/src/flux/components/FuncArg.tsx
index 06eb8f2fe..b02c9e4f1 100644
--- a/ui/src/flux/components/FuncArg.tsx
+++ b/ui/src/flux/components/FuncArg.tsx
@@ -8,7 +8,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import FromDatabaseDropdown from 'src/flux/components/FromDatabaseDropdown'
 
 import {funcNames, argTypes} from 'src/flux/constants'
-import {OnChangeArg, Arg} from 'src/types/flux'
+import {OnChangeArg, Arg, OnGenerateScript} from 'src/types/flux'
 import {Service} from 'src/types'
 
 interface Props {
@@ -22,7 +22,7 @@ interface Props {
   bodyID: string
   declarationID: string
   onChangeArg: OnChangeArg
-  onGenerateScript: () => void
+  onGenerateScript: OnGenerateScript
 }
 
 @ErrorHandling
diff --git a/ui/src/flux/components/FuncArgInput.tsx b/ui/src/flux/components/FuncArgInput.tsx
index eb6ce7622..e649e7c2e 100644
--- a/ui/src/flux/components/FuncArgInput.tsx
+++ b/ui/src/flux/components/FuncArgInput.tsx
@@ -1,6 +1,6 @@
 import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {OnChangeArg} from 'src/types/flux'
+import {OnChangeArg, OnGenerateScript} from 'src/types/flux'
 
 interface Props {
   funcID: string
@@ -10,7 +10,7 @@ interface Props {
   bodyID: string
   declarationID: string
   onChangeArg: OnChangeArg
-  onGenerateScript: () => void
+  onGenerateScript: OnGenerateScript
   autoFocus?: boolean
 }
 
diff --git a/ui/src/flux/components/FuncArgs.tsx b/ui/src/flux/components/FuncArgs.tsx
index e01aca54a..bcc72c9be 100644
--- a/ui/src/flux/components/FuncArgs.tsx
+++ b/ui/src/flux/components/FuncArgs.tsx
@@ -2,7 +2,7 @@ import React, {PureComponent, ReactElement, MouseEvent} from 'react'
 import FuncArg from 'src/flux/components/FuncArg'
 import {OnChangeArg} from 'src/types/flux'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {Func} from 'src/types/flux'
+import {Func, OnGenerateScript} from 'src/types/flux'
 import {funcNames} from 'src/flux/constants'
 import JoinArgs from 'src/flux/components/JoinArgs'
 import FilterArgs from 'src/flux/components/FilterArgs'
@@ -15,7 +15,7 @@ interface Props {
   bodyID: string
   onChangeArg: OnChangeArg
   declarationID: string
-  onGenerateScript: () => void
+  onGenerateScript: OnGenerateScript
   declarationsFromBody: string[]
   onStopPropagation: (e: MouseEvent<HTMLElement>) => void
 }
diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index e116dd249..fc2607577 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -6,6 +6,7 @@ import BodyDelete from 'src/flux/components/BodyDelete'
 import FuncArgs from 'src/flux/components/FuncArgs'
 import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
 import {
+  OnGenerateScript,
   OnDeleteFuncNode,
   OnChangeArg,
   OnToggleYield,
@@ -24,7 +25,7 @@ interface Props {
   onDelete: OnDeleteFuncNode
   onToggleYield: OnToggleYield
   onChangeArg: OnChangeArg
-  onGenerateScript: () => void
+  onGenerateScript: OnGenerateScript
   onToggleYieldWithLast: (funcNodeIndex: number) => void
   declarationsFromBody: string[]
   isYielding: boolean
@@ -184,10 +185,11 @@ export default class FuncNode extends PureComponent<Props, State> {
       bodyID,
       declarationID,
       onToggleYieldWithLast,
+      isYieldable,
       isYieldedInScript,
     } = this.props
 
-    if (isYieldedInScript) {
+    if (isYieldedInScript || isYieldable) {
       onToggleYield(bodyID, declarationID, index)
     } else {
       onToggleYieldWithLast(index)
diff --git a/ui/src/flux/containers/FluxPage.tsx b/ui/src/flux/containers/FluxPage.tsx
index 24be29632..59b57431a 100644
--- a/ui/src/flux/containers/FluxPage.tsx
+++ b/ui/src/flux/containers/FluxPage.tsx
@@ -344,7 +344,7 @@ export class FluxPage extends PureComponent<Props, State> {
     declarationID: string,
     funcNodeIndex: number,
     isYieldable: boolean
-  ) => {
+  ): string => {
     const {body: bodies} = this.state
 
     const bodyIndex = bodies.findIndex(b => b.id === bodyID)
diff --git a/ui/src/types/flux.ts b/ui/src/types/flux.ts
index ccfae353f..73250b3f3 100644
--- a/ui/src/types/flux.ts
+++ b/ui/src/types/flux.ts
@@ -12,7 +12,7 @@ export type OnToggleYield = (
   declarationID: string,
   funcNodeIndex: number
 ) => void
-export type OnGenerateScript = (script: string) => void
+export type OnGenerateScript = () => void
 export type OnChangeScript = (script: string) => void
 export type OnSubmitScript = () => void
 export type ScriptUpToYield = (

From 666cbcc0a619a2feb24f33d5b91498e204f3515f Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 10:02:33 -0700
Subject: [PATCH 091/100] Access properties more safely

---
 ui/src/dashboards/actions/index.ts                   |  4 +++-
 ui/src/shared/parsing/showSeries.ts                  | 12 ++++++------
 .../tempVars/components/MetaQueryTemplateBuilder.tsx |  3 ++-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts
index 051a6659b..4fd8fd798 100644
--- a/ui/src/dashboards/actions/index.ts
+++ b/ui/src/dashboards/actions/index.ts
@@ -630,7 +630,9 @@ export const hydrateTempVarValuesAsync = (
     )
     const templates: Template[] = dashboard.templates
     const queries = templates
-      .filter(template => !!template.query.influxql)
+      .filter(
+        template => getDeep<string>(template, 'query.influxql', '') !== ''
+      )
       .map(async template => {
         const query = makeQueryForTemplate(template.query)
         const response = await proxy({source: source.links.proxy, query})
diff --git a/ui/src/shared/parsing/showSeries.ts b/ui/src/shared/parsing/showSeries.ts
index 3cad741e0..0ebd1436a 100644
--- a/ui/src/shared/parsing/showSeries.ts
+++ b/ui/src/shared/parsing/showSeries.ts
@@ -1,3 +1,5 @@
+import {getDeep} from 'src/utils/wrappers'
+
 interface ParseShowSeriesResponse {
   errors: string[]
   series: string[]
@@ -10,17 +12,15 @@ const parseShowSeries = (response): ParseShowSeriesResponse => {
     return {errors: [results.error], series: []}
   }
 
-  const series = results.series[0]
+  const seriesValues = getDeep<string[]>(results, 'series.0.values', [])
 
-  if (!series.values) {
+  if (!seriesValues.length) {
     return {errors: [], series: []}
   }
 
-  const seriesValues = series.values.map(s => {
-    return s[0]
-  })
+  const series = seriesValues.map(s => s[0])
 
-  return {errors: [], series: seriesValues}
+  return {series, errors: []}
 }
 
 export default parseShowSeries
diff --git a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
index c21472bd5..514b2459d 100644
--- a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
@@ -5,6 +5,7 @@ import {proxy} from 'src/utils/queryUrlGenerator'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import TemplateMetaQueryPreview from 'src/tempVars/components/TemplateMetaQueryPreview'
 import {parseMetaQuery, isInvalidMetaQuery} from 'src/tempVars/utils/parsing'
+import {getDeep} from 'src/utils/wrappers'
 
 import {
   TemplateBuilderProps,
@@ -39,7 +40,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
   constructor(props) {
     super(props)
 
-    const metaQuery = _.get(props.template, 'query.influxql', '')
+    const metaQuery = getDeep<string>(props.template, 'query.influxql', '')
 
     this.state = {
       metaQuery,

From bfce6b4d9cd4a8b4c28f87dbc015a88857f37089 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 10:03:18 -0700
Subject: [PATCH 092/100] Type MetaQueryTemplateBuilder constructor props

---
 ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
index 514b2459d..6fdc42100 100644
--- a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
@@ -37,7 +37,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
     this.setState({metaQuery: metaQueryInput}, this.executeQuery)
   }, DEBOUNCE_DELAY)
 
-  constructor(props) {
+  constructor(props: TemplateBuilderProps) {
     super(props)
 
     const metaQuery = getDeep<string>(props.template, 'query.influxql', '')

From 87248dbb4279fab16eb46faf79f47a182592d27e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:37:57 -0700
Subject: [PATCH 093/100] Remove center render prop from PageHeader

Only one instance of use, not worth the added complexity
---
 ui/src/shared/components/PageHeader.tsx | 10 ----------
 ui/src/style/layout/page-header.scss    |  9 ---------
 2 files changed, 19 deletions(-)

diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 0edea5d82..eff5dfd80 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -7,7 +7,6 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 interface Props {
   title?: string
   renderTitle?: () => ReactElement<any>
-  renderCenter?: () => ReactElement<any>
   renderOptions?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
@@ -26,7 +25,6 @@ class PageHeader extends Component<Props> {
       <div className={this.className}>
         <div className="page-header--container">
           <div className="page-header--left">{this.renderLeft}</div>
-          {this.renderCenter}
           <div className="page-header--right">
             {this.sourceIndicator}
             {this.renderRight}
@@ -60,14 +58,6 @@ class PageHeader extends Component<Props> {
     return renderTitle()
   }
 
-  private get renderCenter(): JSX.Element {
-    const {renderCenter} = this.props
-
-    if (renderCenter) {
-      return <div className="page-header--center">{renderCenter()}</div>
-    }
-  }
-
   private get renderRight(): JSX.Element {
     const {renderOptions} = this.props
 
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 6c8f56815..dc22b0aa7 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -21,8 +21,6 @@ $page-header-weight: 400 !important;
 }
 
 .page-header--container {
-  position: relative;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -38,7 +36,6 @@ $page-header-weight: 400 !important;
 
 // Left, Center, and Right pieces of the page header
 .page-header--left,
-.page-header--center,
 .page-header--right {
   display: flex;
   align-items: center;
@@ -59,12 +56,6 @@ $page-header-weight: 400 !important;
     }
   }
 }
-.page-header--center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 
 // Intended to be a <h1>
 .page-header--title {

From cb1204b44c367f602dd0879854321e5594068f1d Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:38:23 -0700
Subject: [PATCH 094/100] Rename prop to "RenderPageControls"

---
 ui/src/alerts/containers/AlertsApp.tsx        |  4 +--
 .../dashboards/components/DashboardHeader.tsx |  8 ++---
 .../data_explorer/containers/DataExplorer.tsx |  4 +--
 ui/src/flux/components/FluxHeader.tsx         |  4 +--
 ui/src/hosts/containers/HostsPage.js          |  4 +--
 ui/src/kapacitor/components/KapacitorRule.js  |  4 +--
 .../kapacitor/components/TickscriptHeader.tsx | 33 ++++++++++---------
 .../containers/KapacitorRulesPage.tsx         |  4 +--
 ui/src/logs/components/LogViewerHeader.tsx    |  4 +--
 ui/src/shared/components/PageHeader.tsx       |  8 ++---
 ui/src/status/containers/StatusPage.js        |  4 +--
 11 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index a4ac349a3..1a6b22548 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -97,7 +97,7 @@ class AlertsApp extends PureComponent<Props, State> {
       <div className="page alert-history-page">
         <PageHeader
           title="Alert History"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -111,7 +111,7 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {timeRange} = this.state
 
     return (
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 81759b6ff..4f1c76413 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -52,14 +52,14 @@ class DashboardHeader extends Component<Props> {
       <PageHeader
         fullWidth={true}
         sourceIndicator={true}
-        renderTitle={this.title}
-        renderOptions={this.options}
+        renderTitle={this.renderPageTitle}
+        renderPageControls={this.renderPageControls}
         inPresentationMode={isHidden}
       />
     )
   }
 
-  private title = (): JSX.Element => {
+  private renderPageTitle = (): JSX.Element => {
     return (
       <>
         {this.dashboardSwitcher}
@@ -68,7 +68,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private options = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {
       handleChooseAutoRefresh,
       onManualRefresh,
diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index 328bb45dd..0ffc02c85 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@@ -119,7 +119,7 @@ export class DataExplorer extends PureComponent<Props, State> {
         <PageHeader
           title="Data Explorer"
           fullWidth={true}
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <ResizeContainer
@@ -186,7 +186,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     return buildRawText(this.activeQuery, timeRange)
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {
       timeRange,
       autoRefresh,
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index 5ec4b569c..b9f381efd 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -22,12 +22,12 @@ class FluxHeader extends PureComponent<Props> {
       <PageHeader
         title="Flux Editor"
         fullWidth={true}
-        renderOptions={this.renderOptions}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
 
-  private renderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     return (
       <button onClick={this.overlay} className="btn btn-sm btn-default">
         Edit Connection
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index e0ef33d7c..ec18e0129 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/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"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -137,7 +137,7 @@ export class HostsPage extends Component {
     )
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     const {autoRefresh, onChooseAutoRefresh, onManualRefresh} = this.props
 
     return (
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index 4c983c5f9..e658319e8 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -167,7 +167,7 @@ class KapacitorRule extends Component {
     ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     return (
       <RuleHeaderSave
         onSave={this.handleSave}
@@ -192,7 +192,7 @@ class KapacitorRule extends Component {
       <div className="page">
         <PageHeader
           title="Alert Rule Builder"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index e088d1827..614f873be 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -23,30 +23,31 @@ class TickscriptHeader extends PureComponent<Props> {
         title="TICKscript Editor"
         fullWidth={true}
         sourceIndicator={true}
-        renderCenter={this.logsToggle}
-        renderOptions={this.saveAndExit}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
 
-  private logsToggle = (): JSX.Element => {
-    const {areLogsEnabled, areLogsVisible, onToggleLogsVisibility} = this.props
-
-    return (
-      <LogsToggle
-        areLogsEnabled={areLogsEnabled}
-        areLogsVisible={areLogsVisible}
-        onToggleLogsVisibility={onToggleLogsVisibility}
-      />
-    )
-  }
-
-  private saveAndExit = (): JSX.Element => {
-    const {task, onSave, onExit, unsavedChanges, isNewTickscript} = this.props
+  private renderPageControls = (): JSX.Element => {
+    const {
+      task,
+      onSave,
+      onExit,
+      unsavedChanges,
+      isNewTickscript,
+      areLogsEnabled,
+      areLogsVisible,
+      onToggleLogsVisibility,
+    } = this.props
 
     if (unsavedChanges) {
       return (
         <>
+          <LogsToggle
+            areLogsEnabled={areLogsEnabled}
+            areLogsVisible={areLogsVisible}
+            onToggleLogsVisibility={onToggleLogsVisibility}
+          />
           <TickscriptSave
             task={task}
             onSave={onSave}
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 4ac316d47..1d602440a 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -91,7 +91,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
       title="Manage Tasks"
-      renderOptions={renderHeaderOptions}
+      renderPageControls={renderPageControls}
       sourceIndicator={true}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
@@ -104,7 +104,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
-const renderHeaderOptions = (): JSX.Element => {
+const renderPageControls = (): JSX.Element => {
   return (
     <QuestionMarkTooltip
       tipID="manage-tasks--tooltip"
diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index 8713c2504..fa0706d1d 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -33,7 +33,7 @@ class LogViewerHeader extends PureComponent<Props> {
       <PageHeader
         renderTitle={this.renderHeaderTitle}
         fullWidth={true}
-        renderOptions={this.renderHeaderOptions}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
@@ -47,7 +47,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {timeRange} = this.props
 
     return (
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index eff5dfd80..9b11b327d 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -7,7 +7,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 interface Props {
   title?: string
   renderTitle?: () => ReactElement<any>
-  renderOptions?: () => ReactElement<any>
+  renderPageControls?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
   inPresentationMode?: boolean
@@ -59,13 +59,13 @@ class PageHeader extends Component<Props> {
   }
 
   private get renderRight(): JSX.Element {
-    const {renderOptions} = this.props
+    const {renderPageControls} = this.props
 
-    if (!renderOptions) {
+    if (!renderPageControls) {
       return
     }
 
-    return renderOptions()
+    return renderPageControls()
   }
 
   private get className(): string {
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index ce5fecbcc..02c528dfb 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.js
@@ -61,7 +61,7 @@ class StatusPage extends Component {
         <PageHeader
           title="Status"
           fullWidth={true}
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
         />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">
@@ -85,7 +85,7 @@ class StatusPage extends Component {
     )
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     return <SourceIndicator />
   }
 }

From e0a93fd128de934b18364f9c5518041451accae4 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:44:48 -0700
Subject: [PATCH 095/100] Fix rendering of logs toggle in TICKscript editor

---
 .../kapacitor/components/TickscriptHeader.tsx | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index 614f873be..2cb8db981 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {Component} from 'react'
 
 import PageHeader from 'src/shared/components/PageHeader'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
@@ -16,7 +16,7 @@ interface Props {
   onToggleLogsVisibility: () => void
 }
 
-class TickscriptHeader extends PureComponent<Props> {
+class TickscriptHeader extends Component<Props> {
   public render() {
     return (
       <PageHeader
@@ -32,7 +32,6 @@ class TickscriptHeader extends PureComponent<Props> {
     const {
       task,
       onSave,
-      onExit,
       unsavedChanges,
       isNewTickscript,
       areLogsEnabled,
@@ -40,46 +39,47 @@ class TickscriptHeader extends PureComponent<Props> {
       onToggleLogsVisibility,
     } = this.props
 
-    if (unsavedChanges) {
-      return (
-        <>
-          <LogsToggle
-            areLogsEnabled={areLogsEnabled}
-            areLogsVisible={areLogsVisible}
-            onToggleLogsVisibility={onToggleLogsVisibility}
-          />
-          <TickscriptSave
-            task={task}
-            onSave={onSave}
-            unsavedChanges={unsavedChanges}
-            isNewTickscript={isNewTickscript}
-          />
-          <ConfirmButton
-            text="Exit"
-            confirmText="Discard unsaved changes?"
-            confirmAction={onExit}
-          />
-        </>
-      )
-    }
     return (
       <>
+        <LogsToggle
+          areLogsEnabled={areLogsEnabled}
+          areLogsVisible={areLogsVisible}
+          onToggleLogsVisibility={onToggleLogsVisibility}
+        />
         <TickscriptSave
           task={task}
           onSave={onSave}
           unsavedChanges={unsavedChanges}
           isNewTickscript={isNewTickscript}
         />
-        <button
-          className="btn btn-default btn-sm"
-          title="Return to Alert Rules"
-          onClick={onExit}
-        >
-          Exit
-        </button>
+        {this.saveButton}
       </>
     )
   }
+
+  private get saveButton(): JSX.Element {
+    const {unsavedChanges, onExit} = this.props
+
+    if (unsavedChanges) {
+      return (
+        <ConfirmButton
+          text="Exit"
+          confirmText="Discard unsaved changes?"
+          confirmAction={onExit}
+        />
+      )
+    }
+
+    return (
+      <button
+        className="btn btn-default btn-sm"
+        title="Return to Alert Rules"
+        onClick={onExit}
+      >
+        Exit
+      </button>
+    )
+  }
 }
 
 export default TickscriptHeader

From daee2d9397c412a3765cec08a05c210de5c30d8e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:54:49 -0700
Subject: [PATCH 096/100] Use getters to pass in elements directly instead of
 functions that return elements

---
 ui/src/alerts/containers/AlertsApp.tsx             | 2 +-
 ui/src/dashboards/components/DashboardHeader.tsx   | 4 ++--
 ui/src/data_explorer/containers/DataExplorer.tsx   | 2 +-
 ui/src/flux/components/FluxHeader.tsx              | 2 +-
 ui/src/kapacitor/components/TickscriptHeader.tsx   | 2 +-
 ui/src/kapacitor/containers/KapacitorRulesPage.tsx | 4 ++--
 ui/src/logs/components/LogViewerHeader.tsx         | 4 ++--
 ui/src/shared/components/PageHeader.tsx            | 8 ++++----
 ui/src/status/containers/StatusPage.js             | 2 +-
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 1a6b22548..35c8fd6a1 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -111,7 +111,7 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {timeRange} = this.state
 
     return (
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 4f1c76413..aae70d65e 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -59,7 +59,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private renderPageTitle = (): JSX.Element => {
+  private get renderPageTitle(): JSX.Element {
     return (
       <>
         {this.dashboardSwitcher}
@@ -68,7 +68,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       handleChooseAutoRefresh,
       onManualRefresh,
diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index 0ffc02c85..c751b50e3 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@@ -186,7 +186,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     return buildRawText(this.activeQuery, timeRange)
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       timeRange,
       autoRefresh,
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index b9f381efd..ee9c20aed 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -27,7 +27,7 @@ class FluxHeader extends PureComponent<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     return (
       <button onClick={this.overlay} className="btn btn-sm btn-default">
         Edit Connection
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index 2cb8db981..167c7ce58 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -28,7 +28,7 @@ class TickscriptHeader extends Component<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       task,
       onSave,
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 1d602440a..92e9e3b1f 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -91,7 +91,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
       title="Manage Tasks"
-      renderPageControls={renderPageControls}
+      renderPageControls={renderHeaderOptions()}
       sourceIndicator={true}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
@@ -104,7 +104,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
-const renderPageControls = (): JSX.Element => {
+const renderHeaderOptions = (): JSX.Element => {
   return (
     <QuestionMarkTooltip
       tipID="manage-tasks--tooltip"
diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index fa0706d1d..7b8ef3190 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -38,7 +38,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderHeaderTitle = (): JSX.Element => {
+  private get renderHeaderTitle(): JSX.Element {
     return (
       <>
         {this.status}
@@ -47,7 +47,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {timeRange} = this.props
 
     return (
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 9b11b327d..6fad2f5d4 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -6,8 +6,8 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 interface Props {
   title?: string
-  renderTitle?: () => ReactElement<any>
-  renderPageControls?: () => ReactElement<any>
+  renderTitle?: ReactElement<any>
+  renderPageControls?: ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
   inPresentationMode?: boolean
@@ -55,7 +55,7 @@ class PageHeader extends Component<Props> {
       return <Title title={title} />
     }
 
-    return renderTitle()
+    return renderTitle
   }
 
   private get renderRight(): JSX.Element {
@@ -65,7 +65,7 @@ class PageHeader extends Component<Props> {
       return
     }
 
-    return renderPageControls()
+    return renderPageControls
   }
 
   private get className(): string {
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index 02c528dfb..f48686270 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.js
@@ -61,7 +61,7 @@ class StatusPage extends Component {
         <PageHeader
           title="Status"
           fullWidth={true}
-          renderPageControls={this.renderPageControls}
+          renderPageControls={this.renderPageControls()}
         />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">

From 03245a8ee30e96948c13db680d340c0b570726f4 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:57:19 -0700
Subject: [PATCH 097/100] Rename prop to be more descriptive

---
 ui/src/alerts/containers/AlertsApp.tsx             |  2 +-
 ui/src/dashboards/containers/DashboardsPage.tsx    |  2 +-
 ui/src/data_explorer/containers/DataExplorer.tsx   |  2 +-
 ui/src/flux/components/FluxHeader.tsx              |  2 +-
 ui/src/kapacitor/components/KapacitorForm.tsx      |  2 +-
 ui/src/kapacitor/components/TickscriptHeader.tsx   |  2 +-
 ui/src/kapacitor/containers/KapacitorRulesPage.tsx |  2 +-
 ui/src/shared/components/PageHeader.tsx            | 10 +++++-----
 ui/src/sources/containers/ManageSources.tsx        |  2 +-
 ui/src/sources/containers/SourcePage.tsx           |  2 +-
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 35c8fd6a1..7745685f9 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/ui/src/alerts/containers/AlertsApp.tsx
@@ -96,7 +96,7 @@ class AlertsApp extends PureComponent<Props, State> {
     ) : (
       <div className="page alert-history-page">
         <PageHeader
-          title="Alert History"
+          titleText="Alert History"
           renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
diff --git a/ui/src/dashboards/containers/DashboardsPage.tsx b/ui/src/dashboards/containers/DashboardsPage.tsx
index bf73a16a2..f3452b1c2 100644
--- a/ui/src/dashboards/containers/DashboardsPage.tsx
+++ b/ui/src/dashboards/containers/DashboardsPage.tsx
@@ -54,7 +54,7 @@ class DashboardsPage extends PureComponent<Props> {
 
     return (
       <div className="page">
-        <PageHeader title="Dashboards" sourceIndicator={true} />
+        <PageHeader titleText="Dashboards" sourceIndicator={true} />
         <DashboardsContents
           dashboardLink={dashboardLink}
           dashboards={dashboards}
diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index c751b50e3..a09f380d0 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@@ -117,7 +117,7 @@ export class DataExplorer extends PureComponent<Props, State> {
           </OverlayTechnologies>
         ) : null}
         <PageHeader
-          title="Data Explorer"
+          titleText="Data Explorer"
           fullWidth={true}
           renderPageControls={this.renderPageControls}
           sourceIndicator={true}
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index ee9c20aed..eccbe50b7 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -20,7 +20,7 @@ class FluxHeader extends PureComponent<Props> {
   public render() {
     return (
       <PageHeader
-        title="Flux Editor"
+        titleText="Flux Editor"
         fullWidth={true}
         renderPageControls={this.renderPageControls}
       />
diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx
index 300a15a92..235070491 100644
--- a/ui/src/kapacitor/components/KapacitorForm.tsx
+++ b/ui/src/kapacitor/components/KapacitorForm.tsx
@@ -39,7 +39,7 @@ class KapacitorForm extends PureComponent<Props> {
 
     return (
       <div className="page">
-        <PageHeader title={this.headerText} />
+        <PageHeader titleText={this.headerText} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index 167c7ce58..73f618b90 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -20,7 +20,7 @@ class TickscriptHeader extends Component<Props> {
   public render() {
     return (
       <PageHeader
-        title="TICKscript Editor"
+        titleText="TICKscript Editor"
         fullWidth={true}
         sourceIndicator={true}
         renderPageControls={this.renderPageControls}
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 92e9e3b1f..1eb29a189 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
@@ -90,7 +90,7 @@ interface PageContentsProps {
 const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
-      title="Manage Tasks"
+      titleText="Manage Tasks"
       renderPageControls={renderHeaderOptions()}
       sourceIndicator={true}
     />
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 6fad2f5d4..51dd5e241 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -5,7 +5,7 @@ import Title from 'src/shared/components/PageHeaderTitle'
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 interface Props {
-  title?: string
+  titleText?: string
   renderTitle?: ReactElement<any>
   renderPageControls?: ReactElement<any>
   fullWidth?: boolean
@@ -45,14 +45,14 @@ class PageHeader extends Component<Props> {
   }
 
   private get renderLeft(): JSX.Element {
-    const {title, renderTitle} = this.props
+    const {titleText, renderTitle} = this.props
 
-    if (!title && !renderTitle) {
-      console.error('PageHeader requires either title or RenderTitle props')
+    if (!titleText && !renderTitle) {
+      console.error('PageHeader requires either titleText or RenderTitle props')
     }
 
     if (!renderTitle) {
-      return <Title title={title} />
+      return <Title title={titleText} />
     }
 
     return renderTitle
diff --git a/ui/src/sources/containers/ManageSources.tsx b/ui/src/sources/containers/ManageSources.tsx
index e11ff1236..bcdb1365e 100644
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@@ -49,7 +49,7 @@ class ManageSources extends PureComponent<Props> {
 
     return (
       <div className="page" id="manage-sources-page">
-        <PageHeader title="Configuration" sourceIndicator={true} />
+        <PageHeader titleText="Configuration" sourceIndicator={true} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <InfluxTable
diff --git a/ui/src/sources/containers/SourcePage.tsx b/ui/src/sources/containers/SourcePage.tsx
index e43a52ef5..cde91816b 100644
--- a/ui/src/sources/containers/SourcePage.tsx
+++ b/ui/src/sources/containers/SourcePage.tsx
@@ -91,7 +91,7 @@ class SourcePage extends PureComponent<Props, State> {
     return (
       <div className={`${isInitialSource ? '' : 'page'}`}>
         <Notifications />
-        <PageHeader title={this.pageTitle} />
+        <PageHeader titleText={this.pageTitle} />
         <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">

From 0edf440f453a8ca030304fac22f12c2efcc50b1a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 10:58:55 -0700
Subject: [PATCH 098/100] Improve clarity of prop name

---
 ui/src/dashboards/components/DashboardHeader.tsx |  2 +-
 ui/src/logs/components/LogViewerHeader.tsx       |  2 +-
 ui/src/shared/components/PageHeader.tsx          | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index aae70d65e..3d4912330 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -52,7 +52,7 @@ class DashboardHeader extends Component<Props> {
       <PageHeader
         fullWidth={true}
         sourceIndicator={true}
-        renderTitle={this.renderPageTitle}
+        titleComponents={this.renderPageTitle}
         renderPageControls={this.renderPageControls}
         inPresentationMode={isHidden}
       />
diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index 7b8ef3190..c9743ebc3 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -31,7 +31,7 @@ class LogViewerHeader extends PureComponent<Props> {
   public render(): JSX.Element {
     return (
       <PageHeader
-        renderTitle={this.renderHeaderTitle}
+        titleComponents={this.renderHeaderTitle}
         fullWidth={true}
         renderPageControls={this.renderPageControls}
       />
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 51dd5e241..60bbcf2b2 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/ui/src/shared/components/PageHeader.tsx
@@ -6,7 +6,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 interface Props {
   titleText?: string
-  renderTitle?: ReactElement<any>
+  titleComponents?: ReactElement<any>
   renderPageControls?: ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
@@ -45,17 +45,19 @@ class PageHeader extends Component<Props> {
   }
 
   private get renderLeft(): JSX.Element {
-    const {titleText, renderTitle} = this.props
+    const {titleText, titleComponents} = this.props
 
-    if (!titleText && !renderTitle) {
-      console.error('PageHeader requires either titleText or RenderTitle props')
+    if (!titleText && !titleComponents) {
+      console.error(
+        'PageHeader requires either titleText or titleComponents prop'
+      )
     }
 
-    if (!renderTitle) {
+    if (!titleComponents) {
       return <Title title={titleText} />
     }
 
-    return renderTitle
+    return titleComponents
   }
 
   private get renderRight(): JSX.Element {

From ff1fc05b992213e9560a9c62f47d672bc83c0e81 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 11:03:20 -0700
Subject: [PATCH 099/100] Rename prop to indicate intended use

---
 ui/src/alerts/containers/AlertsApp.tsx             | 4 ++--
 ui/src/dashboards/components/DashboardHeader.tsx   | 4 ++--
 ui/src/data_explorer/containers/DataExplorer.tsx   | 4 ++--
 ui/src/flux/components/FluxHeader.tsx              | 4 ++--
 ui/src/hosts/containers/HostsPage.js               | 4 ++--
 ui/src/kapacitor/components/KapacitorRule.js       | 4 ++--
 ui/src/kapacitor/components/TickscriptHeader.tsx   | 4 ++--
 ui/src/kapacitor/containers/KapacitorRulesPage.tsx | 2 +-
 ui/src/logs/components/LogViewerHeader.tsx         | 4 ++--
 ui/src/shared/components/PageHeader.tsx            | 8 ++++----
 ui/src/status/containers/StatusPage.js             | 4 ++--
 11 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.tsx b/ui/src/alerts/containers/AlertsApp.tsx
index 7745685f9..f839eb238 100644
--- a/ui/src/alerts/containers/AlertsApp.tsx
+++ b/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 (
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 3d4912330..2f06e2dc0 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/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,
diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx
index a09f380d0..69156f4e9 100644
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/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,
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index eccbe50b7..6bbdc0ba7 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/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
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index ec18e0129..5058be5c0 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/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 (
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index e658319e8..d64042739 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/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">
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index 73f618b90..e25914a71 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/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,
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx b/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
index 1eb29a189..3437d024b 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.tsx
+++ b/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">
diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index c9743ebc3..351dcdd9c 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/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 (
diff --git a/ui/src/shared/components/PageHeader.tsx b/ui/src/shared/components/PageHeader.tsx
index 60bbcf2b2..e7ab4c61c 100644
--- a/ui/src/shared/components/PageHeader.tsx
+++ b/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 {
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index f48686270..f9e72db9a 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/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 />
   }
 }

From 990371a0856dee05c80e3b917b6bdf11920484b2 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Wed, 20 Jun 2018 15:18:07 -0400
Subject: [PATCH 100/100] Add type asserition to Papa.parse data

Parsed data from Papa.parse does not utilize a generic
type and returns any[]. Adding an asserition will at least
error if there are changes to the type of FluxTable.data.
---
 ui/src/shared/parsing/flux/response.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/shared/parsing/flux/response.ts b/ui/src/shared/parsing/flux/response.ts
index b56f964ac..634ebb5e9 100644
--- a/ui/src/shared/parsing/flux/response.ts
+++ b/ui/src/shared/parsing/flux/response.ts
@@ -5,7 +5,7 @@ import uuid from 'uuid'
 import {FluxTable} from 'src/types'
 
 export const parseResponseError = (response: string): FluxTable[] => {
-  const {data} = Papa.parse(response.trim())
+  const data = Papa.parse(response.trim()).data as string[][]
 
   return [
     {