<commit_before>import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import AlertsTable from '../components/AlertsTable';
import {getAlerts} from '../apis';
import AJAX from 'utils/ajax';
import _ from 'lodash';

// Kevin: because we were getting strange errors saying
// "Failed prop type: Required prop `source` was not specified in `AlertsApp`."
// Tim and I decided to make the source and addFlashMessage props not required.
// FIXME: figure out why that wasn't working
const AlertsApp = React.createClass({
  propTypes: {
    source: PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      type: PropTypes.string, // 'influx-enterprise'
      links: PropTypes.shape({
        proxy: PropTypes.string.isRequired,
      }).isRequired,
    }), // .isRequired,
    addFlashMessage: PropTypes.func, // .isRequired,
  },

  getInitialState() {
    return {
      loading: true,
      hasKapacitor: false,
      alerts: [],
    };
  },
  // TODO: show a loading screen until we figure out if there is a kapacitor and fetch the alerts
  componentDidMount() {
    const {source} = this.props;
    AJAX({
      url: source.links.kapacitors,
      method: 'GET',
    }).then(({data}) => {
      if (data.kapacitors[0]) {
        this.setState({hasKapacitor: true});

        this.fetchAlerts();
      } else {
        this.setState({loading: false});
      }
    });
  },

  fetchAlerts() {
    getAlerts(this.props.source.links.proxy).then((resp) => {
      const results = [];

      const alertSeries = _.get(resp, ['data', 'results', '0', 'series'], []);

      const timeIndex = alertSeries[0].columns.findIndex((col) => col === 'time');
      const hostIndex = alertSeries[0].columns.findIndex((col) => col === 'host');
      const valueIndex = alertSeries[0].columns.findIndex((col) => col === 'value');
      const levelIndex = alertSeries[0].columns.findIndex((col) => col === 'level');
      const nameIndex = alertSeries[0].columns.findIndex((col) => col === 'name');

      alertSeries[0].values.forEach((s) => {
        results.push({
          time: `${s[timeIndex]}`,
          host: s[hostIndex],
          value: `${s[valueIndex]}`,
          level: s[levelIndex],
          name: `${s[nameIndex]}`,
        });
      });
      this.setState({loading: false, alerts: results});
    });
  },

  renderSubComponents() {
    let component;
    if (this.state.loading) {
      component = (<p>Loading...</p>);
    } else {
      const {source} = this.props;
      if (this.state.hasKapacitor) {
        component = (
          <AlertsTable source={this.props.source} alerts={this.state.alerts} />
        );<commit_msg>Stop displaying 'loading' when empty set of alerts<commit_after>import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import AlertsTable from '../components/AlertsTable';
import {getAlerts} from '../apis';
import AJAX from 'utils/ajax';
import _ from 'lodash';

// Kevin: because we were getting strange errors saying
// "Failed prop type: Required prop `source` was not specified in `AlertsApp`."
// Tim and I decided to make the source and addFlashMessage props not required.
// FIXME: figure out why that wasn't working
const AlertsApp = React.createClass({
  propTypes: {
    source: PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      type: PropTypes.string, // 'influx-enterprise'
      links: PropTypes.shape({
        proxy: PropTypes.string.isRequired,
      }).isRequired,
    }), // .isRequired,
    addFlashMessage: PropTypes.func, // .isRequired,
  },

  getInitialState() {
    return {
      loading: true,
      hasKapacitor: false,
      alerts: [],
    };
  },
  // TODO: show a loading screen until we figure out if there is a kapacitor and fetch the alerts
  componentDidMount() {
    const {source} = this.props;
    AJAX({
      url: source.links.kapacitors,
      method: 'GET',
    }).then(({data}) => {
      if (data.kapacitors[0]) {
        this.setState({hasKapacitor: true});

        this.fetchAlerts();
      } else {
        this.setState({loading: false});
      }
    });
  },

  fetchAlerts() {
    getAlerts(this.props.source.links.proxy).then((resp) => {
      const results = [];

      const alertSeries = _.get(resp, ['data', 'results', '0', 'series'], []);
      if (alertSeries.length === 0) {
        this.setState({loading: false, alerts: []});
        return;
      }

      const timeIndex = alertSeries[0].columns.findIndex((col) => col === 'time');
      const hostIndex = alertSeries[0].columns.findIndex((col) => col === 'host');
      const valueIndex = alertSeries[0].columns.findIndex((col) => col === 'value');
      const levelIndex = alertSeries[0].columns.findIndex((col) => col === 'level');
      const nameIndex = alertSeries[0].columns.findIndex((col) => col === 'name');

      alertSeries[0].values.forEach((s) => {
        results.push({
          time: `${s[timeIndex]}`,
          host: s[hostIndex],
          value: `${s[valueIndex]}`,
          level: s[levelIndex],
          name: `${s[nameIndex]}`,
        });
      });
      this.setState({loading: false, alerts: results});
    });
  },

  renderSubComponents() {
    let component;
    if (this.state.loading) {
      component = (<p>Loading...</p>);
    } else {
      const {source} = this.props;
      if (this.state.hasKapacitor) {
        component = (
          <AlertsTable source={this.props.source} alerts={this.state.alerts} />
        );
{'fraction_non_alphanumeric': 0.1613136051966799, 'fraction_numerical': 0.003067484662576687, 'mean_word_length': 2.7681849082256966, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1197789', 'n_tokens_mistral': 1679, 'n_tokens_neox': 1671, 'n_words': 408}