configuration pane & app instance creation dialog cosmetic updates (d6022cf5) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox Frontend

js-apps/frontend/src/js/components/dialogs/create-new-app-dialog.js

+37 −40

Original line number	Diff line number	Diff line
		@@ -4,9 +4,9 @@

		import React, { Component } from 'react';
		import { TextField, TextFieldHelperText } from '@rmwc/textfield';
		import { Typography } from '@rmwc/typography';
		import { Select } from '@rmwc/select';
		import BasicDialog from './basic-dialog';
		import { Grid, GridCell } from '@rmwc/grid';
		import { DLG_CREATE_NEW_APP } from '../../app-constants';

		class CreateNewAppDialog extends Component {
		@@ -73,35 +73,31 @@ class CreateNewAppDialog extends Component {
		}
		cydata={DLG_CREATE_NEW_APP}
		>

		{ this.props.errorMsg &&
		<Typography use="body1" style={styles.errorText}>{this.props.errorMsg}</Typography>
		}

		<p/>
		<Typography use="body1">Unique name of the application instance</Typography><p/>
		<Grid style={{ marginBottom: 5 }}>
		<GridCell span={12}>
		<span style={styles.text}>
		Unique application instance name:
		</span>
		<TextField
		outlined
		style={{ width: '70%' }}
		style={{ width: '100%', marginTop: 5 }}
		label={'Application Name'}
		invalid={
		this.state.appErr
		}
		invalid={this.state.appErr ? true : false}
		value={this.state.appName}
		onChange={e => this.changeAppName(e.target.value)}
		/>
		<TextFieldHelperText validationMsg={true}>
		<span>{this.state.appErr}</span>
		</TextFieldHelperText>

		<Typography use="body1">MEC platform where the application instance is running</Typography>
		<p/>
		</GridCell>
		<GridCell span={12}>
		<span style={styles.text}>
		MEC platform where the application instance is running:
		</span>
		<Select
		title="Select a MEC platform"
		style={{ width: '70%' }}
		style={{ width: '100%', marginTop: 10 }}
		label="MEC platform"
		fullwidth="true"
		outlined
		disabled={false}
		value={this.state.mepName}
		options={this.props.mepNames}
		@@ -109,15 +105,16 @@ class CreateNewAppDialog extends Component {
		this.changeMepName(mepName.target.value);
		}}
		/>

		</GridCell>
		</Grid>
		</BasicDialog>
		);
		}
		}

		const styles = {
		errorText: {
		color: 'red'
		text: {
		color: 'gray'
		}
		};

js-apps/frontend/src/js/components/footer.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -23,7 +23,7 @@ const Footer = () => {
		<Grid style={{ backgroundColor: '#3e484f' }}>
		<GridCell span={2}/>
		<GridCell span={3} align={'middle'} style={styles.copyright}>
		<Typography use="body1">© Copyright 2020, ETSI</Typography>
		<Typography use="body1">© Copyright 2021, ETSI</Typography>
		</GridCell>
		<GridCell span={5} align={'middle'}>
		<div align={'right'}>

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

+2 −2

Original line number	Diff line number	Diff line
		@@ -1087,7 +1087,7 @@ class AppContainer extends Component {
		}}
		/>
		<ConfirmDeleteAppDialog
		title='Application instance deletion'
		title='Delete application instance'
		open={this.props.currentDialog === DIALOG_CONFIRM_DELETE_APP}
		onSubmit={() => {
		this.deleteAppInstances();
		@@ -1097,7 +1097,7 @@ class AppContainer extends Component {
		}}
		/>
		<CreateNewAppDialog
		title='Application instance creation'
		title='Create application instance'
		open={this.props.currentDialog === DIALOG_CREATE_NEW_APP}
		onSubmit={param => this.createAppInstance(param)}
		onClose={() => {

js-apps/frontend/src/js/containers/sandbox/api-pane.js

+6 −0

Original line number	Diff line number	Diff line
		@@ -157,6 +157,12 @@ class ApiPane extends Component {
		dropDownName = 'Radio Network Information (012)';
		break;
		case 'meep-docker-registry:30001/meep-wais':
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20Application%20Mobility%20REST%20API';
		apiPath = mepName+'/ams/v2';
		pseudoName = 'Application Mobility (021) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;
		dropDownName = 'Application Mobility (021)';
		break;
		case 'meep-docker-registry:30001/meep-ams':
		apiUrl = 'api/?urls.primaryName='+mepName+'%20-%20WLAN%20Access%20Information%20Service%20REST%20API';
		apiPath = mepName+'/wai/v2';
		pseudoName = 'WLAN Access Information (028) on ' + mepName;// + ' with id ' + this.edgeAppsMap.edgeApps[i].id;

js-apps/frontend/src/js/containers/sandbox/app-instance-table.js

+9 −9

Original line number	Diff line number	Diff line
		@@ -39,12 +39,12 @@ const tableStyles = () => ({
		overflowY: 'scroll'
		},
		tableBodyCell: {
		paddingLeft: 15,
		paddingLeft: 5,
		paddingRight: 0,
		'font-family': 'Rubik'
		},
		tableBodyCellNoWrap: {
		paddingLeft: 15,
		paddingLeft: 10,
		paddingRight: 0,
		'font-family': 'Rubik',
		whiteSpace: 'nowrap'
		@@ -115,12 +115,8 @@ class AppInstanceTable extends Component {
		role="checkbox"
		tabIndex={-1}
		key={row.name}
		style={{ height: 50 }}
		style={{ height: 49 }}
		>
		<TableCell className={classes.tableBodyCellNoWrap} scope="row">
		{row.name} running on {row.mepName}<br/>
		Id: {row.id}
		</TableCell>
		<TableCell className={classes.tableBodyCell} padding='none'>
		<Checkbox
		onChange={e => {
		@@ -128,13 +124,17 @@ class AppInstanceTable extends Component {
		}}
		/>
		</TableCell>
		<TableCell className={classes.tableBodyCellNoWrap} scope="row">
		{row.name} running on {row.mepName}<br/>
		ID: {row.id}
		</TableCell>
		</TableRow>
		);
		}
		})
		}
		{emptyRows > 0 && (
		<TableRow style={{ height: 50 * emptyRows }}>
		<TableRow style={{ height: 49 * emptyRows }}>
		<TableCell colSpan={6} />
		</TableRow>
		)}
		@@ -142,7 +142,7 @@ class AppInstanceTable extends Component {
		}
		{emptyRows === maxRows && (
		<TableBody className={classes.tableBody}>
		<TableRow style={{ height: 50 * emptyRows }}>
		<TableRow style={{ height: 49 * emptyRows }}>
		<TableCell colSpan={6} />
		</TableRow>
		</TableBody>