WIP
Kevin Fitzpatrick
Jade McGough
parent
a01b787881
commit
69bc2cf8ea
|
|
@ -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 ]
|
||||
|
|
@ -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,
|
||||
load: PropTypes.number,
|
||||
time: PropTypes.string,
|
||||
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) {
|
||||
const hosts = allHosts.filter((h) => h.name.search(searchTerm) !== -1);
|
||||
this.setState({searchTerm, filteredHosts: hosts});
|
||||
filterAlerts(allAlerts, searchTerm) {
|
||||
const alerts = allAlerts.filter((h) => h.name.search(searchTerm) !== -1);
|
||||
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>
|
||||
<SearchBar onSearch={_.wrap(this.props.hosts, this.filterHosts)} />
|
||||
<h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
|
||||
<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 className="text-center">Status</th>
|
||||
<th onClick={() => this.changeSort('cpu')} className="sortable-header">CPU</th>
|
||||
<th onClick={() => this.changeSort('load')} className="sortable-header">Load</th>
|
||||
<th onClick={() => this.changeSort('name')} className="sortable-header">Alert</th>
|
||||
<th className="text-center">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>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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue