state cleanup + cosmetic updates to API pane (1f3cc203) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox Frontend

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

+6 −1

Original line number	Diff line number	Diff line
		@@ -73,9 +73,14 @@ export const STATUS_SIGNED_OUT = 'SIGNED-OUT';
		export const OAUTH_PROVIDER_GITHUB = 'github';
		export const OAUTH_PROVIDER_GITLAB = 'gitlab';

		//configuration pane defaults
		// Configuration pane defaults
		export const DEFAULT_VELOCITY_THRESHOLD = 10;

		// API pane defaults
		export const EDGE_APP_ENABLE_COUNT_MAX = 25;
		export const EDGE_APP_DISABLE_COUNT_MAX = 5;
		export const BLACKOUT_TIME = 3;

		// Scenario element types
		export const DOMAIN_TYPE_STR = 'OPERATOR';
		export const DOMAIN_CELL_TYPE_STR = 'OPERATOR-CELLULAR';

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

+152 −27

Original line number	Diff line number	Diff line
		@@ -13,6 +13,7 @@ import HomePageContainer from './home/home-page-container';
		import SandboxPageContainer from './sandbox/sandbox-page-container';
		import DashboardPageContainer from './dashboard/dashboard-page-container';
		import Footer from '../components/footer';
		import {updateObject} from '../util/object-util';

		// import SignInDialog from '../components/dialogs/sign-in-dialog';
		import SignInOAuthDialog from '../components/dialogs/sign-in-oauth-dialog';
		@@ -46,7 +47,10 @@ import {
		ALERT_DEGRADED_NETWORK,
		STATUS_SIGNED_IN,
		STATUS_SIGNING_IN,
		STATUS_SIGNED_OUT
		STATUS_SIGNED_OUT,
		EDGE_APP_ENABLE_COUNT_MAX,
		BLACKOUT_TIME,
		EDGE_APP_DISABLE_COUNT_MAX
		} from '../app-constants';

		import {
		@@ -69,6 +73,7 @@ import {
		uiSandboxChangeLowVelocityUeList,
		uiSandboxChangeHighVelocityUeList,
		uiSandboxChangeMepList,
		uiSandboxChangeEdgeAppList,
		uiSandboxChangeAppInstancesSelected,
		uiSandboxChangePauseButton,
		uiSandboxChangeApiDetailedData,
		@@ -87,7 +92,7 @@ import {
		sboxChangeMapPoaList,
		sboxChangeMapComputeList,
		sboxChangeApiTable,
		sboxChangeAppInstancesTable
		sboxChangeAppInstanceTable
		} from '../state/sbox';

		const SBOX_ERR_COUNT_MAX = 5;
		@@ -269,29 +274,35 @@ class AppContainer extends Component {
		if (!this.sboxPageRefreshIntervalTimer) {
		this.sboxPageRefreshIntervalTimer = setInterval(
		() => {
		// Sign In state
		if (this.props.signInStatus === STATUS_SIGNED_IN) {
		this.checkSignedIn();
		} else if (this.props.signInStatus === STATUS_SIGNING_IN) {
		this.checkSandboxState();
		}

		// Refresh sandbox page
		if (this.props.page === PAGE_SANDBOX) {
		if (this.props.sandboxName) {
		if (this.props.activationInProgressCount !== -1) {
		this.props.changeActivationInProgressCount(this.props.activationInProgressCount - 1);
		} else {
		if (this.props.updateUeInProgressCount !== -1) {
		this.props.changeUpdateUeInProgressCount(this.props.updateUeInProgressCount - 1);
		} else {
		this.refreshConfigPane();
		}
		}
		this.refreshScenario();
		this.refreshMap();
		this.refreshMetricsTable();
		this.refreshAppInstancesTable();
		}
		}

		// Decrement update counters
		if (this.props.activationInProgressCount !== -1) {
		this.props.changeActivationInProgressCount(this.props.activationInProgressCount - 1);
		}
		if (this.props.updateUeInProgressCount !== -1) {
		this.props.changeUpdateUeInProgressCount(this.props.updateUeInProgressCount - 1);
		}

		// Descrement Edge App counters
		this.decrementEdgeApps(this.props.appInstanceTable);

		},
		SBOX_REFRESH_INTERVAL
		);
		@@ -555,7 +566,7 @@ class AppContainer extends Component {
		this.props.changeHighVelocityUeList([]);
		this.props.changeApiTable(null);
		this.props.changeApiDetailedData(null);
		this.props.changeAppInstancesTable(null);
		this.props.changeAppInstanceTable(null);
		this.props.changePauseButton(false);
		this.updateAutomation(false);
		}
		@@ -717,7 +728,7 @@ class AppContainer extends Component {
		this.updateScenario(null);
		this.props.changeApiTable(null);
		this.props.changeApiDetailedData(null);
		this.props.changeAppInstancesTable(null);
		this.props.changeAppInstanceTable(null);
		}
		return;
		}
		@@ -911,8 +922,7 @@ class AppContainer extends Component {
		}

		refreshConfigPane() {

		if (this.activeScenarioName !== '') {
		if (this.activeScenarioName === '') {
		this.meepGisAutomationApi.getAutomationStateByName('MOVEMENT', (error, data, response) =>
		this.getAutomationCb(error, data, response)
		);
		@@ -958,8 +968,8 @@ class AppContainer extends Component {

		// only update if values present, otherwise means no changes
		if (data) {
		if (this.props.tableData.apiTable !== null) {
		data.values = this.mergeApiTableData(this.props.tableData.apiTable.values, data.values);
		if (this.props.apiTable) {
		data.values = this.mergeApiTableData(this.props.apiTable.values, data.values);
		}
		this.props.changeApiTable(data);
		}
		@@ -989,17 +999,16 @@ class AppContainer extends Component {
		*/
		getAppInstancesCb(error, data) {
		if (error !== null) {
		this.props.changeAppInstancesTable([]);
		this.props.changeAppInstanceTable([]);
		return;
		}

		// only update if values present, otherwise means no changes
		if (data) {
		//flush global app instances
		this.props.changeAppInstancesTable(data);
		} else {
		this.props.changeAppInstancesTable([]);
		}
		// Update App Instance table
		var appInstances = data ? data : [];
		this.props.changeAppInstanceTable(appInstances);

		// Update Edge App states
		this.refreshEdgeApps(appInstances);
		}

		refreshAppInstancesTable() {
		@@ -1010,6 +1019,119 @@ class AppContainer extends Component {
		}
		}

		getAppInstance(name, appInstances) {
		if (appInstances) {
		for (var i = 0; i < appInstances.length; i++) {
		let appInstance = appInstances[i];
		if (appInstance.name === name) {
		return appInstance;
		}
		}
		}
		return null;
		}

		refreshEdgeApps(appInstances) {
		if (!this.props.edgeApps) {
		return;
		}

		let edgeApps = [];
		let updateRequired = false;

		// Loop through edge apps
		for (var i = 0; i < this.props.edgeApps.length; i++) {
		// Get a copy of the edge app
		let edgeApp = updateObject(this.props.edgeApps[i], {});

		// Ignore mec011 & enable/disable in progress
		let isMec011 = edgeApp.pseudoName.includes('011');
		if (isMec011 \|\| edgeApp.enableInProgressCount > -1 \|\| edgeApp.disableInProgressCount > -1) {
		edgeApps.push(edgeApp);
		continue;
		}

		// Find matching app instance, if any
		let appInstance = this.getAppInstance(edgeApp.name, appInstances);

		// Update service state
		if (appInstance === null) {
		if (edgeApp.enabled) {
		edgeApp.enabled = false;
		updateRequired = true;
		}
		} else {
		if (!edgeApp.enabled) {
		edgeApp.enabled = true;
		updateRequired = true;
		}
		}

		// Add edge app to list
		edgeApps.push(edgeApp);
		}

		// Update state if required
		if (updateRequired) {
		this.props.changeEdgeAppList(edgeApps);
		}
		}

		decrementEdgeApps(appInstances) {
		if (!this.props.edgeApps) {
		return;
		}

		let edgeApps = [];
		let updateRequired = false;

		// Loop through edge apps
		for (var i = 0; i < this.props.edgeApps.length; i++) {
		// Get a copy of the edge app
		let edgeApp = updateObject(this.props.edgeApps[i], {});

		// Ignore mec011
		let isMec011 = edgeApp.pseudoName.includes('011');
		if (isMec011) {
		edgeApps.push(edgeApp);
		continue;
		}

		// Decrement progress counters if enable/disable in progress
		if (edgeApp.enableInProgressCount > -1) {
		edgeApp.enableInProgressCount--;
		// Enable controls immediately after operation is complete
		if (edgeApp.enableInProgressCount < (EDGE_APP_ENABLE_COUNT_MAX - BLACKOUT_TIME)) {
		let appInstance = this.getAppInstance(edgeApp.name, appInstances);
		if (appInstance !== null) {
		edgeApp.enabled = true;
		edgeApp.enableInProgressCount = -1;
		}
		}
		updateRequired = true;
		} else if (edgeApp.disableInProgressCount > -1) {
		edgeApp.disableInProgressCount--;
		// Enable controls immediately after operation is complete
		if (edgeApp.disableInProgressCount < (EDGE_APP_DISABLE_COUNT_MAX - BLACKOUT_TIME)) {
		let appInstance = this.getAppInstance(edgeApp.name, appInstances);
		if (appInstance === null) {
		edgeApp.enabled = false;
		edgeApp.disableInProgressCount = -1;
		}
		}
		updateRequired = true;
		}

		// Add edge app to list
		edgeApps.push(edgeApp);
		}

		// Update state if required
		if (updateRequired) {
		this.props.changeEdgeAppList(edgeApps);
		}
		}

		renderPage() {
		switch (this.props.page) {
		case PAGE_HOME:
		@@ -1160,13 +1282,15 @@ const mapStateToProps = state => {
		dialogErrorMsg: state.ui.dialogErrorMsg,
		networkFiles: state.ui.networkFiles,
		networkFileSelected: state.ui.networkFileSelected,
		tableData: state.sbox.apiTable,
		apiTable: state.sbox.apiTable,
		highVelocityUeList: state.ui.highVelocityUeList,
		lowVelocityUeList: state.ui.lowVelocityUeList,
		stationaryUeList: state.ui.stationaryUeList,
		nbLowVelocityUe: state.ui.nbLowVelocityUe,
		nbHighVelocityUe: state.ui.nbHighVelocityUe,
		mepList: state.ui.mepList,
		edgeApps: state.ui.edgeApps,
		appInstanceTable: state.sbox.appInstanceTable.data,
		appInstancesSelected: state.ui.appInstancesSelected,
		updateUeInProgressCount: state.ui.updateUeInProgressCount,
		activationInProgressCount: state.ui.activationInProgressCount,
		@@ -1193,6 +1317,7 @@ const mapDispatchToProps = dispatch => {
		changeLowVelocityUeList: list => dispatch(uiSandboxChangeLowVelocityUeList(list)),
		changeHighVelocityUeList: list => dispatch(uiSandboxChangeHighVelocityUeList(list)),
		changeMepList: list => dispatch(uiSandboxChangeMepList(list)),
		changeEdgeAppList: list => dispatch(uiSandboxChangeEdgeAppList(list)),
		changeAppInstancesSelected: list => dispatch(uiSandboxChangeAppInstancesSelected(list)),
		changePauseButton: checked => dispatch(uiSandboxChangePauseButton(checked)),
		changeApiDetailedData: row => dispatch(uiSandboxChangeApiDetailedData(row)),
		@@ -1206,7 +1331,7 @@ const mapDispatchToProps = dispatch => {
		changeMapPoaList: list => dispatch(sboxChangeMapPoaList(list)),
		changeMapComputeList: list => dispatch(sboxChangeMapComputeList(list)),
		changeApiTable: value => dispatch(sboxChangeApiTable(value)),
		changeAppInstancesTable: value => dispatch(sboxChangeAppInstancesTable(value)),
		changeAppInstanceTable: value => dispatch(sboxChangeAppInstanceTable(value)),
		changeUpdateUeInProgressCount: count => dispatch(uiSandboxChangeUpdateUeInProgressCount(count)),
		changeActivationInProgressCount: count => dispatch(uiSandboxChangeActivationInProgressCount(count)),
		changeActivationInProgressScenarioName: name => dispatch(uiSandboxChangeActivationInProgressScenarioName(name))

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

+75 −235

Original line number	Diff line number	Diff line
		@@ -2,235 +2,95 @@
		* Copyright (c) 2020 ETSI. All rights reserved.
		*/

		import _ from 'lodash';
		import { connect } from 'react-redux';
		import React, { Component } from 'react';
		import { Select } from '@rmwc/select';
		import TryIt from './try-it';
		import ShowServiceEnablementButton from './show-service-enablement-button';
		import AppInstanceInfo from './app-instance-info';
		import ApiTable from './api-table';
		import { Grid, GridCell } from '@rmwc/grid';
		import { Typography } from '@rmwc/typography';

		import {
		PAGE_SANDBOX,
		DEFAULT_NO_NETWORK_FILE_SELECTED,
		NO_SCENARIO_NAME
		} from '../../app-constants';

		import {
		parseEdgeApps
		} from '../../util/scenario-utils';

		import {
		uiSandboxChangeMecApiSelected
		} from '../../state/ui';

		import {
		DEFAULT_NO_NETWORK_FILE_SELECTED
		} from '../../app-constants';

		class ApiPane extends Component {
		constructor(props) {
		super(props);
		this.previousScenarioName = '';
		this.edgeAppsMap = null;
		this.edgeAppNames = [];
		this.mecApis = [];
		this.mecSwaggerApisUrl = [];
		this.mecApisPath = [];
		this.mecApiEnabled = [];
		this.mecApiPseudoNames = [];
		this.selectedIndex = -1;
		this.data = null;
		}

		componentDidMount() {
		if (this.props.scenario !== null && this.props.scenario.name !== NO_SCENARIO_NAME) {
		this.getScenario(this.props.scenario.name, false);
		isEdgeAppRunning(edgeApp) {
		if (!edgeApp) {
		return false;
		}

		// mec011 is always running
		if (edgeApp.img.includes('meep-app-enablement')) {
		return true;
		}

		componentDidUpdate() {
		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);
		// Check if edge app instance is running
		if (this.props.appInstanceTable) {
		for (var i = 0; i < this.props.appInstanceTable.length; i++) {
		if (edgeApp.name === this.props.appInstanceTable[i].name) {
		return true;
		}
		} else {
		this.clearAll();
		}
		}
		return false;
		}

		clearAll() {
		this.previousScenarioName = '';
		this.edgeAppsMap = null;
		this.edgeAppNames = [];
		this.mecApis = [];
		this.mecSwaggerApisUrl = [];
		this.mecApisPath = [];
		this.mecApiEnabled = [];
		this.mecApiPseudoNames = [];
		this.selectedIndex = -1;
		this.data = null;
		getSelectedEdgeApp() {
		if (this.props.mecApiSelected && this.props.edgeApps) {
		for (var i = 0; i < this.props.edgeApps.length; i++) {
		let edgeApp = this.props.edgeApps[i];
		if (edgeApp.pseudoName === this.props.mecApiSelected) {
		return edgeApp;
		}

		getScenario(name) {
		if (name !== DEFAULT_NO_NETWORK_FILE_SELECTED && name !== '') {
		this.props.scenarioApi.getScenario(name, (error, data, response) => {
		this.getScenarioCb(error, data, response);
		});
		}
		}

		/**
		* Callback function to receive the result of the getScenario operation.
		* @callback module:api/ScenarioExecutionApi~getScenarioCallback
		* @param {String} error Error message, if any.
		*/

		getScenarioCb(error, data/, response/) {
		if (error) {
		return;
		return null;
		}

		this.previousScenarioName = data.name;

		// Get initial EdgeApps and UUID mapping
		this.edgeAppsMap = parseEdgeApps(data);
		let edgeAppNames = [];
		for (let entry in this.edgeAppsMap.edgeApps) {
		edgeAppNames.push(this.edgeAppsMap.edgeApps[entry].name);
		getMecApiOptions(edgeApps) {
		var mepOptions = {};
		if (edgeApps) {
		for (var i = 0; i < edgeApps.length; i++) {
		let edgeApp = edgeApps[i];
		if (!mepOptions[edgeApp.mepName]) {
		mepOptions[edgeApp.mepName] = [];
		}
		this.edgeAppNames = edgeAppNames;
		mepOptions[edgeApp.mepName].push({label: edgeApp.dropDownName, value: edgeApp.pseudoName});
		}

		parseEdgeApps(entries) {
		let edgeAppNames = [];

		for(let entry in entries) {
		if (entries[entry].elementType.val === 'EDGE APPLICATION') {
		edgeAppNames.push(entries[entry].name.val);
		}
		}

		return edgeAppNames;
		var options = [];
		_.forOwn(mepOptions, function(value, key) {
		var orderedValues = _.orderBy(value, 'label', 'asc');
		var entry = {
		label: key,
		options: orderedValues
		};
		options.push(entry);
		});
		return _.orderBy(options, 'label', 'asc');
		}

		render() {
		if (this.props.page !== PAGE_SANDBOX) {
		return null;
		}

		//compare configured and active edge apps to determine if enabled or disabled
		let enabledApps = [];
		let apiUrls = [];
		let apiPaths = [];
		let pseudoNames = [];
		let dropDownNames = [];
		if (this.edgeAppNames !== null) {
		for (var i = 0; i < this.edgeAppNames.length; i++) {
		var found = false;
		if (this.props.tableData.appInstancesTable !== null) {
		for (var j = 0; j < this.props.tableData.appInstancesTable.length; j++) {
		//mec011 is always enabled
		if (this.edgeAppNames[i] === this.props.tableData.appInstancesTable[j].name \|\| this.edgeAppNames[i].includes('mec011')) {
		found = true;
		continue;
		}
		}
		}

		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-%20Application%20Mobility%20REST%20API';
		apiPath = mepName+'/ams/v2';
		pseudoName = 'Application Mobility (021) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'Application Mobility (021)';
		break;
		case 'meep-docker-registry:30001/meep-ams':
		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;
		default:
		}
		apiUrls.push(apiUrl);
		apiPaths.push(apiPath);
		pseudoNames.push(pseudoName);
		dropDownNames.push(dropDownName);
		enabledApps.push(found);
		}
		}
		//populate mec:ApiEnabled by querying state of the APIs
		this.mecApis = pseudoNames;
		this.mecSwaggerApisUrl = apiUrls;
		this.mecApisPath = apiPaths;
		this.mecApiEnabled = enabledApps;
		this.mecApiPseudoNames = pseudoNames;
		this.data = null;
		// Get selected Edge App
		let selectedEdgeApp = this.getSelectedEdgeApp();

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

		let mepName = '', currentMepName = '', label = '';
		var options = [];
		var dropDownOptions = [];
		if (pseudoNames.length > 0) {
		for (i = 0; i < pseudoNames.length; i++) {
		mepName = this.edgeAppsMap.edgeApps[i].mepName;
		if (mepName !== currentMepName) {
		if (currentMepName !== '') {
		var entry = {
		label: label,
		options: options
		};
		dropDownOptions.push(entry);
		}
		label = mepName;
		options = [];
		currentMepName = mepName;
		}
		options.push(dropDownNames[i]);
		}
		var lastEntry = {
		label: label,
		options: options
		};
		dropDownOptions.push(lastEntry);
		}
		// Refresh MEC API select options
		var options = this.getMecApiOptions(this.props.edgeApps);
		let selectedOption = selectedEdgeApp ? selectedEdgeApp.pseudoName : '';

		return (
		<div>
		@@ -239,62 +99,45 @@ class ApiPane extends Component {
		</div>
		<div style={{ display: 'flex', height: '100%', marginBottom: 5 }}>
		<div style={{ flex: '1', marginRight: 5, padding: 10 }}>
		<ApiTable
		data={this.props.tableData}
		/>
		<ApiTable/>
		</div>
		<div
		className="component-style"
		style={{ flex: '0 0 450px' }}
		>
		<div style={styles.section}>
		<Grid style={{ marginBottom: 2}} align="center">
		<GridCell span={9}>
		<Grid>
		<GridCell span={12}>
		<Select
		title="Select the MEC API"
		style={styles.select}
		fullwidth="true"
		outlined
		label="MEC Services Instances"
		label="MEC Application Instances"
		defaultValue={selectedOption}
		placeholder=" "
		options={dropDownOptions}
		options={options}
		disabled={!configEnabled}
		onChange={event => {
		this.props.changeMecApiSelected(event.target.value);
		this.selectedIndex = event.target.selectedIndex;
		}}
		//value={this.props.mecApiSelected}
		/>
		</GridCell>
		<GridCell span={1}/>
		<GridCell span={2} align="center">
		<ShowServiceEnablementButton
		page={this.props.page}
		mecApi={this.mecApiPseudoNames[this.selectedIndex-1]}
		mecApis={this.mecApis}
		mecApiEnabled={this.mecApiEnabled}
		mecApiPseudoNames={this.mecApiPseudoNames}
		</Grid>
		</div>

		<div style={styles.section}>
		<AppInstanceInfo
		edgeApp={selectedEdgeApp}
		applicationsApi={this.props.applicationsApi}
		eventsApi={this.props.eventsApi}
		edgeAppsMap={this.edgeAppsMap}
		mecApiTransitionToEnableList={this.props.mecApiTransitionToEnableList}
		mecApiTransitionToDisableList={this.props.mecApiTransitionToDisableList}
		disabled={!configEnabled}
		/>
		</GridCell>
		</Grid>
		</div>

		<div style={styles.section}>
		<TryIt
		page={this.props.page}
		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}
		edgeApp={selectedEdgeApp}
		disabled={!configEnabled}
		/>
		</div>
		@@ -311,7 +154,9 @@ const styles = {
		paddingTop: 15
		},
		section: {
		padding: 5
		padding: 5,
		paddingRight: 15,
		marginLeft: 10
		},
		select: {
		width: '100%',
		@@ -321,18 +166,13 @@ const styles = {

		const mapStateToProps = state => {
		return {
		page: state.ui.page,
		sandboxName: state.ui.sandboxName,
		mecApiSelected: state.ui.mecApiSelected,
		networkFileSelected: state.ui.networkFileSelected,
		activationInProgressCount: state.ui.activationInProgressCount,
		scenario: state.sbox.scenario,
		detailedData: state.ui.detailedData,
		tableData: state.sbox.apiTable,
		table: state.sbox.table,
		mecApiTransitionToEnableList: state.ui.mecApiTransitionToEnableList,
		mecApiTransitionToDisableList: state.ui.mecApiTransitionToDisableList

		appInstanceTable: state.sbox.appInstanceTable.data,
		edgeApps: state.ui.edgeApps
		};
		};

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

+7 −9

File changed.

Preview size limit exceeded, changes collapsed.

js-apps/frontend/src/js/containers/sandbox/app-instance-info.js

0 → 100644

+191 −0

File added.

Preview size limit exceeded, changes collapsed.