minor frontend fixes + stop metrics polling when only vis topology is shown (97132631) · 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

+32 −18

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() {
		@@ -415,6 +425,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 +460,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

+19 −30

Original line number	Diff line number	Diff line
		@@ -22,7 +22,7 @@ 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';
		const SHOW_DASHBOARD_CONFIG_LABEL = 'Show Dashboard Config (Experimental)';

		import {
		uiSetAutomaticRefresh,
		@@ -114,7 +114,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>
		@@ -161,26 +161,24 @@ 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}
		/>
		</GridCell>
		<GridCell span={6}>
		<CheckableSettingItem
		title='Dashboard Config'
		stateItem={this.props.showDashboardConfig}
		changeStateItem={this.props.changeShowDashboardConfig}
		stateItemName={SHOW_DASHBOARD_CONFIG_LABEL}
		/>
		</GridCell>
		</Grid>

		</Elevation>

		</GridCell>
		@@ -191,19 +189,11 @@ class SettingsPageContainer extends Component {
		}
		}

		const CheckableSettingItem = ({title, stateItem, changeStateItem, stateItemName}) => {
		const CheckableSettingItem = ({stateItem, changeStateItem, stateItemName}) => {
		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)}
		@@ -213,7 +203,6 @@ const CheckableSettingItem = ({title, stateItem, changeStateItem, stateItemName}
		</div>
		</GridCell>
		</Grid>
		</>
		);
		};

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

+5 −5

Original line number	Diff line number	Diff line
		@@ -220,11 +220,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';