From cec5acb6eb4786939eed28dc263d916589206137 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 12 Feb 2021 17:48:46 +0100
Subject: [PATCH] create result with start cmd, show configSnapshots

---
 src/result/result-configs-dialog.js |  64 +++++++++++++
 src/scenario/scenario.js            | 139 +++++++++++++++++++---------
 2 files changed, 158 insertions(+), 45 deletions(-)
 create mode 100644 src/result/result-configs-dialog.js

diff --git a/src/result/result-configs-dialog.js b/src/result/result-configs-dialog.js
new file mode 100644
index 0000000..8dfc220
--- /dev/null
+++ b/src/result/result-configs-dialog.js
@@ -0,0 +1,64 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+import React from 'react';
+import Dialog from '../common/dialogs/dialog';
+import ReactJson from 'react-json-view';
+
+
+class ResultConfigDialog extends React.Component {
+  valid = true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      confirmCommand: false,
+      command: '',
+    };
+  }
+
+  onClose(canceled) {
+    this.props.onClose();
+  }
+
+  render() {
+    return (
+      <Dialog
+        show={this.props.show}
+        title={"Component Configurations for Result No. " + this.props.resultNo}
+        buttonTitle="Close"
+        onClose={(c) => this.onClose(c)}
+        valid={true}
+        size="lg"
+        blendOutCancel={true}
+      >
+        <form>
+            <ReactJson
+              src={this.props.configs}
+              name={false}
+              displayDataTypes={false}
+              displayObjectSize={false}
+              enableClipboard={false}
+              collapsed={false}
+            />
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ResultConfigDialog;
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 7bf2de9..1f7d127 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -37,7 +37,8 @@ import NewDashboardDialog from "../dashboard/new-dashboard";
 import EditDashboardDialog from '../dashboard/edit-dashboard';
 import EditFiles from '../file/edit-files'
 import NewResultDialog from '../result/new-result';
-import EditResultDialog from '../result/edit-result'
+import EditResultDialog from '../result/edit-result';
+import ResultConfigDialog from '../result/result-configs-dialog';
 
 
 import ICAction from '../ic/ic-action';
@@ -119,6 +120,9 @@ class Scenario extends React.Component {
       filesToDownload: prevState.filesToDownload,
       zipfiles: prevState.zipfiles || false,
       resultNodl: prevState.resultNodl,
+      resultConfigsModal: false,
+      modalResultConfigs: {},
+      modalResultConfigsIndex: 0,
 
       editOutputSignalsModal: prevState.editOutputSignalsModal || false,
       editInputSignalsModal: prevState.editInputSignalsModal || false,
@@ -161,12 +165,12 @@ class Scenario extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     // check whether file data has been loaded
-    if (this.state.filesToDownload && this.state.filesToDownload.length > 0  ) {
+    if (this.state.filesToDownload && this.state.filesToDownload.length > 0) {
       if (this.state.files != prevState.files) {
         if (!this.state.zipfiles) {
           let fileToDownload = FileStore.getState().filter(file => file.id === this.state.filesToDownload[0])
           if (fileToDownload.length === 1 && fileToDownload[0].data) {
-            const blob = new Blob([fileToDownload[0].data], {type: fileToDownload[0].type});
+            const blob = new Blob([fileToDownload[0].data], { type: fileToDownload[0].type });
             FileSaver.saveAs(blob, fileToDownload[0].name);
             this.setState({ filesToDownload: [] });
           }
@@ -178,7 +182,7 @@ class Scenario extends React.Component {
               zip.file(file.name, file.data);
             });
             let zipname = "result_" + this.state.resultNodl + "_" + Date.now();
-            zip.generateAsync({type: "blob"}).then(function(content) {
+            zip.generateAsync({ type: "blob" }).then(function (content) {
               saveAs(content, zipname);
             });
             this.setState({ filesToDownload: [] });
@@ -367,7 +371,7 @@ class Scenario extends React.Component {
     this.setState({ selectedConfigs: selectedConfigs });
   }
 
-  usesExternalIC(index){
+  usesExternalIC(index) {
     let icID = this.state.configs[index].icID;
 
     let ic = null;
@@ -381,8 +385,8 @@ class Scenario extends React.Component {
       return false;
     }
 
-    if (ic.managedexternally === true){
-      this.setState({ExternalICInUse: true})
+    if (ic.managedexternally === true) {
+      this.setState({ ExternalICInUse: true })
       return true
     }
 
@@ -396,6 +400,7 @@ class Scenario extends React.Component {
       return;
     }
 
+    let configs = [];
     for (let index of this.state.selectedConfigs) {
       // get IC for component config
       let ic = null;
@@ -410,6 +415,7 @@ class Scenario extends React.Component {
       }
 
       if (action.data.action === 'start') {
+        configs.push(this.copyConfig(index));
         action.data.parameters = this.state.configs[index].startParameters;
       }
 
@@ -424,6 +430,22 @@ class Scenario extends React.Component {
         token: this.state.sessionToken
       });
     }
+
+    if (configs != 0) { //create result (only if command was 'start')
+      let componentConfigs = {};
+      componentConfigs["configs"] = configs;
+      let data = {};
+      data["Description"] = "created by start cmd";
+      data["ResultFileIDs"] = [];
+      data["scenarioID"] = this.state.scenario.id;
+      data["ConfigSnapshots"] = JSON.stringify(componentConfigs, null, 2);
+      AppDispatcher.dispatch({
+        type: 'results/start-add',
+        data,
+        token: this.state.sessionToken,
+      })
+    }
+
   };
 
   getICName(icID) {
@@ -645,13 +667,13 @@ class Scenario extends React.Component {
     let toDownload = [];
     let zip = false;
 
-    if (typeof(param) === 'object') { // download all files
+    if (typeof (param) === 'object') { // download all files
       toDownload = param.resultFileIDs;
       zip = true;
       this.setState({ filesToDownload: toDownload, zipfiles: zip, resultNodl: param.id });
     } else { // download one file
       toDownload.push(param);
-      this.setState({ filesToDownload: toDownload, zipfiles: zip});
+      this.setState({ filesToDownload: toDownload, zipfiles: zip });
     }
 
     toDownload.forEach(fileid => {
@@ -677,6 +699,22 @@ class Scenario extends React.Component {
     });
   }
 
+  openResultConfigSnaphots(result) {
+    this.setState({
+      modalResultConfigs: JSON.parse(result.configSnapshots),
+      modalResultConfigsIndex: result.id,
+      resultConfigsModal: true
+    });
+  }
+
+  closeResultConfigSnapshots() {
+    this.setState({ resultConfigsModal: false });
+  }
+
+  modifyResultNoColumn(id, result) {
+    return <Button variant="link" style={{ color: '#047cab' }} onClick={() => this.openResultConfigSnaphots(result)}>{id}</Button>
+  }
+
   startPintura(configIndex) {
     let config = this.state.configs[configIndex];
 
@@ -740,40 +778,50 @@ class Scenario extends React.Component {
     let resulttable;
     if (this.state.results && this.state.results.length > 0) {
       resulttable = <div>
-          <Table data={this.state.results}>
-            <TableColumn title='Result No.' dataKey='id' />
-            <TableColumn title='Description' dataKey='description' />
-            <TableColumn title='Created at' dataKey='createdAt' />
-            <TableColumn title='Last update' dataKey='updatedAt' />
-            <TableColumn
-              title='Files/Data'
-              dataKey='resultFileIDs'
-              linkKey='filebuttons'
-              width='300'
-              onDownload={(index) => this.downloadResultData(index)}
-            />
-            <TableColumn
-              title='Options'
-              width='300'
-              editButton
-              downloadAllButton
-              deleteButton
-              onEdit={index => this.setState({ editResultsModal: true, modalResultsIndex: index })}
-              onDownloadAll={(index) => this.downloadResultData(this.state.results[index])}
-              onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
-            />
-          </Table>
+        <Table data={this.state.results}>
+          <TableColumn
+            title='Result No.'
+            dataKey='id'
+            modifier={(id, result) => this.modifyResultNoColumn(id, result)}
+          />
+          <TableColumn title='Description' dataKey='description' />
+          <TableColumn title='Created at' dataKey='createdAt' />
+          <TableColumn title='Last update' dataKey='updatedAt' />
+          <TableColumn
+            title='Files/Data'
+            dataKey='resultFileIDs'
+            linkKey='filebuttons'
+            width='300'
+            onDownload={(index) => this.downloadResultData(index)}
+          />
+          <TableColumn
+            title='Options'
+            width='300'
+            editButton
+            downloadAllButton
+            deleteButton
+            onEdit={index => this.setState({ editResultsModal: true, modalResultsIndex: index })}
+            onDownloadAll={(index) => this.downloadResultData(this.state.results[index])}
+            onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
+          />
+        </Table>
 
-          <EditResultDialog
-            sessionToken={this.state.sessionToken}
-            show={this.state.editResultsModal}
-            files={this.state.files}
-            results={this.state.results}
-            resultId={this.state.modalResultsIndex}
-            scenarioID={this.state.scenario.id}
-            onClose={this.closeEditResultsModal.bind(this)} />
-          <DeleteDialog title="result" name={this.state.modalResultsData.id} show={this.state.deleteResultsModal} onClose={(e) => this.closeDeleteResultsModal(e)} />
-        </div>
+        <EditResultDialog
+          sessionToken={this.state.sessionToken}
+          show={this.state.editResultsModal}
+          files={this.state.files}
+          results={this.state.results}
+          resultId={this.state.modalResultsIndex}
+          scenarioID={this.state.scenario.id}
+          onClose={this.closeEditResultsModal.bind(this)} />
+        <DeleteDialog title="result" name={this.state.modalResultsData.id} show={this.state.deleteResultsModal} onClose={(e) => this.closeDeleteResultsModal(e)} />
+        <ResultConfigDialog
+          show={this.state.resultConfigsModal}
+          configs={this.state.modalResultConfigs}
+          resultNo={this.state.modalResultConfigsIndex}
+          onClose={this.closeResultConfigSnapshots.bind(this)}
+        />
+      </div>
     }
 
     return <div className='section'>
@@ -858,7 +906,7 @@ class Scenario extends React.Component {
       </Table>
 
       { this.state.ExternalICInUse ? (
-        <div style={{float: 'left'}}>
+        <div style={{ float: 'left' }}>
           <ICAction
             runDisabled={this.state.selectedConfigs.length === 0}
             runAction={(action, when) => this.runAction(action, when)}
@@ -870,9 +918,10 @@ class Scenario extends React.Component {
               {id: '3', title: 'Resume', data: {action: 'resume'}}
             ]}/>
         </div>
-        ) : (<div/>)
+      ) : (<div />)
       }
-      <div style={{ clear: 'both' }} />
+
+      < div style={{ clear: 'both' }} />
 
       <EditConfigDialog
         show={this.state.editConfigModal}