Commit c45eca88 authored by Muhammad Umair Khan's avatar Muhammad Umair Khan
Browse files

Fix dialog overlap freezing screen and update build scripts 

Resolved an issue where transitioning between the SSL Certificate Help dialog and the Sign-In dialog caused the screen to freeze. Both transitions now wait 500ms to allow the Material UI component to finish its closing animation and clean up the shared DOM scroll locks before the next dialog is opened.

Also added a checksum optimization to build.sh to skip redundant frontend compilations when source files haven't changed, significantly speeding up development builds.
parent fd3bb4db

README.md

+1 −1
Original line number Diff line number Diff line 
# ETSI MEC Sandbox

'# ETSI MEC Sandbox



>_**NOTE: This repository contains the MEC Sandbox Frontend; the backend portion of the MEC Sandbox is realized

> using the open source project [AdvantEDGE](https://github.com/InterDigitalInc/AdvantEDGE)**_

build.sh

+65 −8
Original line number Diff line number Diff line
@@ -4,25 +4,79 @@ 
SCRIPT=$(readlink -f "$0")

BASEDIR=$(dirname "$SCRIPT")



MEEPDIR=~/etsi-mec-sandbox

MEEPDIR=$HOME/etsi-mec-sandbox

CHECKSUM_FILE="$BASEDIR/.build_checksum"



calculate_package_checksum() {

    SRC_DIR=$1

    find "$SRC_DIR" -type f \

        -not -path '*/node_modules/*' \

        -not -path '*/dist/*' \

        -not -path '*/.git/*' \

        2>/dev/null | sort | xargs md5sum 2>/dev/null | md5sum | cut -d' ' -f1

}



install_package() {

    PACKAGE_NAME=$1

    SRC_DIR="$MEEPDIR/js-packages/$PACKAGE_NAME"

    DEST_DIR="$BASEDIR/js-packages/$PACKAGE_NAME"

    PKG_CHECKSUM_FILE="$DEST_DIR/.install_checksum"



    if [ -d "$DEST_DIR/node_modules" ] && [ -f "$PKG_CHECKSUM_FILE" ]; then

        SRC_CHECKSUM=$(calculate_package_checksum "$SRC_DIR")

        SAVED_CHECKSUM=$(cat "$PKG_CHECKSUM_FILE" 2>/dev/null)

        if [ "$SRC_CHECKSUM" = "$SAVED_CHECKSUM" ]; then

            echo ""

            echo "+ Package $PACKAGE_NAME is up-to-date. Skipping installation."

            return 0

        fi

    fi



    echo ""

    echo "+ Installing $1"

    rm -rf $BASEDIR/js-packages/$1

    mkdir -p $BASEDIR/js-packages/$1

    cp -r $MEEPDIR/js-packages/$1 $BASEDIR/js-packages

    cd $BASEDIR/js-packages/$1

    echo "+ Installing $PACKAGE_NAME"

    rm -rf "$DEST_DIR"

    mkdir -p "$DEST_DIR"

    cp -r "$SRC_DIR" "$BASEDIR/js-packages"

    

    # Calculate checksum of the source files

    SRC_CHECKSUM=$(calculate_package_checksum "$SRC_DIR")

    

    cd "$DEST_DIR"

    npm ci

    

    echo "$SRC_CHECKSUM" > "$PKG_CHECKSUM_FILE"

}



calculate_checksum() {

    find "$BASEDIR/js-apps/frontend" "$MEEPDIR/js-packages" -type f \

        -not -path '*/node_modules/*' \

        -not -path '*/dist/*' \

        -not -path '*/bin/*' \

        -not -path '*/.git/*' \

        2>/dev/null | sort | xargs md5sum 2>/dev/null | md5sum | cut -d' ' -f1

}



# Check if build can be skipped

if [ -d "$BASEDIR/bin/frontend" ] && [ -f "$CHECKSUM_FILE" ]; then

    CURRENT_CHECKSUM=$(calculate_checksum)

    SAVED_CHECKSUM=$(cat "$CHECKSUM_FILE" 2>/dev/null)

    if [ "$CURRENT_CHECKSUM" = "$SAVED_CHECKSUM" ]; then

        echo ""

        echo ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"

        echo ">> MEC Sandbox Frontend: No changes detected. Skipping build."

        echo ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"

        echo ""

        exit 0

    fi

fi



echo ""

echo ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"

echo ">> Building MEC Sandbox Frontend"

echo ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"

echo ""

cd $BASEDIR

rm -r bin/

rm -rf bin/

mkdir -p bin/frontend



echo "+ Linting Frontend"
@@ -43,8 +97,11 @@ echo "" 
echo "+ Building Frontend"

cd $BASEDIR/js-apps/frontend

npm ci

rm -r dist

rm -rf dist

npm run build -- --output-path=$BASEDIR/bin/frontend



# Save the checksum after a successful or attempted build

calculate_checksum > "$CHECKSUM_FILE"



echo ""

echo ">>> MEC Sandbox build completed"

config/.meepctl-repocfg.yaml

+5 −5
Original line number Diff line number Diff line
@@ -23,9 +23,9 @@ repo: 
    # permissions

    permissions:

      # user id

      uid: 1001

      uid: 1000

      # group id

      gid: 1001

      gid: 1000



    # user supplied resources

    user:
@@ -38,7 +38,7 @@ repo: 
    # platform ingress configuration

    ingress:

      # host name

      host: try-mec.etsi.org

      host: 192.168.20.167

      # enable https only (redirect http requests to https port)

      https-only: true

      # bind to host ports (true) or node ports (false)
@@ -79,7 +79,7 @@ repo: 
        # access token url

        token-url: https://github.com/login/oauth/access_token

        # OAuth redirect URI

        redirect-uri: https://try-mec.etsi.org/platform-ctrl/v1/authorize

        redirect-uri: https://192.168.20.167/platform-ctrl/v1/authorize

        # OAuth k8s secret (data: client-id, secret)

        secret: meep-oauth-github

      # GitLab OAuth provider config
@@ -91,7 +91,7 @@ repo: 
        # access token url

        token-url: https://labs.etsi.org/rep/oauth/token

        # OAuth redirect URI

        redirect-uri: https://try-mec.etsi.org/platform-ctrl/v1/authorize

        redirect-uri: https://192.168.20.167/platform-ctrl/v1/authorize

        # GitLab api url

        api-url: https://labs.etsi.org/rep/api/v4

        # OAuth k8s secret (data: client-id, secret)

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

+14 −0
Original line number Diff line number Diff line
@@ -53,6 +53,20 @@ class SignInOAuthDialog extends Component { 
          </ul>

          NOTE: Login & authorization may be seamless if already performed.

        </span>

        <div style={{ marginTop: '20px', textAlign: 'center' }}>

          <a

            href="#"

            style={{ color: '#007db8', textDecoration: 'underline', fontSize: '0.9rem', cursor: 'pointer' }}

            onClick={(e) => {

              e.preventDefault();

              if (this.props.onShowSslHelp) {

                this.props.onShowSslHelp();

              }

            }}

          >

            Trouble signing in? SSL Certificate Help

          </a>

        </div>

      </BasicDialog>

    );

  }

