diff --git a/ui/stories/index.js b/ui/stories/index.js
index b0b782de94..ce992a0c69 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -1,80 +1,5 @@
-import React from 'react';
-import {storiesOf, action, linkTo} from '@kadira/storybook';
-
-// Stubs
-import kapacitor from './stubs/kapacitor';
-import source from './stubs/source';
-import rule from './stubs/rule';
-import query from './stubs/query';
-import queryConfigs from './stubs/queryConfigs';
-
-// Actions for Spies
-import * as kapacitorActions from 'src/kapacitor/actions/view'
-import * as queryActions from 'src/chronograf/actions/view';
-
-// Components
-import KapacitorRule from 'src/kapacitor/components/KapacitorRule';
-import ValuesSection from 'src/kapacitor/components/ValuesSection';
-
 // CSS
 import 'src/style/enterprise_style/application.scss';
 
-const valuesSection = (trigger, range = false) => (
-  <div className="rule-builder">
-    <ValuesSection
-      rule={rule({
-        trigger,
-        range,
-      })}
-      query={query()}
-      onChooseTrigger={action('chooseTrigger')}
-      onUpdateValues={action('updateRuleValues')}
-    />
-  </div>
-)
-
-storiesOf('ValuesSection', module)
-  .add('Threshold', () => (
-    valuesSection('threshold')
-  ))
-  .add('Threshold with Range', () => (
-    valuesSection('threshold', true)
-  ))
-  .add('Relative', () => (
-    valuesSection('relative')
-  ))
-  .add('Deadman', () => (
-    valuesSection('deadman')
-  ))
-
-const spyActions = (actions) => Object.keys(actions)
-  .reduce((acc, a) => {
-    acc[a] = (...evt) => {
-      action(a)(...evt)
-      return actions[a](...evt)
-    }
-    return acc
-  }, {});
-
-storiesOf('KapacitorRule', module)
-  .add('Threshold', () => (
-    <div className="chronograf-root">
-      <KapacitorRule
-        source={source()}
-        rule={rule({
-          trigger: 'threshold',
-        })}
-        query={query()}
-        queryConfigs={queryConfigs()}
-        kapacitor={kapacitor()}
-        queryActions={spyActions(queryActions)}
-        kapacitorActions={spyActions(kapacitorActions)}
-        addFlashMessage={action('addFlashMessage')}
-        enabledAlerts={['slack']}
-        isEditing={true}
-        router={{
-          push: action('route'),
-        }}
-      />
-    </div>
-  ));
+// Kapacitor Stories
+import './kapacitor'
diff --git a/ui/stories/kapacitor.js b/ui/stories/kapacitor.js
new file mode 100644
index 0000000000..1823028a69
--- /dev/null
+++ b/ui/stories/kapacitor.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import {storiesOf, action, linkTo} from '@kadira/storybook';
+
+// Stubs
+import kapacitor from './stubs/kapacitor';
+import source from './stubs/source';
+import rule from './stubs/rule';
+import query from './stubs/query';
+import queryConfigs from './stubs/queryConfigs';
+
+// Actions for Spies
+import * as kapacitorActions from 'src/kapacitor/actions/view'
+import * as queryActions from 'src/chronograf/actions/view';
+
+// Components
+import KapacitorRule from 'src/kapacitor/components/KapacitorRule';
+import ValuesSection from 'src/kapacitor/components/ValuesSection';
+
+const valuesSection = (trigger, range = false) => (
+  <div className="rule-builder">
+    <ValuesSection
+      rule={rule({
+        trigger,
+        range,
+      })}
+      query={query()}
+      onChooseTrigger={action('chooseTrigger')}
+      onUpdateValues={action('updateRuleValues')}
+    />
+  </div>
+);
+
+storiesOf('ValuesSection', module)
+  .add('Threshold', () => (
+    valuesSection('threshold')
+  ))
+  .add('Threshold with Range', () => (
+    valuesSection('threshold', true)
+  ))
+  .add('Relative', () => (
+    valuesSection('relative')
+  ))
+  .add('Deadman', () => (
+    valuesSection('deadman')
+  ));
+
+storiesOf('KapacitorRule', module)
+  .add('Threshold', () => (
+    <div className="chronograf-root">
+      <KapacitorRule
+        source={source()}
+        rule={rule({
+          trigger: 'threshold',
+        })}
+        query={query()}
+        queryConfigs={queryConfigs()}
+        kapacitor={kapacitor()}
+        queryActions={spyActions(queryActions)}
+        kapacitorActions={spyActions(kapacitorActions)}
+        addFlashMessage={action('addFlashMessage')}
+        enabledAlerts={['slack']}
+        isEditing={true}
+        router={{
+          push: action('route'),
+        }}
+      />
+    </div>
+  ));
diff --git a/ui/stories/shared.js b/ui/stories/shared.js
new file mode 100644
index 0000000000..4d8343741e
--- /dev/null
+++ b/ui/stories/shared.js
@@ -0,0 +1,8 @@
+export const spyActions = (actions) => Object.keys(actions)
+  .reduce((acc, a) => {
+    acc[a] = (...evt) => {
+      action(a)(...evt);
+      return actions[a](...evt);
+    };
+    return acc;
+  }, {});