Unverified Commit 1acd5877 authored by Kevin Di Lallo's avatar Kevin Di Lallo Committed by GitHub
Browse files

Merge pull request #122 from nikhildoifode/na-474 

Retention of Manual Event Creation fields on changing tabs
parents 6f445b71 7db49689

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

+21 −2
Original line number Diff line number Diff line
@@ -23,6 +23,8 @@ import { updateObject } from '../../util/object-util'; 
import MobilityEventPane from './mobility-event-pane';

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



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



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



import {
@@ -56,6 +58,7 @@ const EventTypeSelect = props => { 
          options={props.eventTypes}

          onChange={props.onChange}

          data-cy={EXEC_EVT_TYPE}

          value={props.value}

        />

      </GridCell>

    </Grid>
@@ -97,7 +100,7 @@ const EventCreationFields = props => { 
      />

    );

  default:

    return <div>NO EVENT</div>;

    return <div></div>;

  }

};
@@ -107,6 +110,12 @@ class EventCreationPane extends Component { 
    this.state = {};

  }



  onEventPaneClose(e) {

    e.preventDefault();

    this.props.changeEvent('');

    this.props.onClose(e);

  }



  updateElement(values) {

    var element = updateObject({}, this.props.selectedScenarioElement);

    element = updateObject(element, values);
@@ -128,6 +137,7 @@ class EventCreationPane extends Component { 
          onChange={event => {

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

          }}

          value={this.props.currentEvent}

        />

        <EventCreationFields

          element={this.props.selectedScenarioElement}
@@ -137,7 +147,7 @@ class EventCreationPane extends Component { 
            this.updateElement(element);

          }}

          onSuccess={this.props.onSuccess}

          onClose={this.props.onClose}

          onClose={e => this.onEventPaneClose(e)}

          UEs={this.props.UEs}

          POAs={this.props.POAs}

          EDGEs={this.props.EDGEs}
@@ -149,6 +159,15 @@ class EventCreationPane extends Component { 
          table={this.props.table}

          networkElements={this.props.networkElements}

        />



        <div hidden={this.props.currentEvent !== ''}>

          <CancelApplyPair

            cancelText="Close"

            applyText="Submit"

            onCancel={e => this.onEventPaneClose(e)}

            saveDisabled={true}

          />

        </div>

      </div>

    );

  }

js-apps/meep-frontend/src/js/containers/exec/exec-page-container.js

+0 −4
Original line number Diff line number Diff line
@@ -81,10 +81,6 @@ class ExecPageContainer extends Component { 
    autoBind(this);

  }



  componentDidMount() {

    this.props.changeCurrentEvent(MOBILITY_EVENT);

  }



  /**

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

   * @callback module:api/ScenarioConfigurationApi~getScenarioListCallback

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

+45 −17
Original line number Diff line number Diff line
@@ -15,6 +15,7 @@ 
 */



import _ from 'lodash';

import { connect } from 'react-redux';

import React, { Component } from 'react';

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

import { Grid, GridCell } from '@rmwc/grid';
@@ -24,19 +25,19 @@ import { EXEC_EVT_MOB_TARGET, EXEC_EVT_MOB_DEST } from '../../meep-constants'; 


import { getElemFieldVal, FIELD_NAME } from '../../util/elem-utils';



