alpha test 1st merge (ecb542a6) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox Frontend

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

+3 −0

Original line number	Diff line number	Diff line
		@@ -16,6 +16,9 @@ export const DEFAULT_NO_NETWORK_FILE_SELECTED = 'Select a network';
		export const MIN_SCREEN_WIDTH = 840;
		export const MIN_SCREEN_HEIGHT = 0;

		// User Application Instances
		export const MAX_NB_USER_APPS = 10;

		// URLs
		export const WIKI_HELP_URL = 'https://mecwiki.etsi.org/index.php?title=MEC_Sandbox_Help';
		export const WIKI_DISCUSSION_BOARD_URL = 'https://mecwiki.etsi.org/index.php?title=MEC_Sandbox_Help#Discussion_Board_.28Slack_channels.29';

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

+7 −3

Original line number	Diff line number	Diff line
		@@ -555,6 +555,7 @@ class AppContainer extends Component {
		this.props.changeHighVelocityUeList([]);
		this.props.changeApiTable(null);
		this.props.changeApiDetailedData(null);
		this.props.changeAppInstancesTable(null);
		this.props.changePauseButton(false);
		this.updateAutomation(false);
		}
		@@ -716,6 +717,7 @@ class AppContainer extends Component {
		this.updateScenario(null);
		this.props.changeApiTable(null);
		this.props.changeApiDetailedData(null);
		this.props.changeAppInstancesTable(null);
		}
		return;
		}
		@@ -1001,10 +1003,12 @@ 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);
		});
		}
		}

		renderPage() {
		switch (this.props.page) {

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

+46 −11

Original line number	Diff line number	Diff line
		@@ -36,6 +36,7 @@ class ApiPane extends Component {
		this.mecApisPath = [];
		this.mecApiEnabled = [];
		this.mecApiPseudoNames = [];
		this.selectedIndex = -1;
		this.data = null;
		}

		@@ -49,12 +50,28 @@ class ApiPane extends Component {
		if (this.props.activationInProgressCount === -1) {
		if (this.props.scenario !== null && this.props.scenario.name !== NO_SCENARIO_NAME) {
		if (this.props.networkFileSelected !== this.previousScenarioName) {
		this.clearAll();
		this.getScenario(this.props.scenario.name, false);
		}
		} else {
		this.clearAll();
		}
		}
		}

		clearAll() {
		this.previousScenarioName = '';
		this.edgeAppsMap = null;
		this.edgeAppNames = [];
		this.mecApis = [];
		this.mecSwaggerApisUrl = [];
		this.mecApisPath = [];
		this.mecApiEnabled = [];
		this.mecApiPseudoNames = [];
		this.selectedIndex = -1;
		this.data = null;
		}

		getScenario(name) {
		if (name !== DEFAULT_NO_NETWORK_FILE_SELECTED && name !== '') {
		this.props.scenarioApi.getScenario(name, (error, data, response) => {
		@@ -107,6 +124,7 @@ class ApiPane extends Component {
		let apiUrls = [];
		let apiPaths = [];
		let pseudoNames = [];
		let dropDownNames = [];
		if (this.edgeAppNames !== null) {
		for (var i = 0; i < this.edgeAppNames.length; i++) {
		var found = false;
		@@ -119,38 +137,43 @@ class ApiPane extends Component {
		}
		}
		}
		enabledApps.push(found);

		let apiUrl = '';
		let apiPath = '';
		let pseudoName = '';
		let dropDownName = '';
		let mepName = this.edgeAppsMap.edgeApps[i].mepName;
		switch(this.edgeAppsMap.edgeApps[i].img) {
		case 'meep-docker-registry:30001/meep-loc-serv':
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20Location%20Service%20REST%20API';
		apiPath = mepName+'/location/v2';
		pseudoName = 'Location (013) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'Location (013)';
		break;
		case 'meep-docker-registry:30001/meep-rnis':
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20Radio%20Network%20Information%20Service%20REST%20API';
		apiPath = mepName+'/rni/v2';
		pseudoName = 'Radio Network Information (012) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'Radio Network Information (012)';
		break;
		case 'meep-docker-registry:30001/meep-wais':
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20WLAN%20Access%20Information%20Service%20REST%20API';
		apiPath = mepName+'/wai/v2';
		pseudoName = 'WLAN Access Information (028) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'WLAN Access Information (028)';
		break;
		case 'meep-docker-registry:30001/meep-app-enablement':
		if (this.edgeAppsMap.edgeApps[i].name.includes('app-support')) {
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20MEC%20Application%20Support%20API';
		apiPath = mepName+'/mec_app_support/v1';
		pseudoName = 'MEC Application Support (011) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'MEC Application Support (011)';
		} else {
		if (this.edgeAppsMap.edgeApps[i].name.includes('service-mgmt')) {
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20MEC%20Service%20Management%20API';
		apiPath = mepName+'/mec_service_mgmt/v1';
		pseudoName = 'MEC Service Management (011) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'MEC Service Management (011)';
		}
		}
		break;
		@@ -159,6 +182,8 @@ class ApiPane extends Component {
		apiUrls.push(apiUrl);
		apiPaths.push(apiPath);
		pseudoNames.push(pseudoName);
		dropDownNames.push(dropDownName);
		enabledApps.push(found);
		}
		}
		//populate mec:ApiEnabled by querying state of the APIs
		@@ -171,11 +196,10 @@ class ApiPane extends Component {

		const configEnabled = (this.props.networkFileSelected !== DEFAULT_NO_NETWORK_FILE_SELECTED) ? true : false;
		if (!configEnabled) {
		this.props.changeMecApiSelected(null);
		this.props.changeMecApiSelected('');
		}

		let mepName = '', currentMepName = '';
		var label = '';
		let mepName = '', currentMepName = '', label = '';
		var options = [];
		var dropDownOptions = [];
		if (pseudoNames.length > 0) {
		@@ -193,7 +217,7 @@ class ApiPane extends Component {
		options = [];
		currentMepName = mepName;
		}
		options.push(pseudoNames[i]);
		options.push(dropDownNames[i]);
		}
		var lastEntry = {
		label: label,
		@@ -219,7 +243,7 @@ class ApiPane extends Component {
		>
		<div style={styles.section}>
		<Grid style={{ marginBottom: 2}} align="center">
		<GridCell span={10}>
		<GridCell span={9}>
		<Select
		title="Select the MEC API"
		style={styles.select}
		@@ -227,24 +251,29 @@ class ApiPane extends Component {
		outlined
		label="MEC Services Instances"
		placeholder=" "
		options={dropDownOptions}//this.mecApis}
		options={dropDownOptions}
		disabled={!configEnabled}
		onChange={event => {
		this.props.changeMecApiSelected(event.target.value);
		this.selectedIndex = event.target.selectedIndex;
		}}
		value={this.props.mecApiSelected}
		//value={this.props.mecApiSelected}
		/>
		</GridCell>
		<GridCell span={1}/>
		<GridCell span={2} align="center">
		<ShowServiceEnablementButton
		page={this.props.page}
		mecApi={this.props.mecApiSelected}
		mecApi={this.mecApiPseudoNames[this.selectedIndex-1]}
		mecApis={this.mecApis}
		mecApiEnabled={this.mecApiEnabled}
		mecApiPseudoNames={this.mecApiPseudoNames}
		applicationsApi={this.props.applicationsApi}
		eventsApi={this.props.eventsApi}
		edgeAppsMap={this.edgeAppsMap}
		mecApiTransitionToEnableList={this.props.mecApiTransitionToEnableList}
		mecApiTransitionToDisableList={this.props.mecApiTransitionToDisableList}
		disabled={!configEnabled}
		/>
		</GridCell>
		</Grid>
		@@ -252,12 +281,15 @@ class ApiPane extends Component {
		<div style={styles.section}>
		<TryIt
		page={this.props.page}
		mecApi={this.props.mecApiSelected}
		mecApi={this.mecApiPseudoNames[this.selectedIndex-1]}
		mecApis={this.mecApis}
		mecApiEnabled={this.mecApiEnabled}
		mecApisPath={this.mecApisPath}
		mecSwaggerApisUrl={this.mecSwaggerApisUrl}
		edgeAppsMap={this.edgeAppsMap}
		mecApiTransitionToEnableList={this.props.mecApiTransitionToEnableList}
		mecApiTransitionToDisableList={this.props.mecApiTransitionToDisableList}
		disabled={!configEnabled}
		/>
		</div>
		</div>
		@@ -291,7 +323,10 @@ const mapStateToProps = state => {
		scenario: state.sbox.scenario,
		detailedData: state.ui.detailedData,
		tableData: state.sbox.apiTable,
		table: state.sbox.table
		table: state.sbox.table,
		mecApiTransitionToEnableList: state.ui.mecApiTransitionToEnableList,
		mecApiTransitionToDisableList: state.ui.mecApiTransitionToDisableList

		};
		};

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

+22 −4

Original line number	Diff line number	Diff line
		@@ -21,7 +21,8 @@ import {
		NO_SCENARIO_NAME,
		ALERT_DEGRADED_NETWORK,
		DIALOG_CONFIRM_DELETE_APP,
		DIALOG_CREATE_NEW_APP
		DIALOG_CREATE_NEW_APP,
		MAX_NB_USER_APPS
		} from '../../app-constants';

		import {
		@@ -36,6 +37,7 @@ import {
		uiSandboxChangeLowVelocityUeList,
		uiSandboxChangeHighVelocityUeList,
		uiSandboxChangeMepList,
		uiSandboxChangeMecApiSelected,
		uiSandboxChangeApiDetailedData,
		uiSandboxChangeUpdateUeInProgressCount,
		uiSandboxChangeActivationInProgressCount,
		@@ -43,7 +45,8 @@ import {
		} from '../../state/ui';

		import {
		sboxChangeApiTable
		sboxChangeApiTable,
		sboxChangeAppInstancesTable
		} from '../../state/sbox';

		import {
		@@ -125,8 +128,10 @@ class ConfigPane extends Component {
		}
		this.props.changePauseButton(false);
		this.props.changeApiTable(null);
		this.props.changeAppInstancesTable(null);
		this.props.changeApiDetailedData(null);
		this.updateAutomation(false);
		this.props.changeMecApiSelected('');
		}

		setScenario(name) {
		@@ -152,6 +157,7 @@ class ConfigPane extends Component {
		this.props.activateApi.terminateScenario((error, data, response) => {
		this.terminateScenarioCb(error, data, response);
		});
		//remove instances of the apiPane
		}
		}

		@@ -386,6 +392,15 @@ class ConfigPane extends Component {
		const maxNbLowVelocityUe = (this.props.lowVelocityUeList) ? this.props.lowVelocityUeList.length : 0;
		const maxNbHighVelocityUe = (this.props.highVelocityUeList) ? this.props.highVelocityUeList.length : 0;

		var nbUserApps = 0;
		if (this.props.tableData !== null && this.props.tableData.appInstancesTable !== null) {
		for (var i = 0; i < this.props.tableData.appInstancesTable.length; i++) {
		if (this.props.tableData.appInstancesTable[i].type === 'USER') {
		nbUserApps++;
		}
		}
		}

		return (
		<div style={{ padding: 15 }}>
		<div style={{ marginBottom: 20}} title="Configure a MEC scenario">
		@@ -556,8 +571,9 @@ class ConfigPane extends Component {
		<Grid style={styles.fieldButtonSmallBottomMargin}>
		<GridCell span={8}>
		<Button
		title="create a new application instance"
		title="create a new application instance (max: 10)"
		style={styles.button}
		disabled={nbUserApps >= MAX_NB_USER_APPS}
		onClick={() => {
		this.props.changeCurrentDialog(DIALOG_CREATE_NEW_APP);
		}}
		@@ -693,8 +709,10 @@ const mapDispatchToProps = dispatch => {
		changeLowVelocityUeList: value => dispatch(uiSandboxChangeLowVelocityUeList(value)),
		changeHighVelocityUeList: value => dispatch(uiSandboxChangeHighVelocityUeList(value)),
		changeMepList: value => dispatch(uiSandboxChangeMepList(value)),
		changeMecApiSelected: name => dispatch(uiSandboxChangeMecApiSelected(name)),
		changeApiDetailedData: row => dispatch(uiSandboxChangeApiDetailedData(row)),
		changeApiTable: value => dispatch(sboxChangeApiTable(value))
		changeApiTable: value => dispatch(sboxChangeApiTable(value)),
		changeAppInstancesTable: value => dispatch(sboxChangeAppInstancesTable(value))
		};
		};

js-apps/frontend/src/js/containers/sandbox/show-service-enablement-button.js

+16 −5

Original line number	Diff line number	Diff line
		@@ -19,6 +19,9 @@ import {
		class ShowServiceEnablementButton extends Component {
		constructor(props) {
		super(props);
		this.state = {
		switchEnabled: false
		};
		}

		componentWillMount() {
		@@ -70,12 +73,15 @@ class ShowServiceEnablementButton extends Component {
		let mecApiTransitionList = this.props.mecApiTransitionToEnableList;
		mecApiTransitionList.push(this.props.mecApiPseudoNames[index]);
		this.props.changeMecApiTransitionToEnableList(mecApiTransitionList);
		let newState = !this.state.switchEnabled;
		this.setState({ switchEnabled: newState});

		}
		}

		render() {

		if (this.props.page !== PAGE_SANDBOX) {
		if (this.props.page !== PAGE_SANDBOX \|\| this.props.disabled) {
		return null;
		}

		@@ -109,6 +115,13 @@ class ShowServiceEnablementButton extends Component {
		disableButton = true;
		}

		let enableToggle = false;
		let enableText = 'DISABLED';

		if (this.props.mecApiEnabled[index]) {
		enableToggle = true;
		enableText = 'ENABLED';
		}
		if (hideButton === true) {
		return null;
		} else {
		@@ -119,7 +132,7 @@ class ShowServiceEnablementButton extends Component {
		<Switch
		title="Service enablement"
		disabled={disableButton}
		checked={this.props.mecApiEnabled[index]}
		checked={enableToggle}
		onChange={() => {
		this.changeMecServiceState(index);
		}}
		@@ -132,9 +145,7 @@ class ShowServiceEnablementButton extends Component {

		const mapStateToProps = state => {
		return {
		page: state.ui.page,
		mecApiTransitionToEnableList: state.ui.mecApiTransitionToEnableList,
		mecApiTransitionToDisableList: state.ui.mecApiTransitionToDisableList
		page: state.ui.page
		};
		};