Commit f9110672 authored by Nikhil Doifode's avatar Nikhil Doifode
Browse files

Retention of Manual Event Creation fields on changing tabs 

Changes:
1. Added '@' as alias for src folder for having absolute path while importing
2. Added Mobility Event target and destination to state for retention
3. Disabled loading Mobility event as default
4. Added clearing all fields funtionality on clicking Close button
5. Disabled local state in Component and changed it to global state
6. Added value field to Tags where it was missing.

Testing:
Cypress & UT pass
Manual testing of Event Fields and changing the values
parent 6f445b71

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

+22 −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,8 @@ class EventCreationPane extends Component { 
            this.updateElement(element);

          }}

          onSuccess={this.props.onSuccess}

          onClose={this.props.onClose}

          // onClose={this.props.onClose}

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

          UEs={this.props.UEs}

          POAs={this.props.POAs}

          EDGEs={this.props.EDGEs}
@@ -149,6 +160,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

+1 −1
Original line number Diff line number Diff line
@@ -82,7 +82,7 @@ class ExecPageContainer extends Component { 
  }



  componentDidMount() {

    this.props.changeCurrentEvent(MOBILITY_EVENT);

    // this.props.changeCurrentEvent(MOBILITY_EVENT);

  }



  /**

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

+62 −15
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,14 +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.values = {

    //   eventType: '',

    //   eventTarget: '',

    //   eventDestination: ''

    // };



    this.state = {};

  }
@@ -66,18 +72,28 @@ 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.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.values.eventTarget,

        // dest: this.values.eventDestination

        elementName: this.props.mobilityEventTarget,

        dest: this.props.mobilityEventDestination

      }

    };
@@ -92,7 +108,8 @@ 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.state.eventTarget;

    var target = this.props.mobilityEventTarget

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

      return element.label === target;

    });
@@ -136,11 +153,15 @@ class MobilityEventPane extends Component { 
                options={_.map(this.props.MobTypes, elem =>

                  getElemFieldVal(elem, FIELD_NAME)

                )}

                // onChange={event => {

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

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

                // }}

                onChange={event => {

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

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

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

                }}

                data-cy={EXEC_EVT_MOB_TARGET}

                value={this.props.mobilityEventTarget}

              />

            </GridCell>

            <GridCell span="4"></GridCell>
@@ -154,11 +175,15 @@ class MobilityEventPane extends Component { 
                options={_.map(populateDestination, elem =>

                  getElemFieldVal(elem, FIELD_NAME)

                )}

                // onChange={event => {

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

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

                // }}

                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 +191,8 @@ class MobilityEventPane extends Component { 
          <CancelApplyPair

            cancelText="Close"

            applyText="Submit"

            onCancel={this.props.onClose}

            // onCancel={this.props.onClose}

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

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

          />

        </>
@@ -187,4 +213,25 @@ 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



// export default MobilityEventPane;

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

+24 −9
Original line number Diff line number Diff line
@@ -138,13 +138,20 @@ class NetworkCharacteristicsEventPane extends Component { 


    this.state = {

      dialogOpen: false,

      currentElementType: ''

      // currentElementType: ''

    };

  }



  onNetworkCharacPaneClose(e) {

    e.preventDefault();

    setElemFieldVal(this.props.element, FIELD_TYPE, '');

    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 +164,8 @@ class NetworkCharacteristicsEventPane extends Component { 
    }



    var neType = '';

    switch(this.state.currentElementType) {

    // switch(this.state.currentElementType) {

    switch(type) {

    case ELEMENT_TYPE_OPERATOR_GENERIC:

      neType = DOMAIN_TYPE_STR;

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

      break;

    default:

      neType = this.state.currentElementType;

      // neType = this.state.currentElementType;

      neType = type;

    }



    var ncEvent = {
@@ -233,7 +242,9 @@ class NetworkCharacteristicsEventPane extends Component { 
  }



  currentPrefix() {

    switch (this.state.currentElementType) {

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

    // switch (this.state.currentElementType) {

    switch (type) {

    case ELEMENT_TYPE_SCENARIO:

      return PREFIX_INT_DOM;

    case ELEMENT_TYPE_OPERATOR:
@@ -367,8 +378,10 @@ class NetworkCharacteristicsEventPane extends Component { 


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

      .filter(e => {

        var type = this.state.currentElementType;

        // 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) {
@@ -395,9 +408,10 @@ class NetworkCharacteristicsEventPane extends Component { 
              onChange={event => {

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

                this.props.updateElement(elem);

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

                // 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 +447,10 @@ class NetworkCharacteristicsEventPane extends Component { 
        <CancelApplyPair

          cancelText="Close"

          applyText="Submit"

          onCancel={() => {

            this.props.onClose();

          }}

          // 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: