Synchronizing code from bitbucket repository (#14)

gui/.dockerignore

@@ -1 +1,6 @@
-Dockerfile
+**/node_modules
+**/dist
+/gerrit
+/licenses
+.env*
+!.env.docker

gui/.env.docker

@@ -0,0 +1,2 @@
+VITE_API_URL=VITE_API_URL_PLACEHOLDER
+CFSB_API_URL=CFSB_API_URL_PLACEHOLDER

gui/.gitignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+/*.env.*
 node_modules
 dist
 dist-ssr
@@ -24,4 +24,7 @@ dist-ssr
 
 # we are using pnpm-lock.yaml
 package-lock.json
-yarn.lock
+yarn.lock
+/gerrit
+
+!.env.docker

gui/.nvmrc

@@ -0,0 +1 @@
+v20.13.1

gui/Dockerfile

@@ -1,4 +1,19 @@
-FROM docker.io/library/node:21.4.0-bookworm
-COPY . /app
+# Build the Vue app
+FROM node:20 as build-stage
 WORKDIR /app
-RUN corepack enable pnpm && pnpm install && npx vue-tsc
+COPY package*.json ./
+COPY .env.docker ./.env
+
+RUN npm install
+COPY ./ .
+RUN npm run build
+
+# Copy the compiled app in an NGINX contaier
+FROM nginx:alpine as production-stage
+RUN mkdir /app
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Executing the script at container runtime
+COPY set_env.sh /docker-entrypoint.d/
+RUN chmod +x /docker-entrypoint.d/set_env.sh
+

gui/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "engines": {
-    "node": "v21.4.0"
+    "node": "v20.9.0"
   },
   "scripts": {
     "serve": "vite",

gui/set_env.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+ROOT_DIR=/usr/share/nginx/html
+
+# Replace env vars in files served by NGINX
+for file in $ROOT_DIR/assets/*.js* $ROOT_DIR/index.html;
+do
+  echo "Setting VITE_API_URL_PLACEHOlDER environment variables ${VITE_API_URL}"
+  sed -i 's|VITE_API_URL_PLACEHOLDER|'${VITE_API_URL}'|g' $file
+
+  echo "Setting CFSB_API_URL_PLACEHOLDER environment variables ${CFSB_API_URL}"
+  sed -i 's|CFSB_API_URL_PLACEHOLDER|'${CFSB_API_URL}'|g' $file
+  # Your other variables here...
+done
+
+
+exec "$@"

gui/src/components/Application/Details.vue

@@ -129,7 +129,7 @@
                             v-model="env.name"
                             type="text"
                             :class="{
-                              'input--invalid': v.name?.$error || hasBackendError(`env[${index}].name`)
+                              'input--invalid': v.name?.$error || hasBackendError(`environmentVariables[${index}].name`)
                             }"
                           />
                         </div>
@@ -142,15 +142,19 @@
                             v-model="env.value"
                             :type="env.secret ==true ? 'password' : 'text' "
                             :class="{
-                              'input--invalid': v.value?.$error || hasBackendError(`env[${index}].value`)
+                              'input--invalid': v.value?.$error || hasBackendError(`environmentVariables[${index}].value`)
                             }"
                           />
                         </div>
                       </div>
                     </Table.Td>
                     <Table.Td class="w-1/6">
                       <FormSwitch class="ml-auto w-auto">
-                        <FormSwitch.Input id="env-{{index}}-secret" v-model="env.secret" type="checkbox" />
+                        <FormSwitch.Input id="env-{{String(index)}}-secret" v-model="env.secret" type="checkbox"
+                            :class="{
+                              'input--invalid': v.value?.$error || hasBackendError(`environmentVariables[${index}].secret`)
+                            }"
+                        />
                       </FormSwitch>
                     </Table.Td>
                     <Table.Td class="w-1/6">

gui/src/components/Application/Metrics/index.vue

@@ -3,7 +3,8 @@
     <Templates :templates="templates" />
     <Parameters :parameters="parameters" :templateNames="templateNames" />
 
-    <Metrics :metrics="metrics" :componentList="props.payload.componentList"
+    <Metrics :metrics="metrics"
+             :componentList="props.payload.componentList"
       :templateNames="templateNames"/>
 
     <div class="flex flex-col space-y-5">

gui/src/components/Application/Resources.vue

@@ -62,6 +62,7 @@ const resources = computed<Array<IAppResource>>(() =>
       uuid: resource.uuid,
       title: resource.title,
       platform: resource.platform.title,
+      regions: resource.regions,
       enabled: isEnabled
     }
   })

gui/src/components/Modal/ResourceCreation.vue

@@ -33,6 +33,7 @@ const resourceData = reactive<IResourcePayload>({
   platform: {"uuid":'','title':''} as IPlatform,
   _platform: [{"uuid":'','title':''} as IPlatform], // TODO Remove this
   securityGroup:"",
+  regions:"",
   subnet:"",
   endpoint:"",
   identityVersion:"",