content: import React from 'react';
  
  import Breadcrumb from 'components/Breadcrumb';
  import PanelGroup, { Container, StandardPanelTitle } from 'components/Layout';
  import UpdateList from 'components/UpdateList';
  
  import { getInProgressStates, getTerminalStates } from 'utils/Update';
  
  export const MAX_QUERY_SIZE = 100;
  
  export class UpdatesFetcher extends React.Component {
    constructor(props) {
      super(props);
      this.state = { updates: null };
    }
  
    componentWillMount() {
      const that = this;
      const query = new JobUpdateQuery();
      query.updateStatuses = this.props.states;
      query.limit = MAX_QUERY_SIZE;
      this.props.api.getJobUpdateSummaries(query, (response) => {
        const updates = response.result.getJobUpdateSummariesResult.updateSummaries;
        that.setState({updates});
        that.props.clusterFn(response.serverInfo.clusterName);
      });
    }
  
    render() {
      return (<Container>
        <PanelGroup noPadding title={<StandardPanelTitle title={this.props.title} />}>
          <UpdateList updates={this.state.updates} />
        </PanelGroup>
      </Container>);
    }
  }
  
  export default class Updates extends React.Component {
    constructor(props) {
      super(props);
      this.state = { cluster: null };
      this.clusterFn = this.setCluster.bind(this);
    }
  
    setCluster(cluster) {
      // TODO(dmcg): We should just have the Scheduler return the cluster as a global.
      this.setState({cluster});
    }
  
    render() {
      const api = this.props.api;
      return (<div className='update-page'>
        <Breadcrumb cluster={this.state.cluster} />
        <UpdatesFetcher
          api={api}
          clusterFn={this.clusterFn}
          states={getInProgressStates()}
          title='Updates In Progress' />
        <UpdatesFetcher
          api={api}
          clusterFn={this.clusterFn}
          states={getTerminalStates()}
          title='Recently Completed Updates' />
      </div>);
    }
  }
  