frontend scenario configuration for physical location connection state, mode & type priority (fb20157a) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/src/js/containers/cfg/cfg-network-element-container.js

+106 −2

Original line number	Diff line number	Diff line
		@@ -27,7 +27,6 @@ import { Icon } from '@rmwc/icon';
		import { ChromePicker } from 'react-color';

		import { updateObject } from '../../util/object-util';
		import { createUniqueName } from '../../util/elem-utils';
		import L from 'leaflet';

		import IDSelect from '../../components/helper-components/id-select';
		@@ -66,11 +65,15 @@ import {
		FIELD_CHART_LOC,
		FIELD_CHART_VAL,
		FIELD_CHART_GROUP,
		FIELD_CONNECTED,
		FIELD_WIRELESS,
		FIELD_WIRELESS_TYPE,
		FIELD_META_DISPLAY_MAP_COLOR,
		getElemFieldVal,
		setElemFieldVal,
		getElemFieldErr,
		setElemFieldErr
		setElemFieldErr,
		createUniqueName
		} from '../../util/elem-utils';

		import {
		@@ -105,6 +108,12 @@ import {
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP,

		// Connection state & type options
		OPT_CONNECTED,
		OPT_DISCONNECTED,
		OPT_WIRELESS,
		OPT_WIRED,

		// GPU types
		GPU_TYPE_NVIDIA,

		@@ -147,6 +156,9 @@ import {
		CFG_ELEM_CHART_LOC,
		CFG_ELEM_CHART_GROUP,
		CFG_ELEM_CHART_ALT_VAL,
		CFG_ELEM_CONNECTED,
		CFG_ELEM_WIRELESS,
		CFG_ELEM_WIRELESS_TYPE,
		CFG_ELEM_INGRESS_SVC_MAP,
		CFG_ELEM_EGRESS_SVC_MAP,
		CFG_BTN_NEW_ELEM,
		@@ -288,6 +300,15 @@ const validateGpuCount = count => {
		return null;
		};

		const validateWirelessType = val => {
		if (val) {
		if (!val.match(/^((,\s*)?(wifi\|5g\|4g\|other))+$/)) {
		return 'Comma-separated values: wifi\|5g\|4g\|other';
		}
		}
		return null;
		};

		const validateCellularMccMnc = val => {
		if (val) {
		if (val.length > 3) {
		@@ -722,6 +743,8 @@ const ColorIcon = (color) => {
		// Display element-specific form fields
		const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element }) => {
		var type = getElemFieldVal(element, FIELD_TYPE);
		var isConnected = getElemFieldVal(element, FIELD_CONNECTED) \|\| false;
		var isWireless = getElemFieldVal(element, FIELD_WIRELESS) \|\| false;
		var isExternal = getElemFieldVal(element, FIELD_IS_EXTERNAL);
		var chartEnabled = getElemFieldVal(element, FIELD_CHART_ENABLED);
		var eopMode = getElemFieldVal(element, FIELD_GEO_EOP_MODE) \|\| '';
		@@ -984,6 +1007,45 @@ const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element }
		element={element}
		prefixes={[PREFIX_LINK]}
		/>

		<Grid style={{ paddingTop: 16 }} >
		<GridCell span={6}>
		<IDSelect
		label='Initial Connection State'
		span={12}
		options={[OPT_CONNECTED, OPT_DISCONNECTED]}
		onChange={e => onUpdate(FIELD_CONNECTED, e.target.value === 'true', null)}
		value={isConnected}
		disabled={false}
		cydata={CFG_ELEM_CONNECTED}
		/>
		</GridCell>
		<GridCell span={6}>
		<IDSelect
		label='Connection Mode'
		span={12}
		options={[OPT_WIRELESS]}
		onChange={e => onUpdate(FIELD_WIRELESS, e.target.value === 'true', null)}
		value={isWireless}
		disabled={false}
		cydata={CFG_ELEM_WIRELESS}
		/>
		</GridCell>
		</Grid>
		{isWireless ?
		<Grid>
		<CfgTextFieldCell
		span={12}
		onUpdate={onUpdate}
		element={element}
		validate={validateWirelessType}
		label='Wireless Type Priority'
		fieldName={FIELD_WIRELESS_TYPE}
		cydata={CFG_ELEM_WIRELESS_TYPE}
		/>
		</Grid> : <></>
		}

		<Grid>
		<CfgTextFieldCell
		span={12}
		@@ -1045,6 +1107,44 @@ const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element }
		element={element}
		prefixes={[PREFIX_LINK]}
		/>

		<Grid style={{ paddingTop: 16 }} >
		<GridCell span={6}>
		<IDSelect
		label='Initial Connection State'
		span={12}
		options={[OPT_CONNECTED, OPT_DISCONNECTED]}
		onChange={e => onUpdate(FIELD_CONNECTED, e.target.value === 'true', null)}
		value={isConnected}
		disabled={false}
		cydata={CFG_ELEM_CONNECTED}
		/>
		</GridCell>
		<GridCell span={6}>
		<IDSelect
		label='Connection Mode'
		span={12}
		options={[OPT_WIRED]}
		onChange={e => onUpdate(FIELD_WIRELESS, e.target.value === 'true', null)}
		value={isWireless}
		disabled={false}
		cydata={CFG_ELEM_WIRELESS}
		/>
		</GridCell>
		</Grid>
		{isWireless ?
		<Grid>
		<CfgTextFieldCell
		span={12}
		onUpdate={onUpdate}
		element={element}
		validate={validateWirelessType}
		label='Wireless Type Priority'
		fieldName={FIELD_WIRELESS_TYPE}
		cydata={CFG_ELEM_WIRELESS_TYPE}
		/>
		</Grid> : <></>
		}
		<Grid>
		<CfgTextFieldCell
		span={12}
		@@ -1573,6 +1673,10 @@ export class CfgNetworkElementContainer extends Component {
		var elementTypeOverride = getElementTypeOverrideBack(elementType);
		setElemFieldVal(elem, FIELD_TYPE, elementTypeOverride);
		setElemFieldVal(elem, FIELD_PARENT, null);
		if (elementTypeOverride === ELEMENT_TYPE_UE) {
		setElemFieldVal(elem, FIELD_WIRELESS, true);
		setElemFieldVal(elem, FIELD_WIRELESS_TYPE, 'wifi,5g,4g,other');
		}

		elem.parentElements = this.elementsOfType(getParentTypes(elementTypeOverride));

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

+29 −2

Original line number	Diff line number	Diff line
		@@ -65,7 +65,10 @@ import {
		IDC_DIALOG_NEW_SCENARIO,
		IDC_DIALOG_SAVE_SCENARIO,
		IDC_DIALOG_DELETE_SCENARIO,
		IDC_DIALOG_EXPORT_SCENARIO
		IDC_DIALOG_EXPORT_SCENARIO,
		ELEMENT_TYPE_POA_4G,
		ELEMENT_TYPE_POA_5G,
		ELEMENT_TYPE_POA_WIFI
		} from '../../meep-constants';

		import {
		@@ -77,7 +80,10 @@ import {
		FIELD_GPU_COUNT,
		FIELD_GPU_TYPE,
		getElemFieldVal,
		resetElem
		resetElem,
		FIELD_CELL_ID,
		FIELD_NR_CELL_ID,
		FIELD_MAC_ID
		} from '../../util/elem-utils';

		import { pipe, filter } from '../../util/functional';
		@@ -267,6 +273,27 @@ class CfgPageContainer extends Component {
		}
		}

		// Verify cellid/mac address if required
		if (type === ELEMENT_TYPE_POA_4G) {
		var cellId = getElemFieldVal(element, FIELD_CELL_ID);
		if (!cellId) {
		this.props.cfgElemSetErrMsg('Missing Cell ID');
		return false;
		}
		} else if (type === ELEMENT_TYPE_POA_5G) {
		var nrCellId = getElemFieldVal(element, FIELD_NR_CELL_ID);
		if (!nrCellId) {
		this.props.cfgElemSetErrMsg('Missing NR Cell ID');
		return false;
		}
		} else if (type === ELEMENT_TYPE_POA_WIFI) {
		var macId = getElemFieldVal(element, FIELD_MAC_ID);
		if (!macId) {
		this.props.cfgElemSetErrMsg('Missing MAC Address');
		return false;
		}
		}

		// TODO -- verify node port not already used
		const extPorts = externalPorts(element);

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

+9 −0

Original line number	Diff line number	Diff line
		@@ -132,6 +132,9 @@ export const CFG_ELEM_CHART_CHECK = 'cfg-elem-chart-check';
		export const CFG_ELEM_CHART_LOC = 'cfg-elem-chart-loc';
		export const CFG_ELEM_CHART_GROUP = 'cfg-elem-chart-group';
		export const CFG_ELEM_CHART_ALT_VAL = 'cfg-elem-chart-alt-val';
		export const CFG_ELEM_CONNECTED = 'cfg-elem-connected';
		export const CFG_ELEM_WIRELESS = 'cfg-elem-wireless';
		export const CFG_ELEM_WIRELESS_TYPE = 'cfg-elem-wireless-type';
		export const CFG_ELEM_LATENCY = 'cfg-elem-latency';
		export const CFG_ELEM_LATENCY_VAR = 'cfg-elem-latency-var';
		export const CFG_ELEM_LATENCY_DIST = 'cfg-elem-latency-dist';
		@@ -247,6 +250,12 @@ export const DEFAULT_THROUGHPUT_UL_APP = 1000;
		export const DEFAULT_PACKET_LOSS_APP = 0;
		export const DEFAULT_LATENCY_DC = 0;

		// Connection State & Types
		export const OPT_CONNECTED = {label: 'Connected', value: true};
		export const OPT_DISCONNECTED = {label: 'Disconnected', value: false};
		export const OPT_WIRELESS = {label: 'Wireless', value: true};
		export const OPT_WIRED = {label: 'Wired', value: false};

		// GPU Types
		export const GPU_TYPE_NVIDIA = 'NVIDIA';

js-apps/meep-frontend/src/js/util/scenario-utils.js

+19 −32

Original line number	Diff line number	Diff line
		@@ -640,6 +640,11 @@ export function updateElementInScenario(scenario, element) {
		pl.netChar.throughputUl = getElemFieldVal(element, FIELD_LINK_THROUGHPUT_UL);
		pl.netChar.packetLoss = getElemFieldVal(element, FIELD_LINK_PKT_LOSS);

		pl.connected = getElemFieldVal(element, FIELD_CONNECTED);
		var wireless = getElemFieldVal(element, FIELD_WIRELESS);
		pl.wireless = wireless;
		pl.wirelessType = wireless ? getElemFieldVal(element, FIELD_WIRELESS_TYPE) : '';

		if (!pl.geoData) {
		pl.geoData = {};
		}
		@@ -1238,14 +1243,15 @@ export function createDefaultNL(zoneName) {

		export function createPL(uniqueId, name, type, element) {
		var location = getElemFieldVal(element, FIELD_GEO_LOCATION);
		var wireless = getElemFieldVal(element, FIELD_WIRELESS);
		var pl = {
		id: uniqueId,
		name: name,
		type: type,
		isExternal: getElemFieldVal(element, FIELD_IS_EXTERNAL),
		connected: getElemFieldVal(element, FIELD_CONNECTED),
		wireless: getElemFieldVal(element, FIELD_WIRELESS),
		wirelessType: getElemFieldVal(element, FIELD_WIRELESS_TYPE),
		wireless: wireless,
		wirelessType: wireless ? getElemFieldVal(element, FIELD_WIRELESS_TYPE) : '',
		netChar: {
		latency: getElemFieldVal(element, FIELD_LINK_LATENCY),
		latencyVariation: getElemFieldVal(element, FIELD_LINK_LATENCY_VAR),
		@@ -1443,11 +1449,9 @@ export function getElementFromScenario(scenario, elementId) {
		for (var l in nl.physicalLocations) {
		var pl = nl.physicalLocations[l];
		if (pl.id === elementId) {
		var defaultWireless = false;
		switch (pl.type) {
		case UE_TYPE_STR:
		setElemFieldVal(elem, FIELD_TYPE, ELEMENT_TYPE_UE);
		defaultWireless = true;
		break;
		case FOG_TYPE_STR:
		setElemFieldVal(elem, FIELD_TYPE, ELEMENT_TYPE_FOG);
		@@ -1477,8 +1481,8 @@ export function getElementFromScenario(scenario, elementId) {
		setElemFieldVal(elem, FIELD_LINK_PKT_LOSS, pl.netChar.packetLoss \|\| DEFAULT_PACKET_LOSS_LINK);
		}
		setElemFieldVal(elem, FIELD_IS_EXTERNAL, pl.isExternal \|\| false);
		setElemFieldVal(elem, FIELD_CONNECTED, pl.connected \|\| true);
		setElemFieldVal(elem, FIELD_WIRELESS, pl.wireless \|\| defaultWireless);
		setElemFieldVal(elem, FIELD_CONNECTED, pl.connected \|\| false);
		setElemFieldVal(elem, FIELD_WIRELESS, pl.wireless \|\| false);
		setElemFieldVal(elem, FIELD_WIRELESS_TYPE, pl.wirelessType \|\| '');

		if (pl.geoData) {
		@@ -1713,16 +1717,18 @@ export function addPlNode(pl, parent, nodes, edges) {
		}

		var latency = null;
		var lineColor = (pl.connected) ? '#606060' : '#FF0000';
		e['color'] = {
		color: lineColor,
		highlight: lineColor,
		hover: lineColor
		};
		e['dashes'] = pl.wireless;

		// Set level and group based on PL type
		switch (pl.type) {
		case FOG_TYPE_STR: {
		// latency = "0";
		e['color'] = {
		color: (pl.connected) ? '#606060' : '#FF0000',
		highlight: '#606060',
		hover: '#606060'
		};
		n['level'] = 4;

		if (pl.isExternal) {
		@@ -1740,11 +1746,6 @@ export function addPlNode(pl, parent, nodes, edges) {
		}
		case EDGE_TYPE_STR: {
		// latency = "0";
		e['color'] = {
		color: (pl.connected) ? '#606060' : '#FF0000',
		highlight: '#606060',
		hover: '#606060'
		};
		n['level'] = 3;

		if (pl.isExternal) {
		@@ -1763,13 +1764,8 @@ export function addPlNode(pl, parent, nodes, edges) {

		case UE_TYPE_STR: {
		latency = parent.terminalLinkLatency;
		e['dashes'] = true;
		n['level'] = 4;

		if (!pl.connected) {
		e['color'] = {color: '#FF0000'};
		}

		if (pl.isExternal) {
		const image = getScenarioSpecificImage(
		n.label + '-ext',
		@@ -1798,11 +1794,6 @@ export function addPlNode(pl, parent, nodes, edges) {
		// latency = "0";
		n['level'] = 2;
		n['group'] = pl.isExternal ? 'pLocExtCN' : 'pLocIntCN';

		if (!pl.connected) {
		e['color'] = {color: '#FF0000'};
		}

		break;
		}

		@@ -1813,10 +1804,6 @@ export function addPlNode(pl, parent, nodes, edges) {
		}
		n['level'] = -1;

		if (!pl.connected) {
		e['color'] = {color: '#FF0000'};
		}

		if (pl.isExternal) {
		n['group'] = 'pLocExtDC';
		} else {