Commit ed84b7b6 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

added event status in frontend

parent f7617467

js-apps/meep-frontend/src/js/containers/exec/event-creation-pane.js

+31 −11
Original line number Diff line number Diff line
@@ -19,20 +19,17 @@ import React, { Component } from 'react'; 
import { Select } from '@rmwc/select';

import { Grid, GridCell } from '@rmwc/grid';

import { Typography } from '@rmwc/typography';

import { updateObject } from '../../util/object-util';

import { updateObject } from '@/js/util/object-util';

import MobilityEventPane from './mobility-event-pane';

import NetworkCharacteristicsEventPane from './network-characteristics-event-pane';

import ScenarioUpdateEventPane from './scenario-update-event-pane';



import CancelApplyPair from '@/js/components/helper-components/cancel-apply-pair';



import { uiExecChangeCurrentEvent } from '../../state/ui';



import {

  MOBILITY_EVENT,

  NETWORK_CHARACTERISTICS_EVENT,

  SCENARIO_UPDATE_EVENT

} from '../../meep-constants';

  uiExecChangeCurrentEvent,

  uiExecChangeEventStatus

} from '@/js/state/ui';



import {

  execChangeSelectedScenarioElement,
@@ -45,9 +42,15 @@ import { 
  execFogs,

  execFogEdges,

  execZones

} from '../../state/exec';

} from '@/js/state/exec';



import { EXEC_EVT_TYPE, PAGE_EXECUTE } from '../../meep-constants';

import {

  MOBILITY_EVENT,

  NETWORK_CHARACTERISTICS_EVENT,

  SCENARIO_UPDATE_EVENT,

  EXEC_EVT_TYPE,

  PAGE_EXECUTE

} from '@/js/meep-constants';



