Start and Stop functions for line chart. Choosing time interval duration displayed on line charts (69ee711a) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/src/js/components/helper-components/nc-group.js

+58 −6

Original line number	Diff line number	Diff line
		@@ -75,8 +75,11 @@ import {
		PREFIX_EDGE_FOG,
		PREFIX_TERM_LINK,
		PREFIX_LINK,
		PREFIX_APP
		PREFIX_APP,

		// NC Group Layouts
		MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT,
		MEEP_COMPONENT_TABLE_LAYOUT
		} from '../../meep-constants';

		const MIN_LATENCY_VALUE = 0;
		@@ -158,6 +161,8 @@ const validateThroughput = (val) => {
		return null;
		};



		const TableLayout = (props) => {
		return (
		<div>
		@@ -165,6 +170,7 @@ const TableLayout = (props) => {
		<GridCell span="6">
		{props.latencyComponent}
		</GridCell>

		<GridCell span="6">
		{props.latencyVariationComponent}
		</GridCell>
		@@ -174,6 +180,7 @@ const TableLayout = (props) => {
		<GridCell span="6">
		{props.packetLossComponent}
		</GridCell>

		<GridCell span="6">
		{props.throughputComponent}
		</GridCell>
		@@ -182,6 +189,38 @@ const TableLayout = (props) => {
		);
		};

		const SingleColumnLayout = (props) => {
		return (
		<div>
		<Grid>
		<GridCell span="12">
		{props.latencyComponent}
		</GridCell>

		</Grid>

		<Grid>
		<GridCell span="12">
		{props.latencyVariationComponent}
		</GridCell>
		</Grid>

		<Grid style={{marginBottom: 10}}>
		<GridCell span="12">
		{props.packetLossComponent}
		</GridCell>
		</Grid>

		<Grid style={{marginBottom: 10}}>

		<GridCell span="12">
		{props.throughputComponent}
		</GridCell>
		</Grid>
		</div>
		);
		};

		const LineLayout = (props) => {
		return (
		<div>
		@@ -203,9 +242,22 @@ const LineLayout = (props) => {
		);
		};

		// const NCLayout = (props) => (
		// <TableLayout {...props} />
		// );
		const NCLayout = (props) => {
		switch(props.layout) {
		case MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT:
		return (
		<SingleColumnLayout {...props} />
		);
		case MEEP_COMPONENT_TABLE_LAYOUT:
		return (
		<TableLayout {...props} />
		);
		default:
		return (
		<TableLayout {...props} />
		);
		}
		};

		const NCGroup = ({prefix, onUpdate, element}) => {
		const formLabel = (valueName) => {
		@@ -347,13 +399,13 @@ const NCGroup = ({prefix, onUpdate, element}) => {
		);

		return (
		<TableLayout
		<NCLayout
		latencyComponent={latencyComponent}
		latencyVariationComponent={latencyVariationComponent}
		packetLossComponent={packetLossComponent}
		throughputComponent={throughputComponent}
		>
		</TableLayout>
		</NCLayout>
		);
		};

js-apps/meep-frontend/src/js/containers/cfg/cfg-network-element-container.js

+5 −1

Original line number	Diff line number	Diff line
		@@ -117,7 +117,10 @@ import {
		CFG_ELEM_EGRESS_SVC_MAP,

		CFG_BTN_NEW_ELEM,
		CFG_BTN_DEL_ELEM
		CFG_BTN_DEL_ELEM,

		// Layout type
		MEEP_COMPONENT_TABLE_LAYOUT
		} from '../../meep-constants';


		@@ -475,6 +478,7 @@ const NCGroups = ({prefixes, onUpdate, element}) => {
		element={element}
		prefix={p}
		key={p}
		layout={MEEP_COMPONENT_TABLE_LAYOUT}
		/>
		);
		});

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

+112 −14

Original line number	Diff line number	Diff line
		@@ -6,6 +6,7 @@ import { Elevation } from '@rmwc/elevation';
		// import ReactDOM from 'react-dom';
		import { Button } from '@rmwc/button';
		import { Checkbox } from '@rmwc/checkbox';
		import { Slider } from '@rmwc/slider';
		import moment from 'moment';
		import * as d3 from 'd3';
		import axios from 'axios';
		@@ -17,6 +18,7 @@ import IDSelect from '../components/helper-components/id-select';
		import IDCVis from './idc-vis';
		import ResizeableContainer from './resizeable-container';


		import {
		idlog
		} from '../util/functional';
		@@ -33,7 +35,9 @@ import {
		import {
		execFakeChangeSelectedDestination,
		execChangeSourceNodeSelected,
		execAddMetricsEpoch
		execAddMetricsEpoch,
		execChangeMetricsTimeIntervalDuration,
		execClearMetricsEpochs
		} from '../state/exec';

		import {
		@@ -88,8 +92,54 @@ const epochsToSeries = (epochs) => {
		return series;
		};

		const TimeIntervalConfig = (props) => {
		let PauseResumeButton = null;
		if (props.metricsPollingStopped) {
		PauseResumeButton = () => (
		<Button outlined
		onClick={() => props.startMetricsPolling()}
		>
		RESUME
		</Button>
		);
		} else {
		PauseResumeButton = () => (
		<Button outlined
		onClick={() => props.stopMetricsPolling()}
		>
		PAUSE
		</Button>
		);
		}
		return (
		<div>
		<Grid>
		<GridCell span={3}>
		<Slider
		value={props.value}
		onChange={e => props.timeIntervalDurationChanged(e.detail.value)}
		discrete
		min={5}
		max={60}
		step={1}
		/>
		</GridCell>
		<GridCell span={1}>

		</GridCell>
		<GridCell span={8}>
		<PauseResumeButton />
		</GridCell>
		</Grid>
		</div>


		);
		};

		const ConfigurationView = (props) => {
		return (
		<>
		<Grid>
		<GridCell span={2}>
		<IDSelect
		@@ -135,7 +185,13 @@ const ConfigurationView = (props) => {
		<GridCell span={1}>
		</GridCell>
		</Grid>

		<TimeIntervalConfig
		timeIntervalDurationChanged={(value) => {props.timeIntervalDurationChanged(value);}}
		stopMetricsPolling={props.stopMetricsPolling}
		startMetricsPolling={props.startMetricsPolling}
		metricsPollingStopped={props.metricsPollingStopped}
		/>
		</>
		);
		};

		@@ -302,6 +358,10 @@ const DashboardConfiguration = (props) => {
		changeSourceNodeSelected={props.changeSourceNodeSelected}
		changeDisplayEdgeLabels={props.changeDisplayEdgeLabels}
		displayEdgeLabels={props.displayEdgeLabels}
		timeIntervalDurationChanged={props.timeIntervalDurationChanged}
		stopMetricsPolling={props.stopMetricsPolling}
		startMetricsPolling={props.startMetricsPolling}
		metricsPollingStopped={props.metricsPollingStopped}
		/>
		);
		}
		@@ -378,15 +438,13 @@ class DashboardContainer extends Component {
		nbSecondsToDisplay: 25,
		displayEdgeLabels: false
		};

		this.epochs = [];
		}

		componentDidMount() {
		this.epochCount = 0;
		const nextData = () => {
		this.epochCount += 1;
		this.fetchMetrics();
		};
		this.dataTimer = setInterval(nextData, 1000);
		clearInterval(this.dataTimer);
		this.startMetricsPolling();
		}

		componentWillUnmount() {
		@@ -430,7 +488,40 @@ class DashboardContainer extends Component {
		this.setState({displayEdgeLabels: val});
		}

		changeMetricsTimeIntervalDuration(duration) {
		this.props.changeMetricsTimeIntervalDuration(duration);
		}

		stopMetricsPolling() {
		// clearInterval(this.dataTimer);
		this.setState({metricsPollingStopped: true});
		}
		startMetricsPolling() {
		// this.props.clearMetricsEpochs();
		this.epochCount = 0;
		const nextData = () => {
		this.epochCount += 1;
		this.fetchMetrics();
		};

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

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


		render() {

		let epochs = null;
		if (!this.state.metricsPollingStopped) {
		this.epochs = this.props.epochs.slice();
		epochs = this.epochs;
		} else {
		epochs = this.epochs;
		}

		this.keyForSvg++;
		const root = this.getRoot();
		const nodes = root.descendants();
		@@ -460,11 +551,11 @@ class DashboardContainer extends Component {
		};

		// Determine first and last epochs
		const firstEpoch = this.props.epochs.length ? this.props.epochs[0] : {
		const firstEpoch = epochs.length ? epochs[0] : {
		data: [],
		startTime: null
		};
		let lastEpoch = this.props.epochs.length ? this.props.epochs.slice(-1)[0] : {
		let lastEpoch = epochs.length ? epochs.slice(-1)[0] : {
		data: [],
		startTime: null
		};
		@@ -472,7 +563,7 @@ class DashboardContainer extends Component {
		// Determine startTime of first epoch and endTime of last epoch
		const startTime = firstEpoch.data.length ? firstEpoch.startTime : null;
		const endTime = lastEpoch.data.length ? moment(lastEpoch.startTime).add(1, 'seconds').format(TIME_FORMAT) : null;
		const series = epochsToSeries(this.props.epochs, selectedSource);
		const series = epochsToSeries(epochs, selectedSource);

		const withTypeAndSource = type => source => point => {
		return point.dataType === type && point.src === source;
		@@ -491,7 +582,7 @@ class DashboardContainer extends Component {
		// Mobility events
		const extractPointsOfType = type => epoch => epoch.data.filter(isDataPointOfType(type));
		const extractMobilityEvents = extractPointsOfType(MOBILITY_EVENT);
		const mobilityEvents = this.props.epochs.flatMap(extractMobilityEvents);
		const mobilityEvents = epochs.flatMap(extractMobilityEvents);

		if (mobilityEvents.length) {
		// console.log('Some mobility events ...');
		@@ -573,6 +664,10 @@ class DashboardContainer extends Component {
		nodeIds={appIds}
		sourceNodeSelected={this.props.sourceNodeSelected}
		changeSourceNodeSelected={(nodeId) => this.props.changeSourceNodeSelected(appMap[nodeId])}
		timeIntervalDurationChanged={(duration) => {this.changeMetricsTimeIntervalDuration(duration);}}
		stopMetricsPolling={() => this.stopMetricsPolling()}
		startMetricsPolling={() => this.startMetricsPolling()}
		metricsPollingStopped={this.state.metricsPollingStopped}
		dashboardViewsList={DASHBOARD_VIEWS_LIST}
		changeView1={(viewName) => this.changeView1(viewName)}
		changeView2={(viewName) => this.changeView2(viewName)}
		@@ -615,7 +710,8 @@ const mapStateToProps = state => {
		epochs: state.exec.metrics.epochs,
		sourceNodeSelected: state.exec.metrics.sourceNodeSelected,
		dataTypeSelected: state.exec.metrics.dataTypeSelected,
		eventCreationMode: state.exec.eventCreationMode
		eventCreationMode: state.exec.eventCreationMode,
		metricsTimeIntervalDuration: state.exec.metrics.timeIntervalDuration
		};
		};

		@@ -623,7 +719,9 @@ const mapDispatchToProps = dispatch => {
		return {
		changeSelectedDestination: (dest) => dispatch(execFakeChangeSelectedDestination(dest)),
		changeSourceNodeSelected: (src) => dispatch(execChangeSourceNodeSelected(src)),
		addMetricsEpoch: (epoch) => dispatch(execAddMetricsEpoch(epoch))
		addMetricsEpoch: (epoch) => dispatch(execAddMetricsEpoch(epoch)),
		changeMetricsTimeIntervalDuration: (duration) => dispatch(execChangeMetricsTimeIntervalDuration(duration)),
		clearMetricsEpochs: () => dispatch(execClearMetricsEpochs())
		};
		};

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

+5 −1

Original line number	Diff line number	Diff line
		@@ -57,7 +57,10 @@ import {
		PREFIX_EDGE_FOG,
		PREFIX_TERM_LINK,
		PREFIX_LINK,
		PREFIX_APP
		PREFIX_APP,

		// Layout type
		MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT

		} from '../../meep-constants';

		@@ -351,6 +354,7 @@ class NetworkCharacteristicsEventPane extends Component {
		</Grid>

		<NCGroup
		layout={MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT}
		onUpdate={(name, val, err) => {this.onUpdateElement(name, val, err);}}
		parent={this}
		element={element}

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

+4 −0

Original line number	Diff line number	Diff line
		@@ -201,6 +201,10 @@ export const PREFIX_TERM_LINK = 'Terminal Link';
		export const PREFIX_LINK = 'Link';
		export const PREFIX_APP = 'Application';

		// Types of layout for components
		export const MEEP_COMPONENT_TABLE_LAYOUT = 'MEEP_COMPONENT_TABLE_LAYOUT';
		export const MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT = 'MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT';

		export const id = (label) => {
		return '#' + label;
		};