Changed Navigation Layout in frontend (97f980a5) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+16 −0

Original line number	Diff line number	Diff line
		@@ -224,3 +224,19 @@ select {
		font-family: 'Roboto';
		font-weight: 600;
		}

		.mdc-tab--active .mdc-tab__text-label {
		color: white
		}

		.mdc-tab__text-label {
		opacity: 1;
		}

		.mdc-tab-indicator>.mdc-tab-indicator__content--underline {
		background-color: white;
		}

		.mdc-tab__ripple:after, .mdc-tab__ripple:before {
		background-color: white;
		}

js-apps/meep-frontend/src/js/components/meep-top-bar.js

+129 −37

Original line number	Diff line number	Diff line
		@@ -15,17 +15,37 @@
		*/

		import _ from 'lodash';
		import React from 'react';
		import React, { Component } from 'react';
		import ReactTooltip from 'react-tooltip';
		import { connect } from 'react-redux';
		import '@/css/meep-controller.scss';

		import {
		Toolbar,
		ToolbarRow,
		ToolbarSection,
		ToolbarTitle
		ToolbarSection
		// ToolbarTitle
		} from '@rmwc/toolbar';

		import { Elevation } from '@rmwc/elevation';

		import { Grid, GridCell } from '@rmwc/grid';

		import { TabBar, Tab } from '@rmwc/tabs';

		import { uiChangeCurrentPage } from '@/js/state/ui';

		import {
		MEEP_TAB_EXEC,
		MEEP_TAB_MON,
		MEEP_TAB_SET,
		MEEP_TAB_CFG,
		PAGE_EXECUTE,
		PAGE_MONITOR,
		PAGE_SETTINGS,
		PAGE_CONFIGURE
		} from '@/js/meep-constants';

		const CorePodsLed = props => {
		/eslint-disable /
		const greenLed = require('../../img/green-led.png');
		@@ -68,12 +88,22 @@ const CorePodsLed = props => {
		);
		};

		const MeepTopBar = props => {
		class MeepTopBar extends Component {
		constructor(props) {
		super(props);
		/eslint-disable /
		const logo = require('../../img/ID-Icon-01-idcc.svg');
		const advantEdge = require('../../img/AdvantEDGE-logo-NoTagline_White_RGB.png');
		this.logo = require('../../img/ID-Icon-01-idcc.svg');
		this.advantEdge = require('../../img/AdvantEDGE-logo-NoTagline_White_RGB.png');
		/* eslint-enable */
		}

		handleItemClick(page) {
		this.props.currentPage !== page ? this.props.changeCurrentPage(page) : '';
		}

		render() {
		return (
		<div>
		<Toolbar>
		<Elevation z={4}>
		<ToolbarRow>
		@@ -81,33 +111,95 @@ const MeepTopBar = props => {
		<img
		id='idcc-logo'
		className='idcc-toolbar-menu mdc-top-app-bar__navigation-icon'
		src={logo}
		src={this.logo}
		alt=''
		onClick={props.toggleMainDrawer}
		onClick={this.props.toggleMainDrawer}
		/>
		<img id='AdvantEdgeLogo' height={50} src={this.advantEdge} alt='' />
		{/* <ToolbarTitle>
		<span style={styles.title}>{this.props.title}</span>
		</ToolbarTitle> */}
		<Grid>
		<GridCell span="12">
		<TabBar>
		<GridCell span="2">
		<Tab
		data-cy={MEEP_TAB_CFG}
		style={styles.mdcTab}
		label="Configure"
		onClick={() => { this.handleItemClick(PAGE_CONFIGURE); }}
		/>
		</GridCell>
		<GridCell span="2">
		<Tab
		data-cy={MEEP_TAB_EXEC}
		style={styles.mdcTab}
		label="Execute"
		onClick={() => { this.handleItemClick(PAGE_EXECUTE); }}
		/>
		</GridCell>
		<GridCell span="2">
		<Tab
		data-cy={MEEP_TAB_MON}
		style={styles.mdcTab}
		label="Monitor"
		onClick={() => { this.handleItemClick(PAGE_MONITOR); }}
		/>
		<img id='AdvantEdgeLogo' height={50} src={advantEdge} alt='' />
		<ToolbarTitle>
		<span style={styles.title}>{props.title}</span>
		</ToolbarTitle>
		</GridCell>
		<GridCell span="2">
		<Tab
		data-cy={MEEP_TAB_SET}
		style={styles.mdcTab}
		label="Settings"
		onClick={() => { this.handleItemClick(PAGE_SETTINGS); }}
		/>
		</GridCell>
		</TabBar>
		</GridCell>
		</Grid>
		</ToolbarSection>

		<ToolbarSection alignEnd>
		<CorePodsLed
		corePodsRunning={props.corePodsRunning}
		corePodsErrors={props.corePodsErrors}
		corePodsRunning={this.props.corePodsRunning}
		corePodsErrors={this.props.corePodsErrors}
		/>
		</ToolbarSection>
		</ToolbarRow>
		</Elevation>
		</Toolbar>
		</div>
		);
		};
		}
		}

		const styles = {
		title: {
		color: 'white',
		fontFamily: 'Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif',
		fontSize: 22
		},
		mdcTab: {
		fontSize: 17,
		fontFamily: 'Roboto'
		}
		};

		export default MeepTopBar;
		const mapDispatchToProps = dispatch => {
		return {
		changeCurrentPage: page => dispatch(uiChangeCurrentPage(page))
		};
		};

		const mapStateToProps = state => {
		return {
		currentPage: state.ui.page
		};
		};

		const ConnectedMeepTopBar = connect(
		mapStateToProps,
		mapDispatchToProps
		)(MeepTopBar);

		export default ConnectedMeepTopBar;

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

+5 −5

Original line number	Diff line number	Diff line
		@@ -27,7 +27,7 @@ import * as meepSandboxCtrlRestApiClient from '../../../../../js-packages/meep-s
		import * as meepMonEngineRestApiClient from '../../../../../js-packages/meep-mon-engine-client/src/index.js';
		import * as meepGisEngineRestApiClient from '../../../../../js-packages/meep-gis-engine-client/src/index.js';

		import MeepDrawer from './meep-drawer';
		// import MeepDrawer from './meep-drawer';
		import MeepTopBar from '../components/meep-top-bar';
		import CfgPageContainer from './cfg/cfg-page-container';
		import ExecPageContainer from './exec/exec-page-container';
		@@ -645,7 +645,7 @@ class MeepContainer extends Component {
		}

		render() {
		const flexString = this.props.mainDrawerOpen ? '0 0 250px' : '0 0 0px';
		// const flexString = this.props.mainDrawerOpen ? '0 0 250px' : '0 0 0px';

		return (
		<div style={{ display: 'table', width: '100%', height: '100%' }}>
		@@ -659,13 +659,13 @@ class MeepContainer extends Component {
		</div>
		<div style={{ display: 'table-row', height: '100%' }}>
		<div style={{ display: 'flex', height: '100%' }}>
		<div
		{/* <div
		className="component-style"
		style={{ flex: flexString, borderRight: '1px solid #e4e4e4', overflow: 'hidden' }}
		>
		<MeepDrawer open={this.props.mainDrawerOpen} />
		</div>
		<div style={{ flex: '1', padding: 10 }}>{this.renderPage()}</div>
		</div> */}
		<div style={{ flex: '1', padding: 10, paddingLeft: 20 }}>{this.renderPage()}</div>
		</div>
		</div>
		</div>

Admin message