Merge pull request #283 from helxplatform/develop

Creating Release for UI
Adding:

Readiness probe on Kubernetes Cluster
Non-root image for UI
A few bugs related to UI experience
Dug changes

.env.sample

@@ -3,7 +3,7 @@ REACT_APP_WORKSPACES_ENABLED=false
 # Enable when working with Dug
 REACT_APP_SEMANTIC_SEARCH_ENABLED='true'
 # Points the app to the Dug API
-REACT_APP_HELX_SEARCH_URL='https:\/\/heal-dev.apps.renci.org'
+REACT_APP_HELX_SEARCH_URL='https:\/\/heal-dev.apps.renci.org\/search-api'
 # Only necessary if working with analytics specifically.
 # Should be a project token/GA property. Make sure to configure details
 # in env.json
@@ -12,11 +12,11 @@ REACT_APP_ANALYTICS=''
 REACT_APP_TRANQL_URL='https:\/\/heal-dev.apps.renci.org\/tranql\/'
 # Brand setting. <braini, catalyst, heal, scidas, eduhelx, helx>
 REACT_APP_UI_BRAND_NAME='catalyst'
-# Hide support page sections if necessary. <'community', 'documentation'>. Comma-delimited string, e.g. "community,documentation"
+# Hide support page sections if necessary. <'community', 'documentation', 'heal-support'>. Comma-delimited string, e.g. "community,documentation"
 REACT_APP_HIDDEN_SUPPORT_SECTIONS=''
 # Hide tabs in the result modal/cards. <'overview', 'studies', 'cdes', 'kgs', 'tranql', 'robokop'>. Comma-delimited string, e.g. "tranql,robokop"
 REACT_APP_HIDDEN_RESULT_TABS=''
 # Some static assets such as app logo are loaded externally from the dockstore repository (helx-apps).
 REACT_APP_DOCKSTORE_BRANCH=master
 # Some static assets such as brand logo are loaded externally from the Appstore repository.
-REACT_APP_APPSTORE_ASSET_BRANCH=master
+REACT_APP_APPSTORE_ASSET_BRANCH=master

.github/workflows/build-push-dev-image.yml

@@ -44,25 +44,25 @@ jobs:
       run: echo ${{ steps.vars.outputs.short_sha }}
 
     # https://github.com/marketplace/actions/git-semantic-version
-    - name: Semver Check
-      uses: paulhatch/[email protected]
-      id: version
-      with:
-        # The prefix to use to identify tags
-        tag_prefix: "v"
-        # A string which, if present in a git commit, indicates that a change represents a
-        # major (breaking) change, supports regular expressions wrapped with '/'
-        major_pattern: "/breaking:|major:/"
-        # A string which indicates the flags used by the `major_pattern` regular expression. Supported flags: idgs
-        major_regexp_flags: "ig"
-        # Same as above except indicating a minor change, supports regular expressions wrapped with '/'
-        minor_pattern: "/feat:|feature:|minor:/"
-        # A string which indicates the flags used by the `minor_pattern` regular expression. Supported flags: idgs
-        minor_regexp_flags: "ig"
-        # A string to determine the format of the version output
-        # version_format: "${major}.${minor}.${patch}-prerelease${increment}"
-        version_format: "${major}.${minor}.${patch}-prerelease${increment}"
-        search_commit_body: false
+    # - name: Semver Check
+    #   uses: paulhatch/[email protected]
+    #   id: version
+    #   with:
+    #     # The prefix to use to identify tags
+    #     tag_prefix: "v"
+    #     # A string which, if present in a git commit, indicates that a change represents a
+    #     # major (breaking) change, supports regular expressions wrapped with '/'
+    #     major_pattern: "/breaking:|major:/"
+    #     # A string which indicates the flags used by the `major_pattern` regular expression. Supported flags: idgs
+    #     major_regexp_flags: "ig"
+    #     # Same as above except indicating a minor change, supports regular expressions wrapped with '/'
+    #     minor_pattern: "/feat:|feature:|minor:/"
+    #     # A string which indicates the flags used by the `minor_pattern` regular expression. Supported flags: idgs
+    #     minor_regexp_flags: "ig"
+    #     # A string to determine the format of the version output
+    #     # version_format: "${major}.${minor}.${patch}-prerelease${increment}"
+    #     version_format: "${major}.${minor}.${patch}-prerelease${increment}"
+    #     search_commit_body: false
 
     # Docker Buildx is important to caching in the Build And Push Container
     # step
@@ -102,8 +102,6 @@ jobs:
         tags: |
           ${{ github.repository }}:develop
           ${{ github.repository }}:${{ steps.vars.outputs.short_sha }}
