message: Show chargeback data in UI.
diff: @@ -3,6 +3,7 @@ import * as _ from 'lodash';
  import { ColHead, DetailsPage, List, ListHeader, ListPage } from './factory';
  import { Cog, detailsPage, navFactory, NavBar, NavTitle, ResourceCog, Heading, ResourceLink, ResourceSummary, Timestamp, LabelList, DownloadButton } from './utils';
  +import { coFetchJSON } from '../co-fetch';
  // eslint-disable-next-line no-unused-vars
  import { K8sFullyQualifiedResourceReference, resourceURL, modelFor } from '../module/k8s';
  @@ -113,7 +114,59 @@ class ReportsDetails extends React.Component<ReportsDetailsProps> {
  }
  }
  -const reportsPages = [navFactory.details(detailsPage(ReportsDetails)), navFactory.editYaml()];
  +class ReportData extends React.Component<ReportDataProps, ReportDataState> {
  + constructor (props) {
  + super(props);
  + this.state = {
  + inFlight: false,
  + error: null,
  + data: null,
  + };
  + }
  +
  + fetchData () {
  + this.setState({
  + inFlight: true,
  + error: null,
  + });
  + coFetchJSON(dataURL(this.props.obj))
  + .then(res => this.setState({data: res}))
  + .catch(e => this.setState({error: e}))
  + .then(() => this.setState({inFlight: false}));
  + }
  +
  + componentDidMount () {
  + const phase = _.get(this.props.obj, ['status', 'phase']);
  + if (phase === 'Finished') {
  + this.fetchData();
  + }
  + }
  +
  + render () {
  + const {obj} = this.props;
  + const phase = _.get(obj, ['status', 'phase']);
  + return <div className="col-md-12">
  + <Heading text="Chargeback Report" />
  + <div className="co-m-pane__body">
  + <div className="row">
  + <div className="col-sm-6 col-xs-12">
  + { phase === 'Finished' ?
  + <pre>
  + {JSON.stringify(this.state.data, null, 2)}
  + </pre> :
  + <p>Report not finished running.</p> }
  + </div>
  + </div>
  + </div>
  + </div>;
  + }
  +}
  +
  +const reportsPages = [
  + navFactory.details(detailsPage(ReportsDetails)),
  + { name: 'Data', href: 'data', component: detailsPage(ReportData) },
  + navFactory.editYaml(),
  +];
  export const ReportsList: React.StatelessComponent = props => <List {...props} Header={ReportsHeader} Row={ReportsRow} pages={reportsPages} />;
  @@ -207,6 +260,15 @@ export type ReportsDetailsProps = {
  obj: any,
  };
  +export type ReportDataProps = {
  + obj: any,
  +};
  +export type ReportDataState = {
  + error: any,
  + data: any,
  + inFlight: boolean,
  +};
  +
  export type ReportsPageProps = {
  filterLabel: string,
  match: {url: string},
  