feat: update frontend

utils/indigo-service/frontend/Dockerfile

@@ -1,38 +1,23 @@
-FROM node:12-slim as ui-builder
+FROM node:14-slim as ui-builder
 RUN apt update && \
     apt upgrade -y
-COPY ./ui /ui
-WORKDIR /ui
-RUN npm install
-RUN npm run gulp archive
+#RUN npm install -g yarn
+RUN mkdir -p /var/ui
+#TODO download from git
+COPY ./ui/build /var/ui
 
 FROM nginx:latest
 
 ENV DEBIAN_FRONTEND=noninteractive
 
-RUN apt update && \
-    apt upgrade -y && \
-    apt install -y --no-install-recommends \
-      unzip
-
 # Install UI
-COPY --from=ui-builder /ui/indigo-service-ui*.zip /opt/
+COPY --from=ui-builder /var/ui /opt
 RUN cd /opt && \
-    unzip indigo-service-ui-*.zip && \
-    mkdir -p /var/www/ && \
-    mv indigo-service-ui*/ /var/www/ui/
+    mkdir -p /var/www/
+RUN mv /opt /var/www/ui
 
-# Install Ketcher
-#ADD https://github.com/epam/ketcher/releases/download/v2.5.1/ketcher-remote-2.5.1.zip /opt/ketcher-remote-2.5.1.zip
-ADD https://github.com/epam/ketcher/releases/download/v2.1.0/ketcher-2.1.0.zip /opt/ketcher-2.1.0.zip
-RUN cd /opt && \
-    unzip ketcher*.zip && \
-    # mv remote/ /srv/ketcher/ && \
-    mv ketcher/ /srv/ketcher/ && \
-    ls /srv/ketcher && \
-    cp /srv/ketcher/ketcher.html /srv/ketcher/index.html
 
-COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ../../../Indigo/utils/indigo-service/frontend/nginx/nginx.conf /etc/nginx/conf.d/default.conf
 
 # Clean
 RUN apt autoremove -y && \

utils/indigo-service/frontend/nginx/nginx.conf

