demo1: removed unused code + fixed image sizing issues (03af7446) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

examples/demo1/src/demo-frontend/src/css/demo-svc.scss

+51 −45

Original line number	Diff line number	Diff line
		@@ -15,8 +15,8 @@
		*/

		// Set IDCC color theme
		$mdc-theme-primary: #379DD8;
		$mdc-theme-secondary: #FF9800;
		$mdc-theme-primary: #379dd8;
		$mdc-theme-secondary: #ff9800;
		$mdc-theme-background: #fff;

		// Set default margin to 0px
		@@ -76,7 +76,7 @@ select {
		// padding-bottom: 4px;
		// }
		#idcc-title {
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
		font-size: 22px;
		}
		#page-status {
		@@ -92,6 +92,16 @@ select {
		padding-left: 16px;
		}

		// Image
		.img-wrap {
		height: 100%;
		width: 100%;
		overflow: hidden;
		}
		#demo-svc-app-pic {
		height: 100%;
		}

		// IDCC Styles

		.idcc-button {
		@@ -110,6 +120,9 @@ select {
		.idcc-fullwidth {
		width: 100%;
		}
		.idcc-fullheight {
		height: 100%;
		}
		.idcc-width-40 {
		width: 40px;
		}
		@@ -119,12 +132,5 @@ select {
		}
		.idcc-status-ra {
		font-weight: bold;
		color: #FF8000;
		}


		// Map
		#map {
		height: 60vh;
		width: 100%;
		color: #ff8000;
		}

examples/demo1/src/demo-frontend/src/index.html

+95 −69

Original line number	Diff line number	Diff line
		@@ -15,6 +15,7 @@ limitations under the License.
		-->
		<!doctype html>
		<html lang="en">

		<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		@@ -51,7 +52,8 @@ limitations under the License.
		<header id="idcc-toolbar" class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-elevation--z4">
		<div class="mdc-top-app-bar__row">
		<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
		<img id="idcc-logo" class="idcc-toolbar-menu mdc-top-app-bar__navigation-icon" src="img/ID-Icon-01-idcc.svg" alt="">
		<img id="idcc-logo" class="idcc-toolbar-menu mdc-top-app-bar__navigation-icon"
		src="img/ID-Icon-01-idcc.svg" alt="">
		<span id="idcc-title" class="mdc-top-app-bar__title catalog-title">AdvantEDGE Demo Service</span>
		</section>
		</div>
		@@ -67,8 +69,10 @@ limitations under the License.
		<div class="mdc-layout-grid">
		<div class="mdc-layout-grid__inner">
		<div class="mdc-layout-grid__cell--span-3 idcc-elevated-area mdc-elevation--z2">
		<div id="targeted-ue-name-tf-div" class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-name-tf" class="mdc-text-field__input" aria-controls="targeted-ue-name-validation-message">
		<div id="targeted-ue-name-tf-div"
		class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-name-tf" class="mdc-text-field__input"
		aria-controls="targeted-ue-name-validation-message">
		<label for="targeted-ue-name-tf" class="mdc-floating-label">Targeted UE Name</label>
		<div class="mdc-notched-outline">
		<svg>
		@@ -77,9 +81,12 @@ limitations under the License.
		</div>
		<div class="mdc-notched-outline__idle"></div>
		</div>
		<div id="targeted-ue-app-name-1-tf-div" class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-app-name-1-tf" class="mdc-text-field__input" aria-controls="targeted-ue-app-name-validation-message">
		<label for="targeted-ue-app-name-1-tf" class="mdc-floating-label">Targeted UE App Name</label>
		<div id="targeted-ue-app-name-1-tf-div"
		class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-app-name-1-tf" class="mdc-text-field__input"
		aria-controls="targeted-ue-app-name-validation-message">
		<label for="targeted-ue-app-name-1-tf" class="mdc-floating-label">
		Targeted UE App Name</label>
		<div class="mdc-notched-outline">
		<svg>
		<path class="mdc-notched-outline__path" />
		@@ -87,9 +94,12 @@ limitations under the License.
		</div>
		<div class="mdc-notched-outline__idle"></div>
		</div>
		<div id="targeted-ue-app-name-2-tf-div" class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-app-name-2-tf" class="mdc-text-field__input" aria-controls="targeted-ue-app-name-validation-message">
		<label for="targeted-ue-app-name-2-tf" class="mdc-floating-label">Targeted UE App Name</label>
		<div id="targeted-ue-app-name-2-tf-div"
		class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="text" id="targeted-ue-app-name-2-tf" class="mdc-text-field__input"
		aria-controls="targeted-ue-app-name-validation-message">
		<label for="targeted-ue-app-name-2-tf" class="mdc-floating-label">
		Targeted UE App Name</label>
		<div class="mdc-notched-outline">
		<svg>
		<path class="mdc-notched-outline__path" />
		@@ -99,67 +109,91 @@ limitations under the License.
		</div>

		<div>
		<BR><div class="mdc-typography--headline6">Service Information</div>
		<BR>
		<div class="mdc-typography--headline6">Service Information</div>

		<table class="idcc-margin-top">
		<tr>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">Name:<font color="white">...............</font></span></td>
		<td><span id="svc-info-name" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">
		Name:<font color="white">...............</font></span></td>
		<td><span id="svc-info-name"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		</table>
		</div>
		<div>
		<BR><div class="mdc-typography--headline6">Node Information</div>
		<BR>
		<div class="mdc-typography--headline6">Node Information</div>

		<table class="idcc-margin-top">
		<tr>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">Instance Name:</span></td>
		<td><span id="node-svc-info-name" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">
		Instance Name:</span></td>
		<td><span id="node-svc-info-name"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		<tr>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">IP :</span></td>
		<td><span id="node-svc-info-ip" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="node-svc-info-ip"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		</table>
		</div>
		<div>
		<BR><div class="mdc-typography--headline6">UEs Location</div>
		<BR>
		<div class="mdc-typography--headline6">UEs Location</div>

		<table class="idcc-margin-top">
		<tr>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">Name<font color="white">....</font></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">Location (Zone / POA)<font color="white">....</font></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">
		Name<font color="white">....</font></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">
		Location (Zone / POA)<font color="white">....</font></span></td>
		</tr>
		<tr>
		<td><span id="demo-svc-loc-serv-address-1" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-location-1" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-address-1"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-location-1"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		<tr>
		<td><span id="demo-svc-loc-serv-address-2" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-location-2" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-address-2"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span id="demo-svc-loc-serv-location-2"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		</table>
		</div>
		<div>
		<BR><div class="mdc-typography--headline6">Application Statistics</div>
		<BR>
		<div class="mdc-typography--headline6">Application Statistics</div>

		<table class="idcc-margin-top">
		<tr>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">State Counter:<font color="white">....</font></span></td>
		<td><span id="demo-svc-info-duration" class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		<td><span class="idcc-margin-left mdc-typography--subtitle1">
		State Counter:<font color="white">....</font></span></td>
		<td><span id="demo-svc-info-duration"
		class="idcc-margin-left mdc-typography--subtitle1"></span></td>
		</tr>
		</table>
		</div>
		<div>
		<div class="mdc-typography--headline6"></div>
		<br>
		<center><button id="start-demo-svc-button" class="idcc-button mdc-button mdc-button--raised mdc-button--dense">RESTART COUNTER</button></center>
		<center>
		<button id="start-demo-svc-button"
		class="idcc-button mdc-button mdc-button--raised mdc-button--dense">
		RESTART COUNTER
		</button>
		</center>
		</div>
		<div>
		<BR><div class="mdc-typography--headline6">Traffic Generator*</div>
		<BR>
		<div class="mdc-typography--headline6">Traffic Generator*</div>
		</div>
		<div id="iperf-bw-tf-div" class="idcc-fullwidth mdc-text-field mdc-text-field--outlined">
		<input type="number" id="iperf-bw-tf" class="mdc-text-field__input" aria-controls="iperf-bw-validation-message">
		<input type="number" id="iperf-bw-tf" class="mdc-text-field__input"
		aria-controls="iperf-bw-validation-message">
		<label for="iperf-bw-tf" class="mdc-floating-label">Traffic Bandwidth (in Mbps)</label>

		<div class="mdc-notched-outline">
		@@ -172,17 +206,29 @@ limitations under the License.
		<div>
		<div class="mdc-typography--headline6"></div>
		<br>
		<center><button id="start-demo-iperf-button" class="idcc-button mdc-button mdc-button--raised mdc-button--dense">START TRAFFIC</button><button id="stop-demo-iperf-button" class="idcc-button mdc-button mdc-button--raised mdc-button--dense">STOP TRAFFIC</button></center>
		<center>
		<button id="start-demo-iperf-button"
		class="idcc-button mdc-button mdc-button--raised mdc-button--dense">
		START TRAFFIC
		</button>
		<button id="stop-demo-iperf-button"
		class="idcc-button mdc-button mdc-button--raised mdc-button--dense">
		STOP TRAFFIC
		</button>
		</center>
		</div>
		<div>* only enabled while app is running</div>
		</div>

		<div>
		<div
		class="mdc-layout-grid__cell--span-9 idcc-margin-left idcc-elevated-area mdc-elevation--z2">
		<div class="img-wrap">
		<img id="demo-svc-app-pic" src="" alt="">
		</div>
		</div>
		</div>
		</div>
		</div>

		<!-- SETTINGS PAGE -->
		<div id="page-settings" class="idcc-page" hidden>
		@@ -192,11 +238,14 @@ limitations under the License.
		<div class="mdc-typography--headline6">General Settings</div>

		<div>
		<span class="idcc-margin-left mdc-typography--subtitle1">Drone information table refresh interval:</span>
		<span class="idcc-margin-left mdc-typography--subtitle1">Refresh interval:</span>

		<div id="refresh-interval-form-div">
		<div id="refresh-interval-tf-div" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense" data-demo-no-auto-js>
		<input type="number" id="refresh-interval-tf" class="mdc-text-field__input" aria-controls="name-validation-message">
		<div id="refresh-interval-tf-div"
		class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense"
		data-demo-no-auto-js>
		<input type="number" id="refresh-interval-tf" class="mdc-text-field__input"
		aria-controls="name-validation-message">
		<label for="refresh-interval-tf" class="mdc-floating-label">Interval (ms)</label>
		<div class="mdc-notched-outline">
		<svg>
		@@ -205,41 +254,18 @@ limitations under the License.
		</div>
		<div class="mdc-notched-outline__idle"></div>
		</div>
		<p id="refresh-interval-validation-message" class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
		<p id="refresh-interval-validation-message"
		class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
		<!-- beautify ignore:start -->
		500 < value < 60000
		<!-- beautify ignore:end -->
		</p>
		</div>
		</div>

		<div>
		<span class="idcc-margin-left mdc-typography--subtitle1">Drone map style:</span>

		<div id="map-layer-select-div" class="idcc-margin-left mdc-layout-grid__cell--span-6 mdc-select mdc-select--outlined">
		<select id="map-layer-select" class="mdc-select__native-control">
		<option value="Road">Road (static)</option>
		<option value="RoadOnDemand">Road (dynamic)</option>
		<option value="Aerial" selected>Aerial</option>
		<option value="AerialWithLabels">Aerial with labels</option>
		<option value="collinsBart">Collins Bart</option>
		<option value="ordnanceSurvey">Ordnance Survey</option>
		</select>
		<label class="mdc-floating-label mdc-floating-label--float-above">Map Style</label>
		<div class="mdc-notched-outline">
		<svg>
		<path class="mdc-notched-outline__path"></path>
		</svg>
		</div>
		<div class="mdc-notched-outline__idle"></div>
		<!-- <div class="mdc-line-ripple"></div> -->
		</div>
		</div>

		</div>

		</div>

		</main>
		</div>

		</body>

		</html>
		No newline at end of file

examples/demo1/src/demo-frontend/src/js/demo-svc.js

+21 −65

Original line number	Diff line number	Diff line
		@@ -24,11 +24,6 @@ import * as $ from 'jquery';
		import 'material-design-icons';
		import * as mdc from 'material-components-web';

		import React from 'react';
		import ReactDOM from 'react-dom';
		import classNames from 'classnames';
		import Toolbar from '@material-ui/core/Toolbar';

		// Import JS dependencies
		import * as demoSvcRestApiClient from '../../../demo-client/js/src/index.js';
		import * as iperfTransitRestApiClient from '../../../iperf-proxy-client/js/src/index.js';
		@@ -45,26 +40,17 @@ import * as im6 from '../img/azone2-edge1-svc.jpg';
		const PAGE_STATUS = 'page-status-link';
		const PAGE_SETTINGS = 'page-settings-link';

		const STATUS_OK = 'No Conflict';
		const STATUS_RA = 'Active Resolution Advisory';

		const DEFAULT_REFRESH_INTERVAL_MS = 1000;


		// Variables
		var drawer;
		var refreshIntervalTextfield;
		var refreshInterval = DEFAULT_REFRESH_INTERVAL_MS;
		var refreshIntervalTimer;
		var mapLayerSelect;
		var mapLayers = [];
		var map;
		var targetedUeNameDialogTextfield;
		var targetedUeAppNameDialogTextfield1;
		var targetedUeAppNameDialogTextfield2;
		var iperfBwDialogTextfield;


		// MEEP Controller REST API JS client
		var basepath = 'http://' + location.host + location.pathname + 'v1/';
		console.log("basepath: " + basepath);
		@@ -127,7 +113,6 @@ function showTrafficGenerator() {
		$('#stop-demo-iperf-button').show();
		}


		/**
		* Callback function to receive the result of the getUserInfo operation.
		* @callback module:api/userApi~getUserInfoCallback
		@@ -220,6 +205,7 @@ function demoIperfOnButtonCb(error, data, response) {
		console.log("response successful");
		}
		}

		function demoIperfOffButtonCb(error, data, response) {
		console.log("Received iperf OFF response");

		@@ -300,7 +286,6 @@ function initializeUI() {
		defaultUserInfo1("ue1", "zone1 / zone1-poa1")
		defaultUserInfo2("ue2-ext", "zone1 / zone1-poa1")


		iperfBwDialogTextfield = new mdc.textField.MDCTextField(document.querySelector('#iperf-bw-tf-div'));
		iperfBwDialogTextfield.valid = true;

		@@ -324,7 +309,6 @@ function initializeUI() {
		ueStateApi.updateUeState(targetedUeNameDialogTextfield.value, ueState, genTrafficCb);

		var iperfInfo = new iperfTransitRestApiClient.IperfInfo();

		iperfInfo['name'] = targetedUeNameDialogTextfield.value;

		if (portApp != "31111") {
		@@ -334,7 +318,6 @@ function initializeUI() {
		}

		iperfInfo.throughput = iperfBwDialogTextfield.value;

		iperfInfoApi.handleIperfInfo(iperfInfo, demoIperfOnButtonCb);
		});
		// STOP TRAFFIC BUTTON
		@@ -348,7 +331,6 @@ function initializeUI() {
		ueStateApi.updateUeState(targetedUeNameDialogTextfield.value, ueState, genTrafficCb);

		var iperfInfo = new iperfTransitRestApiClient.IperfInfo();

		iperfInfo['name'] = targetedUeNameDialogTextfield.value;

		if (portApp != "31111") {
		@@ -358,12 +340,9 @@ function initializeUI() {
		}

		iperfInfo.throughput = "0"

		iperfInfoApi.handleIperfInfo(iperfInfo, demoIperfOffButtonCb);
		});



		// Set Status page
		setMainContent(PAGE_STATUS);

		@@ -386,7 +365,6 @@ function setMainContent(targetId) {

		// Refresh form field values here to update UI
		refreshIntervalTextfield.value = refreshIntervalTextfield.value;
		mapLayerSelect.value = mapLayerSelect.value;
		}
		}

		@@ -406,30 +384,12 @@ function startAutomaticRefresh() {
		}
		}

		// Stop automatic visualization updates
		function stopAutomaticRefresh() {
		console.log("Stopping automatic refresh");
		clearInterval(refreshIntervalTimer);
		}

		// Update Map layer visualization
		function setMapLayer(style) {
		console.log("Setting map style to: " + style);
		for (var i = 0; i < mapLayers.length; ++i) {
		if (mapLayers[i].type == 'TILE') {
		mapLayers[i].setVisible(MAP_STYLES[i] === style);
		}
		}
		}


		// Initialize variables and listeners when document ready
		$(document).ready(function () {

		// Initialize variables
		drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('#main-drawer'));
		refreshIntervalTextfield = new mdc.textField.MDCTextField(document.querySelector('#refresh-interval-tf-div'));
		mapLayerSelect = new mdc.select.MDCSelect(document.querySelector('#map-layer-select-div'));

		// Register event listeners
		$('.idcc-toolbar-menu').on('click', function () {
		@@ -453,10 +413,6 @@ $(document).ready(function () {
		startAutomaticRefresh();
		});

		$("#map-layer-select").change(function () {
		setMapLayer(this.value);
		});

		// Initialize UI
		initializeUI();
		});