<commit_before>import React from 'react';
import {propEq, filter} from 'ramda'

import CodeCoverage from './code-coverage'

export default class BuildComponent extends React.Component {

  getPropertyResult(propertyName) {
    const propertyNameCheck = propEq('name', propertyName);
    const results = filter(propertyNameCheck, this.props.property);

    return results.length !== 0 ? results[0].value : ''
  }

  displayTestResults(failedTests, passedTests, buildComplete) {
    let styling = {
      display: 'flex',
      margin: '5px',
      padding: '10px',
      fontSize: '24px',
      color: 'white'
    };
    let content = `${passedTests} Passed`;
    if (buildComplete) {
      if (failedTests !== '') {
        content = `${failedTests} Failed`;
      }
    } else {
      content = 'Building...'
    }
    return (<div style={styling}>{content}</div>)
  }

  displayFormat(percentageString) {
    if (percentageString !== '') {
      return `${parseFloat(percentageString).toFixed(2)}`;
    }
  }

  render() {
    const failedTests = this.getPropertyResult('FailedTestCount');
    const buildPassed = this.props.status === 'SUCCESS';
    const buildComplete = this.props.state === 'finished';
    const passedTests = this.getPropertyResult('PassedTestCount');
    const ccLines = this.displayFormat(this.getPropertyResult('CodeCoverageL'));
    const ccFunctions = this.displayFormat(this.getPropertyResult('CodeCoverageM'));
    const ccStatements = this.displayFormat(this.getPropertyResult('CodeCoverageB'));
    let styling = {
      backgroundColor: !buildComplete ? 'orange' : buildPassed ? 'green' : '#FE2E2E',
      display: 'flex',
      flexDirection: 'column',
      alignSelf: 'center',
      margin: '5px',
      borderRadius: '5px',
      padding: '10px'
    };
    if (!buildComplete) {
      styling.animationName = 'pulse'
      styling.animationDuration = '1.5s'
      styling.animationIterationCount = 'infinite'
    }
    return (
      <div style={styling}>
        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
          <span style={{display: 'flex', fontSize: '12px', color: '#333'}}>{this.props.buildNumber}</span>
        </div>
        <div style={{display: 'flex', justifyContent: 'center', fontSize: '40px', color: 'white'}}>{this.props.branchName}</div>
        {this.displayTestResults(failedTests, passedTests, buildComplete)}
        <CodeCoverage lines={ccLines} functions={ccFunctions} statements={ccStatements}/>
      </div>
    )
  }
}
<commit_msg>Build areas are no fixed width, with an ellipsis for overly long branch names<commit_after>import React from 'react';
import {propEq, filter} from 'ramda'

import CodeCoverage from './code-coverage'

export default class BuildComponent extends React.Component {

  getPropertyResult(propertyName) {
    const propertyNameCheck = propEq('name', propertyName);
    const results = filter(propertyNameCheck, this.props.property);

    return results.length !== 0 ? results[0].value : ''
  }

  displayTestResults(failedTests, passedTests, buildComplete) {
    let styling = {
      display: 'flex',
      margin: '5px',
      padding: '10px',
      fontSize: '24px',
      color: 'white'
    };
    let content = `${passedTests} Passed`;
    if (buildComplete) {
      if (failedTests !== '') {
        content = `${failedTests} Failed`;
      }
    } else {
      content = 'Building...'
    }
    return (<div style={styling}>{content}</div>)
  }

  displayFormat(percentageString) {
    if (percentageString !== '') {
      return `${parseFloat(percentageString).toFixed(2)}`;
    }
  }

  render() {
    const failedTests = this.getPropertyResult('FailedTestCount');
    const buildPassed = this.props.status === 'SUCCESS';
    const buildComplete = this.props.state === 'finished';
    const passedTests = this.getPropertyResult('PassedTestCount');
    const ccLines = this.displayFormat(this.getPropertyResult('CodeCoverageL'));
    const ccFunctions = this.displayFormat(this.getPropertyResult('CodeCoverageM'));
    const ccStatements = this.displayFormat(this.getPropertyResult('CodeCoverageB'));
    let styling = {
      backgroundColor: !buildComplete ? 'orange' : buildPassed ? 'green' : '#FE2E2E',
      display: 'flex',
      flexDirection: 'column',
      alignSelf: 'center',
      margin: '5px',
      borderRadius: '5px',
      padding: '10px',
      width: '500px'
    };

    if (!buildComplete) {
      styling.animationName = 'pulse'
      styling.animationDuration = '1.5s'
      styling.animationIterationCount = 'infinite'
    }

    const branchStyle = {
      fontSize: '40px', color: 'white',
      textOverflow: 'ellipsis',
      width: '100%',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textAlign: 'center'
    }
    return (
      <div style={styling}>
        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
          <span style={{display: 'flex', fontSize: '12px', color: '#333'}}>{this.props.buildNumber}</span>
        </div>
        <div style={branchStyle}>{this.props.branchName}</div>
        {this.displayTestResults(failedTests, passedTests, buildComplete)}
        <CodeCoverage lines={ccLines} functions={ccFunctions} statements={ccStatements}/>
      </div>
    )
  }
}

{'fraction_non_alphanumeric': 0.14628114894426478, 'fraction_numerical': 0.009891573140574473, 'mean_word_length': 3.3963210702341136, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '317535', 'n_tokens_mistral': 1593, 'n_tokens_neox': 1564, 'n_words': 332}