-          ${{ github.repository }}:v${{ steps.version.outputs.version }}
-          containers.renci.org/${{ github.repository }}:v${{ steps.version.outputs.version }}
           containers.renci.org/${{ github.repository }}:develop
           containers.renci.org/${{ github.repository }}:${{ steps.vars.outputs.short_sha }}
         cache-from: type=registry,ref=${{ github.repository }}:buildcache

Dockerfile

@@ -1,16 +1,16 @@
 ###################
 # Build environment
 ###################
-FROM node:18.16-alpine AS builder
+FROM node:lts-bullseye-slim AS builder
 
 ARG REACT_APP_WORKSPACES_ENABLED=true
 ENV REACT_APP_WORKSPACES_ENABLED=$REACT_APP_WORKSPACES_ENABLED
 
 # Copy and install requirements
 WORKDIR /usr/src/app
 COPY --chown=node:node "package*.json" /usr/src/app/
-RUN npm i -g npm@latest
-RUN npm ci
+RUN npm install -g npm@latest
+RUN npm clean-install
 
 COPY --chown=node:node . /usr/src/app
 RUN npm run build
@@ -19,15 +19,23 @@ RUN npm run build
 # Production environment
 ########################
 
-FROM nginx:latest
-COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+FROM nginx:1.25.1-alpine-slim
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
 COPY --from=builder /usr/src/app/build/ /usr/share/nginx/static/
-RUN mv /usr/share/nginx/static/frontend/index.html /usr/share/nginx/html/
+# RUN mv /usr/share/nginx/static/frontend/index.html /usr/share/nginx/html/
+
+RUN apk upgrade
+RUN apk add bash
 
 WORKDIR /usr/src/app
 COPY bin /usr/src/app/bin
 ENV PATH="/usr/src/app/bin:${PATH}"
 
+# Allow GID=0 to modify files/dirs.  Mainly for OpenShift but can be used
+# elsewhere.
+RUN chgrp -R 0 /usr/share/nginx && \
+    chmod -R g=u /usr/share/nginx
 
 EXPOSE 80
 CMD ["start_server", "/usr/share/nginx/static/frontend/env.json"]

Makefile

@@ -1,7 +1,8 @@
 SHELL 			 := /bin/bash
 BRANCH_NAME	 	 := $(shell git branch --show-current | sed -r 's/[/]+/_/g')
 override VERSION := ${BRANCH_NAME}-${VER}
-DOCKER_ORG   	 := helxplatform
+#DOCKER_ORG   	 := helxplatform
+DOCKER_ORG   	 := containers.renci.org/helxplatform
 DOCKER_TAG   	 := helx-ui:${VERSION}
 BUILD_PATH   	 := ./build/frontend
 TYCHO_BRANCH 	 := develop
@@ -31,7 +32,7 @@ build.npm:
 build.image:
 	if [ -z "$(VER)" ]; then echo "Please provide a value for the VER variable like this:"; echo "make VER=4 build.image"; false; fi;
 	echo "Building docker image: $(DOCKER_TAG)"
-	docker build . --no-cache --pull -t $(DOCKER_ORG)/$(DOCKER_TAG)
+	docker build --platform=linux/amd64 . --no-cache --pull -t $(DOCKER_ORG)/$(DOCKER_TAG)
 
 #build: build project and image
 build: build.npm build.image

bin/create_index

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+if [ -z "$1" ]
+  then
+    echo "Usage: create_index /path/to/build"
+    exit 1
+fi
+
+title="${META_TITLE:-HeLx UI}"
+description="${META_DESCRIPTION:-HeLx UI}"
+brand_name="${REACT_APP_UI_BRAND_NAME}"
+appstore_asset_branch="${REACT_APP_APPSTORE_ASSET_BRANCH}"
+
+cat "$1/index_template.html" | sed \
+  -e "s/%META_TITLE%/$title/" \
+  -e "s/%META_DESCRIPTION%/$description/" \
+  -e "s/%BRAND%/$brand_name/" \
+  -e "s/%APPSTORE_ASSET_BRANCH%/$appstore_asset_branch/" \
+  > $1/index.html

bin/populate_env

@@ -11,11 +11,15 @@ search_enabled="${REACT_APP_SEMANTIC_SEARCH_ENABLED:-true}"
 search_url="${REACT_APP_HELX_SEARCH_URL}"
 brand_name="${REACT_APP_UI_BRAND_NAME}"
 tranql_url="${REACT_APP_TRANQL_URL:-\/tranql}"
-analytics="${REACT_APP_ANALYTICS:-}"
 hidden_support_sections="${REACT_APP_HIDDEN_SUPPORT_SECTIONS}"
 hidden_result_tabs="${REACT_APP_HIDDEN_RESULT_TABS}"
 deployment_namespace="${REACT_APP_DEPLOYMENT_NAMESPACE}"
 appstore_asset_branch="${REACT_APP_APPSTORE_ASSET_BRANCH}"
+analytics_enabled="${REACT_APP_ANALYTICS_ENABLED:-false}"
+analytics_platform="${REACT_APP_ANALYTICS_PLATFORM}"
+analytics_token="${REACT_APP_ANALYTICS_TOKEN}"
+meta_title="${META_TITLE:-HeLx UI}"
+meta_description="${META_DESCRIPTION:-HeLx UI}"
 
 
 template='{
@@ -26,17 +30,18 @@ template='{
     "workspaces_enabled": "%WORKSPACES_ENABLED%",
     "tranql_url": "%TRANQL_URL%",
     "analytics": {
-      "enabled": true,
-      "platform": "mixpanel",
-      "auth": {
-      "mixpanel_token": "%ANALYTICS%",
-      "ga_property": ""
-      }
+      "enabled": %ANALYTICS_ENABLED%,
+      "platform": "%ANALYTICS_PLATFORM%",
+      "token": "%ANALYTICS_TOKEN%"
     },
     "hidden_support_sections": "%HIDDEN_SUPPORT_SECTIONS%",
     "hidden_result_tabs": "%HIDDEN_RESULT_TABS%",
     "deployment_namespace": "%DEPLOYMENT_NAMESPACE%",
-    "appstore_asset_branch": "%APPSTORE_ASSET_BRANCH%"
+    "appstore_asset_branch": "%APPSTORE_ASSET_BRANCH%",
+    "meta": {
+      "title": "%META_TITLE%",
+      "description": "%META_DESCRIPTION%"
+    }
 }'
 
 echo "$template" | sed \
@@ -46,8 +51,12 @@ echo "$template" | sed \
   -e "s/%BRAND%/$brand_name/" \
   -e "s/%HIDDEN_SUPPORT_SECTIONS%/$hidden_support_sections/" \
   -e "s/%HIDDEN_RESULT_TABS%/$hidden_result_tabs/" \
-  -e "s/%ANALYTICS%/$analytics/" \
   -e "s/%TRANQL_URL%/$tranql_url/" \
   -e "s/%DEPLOYMENT_NAMESPACE%/$deployment_namespace/" \
   -e "s/%APPSTORE_ASSET_BRANCH%/$appstore_asset_branch/" \
+  -e "s/%ANALYTICS_ENABLED%/$analytics_enabled/" \
+  -e "s/%ANALYTICS_PLATFORM%/$analytics_platform/" \
+  -e "s/%ANALYTICS_TOKEN%/$analytics_token/" \
+  -e "s/%META_TITLE%/$meta_title/" \
+  -e "s/%META_DESCRIPTION%/$meta_description/" \
   > $1

bin/start_server

@@ -6,5 +6,12 @@ if [ -z "$1" ]
     echo "Usage: start_server /path/to/output/env.json"
     exit 1
 fi
+
+# Create env.json file
 populate_env $1
+# Generate the index.html file
+create_index /usr/share/nginx/static/frontend 
+# Move into nginx html folder
+mv /usr/share/nginx/static/frontend/index.html /usr/share/nginx/html/
+
 nginx -g "daemon off;"

nginx/default.conf

@@ -0,0 +1,22 @@
+server {
+    listen       8080 default_server;
+    listen  [::]:8080 default_server;
+
+    server_name  _;
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+    charset UTF-8;
+
+    location /static/ {
+        root /usr/share/nginx/;
+    }
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # access_log off;
+    # log_not_found off;
+    # error_log  /var/log/nginx/error.log error;
+}

nginx/nginx.conf

@@ -1,22 +1,41 @@
-server {
-    listen       80 default_server;
-    listen  [::]:80 default_server;
-
-    server_name  _;
-    root   /usr/share/nginx/html;
-    index  index.html index.htm;
-
-    charset UTF-8;
-
-    location /static/ {
-        root /usr/share/nginx/;
-    }
-
-    location / {
-        try_files $uri /index.html;
-    }
-
-    # access_log off;
-    # log_not_found off;
-    # error_log  /var/log/nginx/error.log error;
+# /etc/nginx/nginx.conf
+
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+# pid        /var/run/nginx.pid;
+pid        /tmp/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    # added to run as non-root
+    client_body_temp_path /tmp/client_temp;
+    proxy_temp_path       /tmp/proxy_temp_path;
+    fastcgi_temp_path     /tmp/fastcgi_temp;
+    uwsgi_temp_path       /tmp/uwsgi_temp;
+    scgi_temp_path        /tmp/scgi_temp;
+
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
 }