Commit 3cee84f1 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

frontend controls state sync fixes

parent 581c3f32

js-apps/frontend/src/js/app-constants.js

+1 −1
Original line number Diff line number Diff line
@@ -77,7 +77,7 @@ export const OAUTH_PROVIDER_GITLAB = 'gitlab'; 
export const DEFAULT_VELOCITY_THRESHOLD = 10;



// API pane defaults

export const EDGE_APP_ENABLE_COUNT_MAX = 25;

export const EDGE_APP_ENABLE_COUNT_MAX = 20;

export const EDGE_APP_DISABLE_COUNT_MAX = 5;

export const BLACKOUT_TIME = 3;

js-apps/frontend/src/js/containers/app-container.js

+72 −75
Original line number Diff line number Diff line
@@ -50,7 +50,8 @@ import { 
  STATUS_SIGNED_OUT,

  EDGE_APP_ENABLE_COUNT_MAX,

  BLACKOUT_TIME,

  EDGE_APP_DISABLE_COUNT_MAX

  EDGE_APP_DISABLE_COUNT_MAX,

  NO_SCENARIO_NAME

} from '../app-constants';



import {
@@ -81,6 +82,8 @@ import { 
  uiChangeSignInUsername,

  uiChangeSignInUserRole,

  uiSandboxChangeUpdateUeInProgressCount,

  uiSandboxChangeUpdateAutomationInProgressCount,

  uiSandboxChangeUpdateAppInstancesInProgressCount,

  uiSandboxChangeActivationInProgressCount,

  uiSandboxChangeActivationInProgressScenarioName

} from '../state/ui';
@@ -139,7 +142,6 @@ class AppContainer extends Component { 
    this.creationSandboxTimer = null;

    this.sboxPageRefreshIntervalTimer = null;

    this.sandboxErrorCount = 0;

    this.activeScenarioName = '';

    this.sessionKeepaliveTimer = null;

    this.refreshApiConsole = false;

    this.refreshUePaths = false;
@@ -172,6 +174,12 @@ class AppContainer extends Component { 
    if (this.props.updateUeInProgressCount === undefined) {

      this.props.changeUpdateUeInProgressCount(-1);

    }

    if (this.props.updateAutomationInProgressCount === undefined) {

      this.props.changeUpdateAutomationInProgressCount(-1);

    }

    if (this.props.updateAppInstancesInProgressCount === undefined) {

      this.props.changeUpdateAppInstancesInProgressCount(-1);

    }

    if (this.props.stationaryUeList === undefined) {

      this.props.changeStationaryUeList([]);

    }
@@ -284,25 +292,19 @@ class AppContainer extends Component { 
          // Refresh sandbox page

          if (this.props.page === PAGE_SANDBOX) {

            if (this.props.sandboxName) {

              this.refreshConfigPane();

              this.refreshScenario();

              this.refreshMap();

              // Only update while scenario is running

              if (this.props.scenario && (this.props.scenario.name !== NO_SCENARIO_NAME)) {

                this.refreshAutomation();

                this.refreshMetricsTable();

                this.refreshAppInstancesTable();

              }

            }



          // Decrement update counters

          if (this.props.activationInProgressCount !== -1) {

            this.props.changeActivationInProgressCount(this.props.activationInProgressCount - 1);

          }

          if (this.props.updateUeInProgressCount !== -1) {

            this.props.changeUpdateUeInProgressCount(this.props.updateUeInProgressCount - 1);

          }



          // Descrement Edge App counters

          this.decrementEdgeApps(this.props.appInstanceTable);



          // Decrement progress counters

          this.decrementProgressCounters();

        },

        SBOX_REFRESH_INTERVAL

      );
@@ -555,22 +557,6 @@ class AppContainer extends Component { 
    this.meepGisAutomationApi.setAutomationStateByName('MOBILITY', !pauseButtonEnabled);

  }



  clearUpConfigPane() {

    this.props.changeNetworkFileSelected(DEFAULT_NO_NETWORK_FILE_SELECTED);

    this.props.changeNetworkInfo('');

    this.props.changeNbHighVelocityUe(0);

    this.props.changeNbLowVelocityUe(0);

    this.props.changeNbStationaryUe(0);

    this.props.changeStationaryUeList([]);

    this.props.changeLowVelocityUeList([]);

    this.props.changeHighVelocityUeList([]);

    this.props.changeApiTable(null);

    this.props.changeApiDetailedData(null);

    this.props.changeAppInstanceTable(null);

    this.props.changePauseButton(false);

    this.updateAutomation(false);

  }



  /**

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

   * @callback module:api/AuthApi~triggerWatchdogCallback
@@ -600,15 +586,10 @@ class AppContainer extends Component { 
  logoutCb() {

    this.props.changeSignInStatus(STATUS_SIGNED_OUT);

    this.props.changeSandboxName('');

    // this.deleteSandbox(this.props.sandboxName);

    this.updateScenario(null);

    this.props.changeActivationInProgressCount(-1);

    this.props.changeActivationInProgressScenarioName('');



    this.props.changeMap({ueList: [], poaList: [], computeList: []});

    // this.props.changeMapUeList([]);

    // this.props.changeMapPoaList([]);

    // this.props.changeMapComputeList([]);



    if (this.props.page !== PAGE_HOME) {

      this.setMainContent(PAGE_HOME);
@@ -729,7 +710,7 @@ class AppContainer extends Component { 
        this.updateScenario(null);

        this.props.changeApiTable(null);

        this.props.changeApiDetailedData(null);

        this.props.changeAppInstanceTable(null);

        this.props.changeAppInstanceTable([]);

      }

      return;

    }
@@ -749,17 +730,6 @@ class AppContainer extends Component { 
  updateScenario(scenario) {

    // Change scenario state

    this.props.changeScenario(scenario);

    if (scenario) {

      this.activeScenarioName = scenario.name;

    } else {

      if (this.activeScenarioName !== '') {

        this.activeScenarioName = '';

        //only clear to terminate a scenario, not to replace one already active with another one

        if (this.props.activationInProgressCount === -1) {

          this.clearUpConfigPane();

        }

      }

    }



    // Parse Scenario & update table

    var parsedScenario = parseScenario(scenario);
@@ -900,20 +870,23 @@ class AppContainer extends Component { 
      return;

    }



    var currentPauseButton = !data.active;

    // Make sure are ready to update state

    if (this.props.updateAutomationInProgressCount !== -1) {

      return;

    }



    if (currentPauseButton !== this.props.pauseButton) {

      this.props.changePauseButton(currentPauseButton);

    // Update pause button state

    var paused = !data.active;

    if (this.props.pauseButton !== paused) {

      this.props.changePauseButton(paused);

    }

  }



  refreshConfigPane() {

    if (this.activeScenarioName === '') {

  refreshAutomation() {

    this.meepGisAutomationApi.getAutomationStateByName('MOVEMENT', (error, data, response) =>

      this.getAutomationCb(error, data, response)

    );

  }

  }



  //get oldest data in the data that matches an entry in oldData

  mergeApiTableData(...arrays) {
@@ -962,7 +935,6 @@ class AppContainer extends Component { 
  }



  refreshMetricsTable() {

    if (this.props.networkFileSelected !== DEFAULT_NO_NETWORK_FILE_SELECTED) {

    // If polling just started, refresh entire API console list

    if (this.refreshApiConsole) {

      metricsQuery.scope.duration = '1d';
@@ -974,7 +946,6 @@ class AppContainer extends Component { 
      this.postHttpQueryCb(error, data, response);

    });

  }

  }



  /**

   * Callback function to receive the result of the postHttpQuery operation.
@@ -989,6 +960,11 @@ class AppContainer extends Component { 
      return;

    }



    // Make sure are ready to update state

    if (this.props.updateAppInstancesInProgressCount !== -1) {

      return;

    }



    // Update App Instance table

    var appInstances = data ? data : [];

    this.props.changeAppInstanceTable(appInstances);
@@ -998,12 +974,10 @@ class AppContainer extends Component { 
  }



  refreshAppInstancesTable() {

    if (this.props.networkFileSelected !== DEFAULT_NO_NETWORK_FILE_SELECTED) {

    this.meepAppInfoApi.applicationsGET(null, (error, data, response) => {

      this.getAppInstancesCb(error, data, response);

    });

  }

  }



  getAppInstance(name, appInstances) {

    if (appInstances) {
@@ -1118,6 +1092,25 @@ class AppContainer extends Component { 
    }

  }



  decrementProgressCounters() {

    // Update counters

    if (this.props.activationInProgressCount !== -1) {

      this.props.changeActivationInProgressCount(this.props.activationInProgressCount - 1);

    }

    if (this.props.updateUeInProgressCount !== -1) {

      this.props.changeUpdateUeInProgressCount(this.props.updateUeInProgressCount - 1);

    }

    if (this.props.updateAutomationInProgressCount !== -1) {

      this.props.changeUpdateAutomationInProgressCount(this.props.updateAutomationInProgressCount - 1);

    }

    if (this.props.updateAppInstancesInProgressCount !== -1) {

      this.props.changeUpdateAppInstancesInProgressCount(this.props.updateAppInstancesInProgressCount - 1);

    }



    // Edge App counters

    this.decrementEdgeApps(this.props.appInstanceTable);

  }



  renderPage() {

    switch (this.props.page) {

    case PAGE_HOME:
@@ -1279,9 +1272,11 @@ const mapStateToProps = state => { 
    appInstanceTable: state.sbox.appInstanceTable.data,

    appInstancesSelected: state.ui.appInstancesSelected,

    updateUeInProgressCount: state.ui.updateUeInProgressCount,

    updateAppInstancesInProgressCount: state.ui.updateAppInstancesInProgressCount,

    activationInProgressCount: state.ui.activationInProgressCount,

    activationInProgressScenarioName: state.ui.activationInProgressScenarioName,

    map: state.sbox.map

    map: state.sbox.map,

    scenario: state.sbox.scenario

  };

};
@@ -1320,6 +1315,8 @@ const mapDispatchToProps = dispatch => { 
    changeApiTable: value => dispatch(sboxChangeApiTable(value)),

    changeAppInstanceTable: value => dispatch(sboxChangeAppInstanceTable(value)),

    changeUpdateUeInProgressCount: count => dispatch(uiSandboxChangeUpdateUeInProgressCount(count)),

    changeUpdateAutomationInProgressCount: count => dispatch(uiSandboxChangeUpdateAutomationInProgressCount(count)),

    changeUpdateAppInstancesInProgressCount: count => dispatch(uiSandboxChangeUpdateAppInstancesInProgressCount(count)),

    changeActivationInProgressCount: count => dispatch(uiSandboxChangeActivationInProgressCount(count)),

    changeActivationInProgressScenarioName: name => dispatch(uiSandboxChangeActivationInProgressScenarioName(name))

  };

js-apps/frontend/src/js/containers/sandbox/configuration-pane.js

+40 −25
Original line number Diff line number Diff line
@@ -42,6 +42,8 @@ import { 
  uiSandboxChangeMecApiSelected,

  uiSandboxChangeApiDetailedData,

  uiSandboxChangeUpdateUeInProgressCount,

  uiSandboxChangeUpdateAutomationInProgressCount,

  uiSandboxChangeUpdateAppInstancesInProgressCount,

  uiSandboxChangeActivationInProgressCount,

  uiSandboxChangeActivationInProgressScenarioName

} from '../../state/ui';
@@ -73,6 +75,9 @@ class ConfigPane extends Component { 
  componentDidMount() {

    if (this.props.scenario !== null && this.props.scenario.name !== NO_SCENARIO_NAME) {

      this.getScenario(this.props.scenario.name, false);

    } else {

      this.resetConfigPane();

      this.resetApiPane();

    }

  }
@@ -119,6 +124,29 @@ class ConfigPane extends Component { 
    return comparison;

  }



  resetConfigPane() {

    this.props.changeNetworkFileSelected(DEFAULT_NO_NETWORK_FILE_SELECTED);

    this.props.changeNetworkInfo('');

    this.props.changePauseButton(false);

    this.props.changeNbHighVelocityUe(0);

    this.props.changeNbLowVelocityUe(0);

    this.props.changeNbStationaryUe(0);

    this.props.changeHighVelocityUeList([]);

    this.props.changeLowVelocityUeList([]);

    this.props.changeStationaryUeList([]);

    this.props.changeAppInstanceTable([]);

    this.props.changeUpdateAppInstancesInProgressCount(2);

    this.updateAutomation(false);

  }



  resetApiPane() {

    this.props.changeMecApiSelected('');

    this.props.changeApiTable(null);

    this.props.changeApiDetailedData(null);

    this.props.changeMepList([]);

    this.props.changeEdgeAppList([]);

  }



  /**

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

   * @callback module:api/ScenarioExecutionApi~activateScenarioCallback
@@ -128,15 +156,16 @@ class ConfigPane extends Component { 
    if (error) {

      return;

    }

    this.props.changePauseButton(false);

    this.props.changeApiTable(null);

    this.props.changeAppInstancesTable(null);

    this.props.changeApiDetailedData(null);

    // Enable movement by default

    this.updateAutomation(false);

  }



  setScenario(name) {

    this.props.changeMecApiSelected('');

    // Reset config & api panes

    this.resetConfigPane();

    this.resetApiPane();



    // Set new network

    this.props.changeActivationInProgressCount(2);

    this.props.changeActivationInProgressScenarioName(name);

    this.props.changeNetworkFileSelected(name);
@@ -158,11 +187,10 @@ class ConfigPane extends Component { 
      this.props.activateApi.terminateScenario((error, data, response) => {

        this.terminateScenarioCb(error, data, response);

      });

      //remove instances of the apiPane

    }

  }



  terminateAndActivateScenarioCb(error/*, data*/) {

  terminateAndActivateScenarioCb(error) {

    if (error) {

      return;

    }
@@ -173,31 +201,17 @@ class ConfigPane extends Component { 
  }



  terminateAndActivateScenario(name) {



    this.name = name;

    this.props.activateApi.terminateScenario((error, data, response) => {

      this.terminateAndActivateScenarioCb(error, data, response);

    });

  }



  terminateScenarioCb(error/*, data*/) {

  terminateScenarioCb(error) {

    this.activationInProgress = false;

    if (error) {

      return;

    }

    this.props.changeNbHighVelocityUe(0);

    this.props.changeNbLowVelocityUe(0);

    this.props.changeNbStationaryUe(0);

    this.props.changeHighVelocityUeList([]);

    this.props.changeLowVelocityUeList([]);

    this.props.changeStationaryUeList([]);

    this.props.changeMepList([]);

    this.props.changeEdgeAppList([]);

    this.props.changeApiDetailedData(null);

    this.props.changeNetworkFileSelected(DEFAULT_NO_NETWORK_FILE_SELECTED);

    this.props.changeNetworkInfo('');

    this.props.changePauseButton(false);

    this.updateAutomation(false);

  }



  /**
@@ -331,7 +345,7 @@ class ConfigPane extends Component { 
  }



  updateAutomation(pauseButtonEnabled) {

    this.props.changeUpdateUeInProgressCount(2);

    this.props.changeUpdateAutomationInProgressCount(2);

    this.props.automationApi.setAutomationStateByName('MOVEMENT', !pauseButtonEnabled);

    this.props.automationApi.setAutomationStateByName('MOBILITY', !pauseButtonEnabled);

  }
@@ -715,7 +729,6 @@ const mapStateToProps = state => { 
    edgeApps: state.ui.edgeApps,

    appInstanceTable: state.sbox.appInstanceTable.data,

    scenario: state.sbox.scenario,

    updateUeInProgressCount: state.ui.updateUeInProgressCount,

    appInstancesSelected: state.ui.appInstancesSelected,

    activationInProgressCount: state.ui.activationInProgressCount,

    activationInProgressScenarioName: state.ui.activationInProgressScenarioName
@@ -728,6 +741,8 @@ const mapDispatchToProps = dispatch => { 
    changeActivationInProgressCount: count => dispatch(uiSandboxChangeActivationInProgressCount(count)),

    changeActivationInProgressScenarioName: name => dispatch(uiSandboxChangeActivationInProgressScenarioName(name)),

    changeUpdateUeInProgressCount: count => dispatch(uiSandboxChangeUpdateUeInProgressCount(count)),

    changeUpdateAutomationInProgressCount: count => dispatch(uiSandboxChangeUpdateAutomationInProgressCount(count)),

    changeUpdateAppInstancesInProgressCount: count => dispatch(uiSandboxChangeUpdateAppInstancesInProgressCount(count)),

    changeNetworkFileSelected: name => dispatch(uiSandboxChangeNetworkFileSelected(name)),

    changeNetworkInfo: value => dispatch(uiSandboxChangeNetworkInfo(value)),

    changePauseButton: checked => dispatch(uiSandboxChangePauseButton(checked)),
@@ -742,7 +757,7 @@ const mapDispatchToProps = dispatch => { 
    changeMecApiSelected: name => dispatch(uiSandboxChangeMecApiSelected(name)),

    changeApiDetailedData: row => dispatch(uiSandboxChangeApiDetailedData(row)),

    changeApiTable: value => dispatch(sboxChangeApiTable(value)),

    changeAppInstancesTable: value => dispatch(sboxChangeAppInstanceTable(value))

    changeAppInstanceTable: value => dispatch(sboxChangeAppInstanceTable(value))

  };

};

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

+22 −0
Original line number Diff line number Diff line
@@ -40,6 +40,8 @@ const initialState = { 
  order: 'asc',

  detailedData: null,

  updateUeInProgressCount: -1,

  updateAutomationInProgressCount: -1,

  updateAppInstancesInProgressCount: -1,

  activationInProgressCount: -1,

  activationInProgressScenarioName: ''

};
@@ -306,6 +308,22 @@ export function uiSandboxChangeUpdateUeInProgressCount(count) { 
  };

}



const UI_SANDBOX_CHANGE_UPDATE_AUTOMATION_IN_PROGRESS_COUNT = 'UI_SANDBOX_CHANGE_UPDATE_AUTOMATION_IN_PROGRESS_COUNT';

export function uiSandboxChangeUpdateAutomationInProgressCount(count) {

  return {

    type: UI_SANDBOX_CHANGE_UPDATE_AUTOMATION_IN_PROGRESS_COUNT,

    payload: count

  };

}



const UI_SANDBOX_CHANGE_UPDATE_APP_INSTANCES_IN_PROGRESS_COUNT = 'UI_SANDBOX_CHANGE_UPDATE_APP_INSTANCES_IN_PROGRESS_COUNT';

export function uiSandboxChangeUpdateAppInstancesInProgressCount(count) {

  return {

    type: UI_SANDBOX_CHANGE_UPDATE_APP_INSTANCES_IN_PROGRESS_COUNT,

    payload: count

  };

}



const UI_SANDBOX_CHANGE_ACTIVATION_IN_PROGRESS_COUNT = 'UI_SANDBOX_CHANGE_ACTIVATION_IN_PROGRESS_COUNT';

export function uiSandboxChangeActivationInProgressCount(count) {

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

  case UI_SANDBOX_CHANGE_UPDATE_UE_IN_PROGRESS_COUNT:

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

  case UI_SANDBOX_CHANGE_UPDATE_AUTOMATION_IN_PROGRESS_COUNT:

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

  case UI_SANDBOX_CHANGE_UPDATE_APP_INSTANCES_IN_PROGRESS_COUNT:

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

  case UI_SANDBOX_CHANGE_ACTIVATION_IN_PROGRESS_COUNT:

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

  case UI_SANDBOX_CHANGE_ACTIVATION_IN_PROGRESS_SCENARIO_NAME: