Merge branch 'ic-page-customization' into 'master'

Customization of IC pages for VILLASnode and VILLASrelay See merge request acs/public/villas/web!81
2025-03-09 00:00:01 +01:00 · 2021-05-06 14:58:35 +00:00 · 2021-05-06 14:58:35 +00:00 · 1cd7afbad0
commit 1cd7afbad0
parent ac2883969b 9a82072b36
7 changed files with 393 additions and 250 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17872,7 +17872,8 @@
        },
        "ssri": {
          "version": "6.0.1",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
          "requires": {
            "figgy-pudding": "^3.5.1"
          }
--- a/src/ic/ic-store.js
+++ b/src/ic/ic-store.js
@ -114,7 +114,7 @@ class InfrastructureComponentStore extends ArrayStore {

      case 'ics/status-received':
        let tempIC = action.ic;
-        if(!tempIC.managedexternally){
+        if (!tempIC.managedexternally) {
          tempIC.state = action.data.state;
          tempIC.uptime = action.data.time_now - action.data.time_started;
          tempIC.statusupdateraw = action.data
@ -123,6 +123,8 @@ class InfrastructureComponentStore extends ArrayStore {
            data: tempIC,
            token: action.token,
          });
+
+          ICsDataManager.getConfig(action.url, action.token, tempIC);
        }
        return super.reduce(state, action);

@ -130,9 +132,45 @@ class InfrastructureComponentStore extends ArrayStore {
        console.log("status error:", action.error);
        return super.reduce(state, action);

-      case 'ics/nodestats-received':
+      case 'ics/config-error':
+        console.log("config error:", action.error);
+        return super.reduce(state, action);
+
+      case 'ics/config-received':
+        let temp = action.ic;
+        if (!temp.managedexternally) {
+          if (temp.statusupdateraw === null || temp.statusupdateraw === undefined) {
+            temp.statusupdateraw = {};
+          }
+          temp.statusupdateraw["config"] = action.data;
+          AppDispatcher.dispatch({
+            type: 'ics/start-edit',
+            data: temp,
+            token: action.token,
+          });
+          ICsDataManager.getStatistics(action.url, action.token, temp);
+
+        }
+        return super.reduce(state, action);
+
+      case 'ics/statistics-error':
+        if (action.error.status === 400){
+          // in case of bad request add the error message to the raw status
+          // most likely the statistics collection is disabled for this node
+          AppDispatcher.dispatch({
+            type: 'ics/statistics-received',
+            data: action.error.response.text,
+            token: action.token,
+            ic: action.ic
+          });
+        } else {
+          console.log("statistics error:", action.error);
+        }
+        return super.reduce(state, action);
+
+      case 'ics/statistics-received':
        let tempIC2 = action.ic;
-        if(!tempIC2.managedexternally){
+        if (!tempIC2.managedexternally) {
          if (tempIC2.statusupdateraw === null || tempIC2.statusupdateraw === undefined) {
            tempIC2.statusupdateraw = {};
          }
@ -145,10 +183,6 @@ class InfrastructureComponentStore extends ArrayStore {
        }
        return super.reduce(state, action);

-      case 'ics/nodestats-error':
-        console.log("nodestats error:", action.error);
-        return super.reduce(state, action);
-
      case 'ics/restart':
        ICsDataManager.restart(action.url, action.token);
        return super.reduce(state, action);
--- a/src/ic/ic.js
+++ b/src/ic/ic.js
@ -16,225 +16,318 @@
 ******************************************************************************/

 import React from 'react';
-import InfrastructureComponentStore from './ic-store';
+import ICstore from './ic-store';
+import ICdataStore from './ic-data-store'
 import { Container as FluxContainer } from 'flux/utils';
 import AppDispatcher from '../common/app-dispatcher';
 import { Container, Col, Row, Table, Button } from 'react-bootstrap';
 import moment from 'moment';
 import ReactJson from 'react-json-view';
 import ConfirmCommand from './confirm-command';
-import Icon from "../common/icon";
+import IconButton from '../common/icon-button';



 class InfrastructureComponent extends React.Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);

-        this.state = {
-            confirmCommand: false,
-            command: '',
-        };
+    this.state = {
+      confirmCommand: false,
+      command: '',
+      sessionToken: localStorage.getItem("token"),
+      currentUser: JSON.parse(localStorage.getItem("currentUser")),
+    };
+  }
+
+  static getStores() {
+    return [ICstore, ICdataStore];
+  }
+
+  static calculateState(prevState, props) {
+    return {
+      ic: ICstore.getState().find(ic => ic.id === parseInt(props.match.params.ic, 10))
+    }
+  }
+
+  componentDidMount() {
+    let icID = parseInt(this.props.match.params.ic, 10);
+
+    AppDispatcher.dispatch({
+      type: 'ics/start-load',
+      data: icID,
+      token: this.state.sessionToken,
+    });
+  }
+
+
+  refresh() {
+    // get status of VILLASnode and VILLASrelay ICs
+    if ((this.state.ic.type === "villas-node" || this.state.ic.type === "villas-relay")
+      && this.state.ic.apiurl !== '' && this.state.ic.apiurl !== undefined && this.state.ic.apiurl !== null && !this.state.ic.managedexternally) {
+      AppDispatcher.dispatch({
+        type: 'ics/get-status',
+        url: this.state.ic.apiurl,
+        token: this.state.sessionToken,
+        ic: this.state.ic
+      });
+    }
+  }
+
+  isJSON(data) {
+    if (data === undefined || data === null) {
+      return false;
+    }
+    let str = JSON.stringify(data);
+    try {
+      JSON.parse(str)
+    }
+    catch (ex) {
+      return false
+    }
+    return true
+  }
+
+  async downloadGraph(url) {
+    let blob = await fetch(url).then(r => r.blob())
+    FileSaver.saveAs(blob, this.state.ic.name + ".svg");
+  }
+
+  sendControlCommand() {
+    if (this.state.command === "restart") {
+      AppDispatcher.dispatch({
+        type: 'ics/restart',
+        url: this.state.ic.apiurl + "/restart",
+        token: this.state.sessionToken,
+      });
+    } else if (this.state.command === "shutdown") {
+      AppDispatcher.dispatch({
+        type: 'ics/shutdown',
+        url: this.state.ic.apiurl + "/shutdown",
+        token: this.state.sessionToken,
+      });
+    }
+  }
+
+  confirmCommand(canceled){
+    if(!canceled){
+      this.sendControlCommand();
    }

-    static getStores() {
-        return [InfrastructureComponentStore];
+    this.setState({confirmCommand: false, command: ''});
+  }
+
+
+  render() {
+    if (this.state.ic === undefined) {
+      return <h1>Loading Infrastructure Component...</h1>;
    }

-    static calculateState(prevState, props) {
-        if (prevState == null) {
-            prevState = {};
-          }
-
-        return {
-            sessionToken: localStorage.getItem("token"),
-            currentUser: JSON.parse(localStorage.getItem("currentUser")),
-            ic: InfrastructureComponentStore.getState().find(ic => ic.id === parseInt(props.match.params.ic, 10))
-        }
+    let graphURL = ""
+    if (this.state.ic.apiurl !== "") {
+      graphURL = this.state.ic.apiurl + "/graph.svg"
    }

-    componentDidMount() {
-        let icID = parseInt(this.props.match.params.ic, 10);
-
-        AppDispatcher.dispatch({
-            type: 'ics/start-load',
-            data: icID,
-            token: this.state.sessionToken,
-        });
+    const buttonStyle = {
+      marginLeft: '5px',
    }

-    isJSON(data) {
-        if (data === undefined || data === null) {
-            return false;
-        }
-        let str = JSON.stringify(data);
-        try {
-            JSON.parse(str)
-        }
-        catch (ex) {
-            return false
-        }
-        return true
+    const iconStyle = {
+      height: '25px',
+      width: '25px'
    }

-    async downloadGraph(url) {
-        let blob = await fetch(url).then(r => r.blob())
-        FileSaver.saveAs(blob, this.state.ic.name + ".svg");
-    }
+    return <div className='section'>
+      <h1>{this.state.ic.name}</h1>
+      <Container>
+        <Row>
+          <Col>
+            <Table striped size="sm">
+              <tbody>
+                <tr>
+                  <td>Name</td>
+                  <td>{this.state.ic.name}</td>
+                </tr>
+                <tr>
+                  <td>Description</td>
+                  <td>{this.state.ic.description}</td>
+                </tr>
+                <tr>
+                  <td>UUID</td>
+                  <td>{this.state.ic.uuid}</td>
+                </tr>
+                <tr>
+                  <td>State</td>
+                  <td>{this.state.ic.state}</td>
+                </tr>
+                <tr>
+                  <td>Category</td>
+                  <td>{this.state.ic.category}</td>
+                </tr>
+                <tr>
+                  <td>Type</td>
+                  <td>{this.state.ic.type}</td>
+                </tr>
+                <tr>
+                  <td>Uptime</td>
+                  <td>{moment.duration(this.state.ic.uptime, "seconds").humanize()}</td>
+                </tr>
+                <tr>
+                  <td>Location</td>
+                  <td>{this.state.ic.location}</td>
+                </tr>
+                <tr>
+                  <td>Websocket URL</td>
+                  <td>{this.state.ic.websocketurl}</td>
+                </tr>
+                <tr>
+                  <td>API URL</td>
+                  <td>{this.state.ic.apiurl}</td>
+                </tr>
+                <tr>
+                  <td>Start parameter schema</td>
+                  <td>
+                    {this.isJSON(this.state.ic.startparameterschema) ?
+                    <ReactJson
+                      src={this.state.ic.startparameterschema}
+                      name={false}
+                      displayDataTypes={false}
+                      displayObjectSize={false}
+                      enableClipboard={false}
+                      collapsed={0}
+                      /> : <div>No Start parameter schema JSON available.</div>}
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+          </Col>
+          <Col>
+            {this.state.ic.type === "villas-node" ?
+              <>
+                <div className='section-buttons-group-right'>
+                  <IconButton
+                    childKey={0}
+                    tooltip='Download Graph'
+                    onClick={() => this.downloadGraph(graphURL)}
+                    icon='download'
+                    buttonStyle={buttonStyle}
+                    iconStyle={iconStyle}
+                  />
+                </div>
+                <hr/>
+                <b>Graph:</b>
+                <div>
+                  <img alt={"Graph image download failed and/or incorrect image API URL"} src={graphURL} />
+                </div>

-    sendControlCommand() {
-        if (this.state.command === "restart") {
-            AppDispatcher.dispatch({
-                type: 'ics/restart',
-                url: this.state.ic.apiurl + "/restart",
-                token: this.state.sessionToken,
-            });
-        } else if (this.state.command === "shutdown") {
-            AppDispatcher.dispatch({
-                type: 'ics/shutdown',
-                url: this.state.ic.apiurl + "/shutdown",
-                token: this.state.sessionToken,
-            });
-        }
-    }
+                {this.state.currentUser.role === "Admin" ?
+                  <div>
+                    <hr/>
+                    <b>Controls:</b>
+                    <div className='solid-button'>
+                      <Button variant='secondary' style={{ margin: '5px' }} size='lg'
+                        onClick={() => this.setState({ confirmCommand: true, command: 'restart' })}>Restart</Button>
+                      <Button variant='secondary' style={{ margin: '5px' }} size='lg' onClick={() => this.setState({
+                        confirmCommand: true,
+                        command: 'shutdown'
+                      })}>Shutdown</Button>
+                    </div>
+                  </div>
+                  : <div />
+                }
+                <ConfirmCommand
+                  show={this.state.confirmCommand}
+                  command={this.state.command}
+                  name={this.state.ic.name}
+                  onClose={c => this.confirmCommand(c)}
+                />
+              </>
+              : <div />}

-    confirmCommand(canceled){
-        if(!canceled){
-          this.sendControlCommand();
-        }
-    
-        this.setState({confirmCommand: false, command: ''});
-      }
-    
-      async downloadGraph(url) {
-    
-        let blob = await fetch(url).then(r => r.blob())
-        FileSaver.saveAs(blob, this.props.ic.name + ".svg");
-      }
+            {this.state.ic.type === "villas-relay" ?
+              <>
+              <div className='section-buttons-group-right'>
+                <IconButton
+                  childKey={1}
+                  tooltip='Refresh'
+                  onClick={() => this.refresh()}
+                  icon='sync-alt'
+                  buttonStyle={buttonStyle}
+                  iconStyle={iconStyle}
+                />
+              </div>
+              <b>Raw Status</b>
+              {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
+                <ReactJson
+                  src={this.state.ic.statusupdateraw}
+                  name={false}
+                  displayDataTypes={false}
+                  displayObjectSize={false}
+                  enableClipboard={false}
+                  collapsed={1}
+                /> : <div>No valid JSON raw data available.</div>}
+              </>
+              :
+              <div />}
+          </Col>
+        </Row>
+        {this.state.ic.type === "villas-node" ?
+          <>
+        <div className='section-buttons-group-right'>
+          <IconButton
+            childKey={2}
+            tooltip='Refresh'
+            onClick={() => this.refresh()}
+            icon='sync-alt'
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
+          />
+        </div>
+        <Row>

-    render() {
-        if (this.state.ic === undefined) {
-            return <h1>Loading Infrastructure Component...</h1>;
-        }
-
-        let graphURL = ""
-        if (this.state.ic.apiurl !== "") {
-            graphURL = this.state.ic.apiurl + "/graph.svg"
-        }
-
-        return <div className='section'>
-            <h1>{this.state.ic.name}</h1>
-            <Container>
-                <Row>
-                    <Col>
-                        <Table striped size="sm">
-                            <tbody>
-                                <tr>
-                                    <td>Name</td>
-                                    <td>{this.state.ic.name}</td>
-                                </tr>
-                                <tr>
-                                    <td>Description</td>
-                                    <td>{this.state.ic.description}</td>
-                                </tr>
-                                <tr>
-                                    <td>UUID</td>
-                                    <td>{this.state.ic.uuid}</td>
-                                </tr>
-                                <tr>
-                                    <td>State</td>
-                                    <td>{this.state.ic.state}</td>
-                                </tr>
-                                <tr>
-                                    <td>Category</td>
-                                    <td>{this.state.ic.category}</td>
-                                </tr>
-                                <tr>
-                                    <td>Type</td>
-                                    <td>{this.state.ic.type}</td>
-                                </tr>
-                                <tr>
-                                    <td>Uptime</td>
-                                    <td>{moment.duration(this.state.ic.uptime, "seconds").humanize()}</td>
-                                </tr>
-                                <tr>
-                                    <td>Location</td>
-                                    <td>{this.state.ic.location}</td>
-                                </tr>
-                                <tr>
-                                    <td>Websocket URL</td>
-                                    <td>{this.state.ic.websocketurl}</td>
-                                </tr>
-                                <tr>
-                                    <td>API URL</td>
-                                    <td>{this.state.ic.apiurl}</td>
-                                </tr>
-                                <tr>
-                                    <td>Start parameter schema</td>
-                                    <td>
-                                        <ReactJson
-                                            src={this.state.ic.startparameterschema}
-                                            name={false}
-                                            displayDataTypes={false}
-                                            displayObjectSize={false}
-                                            enableClipboard={false}
-                                            collapsed={0}
-                                        />
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </Table>
-                    </Col>
-                    <Col><b>Raw Status</b>
-                        {this.isJSON(this.state.ic.statusupdateraw) ?
-                            <ReactJson
-                                src={this.state.ic.statusupdateraw}
-                                name={false}
-                                displayDataTypes={false}
-                                displayObjectSize={false}
-                                enableClipboard={false}
-                                collapsed={0}
-                            /> : <div>No valid JSON raw data available.</div>}
-
-                        {this.state.ic.type === "villas-node" ?
-                            <>
-                                <div className='section-buttons-group-right'>
-                                    <Button style={{ margin: '5px' }} size='sm' onClick={() => this.downloadGraph(graphURL)}><Icon
-                                        icon="download" /></Button>
-                                </div>
-                                <hr></hr>
-                                <b>Graph:</b>
-                                <div>
-                                    <img alt={"Graph image download failed and/or incorrect image API URL"} src={graphURL} />
-                                </div>
-
-                                {this.state.currentUser.role === "Admin" ?
-                                    <div>
-                                        <hr></hr>
-                                        <b>Controls:</b>
-                                        <div className='solid-button'>
-                                            <Button variant='secondary' style={{ margin: '5px' }} size='lg'
-                                                onClick={() => this.setState({ confirmCommand: true, command: 'restart' })}>Restart</Button>
-                                            <Button variant='secondary' style={{ margin: '5px' }} size='lg' onClick={() => this.setState({
-                                                confirmCommand: true,
-                                                command: 'shutdown'
-                                            })}>Shutdown</Button>
-                                        </div>
-                                    </div>
-                                    : <div />
-                                }
-                                <ConfirmCommand show={this.state.confirmCommand} command={this.state.command} name={this.state.ic.name}
-                                    onClose={c => this.confirmCommand(c)} />
-                            </>
-                            : <div />}
-
-                    </Col>
-                </Row>
-            </Container>
-        </div>;
-    }
+          <Col>
+            <b>Raw Status</b>
+            {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
+              <ReactJson
+                src={this.state.ic.statusupdateraw}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                enableClipboard={false}
+                collapsed={1}
+              /> : <div>No valid JSON raw data available.</div>}
+          </Col>
+          <Col>
+            <b>Raw Config</b>
+            {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["config"]) ?
+              <ReactJson
+                src={this.state.ic.statusupdateraw["config"]}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                enableClipboard={false}
+                collapsed={1}
+              /> : <div>No valid config JSON raw data available.</div>}
+          </Col>
+          <Col>
+            <b>Raw Statistics</b>
+            {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["statistics"]) ?
+              <ReactJson
+                src={this.state.ic.statusupdateraw["statistics"]}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                enableClipboard={false}
+                collapsed={1}
+              /> : <div>No valid statistics JSON raw data available.</div>}
+          </Col>

+        </Row>
+          </>: <div />}
+      </Container>
+    </div>;
+  }
 }

 let fluxContainerConverter = require('../common/FluxContainerConverter');
-export default FluxContainer.create(fluxContainerConverter.convert(InfrastructureComponent), { withProps: true });
+export default FluxContainer.create(fluxContainerConverter.convert(InfrastructureComponent), { withProps: true });
--- a/src/ic/ics-data-manager.js
+++ b/src/ic/ics-data-manager.js
@ -102,12 +102,17 @@ class IcsDataManager extends RestDataManager {
  }

  getStatus(url,token,ic){
-    RestAPI.get(url + "/status", null).then(response => {
+    let requestURL = url;
+    if(ic.type === "villas-node"){
+      requestURL += "/status";
+    }
+    RestAPI.get(requestURL, null).then(response => {
      AppDispatcher.dispatch({
        type: 'ics/status-received',
        data: response,
        token: token,
-        ic: ic
+        ic: ic,
+        url: url
      });
    }).catch(error => {
      AppDispatcher.dispatch({
@ -116,24 +121,51 @@ class IcsDataManager extends RestDataManager {
      })
    })

-    // get name of websocket
-    /*let ws_api = ic.websocketurl.split("/")
-    let ws_name = ws_api[ws_api.length-1] // websocket name is the last element in the websocket url
+  }
+
+  getConfig(url,token,ic){
+
+    // get the name of the node
+    let ws_api = ic.websocketurl.split("/")
+    let ws_name = ws_api[ws_api.length-1] // name is the last element in the websocket url
+
+    RestAPI.get(url + "/node/" + ws_name, null).then(response => {
+      AppDispatcher.dispatch({
+        type: 'ics/config-received',
+        data: response,
+        token: token,
+        ic: ic,
+        url: url
+      });
+    }).catch(error => {
+      AppDispatcher.dispatch({
+        type: 'ics/config-error',
+        error: error
+      })
+    })
+  }
+
+  getStatistics(url,token,ic){
+
+    // get the name of the node
+    let ws_api = ic.websocketurl.split("/")
+    let ws_name = ws_api[ws_api.length-1] // name is the last element in the websocket url

    RestAPI.get(url + "/node/" + ws_name + "/stats", null).then(response => {
      AppDispatcher.dispatch({
-        type: 'ics/nodestats-received',
+        type: 'ics/statistics-received',
        data: response,
        token: token,
        ic: ic
      });
    }).catch(error => {
      AppDispatcher.dispatch({
-        type: 'ics/nodestats-error',
-        error: error
+        type: 'ics/statistics-error',
+        error: error,
+        token: token,
+        ic: ic
      })
-    })*/
-
+    })
  }

  restart(url,token){
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@ -133,20 +133,21 @@ class InfrastructureComponents extends Component {
        token: this.state.sessionToken,
      });

-      // get status of VILLASnode and VILLASrelay ICs
-      this.state.ics.forEach(ic => {
-        if ((ic.type === "villas-node" || ic.type === "villas-relay")
-          && ic.apiurl !== '' && ic.apiurl !== undefined && ic.apiurl !== null && !ic.managedexternally) {
-          AppDispatcher.dispatch({
-            type: 'ics/get-status',
-            url: ic.apiurl,
-            token: this.state.sessionToken,
-            ic: ic
-          });
-        }
-      })
-
    }
+
+     // get status of VILLASnode and VILLASrelay ICs
+     this.state.ics.forEach(ic => {
+      if ((ic.type === "villas-node" || ic.type === "villas-relay")
+        && ic.apiurl !== '' && ic.apiurl !== undefined && ic.apiurl !== null && !ic.managedexternally) {
+        AppDispatcher.dispatch({
+          type: 'ics/get-status',
+          url: ic.apiurl,
+          token: this.state.sessionToken,
+          ic: ic
+        });
+      }
+    })
+
  }

  closeNewModal(data) {
@ -201,9 +202,6 @@ class InfrastructureComponents extends Component {
    }
  }

-  closeICModal(data){
-    this.setState({ icModal : false });
-  }

  closeDeleteModal(confirmDelete){
    this.setState({ deleteModal: false });
@ -345,14 +343,6 @@ class InfrastructureComponents extends Component {
    return dateTime.fromNow()
  }

-  modifyManagedExternallyColumn(managedExternally, component){
-    if(managedExternally){
-      return <Icon icon='check' />
-    } else {
-      return ""
-    }
-  }
-
  modifyUptimeColumn(uptime, component){
    if(uptime >= 0){
      let momentDurationFormatSetup = require("moment-duration-format");
@ -366,11 +356,6 @@ class InfrastructureComponents extends Component {
    }
  }

-  openICStatus(ic){
-    let index = this.state.ics.indexOf(ic);
-    this.setState({ icModal: true, modalIC: ic, modalIndex: index })
-  }
-
  isLocalIC(index, ics){
    let ic = ics[index]
    return !ic.managedexternally
@ -450,10 +435,9 @@ class InfrastructureComponents extends Component {
  }

  render() {
-
    const buttonStyle = {
-      marginLeft: '10px'
-    };
+      marginLeft: '10px',
+    }

    const iconStyle = {
      height: '30px',
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@ -30,6 +30,7 @@ import SignalStore from '../signal/signal-store'
 import FileStore from "../file/file-store"
 import WidgetStore from "../widget/widget-store";
 import ResultStore from "../result/result-store"
+import UsersStore from "../user/users-store"

 import DashboardTable from '../dashboard/dashboard-table'
 import ResultTable from "../result/result-table";
@ -67,7 +68,7 @@ class Scenario extends React.Component {
  }

  static getStores() {
-    return [ScenarioStore, ConfigStore, DashboardStore, ICStore, SignalStore, FileStore, WidgetStore, ResultStore];
+    return [ScenarioStore, ConfigStore, DashboardStore, ICStore, SignalStore, FileStore, WidgetStore, ResultStore, UsersStore];
  }

  componentDidMount() {
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@ -18,21 +18,19 @@
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import FileSaver from 'file-saver';
-
 import AppDispatcher from '../common/app-dispatcher';
 import ScenarioStore from './scenario-store';
 import DashboardStore from '../dashboard/dashboard-store';
 import WidgetStore from "../widget/widget-store";
 import ConfigStore from '../componentconfig/config-store';
 import SignalStore from '../signal/signal-store'
-
-import Icon from '../common/icon';
+import ResultStore from '../result/result-store'
+import FileStore from '../file/file-store'
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
 import NewScenarioDialog from './new-scenario';
 import EditScenarioDialog from './edit-scenario';
 import ImportScenarioDialog from './import-scenario';
-
 import DeleteDialog from '../common/dialogs/delete-dialog';
 import IconButton from '../common/icon-button';

@ -40,7 +38,7 @@ import IconButton from '../common/icon-button';
 class Scenarios extends Component {

  static getStores() {
-    return [ScenarioStore, DashboardStore, WidgetStore, ConfigStore, SignalStore];
+    return [ScenarioStore, DashboardStore, WidgetStore, ConfigStore, SignalStore, ResultStore, FileStore];
  }

  static calculateState(prevState, props) {