Add dummy markup & styles for "configured" state of AlertTabs

Hardcoded all endpoints to configured={true} for now

ui/src/kapacitor/components/AlertTabs.js

@@ -207,7 +207,8 @@ class AlertTabs extends Component {
               (acc, _cur, k) =>
                 supportedConfigs[k]
                   ? acc.concat(
-                      <Tab key={supportedConfigs[k].type}>
+                      /* All endpoints appear "configured" by default (as a test) */
+                      <Tab key={supportedConfigs[k].type} isConfigured={true}>
                         {supportedConfigs[k].type}
                       </Tab>
                     )

ui/src/shared/components/Tabs.js

@@ -9,6 +9,7 @@ export const Tab = React.createClass({
     isDisabled: bool,
     isActive: bool,
     isKapacitorTab: bool,
+    isConfigured: bool,
   },
 
   render() {
@@ -24,7 +25,10 @@ export const Tab = React.createClass({
     }
     return (
       <div
-        className={classnames('btn tab', {active: this.props.isActive})}
+        className={classnames('btn tab', {
+          active: this.props.isActive,
+          configured: this.props.isConfigured,
+        })}
         onClick={this.props.isDisabled ? null : this.props.onClick}
       >
         {this.props.children}

ui/src/style/pages/config-endpoints.scss

@@ -37,12 +37,13 @@ $config-endpoint-tab-bg-active: $g3-castle;
       border-radius: 0;
       height: $config-endpoint-tab-height;
       border: 0;
-      padding: 0 40px 0 15px;
+      padding: 0 50px 0 15px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-weight: 500;
       font-size: 16px;
+      position: relative;
 
       &:first-child {border-top-left-radius: $radius;}
 
@@ -54,6 +55,22 @@ $config-endpoint-tab-bg-active: $g3-castle;
         color: $config-endpoint-tab-text-active;
         background-color: $config-endpoint-tab-bg-active;
       }
+
+      // Checkmark for configured state, hidden by default
+      &:after {
+        content: "\e918";
+        font-family: 'icomoon';
+        color: $c-rainforest;
+        position: absolute;
+        top: 50%;
+        right: 14px;
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: opacity 0.25s ease;
+      }
+      &.configured:after {
+        opacity: 1;
+      }
     }
   }
 }