change alerts mock into actual request

Signed-off-by: Kevin Fitzpatrick <kevin@influxdb.com>

ui/src/alerts/apis/index.js

@@ -1,19 +1,9 @@
-export function getAlerts() {
-  const alerts = [
-    {
-      name: "High CPU",
-      time: "12:00:01",
-      value: "90%",
-      host: "prod-influx-data-1",
-      severity: "high",
-    },
-    {
-      name: "Reavers",
-      time: "12:00:02",
-      value: "9000",
-      host: "Firefly",
-      severity: "ohgodohgod",
-    },
-  ];
-  return alerts;
+import {proxy} from 'utils/queryUrlGenerator';
+
+export function getAlerts(proxyLink) {
+  return proxy({
+    source: proxyLink,
+    query: "select host, value, name, time, level from alerts",
+    db: "chronograf",
+  });
 }

ui/src/alerts/components/AlertsTable.js

@@ -9,7 +9,7 @@ const AlertsTable = React.createClass({
       time: PropTypes.string,
       value: PropTypes.string,
       host: PropTypes.string,
-      severity: PropTypes.string,
+      level: PropTypes.string,
     })),
     source: PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -73,19 +73,19 @@ const AlertsTable = React.createClass({
                 <th onClick={() => this.changeSort('time')} className="sortable-header">Time</th>
                 <th onClick={() => this.changeSort('value')} className="sortable-header">Value</th>
                 <th onClick={() => this.changeSort('host')} className="sortable-header">Host</th>
-                <th onClick={() => this.changeSort('severity')} className="sortable-header">Severity</th>
+                <th onClick={() => this.changeSort('level')} className="sortable-header">Level</th>
               </tr>
             </thead>
             <tbody>
               {
-                alerts.map(({name, time, value, host, severity}) => {
+                alerts.map(({name, time, value, host, level}) => {
                   return (
                     <tr key={name}>
                       <td className="monotype"><a href={`/sources/${source.id}/alerts/${name}`}>{name}</a></td>
                       <td className="monotype">{time}</td>
                       <td className="monotype">{value}</td>
                       <td className="monotype">{host}</td>
-                      <td className="monotype">{severity}</td>
+                      <td className="monotype">{level}</td>
                     </tr>
                   );
                 })

ui/src/alerts/containers/AlertsApp.js

@@ -21,10 +21,16 @@ const AlertsApp = React.createClass({
 
   getInitialState() {
     return {
-      alerts: getAlerts(),
+      alerts: []
     };
   },
 
+  componentDidMount() {
+      return getAlerts(this.props.source.links.proxy).then((resp) => {
+        this.setState({alerts: resp.alerts})
+      });
+  },
+
   render() {
     return (
       // I stole this from the Hosts page.