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
parent
ae2314312a
commit
b8f8294a8b
2 changed files with 16 additions and 158 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue