1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

clean up view that lists all scenarios

This commit is contained in:
Sonja Happ 2019-09-17 15:33:15 +02:00
parent ae2314312a
commit b8f8294a8b
2 changed files with 16 additions and 158 deletions

View file

@ -34,6 +34,7 @@ class EditScenarioDialog extends React.Component {
this.state = {
name: '',
id: '',
running: false,
startParameters: {}
};
}
@ -69,25 +70,26 @@ class EditScenarioDialog extends React.Component {
this.setState({
name: this.props.scenario.name,
id: this.props.scenario.id,
running: this.props.scenario.running,
startParameters: this.props.scenario.startParameters || {}
});
}
};
handleStartParametersChange = startParameters => {
this.setState({ startParameters });
}
};
render() {
return <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
<form>
<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.Feedback />
</FormGroup>
<FormGroup as={Col} controlId='startParameters'>
<FormLabel>Start Parameters</FormLabel>
<FormLabel column={false}>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
</FormGroup>

View file

@ -27,8 +27,6 @@ import FileSaver from 'file-saver';
import AppDispatcher from '../common/app-dispatcher';
import ScenarioStore from './scenario-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 Table from '../common/table';
@ -37,27 +35,19 @@ import NewScenarioDialog from './new-scenario';
import EditScenarioDialog from './edit-scenario';
import ImportScenarioDialog from './import-scenario';
import SimulatorAction from '../simulator/simulator-action';
import DeleteDialog from '../common/dialogs/delete-dialog';
class Scenarios extends Component {
static getStores() {
return [ ScenarioStore, UserStore, SimulatorStore, SimulationModelStore ];
return [ ScenarioStore, UserStore ];
}
static calculateState() {
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;
return {
scenarios,
simulationModels,
simulators,
dashboards,
sessionToken,
newModal: false,
@ -77,67 +67,7 @@ class Scenarios extends Component {
});
}
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
})
}
}
componentDidUpdate() {}
closeNewModal(data) {
this.setState({ newModal : false });
@ -164,7 +94,7 @@ class Scenarios extends Component {
this.setState({ deleteModal: true, modalScenario: deleteScenario });
}
closeDeleteModal = confirmDelete => {
closeDeleteModal(confirmDelete) {
this.setState({ deleteModal: false });
if (confirmDelete === false) {
@ -176,7 +106,7 @@ class Scenarios extends Component {
data: this.state.modalScenario,
token: this.state.sessionToken
});
}
};
showEditModal(id) {
// get scenario by id
@ -221,83 +151,20 @@ class Scenarios extends Component {
this.confirmDeleteModal();
}
}
};
exportScenario(index) {
// filter properties
let scenario = Object.assign({}, this.state.scenarios[index]);
delete scenario.id;
delete scenario.users;
delete scenario.dashboards;
scenario.simulationModels.forEach(model => {
delete model.simulator;
});
// TODO request missing scenario parameters (Dashboards and Simulation Modles) recursively for export
// show save dialog
const blob = new Blob([JSON.stringify(scenario, null, 2)], { type: 'application/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() {
const buttonStyle = {
@ -309,10 +176,11 @@ class Scenarios extends Component {
<h1>Scenarios</h1>
<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='ID' dataKey='id' link='/scenarios/' linkKey='id' />
<TableColumn title='Running' dataKey='running' link='/scenarios/' linkKey='id' />
<TableColumn
width='100'
width='200'
editButton
deleteButton
exportButton
@ -322,18 +190,6 @@ class Scenarios extends Component {
/>
</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' }}>
<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>
@ -345,7 +201,7 @@ class Scenarios extends Component {
<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} />
<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>
);
}