added replay status timer & UI state + fixed replay file creation form validation (c00caad7) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/src/js/components/dialogs/id-save-replay-dialog.js

+18 −14

Original line number	Diff line number	Diff line
		@@ -23,9 +23,10 @@ class IDSaveReplayDialog extends Component {
		constructor(props) {
		super(props);
		this.state = {
		err: null,
		replayName: null,
		description: null
		replayErr: null,
		description: null,
		descriptionErr: null
		};
		}

		@@ -33,8 +34,8 @@ class IDSaveReplayDialog extends Component {
		var err = null;

		if (name) {
		if (name.length > 20) {
		err = 'Maximum 20 characters';
		if (name.length > 30) {
		err = 'Maximum 30 characters';
		} else if (!name.match(/^(([a-z0-9][-a-z0-9.]*)?[a-z0-9])+$/)) {
		err = 'Lowercase alphanumeric or \'-\'';
		}
		@@ -43,7 +44,7 @@ class IDSaveReplayDialog extends Component {
		}
		this.setState({
		replayName: name,
		err: err
		replayErr: err
		});
		}

		@@ -51,13 +52,13 @@ class IDSaveReplayDialog extends Component {
		var err = null;

		if (desc) {
		if (desc.length > 30) {
		err = 'Maximum 30 characters';
		if (desc.length > 100) {
		err = 'Maximum 100 characters';
		}
		}
		this.setState({
		description: desc,
		err: err
		descriptionErr: err
		});
		}

		@@ -74,7 +75,7 @@ class IDSaveReplayDialog extends Component {
		onSubmit={() => this.saveReplay()}
		okDisabled={
		(!this.state.replayName && this.props.replayNameRequired) \|\|
		this.state.err
		this.state.replayErr \|\| this.state.descriptionErr
		}
		cydata={MEEP_DLG_SAVE_REPLAY}
		>
		@@ -89,26 +90,29 @@ class IDSaveReplayDialog extends Component {
		style={{ width: '100%' }}
		label={'Replay Name'}
		invalid={
		this.state.err \|\|
		(!this.state.replayName && this.props.replayNameRequired)
		this.state.replayErr
		}
		onChange={e => this.changeReplayName(e.target.value)}
		value={this.replayName}
		/>
		<TextFieldHelperText validationMsg={true}>
		<span>{this.state.replayErr}</span>
		</TextFieldHelperText>

		<TextField
		outlined
		style={{ width: '100%' }}
		label={'Replay Description'}
		invalid={
		this.state.err
		this.state.descriptionErr
		}
		onChange={e => this.changeDescription(e.target.value)}
		value={this.description}
		/>

		<TextFieldHelperText validationMsg={true}>
		<span>{this.state.err}</span>
		<span>{this.state.descriptionErr}</span>
		</TextFieldHelperText>

		</IDDialog>
		);
		}

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

+13 −12

Original line number	Diff line number	Diff line
		@@ -77,15 +77,6 @@ const EventConfiguration = props => {
		return null;
		}

		let configurationView = null;

		configurationView = (
		<ConfigurationView
		onCreateEvent={props.onCreateEvent}
		onReplayEvent={props.onReplayEvent}
		onSaveReplay={props.onSaveReplay}
		/>
		);
		return (
		<Elevation
		z={2}
		@@ -112,7 +103,15 @@ const EventConfiguration = props => {
		</div>
		</GridCell>
		</Grid>
		{configurationView}

		<ConfigurationView
		onCreateEvent={props.onCreateEvent}
		onReplayEvent={props.onReplayEvent}
		onSaveReplay={props.onSaveReplay}
		/>

		<div>{props.replayStatus ? props.replayStatus.status : 'NONE'}</div>

		</Elevation>
		);
		};
		@@ -159,6 +158,7 @@ class EventContainer extends Component {
		onSaveReplay={this.props.onSaveReplay}
		changeReplayLoop={checked => this.changeReplayLoop(checked)}
		replayLoop={this.props.replayLoop}
		replayStatus={this.props.replayStatus}
		/>
		</>
		);
		@@ -168,7 +168,8 @@ class EventContainer extends Component {
		const mapStateToProps = state => {
		return {
		eventCreationMode: state.exec.eventCreationMode,
		eventReplayMode: state.exec.eventReplayMode
		eventReplayMode: state.exec.eventReplayMode,
		replayStatus: state.ui.replayStatus
		};
		};

js-apps/meep-frontend/src/js/containers/exec/event-replay-pane.js

+3 −1

Original line number	Diff line number	Diff line
		@@ -198,6 +198,7 @@ class EventReplayPane extends Component {
		</GridCell>
		</GridInner>
		</Grid>
		<div>{this.props.replayStatus ? this.props.replayStatus.status : 'NONE'}</div>
		</div>

		);
		@@ -221,7 +222,8 @@ const styles = {

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

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

+45 −17

Original line number	Diff line number	Diff line
		@@ -54,6 +54,7 @@ import {
		uiChangeCurrentPage,
		uiExecChangeEventCreationMode,
		uiExecChangeEventReplayMode,
		uiExecChangeReplayStatus,
		uiToggleMainDrawer
		} from '../state/ui';

		@@ -86,11 +87,15 @@ meepCtrlRestApiClient.ApiClient.instance.basePath = basepath.replace(
		''
		);

		var counter = 0;

		class MeepContainer extends Component {
		constructor(props) {
		super(props);
		this.state = {};
		this.refreshIntervalTimer = null;
		this.podsPhasesIntervalTimer = null;
		this.replayStatusIntervalTimer = null;
		this.meepCfgApi = new meepCtrlRestApiClient.ScenarioConfigurationApi();
		this.meepExecApi = new meepCtrlRestApiClient.ScenarioExecutionApi();
		this.meepReplayApi = new meepCtrlRestApiClient.EventReplayApi();
		@@ -101,15 +106,22 @@ class MeepContainer extends Component {
		this.props.changeEventCreationMode(false);
		this.props.changeEventReplayMode(false);
		this.refreshScenario();
		this.startTimers();
		this.monitorTabFocus();
		}

		startTimers() {
		if (this.props.automaticRefresh) {
		this.startAutomaticRefresh();
		}
		this.startRefreshCycle();
		this.startPodsPhasesPeriodicCheck();
		this.startReplayStatusPeriodicCheck();
		}

		startRefreshCycle() {
		this.startPodsPhasesPeriodicCheck();
		this.monitorTabFocus();
		stopTimers() {
		this.stopReplayStatusPeriodicCheck();
		this.stopCorePodsPhasesPeriodicCheck();
		this.stopAutomaticRefresh();
		}

		startPodsPhasesPeriodicCheck() {
		@@ -123,6 +135,17 @@ class MeepContainer extends Component {
		clearInterval(this.podsPhasesIntervalTimer);
		}

		startReplayStatusPeriodicCheck() {
		this.replayStatusIntervalTimer = setInterval(
		() => this.checkReplayStatus(),
		1000
		);
		}

		stopReplayStatusPeriodicCheck() {
		clearInterval(this.replayStatusIntervalTimer);
		}

		monitorTabFocus() {
		var hidden, visibilityChange;
		if (typeof document.hidden !== 'undefined') {
		@@ -139,14 +162,9 @@ class MeepContainer extends Component {

		const handleVisibilityChange = () => {
		if (document[hidden]) {
		this.stopCorePodsPhasesPeriodicCheck();
		this.stopAutomaticRefresh();
		this.stopTimers();
		} else {
		this.startPodsPhasesPeriodicCheck();

		if (this.props.automaticRefresh) {
		this.startAutomaticRefresh();
		}
		this.startTimers();
		}
		};

		@@ -201,6 +219,16 @@ class MeepContainer extends Component {
		});
		}

		checkReplayStatus() {
		if (this.props.eventCfgMode \|\| this.props.eventReplayMode) {
		counter++;
		var status = {
		status: 'Latest Status: ' + counter
		};
		this.props.changeReplayStatus(status);
		}
		}

		setMainContent(targetId) {
		this.props.changeCurrentPage(targetId);
		}
		@@ -484,6 +512,8 @@ const mapStateToProps = state => {
		mainDrawerOpen: state.ui.mainDrawerOpen,
		dashboardView1: state.ui.dashboardView1,
		dashboardView2: state.ui.dashboardView2,
		eventReplayMode: state.ui.eventReplayMode,
		eventCfgMode: state.ui.eventCfgMode,
		corePodsRunning: corePodsRunning(state),
		corePodsErrors: corePodsErrors(state),
		execVisData: execVisFilteredData(state)
		@@ -493,15 +523,13 @@ const mapStateToProps = state => {
		const mapDispatchToProps = dispatch => {
		return {
		changeCurrentPage: page => dispatch(uiChangeCurrentPage(page)),
		changeEventCreationMode: mode =>
		dispatch(uiExecChangeEventCreationMode(mode)),
		changeEventReplayMode: mode =>
		dispatch(uiExecChangeEventReplayMode(mode)),
		changeEventCreationMode: mode => dispatch(uiExecChangeEventCreationMode(mode)),
		changeEventReplayMode: mode => dispatch(uiExecChangeEventReplayMode(mode)),
		changeReplayStatus: status => dispatch(uiExecChangeReplayStatus(status)),
		cfgChangeScenario: scenario => dispatch(cfgChangeScenario(scenario)),
		execChangeScenario: scenario => dispatch(execChangeScenario(scenario)),
		execChangeScenarioState: s => dispatch(execChangeScenarioState(s)),
		changeScenarioPodsPhases: phases =>
		dispatch(execChangeScenarioPodsPhases(phases)),
		changeScenarioPodsPhases: phases => dispatch(execChangeScenarioPodsPhases(phases)),
		changeCorePodsPhases: phases => dispatch(execChangeCorePodsPhases(phases)),
		changeServiceMaps: maps => dispatch(execChangeServiceMaps(maps)),
		execChangeVisData: data => dispatch(execChangeVisData(data)),

js-apps/meep-frontend/src/js/state/ui/index.js

+12 −1

Original line number	Diff line number	Diff line
		@@ -39,7 +39,8 @@ const initialState = {
		dashboardView2: VIEW_NAME_NONE,
		execReplayFileSelected: '',
		eventReplayMode: false,
		eventReplayLoop: false
		eventReplayLoop: false,
		replayStatus: null
		};

		// Change the current page
		@@ -172,6 +173,14 @@ export function uiExecChangeDashboardView2(name) {
		};
		}

		const UI_EXEC_CHANGE_REPLAY_STATUS = 'UI_EXEC_CHANGE_REPLAY_STATUS';
		export function uiExecChangeReplayStatus(status) {
		return {
		type: UI_EXEC_CHANGE_REPLAY_STATUS,
		payload: status
		};
		}

		export default function uiReducer(state = initialState, action) {
		switch (action.type) {
		case CHANGE_CURRENT_PAGE:
		@@ -206,6 +215,8 @@ export default function uiReducer(state = initialState, action) {
		return updateObject(state, { dashboardView1: action.payload });
		case UI_EXEC_CHANGE_DASHBOARD_VIEW2:
		return updateObject(state, { dashboardView2: action.payload });
		case UI_EXEC_CHANGE_REPLAY_STATUS:
		return updateObject(state, { replayStatus: action.payload });
		default:
		return state;
		}