Merge pull request #35 from renaudmx/fr_sp_29 (b51e524f) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

go-apps/meep-ctrl-engine/server/ctrl-engine.go

+2 −2

Original line number	Diff line number	Diff line
		@@ -952,8 +952,8 @@ func sendEventMobility(event Event) (string, int) {
		log.WithFields(log.Fields{
		"meep.log.component": "ctrl-engine",
		"meep.log.msgType": "mobilityEvent",
		"meep.log.oldLoc": oldLocName,
		"meep.log.newLoc": newLocName,
		"meep.log.oldPoa": oldLocName,
		"meep.log.newPoa": newLocName,
		"meep.log.src": elemName,
		"meep.log.dest": elemName,
		}).Info("Measurements log")

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

+48 −4

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ import { Slider } from '@rmwc/slider';
		import moment from 'moment';
		import * as d3 from 'd3';

		import { blue } from './graph-utils';
		import IDCLineChart from './idc-line-chart';
		import IDCGraph from './idc-graph';
		import IDCAppsView from './idc-apps-view';
		@@ -434,6 +435,46 @@ const removeDuplicatePoints = sequence => {
		return newSequence;
		};

		const eventLogStyle = {
		padding: 10,
		marginTop: 10,
		marginLeft: 10,
		marginRight: 10,
		marginBottom: 10,
		border: '1px solid #e4e4e4',
		count: {color: blue},
		eventName: {color: '#6e6e6e'},
		arrow: {color: '#6e6e6e'},
		element: {color: blue}
		};

		// let eventCount=0;
		const EventLog = (props) => {
		// TODO: generalize function for other types of events.
		// Now it creates a description for Mobility Events
		const descriptionFromEvent = (event) => {
		// eventCount++;
		return (
		<div key={event.mobilityEventIndex}>
		<span style={eventLogStyle.count}>{event.mobilityEventIndex}.</span>
		<span style={eventLogStyle.eventName}>{' Mobility: '}</span>
		<span style={eventLogStyle.element}>{` ${event.src} `}</span>
		<span style={eventLogStyle.arrow}>{' -> '}</span>
		<span style={eventLogStyle.element}>{` ${event.dest}`}</span>
		</div>
		);
		};
		return (
		<>
		<span className="mdc-typography--headline8" style={{marginLeft: 10}}>Events
		</span>
		<div style={eventLogStyle}>
		{props.events.map(descriptionFromEvent)}
		</div>
		</>
		);
		};

		class DashboardContainer extends Component {
		constructor(props) {
		super(props);
		@@ -551,10 +592,6 @@ class DashboardContainer extends Component {
		const extractMobilityEvents = extractPointsOfType(ME_MOBILITY_EVENT);
		const mobilityEvents = epochs.flatMap(extractMobilityEvents);

		if (mobilityEvents.length) {
		// console.log('Some mobility events ...');
		}


		// const height = 600;

		@@ -618,6 +655,12 @@ class DashboardContainer extends Component {
		</ViewForName>
		);

		const EventLogComponent = () => (
		<EventLog
		events={mobilityEvents}
		/>
		);

		return (
		<>

		@@ -657,6 +700,7 @@ class DashboardContainer extends Component {
		style={{padding: 10}}
		>
		{view2}
		<EventLogComponent />
		</Elevation>
		</GridCell>

js-apps/meep-frontend/src/js/containers/idc-line-chart.js

+15 −4

Original line number	Diff line number	Diff line
		@@ -17,6 +17,7 @@
		import _ from 'lodash';
		import * as d3 from 'd3';
		import React from 'react';
		import uuid from 'uuid';
		import {Axis, axisPropsFromTickScale, LEFT, BOTTOM} from 'react-d3-axis';
		import { ME_LATENCY_METRICS, ME_THROUGHPUT_METRICS } from '../meep-constants';
		import { blue } from './graph-utils';
		@@ -38,7 +39,7 @@ const IDCLineChart = (props) => {
		// const width = props.width; // - margin.left - margin.right;
		const height = props.height; // - margin.top - margin.bottom;

		const maxForKey = series => key => d3.max(series[key], p => p.value);
		const maxForKey = series => key => d3.max(series[key], p => p.value) \|\| 0;
		const maxes = Object.keys(props.series).map(maxForKey(props.series));
		const max = d3.max(maxes);
		const maxOfYScale = Math.ceil(max/50.0) * 50.0;
		@@ -112,20 +113,30 @@ const IDCLineChart = (props) => {
		const chartTitle = chartTitleForType(props.dataType);

		const axisWidthOffset = 12;
		const meX = d => x(new Date(d.timestamp)) + axisWidthOffset;
		const yOffset = 15;
		const meX = d => x(new Date(d.timestamp)) + axisWidthOffset + margin.left;

		const mobilityEventLine = me => `M${meX(me) + margin.left},${y(yRange[1]) + margin.top} L${meX(me) + margin.left},${y(yRange[0]) + margin.top}`;
		const mobilityEventLine = me => `M${meX(me)},${y(yRange[1]) + margin.top + yOffset} L${meX(me)},${y(yRange[0]) + margin.top}`;
		const mobilityTrianglePolygonPoints = me => {
		const y_ = y(yRange[1]) + margin.top + yOffset;
		return `${meX(me) - 5},${y_} ${meX(me) + 5},${y_} ${meX(me)},${y_ + 10}`;
		};
		const mobilityEventText = me => `ME from ${me.src} to ${me.dest}`;

		const mobilityEventLines = props.mobilityEvents.map(me => {

		return (
		<>
		<text textAnchor='middle' fontSize='small' fill={blue} x={meX(me)} y={ y(yRange[1]) + margin.top + yOffset - 3} class="small">{me.mobilityEventIndex}</text>
		<polygon key={uuid()} points={mobilityTrianglePolygonPoints(me)} style={{fill:blue, stroke:blue, strokeWidth:1}}/>
		<path
		className='mobilityEventLine'
		d={mobilityEventLine(me)}
		id={me.timestamp}
		id={uuid()}
		key={me.timestamp}
		style={{stroke: blue, strokeWidth: 2, fill: 'none', textAnchor: 'middle'}}
		/>
		</>
		);
		});

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

+5 −2

Original line number	Diff line number	Diff line
		@@ -21,6 +21,9 @@ 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,
		@@ -165,7 +168,7 @@ class SettingsPageContainer extends Component {
		title='Development'
		stateItem={this.props.devMode}
		changeStateItem={this.props.changeDevMode}
		stateItemName='Development mode'
		stateItemName={VIS_CONFIGURATION_MODE_LABEL}
		/>
		</GridCell>
		<GridCell span={6}>
		@@ -173,7 +176,7 @@ class SettingsPageContainer extends Component {
		title='Dashboard Config'
		stateItem={this.props.showDashboardConfig}
		changeStateItem={this.props.changeShowDashboardConfig}
		stateItemName='Show Dashboard Config'
		stateItemName={SHOW_DASHBOARD_CONFIG_LABEL}
		/>
		</GridCell>
		</Grid>

js-apps/meep-frontend/src/js/middlewares/fix-metrics-values-middleware.js

+6 −0

Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@ import {
		// Compute avg for each triplet src, dest, dataType
		// Create point for each triplet and fill it with avg time and avg value

		let mobilityEventIndex=1;
		const mergeEpochPoints = epoch => {
		let pointsMap = epoch.data.reduce((acc, point) => {
		const key = `${point.src},${point.dest},${point.dataType}`;
		@@ -32,6 +33,11 @@ const mergeEpochPoints = epoch => {
		dataType: points[0].dataType
		};

		if (p.dataType === 'mobilityEvent') {
		p.dest = points[0].data.newPoa;
		p.mobilityEventIndex = mobilityEventIndex++;
		}

		return p;
		});