Merge pull request #40 from dilallkx/kd_sp31_frontend (545c2d81) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/package.json

+1 −1

Original line number	Diff line number	Diff line
		@@ -8,7 +8,7 @@
		"test:verbose": "jest --verbose true",
		"test:coverage": "jest --verbose true --coverage --colors",
		"build": "webpack",
		"build:dev": "webpack-serve --port 8091 --host 10.3.16.73"
		"build:dev": "webpack-serve --port 8091 --host 10.3.16.137"
		},
		"author": "",
		"license": "ISC",

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

+2 −2

Original line number	Diff line number	Diff line
		@@ -227,8 +227,8 @@ class ExecPageContainer extends Component {
		? this.props.execScenarioName
		: this.props.cfgScenarioName;

		const spanLeft = this.props.eventCreationMode ? 10 : 12;
		const spanRight = this.props.eventCreationMode ? 2 : 0;
		const spanLeft = this.props.eventCreationMode ? 9 : 12;
		const spanRight = this.props.eventCreationMode ? 3 : 0;
		return (
		<div style={{width: '100%'}}>
		{this.renderDialogs()}

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

+34 −22

Original line number	Diff line number	Diff line
		@@ -35,7 +35,9 @@ import {
		TYPE_CFG,
		TYPE_EXEC,
		EXEC_STATE_DEPLOYED,
		NO_SCENARIO_NAME
		NO_SCENARIO_NAME,
		VIS_VIEW,
		VIEW_NAME_NONE
		} from '../meep-constants';

		import {
		@@ -89,10 +91,10 @@ import {

		// MEEP Controller REST API JS client
		var basepath = 'http://' + location.host + location.pathname + 'v1';
		// const basepath = 'http://10.3.16.73:30000/v1';
		// const basepath = 'http://10.3.16.137:30000/v1';

		const metricsBasePath = 'http://' + location.hostname + ':30008/v1';
		// const metricsBasePath = 'http://10.3.16.73:30008/v1';
		// const metricsBasePath = 'http://10.3.16.137:30008/v1';

		const TIME_FORMAT = moment.HTML5_FMT.DATETIME_LOCAL_MS;

		@@ -105,16 +107,18 @@ class MeepContainer extends Component {
		this.refreshIntervalTimer = null;
		this.meepCfgApi = new meepCtrlRestApiClient.ScenarioConfigurationApi();
		this.meepExecApi = new meepCtrlRestApiClient.ScenarioExecutionApi();
		this.metricsPollingEnabled = false;
		}

		componentDidMount() {
		document.title = 'AdvantEDGE';
		this.props.changeEventCreationMode(false);
		this.refreshScenario();
		if (this.props.automaticRefresh) {
		this.startAutomaticRefresh();
		}
		this.startRefreshCycle();

		clearInterval(this.dataTimer);
		this.startMetricsPolling();
		this.setMetricsPolling();
		}

		startRefreshCycle() {
		@@ -184,23 +188,29 @@ class MeepContainer extends Component {
		});
		}

		setMetricsPolling() {
		if (this.props.dashboardView1 === VIS_VIEW && this.props.dashboardView2 === VIEW_NAME_NONE) {
		this.stopMetricsPolling();
		} else {
		this.startMetricsPolling();
		}
		}
		stopMetricsPolling() {
		// clearInterval(this.dataTimer);
		this.setState({metricsPollingStopped: true});
		if (this.metricsPollingEnabled) {
		clearInterval(this.dataTimer);
		this.metricsPollingEnabled = false;
		}
		}
		startMetricsPolling() {
		// this.props.clearMetricsEpochs();
		if (!this.metricsPollingEnabled) {
		this.epochCount = 0;
		const nextData = () => {
		this.epochCount += 1;
		this.fetchMetrics();
		};

		if (!this.dataTimer) {
		this.dataTimer = setInterval(nextData, 1000);
		this.metricsPollingEnabled = true;
		}

		this.setState({metricsPollingStopped: false});
		}

		checkPodsPhases() {
		@@ -245,10 +255,8 @@ class MeepContainer extends Component {
		startAutomaticRefresh() {
		_.defer(() => {
		var value = this.props.refreshInterval;
		if (isNaN(value) \|\| value < 500 \|\| value > 60000) {
		clearInterval(this.refreshIntervalTimer);
		} else {
		clearInterval(this.refreshIntervalTimer);
		if (!isNaN(value) && value >= 500 && value <= 60000) {
		this.refreshIntervalTimer = setInterval(() => this.refreshMeepController(), value);
		}
		});
		@@ -415,6 +423,8 @@ class MeepContainer extends Component {

		render() {
		const flexString = this.props.mainDrawerOpen ? '0 0 250px' : '0 0 0px';
		this.setMetricsPolling();

		return (
		<div style={{width: '100%'}}>
		<MeepTopBar
		@@ -448,6 +458,8 @@ const mapStateToProps = state => {
		refreshInterval: state.ui.refreshInterval,
		devMode: state.ui.devMode,
		mainDrawerOpen: state.ui.mainDrawerOpen,
		dashboardView1: state.ui.dashboardView1,
		dashboardView2: state.ui.dashboardView2,
		corePodsRunning: corePodsRunning(state),
		corePodsErrors: corePodsErrors(state),
		execVisData: execVisFilteredData(state)

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

+42 −57

Original line number	Diff line number	Diff line
		@@ -21,9 +21,6 @@ import { TextField } from '@rmwc/textfield';
		import { Checkbox } from '@rmwc/checkbox';
		import { Elevation } from '@rmwc/elevation';

		const VIS_CONFIGURATION_MODE_LABEL = 'VIS Configuration Mode';
		const SHOW_DASHBOARD_CONFIG_LABEL = 'Show Dashboard Config';

		import {
		uiSetAutomaticRefresh,
		uiChangeRefreshInterval,
		@@ -32,9 +29,13 @@ import {
		} from '../../state/ui';

		import {
		PAGE_SETTINGS,
		SET_EXEC_REFRESH_CHECKBOX,
		SET_EXEC_REFRESH_INT,
		PAGE_SETTINGS
		SET_VIS_CFG_CHECKBOX,
		SET_VIS_CFG_LABEL,
		SET_DASHBOARD_CFG_CHECKBOX,
		SET_DASHBOARD_CFG_LABEL
		} from '../../meep-constants';

		class SettingsPageContainer extends Component {
		@@ -45,38 +46,32 @@ class SettingsPageContainer extends Component {
		};
		}

		setAutomaticRefresh(interval) {
		this.props.setAutomaticRefresh(interval);
		}

		validateInterval(interval) {
		if (interval < 500 \|\| 60000 < interval) {
		validateInterval(val) {
		if (isNaN(val) \|\| val < 500 \|\| 60000 < val) {
		return false;
		}
		return true;
		}

		intervalChanged(val) {
		if (!this.validateInterval(val)) {
		this.props.changeRefreshInterval(val);
		this.props.stopRefresh();
		this.setState({error: true});
		} else {
		handleIntervalChange(val) {
		this.props.changeRefreshInterval(val);
		if (this.validateInterval(val)) {
		this.props.startRefresh();
		this.setState({error: false});
		} else {
		this.props.stopRefresh();
		this.setState({error: true});
		}
		}

		handleCheckboxChange(e) {
		if (e.target.checked) {
		if (this.validateInterval(this.props.refreshInterval)) {
		handleCheckboxChange(val) {
		this.props.setAutomaticRefresh(val);
		if (val && this.validateInterval(this.props.refreshInterval)) {
		this.props.startRefresh();
		} else {
		this.props.stopRefresh();
		}
		}
		}

		styles() {
		var styles = {
		@@ -114,7 +109,7 @@ class SettingsPageContainer extends Component {
		<GridInner>
		<GridCell span={12} style={styles.inner}>

		<Elevation className="component-style" z={2} style={{marginBottom: 10}}>
		<Elevation className="component-style" z={2} style={{paddingBottom: 10, marginBottom: 10}}>
		<Grid>
		<GridCell span={12} style={{paddingLeft: 10, paddingTop: 10}}>
		<div>
		@@ -127,9 +122,7 @@ class SettingsPageContainer extends Component {
		<div style={{marginTop: 20}}>
		<Checkbox
		checked={this.props.automaticRefresh}
		onChange={e => {
		this.props.setAutomaticRefresh(e.target.checked);}
		}
		onChange={e => this.handleCheckboxChange(e.target.checked)}
		data-cy={SET_EXEC_REFRESH_CHECKBOX}>
		Automatic refresh:
		</Checkbox>
		@@ -138,7 +131,7 @@ class SettingsPageContainer extends Component {
		<GridCell span={2}>
		<TextField outlined style={this.styles().interval}
		label="Interval (ms)"
		onChange={(e) => this.intervalChanged(e.target.value)}
		onChange={(e) => this.handleIntervalChange(e.target.value)}
		value={this.props.refreshInterval}
		disabled={!this.props.automaticRefresh}
		data-cy={SET_EXEC_REFRESH_INT}
		@@ -161,26 +154,26 @@ class SettingsPageContainer extends Component {
		</Grid>
		</Elevation>

		<Elevation className="component-style" z={2}>
		<Elevation className="component-style" z={2} style={{paddingBottom: 10, marginBottom: 10}}>
		<Grid>
		<GridCell span={6}>
		<GridCell span={12} style={{paddingLeft: 10, paddingTop: 10}}>
		<div>
		<span className="mdc-typography--headline6">Development: </span>
		</div>
		</GridCell>
		</Grid>
		<CheckableSettingItem
		title='Development'
		stateItem={this.props.devMode}
		changeStateItem={this.props.changeDevMode}
		stateItemName={VIS_CONFIGURATION_MODE_LABEL}
		stateItemName={SET_VIS_CFG_LABEL}
		cydata={SET_VIS_CFG_CHECKBOX}
		/>
		</GridCell>
		<GridCell span={6}>
		<CheckableSettingItem
		title='Dashboard Config'
		stateItem={this.props.showDashboardConfig}
		changeStateItem={this.props.changeShowDashboardConfig}
		stateItemName={SHOW_DASHBOARD_CONFIG_LABEL}
		stateItemName={SET_DASHBOARD_CFG_LABEL}
		cydata={SET_DASHBOARD_CFG_CHECKBOX}
		/>
		</GridCell>
		</Grid>

		</Elevation>

		</GridCell>
		@@ -191,29 +184,21 @@ class SettingsPageContainer extends Component {
		}
		}

		const CheckableSettingItem = ({title, stateItem, changeStateItem, stateItemName}) => {
		const CheckableSettingItem = ({stateItem, changeStateItem, stateItemName, cydata}) => {
		return (
		<>
		<Grid>
		<GridCell span={12} style={{paddingLeft: 10, paddingTop: 10, marginBottom: -20}}>
		<div>
		<span className="mdc-typography--headline6">{title}: </span>
		</div>
		</GridCell>
		</Grid>
		<Grid span={12} style={{marginTop: 10}}>
		<GridCell span={12}>
		<div style={{paddingTop: 20, paddingBottom: 20}}>
		<div>
		<Checkbox
		checked={stateItem}
		onChange={e => changeStateItem(e.target.checked)}
		data-cy={cydata}
		>
		{stateItemName}
		</Checkbox>
		</div>
		</GridCell>
		</Grid>
		</>
		);
		};

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

+9 −6

Original line number	Diff line number	Diff line
		@@ -186,7 +186,10 @@ export const MON_DASHBOARD_IFRAME = 'mon-dashboard-iframe';
		// Settings Page IDs
		export const SET_EXEC_REFRESH_CHECKBOX = 'set-exec-refresh-checkbox';
		export const SET_EXEC_REFRESH_INT = 'set-exec-refresh-int';
		export const SET_DEV_MODE_CHECKBOX = 'set-dev-mode-checkbox';
		export const SET_VIS_CFG_CHECKBOX = 'set-vis-cfg-checkbox';
		export const SET_VIS_CFG_LABEL = 'VIS Configuration Mode';
		export const SET_DASHBOARD_CFG_CHECKBOX = 'set-dashboard-cfg-checkbox';
		export const SET_DASHBOARD_CFG_LABEL = 'Show Dashboard Config (Experimental)';

		// Logical Scenario types
		export const TYPE_SCENARIO = 0;
		@@ -220,11 +223,11 @@ export const ME_THROUGHPUT_METRICS = 'ingressPacketStats';
		export const ME_MOBILITY_EVENT = 'mobilityEvent';

		export const VIEW_NAME_NONE = 'None';
		export const HIERARCHY_VIEW = 'HIERARCHY_VIEW';
		export const APPS_VIEW = 'APPS_VIEW';
		export const LATENCY_VIEW = 'LATENCY_VIEW';
		export const THROUGHPUT_VIEW = 'THROUGHPUT_VIEW';
		export const VIS_VIEW = 'VIS_VIEW';
		export const HIERARCHY_VIEW = 'Network Topology';
		export const APPS_VIEW = 'Applications';
		export const LATENCY_VIEW = 'Latency Graph';
		export const THROUGHPUT_VIEW = 'Throughput Graph';
		export const VIS_VIEW = 'Network Topology (vis)';

		export const MOBILITY_EVENT = 'MOBILITY';
		export const NETWORK_CHARACTERISTICS_EVENT = 'NETWORK-CHARACTERISTICS-UPDATE';