<commit_before>import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import rootComponent from '../../rootComponent';

import {
  FetchRequestsInState,
  RemoveRequest,
  UnpauseRequest,
  RunRequest,
  ScaleRequest,
  BounceRequest,
  FetchRequestRun
} from '../../actions/api/requests';
import { FetchRequestRunHistory } from '../../actions/api/history';
import { FetchTaskFiles } from '../../actions/api/sandbox';
import { refresh } from '../../actions/ui/requests';

import UITable from '../common/table/UITable';
import RequestFilters from './RequestFilters';
import * as Cols from './Columns';

import filterSelector from '../../selectors/requests/filterSelector';

import Utils from '../../utils';
import Loader from '../common/Loader';

class RequestsPage extends Component {

  static propTypes = {
    requestsInState: PropTypes.array,
    fetchFilter: PropTypes.func,
    removeRequest: PropTypes.func,
    unpauseRequest: PropTypes.func,
    runNow: PropTypes.func,
    fetchRun: PropTypes.func,
    fetchRunHistory: PropTypes.func,
    fetchTaskFiles: PropTypes.func,
    scaleRequest: PropTypes.func,
    bounceRequest: PropTypes.func,
    params: PropTypes.object,
    router: PropTypes.object,
    filter: PropTypes.shape({
      state: PropTypes.string,
      subFilter: PropTypes.array,
      searchFilter: PropTypes.string
    }).isRequired,
    requestUtilizations: PropTypes.array,
    groups: PropTypes.array
  };

  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  handleFilterChange(filter) {
    const lastFilterState = this.props.filter.state;
    this.setState({
      loading: lastFilterState !== filter.state
    });

    const subFilter = filter.subFilter.length === RequestFilters.REQUEST_TYPES.length ? 'all' : filter.subFilter.join(',');
    this.props.router.push(`/requests/${filter.group}/${filter.state}/${subFilter}/${filter.searchFilter}`);

    if (lastFilterState !== filter.state) {
      this.props.fetchFilter(filter.state).then(() => {
        this.setState({
          loading: false
        });
      });
    }
  }

  getColumns() {
    switch (this.props.filter.state) {
      case 'pending':
        return [Cols.RequestId, Cols.PendingType];
      case 'cleanup':
        return [Cols.RequestId, Cols.CleaningUser, Cols.CleaningTimestamp, Cols.CleanupType];
      case 'noDeploy':
        return [
          Cols.Starred,
          Cols.Type,
          Cols.State,
          Cols.RequestId,
          Cols.Instances,
          Cols.Group,
          Cols.Actions
        ];
      default:
        return [
          Cols.Starred,
          Cols.Type,
          Cols.State,
          Cols.RequestId,
          Cols.Instances,
          Cols.DeployId,
          Cols.DeployUser,
          Cols.LastDeploy,
          Cols.Group,
          Cols.Actions
        ];
    }
  }

  render() {
    const displayRequests = filterSelector({requestsInState: this.props.requestsInState, filter: this.props.filter, requestUtilizations: this.props.requestUtilizations});

    let table;
    if (this.state.loading) {
      table = <Loader />;
    } else if (!displayRequests.length) {
      table = <div className="empty-table-message"><p>No matching requests</p></div>;
    } else {
      table = (
        <UITable
          ref="table"
          data={displayRequests}
          keyGetter={(request) => (request.request ? request.request.id : request.requestId)}
        >
          {this.getColumns()}
        </UITable>
      );
    }

    return (
      <div className="tabbed-page">
        <RequestFilters
          filter={this.props.filter}<commit_msg>More descriptive empty table message on requests page<commit_after>import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import rootComponent from '../../rootComponent';

import {
  FetchRequestsInState,
  RemoveRequest,
  UnpauseRequest,
  RunRequest,
  ScaleRequest,
  BounceRequest,
  FetchRequestRun
} from '../../actions/api/requests';
import { FetchRequestRunHistory } from '../../actions/api/history';
import { FetchTaskFiles } from '../../actions/api/sandbox';
import { refresh } from '../../actions/ui/requests';

import UITable from '../common/table/UITable';
import RequestFilters from './RequestFilters';
import * as Cols from './Columns';

import filterSelector from '../../selectors/requests/filterSelector';

import Utils from '../../utils';
import Loader from '../common/Loader';

class RequestsPage extends Component {

  static propTypes = {
    requestsInState: PropTypes.array,
    fetchFilter: PropTypes.func,
    removeRequest: PropTypes.func,
    unpauseRequest: PropTypes.func,
    runNow: PropTypes.func,
    fetchRun: PropTypes.func,
    fetchRunHistory: PropTypes.func,
    fetchTaskFiles: PropTypes.func,
    scaleRequest: PropTypes.func,
    bounceRequest: PropTypes.func,
    params: PropTypes.object,
    router: PropTypes.object,
    filter: PropTypes.shape({
      state: PropTypes.string,
      subFilter: PropTypes.array,
      searchFilter: PropTypes.string
    }).isRequired,
    requestUtilizations: PropTypes.array,
    groups: PropTypes.array
  };

  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  handleFilterChange(filter) {
    const lastFilterState = this.props.filter.state;
    this.setState({
      loading: lastFilterState !== filter.state
    });

    const subFilter = filter.subFilter.length === RequestFilters.REQUEST_TYPES.length ? 'all' : filter.subFilter.join(',');
    this.props.router.push(`/requests/${filter.group}/${filter.state}/${subFilter}/${filter.searchFilter}`);

    if (lastFilterState !== filter.state) {
      this.props.fetchFilter(filter.state).then(() => {
        this.setState({
          loading: false
        });
      });
    }
  }

  getColumns() {
    switch (this.props.filter.state) {
      case 'pending':
        return [Cols.RequestId, Cols.PendingType];
      case 'cleanup':
        return [Cols.RequestId, Cols.CleaningUser, Cols.CleaningTimestamp, Cols.CleanupType];
      case 'noDeploy':
        return [
          Cols.Starred,
          Cols.Type,
          Cols.State,
          Cols.RequestId,
          Cols.Instances,
          Cols.Group,
          Cols.Actions
        ];
      default:
        return [
          Cols.Starred,
          Cols.Type,
          Cols.State,
          Cols.RequestId,
          Cols.Instances,
          Cols.DeployId,
          Cols.DeployUser,
          Cols.LastDeploy,
          Cols.Group,
          Cols.Actions
        ];
    }
  }

  render() {
    const displayRequests = filterSelector({requestsInState: this.props.requestsInState, filter: this.props.filter, requestUtilizations: this.props.requestUtilizations});

    let table;
    if (this.state.loading) {
      table = <Loader />;
    } else if (!displayRequests.length) {
      table = <div className="empty-table-message"><p>No requests found. You may not be part of the correct groups or teams to view the desired requests.</p></div>;
    } else {
      table = (
        <UITable
          ref="table"
          data={displayRequests}
          keyGetter={(request) => (request.request ? request.request.id : request.requestId)}
        >
          {this.getColumns()}
        </UITable>
      );
    }

    return (
      <div className="tabbed-page">
        <RequestFilters
          filter={this.props.filter}
{'fraction_non_alphanumeric': 0.12938219341182697, 'fraction_numerical': 0.0, 'mean_word_length': 2.559322033898305, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, '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': '1688174', 'n_tokens_mistral': 2169, 'n_tokens_neox': 2215, 'n_words': 444}