<commit_before>'use strict';

class AuMigrationStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      running: false,
      progress: "0%",
      status: "Loading status",
      delay: 1000,
    };
  }

  componentDidMount() {
    this.__loadStatus();
    this.interval = setInterval(this.__loadStatus, this.state.delay);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay != this.state.delay) {
      clearInterval(this.interval);
      this.interval = setInterval(this.__loadStatus, this.state.delay);
    }

    // FIXME: Replace with a jQuery solution?
    if (prevState.running != this.state.running) {
      for (const e of document.querySelectorAll("input[type='submit']")) {
        if (this.state.running) {
          e.setAttribute("disabled", "disabled");
        } else {
          e.removeAttribute("disabled");
        }
      }
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  __loadStatus = () => {
    fetch("/MigrateContent?output=json")
      .then(response => response.json())
      .then(
        (result) => {
          this.setState({
            running: result.running,
            status: result.status,
            progress: result.progress,
          });
        },
        (error) => {
            console.log("Could not fetch status information: " + error);
        }
      );
  }

  render() {
    return (
      <div>
        <div>Running: {this.state.running ? "Yes" : "No"}</div>
        <div>Status: {this.state.status}</div>
        <div className="ui-progressbar">
          <div style={{width:this.state.progress}}>{this.state.progress}</div>
        </div>
      </div>
    );
  }
}

const appContainer = document.getElementById('AuMigrationStatusApp');
ReactDOM.render(React.createElement(AuMigrationStatus), appContainer);<commit_msg>Added polling delay when React component experiences a problem fetching status information, or when an AU migration is not in progress<commit_after>'use strict';

class AuMigrationStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      running: false,
      fetchError: true,
      progress: "0%",
      status: "Loading status",
      delay: 1000,
    };
  }

  componentDidMount() {
    this.__loadStatus();
    this.interval = setInterval(this.__loadStatus, this.state.delay);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay != this.state.delay) {
      clearInterval(this.interval);
      this.interval = setInterval(this.__loadStatus, this.state.delay);
    }

    // FIXME: Replace with a jQuery solution?
    if (prevState.running != this.state.running) {
      for (const e of document.querySelectorAll("input[type='submit']")) {
        if (this.state.running) {
          e.setAttribute("disabled", "disabled");
        } else {
          e.removeAttribute("disabled");
        }
      }
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  __loadStatus = () => {
    fetch("/MigrateContent?output=json")
      .then(response => response.json())
      .then(
        (result) => {
          this.setState({
            running: result.running,
            fetchError: false,
            status: result.status,
            progress: result.progress,
            delay: result.running ? 1000 : 5000,
          });
        },
        (error) => {
            console.error("Could not fetch status information: " + error);

            this.setState({
              fetchError: true,
              status: "Could not fetch status information",
              delay: 5000,
            });
        }
      );
  }

  render() {
    return (
      <div>
        <div>Running: {this.state.fetchError ? "Unknown" : this.state.running ? "Yes" : "No"}</div>
        <div>Status: {this.state.status}</div>
        <div className="ui-progressbar">
          <div style={{width:this.state.progress}}>{this.state.progress}</div>
        </div>
      </div>
    );
  }
}

const appContainer = document.getElementById('AuMigrationStatusApp');
ReactDOM.render(React.createElement(AuMigrationStatus), appContainer);
{'fraction_non_alphanumeric': 0.14001438503955885, 'fraction_numerical': 0.005274514504914889, 'mean_word_length': 2.3536977491961415, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 31, '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': '361784', 'n_tokens_mistral': 1213, 'n_tokens_neox': 1193, 'n_words': 228}