WIP

npm-debug.log

@@ -0,0 +1,19 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using npm@2.15.9
+3 info using node@v4.6.0
+4 verbose stack Error: ENOENT: no such file or directory, open '/Users/kfitzpatrick/workspace/go/src/github.com/influxdata/mrfusion/package.json'
+4 verbose stack     at Error (native)
+5 verbose cwd /Users/kfitzpatrick/workspace/go/src/github.com/influxdata/mrfusion
+6 error Darwin 14.5.0
+7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+8 error node v4.6.0
+9 error npm  v2.15.9
+10 error path /Users/kfitzpatrick/workspace/go/src/github.com/influxdata/mrfusion/package.json
+11 error code ENOENT
+12 error errno -2
+13 error syscall open
+14 error enoent ENOENT: no such file or directory, open '/Users/kfitzpatrick/workspace/go/src/github.com/influxdata/mrfusion/package.json'
+14 error enoent This is most likely not a problem with npm itself
+14 error enoent and is related to npm not being able to find a file.
+15 verbose exit [ -2, true ]

ui/src/alerts/components/AlertsTable.js

@@ -3,10 +3,12 @@ import _ from 'lodash';
 
 const AlertsTable = React.createClass({
   propTypes: {
-    hosts: PropTypes.arrayOf(PropTypes.shape({
+    alerts: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
-      cpu: PropTypes.number,
+      time: PropTypes.string,
-      load: PropTypes.number,
+      value: PropTypes.string,
+      host: PropTypes.string,
+      severity: PropTypes.string,
     })),
     source: PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -17,19 +19,19 @@ const AlertsTable = React.createClass({
   getInitialState() {
     return {
       searchTerm: '',
-      filteredHosts: this.props.hosts,
+      filteredAlerts: this.props.alerts,
       sortDirection: null,
       sortKey: null,
     };
   },
 
   componentWillReceiveProps(newProps) {
-    this.filterHosts(newProps.hosts, this.state.searchTerm);
+    this.filterAlerts(newProps.alerts, this.state.searchTerm);
   },
 
-  filterHosts(allHosts, searchTerm) {
+  filterAlerts(allAlerts, searchTerm) {
-    const hosts = allHosts.filter((h) => h.name.search(searchTerm) !== -1);
+    const alerts = allAlerts.filter((h) => h.name.search(searchTerm) !== -1);
-    this.setState({searchTerm, filteredHosts: hosts});
+    this.setState({searchTerm, filteredAlerts: alerts});
   },
 
   changeSort(key) {
@@ -42,44 +44,45 @@ const AlertsTable = React.createClass({
     }
   },
 
-  sort(hosts, key, direction) {
+  sort(alerts, key, direction) {
     switch (direction) {
       case 'asc':
-        return _.sortBy(hosts, (e) => e[key]);
+        return _.sortBy(alerts, (e) => e[key]);
       case 'desc':
-        return _.sortBy(hosts, (e) => e[key]).reverse();
+        return _.sortBy(alerts, (e) => e[key]).reverse();
       default:
-        return hosts;
+        return alerts;
     }
   },
 
   render() {
-    const hosts = this.sort(this.state.filteredHosts, this.state.sortKey, this.state.sortDirection);
+    const alerts = this.sort(this.state.filteredAlerts, this.state.sortKey, this.state.sortDirection);
     const {source} = this.props;
 
     return (
       <div className="panel panel-minimal">
         <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-          <h2 className="panel-title">{this.props.hosts.length} Hosts</h2>
+          <h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
-          <SearchBar onSearch={_.wrap(this.props.hosts, this.filterHosts)} />
+          <SearchBar onSearch={_.wrap(this.props.alerts, this.filterAlerts)} />
         </div>
         <div className="panel-body">
           <table className="table v-center">
             <thead>
               <tr>
-                <th onClick={() => this.changeSort('name')} className="sortable-header">Hostname</th>
+                <th onClick={() => this.changeSort('name')} className="sortable-header">Alert</th>
-                <th className="text-center">Status</th>
+                <th className="text-center">Time</th>
-                <th onClick={() => this.changeSort('cpu')} className="sortable-header">CPU</th>
+                <th onClick={() => this.changeSort('value')} className="sortable-header">Value</th>
-                <th onClick={() => this.changeSort('load')} className="sortable-header">Load</th>
+                <th onClick={() => this.changeSort('host')} className="sortable-header">Host</th>
+                <th onClick={() => this.changeSort('severity')} className="sortable-header">Severity</th>
                 <th>Apps</th>
               </tr>
             </thead>
             <tbody>
               {
-                hosts.map(({name, cpu, load}) => {
+                alerts.map(({name, cpu, load}) => {
                   return (
                     <tr key={name}>
-                      <td className="monotype"><a href={`/sources/${source.id}/hosts/${name}`}>{name}</a></td>
+                      <td className="monotype"><a href={`/sources/${source.id}/alerts/${name}`}>{name}</a></td>
                       <td className="text-center"><div className="table-dot dot-success"></div></td>
                       <td className="monotype">{`${cpu.toFixed(2)}%`}</td>
                       <td className="monotype">{`${load.toFixed(2)}`}</td>
@@ -111,7 +114,7 @@ const SearchBar = React.createClass({
         <input
           type="text"
           className="form-control"
-          placeholder="Filter Hosts"
+          placeholder="Filter Alerts"
           ref="searchInput"
           onChange={this.handleChange}
         />

ui/src/alerts/containers/AlertsApp.js

@@ -17,7 +17,6 @@ const AlertsApp = React.createClass({
   getInitialState() {
     return {
       alerts: [],
-      hosts: [],
     };
   },
 
@@ -39,7 +38,7 @@ const AlertsApp = React.createClass({
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-12">
-              <AlertsTable source={this.props.source} hosts={this.state.hosts} />
+              <AlertsTable source={this.props.source} alerts={this.state.alerts} />
             </div>
           </div>
         </div>

ui/src/utils/getInitialState.js

@@ -1,4 +1,4 @@
-export default function getInitialState(localStorage, hosts) {
+export default function getInitialState(localStorage, hosts, alerts) {
   const existingTimeSettingsString = localStorage.getItem('time');
 
   const h = {};
@@ -14,8 +14,11 @@ export default function getInitialState(localStorage, hosts) {
     groupByInterval: 60,
   }, JSON.parse(existingTimeSettingsString || '{}'));
 
+  // Why are we getting hosts for all pages?
+  // I've copied alerts here in the same way.
   return {
     hosts: h,
+    alerts: alerts,
     time,
   };
 }