diff options
Diffstat (limited to 'src/components')
3 files changed, 114 insertions, 9 deletions
diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js index c3e3db8d..001b0e32 100644 --- a/src/components/experiments/ExperimentListComponent.js +++ b/src/components/experiments/ExperimentListComponent.js @@ -1,6 +1,8 @@ +import PropTypes from "prop-types"; import React from "react"; +import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer"; -const ExperimentListContainer = ({experiments}) => ( +const ExperimentListComponent = ({experimentIds}) => ( <table className="table"> <thead> <tr> @@ -11,16 +13,15 @@ const ExperimentListContainer = ({experiments}) => ( </tr> </thead> <tbody> - {experiments.map(experiment => ( - <tr> - <td>{experiment.name}</td> - <td>{experiment.path.name}</td> - <td>{experiment.trace.name}</td> - <td>{experiment.scheduler.name}</td> - </tr> + {experimentIds.map(experimentId => ( + <ExperimentRowContainer experimentId={experimentId}/> ))} </tbody> </table> ); -export default ExperimentListContainer; +ExperimentListComponent.propTypes = { + experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, +}; + +export default ExperimentListComponent; diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js new file mode 100644 index 00000000..79ce3eea --- /dev/null +++ b/src/components/experiments/ExperimentRowComponent.js @@ -0,0 +1,17 @@ +import React from "react"; +import Shapes from "../../shapes/index"; + +const ExperimentRowComponent = ({experiment}) => ( + <tr> + <td>{experiment.name}</td> + <td>{experiment.path.name}</td> + <td>{experiment.trace.name}</td> + <td>{experiment.scheduler.name}</td> + </tr> +); + +ExperimentRowComponent.propTypes = { + experiment: Shapes.Experiment +}; + +export default ExperimentRowComponent; diff --git a/src/components/modals/custom-components/NewExperimentModalComponent.js b/src/components/modals/custom-components/NewExperimentModalComponent.js new file mode 100644 index 00000000..9efccc8a --- /dev/null +++ b/src/components/modals/custom-components/NewExperimentModalComponent.js @@ -0,0 +1,87 @@ +import PropTypes from "prop-types"; +import React from "react"; +import Shapes from "../../../shapes"; +import Modal from "../Modal"; + +class NewExperimentModalComponent extends React.Component { + static propTypes = { + show: PropTypes.bool.isRequired, + paths: PropTypes.arrayOf(Shapes.Path), + schedulers: PropTypes.arrayOf(Shapes.Scheduler), + traces: PropTypes.arrayOf(Shapes.Trace), + callback: PropTypes.func.isRequired, + }; + + reset() { + this.textInput.value = ""; + this.pathSelect.selectedIndex = 0; + this.traceSelect.selectedIndex = 0; + this.schedulerSelect.selectedIndex = 0; + } + + onSubmit() { + this.props.callback(this.textInput.value, this.pathSelect.value, this.traceSelect.value, + this.schedulerSelect.value); + this.reset(); + } + + onCancel() { + this.props.callback(undefined); + this.reset(); + } + + render() { + return ( + <Modal title="New Experiment" + show={this.props.show} + onSubmit={this.onSubmit.bind(this)} + onCancel={this.onCancel.bind(this)}> + <form onSubmit={e => { + e.preventDefault(); + this.onSubmit(); + }}> + <div className="form-group"> + <label className="form-control-label">Name:</label> + <input type="text" className="form-control" + ref={textInput => this.textInput = textInput}/> + </div> + <div className="form-group"> + <label className="form-control-label">Path:</label> + <select className="form-control" + ref={pathSelect => this.pathSelect = pathSelect}> + {this.props.paths.map(path => ( + <option value={path.id} key={path.id}> + {path.name} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Trace:</label> + <select className="form-control" + ref={traceSelect => this.traceSelect = traceSelect}> + {this.props.traces.map(trace => ( + <option value={trace.id} key={trace.id}> + {trace.name} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Scheduler:</label> + <select className="form-control" + ref={schedulerSelect => this.schedulerSelect = schedulerSelect}> + {this.props.schedulers.map(scheduler => ( + <option value={scheduler.name} key={scheduler.name}> + {scheduler.name} + </option> + ))} + </select> + </div> + </form> + </Modal> + ); + } +} + +export default NewExperimentModalComponent; |