Commit 09552b2b authored by Muhammad Umair Khan's avatar Muhammad Umair Khan
Browse files

Refactor deployment scripts and streamline frontend dialog components

parent 216e9922

build.sh

+32 −21
Original line number Diff line number Diff line 
#!/bin/sh



set -e # Exit immediately if a command exits with a non-zero status



# Colors

CYAN='\033[0;36m'

GREEN='\033[0;32m'

YELLOW='\033[0;33m'

BLUE='\033[0;34m'

BOLD='\033[1m'

NC='\033[0m' # No Color



# Automatically configure git to use the tracked hooks directory

git config core.hooksPath .githooks
@@ -7,11 +17,11 @@ git config core.hooksPath .githooks 
SCRIPT=$(readlink -f "$0")

BASEDIR=$(dirname "$SCRIPT")



MEEPDIR=$HOME/etsi-mec-sandbox

MEEPDIR="$HOME/etsi-mec-sandbox"

CHECKSUM_FILE="$BASEDIR/.build_checksum"



calculate_package_checksum() {

    SRC_DIR=$1

    SRC_DIR="$1"

    find "$SRC_DIR" -type f \

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

        -not -path '*/dist/*' \
@@ -20,7 +30,7 @@ calculate_package_checksum() { 
}



install_package() {

    PACKAGE_NAME=$1

    PACKAGE_NAME="$1"

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

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

    PKG_CHECKSUM_FILE="$DEST_DIR/.install_checksum"
@@ -30,13 +40,13 @@ install_package() { 
        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."

            printf "%b\n" "${GREEN}✔ Package ${BOLD}%s${NC}${GREEN} is up-to-date. Skipping installation.${NC}" "$PACKAGE_NAME"

            return 0

        fi

    fi



    echo ""

    echo "+ Installing $PACKAGE_NAME"

    printf "%b\n" "${YELLOW}⧗ Installing ${BOLD}%s${NC}" "$PACKAGE_NAME"

    rm -rf "$DEST_DIR"

    mkdir -p "$DEST_DIR"

    cp -r "$SRC_DIR" "$BASEDIR/js-packages"
@@ -44,7 +54,7 @@ install_package() { 
    # Calculate checksum of the source files

    SRC_CHECKSUM=$(calculate_package_checksum "$SRC_DIR")

    

    cd "$DEST_DIR"

    cd "$DEST_DIR" || exit 1

    npm ci

    

    echo "$SRC_CHECKSUM" > "$PKG_CHECKSUM_FILE"
@@ -65,30 +75,30 @@ if [ -d "$BASEDIR/bin/frontend" ] && [ -f "$CHECKSUM_FILE" ]; then 
    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 ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"

        printf "%b\n" "${GREEN}${BOLD}==================================================${NC}"

        printf "%b\n" "${GREEN}${BOLD}✔ MEC Sandbox Frontend: No changes detected. Skipping build.${NC}"

        printf "%b\n" "${GREEN}${BOLD}==================================================${NC}"

        echo ""

        exit 0

    fi

fi



echo ""

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

echo ">> Building MEC Sandbox Frontend"

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

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

printf "%b\n" "${CYAN}${BOLD}🚀 Building MEC Sandbox Frontend${NC}"

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

echo ""

cd $BASEDIR

cd "$BASEDIR" || exit 1

rm -rf bin/

mkdir -p bin/frontend



echo "+ Linting Frontend"

cd $BASEDIR/js-apps/frontend

printf "%b\n" "${BLUE}${BOLD}➤ Linting Frontend${NC}"

cd "$BASEDIR/js-apps/frontend" || exit 1

npx eslint src



echo ""

echo "+ Installing client packages"

mkdir -p $BASEDIR/js-packages

printf "%b\n" "${BLUE}${BOLD}➤ Installing client packages${NC}"

mkdir -p "$BASEDIR/js-packages"

install_package meep-auth-svc-client

install_package meep-gis-engine-client

install_package meep-metrics-engine-client
@@ -97,14 +107,15 @@ install_package meep-sandbox-ctrl-client 
install_package meep-mon-engine-client



echo ""

echo "+ Building Frontend"

cd $BASEDIR/js-apps/frontend

printf "%b\n" "${BLUE}${BOLD}➤ Compiling Frontend (Webpack)${NC}"

cd "$BASEDIR/js-apps/frontend" || exit 1

npm install

rm -rf dist

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

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"
 
printf "%b\n" "${GREEN}${BOLD}✨ MEC Sandbox build completed successfully!${NC}"

echo ""

deploy.sh

+61 −49
Original line number Diff line number Diff line 
#!/bin/sh



set -e # Exit on error



# Colors

CYAN='\033[0;36m'

GREEN='\033[0;32m'

YELLOW='\033[0;33m'

BLUE='\033[0;34m'

BOLD='\033[1m'

NC='\033[0m' # No Color



# Get full path to script directory

SCRIPT=$(readlink -f "$0")

BASEDIR=$(dirname "$SCRIPT")



MEEPDIR=~/etsi-mec-sandbox

CONFIGDIR=$MEEPDIR/config

DASHBOARDDIR=$MEEPDIR/charts/observability/grafana/dashboards

APIDIR=$MEEPDIR/config/api

GRIDDIR=$MEEPDIR/go-packages/meep-vis-traffic-mgr

FRONTENDDIR=~/.meep/user/frontend

VALUESDIR=~/.meep/user/values

MEEPDIR="$HOME/etsi-mec-sandbox"

CONFIGDIR="$MEEPDIR/config"

DASHBOARDDIR="$MEEPDIR/charts/observability/grafana/dashboards"

APIDIR="$MEEPDIR/config/api"

GRIDDIR="$MEEPDIR/go-packages/meep-vis-traffic-mgr"

FRONTENDDIR="$HOME/.meep/user/frontend"

VALUESDIR="$HOME/.meep/user/values"



echo ""

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

echo ">> Deploying MEC Sandbox Frontend"

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

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

printf "%b\n" "${CYAN}${BOLD}🚀 Deploying MEC Sandbox Frontend${NC}"

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

echo ""



echo "+ Updating AdvantEDGE configuration"

echo "$MEEPDIR"

echo "$CONFIGDIR"

cd $BASEDIR

cp config/.meepctl-repocfg.yaml $MEEPDIR

cp config/permissions.yaml $CONFIGDIR

cp config/secrets.yaml $CONFIGDIR

cp config/objstore-influx.cfg $CONFIGDIR

cp config/objstore-thanos.yaml $CONFIGDIR

cp config/objstore-thanos-archive.yaml $CONFIGDIR

printf "%b\n" "${BLUE}${BOLD}➤ Updating AdvantEDGE configuration${NC}"

printf "  MEEP Directory:   %s\n" "$MEEPDIR"

printf "  Config Directory: %s\n" "$CONFIGDIR"



cd "$BASEDIR" || exit 1

cp config/.meepctl-repocfg.yaml "$MEEPDIR"

cp config/permissions.yaml "$CONFIGDIR"

cp config/secrets.yaml "$CONFIGDIR"

cp config/objstore-influx.cfg "$CONFIGDIR"

cp config/objstore-thanos.yaml "$CONFIGDIR"

cp config/objstore-thanos-archive.yaml "$CONFIGDIR"



echo ""

echo "+ Copying swagger api files"

echo "$APIDIR"

mkdir -p $APIDIR

cp -r config/api/* $APIDIR

printf "%b\n" "${BLUE}${BOLD}➤ Copying Swagger API files${NC}"

printf "  Target: %s\n" "$APIDIR"

mkdir -p "$APIDIR"

cp -r config/api/* "$APIDIR"



echo ""

echo "+ Copying dashboards"

echo "$DASHBOARDDIR"

mkdir -p $DASHBOARDDIR

cp -r config/dashboards/* $DASHBOARDDIR

printf "%b\n" "${BLUE}${BOLD}➤ Copying Grafana dashboards${NC}"

printf "  Target: %s\n" "$DASHBOARDDIR"

mkdir -p "$DASHBOARDDIR"

cp -r config/dashboards/* "$DASHBOARDDIR"



echo ""

echo "+ Copying grid map file"

echo "$GRIDDIR"

mkdir -p $GRIDDIR

cp -r config/grid_map/* $GRIDDIR

printf "%b\n" "${BLUE}${BOLD}➤ Copying Grid Map file${NC}"

printf "  Target: %s\n" "$GRIDDIR"

mkdir -p "$GRIDDIR"

cp -r config/grid_map/* "$GRIDDIR"



echo ""

echo "+ Deploying frontend"

echo "$FRONTENDDIR"

mkdir -p $FRONTENDDIR

rm -r $FRONTENDDIR/* 2> /dev/null

cp -r bin/frontend/* $FRONTENDDIR

printf "%b\n" "${BLUE}${BOLD}➤ Deploying frontend binaries${NC}"

printf "  Target: %s\n" "$FRONTENDDIR"

mkdir -p "$FRONTENDDIR"

rm -rf "$FRONTENDDIR/"* 2> /dev/null || true

cp -r bin/frontend/* "$FRONTENDDIR"



echo ""

echo "+ Updating configuration user values"

echo "$VALUESDIR"

mkdir -p $VALUESDIR

rm -r $VALUESDIR-bak 2> /dev/null

mkdir -p $VALUESDIR-bak

cp -r  $VALUESDIR/* $VALUESDIR-bak

cp -r config/values/* $VALUESDIR

printf "%b\n" "${BLUE}${BOLD}➤ Updating configuration user values${NC}"

printf "  Target: %s\n" "$VALUESDIR"

mkdir -p "$VALUESDIR"

rm -rf "${VALUESDIR}-bak" 2> /dev/null || true

mkdir -p "${VALUESDIR}-bak"

cp -r "$VALUESDIR/"* "${VALUESDIR}-bak" 2>/dev/null || true

cp -r config/values/* "$VALUESDIR"



echo ""

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

echo ">> Updating demo4-UE entrypoint.sh script"

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

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

printf "%b\n" "${CYAN}${BOLD}➤ Updating demo4-UE entrypoint.sh script${NC}"

printf "%b\n" "${CYAN}${BOLD}==================================================${NC}"

echo ""



sed --in-place 's/advantedge/sandbox/' $MEEPDIR/examples/demo4-ue/src/demo-server/entrypoint.sh

sed --in-place 's/advantedge/sandbox/' "$MEEPDIR/examples/demo4-ue/src/demo-server/entrypoint.sh"



echo ""

echo ">>> MEC Sandbox deployment completed"
 
printf "%b\n" "${GREEN}${BOLD}✨ MEC Sandbox deployment completed successfully!${NC}"

echo ""

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

+4 −0
Original line number Diff line number Diff line
@@ -41,6 +41,10 @@ $mdc-layout-grid-default-gutter: ( 
}



.mdc-dialog {

    @include mdc-dialog-max-width(550px, 20px);

}



.mdc-dialog.large-dialog {

    @include mdc-dialog-max-width(865px, 20px);

}

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

+1 −1
Original line number Diff line number Diff line
@@ -62,7 +62,7 @@ export const DIALOG_HELP_GETTING_STARTED = 'DIALOG_HELP_GETTING_STARTED'; 
export const DIALOG_CONFIRM_DELETE_APP = 'DIALOG_CONFIRM_DELETE_APP';

export const DIALOG_CREATE_NEW_APP = 'DIALOG_CREATE_NEW_APP';

export const DIALOG_VERSION = 'DIALOG_VERSION';

export const DIALOG_SSL_TRUST_ERROR = 'DIALOG_SSL_TRUST_ERROR';





// Alert Types

export const ALERT_DEGRADED_NETWORK = 'ALERT_DEGRADED_NETWORK';

js-apps/frontend/src/js/components/dialogs/help-getting-started-dialog.js

+1 −0
Original line number Diff line number Diff line
@@ -31,6 +31,7 @@ class HelpGettingStartedDialog extends Component { 
        onClose={this.props.onClose}

        onSubmit={this.props.onClose}

        submitLabel = {'Ok'}

        className={'large-dialog'}

      >

        <div>

          <Typography use="body1">