const EventTypeSelect = props => {

  return (
@@ -125,6 +128,7 @@ class EventCreationPane extends Component { 
  onEventPaneClose(e) {

    e.preventDefault();

    this.props.changeEvent('');

    this.props.changeEventStatus('');

    this.props.onClose(e);

  }
@@ -143,6 +147,8 @@ class EventCreationPane extends Component { 
      return null;

    }

    

    const statusColor = (this.props.eventStatus && this.props.eventStatus.startsWith('[200]')) ? 'green' : 'red';



    return (

      <div style={{ padding: 10 }}>

        <div style={styles.block}>
@@ -152,6 +158,7 @@ class EventCreationPane extends Component { 
          eventTypes={this.props.eventTypes}

          onChange={event => {

            this.props.changeEvent(event.target.value);

            this.props.changeEventStatus('');

          }}

          value={this.props.currentEvent}

        />
@@ -185,6 +192,17 @@ class EventCreationPane extends Component { 
            removeCyApply={true}

          />

        </div>



        {

          (this.props.eventStatus) ?

          // <Grid style={{ marginTop: 20, border: '1px solid #e4e4e4' }}>

            <Grid style={{ marginTop: 20 }}>

              <GridCell span={12} style={{ padding: 5 }}>

                <Typography use="body1">Status:</Typography>

                <Typography use="body2" style={{ marginLeft: 5, color: statusColor}}>{this.props.eventStatus}</Typography>

              </GridCell>

            </Grid> : null

        }

      </div>

    );

  }
@@ -216,7 +234,8 @@ const mapStateToProps = state => { 
    EdgeApps: execEdgeApps(state),

    FogEdges: execFogEdges(state),

    table: state.exec.table,

    networkElements: state.exec.table.entries

    networkElements: state.exec.table.entries,

    eventStatus: state.ui.eventStatus

  };

};
@@ -225,7 +244,8 @@ const mapDispatchToProps = dispatch => { 
    changeEvent: event => dispatch(uiExecChangeCurrentEvent(event)),

    changeSelectedScenarioElement: element =>

      dispatch(execChangeSelectedScenarioElement(element)),

    resetSelectedScenarioElement: () => dispatch(execResetSelectedScenarioElement())

    resetSelectedScenarioElement: () => dispatch(execResetSelectedScenarioElement()),

    changeEventStatus: status => dispatch(uiExecChangeEventStatus(status))

  };

};

js-apps/meep-frontend/src/js/containers/exec/mobility-event-pane.js

+27 −7
Original line number Diff line number Diff line
@@ -27,7 +27,8 @@ import { getElemFieldVal, FIELD_NAME } from '../../util/elem-utils'; 


import {

  uiExecChangeMobilityEventTarget,

  uiExecChangeMobilityEventDestination

  uiExecChangeMobilityEventDestination,

  uiExecChangeEventStatus

} from '@/js/state/ui';



class MobilityEventPane extends Component {
@@ -78,6 +79,26 @@ class MobilityEventPane extends Component { 
    this.props.onClose(e);

  }



  /**

   * Callback function to receive the result of the sendEvent operation.

   * @callback module:api/EventsApi~sendEventCallback

   * @param {String} error Error message, if any.

   * @param data This operation does not return a value.

   * @param {String} response The complete HTTP response.

   */

  sendEventCb(error, _, response) {

    var status = '';

    if (error) {

      status = '[' + response.statusCode + '] ' + response.statusText + ': ' + response.text;

      this.props.changeEventStatus(status);

      return;

    }



    status = '[' + response.statusCode + '] ' + response.statusText;

    this.props.changeEventStatus(status);

    this.props.onSuccess();

  }



  triggerEvent(e) {

    e.preventDefault();

    var meepEvent = {
@@ -89,11 +110,9 @@ class MobilityEventPane extends Component { 
      }

    };



    // trigger event with this.props.api

    this.props.api.sendEvent(this.props.currentEvent, meepEvent, error => {

      if (!error) {

        this.props.onSuccess();

      }

    // Send Event

    this.props.api.sendEvent(this.props.currentEvent, meepEvent, (error, data, response) => {

      this.sendEventCb(error, data, response);

    });

  }
@@ -207,7 +226,8 @@ const mapStateToProps = state => { 
const mapDispatchToProps = dispatch => {

  return {

    changeEventTarget: event => dispatch(uiExecChangeMobilityEventTarget(event)),

    changeEventDestination: event => dispatch(uiExecChangeMobilityEventDestination(event))

    changeEventDestination: event => dispatch(uiExecChangeMobilityEventDestination(event)),

    changeEventStatus: status => dispatch(uiExecChangeEventStatus(status))

  };

};

js-apps/meep-frontend/src/js/containers/exec/network-characteristics-event-pane.js

+45 −6
Original line number Diff line number Diff line
@@ -16,6 +16,7 @@ 


import _ from 'lodash';

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { Select } from '@rmwc/select';

import { Grid, GridCell } from '@rmwc/grid';

import { updateObject } from '../../util/object-util';
@@ -28,6 +29,10 @@ import { 
  firstLetterUpper

} from '../../util/string-manipulation';



import {

  uiExecChangeEventStatus

} from '@/js/state/ui';



import {

  EXEC_EVT_NC_TYPE,

  EXEC_EVT_NC_NAME,
@@ -164,6 +169,27 @@ class NetworkCharacteristicsEventPane extends Component { 
    this.props.onClose(e);

  }



  /**

   * Callback function to receive the result of the sendEvent operation.

   * @callback module:api/EventsApi~sendEventCallback

   * @param {String} error Error message, if any.

   * @param data This operation does not return a value.

   * @param {String} response The complete HTTP response.

   */

  sendEventCb(error, _, response) {

    var status = '';

    if (error) {

      status = '[' + response.statusCode + '] ' + response.statusText + ': ' + response.text;

      this.props.changeEventStatus(status);

      return;

    }



    status = '[' + response.statusCode + '] ' + response.statusText;

    this.props.changeEventStatus(status);

    this.setState({ dialogOpen: true });

    this.props.onSuccess();

  }



  triggerEvent(e) {

    e.preventDefault();

    var element = this.props.element;
@@ -232,11 +258,8 @@ class NetworkCharacteristicsEventPane extends Component { 
    this.setNetCharFromElem(ncEvent.eventNetworkCharacteristicsUpdate.netChar, element);



    // trigger event with this.props.api

    this.props.api.sendEvent(this.props.currentEvent, ncEvent, error => {

      if (!error) {

        this.setState({ dialogOpen: true });

        this.props.onSuccess();

      }

    this.props.api.sendEvent(this.props.currentEvent, ncEvent, (error, data, response) => {

      this.sendEventCb(error, data, response);

    });

  }
@@ -485,4 +508,20 @@ const styles = { 
  }

};



export default NetworkCharacteristicsEventPane;
 
const mapStateToProps = () => {

  return {

  };

};



const mapDispatchToProps = dispatch => {

  return {

    changeEventStatus: status => dispatch(uiExecChangeEventStatus(status))

  };

};



const ConnectedNetworkCharacteristicsEventPane = connect(

  mapStateToProps,

  mapDispatchToProps

)(NetworkCharacteristicsEventPane);



export default ConnectedNetworkCharacteristicsEventPane;
 
 No newline at end of file

js-apps/meep-frontend/src/js/containers/exec/scenario-update-event-pane.js

+28 −8
Original line number Diff line number Diff line
@@ -44,7 +44,8 @@ import { 
import {

  uiExecChangeScenarioUpdateAction,

  uiExecScenarioUpdateRemoveEleName,

  uiExecScenarioUpdateRemoveEleType

  uiExecScenarioUpdateRemoveEleType,

  uiExecChangeEventStatus

} from '@/js/state/ui';



import {
@@ -153,8 +154,8 @@ class ScenarioUpdateEventPane extends Component { 
    var processObj = createProcess(uniqueId, name, neType, element);

    this.sendEvent(parent, neType, processObj, SCENARIO_UPDATE_ACTION_ADD);



    this.props.execElemClear();

    this.props.execElemNew();

    // this.props.execElemClear();

    // this.props.execElemNew();

  }



  onDeleteElement(e) {
@@ -176,6 +177,26 @@ class ScenarioUpdateEventPane extends Component { 
    this.props.onClose(e);

  }



  /**

   * Callback function to receive the result of the sendEvent operation.

   * @callback module:api/EventsApi~sendEventCallback

   * @param {String} error Error message, if any.

   * @param data This operation does not return a value.

   * @param {String} response The complete HTTP response.

   */

  sendEventCb(error, _, response) {

    var status = '';

    if (error) {

      status = '[' + response.statusCode + '] ' + response.statusText + ': ' + response.text;

      this.props.changeEventStatus(status);

      return;

    }



    status = '[' + response.statusCode + '] ' + response.statusText;

    this.props.changeEventStatus(status);

    this.props.onSuccess();

  }



  sendEvent(parentVal, elementTypeString, processObj, action) {

    if (processObj === null || elementTypeString === '' || action === '') {

      return;
@@ -196,10 +217,8 @@ class ScenarioUpdateEventPane extends Component { 
      }

    };



    this.props.api.sendEvent(this.props.currentEvent, meepEvent, error => {

      if (!error) {

        this.props.onSuccess();

      }

    this.props.api.sendEvent(this.props.currentEvent, meepEvent, (error, data, response) => {

      this.sendEventCb(error, data, response);

    });

  }
@@ -331,7 +350,8 @@ const mapDispatchToProps = dispatch => { 
    changeRemoveActionEleName: event => dispatch(uiExecScenarioUpdateRemoveEleName(event)),

    execElemNew: elem => dispatch(execElemNew(elem)),

    execElemClear: elem => dispatch(execElemClear(elem)),

    execElemSetErrMsg: msg => dispatch(execElemSetErrMsg(msg))

    execElemSetErrMsg: msg => dispatch(execElemSetErrMsg(msg)),

    changeEventStatus: status => dispatch(uiExecChangeEventStatus(status))

  };

};

js-apps/meep-frontend/src/js/state/ui/index.js

+11 −0
Original line number Diff line number Diff line
@@ -48,6 +48,7 @@ const initialState = { 
  execShowApps: false,

  dashCfgMode: false,

  eventCfgMode: false,

  eventStatus: '',

  dashboardView1: NET_TOPOLOGY_VIEW,

  dashboardView2: VIEW_NAME_NONE,

  sourceNodeSelected: '',
@@ -244,6 +245,14 @@ export function uiExecChangeEventCfgMode(val) { 
  };

}



const UI_EXEC_CHANGE_EVENT_STATUS = 'UI_EXEC_CHANGE_EVENT_STATUS';

export function uiExecChangeEventStatus(status) {

  return {

    type: UI_EXEC_CHANGE_EVENT_STATUS,

    payload: status

  };

}



const UI_CHANGE_DEV_MODE = 'UI_CHANGE_DEV_MODE';

export function uiChangeDevMode(mode) {

  return {
@@ -423,6 +432,8 @@ export default function uiReducer(state = initialState, action) { 
    return updateObject(state, { dashCfgMode: action.payload });

  case UI_EXEC_CHANGE_EVENT_CFG_MODE:

    return updateObject(state, { eventCfgMode: action.payload });

  case UI_EXEC_CHANGE_EVENT_STATUS:

    return updateObject(state, { eventStatus: action.payload });

  case UI_SET_AUTOMATIC_REFRESH:

    return updateObject(state, { automaticRefresh: action.payload });

  case UI_CHANGE_REFRESH_INTERVAL: