frontend cleanup + sign-in dialog support (00e097e5) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/src/css/meep-controller.scss

+35 −8

Original line number	Diff line number	Diff line
		@@ -33,7 +33,28 @@ $mdc-layout-grid-default-gutter: (
		phone: 16px
		) !default;

		@import "material-components-web/material-components-web";
		// MDC
		@import 'material-components-web/material-components-web';

		// Outlined Select issue causing horizontal scrolling
		.mdc-select--outlined::before, .mdc-select--outlined::after {
		content: none;
		}

		// Colors
		.mdc-dialog {
		@include mdc-dialog-max-width(865px, 20px);
		@include mdc-dialog-min-width(500px);
		}
		.detailed-dialog {
		@include mdc-dialog-max-width(1024px, 20px);
		}

		.rmwc-icon--size-large {
		font-size: 2.25rem;
		width: 1em;
		height: 1em;
		}

		// Ensure layout covers the entire screen

		@@ -48,8 +69,9 @@ select {

		// UI
		#meep-container {
		// height: 100%;
		width: 100%;
		overflow-x: hidden;
		// overflow-x: hidden;
		}
		.ui-body {
		display: flex;
		@@ -57,9 +79,9 @@ select {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		height: 100%;
		// height: 100%;
		width: 100%;
		background-color: #FCFCFC;
		background-color: #fafafa;
		}
		.ui-content {
		flex-direction: column;
		@@ -70,8 +92,8 @@ select {
		.ui-main {
		padding: 16px;
		}
		.component-style {
		background-color: #FFFFFF;
		.ui-background {
		background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/network.png);
		}


		@@ -127,8 +149,6 @@ div.vis-tooltip {
		display: none;
		}



		#refresh-interval-form-div {
		display: inline-block;
		vertical-align: middle;
		@@ -143,6 +163,13 @@ div.vis-tooltip {
		}

		// IDCC Styles
		.idcc-page {
		padding: 10px;
		min-height: calc(100vh - 138px);
		}
		.idcc-elevation {
		background-color: #FFFFFF;
		}
		.idcc-button {
		@include mdc-button-ink-color(#fff);
		}

js-apps/meep-frontend/src/img/logo-gitlab.svg

0 → 100755

+1 −0

<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Logo Gitlab</title><path d='M494.07 281.6l-25.18-78.08a11 11 0 00-.61-2.1l-50.5-156.94a20.08 20.08 0 00-19.17-13.82 19.77 19.77 0 00-18.95 13.94l-48.14 149.55h-152L131.34 44.59a19.76 19.76 0 00-18.86-13.94h-.11a20.15 20.15 0 00-19.12 14L42.7 201.73c0 .14-.11.26-.16.4l-25.63 79.48a29.15 29.15 0 0010.44 32.46l221.44 162.41a11.25 11.25 0 0013.38-.07l221.48-162.34a29.13 29.13 0 0010.42-32.47m-331-64.51l61.73 191.76L76.63 217.09m209.64 191.8l59.19-183.84 2.55-8h86.52L300.47 390.44M398.8 59.31l43.37 134.83h-86.82M324.16 217l-43 133.58-25.66 79.56L186.94 217M112.27 59.31l43.46 134.83H69M40.68 295.58a6.19 6.19 0 01-2.21-6.9l19-59 139.61 180.59m273.26-114.69L313.92 410.22l.52-.69L453.5 229.64l19 59a6.2 6.2 0 01-2.19 6.92'/></svg>

 No newline at end of file

js-apps/meep-frontend/src/js/components/dialogs/id-dialog.js

+51 −70

Original line number	Diff line number	Diff line
		@@ -14,8 +14,8 @@
		* limitations under the License.
		*/

		import React, { Component } from 'react';
		import { Grid, GridCell } from '@rmwc/grid';
		import React from 'react';
		import { Typography } from '@rmwc/typography';

		import {
		Dialog,
		@@ -25,84 +25,65 @@ import {
		DialogButton
		} from '@rmwc/dialog';

		class IDDialog extends Component {
		constructor(props) {
		super(props);

		this.state = {
		sandboxName: '',
		err: null

		};
		}

		render() {
		const IDDialog = props => {
		return (
		<Dialog
		style={{ zIndex: 10000 }}
		open={this.props.open}
		onClose={this.props.onClose}
		data-cy={this.props.cydata}
		open={props.open}
		onClose={(evt) => {
		var closeOnSubmit = (evt.detail.action === 'accept' ? true : false);
		props.onClose(closeOnSubmit);
		}}
		className={props.className ? props.className : ''}
		data-cy={props.cydata}
		>
		<DialogTitle style={styles.title}>
		<Grid>
		<GridCell span={12}>{this.props.title}</GridCell>
		</Grid>

		<DialogTitle theme="primary" style={styles.title}>
		<Typography use="headline5">{props.title}</Typography>
		</DialogTitle>

		<DialogContent style={styles.content}>
		<Grid>
		<GridCell span={12}>{this.props.children}</GridCell>
		</Grid>
		{props.children}
		</DialogContent>

		<DialogActions style={styles.actions}>
		<Grid>
		<GridCell span={8}></GridCell>
		<GridCell span={2}>
		{props.onClose && (
		<DialogButton
		style={styles.button}
		action="close"
		onClick={this.props.onClose}
		onClick={props.onClose}
		>
		Cancel
		{(props.closeLabel === undefined) ? 'Cancel' : props.closeLabel}
		</DialogButton>
		</GridCell>

		<GridCell span={2}>
		)}
		{props.onSubmit && (
		<DialogButton
		style={styles.button}
		action="accept"
		isDefaultAction
		onClick={this.props.onSubmit}
		disabled={this.props.okDisabled}
		onClick={() => props.onSubmit()}
		disabled={props.okDisabled}
		>
		Ok
		{(props.submitLabel === undefined) ? 'Ok' : props.submitLabel}
		</DialogButton>
		</GridCell>
		</Grid>
		)}
		</DialogActions>
		</Dialog>
		);
		}
		}
		};

		const styles = {
		title: {
		paddingLeft: 25,
		paddingRight: 25
		},
		content: {
		paddingLeft: 25,
		paddingRight: 30,
		paddingTop: 20,
		overflow: 'hidden'
		paddingTop: 10,
		paddingBottom: 15
		},
		actions: {
		marginTop: 20
		paddingBottom: 10,
		paddingRight: 24
		},
		button: {
		margin: 5
		marginBottom: 5,
		marginLeft: 10
		}
		};

js-apps/meep-frontend/src/js/components/dialogs/id-save-scenario-dialog.js

+2 −3

Original line number	Diff line number	Diff line
		@@ -71,9 +71,8 @@ class IDSaveScenarioDialog extends Component {
		cydata={MEEP_DLG_SAVE_SCENARIO}
		>
		<span style={styles.text}>
		{
		'Store the scenario in the MEEP Controller (overwrites any existing scenario with the same name)'
		}
		Store the scenario in the MEEP Controller<br/>
		NOTE: overwrites any existing scenario with the same name
		</span>

		<TextField

js-apps/meep-frontend/src/js/components/dialogs/id-sign-in-oauth-dialog.js

0 → 100644

+86 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (c) 2021 InterDigital Communications, Inc
		*
		* Licensed under the Apache License, Version 2.0 (the "License");
		* you may not use this file except in compliance with the License.
		* You may obtain a copy of the License at
		*
		* http://www.apache.org/licenses/LICENSE-2.0
		*
		* Unless required by applicable law or agreed to in writing, software
		* distributed under the License is distributed on an "AS IS" BASIS,
		* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
		* See the License for the specific language governing permissions and
		* limitations under the License.
		*/

		import React, { Component } from 'react';
		import IDDialog from './id-dialog';
		import { Grid, GridCell } from '@rmwc/grid';
		import { Button } from '@rmwc/button';
		import GitHubIcon from '@/img/logo-github.svg';
		import GitLabIcon from '@/img/logo-gitlab.svg';

		import {
		OAUTH_PROVIDER_GITHUB,
		OAUTH_PROVIDER_GITLAB
		} from '@/js/meep-constants';

		class IDSignInOAuthDialog extends Component {
		constructor(props) {
		super(props);
		this.state = {
		};
		}

		render() {
		return (
		<IDDialog
		title={this.props.title}
		open={this.props.open}
		onClose={this.props.onClose}
		>
		<Grid style={{ marginBottom: 20 }}>
		<GridCell span={6}>
		<Button style={styles.button} outlined onClick={() => this.props.onSignIn(OAUTH_PROVIDER_GITHUB)}>
		<img style={styles.icon} src={GitHubIcon}/>
		GitHub
		</Button>
		</GridCell>
		<GridCell span={6}>
		<Button style={styles.button} outlined onClick={() => this.props.onSignIn(OAUTH_PROVIDER_GITLAB)}>
		<img style={styles.icon} src={GitLabIcon}/>
		GitLab (EOL Account)
		</Button>
		</GridCell>
		</Grid>
		<span style={styles.text}>
		Authenticating with an external provider will:
		<ul>
		<li>Redirect the browser to the provider login page</li>
		<li>Request authorization to read your public user name</li>
		<li>Create your session on successful login and authorization</li>
		</ul>
		NOTE: Login & authorization may be seamless if already performed.
		</span>
		</IDDialog>
		);
		}
		}

		const styles = {
		button: {
		width: '100%',
		height: '48px',
		whiteSpace: 'nowrap'
		},
		icon: {
		height: '75%',
		marginRight: 10
		},
		text: {
		color: 'gray'
		}
		};

		export default IDSignInOAuthDialog;