js-apps/frontend/src/js/components/dialogs/ssl-trust-error-dialog.js

+9 −3
Original line number Diff line number Diff line
@@ -6,20 +6,26 @@ import React, { Component } from 'react'; 
import BasicDialog from './basic-dialog';



class SslTrustErrorDialog extends Component {

  constructor(props) {

    super(props);

    this.state = {

    };

  }



  render() {

    return (

      <BasicDialog

        title={this.props.title}

        open={this.props.open}

        onClose={this.props.onClose}

        onSubmit={this.props.onClose}

        onSubmit={() => this.props.onClose(true)}

        submitLabel={'Ok'}

      >

        <div tabIndex="0" style={{ outline: 'none' }}>

          <button

            style={{ position: 'absolute', width: '1px', height: '1px', padding: '0', margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', border: '0' }}

            data-mdc-dialog-initial-focus

            onClick={this.props.onClose}

            onClick={() => this.props.onClose(false)}

          >

            Close

          </button>
@@ -29,7 +35,7 @@ class SslTrustErrorDialog extends Component { 
          <p style={{ marginBottom: '10px' }}>Your browser blocked the MEC Sandbox session cookies because the server's SSL certificate is not trusted.</p>

          <p style={{ marginBottom: '10px' }}>This typically happens when accessing the sandbox via a raw IP address or a self-signed HTTPS domain name.</p>

          <p style={{ marginBottom: '15px', color: '#e65100', backgroundColor: '#fff3e0', padding: '10px', borderLeft: '4px solid #ff9800', borderRadius: '2px' }}>

            <strong>Why this is required:</strong> The MEC Sandbox session relies on secure cookies. When logging in via GitHub, the browser redirects back to the sandbox. If the SSL certificate is untrusted, the browser blocks these session cookies. This prevents the sandbox from initializing correctly, causes silent sign-outs, and prevents user pods from being successfully deleted upon logout.

            <strong>Why this is required:</strong> The MEC Sandbox session relies on secure cookies. When logging in via GitHub/GitLab, the browser redirects back to the sandbox. If the SSL certificate is untrusted, the browser blocks these session cookies. This prevents the sandbox from initializing correctly, causes silent sign-outs, and prevents user pods from being successfully deleted upon logout.

          </p>

          <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f9f9f9', border: '1px solid #e0e0e0', borderRadius: '4px' }}>

            <strong style={{ display: 'block', marginBottom: '8px' }}>How to fix this in your browser:</strong>