show configured elements on map in config page (333b12d2) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+1 −0

Original line number	Diff line number	Diff line
		@@ -656,6 +656,7 @@ class CfgPageContainer extends Component {
		{this.props.cfgView === CFG_VIEW_MAP && (
		<IDCMap
		type={TYPE_CFG}
		onEditElement={elem => this.onEditElement(elem)}
		/>
		)}
		</div>

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

+98 −35

Original line number	Diff line number	Diff line
		@@ -22,17 +22,24 @@ import 'mapbox-gl';
		import 'mapbox-gl-leaflet';
		import deepEqual from 'deep-equal';
		import { updateObject } from '../util/object-util';
		import { execChangeTable } from '../state/exec';
		import { cfgChangeTable } from '../state/cfg';
		import {
		uiCfgChangeMapCfg,
		uiExecChangeSandboxCfg
		} from '../state/ui';
		import {
		TYPE_CFG,
		TYPE_EXEC,
		HOST_PATH,
		DEFAULT_MAP_LATITUDE,
		DEFAULT_MAP_LONGITUDE,
		DEFAULT_MAP_ZOOM
		} from '../meep-constants';
		import {
		FIELD_NAME,
		getElemFieldVal
		} from '../util/elem-utils';

		class IDCMap extends Component {
		constructor(props) {
		@@ -91,6 +98,58 @@ class IDCMap extends Component {
		return (this.props.type === TYPE_CFG) ? this.props.mapCfg : this.props.sandboxCfg[this.props.sandboxName];
		}

		updateCfg(cfg) {
		switch (this.props.type) {
		case TYPE_CFG:
		this.props.changeMapCfg(updateObject(this.getCfg(), cfg));
		break;
		case TYPE_EXEC:
		var sandboxCfg = updateObject({}, this.props.sandboxCfg);
		if (sandboxCfg[this.props.sandboxName]) {
		sandboxCfg[this.props.sandboxName] = updateObject(sandboxCfg[this.props.sandboxName], cfg);
		this.props.changeSandboxCfg(sandboxCfg);
		}
		break;
		default:
		break;
		}
		}

		changeTable(table) {
		switch (this.props.type) {
		case TYPE_CFG:
		this.props.changeCfgTable(table);
		break;
		case TYPE_EXEC:
		this.props.changeExecTable(table);
		break;
		default:
		break;
		}
		}

		editElement(name) {
		// Update selected nodes in table
		const table = updateObject({}, this.props.cfgTable);
		const elem = this.getElementByName(table.entries, name);
		table.selected = elem ? [elem.id] : [];
		this.changeTable(table);

		// Open selected element in element configuration pane
		if (this.props.type === TYPE_CFG) {
		this.props.onEditElement(elem);
		}
		}

		getElementByName(entries, name) {
		for (var i = 0; i < entries.length; i++) {
		if (getElemFieldVal(entries[i], FIELD_NAME) === name) {
		return entries[i];
		}
		}
		return null;
		}

		createMap() {
		// Get stored configuration
		var cfg = this.getCfg();
		@@ -155,9 +214,12 @@ class IDCMap extends Component {

		// Handlers
		var _this = this;
		this.map.on('zoomend', function() {_this.updateZoom(this);});
		this.map.on('moveend', function() {_this.updateCenter(this);});
		this.map.on('baselayerchange', function(e) {_this.updateBaseLayer(e);});
		this.map.on('zoomend', function() {_this.setZoom(this);});
		this.map.on('moveend', function() {_this.setCenter(this);});
		this.map.on('baselayerchange', function(e) {_this.setBaseLayer(e);});

		// Add asset markers
		this.updateMarkers();
		}

		destroyMap() {
		@@ -166,27 +228,15 @@ class IDCMap extends Component {
		}
		}

		updateCfg(cfg) {
		if (this.props.type === TYPE_CFG) {
		this.props.changeMapCfg(updateObject(this.getCfg(), cfg));
		} else {
		var sandboxCfg = updateObject({}, this.props.sandboxCfg);
		if (sandboxCfg[this.props.sandboxName]) {
		sandboxCfg[this.props.sandboxName] = updateObject(sandboxCfg[this.props.sandboxName], cfg);
		this.props.changeSandboxCfg(sandboxCfg);
		}
		}
		}

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

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

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

		@@ -333,6 +383,8 @@ class IDCMap extends Component {

		// UE Marker Event Handler
		clickUeMarker(marker) {
		this.editElement(marker.options.meep.ue.id);
		if (this.props.type === TYPE_EXEC) {
		var latlng = marker.getLatLng();
		var msg = '<b>id: ' + marker.options.meep.ue.id + '</b><br>';
		msg += 'path-mode: ' + marker.options.meep.ue.eopMode + '<br>';
		@@ -340,23 +392,30 @@ class IDCMap extends Component {
		msg += latlng.toString();
		this.showPopup(latlng, msg);
		}
		}

		// POA Marker Event Handler
		clickPoaMarker(marker) {
		this.editElement(marker.options.meep.poa.id);
		if (this.props.type === TYPE_EXEC) {
		var latlng = marker.getLatLng();
		var msg = '<b>id: ' + marker.options.meep.poa.id + '</b><br>';
		msg += 'radius: ' + marker.options.meep.poa.range.options.radius + ' m<br>';
		msg += latlng.toString();
		this.showPopup(latlng, msg);
		}
		}

		// UE Marker Event Handler
		clickComputeMarker(marker) {
		this.editElement(marker.options.meep.compute.id);
		if (this.props.type === TYPE_EXEC) {
		var latlng = marker.getLatLng();
		var msg = '<b>id: ' + marker.options.meep.compute.id + '</b><br>';
		msg += latlng.toString();
		this.showPopup(latlng, msg);
		}
		}

		// Show position popup
		showPopup(latlng, msg) {
		@@ -448,14 +507,18 @@ const mapStateToProps = state => {
		execPageMap: state.exec.map,
		sandbox: state.ui.sandbox,
		sandboxCfg: state.ui.sandboxCfg,
		mapCfg: state.ui.mapCfg
		mapCfg: state.ui.mapCfg,
		cfgTable: state.cfg.table,
		execTable: state.exec.table
		};
		};

		const mapDispatchToProps = dispatch => {
		return {
		changeMapCfg: cfg => dispatch(uiCfgChangeMapCfg(cfg)),
		changeSandboxCfg: cfg => dispatch(uiExecChangeSandboxCfg(cfg))
		changeSandboxCfg: cfg => dispatch(uiExecChangeSandboxCfg(cfg)),
		changeExecTable: table => dispatch(execChangeTable(table)),
		changeCfgTable: table => dispatch(cfgChangeTable(table))
		};
		};

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

+17 −16

Original line number	Diff line number	Diff line
		@@ -26,11 +26,19 @@ import {
		execChangeVis,
		execVisFilteredData
		} from '../state/exec';
		import { cfgChangeTable, cfgChangeVis, cfgElemEdit } from '../state/cfg';

		import { TYPE_CFG, TYPE_EXEC } from '../meep-constants';

		import { FIELD_NAME, getElemFieldVal } from '../util/elem-utils';
		import {
		cfgChangeTable,
		cfgChangeVis,
		cfgElemEdit
		} from '../state/cfg';
		import {
		TYPE_CFG,
		TYPE_EXEC
		} from '../meep-constants';
		import {
		FIELD_NAME,
		getElemFieldVal
		} from '../util/elem-utils';

		function createBoxGroup(groups, name, bgColor) {
		groups[name] = {
		@@ -267,11 +275,8 @@ class IDCVis extends Component {

		// Open first selected element in element configuration pane
		if (this.props.type === TYPE_CFG) {
		this.props.onEditElement(
		table.selected.length
		? this.getElementById(table.entries, table.selected[0])
		: null
		);
		this.props.onEditElement(table.selected.length ?
		this.getElementById(table.entries, table.selected[0]) : null);
		}
		});
		}
		@@ -437,12 +442,8 @@ const mapStateToProps = state => {

		const mapDispatchToProps = dispatch => {
		return {
		changeExecTable: table => {
		dispatch(execChangeTable(table));
		},
		changeCfgTable: table => {
		dispatch(cfgChangeTable(table));
		},
		changeExecTable: table => dispatch(execChangeTable(table)),
		changeCfgTable: table => dispatch(cfgChangeTable(table)),
		changeExecVis: vis => dispatch(execChangeVis(vis)),
		changeCfgVis: vis => dispatch(cfgChangeVis(vis)),
		changeCfgElement: element => dispatch(cfgElemEdit(element))

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

+8 −13

Original line number	Diff line number	Diff line
		@@ -86,7 +86,8 @@ import {
		import {
		cfgChangeScenario,
		cfgChangeVisData,
		cfgChangeTable
		cfgChangeTable,
		cfgChangeMap
		} from '../state/cfg';

		// REST API Clients
		@@ -342,11 +343,13 @@ class MeepContainer extends Component {
		// Parse Scenario object to retrieve visualization data and scenario table
		var page = pageType === TYPE_CFG ? this.props.cfg : this.props.exec;
		var parsedScenario = parseScenario(page.scenario);
		var updatedMapData = updateObject({}, parsedScenario.mapData);
		var updatedVisData = updateObject(page.vis.data, parsedScenario.visData);
		var updatedTable = updateObject(page.table, parsedScenario.table);

		// Dispatch state updates
		if (pageType === TYPE_CFG) {
		this.props.cfgChangeMap(updatedMapData);
		this.props.cfgChangeVisData(updatedVisData);
		this.props.cfgChangeTable(updatedTable);

		@@ -540,10 +543,7 @@ class MeepContainer extends Component {

		// Add new element to scenario
		newScenarioElem(pageType, element, scenarioUpdate) {
		var scenario =
		pageType === TYPE_CFG
		? this.props.cfg.scenario
		: this.props.exec.scenario;
		var scenario = pageType === TYPE_CFG ? this.props.cfg.scenario : this.props.exec.scenario;
		var updatedScenario = updateObject({}, scenario);
		addElementToScenario(updatedScenario, element);
		if (scenarioUpdate) {
		@@ -553,10 +553,7 @@ class MeepContainer extends Component {

		// Update element in scenario
		updateScenarioElem(pageType, element) {
		var scenario =
		pageType === TYPE_CFG
		? this.props.cfg.scenario
		: this.props.exec.scenario;
		var scenario = pageType === TYPE_CFG ? this.props.cfg.scenario : this.props.exec.scenario;
		var updatedScenario = updateObject({}, scenario);
		updateElementInScenario(updatedScenario, element);
		this.changeScenario(pageType, updatedScenario);
		@@ -564,10 +561,7 @@ class MeepContainer extends Component {

		// Delete element in scenario (also deletes child elements)
		deleteScenarioElem(pageType, element) {
		var scenario =
		pageType === TYPE_CFG
		? this.props.cfg.scenario
		: this.props.exec.scenario;
		var scenario = pageType === TYPE_CFG ? this.props.cfg.scenario : this.props.exec.scenario;
		var updatedScenario = updateObject({}, scenario);
		removeElementFromScenario(updatedScenario, element);
		this.changeScenario(pageType, updatedScenario);
		@@ -730,6 +724,7 @@ const mapDispatchToProps = dispatch => {
		execChangeMapUeList: list => dispatch(execChangeMapUeList(list)),
		execChangeMapPoaList: list => dispatch(execChangeMapPoaList(list)),
		execChangeMapComputeList: list => dispatch(execChangeMapComputeList(list)),
		cfgChangeMap: map => dispatch(cfgChangeMap(map)),
		cfgChangeVisData: data => dispatch(cfgChangeVisData(data)),
		cfgChangeTable: data => dispatch(cfgChangeTable(data)),
		execChangeOkToTerminate: ok => dispatch(execChangeOkToTerminate(ok)),

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

+3 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@ import { combineReducers } from 'redux';
		import { typeReducer } from './type-reducer';
		import { stateReducer } from './state-reducer';
		import { scenarioReducer } from './scenario-reducer';
		import { cfgMapReducer } from './map-reducer';
		import { cfgVisReducer } from './vis-reducer';
		import { cfgTableReducer } from './table-reducer';
		import { cfgElementConfigurationReducer } from './element-configuration';
		@@ -26,6 +27,7 @@ import { cfgApiResultsReducer } from './api-results';
		export * from './type-reducer';
		export * from './state-reducer';
		export * from './scenario-reducer';
		export * from './map-reducer';
		export * from './vis-reducer';
		export * from './table-reducer';
		export * from './element-configuration';
		@@ -35,6 +37,7 @@ const cfgReducer = combineReducers({
		type: typeReducer,
		state: stateReducer,
		scenario: scenarioReducer,
		map: cfgMapReducer,
		vis: cfgVisReducer,
		table: cfgTableReducer,
		elementConfiguration: cfgElementConfigurationReducer,