Introduce reusable Empty State component

chronograf/ui/src/clockface/components/empty_state/EmptyState.scss

@@ -0,0 +1,53 @@
+/*
+  Empty States
+  ------------------------------------------------------------------------------
+*/
+
+.empty-state {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-state--text,
+.empty-state--sub-text {
+  color: $empty-state-text;
+  @extend %no-user-select;
+}
+
+.empty-state--xs {
+  padding: $ix-marg-a 0;
+
+  .empty-state--text,
+  .empty-state--sub-text {
+    margin: $ix-marg-a 0;
+  }
+}
+
+.empty-state--sm {
+  padding: $ix-marg-c 0;
+
+  .empty-state--text,
+  .empty-state--sub-text {
+    margin: $ix-marg-b 0;
+  }
+}
+
+.empty-state--md {
+  padding: $ix-marg-d 0;
+
+  .empty-state--text,
+  .empty-state--sub-text {
+    margin: $ix-marg-b 0;
+  }
+}
+
+.empty-state--lg {
+  padding: $ix-marg-f 0;
+
+  .empty-state--text,
+  .empty-state--sub-text {
+    margin: $ix-marg-c 0;
+  }
+}

chronograf/ui/src/clockface/components/empty_state/EmptyState.tsx

@@ -0,0 +1,36 @@
+// Libraries
+import React, {Component} from 'react'
+
+// Components
+import EmptyStateText from 'src/clockface/components/empty_state/EmptyStateText'
+import EmptyStateSubText from 'src/clockface/components/empty_state/EmptyStateSubText'
+
+// Types
+import {ComponentSize} from 'src/clockface/types'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  size?: ComponentSize
+  children: JSX.Element | JSX.Element[]
+}
+
+@ErrorHandling
+class EmptyState extends Component<Props> {
+  public static defaultProps: Partial<Props> = {
+    size: ComponentSize.Small,
+  }
+
+  public static Text = EmptyStateText
+  public static SubText = EmptyStateSubText
+
+  public render() {
+    const {children, size} = this.props
+
+    const className = `empty-state empty-state--${size}`
+
+    return <div className={className}>{children}</div>
+  }
+}
+
+export default EmptyState

chronograf/ui/src/clockface/components/empty_state/EmptyStateSubText.tsx

@@ -0,0 +1,12 @@
+// Libraries
+import React, {SFC} from 'react'
+
+interface Props {
+  text: string
+}
+
+const EmptyStateSubText: SFC<Props> = ({text}) => (
+  <p className="empty-state--sub-text">{text}</p>
+)
+
+export default EmptyStateSubText

chronograf/ui/src/clockface/components/empty_state/EmptyStateText.tsx

@@ -0,0 +1,12 @@
+// Libraries
+import React, {SFC} from 'react'
+
+interface Props {
+  text: string
+}
+
+const EmptyStateText: SFC<Props> = ({text}) => (
+  <h4 className="empty-state--text">{text}</h4>
+)
+
+export default EmptyStateText

chronograf/ui/src/clockface/index.ts

@@ -15,6 +15,7 @@ import WizardFullScreen from './components/wizard/WizardFullScreen'
 import WizardProgressHeader from './components/wizard/WizardProgressHeader'
 import ProgressBar from './components/wizard/ProgressBar'
 import ComponentSpacer from './components/component_spacer/ComponentSpacer'
+import EmptyState from './components/empty_state/EmptyState'
 
 // Import Types
 import {
@@ -38,6 +39,7 @@ export {
   Dropdown,
   DropdownMode,
   MultiSelectDropdown,
+  EmptyState,
   Form,
   Input,
   InputType,

chronograf/ui/src/clockface/styles.scss

@@ -19,3 +19,4 @@
 @import 'components/wizard/WizardProgressHeader';
 @import 'components/wizard/ProgressBar';
 @import 'components/component_spacer/ComponentSpacer';
+@import 'components/empty_state/EmptyState';