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

config page map view

parent d0cdae56

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

+42 −14
Original line number Diff line number Diff line
@@ -20,6 +20,8 @@ import React, { Component } from 'react'; 
import * as YAML from 'yamljs';

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

import { Elevation } from '@rmwc/elevation';

import IDSelect from '../../components/helper-components/id-select';

import IDCMap from '../idc-map';

import IDCVis from '../idc-vis';

import CfgNetworkElementContainer from './cfg-network-element-container';

import CfgPageScenarioButtons from './cfg-page-scenario-buttons';
@@ -45,7 +47,8 @@ import { 
} from '../../state/cfg';



import {

  uiChangeCurrentDialog

  uiChangeCurrentDialog,

  uiCfgChangeView

} from '../../state/ui';



import {
@@ -53,6 +56,9 @@ import { 
  CFG_STATE_LOADED,

  CFG_STATE_NEW,

  CFG_STATE_IDLE,

  CFG_VIEW_NETWORK,

  CFG_VIEW_MAP,

  CFG_VIEW_TYPE,

  PAGE_CONFIGURE,

  ELEMENT_TYPE_SCENARIO,

  IDC_DIALOG_OPEN_SCENARIO,
@@ -585,13 +591,26 @@ class CfgPageContainer extends Component { 
                style={styles.headline}

              >

                <GridInner>

                  <GridCell align={'middle'} span={4}>

                  <IDSelect

                    label="View"

                    span={2}

                    options={[CFG_VIEW_NETWORK, CFG_VIEW_MAP]}

                    onChange={(e) => this.props.changeView(e.target.value)}

                    value={this.props.cfgView}

                    disabled={false}

                    cydata={CFG_VIEW_TYPE}

                  />

                  <GridCell align={'middle'} style={{ height: '100%'}} span={3}>

                    <GridInner style={{ marginLeft: 10, height: '100%', borderLeft: '2px solid #e4e4e4'}}>

                      <GridCell align={'middle'} style={{ marginLeft: 20}} span={12}>

                        <HeadlineBar

                          titleLabel="Scenario"

                          scenarioName={this.props.scenarioName}

                        />

                      </GridCell>

                  <GridCell align={'middle'} span={8}>

                    </GridInner>

                  </GridCell>

                  <GridCell align={'middle'} span={7}>

                    <GridInner align={'right'}>

                      <GridCell span={12}>

                        <CfgPageScenarioButtons
@@ -629,12 +648,19 @@ class CfgPageContainer extends Component { 
                <GridCell span={8}>

                  <Elevation className="component-style" z={2}>

                    <div style={{ padding: 10, height: '70vh' }}>

                      {this.props.cfgView === CFG_VIEW_NETWORK && (

                        <IDCVis

                          type={TYPE_CFG}

                          width='100%'

                          height='100%'

                          onEditElement={elem => this.onEditElement(elem)}

                        />

                      )}

                      {this.props.cfgView === CFG_VIEW_MAP && (

                        <IDCMap

                          type={TYPE_CFG}

                        />

                      )}

                    </div>

                  </Elevation>

                </GridCell>
@@ -695,6 +721,7 @@ const mapStateToProps = state => { 
  return {

    cfg: state.cfg,

    cfgState: state.cfg.state,

    cfgView: state.ui.cfgView,

    configuredElement: state.cfg.elementConfiguration.configuredElement,

    table: state.cfg.table,

    selectedElements: state.cfg.table.selected,
@@ -715,7 +742,8 @@ const mapDispatchToProps = dispatch => { 
    changeCurrentDialog: type => dispatch(uiChangeCurrentDialog(type)),

    changeScenarioList: scenarios => dispatch(cfgChangeScenarioList(scenarios)),

    changeState: s => dispatch(cfgChangeState(s)),

    changeScenario: scenario => dispatch(cfgChangeScenario(scenario))

    changeScenario: scenario => dispatch(cfgChangeScenario(scenario)),

    changeView: view => dispatch(uiCfgChangeView(view))

  };

};

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

+1 −0
Original line number Diff line number Diff line
@@ -146,6 +146,7 @@ const ViewForName = ({ 
    return (

      <div style={{ height: '80vh' }}>

        <IDCMap

          type={TYPE_EXEC}

          sandboxName={sandboxName}

        />

      </div>

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

+10 −14
Original line number Diff line number Diff line
@@ -19,7 +19,7 @@ import { connect } from 'react-redux'; 
import React, { Component } from 'react';

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

import { Elevation } from '@rmwc/elevation';

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

import IDSelect from '../../components/helper-components/id-select';

import DashboardContainer from './dashboard-container';

import EventContainer from './event-container';

import ExecPageSandboxButtons from './exec-page-sandbox-buttons';
@@ -397,19 +397,15 @@ class ExecPageContainer extends Component { 
                style={styles.headline}

              >

                <GridInner>

                  <GridCell align={'middle'} span={2}>

                    <Select

                      style={{ width: '100%' }}

                  <IDSelect

                    label="Sandbox"

                      outlined

                    span={2}

                    options={sandboxes}

                      onChange={(e) => {

                        this.props.setSandbox(e.target.value);

                      }}

                    onChange={(e) => this.props.setSandbox(e.target.value)}

                    value={sandbox}

                      data-cy={EXEC_SELECT_SANDBOX}

                    disabled={false}

                    cydata={EXEC_SELECT_SANDBOX}

                  />

                  </GridCell>

                  <GridCell align={'middle'} span={2}>

                    <ExecPageSandboxButtons

                      sandbox={sandbox}

js-apps/meep-frontend/src/js/containers/idc-map.js

+54 −34
Original line number Diff line number Diff line
@@ -23,12 +23,11 @@ import 'mapbox-gl-leaflet'; 
import deepEqual from 'deep-equal';

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

import {

  execChangeMap

} from '../state/exec';

import {

  uiCfgChangeMapCfg,

  uiExecChangeSandboxCfg

} from '../state/ui';

import {

  TYPE_CFG,

  HOST_PATH,

  DEFAULT_MAP_LATITUDE,

  DEFAULT_MAP_LONGITUDE,
@@ -77,16 +76,24 @@ class IDCMap extends Component { 
    }



    // Update if map changed

    if (!deepEqual(nextProps.execMap, this.props.execMap)) {

    if (!deepEqual(this.getMap(nextProps), this.getMap(this.props))) {

      return true;

    }



    return false;

  }



  getMap(props) {

    return (this.props.type === TYPE_CFG) ? props.cfgPageMap : props.execPageMap;

  }



  getCfg() {

    return (this.props.type === TYPE_CFG) ? this.props.mapCfg : this.props.sandboxCfg[this.props.sandboxName];

  }



  createMap() {

    // Get stored configuration

    var cfg = this.props.sandboxCfg[this.props.sandboxName];

    var cfg = this.getCfg();

    var lat = cfg.center ? cfg.center.lat : DEFAULT_MAP_LATITUDE;

    var lng = cfg.center ? cfg.center.lng : DEFAULT_MAP_LONGITUDE;

    var zoom = cfg.zoom ? cfg.zoom : DEFAULT_MAP_ZOOM;
@@ -159,24 +166,28 @@ class IDCMap extends Component { 
    }

  }



  updateZoom(map) {

    var zoom = map.getZoom();

  updateCfg(cfg) {

    if (this.props.type === TYPE_CFG) {

      this.props.changeMapCfg(updateObject(this.getCfg(), cfg));

    } else {

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

    sandboxCfg[this.props.sandboxName]['zoom'] = zoom;

      if (sandboxCfg[this.props.sandboxName]) {

        sandboxCfg[this.props.sandboxName] = updateObject(sandboxCfg[this.props.sandboxName], cfg);

        this.props.changeSandboxCfg(sandboxCfg);

      }

    }

  }



  updateZoom(map) {

    this.updateCfg({zoom: map.getZoom()});

  }



  updateCenter(map) {

    var center = map.getCenter();

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

    sandboxCfg[this.props.sandboxName]['center'] = center;

    this.props.changeSandboxCfg(sandboxCfg);

    this.updateCfg({center: map.getCenter()});

  }



  updateBaseLayer(event) {

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

    sandboxCfg[this.props.sandboxName]['baselayerName'] = event.name;

    this.props.changeSandboxCfg(sandboxCfg);

    this.updateCfg({baselayerName: event.name});

  }



  setUeMarker(ue) {
@@ -360,15 +371,20 @@ class IDCMap extends Component { 
    if (!this.map) {

      return;

    }

    var map = this.getMap(this.props);

    if (!map) {

      return;

    }



    // Set UE markers

    let ueList = this.props.execMap.ueList;

    var ueMap = {};

    for (let i = 0; i < ueList.length; i++) {

      let ue = ueList[i];

    if (map.ueList) {

      for (let i = 0; i < map.ueList.length; i++) {

        let ue = map.ueList[i];

        this.setUeMarker(ue);

        ueMap[ue.assetName] = true;

      }

    }



    // Remove old UE markers

    this.ueOverlay.eachLayer((marker) => {
@@ -381,13 +397,14 @@ class IDCMap extends Component { 
    });



    // Set POA markers

    let poaList = this.props.execMap.poaList;

    var poaMap = {};

    for (let i = 0; i < poaList.length; i++) {

      let poa = poaList[i];

    if (map.poaList) {

      for (let i = 0; i < map.poaList.length; i++) {

        let poa = map.poaList[i];

        this.setPoaMarker(poa);

        poaMap[poa.assetName] = true;

      }

    }



    // Remove old POA markers

    this.poaOverlay.eachLayer((marker) => {
@@ -398,13 +415,14 @@ class IDCMap extends Component { 
    });



    // Set COMPUTE markers

    let computeList = this.props.execMap.computeList;

    var computeMap = {};

    for (let i = 0; i < computeList.length; i++) {

      let compute = computeList[i];

    if (map.computeList) {

      for (let i = 0; i < map.computeList.length; i++) {

        let compute = map.computeList[i];

        this.setComputeMarker(compute);

        computeMap[compute.assetName] = true;

      }

    }



    // Remove old COMPUTE markers

    this.computeOverlay.eachLayer((marker) => {
@@ -426,15 +444,17 @@ class IDCMap extends Component { 


const mapStateToProps = state => {

  return {

    execMap: state.exec.map,

    cfgPageMap: state.cfg.map,

    execPageMap: state.exec.map,

    sandbox: state.ui.sandbox,

    sandboxCfg: state.ui.sandboxCfg

    sandboxCfg: state.ui.sandboxCfg,

    mapCfg: state.ui.mapCfg

  };

};



const mapDispatchToProps = dispatch => {

  return {

    changeExecMap: map => dispatch(execChangeMap(map)),

    changeMapCfg: cfg => dispatch(uiCfgChangeMapCfg(cfg)),

    changeSandboxCfg: cfg => dispatch(uiExecChangeSandboxCfg(cfg))

  };

};

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

+8 −2
Original line number Diff line number Diff line
@@ -14,8 +14,8 @@ 
 * limitations under the License.

 */



export const HOST_PATH = location.origin;

// export const HOST_PATH = 'http://10.3.16.105';

// export const HOST_PATH = location.origin;

export const HOST_PATH = 'http://10.3.16.105';



// MEEP types

export const TYPE_CFG = 'CFG';
@@ -83,9 +83,15 @@ export const CFG_STATE_IDLE = 'IDLE'; 
export const CFG_STATE_NEW = 'NEW';

export const CFG_STATE_LOADED = 'LOADED';



// Configuration page views

export const CFG_VIEW_NETWORK = 'Network';

export const CFG_VIEW_MAP = 'Map';



// Configuration page IDs

export const CFG_VIS = 'cfg-vis';



export const CFG_VIEW_TYPE = 'cfg-view-type';



export const CFG_BTN_NEW_SCENARIO = 'cfg-btn-new-scenario';

export const CFG_BTN_OPEN_SCENARIO = 'cfg-btn-open-scenario';

export const CFG_BTN_SAVE_SCENARIO = 'cfg-btn-save-scenario';