@@ -9,29 +9,42 @@ server {
     proxy_read_timeout 600;
     send_timeout 600;
 
-    location / {
+# Internal paths
+#   start
+    location /search {
         root /var/www/ui;
         index index.html;
-        try_files $uri $uri/ @indigoservice;
+        try_files $uri /index.html;
     }
-
-    location /ketcher/ {
-        add_header 'Access-Control-Allow-Origin' '*';
-        root /srv;
+    location /libs {
+        root /var/www/ui;
         index index.html;
-        try_files $uri $uri/ @indigoservice;
+        try_files $uri /index.html;
     }
+#   end
 
-    location @indigoservice {
-        # Should be set 'always' to transfer our lovely HTTP500 errors
-        # see: https://epa.ms/d6u2d
+    location / {
+        root /var/www/ui;
+        index index.html;
+        try_files $uri /index.html;
+    }
 
-        # Headers could be also set by Flasgger in service/config.py
+    location /v2 {
         add_header 'Access-Control-Allow-Origin' '*' always;
         add_header 'Access-Control-Allow-Methods' 'POST, GET, PUT, DELETE, OPTIONS' always;
         add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type' always;
         add_header 'Access-Control-Max-Age' '86400' always;
-        include uwsgi_params;
-        uwsgi_pass backend:8002;
+
+        proxy_pass http://backend-postgres:80;
+    }
+
+    location /v3 {
+      add_header 'Access-Control-Allow-Origin' '*' always;
+      add_header 'Access-Control-Allow-Methods' 'POST, GET, PUT, DELETE, OPTIONS' always;
+      add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type' always;
+      add_header 'Access-Control-Max-Age' '86400' always;
+
+      proxy_pass  http://backend-elastic:80;
     }
+
 }

utils/indigo-service/frontend/ui/.env

@@ -0,0 +1,7 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_API_PATH=/v2
+PUBLIC_URL=./
+GENERATE_SOURCEMAP = false
+REACT_APP_API_POSTGRES=http://18.206.56.62:8080/v2
+REACT_APP_API_ELASTIC=http://18.206.56.62:8080/v3
+REACT_APP_LIBS_PASSWORD=12345

utils/indigo-service/frontend/ui/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

utils/indigo-service/frontend/ui/.gitignore

@@ -1,4 +1,30 @@
-/dist
-/extra
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 /node_modules
-/*.zip
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# IntelliJ IDEA
+.idea/*
+.idea
+*.iws
+*.iml
+*.ipr
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

utils/indigo-service/frontend/ui/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,ts,tsx,json}": ["prettier --write"],
+  "*.{css,less}": ["stylelint --formatter verbose --fix --allow-empty-input"]
+}

utils/indigo-service/frontend/ui/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('prettier-config-standard')
+}

utils/indigo-service/frontend/ui/.stylelintignore

@@ -0,0 +1,4 @@
+build
+dist
+docs
+style

utils/indigo-service/frontend/ui/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "at-rule-no-unknown": null
+  }
+}

utils/indigo-service/frontend/ui/README.md

@@ -1,27 +1,34 @@
-# EPAM Indigo projects #
+# General Info
 
-Copyright (c) 2009-2022 EPAM Systems
+The frontend is a React app, which was reworked from the legacy Mithrill library. It features two primary
+paths: `/search` and `/libs`.
 
-## Introduction ##
+## /search
 
-This repository includes web UI for Indigo service
+The `/search` path includes a Ketcher window and various tools for searching molecules from libraries. As a user, you
+can:
 
-## Source code organization ##
+- Search using Bingo-Elastic
+- Search using Postgres
+- Search by different match types (exact match, similarity match, submatch)
+- Draw the desired molecule using the Ketcher window
 
-## Build instructions ##
+## /libs
 
-```
-npm install && gulp
-```
+The `/libs` path requires a password for user access. The password is stored in the `REACT_APP_LIBS_PASSWORD`
+environment variable. In the libs tab, users can:
 
-### Use docker
+- Add new libraries
+- Remove a library
+- Upload .sdf files to a library
 
-```
-docker-compose up
-```
+By exploring the `/search` and `/libs` paths, users can access the essential features of the Indigo toolkit through the
+Indigo Service.
+
+## How to build
 
-## Run server with proxy path ##
+To build react app use next command:
 
 ```
-npm install && gulp && gulp serve --api-proxy="http://indigoweb.epm-lsop.projects.epam.com"
+yarn run build
 ```

utils/indigo-service/frontend/ui/config/webpack.config.js

@@ -0,0 +1,38 @@
+const {
+  override,
+  addBundleVisualizer,
+  addWebpackModuleRule,
+  addWebpackPlugin
+} = require('customize-cra')
+const webpack = require('webpack')
+const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
+const GitRevisionPlugin = require('git-revision-webpack-plugin')
+
+const gitRevisionPlugin = new GitRevisionPlugin()
+const applicationVersion = gitRevisionPlugin.version().split('-')[0]
+
+module.exports = override(
+  addBundleVisualizer({}, true),
+  addWebpackModuleRule({
+    test: /\.js$/,
+    enforce: 'pre',
+    loader: 'source-map-loader',
+    exclude: /node_modules/
+  }),
+  addWebpackPlugin(
+    new webpack.EnvironmentPlugin({
+      MODE: process.env.MODE,
+      API_PATH: process.env.REACT_APP_API_PATH,
+      ENABLE_POLYMER_EDITOR: !!process.env.ENABLE_POLYMER_EDITOR,
+      KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false)
+    })
+  ),
+  addWebpackPlugin(
+    new HtmlReplaceWebpackPlugin([
+      {
+        pattern: '@@version',
+        replacement: applicationVersion
+      }
+    ])
+  )
+)