<commit_before>import { flatMap, values } from 'lodash';
import React from 'react';
import { react2angular } from 'react2angular';

import Alert from 'antd/lib/alert';
import Tabs from 'antd/lib/tabs';
import * as Grid from 'antd/lib/grid';
import Layout from '@/components/admin/Layout';
import { CounterCard } from '@/components/admin/CeleryStatus';
import { WorkersTable, QueuesTable, OtherJobsTable } from '@/components/admin/RQStatus';

import { $http } from '@/services/ng';
import recordEvent from '@/services/recordEvent';
import { routesToAngularRoutes } from '@/lib/utils';
import moment from 'moment';

class Jobs extends React.Component {
  state = {
    isLoading: true,
    error: null,

    queueCounters: [],
    overallCounters: { started: 0, queued: 0 },
    startedJobs: [],
    workers: [],
  };

  componentDidMount() {
    recordEvent('view', 'page', 'admin/rq_status');
    $http
      .get('/api/admin/queries/rq_status')
      .then(({ data }) => this.processQueues(data))
      .catch(error => this.handleError(error));
  }

  componentWillUnmount() {
    // Ignore data after component unmounted
    this.processQueues = () => {};
    this.handleError = () => {};
  }

  processQueues = ({ queues, workers }) => {
    const queueCounters = values(queues).map(({ started, ...rest }) => ({<commit_msg>auto-refresh data RQ jobs admin page (#4298)<commit_after>import { flatMap, values } from 'lodash';
import React from 'react';
import { react2angular } from 'react2angular';

import Alert from 'antd/lib/alert';
import Tabs from 'antd/lib/tabs';
import * as Grid from 'antd/lib/grid';
import Layout from '@/components/admin/Layout';
import { CounterCard } from '@/components/admin/CeleryStatus';
import { WorkersTable, QueuesTable, OtherJobsTable } from '@/components/admin/RQStatus';

import { $http } from '@/services/ng';
import recordEvent from '@/services/recordEvent';
import { routesToAngularRoutes } from '@/lib/utils';
import moment from 'moment';

class Jobs extends React.Component {
  state = {
    isLoading: true,
    error: null,

    queueCounters: [],
    overallCounters: { started: 0, queued: 0 },
    startedJobs: [],
    workers: [],
  };

  _refreshTimer = null;

  componentDidMount() {
    recordEvent('view', 'page', 'admin/rq_status');
    this.refresh();
  }

  componentWillUnmount() {
    // Ignore data after component unmounted
    clearTimeout(this._refreshTimer);
    this.processQueues = () => {};
    this.handleError = () => {};
  }

  refresh = () => {
    $http
      .get('/api/admin/queries/rq_status')
      .then(({ data }) => this.processQueues(data))
      .catch(error => this.handleError(error));

    this._refreshTimer = setTimeout(this.refresh, 60 * 1000);
  };

  processQueues = ({ queues, workers }) => {
    const queueCounters = values(queues).map(({ started, ...rest }) => ({
{'fraction_non_alphanumeric': 0.15901926444833625, 'fraction_numerical': 0.006304728546409807, 'mean_word_length': 3.791946308724832, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 16, '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': '3493862', 'n_tokens_mistral': 914, 'n_tokens_neox': 877, 'n_words': 215}