Commit d4cdffe9 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

frontend home page update

parent ac0ffdc7

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

+9 −0
Original line number Diff line number Diff line
@@ -163,6 +163,9 @@ div.vis-tooltip { 
}



// IDCC Styles

.text-color-main {

    color: #3e484f;

}

.idcc-page {

    padding: 10px;

    min-height: calc(100vh - 138px);
@@ -186,6 +189,12 @@ div.vis-tooltip { 
.idcc-fullwidth {

    width: 100%;

}

.idcc-link:link, .idcc-link:visited {

    color: #379DD8;

}

.idcc-link:hover, .idcc-link:hover {

    color: #178fd4;

}



#new-element-error-message {

    color: firebrick;

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

+10 −10
Original line number Diff line number Diff line
@@ -19,11 +19,11 @@ import { Typography } from '@rmwc/typography'; 
import { Grid, GridCell } from '@rmwc/grid';



import {

  MEEP_FOOTER_WIKI_URL,

  MEEP_FOOTER_GITHUB_URL,

  MEEP_FOOTER_DISCUSSIONS_URL,

  MEEP_FOOTER_LICENSE_URL,

  MEEP_FOOTER_CONTRIBUTING_URL

  MEEP_WIKI_URL,

  MEEP_GITHUB_URL,

  MEEP_DISCUSSIONS_URL,

  MEEP_LICENSE_URL,

  MEEP_CONTRIBUTING_URL

} from '../meep-constants';



const Footer = () => {
@@ -36,23 +36,23 @@ const Footer = () => { 
      </GridCell>

      <GridCell span={5} align={'middle'}>

        <div align={'right'}>

          <a href={MEEP_FOOTER_WIKI_URL} target="_blank" style={styles.link}>

          <a href={MEEP_WIKI_URL} target="_blank" style={styles.link}>

            <Typography use="body1">Wiki</Typography>

          </a>

          <span style={styles.separator}>|</span>

          <a href={MEEP_FOOTER_GITHUB_URL} target="_blank" style={styles.link}>

          <a href={MEEP_GITHUB_URL} target="_blank" style={styles.link}>

            <Typography use="body1">GitHub</Typography>

          </a>

          <span style={styles.separator}>|</span>

          <a href={MEEP_FOOTER_DISCUSSIONS_URL} target="_blank" style={styles.link}>

          <a href={MEEP_DISCUSSIONS_URL} target="_blank" style={styles.link}>

            <Typography use="body1">Discussions</Typography>

          </a>

          <span style={styles.separator}>|</span>

          <a href={MEEP_FOOTER_LICENSE_URL} target="_blank" style={styles.link}>

          <a href={MEEP_LICENSE_URL} target="_blank" style={styles.link}>

            <Typography use="body1">License</Typography>

          </a>

          <span style={styles.separator}>|</span>

          <a href={MEEP_FOOTER_CONTRIBUTING_URL} target="_blank" style={styles.link}>

          <a href={MEEP_CONTRIBUTING_URL} target="_blank" style={styles.link}>

            <Typography use="body1">Contributing</Typography>

          </a>

        </div>

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

+92 −19
Original line number Diff line number Diff line
@@ -18,8 +18,20 @@ import React, { Component } from 'react'; 
import { connect } from 'react-redux';

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

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

import { Typography } from '@rmwc/typography';

import '../../../img/AdvantEDGE-logo_Blue-01.png';



import {

  MEEP_WIKI_URL,

  MEEP_ARCHITECTURE_URL,

  MEEP_USAGE_URL,

  MEEP_HELP_GUI_URL,

  MEEP_CONTRIBUTING_URL,

  MEEP_DISCUSSIONS_URL,

  MEEP_ISSUES_URL,

  MEEP_LICENSE_URL

} from '../../meep-constants';



class HomePageContainer extends Component {

  constructor(props) {

    super(props);
@@ -43,8 +55,13 @@ class HomePageContainer extends Component { 
          <GridInner>

            <GridCell span={12}>

              <Elevation className='idcc-elevation' z={3}>

                <div style={{ padding: 20 }}>

                  <span style={styles.text}>

                <div style={{ padding: 30 }}>

                  <div style={styles.title}>

                    <Typography theme='primary' use='headline4'>Welcome to AdvantEDGE</Typography>

                  </div>



                  <div>

                    <Typography className='text-color-main' use='body1'>

                      <p> AdvantEDGE is a Mobile Edge Emulation Platform (MEEP) that runs on Docker & Kubernetes.</p>

                      <p>

                        AdvantEDGE provides an emulation environment, enabling experimentation with Edge
@@ -52,12 +69,15 @@ class HomePageContainer extends Component { 
                        edge / fog deployment models and their impact on applications and services in short

                        and agile iterations.

                      </p>

                    <h3>Motivation</h3>

                    </Typography>



                    <Typography theme='primary' use='headline6'>Motivation</Typography>



                    <Typography className='text-color-main' use='body1'>

                      <ul>

                        <li>Accelerate Mobile Edge Computing adoption</li>

                        <li>Help Discover new edge application use cases & services</li>

                      <li>

                          Help answer questions such as:

                        <li>Help answer questions such as:

                          <ul>

                            <li>Where should my application components be located in the edge network?</li>

                            <li>How do network characteristics (such as latency, jitter, and packet loss) impact my application or service?</li>
@@ -65,7 +85,56 @@ class HomePageContainer extends Component { 
                          </ul>

                        </li>

                      </ul>

                  </span>

                    </Typography>



                    <Typography theme='primary' use='headline6'>Intended Users</Typography>



                    <Typography className='text-color-main' use='body1'>

                      <ul>

                        <li>Edge Application Developers</li>

                        <li>Edge Network and Service Designers</li>

                        <li>Edge Researchers</li>

                        <li>Technologists that are simply interested learning how the Edge works</li>

                      </ul>

                    </Typography>



                    <Typography theme='primary' use='headline6'>Getting started</Typography>



                    <Typography className='text-color-main' use='body1'>

                      <p>If you made it here, AdvantEDGE was successfully installed. Go ahead and experiment with the platform!</p>

                      <p>Need some help?</p>

                      <ul>

                        <li>Check out the <a className='idcc-link' href={MEEP_WIKI_URL} target='_blank'>AdvantEDGE Wiki</a></li>

                        <li>Learn more about platform <a className='idcc-link' href={MEEP_ARCHITECTURE_URL} target='_blank'>Architecture & Features</a></li>

                        <li>Follow the platform <a className='idcc-link' href={MEEP_USAGE_URL} target='_blank'>Usage Workflow</a></li>

                        <li>Have a look at the <a className='idcc-link' href={MEEP_HELP_GUI_URL} target='_blank'>GUI Help Page</a></li>

                      </ul>

                    </Typography>



                    <Typography theme='primary' use='headline6'>How to Contribute</Typography>



                    <Typography className='text-color-main' use='body1'>

                      <p>

                        If you like this project and would like to participate in its evolution, you can find information

                        on contributing <a className='idcc-link' href={MEEP_CONTRIBUTING_URL} target='_blank'>here</a>.

                      </p>

                      <p>

                        We welcome questions, feedback and improvement suggestions

                        via <a className='idcc-link' href={MEEP_DISCUSSIONS_URL} target='_blank'>Discussions</a> and bug reporting

                        via <a className='idcc-link' href={MEEP_ISSUES_URL} target='_blank'>Issues</a>.

                      </p>

                      <p>Hope to hear from you...</p>

                    </Typography>



                    <Typography theme='primary' use='headline6'>Licensing</Typography>



                    <Typography className='text-color-main' use='body1'>

                      <p>

                        AdvantEDGE is licensed under under

                        the <a className='idcc-link' href={MEEP_LICENSE_URL} target='_blank'>Apache License, Version 2.0</a>

                      </p>

                    </Typography>

                  </div>

                </div>

              </Elevation>

            </GridCell>
@@ -94,6 +163,10 @@ const styles = { 
  text: {

    color: 'black',

    fontSize: '1.2rem'

  },

  title: {

    marginTop: 10,

    marginBottom: 20

  }

};

js-apps/meep-frontend/src/js/meep-constants.js

+8 −5
Original line number Diff line number Diff line
@@ -43,11 +43,14 @@ export const PAGE_SETTINGS_INDEX = 4; 


// URLs

export const MEEP_HELP_GUI_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/wiki/usage-gui-overview';

export const MEEP_FOOTER_WIKI_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/wiki';

export const MEEP_FOOTER_GITHUB_URL = 'https://github.com/InterDigitalInc/AdvantEDGE';

export const MEEP_FOOTER_DISCUSSIONS_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/discussions';

export const MEEP_FOOTER_LICENSE_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/blob/master/LICENSE';

export const MEEP_FOOTER_CONTRIBUTING_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/blob/master/CONTRIBUTING.md';

export const MEEP_ARCHITECTURE_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/wiki/overview-architecture';

export const MEEP_USAGE_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/wiki/usage-workflow';

export const MEEP_WIKI_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/wiki';

export const MEEP_GITHUB_URL = 'https://github.com/InterDigitalInc/AdvantEDGE';

export const MEEP_DISCUSSIONS_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/discussions';

export const MEEP_LICENSE_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/blob/master/LICENSE';

export const MEEP_CONTRIBUTING_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/blob/master/CONTRIBUTING.md';

export const MEEP_ISSUES_URL = 'https://github.com/InterDigitalInc/AdvantEDGE/issues';



// MEEP IDs

export const MEEP_TAB_CFG = 'meep-tab-cfg';