Commit b8f8294a authored by Sonja Happ's avatar Sonja Happ
Browse files

clean up view that lists all scenarios

parent ae231431
...@@ -34,6 +34,7 @@ class EditScenarioDialog extends React.Component { ...@@ -34,6 +34,7 @@ class EditScenarioDialog extends React.Component {
this.state = { this.state = {
name: '', name: '',
id: '', id: '',
running: false,
startParameters: {} startParameters: {}
}; };
} }
...@@ -69,25 +70,26 @@ class EditScenarioDialog extends React.Component { ...@@ -69,25 +70,26 @@ class EditScenarioDialog extends React.Component {
this.setState({ this.setState({
name: this.props.scenario.name, name: this.props.scenario.name,
id: this.props.scenario.id, id: this.props.scenario.id,
running: this.props.scenario.running,
startParameters: this.props.scenario.startParameters || {} startParameters: this.props.scenario.startParameters || {}
}); });
} };
handleStartParametersChange = startParameters => { handleStartParametersChange = startParameters => {
this.setState({ startParameters }); this.setState({ startParameters });
} };
render() { render() {
return <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}> return <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
<form> <form>
<FormGroup as={Col} controlId='name'> <FormGroup as={Col} controlId='name'>
<FormLabel>Name</FormLabel> <FormLabel column={false}>Name</FormLabel>
<FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} /> <FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
<FormControl.Feedback /> <FormControl.Feedback />
</FormGroup> </FormGroup>
<FormGroup as={Col} controlId='startParameters'> <FormGroup as={Col} controlId='startParameters'>
<FormLabel>Start Parameters</FormLabel> <FormLabel column={false}>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} /> <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
</FormGroup> </FormGroup>
......
...@@ -27,8 +27,6 @@ import FileSaver from 'file-saver'; ...@@ -27,8 +27,6 @@ import FileSaver from 'file-saver';
import AppDispatcher from '../common/app-dispatcher'; import AppDispatcher from '../common/app-dispatcher';
import ScenarioStore from './scenario-store'; import ScenarioStore from './scenario-store';
import UserStore from '../user/user-store'; import UserStore from '../user/user-store';
import SimulatorStore from '../simulator/simulator-store';
import SimulationModelStore from '../simulationmodel/simulation-model-store';
import Icon from '../common/icon'; import Icon from '../common/icon';
import Table from '../common/table'; import Table from '../common/table';
...@@ -37,27 +35,19 @@ import NewScenarioDialog from './new-scenario'; ...@@ -37,27 +35,19 @@ import NewScenarioDialog from './new-scenario';
import EditScenarioDialog from './edit-scenario'; import EditScenarioDialog from './edit-scenario';
import ImportScenarioDialog from './import-scenario'; import ImportScenarioDialog from './import-scenario';
import SimulatorAction from '../simulator/simulator-action';
import DeleteDialog from '../common/dialogs/delete-dialog'; import DeleteDialog from '../common/dialogs/delete-dialog';
class Scenarios extends Component { class Scenarios extends Component {
static getStores() { static getStores() {
return [ ScenarioStore, UserStore, SimulatorStore, SimulationModelStore ]; return [ ScenarioStore, UserStore ];
} }
static calculateState() { static calculateState() {
const scenarios = ScenarioStore.getState(); const scenarios = ScenarioStore.getState();
const simulationModels = SimulationModelStore.getState();
const simulators = SimulatorStore.getState();
const dashboards = []; // TODO get dashboards with DashboadStore.getState() here
const sessionToken = UserStore.getState().token; const sessionToken = UserStore.getState().token;
return { return {
scenarios, scenarios,
simulationModels,
simulators,
dashboards,
sessionToken, sessionToken,
newModal: false, newModal: false,
...@@ -77,67 +67,7 @@ class Scenarios extends Component { ...@@ -77,67 +67,7 @@ class Scenarios extends Component {
}); });
} }
componentDidUpdate() { componentDidUpdate() {}
const simulationModelIds = [];
const simulatorIds = [];
const dashboardIds = [];
for (let scenario of this.state.scenarios) {
// collect missing simulationModels
// TODO response of backend has to contain simulationModelIDs and dashboardIDs per scenario
for (let modelId of scenario.simulationModelIDs) {
const model = this.state.simulationModels.find(m => m != null && m.id === modelId);
if (model == null) {
simulationModelIds.push(modelId);
continue;
}
// collect missing simulators
if (this.state.simulators.includes(s => s.id === model.simulatorID) === false) {
simulatorIds.push(model.simulatorID);
}
}
// collect missing dashboards
for (let dashboardId of scenario.dashboardIDs) {
const dashboard = this.state.dashboards.find(d => d != null && d.id === dashboardId);
if (dashboard == null) {
dashboardIds.push(dashboardId);
}
}
}
// load missing simulationModels
if (simulationModelIds.length > 0) {
AppDispatcher.dispatch({
type: 'simulationModels/start-load',
data: simulationModelIds,
token: this.state.sessionToken
});
}
// load missing simulators
if (simulatorIds.length > 0) {
AppDispatcher.dispatch({
type: 'simulators/start-load',
data: simulatorIds,
token: this.state.sessionToken
});
}
// load missing dashboards
if (dashboardIds.length > 0) {
AppDispatcher.dispatch( {
type: 'dashboards/start-load',
data: dashboardIds,
token: this.state.sessionToken
})
}
}
closeNewModal(data) { closeNewModal(data) {
this.setState({ newModal : false }); this.setState({ newModal : false });
...@@ -164,7 +94,7 @@ class Scenarios extends Component { ...@@ -164,7 +94,7 @@ class Scenarios extends Component {
this.setState({ deleteModal: true, modalScenario: deleteScenario }); this.setState({ deleteModal: true, modalScenario: deleteScenario });
} }
closeDeleteModal = confirmDelete => { closeDeleteModal(confirmDelete) {
this.setState({ deleteModal: false }); this.setState({ deleteModal: false });
if (confirmDelete === false) { if (confirmDelete === false) {
...@@ -176,7 +106,7 @@ class Scenarios extends Component { ...@@ -176,7 +106,7 @@ class Scenarios extends Component {
data: this.state.modalScenario, data: this.state.modalScenario,
token: this.state.sessionToken token: this.state.sessionToken
}); });
} };
showEditModal(id) { showEditModal(id) {
// get scenario by id // get scenario by id
...@@ -221,83 +151,20 @@ class Scenarios extends Component { ...@@ -221,83 +151,20 @@ class Scenarios extends Component {
this.confirmDeleteModal(); this.confirmDeleteModal();
} }
} };
exportScenario(index) { exportScenario(index) {
// filter properties // filter properties
let scenario = Object.assign({}, this.state.scenarios[index]); let scenario = Object.assign({}, this.state.scenarios[index]);
delete scenario.id; delete scenario.id;
delete scenario.users;
delete scenario.dashboards;
scenario.simulationModels.forEach(model => { // TODO request missing scenario parameters (Dashboards and Simulation Modles) recursively for export
delete model.simulator;
});
// show save dialog // show save dialog
const blob = new Blob([JSON.stringify(scenario, null, 2)], { type: 'application/json' }); const blob = new Blob([JSON.stringify(scenario, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, 'scenario - ' + scenario.name + '.json'); FileSaver.saveAs(blob, 'scenario - ' + scenario.name + '.json');
} }
onScenarioChecked(index, event) {
const selectedScenarios = Object.assign([], this.state.selectedScenarios);
for (let key in selectedScenarios) {
if (selectedScenarios[key] === index) {
// update existing entry
if (event.target.checked) {
return;
}
selectedScenarios.splice(key, 1);
this.setState({ selectedScenarios });
return;
}
}
// add new entry
if (event.target.checked === false) {
return;
}
selectedScenarios.push(index);
this.setState({ selectedScenarios });
}
runAction = action => {
for (let index of this.state.selectedScenarios) {
for (let model of this.state.scenarios[index].simulationModels) {
// get simulation model
const simulationModel = this.state.simulationModels.find(m => m != null && m.id === model);
if (simulationModel == null) {
continue;
}
// get simulator for model
let simulator = null;
for (let sim of this.state.simulators) {
if (sim.id === simulationModel.simulatorID) {
simulator = sim;
}
}
if (simulator == null) {
continue;
}
if (action.data.action === 'start') {
action.data.parameters = Object.assign({}, this.state.scenarios[index].startParameters, simulationModel.startParameters);
}
AppDispatcher.dispatch({
type: 'simulators/start-action',
simulator,
data: action.data,
token: this.state.sessionToken
});
}
}
};
render() { render() {
const buttonStyle = { const buttonStyle = {
...@@ -309,10 +176,11 @@ class Scenarios extends Component { ...@@ -309,10 +176,11 @@ class Scenarios extends Component {
<h1>Scenarios</h1> <h1>Scenarios</h1>
<Table data={this.state.scenarios}> <Table data={this.state.scenarios}>
<TableColumn checkbox onChecked={(index, event) => this.onScenarioChecked(index, event)} width='30' />
<TableColumn title='Name' dataKey='name' link='/scenarios/' linkKey='id' /> <TableColumn title='Name' dataKey='name' link='/scenarios/' linkKey='id' />
<TableColumn title='ID' dataKey='id' link='/scenarios/' linkKey='id' />
<TableColumn title='Running' dataKey='running' link='/scenarios/' linkKey='id' />
<TableColumn <TableColumn
width='100' width='200'
editButton editButton
deleteButton deleteButton
exportButton exportButton
...@@ -322,18 +190,6 @@ class Scenarios extends Component { ...@@ -322,18 +190,6 @@ class Scenarios extends Component {
/> />
</Table> </Table>
<div style={{ float: 'left' }}>
<SimulatorAction
runDisabled={this.state.selectedScenarios.length === 0}
runAction={this.runAction}
actions={[
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
]}/>
</div>
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Scenario</Button> <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Scenario</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button> <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
...@@ -345,7 +201,7 @@ class Scenarios extends Component { ...@@ -345,7 +201,7 @@ class Scenarios extends Component {
<EditScenarioDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} scenario={this.state.modalScenario} /> <EditScenarioDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} scenario={this.state.modalScenario} />
<ImportScenarioDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} nodes={this.state.nodes} /> <ImportScenarioDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} nodes={this.state.nodes} />
<DeleteDialog title="scenario" name={this.state.modalScenario.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} /> <DeleteDialog title="scenario" name={this.state.modalScenario.name} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
</div> </div>
); );
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment