<commit_before>import React, { PureComponent } from 'react'
import { PropTypes } from 'prop-types'

// import 'font-awesome-webpack'
import classNames from 'classnames/bind'
import { DateTime } from 'luxon'
import Modal from 'react-modal'

import styles from '../styles/core.scss'

import { formatBytes, percentage } from '../lib/utils'
import * as constant from '../lib/const'

const cx = classNames.bind(styles)

export default class History extends PureComponent {
	static propTypes = {
		store: PropTypes.object.isRequired,
	}

	constructor(props) {
		super(props)

		this.state = {
			showModal: false,
			toConfirm: '',
			id: '',
			operation: null,
		}
	}

	onRequestClose = _ => {
		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	confirm = (toConfirm, id, operation) => _ => {
		this.setState({ showModal: true, toConfirm, id, operation })
	}

	onYes = _ => {
		const { actions } = this.props.store

		if (this.state.toConfirm === 'replay') {
			actions.replay(this.state.id)
		} else if (this.state.toConfirm === 'validate') {
			actions.scatterValidate(this.state.id)
		} else if (this.state.toConfirm === 'rmsrc') {
			actions.removeSource(this.state.operation, this.state.id)
		}

		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	onNo = _ => {
		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	flipOperation = id => e => {
		const { actions } = this.props.store
		actions.flipOperation(id)
		e.preventDefault()
	}

	componentDidMount() {
		const { actions } = this.props.store
		actions.getHistory()
	}

	render() {
		const { state } = this.props.store

		if (!(state.core && state.core.history && state.core.history.order && state.core.history.order.length > 0)) {
			return (
				<section className={cx('row', 'bottom-spacer-half')}>
					<div className={cx('col-xs-12')}>
						<span>History is not yet available.</span>
					</div>
				</section>
			)
		}

		// let dryRuns = 0

		const operations = state.core.history.order.map((id, index) => {
			const op = state.core.history.items[id]

			// it's safe to validate or replay an operation only when it's the most recent, excluding dry-runs, since
			// they don't physically alter files
			// if (op.dryRun) dryRuns++
			// let's remove dryRuns condition
			// it can be replayed, validated or have a command source removal only if it's the most recent
			const safe = index === 0

			const replay = !op.dryRun && safe
			const validate = !op.dryRun && op.opKind === constant.OP_SCATTER_COPY && safe

			const flagged = op.commands.some(command => command.status === constant.CMD_FLAGGED)
			const status = flagged ? (
				<i className={cx('fa fa-check-circle', 'statusFlagged')} />
			) : op.bytesTransferred === op.bytesToTransfer ? (
				<i className={cx('fa fa-check-circle', 'statusDone')} />
			) : (
				<i className={cx('fa fa-times-circle', 'statusInterrupted')} />
			)

			const { value, unit } = formatBytes(op.bytesTransferred)

			const finished = DateTime.fromISO(op.finished)
			const elapsed = finished.diff(DateTime.fromISO(op.started), ['hours', 'minutes', 'seconds'])

			const chevron = op.open ? (
				<a href="" onClick={this.flipOperation(op.id)}>
					<i className={cx('fa fa-chevron-circle-up', 'statusInProgress', 'chevron')} />
				</a>
			) : (
				<a href="" onClick={this.flipOperation(op.id)}>
					<i className={cx('fa fa-chevron-circle-down', 'statusInProgress', 'chevron')} />
				</a>
			)<commit_msg>Add contrast to drop down in history screen<commit_after>import React, { PureComponent } from 'react'
import { PropTypes } from 'prop-types'

// import 'font-awesome-webpack'
import classNames from 'classnames/bind'
import { DateTime } from 'luxon'
import Modal from 'react-modal'

import styles from '../styles/core.scss'

import { formatBytes, percentage } from '../lib/utils'
import * as constant from '../lib/const'

const cx = classNames.bind(styles)

export default class History extends PureComponent {
	static propTypes = {
		store: PropTypes.object.isRequired,
	}

	constructor(props) {
		super(props)

		this.state = {
			showModal: false,
			toConfirm: '',
			id: '',
			operation: null,
		}
	}

	onRequestClose = _ => {
		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	confirm = (toConfirm, id, operation) => _ => {
		this.setState({ showModal: true, toConfirm, id, operation })
	}

	onYes = _ => {
		const { actions } = this.props.store

		if (this.state.toConfirm === 'replay') {
			actions.replay(this.state.id)
		} else if (this.state.toConfirm === 'validate') {
			actions.scatterValidate(this.state.id)
		} else if (this.state.toConfirm === 'rmsrc') {
			actions.removeSource(this.state.operation, this.state.id)
		}

		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	onNo = _ => {
		this.setState({ showModal: false, toConfirm: '', id: '', operation: null })
	}

	flipOperation = id => e => {
		const { actions } = this.props.store
		actions.flipOperation(id)
		e.preventDefault()
	}

	componentDidMount() {
		const { actions } = this.props.store
		actions.getHistory()
	}

	render() {
		const { state } = this.props.store

		if (!(state.core && state.core.history && state.core.history.order && state.core.history.order.length > 0)) {
			return (
				<section className={cx('row', 'bottom-spacer-half')}>
					<div className={cx('col-xs-12')}>
						<span>History is not yet available.</span>
					</div>
				</section>
			)
		}

		// let dryRuns = 0

		const operations = state.core.history.order.map((id, index) => {
			const op = state.core.history.items[id]

			// it's safe to validate or replay an operation only when it's the most recent, excluding dry-runs, since
			// they don't physically alter files
			// if (op.dryRun) dryRuns++
			// let's remove dryRuns condition
			// it can be replayed, validated or have a command source removal only if it's the most recent
			const safe = index === 0

			const replay = !op.dryRun && safe
			const validate = !op.dryRun && op.opKind === constant.OP_SCATTER_COPY && safe

			const flagged = op.commands.some(command => command.status === constant.CMD_FLAGGED)
			const status = flagged ? (
				<i className={cx('fa fa-check-circle', 'statusFlagged')} />
			) : op.bytesTransferred === op.bytesToTransfer ? (
				<i className={cx('fa fa-check-circle', 'statusDone')} />
			) : (
				<i className={cx('fa fa-times-circle', 'statusInterrupted')} />
			)

			const { value, unit } = formatBytes(op.bytesTransferred)

			const finished = DateTime.fromISO(op.finished)
			const elapsed = finished.diff(DateTime.fromISO(op.started), ['hours', 'minutes', 'seconds'])

			const chevron = op.open ? (
				<a href="" onClick={this.flipOperation(op.id)}>
					<i className={cx('fa fa-chevron-circle-up', 'opWhite', 'chevron')} />
				</a>
			) : (
				<a href="" onClick={this.flipOperation(op.id)}>
					<i className={cx('fa fa-chevron-circle-down', 'opWhite', 'chevron')} />
				</a>
			)
{'fraction_non_alphanumeric': 0.1628237973242243, 'fraction_numerical': 0.0014232849416453174, 'mean_word_length': 3.453105196451204, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 53, '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': '3929622', 'n_tokens_mistral': 2622, 'n_tokens_neox': 2278, 'n_words': 553}