added checkbox in app config to make external applications (7ab25b90) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+221 −169

Original line number	Diff line number	Diff line
		@@ -68,7 +68,6 @@ import {
		ELEMENT_TYPE_UE,
		ELEMENT_TYPE_MECSVC,
		ELEMENT_TYPE_UE_APP,
		ELEMENT_TYPE_EXT_UE_APP,
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP,

		@@ -97,6 +96,7 @@ import {
		CFG_ELEM_GPU_TYPE,
		CFG_ELEM_CMD,
		CFG_ELEM_ARGS,
		CFG_ELEM_EXTERNAL_CHECK,
		CFG_ELEM_CHART_CHECK,
		CFG_ELEM_CHART_LOC,
		CFG_ELEM_CHART_GROUP,
		@@ -468,6 +468,29 @@ const NCGroups = ({prefixes, onUpdate, element}) => {
		});
		};

		const ExternalFields = ({element, onUpdate}) => {
		return (
		<>
		<CfgTextField
		onUpdate={onUpdate}
		element={element}
		label="IngressServiceMapping"
		validate={validateIngressServiceMapping}
		fieldName="ingressServiceMap"
		cydata={CFG_ELEM_INGRESS_SVC_MAP}
		/>
		<CfgTextField
		onUpdate={onUpdate}
		element={element}
		label="EgressServiceMapping"
		validate={validateEgressServiceMapping}
		fieldName="egressServiceMap"
		cydata={CFG_ELEM_EGRESS_SVC_MAP}
		/>
		</>
		);
		};

		const UserChartFields = ({element, onUpdate}) => {
		return (
		<>
		@@ -502,6 +525,7 @@ const UserChartFields = ({element, onUpdate}) => {
		// Display element-specific form fields
		const TypeRelatedFormFields = ({onUpdate, element}) => {
		var type = getElemFieldVal(element, FIELD_TYPE);
		var isExternal = getElemFieldVal(element, FIELD_IS_EXTERNAL);
		var chartEnabled = getElemFieldVal(element, FIELD_CHART_ENABLED);

		switch (type) {
		@@ -539,6 +563,21 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		);
		case ELEMENT_TYPE_UE_APP:
		return (
		<>
		<Checkbox
		checked={isExternal}
		onChange={(e) => onUpdate(FIELD_IS_EXTERNAL, e.target.checked, null)}
		data-cy={CFG_ELEM_EXTERNAL_CHECK}
		>
		External App
		</Checkbox>

		{isExternal ?
		<ExternalFields
		onUpdate={onUpdate}
		element={element}
		/>
		:
		<>
		<Checkbox
		checked={chartEnabled}
		@@ -547,6 +586,7 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		>
		User-Defined Chart
		</Checkbox>

		{chartEnabled ?
		<UserChartFields
		onUpdate={onUpdate}
		@@ -580,33 +620,28 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		/>
		</>
		}

		</>
		}
		</>
		);
		case ELEMENT_TYPE_EXT_UE_APP:
		case ELEMENT_TYPE_CLOUD_APP:
		case ELEMENT_TYPE_MECSVC:
		return (
		<>
		<CfgTextField
		onUpdate={onUpdate}
		element={element}
		label="IngressServiceMapping"
		validate={validateIngressServiceMapping}
		fieldName="ingressServiceMap"
		cydata={CFG_ELEM_INGRESS_SVC_MAP}
		/>
		<CfgTextField
		<Checkbox
		checked={isExternal}
		onChange={(e) => onUpdate(FIELD_IS_EXTERNAL, e.target.checked, null)}
		data-cy={CFG_ELEM_EXTERNAL_CHECK}
		>
		External App
		</Checkbox>

		{isExternal ?
		<ExternalFields
		onUpdate={onUpdate}
		element={element}
		label="EgressServiceMapping"
		validate={validateEgressServiceMapping}
		fieldName="egressServiceMap"
		cydata={CFG_ELEM_EGRESS_SVC_MAP}
		/>
		</>
		);
		case ELEMENT_TYPE_CLOUD_APP:
		case ELEMENT_TYPE_MECSVC:
		return (
		:
		<>
		<Checkbox
		checked={chartEnabled}
		@@ -615,6 +650,7 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		>
		User-Defined Chart
		</Checkbox>

		{chartEnabled ?
		<UserChartFields
		onUpdate={onUpdate}
		@@ -652,11 +688,27 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		/>
		</>
		}

		</>
		}
		</>
		);
		case ELEMENT_TYPE_EDGE_APP:
		return (
		<>
		<Checkbox
		checked={isExternal}
		onChange={(e) => onUpdate(FIELD_IS_EXTERNAL, e.target.checked, null)}
		data-cy={CFG_ELEM_EXTERNAL_CHECK}
		>
		External App
		</Checkbox>

		{isExternal ?
		<ExternalFields
		onUpdate={onUpdate}
		element={element}
		/>
		:
		<>
		<Checkbox
		checked={chartEnabled}
		@@ -665,6 +717,7 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		>
		User-Defined Chart
		</Checkbox>

		{chartEnabled ?
		<UserChartFields
		onUpdate={onUpdate}
		@@ -711,6 +764,8 @@ const TypeRelatedFormFields = ({onUpdate, element}) => {
		</>
		}
		</>
		}
		</>
		);

		default:
		@@ -750,11 +805,10 @@ const elementTypes = [
		{
		label: 'Process',
		options: [
		ELEMENT_TYPE_UE_APP,
		// ELEMENT_TYPE_MECSVC,
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP,
		ELEMENT_TYPE_EXT_UE_APP,
		ELEMENT_TYPE_UE_APP
		ELEMENT_TYPE_CLOUD_APP
		]
		}
		];
		@@ -770,7 +824,6 @@ parentTypes[ELEMENT_TYPE_FOG] = [ELEMENT_TYPE_POA];
		parentTypes[ELEMENT_TYPE_UE] = [ELEMENT_TYPE_POA];
		parentTypes[ELEMENT_TYPE_DC] = [ELEMENT_TYPE_SCENARIO];
		parentTypes[ELEMENT_TYPE_UE_APP] = [ELEMENT_TYPE_UE];
		parentTypes[ELEMENT_TYPE_EXT_UE_APP] = [ELEMENT_TYPE_UE];
		parentTypes[ELEMENT_TYPE_MECSVC] = [ELEMENT_TYPE_FOG, ELEMENT_TYPE_EDGE, ELEMENT_TYPE_CN];
		parentTypes[ELEMENT_TYPE_EDGE_APP] = [ELEMENT_TYPE_FOG, ELEMENT_TYPE_EDGE];
		parentTypes[ELEMENT_TYPE_CLOUD_APP] = [ELEMENT_TYPE_DC];
		@@ -895,7 +948,6 @@ export class CfgNetworkElementContainer extends Component {

		setElemFieldVal(elem, FIELD_TYPE, elementType);
		setElemFieldVal(elem, FIELD_PARENT, null);
		setElemFieldVal(elem, FIELD_IS_EXTERNAL, (elementType === ELEMENT_TYPE_EXT_UE_APP) ? true : false);

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

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

+1 −1

Original line number	Diff line number	Diff line
		@@ -64,6 +64,7 @@ export const CFG_ELEM_GPU_COUNT = 'cfg-elem-gpu-count';
		export const CFG_ELEM_GPU_TYPE = 'cfg-elem-gpu-type';
		export const CFG_ELEM_CMD = 'cfg-elem-cmd';
		export const CFG_ELEM_ARGS = 'cfg-elem-args';
		export const CFG_ELEM_EXTERNAL_CHECK = 'cfg-elem-external-check';
		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';
		@@ -122,7 +123,6 @@ export const ELEMENT_TYPE_FOG = 'FOG';
		export const ELEMENT_TYPE_UE = 'UE';
		export const ELEMENT_TYPE_MECSVC = 'MEC SERVICE';
		export const ELEMENT_TYPE_UE_APP = 'UE APPLICATION';
		export const ELEMENT_TYPE_EXT_UE_APP = 'EXT UE APPLICATION';
		export const ELEMENT_TYPE_EDGE_APP = 'EDGE APPLICATION';
		export const ELEMENT_TYPE_CLOUD_APP = 'CLOUD APPLICATION';

js-apps/meep-frontend/src/js/state/exec/vis-reducer.js

+0 −2

Original line number	Diff line number	Diff line
		@@ -13,7 +13,6 @@ import * as vis from 'vis';

		import {
		ELEMENT_TYPE_UE_APP,
		ELEMENT_TYPE_EXT_UE_APP,
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP
		} from '../../meep-constants';
		@@ -56,7 +55,6 @@ const showAppsSelector = state => state.ui.execShowApps;
		const execVisFilteredData = createSelector([dataSelector, tableSelector, showAppsSelector], (data, table, showApps) => {
		var appTypes = [
		ELEMENT_TYPE_UE_APP,
		ELEMENT_TYPE_EXT_UE_APP,
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP
		];

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

+10 −37

Original line number	Diff line number	Diff line
		@@ -74,7 +74,6 @@ import {
		ELEMENT_TYPE_UE,
		ELEMENT_TYPE_MECSVC,
		ELEMENT_TYPE_UE_APP,
		ELEMENT_TYPE_EXT_UE_APP,
		ELEMENT_TYPE_EDGE_APP,
		ELEMENT_TYPE_CLOUD_APP,

		@@ -277,11 +276,6 @@ export function addElementToScenario(scenario, element) {
		break;
		}

		case ELEMENT_TYPE_EXT_UE_APP: {
		scenarioElement = createExternalProcess(name, UE_APP_TYPE_STR, element);
		break;
		}

		case ELEMENT_TYPE_EDGE_APP: {
		scenarioElement = createProcess(name, EDGE_APP_TYPE_STR, element);
		break;
		@@ -411,11 +405,7 @@ export function updateElementInScenario(scenario, element) {
		for (var m in pl.processes) {
		var process = pl.processes[m];
		if (process.name === name) {
		if (isExternal) {
		pl.processes[m] = createExternalProcess(process.name, process.type, element);
		} else {
		pl.processes[m] = createProcess(process.name, process.type, element);
		}
		return;
		}
		}
		@@ -488,6 +478,7 @@ export function createNewScenario(name) {
		}

		export function createProcess(name, type, element) {
		var isExternal = getElemFieldVal(element, FIELD_IS_EXTERNAL);
		var port = getElemFieldVal(element, FIELD_PORT);
		var gpuCount = getElemFieldVal(element, FIELD_GPU_COUNT);

		@@ -495,7 +486,7 @@ export function createProcess(name, type, element) {
		id: name,
		name: name,
		type: type,
		isExternal: false,
		isExternal: isExternal,
		userChartLocation: null,
		userChartAlternateValues: null,
		userChartGroup: null,
		@@ -508,7 +499,12 @@ export function createProcess(name, type, element) {
		externalConfig: null
		};

		if (getElemFieldVal(element, FIELD_CHART_ENABLED)) {
		if (isExternal) {
		process.externalConfig = {
		ingressServiceMap: getIngressServiceMapArray(getElemFieldVal(element, FIELD_INGRESS_SVC_MAP)),
		egressServiceMap: getEgressServiceMapArray(getElemFieldVal(element, FIELD_EGRESS_SVC_MAP))
		};
		} else if (getElemFieldVal(element, FIELD_CHART_ENABLED)) {
		process.userChartLocation = getElemFieldVal(element, FIELD_CHART_LOC);
		process.userChartAlternateValues = getElemFieldVal(element, FIELD_CHART_VAL);
		process.userChartGroup = getElemFieldVal(element, FIELD_CHART_GROUP);
		@@ -538,29 +534,6 @@ export function createProcess(name, type, element) {
		return process;
		}

		export function createExternalProcess(name, type, element) {
		var process = {
		id: name,
		name: name,
		type: type,
		isExternal: true,
		userChartLocation: null,
		userChartAlternateValues: null,
		userChartGroup: null,
		image: null,
		environment: null,
		commandArguments: null,
		commandExe: null,
		serviceConfig: null,
		externalConfig: {
		ingressServiceMap: getIngressServiceMapArray(getElemFieldVal(element, FIELD_INGRESS_SVC_MAP)),
		egressServiceMap: getEgressServiceMapArray(getElemFieldVal(element, FIELD_EGRESS_SVC_MAP))
		}
		};

		return process;
		}

		export function getIngressServiceMapStr(ingressServiceMapArray) {
		var ingressServiceMapStr = '';

		@@ -849,7 +822,7 @@ export function getElementFromScenario(scenario, elementName) {
		setElemFieldVal(elem, FIELD_TYPE, ELEMENT_TYPE_MECSVC);
		break;
		case UE_APP_TYPE_STR:
		setElemFieldVal(elem, FIELD_TYPE, (process.isExternal) ? ELEMENT_TYPE_EXT_UE_APP : ELEMENT_TYPE_UE_APP);
		setElemFieldVal(elem, FIELD_TYPE, ELEMENT_TYPE_UE_APP);
		break;
		case EDGE_APP_TYPE_STR:
		setElemFieldVal(elem, FIELD_TYPE, ELEMENT_TYPE_EDGE_APP);