New frontend in React (#595)

Co-authored-by: Máté Cserép <mcserep@gmail.com>
Co-authored-by: Anett Fekete <anett.fekete@ericsson.com>

Author: 3 people

CMakeLists.txt

@@ -33,6 +33,7 @@ add_subdirectory(service)
 add_subdirectory(util)
 add_subdirectory(plugins) # must precede webgui
 add_subdirectory(webgui)
+add_subdirectory(webgui-new)
 add_subdirectory(webserver)
 
 # Install java libraries

Config.cmake

@@ -26,6 +26,9 @@ set(INSTALL_AUTH_DIR "${INSTALL_LIB_DIR}/${INSTALL_AUTH_DIR_NAME}")
 # Installation directory of web GUI
 set(INSTALL_WEBROOT_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/webgui")
 
+# Installation directory of the new React-based web GUI
+set(INSTALL_WEBROOT_REACT_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/webgui-new")
+
 # Installation directory of SQL files
 set(INSTALL_SQL_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/sql")
 

docker/dev/Dockerfile

@@ -11,6 +11,7 @@ RUN set -x && apt-get update -qq \
   cmake make \
   default-jdk \
   ctags \
+  curl \
   doxygen \
   gcc-9 gcc-9-plugin-dev g++-9 \
   libboost-filesystem-dev \
@@ -31,6 +32,9 @@ RUN set -x && apt-get update -qq \
   ln -s /usr/bin/gcc-9 /usr/bin/gcc && \
   ln -s /usr/bin/g++-9 /usr/bin/g++
 
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
 # Build GTest.
 RUN cd /usr/src/googletest && \
   mkdir build && \

docker/web/Dockerfile

@@ -32,10 +32,14 @@ RUN set -x && apt-get update -qq \
     # To switch user and exec command.
     gosu \
     tini \
+    curl \
   && apt-get clean \
   && rm -rf /var/lib/apt/lists/ \
   && set +x
 
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
 ARG CC_GID=960
 ARG CC_UID=960
 

webgui-new/.env

@@ -0,0 +1,3 @@
+PUBLIC_URL=
+BACKEND_URL=http://localhost:8080
+DEVSERVER_PORT=3000

webgui-new/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react-hooks"],
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "globals": {
+    "JSX": true
+  }
+}

webgui-new/.gitignore

@@ -0,0 +1,37 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# production
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# thrift generated files
+generated/

webgui-new/.nvmrc

@@ -0,0 +1 @@
+v18.13.0

webgui-new/CMakeLists.txt

@@ -0,0 +1,20 @@
+install(DIRECTORY
+        public src
+        DESTINATION ${INSTALL_WEBROOT_REACT_DIR}/app
+        USE_SOURCE_PERMISSIONS
+        FILES_MATCHING PATTERN "[^.]*")
+
+install(FILES
+        tsconfig.json
+        next.config.js
+        thrift-codegen.sh
+        .env
+        DESTINATION ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+# Install React application
+install(CODE "set(CC_PACKAGE \"${CMAKE_CURRENT_SOURCE_DIR}/package.json\")")
+install(CODE "set(INSTALL_WEBROOT_DIR ${INSTALL_WEBROOT_DIR})")
+install(CODE "set(INSTALL_WEBROOT_REACT_DIR ${INSTALL_WEBROOT_REACT_DIR})")
+install(CODE "set(CMAKE_BUILD_TYPE ${CMAKE_BUILD_TYPE})")
+install(CODE "set(CMAKE_SOURCE_DIR ${CMAKE_SOURCE_DIR})")
+install(SCRIPT InstallReact.cmake)

webgui-new/InstallReact.cmake

@@ -0,0 +1,45 @@
+# Utility functions
+include(${CMAKE_SOURCE_DIR}/Functions.cmake)
+
+message("Install npm packages...")
+
+if(${CC_PACKAGE} IS_NEWER_THAN ${INSTALL_WEBROOT_REACT_DIR}/app/package.json)
+  execute_process(
+    COMMAND ${CMAKE_COMMAND} -E copy ${CC_PACKAGE} ${INSTALL_WEBROOT_REACT_DIR}/app/package.json
+    WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR})
+
+  execute_process(
+    COMMAND npm install
+    WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+endif()
+
+message("Installation of npm packages are finished.")
+
+# Generate TypeScript from Thrift
+execute_process(
+  COMMAND bash -c "chmod +x thrift-codegen.sh"
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+execute_process(
+  COMMAND bash thrift-codegen.sh --thrift-source ${CMAKE_SOURCE_DIR}
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+message("Building React App...")
+
+execute_process(
+  COMMAND npm run build
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+# Move build directory out of application directory
+file(REMOVE_RECURSE ${INSTALL_WEBROOT_REACT_DIR}/out)
+file(RENAME ${INSTALL_WEBROOT_REACT_DIR}/app/out ${INSTALL_WEBROOT_REACT_DIR}/out)
+
+# Create symbolic link
+execute_process(COMMAND ${CMAKE_COMMAND} -E create_symlink ../webgui-new/out ${INSTALL_WEBROOT_DIR}/new)
+
+if (CMAKE_BUILD_TYPE STREQUAL "Release")
+  # Remove application source code in case of Release build
+  file(REMOVE ${INSTALL_WEBROOT_REACT_DIR}/app)
+endif()
+
+message("Building React App finished.")