<commit_before>import React from 'react';
import DocumentTitle from 'react-document-title';
import underscore from 'underscore';
import {browserHistory} from 'react-router';
import idx from 'idx';

import ApiMixin from '../mixins/apiMixin';
import AutoSelectText from '../components/autoSelectText';
import DateTime from '../components/dateTime';
import HookStore from '../stores/hookStore';
import IndicatorStore from '../stores/indicatorStore';
import LoadingError from '../components/loadingError';
import LoadingIndicator from '../components/loadingIndicator';
import ProjectState from '../mixins/projectState';
import StackedBarChart from '../components/stackedBarChart';
import {
  BooleanField,
  FormState,
  NumberField,
  Select2Field,
  TextField
} from '../components/forms';
import {t, tct} from '../locale';

const KeyStats = React.createClass({
  mixins: [ApiMixin],

  getInitialState() {
    let until = Math.floor(new Date().getTime() / 1000);
    let since = until - 3600 * 24 * 30;

    return {
      since: since,
      until: until,
      loading: true,
      error: false,
      stats: null,
      emptyStats: false
    };
  },

  componentWillMount() {
    this.fetchData();
  },

  fetchData() {
    let {keyId, orgId, projectId} = this.props.params;
    this.api.request(`/projects/${orgId}/${projectId}/keys/${keyId}/stats/`, {
      query: {
        since: this.state.since,
        until: this.state.until,
        resolution: '1d'
      },
      success: data => {
        let emptyStats = true;
        let stats = data.map(p => {
          if (p.total) emptyStats = false;
          return {
            x: p.ts,
            y: [p.accepted, p.dropped, p.filtered]
          };
        });
        this.setState({
          stats: stats,
          emptyStats: emptyStats,
          error: false,
          loading: false
        });
      },
      error: () => {
        this.setState({error: true, loading: false});
      }
    });
  },

  renderTooltip(point, pointIdx, chart) {
    let timeLabel = chart.getTimeLabel(point);
    let [accepted, dropped, filtered] = point.y;

    let value = `${accepted.toLocaleString()} accepted`;
    if (dropped) {
      value += `<br>${dropped.toLocaleString()} rate limited`;
    }
    if (filtered) {
      value += `<br>${filtered.toLocaleString()} filtered`;
    }

    return (
      '<div style="width:150px">' +
      `<div class="time-label">${timeLabel}</div>` +
      `<div class="value-label">${value}</div>` +
      '</div>'
    );
  },

  render() {
    if (this.state.loading) return <div className="box"><LoadingIndicator /></div>;
    else if (this.state.error) return <LoadingError onRetry={this.fetchData} />;

    return (
      <div className="panel panel-default">
        <div className="panel-heading">
          <h6>{t('Key usage in the last 30 days (by day)')}</h6>
        </div>
        <div className="panel-body p-a-0">
          {!this.state.emptyStats
            ? <div className="inbound-filters-stats p-a-1">
                <div className="bar-chart">
                  <StackedBarChart
                    points={this.state.stats}
                    height={100}
                    barClasses={['accepted', 'rate-limited', 'black-listed']}
                    className="sparkline m-b-0"
                    tooltip={this.renderTooltip}
                  />
                </div>
              </div>
            : <div className="blankslate p-y-2">
                <h5>{t('Nothing recorded in the last 30 days.')}</h5>
                <p className="m-b-0">
                  {t('Total events captured using these credentials.')}
                </p>
              </div>}
        </div>
      </div>
    );
  }
});

const KeySettings = React.createClass({<commit_msg>[quotas] dont show filtered events on key details<commit_after>import React from 'react';
import DocumentTitle from 'react-document-title';
import underscore from 'underscore';
import {browserHistory} from 'react-router';
import idx from 'idx';

import ApiMixin from '../mixins/apiMixin';
import AutoSelectText from '../components/autoSelectText';
import DateTime from '../components/dateTime';
import HookStore from '../stores/hookStore';
import IndicatorStore from '../stores/indicatorStore';
import LoadingError from '../components/loadingError';
import LoadingIndicator from '../components/loadingIndicator';
import ProjectState from '../mixins/projectState';
import StackedBarChart from '../components/stackedBarChart';
import {
  BooleanField,
  FormState,
  NumberField,
  Select2Field,
  TextField
} from '../components/forms';
import {t, tct} from '../locale';

const KeyStats = React.createClass({
  mixins: [ApiMixin],

  getInitialState() {
    let until = Math.floor(new Date().getTime() / 1000);
    let since = until - 3600 * 24 * 30;

    return {
      since: since,
      until: until,
      loading: true,
      error: false,
      stats: null,
      emptyStats: false
    };
  },

  componentWillMount() {
    this.fetchData();
  },

  fetchData() {
    let {keyId, orgId, projectId} = this.props.params;
    this.api.request(`/projects/${orgId}/${projectId}/keys/${keyId}/stats/`, {
      query: {
        since: this.state.since,
        until: this.state.until,
        resolution: '1d'
      },
      success: data => {
        let emptyStats = true;
        let stats = data.map(p => {
          if (p.total) emptyStats = false;
          return {
            x: p.ts,
            y: [p.accepted, p.dropped]
          };
        });
        this.setState({
          stats: stats,
          emptyStats: emptyStats,
          error: false,
          loading: false
        });
      },
      error: () => {
        this.setState({error: true, loading: false});
      }
    });
  },

  renderTooltip(point, pointIdx, chart) {
    let timeLabel = chart.getTimeLabel(point);
    let [accepted, dropped, filtered] = point.y;

    let value = `${accepted.toLocaleString()} accepted`;
    if (dropped) {
      value += `<br>${dropped.toLocaleString()} rate limited`;
    }
    if (filtered) {
      value += `<br>${filtered.toLocaleString()} filtered`;
    }

    return (
      '<div style="width:150px">' +
      `<div class="time-label">${timeLabel}</div>` +
      `<div class="value-label">${value}</div>` +
      '</div>'
    );
  },

  render() {
    if (this.state.loading) return <div className="box"><LoadingIndicator /></div>;
    else if (this.state.error) return <LoadingError onRetry={this.fetchData} />;

    return (
      <div className="panel panel-default">
        <div className="panel-heading">
          <h6>{t('Key usage in the last 30 days (by day)')}</h6>
        </div>
        <div className="panel-body p-a-0">
          {!this.state.emptyStats
            ? <div className="inbound-filters-stats p-a-1">
                <div className="bar-chart">
                  <StackedBarChart
                    points={this.state.stats}
                    height={100}
                    barClasses={['accepted', 'rate-limited']}
                    className="sparkline m-b-0"
                    tooltip={this.renderTooltip}
                  />
                </div>
              </div>
            : <div className="blankslate p-y-2">
                <h5>{t('Nothing recorded in the last 30 days.')}</h5>
                <p className="m-b-0">
                  {t('Total events captured using these credentials.')}
                </p>
              </div>}
        </div>
      </div>
    );
  }
});

const KeySettings = React.createClass({
{'fraction_non_alphanumeric': 0.15142706131078223, 'fraction_numerical': 0.00872093023255814, 'mean_word_length': 2.1485024958402663, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 71, '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': '6957594', 'n_tokens_mistral': 2289, 'n_tokens_neox': 2214, 'n_words': 516}