ui/src/main/js/components/UpdateDiff.js

import React from 'react';

import Diff from 'components/Diff';
import PanelGroup, { Container, StandardPanelTitle } from 'components/Layout';

import { instanceRangeToString } from 'utils/Task';

export default class UpdateDiff extends React.Component {
  constructor(props) {
    super(props);
    this.state = {groupIdx: 0};
  }

  diffNavigation() {
    const that = this;
    const { initialState } = this.props.update.update.instructions;
    const currentGroup = initialState[this.state.groupIdx];
    if (initialState.length < 2) {
      return '';
    } else {
      const otherOptions = initialState.map((g, i) => i).filter((i) => i !== that.state.groupIdx);
      return (<div className='update-diff-picker'>
        Current Instances:
        <select onChange={(e) => this.setState({groupIdx: parseInt(e.target.value, 10)})}>
          <option key='current'>{instanceRangeToString(currentGroup.instances)}</option>
          {otherOptions.map((i) => (<option key={i} value={i}>
            {instanceRangeToString(initialState[i].instances)}
          </option>))}
        </select>
      </div>);
    }
  }

  render() {
    const { initialState, desiredState } = this.props.update.update.instructions;
    return (<Container>
      <PanelGroup noPadding title={<StandardPanelTitle title='Update Diff' />}>
        <div className='task-diff'>
          {this.diffNavigation()}
          <Diff left={initialState[this.state.groupIdx].task} right={desiredState.task} />
        </div>
      </PanelGroup>
    </Container>);
  }
}