Added expand.collapsed state of the dashboard config to the app ui state (3eacc58c) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+48 −33

Original line number	Diff line number	Diff line
		@@ -35,7 +35,8 @@ import {

		import {
		uiExecChangeDashboardView1,
		uiExecChangeDashboardView2
		uiExecChangeDashboardView2,
		uiExecExpandDashboardConfig
		} from '../state/ui';


		@@ -115,9 +116,13 @@ const TimeIntervalConfig = (props) => {
		);
		}
		return (
		<div>
		<div style={{marginTop: 10}}>
		<Grid>
		<GridCell span={3}>
		<div style={{margin:10}}>
		<div>
		<span className="mdc-typography--headline8">Timeframe in secs </span>
		</div>
		<Slider
		value={props.value}
		onChange={e => props.timeIntervalDurationChanged(e.detail.value)}
		@@ -126,12 +131,16 @@ const TimeIntervalConfig = (props) => {
		max={60}
		step={1}
		/>
		</div>

		</GridCell>
		<GridCell span={1}>

		</GridCell>
		<GridCell span={8}>
		<div style={{margin:10}}>
		<PauseResumeButton />
		</div>
		</GridCell>
		</Grid>
		</div>
		@@ -143,7 +152,7 @@ const TimeIntervalConfig = (props) => {
		const ConfigurationView = (props) => {
		return (
		<>
		<Grid>
		<Grid style={{marginBottom: 10}}>
		<GridCell span={2}>
		<IDSelect
		label={'Select View 1'}
		@@ -192,14 +201,12 @@ const ConfigurationView = (props) => {
		timeIntervalDurationChanged={(value) => {props.timeIntervalDurationChanged(value);}}
		stopSlidingWindow={props.stopSlidingWindow}
		startSlidingWindow={props.startSlidingWindow}
		slidingWindowStopped={props.slidingWidowStopped}
		slidingWindowStopped={props.slidingWindowStopped}
		/>
		</>
		);
		};

		const MAIN_CONFIGURATION = 'MAIN_CONFIGURATION';

		const buttonStyles = {
		marginRight: 0
		};
		@@ -343,7 +350,7 @@ const DashboardConfiguration = (props) => {

		let configurationView = null;

		if(props.configurationType) {
		if(props.dashboardConfigExpanded) {
		configurationView = (
		<ConfigurationView
		dashboardViewsList={props.dashboardViewsList}
		@@ -359,23 +366,23 @@ const DashboardConfiguration = (props) => {
		displayEdgeLabels={props.displayEdgeLabels}
		timeIntervalDurationChanged={props.timeIntervalDurationChanged}
		stopSlidingWindow={props.stopSlidingWindow}
		startSlidingWindowg={props.startSlidingWindow}
		startSlidingWindow={props.startSlidingWindow}
		slidingWindowStopped={props.slidingWindowStopped}
		/>
		);
		}

		const buttonConfig = !props.configurationType
		const buttonConfig = !props.dashboardConfigExpanded
		? (
		<Button outlined style={buttonStyles} onClick={props.displayConfiguration}>
		Configuration
		<Button outlined style={buttonStyles} onClick={() => props.expandDashboardConfig(true)}>
		Open
		</Button>
		)
		: null;

		const buttonClose = props.configurationType
		const buttonClose = props.dashboardConfigExpanded
		? (
		<Button outlined style={buttonStyles} onClick={props.hideConfiguration}>
		<Button outlined style={buttonStyles} onClick={() => props.expandDashboardConfig(false)}>
		Close
		</Button>
		)
		@@ -385,10 +392,14 @@ const DashboardConfiguration = (props) => {
		<Elevation z={2}
		style={{padding: 10, marginBottom: 10}}
		>

		<Grid>
		<GridCell span={10}>
		<GridCell span={11}>
		<div style={{marginBottom:10}}>
		<span className="mdc-typography--headline6">Dashboard Configuration</span>
		</div>
		</GridCell>
		<GridCell span={2}>
		<GridCell span={1}>
		{buttonConfig}
		{buttonClose}
		</GridCell>
		@@ -430,10 +441,10 @@ class DashboardContainer extends Component {
		this.keyForSvg = 0;

		this.state = {
		configurationType: null,
		sourceNodeId: '',
		nbSecondsToDisplay: 25,
		displayEdgeLabels: false
		displayEdgeLabels: false,
		slidingWindowStopped: false
		};

		this.epochs = [];
		@@ -460,7 +471,13 @@ class DashboardContainer extends Component {
		}


		stopSlidingWindow() {
		this.setState({slidingWindowStopped: true});
		}

		startSlidingWindow() {
		this.setState({slidingWindowStopped: false});
		}

		render() {

		@@ -606,12 +623,8 @@ class DashboardContainer extends Component {

		<DashboardConfiguration
		showConfig={this.props.showConfig}
		configurationType={this.state.configurationType}
		displayConfiguration={
		() => {
		this.setState({configurationType: MAIN_CONFIGURATION});
		}}
		hideConfiguration={() => {this.setState({configurationType: ''});}}
		dashboardConfigExpanded={this.props.dashboardConfigExpanded}
		expandDashboardConfig={(show) => this.props.expandDashboardConfig(show)}
		nodeIds={appIds}
		sourceNodeSelected={this.props.sourceNodeSelected}
		changeSourceNodeSelected={(nodeId) => this.props.changeSourceNodeSelected(appMap[nodeId])}
		@@ -665,6 +678,7 @@ const mapStateToProps = state => {
		metricsTimeIntervalDuration: state.exec.metrics.timeIntervalDuration,
		scenarioState: state.exec.state.scenario,
		showConfig: state.ui.showDashboardConfig,
		dashboardConfigExpanded: state.ui.dashboardConfigExpanded,
		view1Name: state.ui.dashboardView1,
		view2Name: state.ui.dashboardView2
		};
		@@ -677,7 +691,8 @@ const mapDispatchToProps = dispatch => {
		changeMetricsTimeIntervalDuration: (duration) => dispatch(execChangeMetricsTimeIntervalDuration(duration)),
		clearMetricsEpochs: () => dispatch(execClearMetricsEpochs()),
		changeView1: (name) => dispatch(uiExecChangeDashboardView1(name)),
		changeView2: (name) => dispatch(uiExecChangeDashboardView2(name))
		changeView2: (name) => dispatch(uiExecChangeDashboardView2(name)) ,
		expandDashboardConfig: (expand) => dispatch(uiExecExpandDashboardConfig(expand))
		};
		};

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

+11 −6

Original line number	Diff line number	Diff line
		@@ -16,10 +16,6 @@

		import { updateObject } from '../../util/object-util';

		import {
		createMeepState
		} from '../../util/meep-utils';

		// export const PAGE_CONFIGURE = 'page-configure-link';
		// export const PAGE_EXECUTE = 'page-execute-link';
		// export const PAGE_MONITOR = 'page-monitor-link';
		@@ -119,8 +115,6 @@ const uiExecChangeShowApps = (show) => {
		};
		};



		const UI_EXEC_CHANGE_SHOW_DASHBOARD_CONFIG = 'UI_EXEC_CHANGE_SHOW_DASHBOARD_CONFIG';
		const uiExecChangeShowDashboardConfig = (show) => {
		return {
		@@ -129,6 +123,14 @@ const uiExecChangeShowDashboardConfig = (show) => {
		};
		};

		const UI_EXEC_CHANGE_EXPAND_DASHBOARD_CONFIG = 'UI_EXEC_CHANGE_EXPAND_DASHBOARD_CONFIG';
		const uiExecExpandDashboardConfig = (show) => {
		return {
		type: UI_EXEC_CHANGE_EXPAND_DASHBOARD_CONFIG,
		payload: show
		};
		};

		const UI_EXEC_CHANGE_DASHBOARD_VIEW1 = 'UI_EXEC_CHANGE_DASHBOARD_VIEW1';
		const uiExecChangeDashboardView1 = (name) => {
		return {
		@@ -179,6 +181,7 @@ export {
		UI_EXEC_CHANGE_DASHBOARD_VIEW1,
		UI_EXEC_CHANGE_DASHBOARD_VIEW2,
		uiExecChangeShowDashboardConfig,
		uiExecExpandDashboardConfig,
		uiExecChangeDashboardView1,
		uiExecChangeDashboardView2
		};
		@@ -221,6 +224,8 @@ export default function uiReducer(state = initialState, action) {
		return updateObject(state, {refreshInterval: action.payload});
		case UI_EXEC_CHANGE_SHOW_APPS:
		return updateObject(state, {execShowApps: action.payload});
		case UI_EXEC_CHANGE_EXPAND_DASHBOARD_CONFIG:
		return updateObject(state, {dashboardConfigExpanded: action.payload});
		case UI_EXEC_CHANGE_SHOW_DASHBOARD_CONFIG:
		return updateObject(state, {showDashboardConfig: action.payload});
		case UI_EXEC_CHANGE_DASHBOARD_VIEW1:

js-apps/meep-frontend/src/js/util/meep-utils.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -29,6 +29,7 @@ export const createMeepState = ({ui}) => {
		refreshInterval: 1000,
		execShowApps: false,
		showDashboardConfig: false,
		dashboardConfigExpanded: false,
		dashboardView1: VIS_VIEW,
		dashboardView2: VIEW_NAME_NONE
		},