import {

  uiExecChangeMobilityEventTarget,

  uiExecChangeMobilityEventDestination

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



class MobilityEventPane extends Component {

  constructor(props) {

    super(props);

    this.values = {

      eventType: '',

      eventTarget: '',

      eventDestination: ''

    };



    this.state = {};

  }



  shouldComponentUpdate(nextProps, nextState) {

  // shouldComponentUpdate(nextProps, nextState) {

  shouldComponentUpdate(nextProps) {

    /**

     * element={props.element}

        eventTypes={props.eventTypes}
@@ -66,18 +67,25 @@ class MobilityEventPane extends Component { 
      this.props.MobTypes !== nextProps.MobTypes ||

      this.props.FogEdges !== nextProps.FogEdges ||

      this.props.EdgeApps !== nextProps.EdgeApps ||

      this.state.eventTarget !== nextState.eventTarget

      this.props.mobilityEventTarget !== nextProps.mobilityEventTarget

    );

  }



  onMobilityPaneClose(e) {

    e.preventDefault();

    this.props.changeEventTarget('');

    this.props.changeEventDestination('');

    this.props.onClose(e);

  }



  triggerEvent(e) {

    e.preventDefault();

    var meepEvent = {

      name: 'name',

      type: this.props.currentEvent,

      eventMobility: {

        elementName: this.values.eventTarget,

        dest: this.values.eventDestination

        elementName: this.props.mobilityEventTarget,

        dest: this.props.mobilityEventDestination

      }

    };
@@ -92,7 +100,7 @@ class MobilityEventPane extends Component { 
  render() {

    //let found = this.props.UEs.find(element => element.label == this.values.eventTarget);

    //find if its the selection was a UE, otherwise (in order) EDGE, FOG, EDGE-APP, UE-APP

    var target = this.state.eventTarget;

    var target = this.props.mobilityEventTarget;

    var found = this.props.UEs.find(function(element) {

      return element.label === target;

    });
@@ -137,10 +145,11 @@ class MobilityEventPane extends Component { 
                  getElemFieldVal(elem, FIELD_NAME)

                )}

                onChange={event => {

                  this.values['eventTarget'] = event.target.value;

                  this.setState({ eventTarget: event.target.value });

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

                  this.props.changeEventDestination('');

                }}

                data-cy={EXEC_EVT_MOB_TARGET}

                value={this.props.mobilityEventTarget}

              />

            </GridCell>

            <GridCell span="4"></GridCell>
@@ -155,10 +164,10 @@ class MobilityEventPane extends Component { 
                  getElemFieldVal(elem, FIELD_NAME)

                )}

                onChange={event => {

                  this.values['eventDestination'] = event.target.value;

                  this.setState({ eventDestination: event.target.value });

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

                }}

                data-cy={EXEC_EVT_MOB_DEST}

                value={this.props.mobilityEventDestination}

              />

            </GridCell>

            <GridCell span="4"></GridCell>
@@ -166,7 +175,7 @@ class MobilityEventPane extends Component { 
          <CancelApplyPair

            cancelText="Close"

            applyText="Submit"

            onCancel={this.props.onClose}

            onCancel={e => this.onMobilityPaneClose(e)}

            onApply={e => this.triggerEvent(e)}

          />

        </>
@@ -187,4 +196,23 @@ const styles = { 
  }

};



export default MobilityEventPane;
 
const mapStateToProps = state => {

  return {

    mobilityEventTarget: state.ui.mobilityEventTarget,

    mobilityEventDestination: state.ui.mobilityEventDestination

  };

};



const mapDispatchToProps = dispatch => {

  return {

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

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

  };

};



const ConnectedMobilityEventPane = connect(

  mapStateToProps,

  mapDispatchToProps

)(MobilityEventPane);



export default ConnectedMobilityEventPane;

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

+33 −10
Original line number Diff line number Diff line
@@ -118,11 +118,13 @@ const ncApplicableTypes = [ 
  ELEMENT_TYPE_SCENARIO,

  ELEMENT_TYPE_OPERATOR_GENERIC,

  ELEMENT_TYPE_OPERATOR_CELL,

  ELEMENT_TYPE_OPERATOR,

  ELEMENT_TYPE_ZONE,

  ELEMENT_TYPE_POA_GENERIC,

  ELEMENT_TYPE_POA_4G,

  ELEMENT_TYPE_POA_5G,

  ELEMENT_TYPE_POA_WIFI,

  ELEMENT_TYPE_POA,

  ELEMENT_TYPE_DC,

  ELEMENT_TYPE_EDGE,

  ELEMENT_TYPE_FOG,
@@ -138,13 +140,34 @@ class NetworkCharacteristicsEventPane extends Component { 


    this.state = {

      dialogOpen: false,

      currentElementType: ''

      ncTypes: []

    };

  }



  componentDidMount() {

    let ncTypes = ncApplicableTypes.filter(e => {

      for (let item = 0; item < this.props.networkElements.length; item++) {

        if (e === getElemFieldVal(this.props.networkElements[item], FIELD_TYPE)) {

          return true;

        }

      }

      return false;

    });



    this.setState({ ncTypes });

  }



  onNetworkCharacPaneClose(e) {

    e.preventDefault();

    this.onUpdateElement(FIELD_TYPE, '', null);

    this.onUpdateElement(FIELD_NAME, '', null);

    this.props.onClose(e);

  }



  triggerEvent(e) {

    e.preventDefault();

    var element = this.props.element;

    var type = getElemFieldVal(element, FIELD_TYPE);



    // Verify that no field is in error

    var fieldsInError = 0;
@@ -157,7 +180,7 @@ class NetworkCharacteristicsEventPane extends Component { 
    }



    var neType = '';

    switch(this.state.currentElementType) {

    switch(type) {

    case ELEMENT_TYPE_OPERATOR_GENERIC:

      neType = DOMAIN_TYPE_STR;

      break;
@@ -189,7 +212,7 @@ class NetworkCharacteristicsEventPane extends Component { 
      neType = CLOUD_APP_TYPE_STR;

      break;

    default:

      neType = this.state.currentElementType;

      neType = type;

    }



    var ncEvent = {
@@ -233,7 +256,8 @@ class NetworkCharacteristicsEventPane extends Component { 
  }



  currentPrefix() {

    switch (this.state.currentElementType) {

    var type = getElemFieldVal(this.props.element, FIELD_TYPE);

    switch (type) {

    case ELEMENT_TYPE_SCENARIO:

      return PREFIX_INT_DOM;

    case ELEMENT_TYPE_OPERATOR:
@@ -367,8 +391,9 @@ class NetworkCharacteristicsEventPane extends Component { 


    var elements = _.chain(this.props.networkElements)

      .filter(e => {

        var type = this.state.currentElementType;

        var type = getElemFieldVal(element, FIELD_TYPE);

        var elemType = getElemFieldVal(e, FIELD_TYPE);



        if (type === ELEMENT_TYPE_OPERATOR_GENERIC) {

          return elemType === ELEMENT_TYPE_OPERATOR;

        } else if (type === ELEMENT_TYPE_POA_GENERIC) {
@@ -391,13 +416,13 @@ class NetworkCharacteristicsEventPane extends Component { 
              style={styles.select}

              label="Network Element Type"

              outlined

              options={ncApplicableTypes}

              options={this.state.ncTypes}

              onChange={event => {

                var elem = this.firstElementMatchingType(event.target.value);

                this.props.updateElement(elem);

                this.setState({ currentElementType: event.target.value });

              }}

              data-cy={EXEC_EVT_NC_TYPE}

              value={element ? getElemFieldVal(element, FIELD_TYPE) || '' : ''}

            />

          </GridCell>

          <GridCell span="4"></GridCell>
@@ -433,9 +458,7 @@ class NetworkCharacteristicsEventPane extends Component { 
        <CancelApplyPair

          cancelText="Close"

          applyText="Submit"

          onCancel={() => {

            this.props.onClose();

          }}

          onCancel={e => this.onNetworkCharacPaneClose(e)}

          onApply={e => this.triggerEvent(e)}

          saveDisabled={

            !elements.length || !element.elementType || !this.props.element.name || nbErrors

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

+22 −0
Original line number Diff line number Diff line
@@ -35,6 +35,8 @@ const initialState = { 
  automationPoasInRangeMode: false,

  execCurrentEvent: null,

  currentEventType: MOBILITY_EVENT, // Should be moved somewhere else

  mobilityEventTarget: '',

  mobilityEventDestination: '',

  devMode: false,

  currentDialog: '',

  automaticRefresh: false,
@@ -121,6 +123,22 @@ export function uiExecChangeCurrentEvent(event) { 
  };

}



const UI_EXEC_CHANGE_MOBILITY_EVENT_TARGET = 'UI_EXEC_CHANGE_MOBILITY_EVENT_TARGET';

export function uiExecChangeMobilityEventTarget(event) {

  return {

    type: UI_EXEC_CHANGE_MOBILITY_EVENT_TARGET,

    payload: event

  };

}



const UI_EXEC_CHANGE_MOBILITY_EVENT_DESTINATION = 'UI_EXEC_CHANGE_MOBILITY_EVENT_DESTINATION';

export function uiExecChangeMobilityEventDestination(event) {

  return {

    type: UI_EXEC_CHANGE_MOBILITY_EVENT_DESTINATION,

    payload: event

  };

}



const UI_EXEC_CHANGE_EVENT_CREATION_MODE = 'UI_EXEC_CHANGE_EVENT_CREATION_MODE';

export function uiExecChangeEventCreationMode(val) {

  return {
@@ -307,6 +325,10 @@ export default function uiReducer(state = initialState, action) { 
    return updateObject(state, { sandboxCfg: action.payload });

  case UI_EXEC_CHANGE_CURRENT_EVENT:

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

  case UI_EXEC_CHANGE_MOBILITY_EVENT_TARGET:

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

  case UI_EXEC_CHANGE_MOBILITY_EVENT_DESTINATION:

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

  case UI_CHANGE_DEV_MODE:

    return updateObject(state, { devMode: action.payload || false });

  case UI_CHANGE_CURRENT_DIALOG: