UI CI

.devcontainer/Dockerfile

@@ -18,10 +18,9 @@ RUN bash /tmp/non-root-user.sh "${USERNAME}" "${USER_UID}" "${USER_GID}"
 # Set env for tracking that we're running in a devcontainer
 ENV DEVCONTAINER=true
 
-# [Option] Install Node.js for GH actions tests and UI
-ARG INSTALL_NODE="true"
+# Install Node.js
 ARG NODE_VERSION="lts/*"
-RUN if [ "${INSTALL_NODE}" = "true" ]; then su $USERNAME -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
+RUN su $USERNAME -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
 
 # Install terraform
 ARG TERRAFORM_VERSION="1.1.5"
@@ -97,4 +96,4 @@ COPY ./.devcontainer/scripts/gh.sh /tmp/
 RUN if [ "${INTERACTIVE}" = "true" ]; then /tmp/gh.sh; fi
 
 # install SWA CLI
-RUN if [ "${INSTALL_NODE}" = "true" ]; then npm install -g @azure/static-web-apps-cli; fi
+RUN npm install -g @azure/static-web-apps-cli

Makefile

@@ -17,7 +17,7 @@ build-and-push-resource-processor: build-resource-processor-vm-porter-image push
 build-and-push-gitea: build-gitea-image push-gitea-image
 build-and-push-guacamole: build-guacamole-image push-guacamole-image
 build-and-push-mlflow: build-mlflow-image push-mlflow-image
-tre-deploy: deploy-core deploy-shared-services db-migrate show-core-output
+tre-deploy: deploy-core build-and-deploy-ui deploy-shared-services db-migrate show-core-output
 deploy-shared-services:
 	$(MAKE) firewall-install \
 	&& . ./devops/scripts/load_env.sh ./templates/core/.env \
@@ -348,6 +348,17 @@ static-web-upload:
 	&& . ${MAKEFILE_DIR}/devops/scripts/load_env.sh ${MAKEFILE_DIR}/templates/core/private.env \
 	&& ${MAKEFILE_DIR}/templates/core/terraform/scripts/upload_static_web.sh
 
+build-and-deploy-ui:
+	$(call target_title, "Use Static Web App CLI to deploy UI") \
+	&& . ${MAKEFILE_DIR}/devops/scripts/check_dependencies.sh nodocker \
+	&& . ${MAKEFILE_DIR}/devops/scripts/load_env.sh ./templates/core/.env \
+	&& . ${MAKEFILE_DIR}/devops/scripts/load_env.sh ./devops/.env \
+	&& . ${MAKEFILE_DIR}/devops/scripts/load_terraform_env.sh ./devops/.env \
+	&& . ${MAKEFILE_DIR}/devops/scripts/load_terraform_env.sh ./templates/core/.env \
+	&& pushd ${MAKEFILE_DIR}/templates/core/terraform/ > /dev/null && . ./outputs.sh && popd > /dev/null \
+	&& . ${MAKEFILE_DIR}/devops/scripts/load_env.sh ${MAKEFILE_DIR}/templates/core/private.env \
+	&& ${MAKEFILE_DIR}/templates/core/terraform/scripts/build-deploy-ui.sh
+
 prepare-for-e2e:
 	$(call workspace_bundle,base) \
 	&& $(call workspace_bundle,innereye) \

devops/.env.sample

@@ -1,5 +1,6 @@
 # Management infrastructure
 LOCATION=__CHANGE_ME__
+UI_LOCATION=__CHANGE_ME__ # current options are 'westus2,centralus,eastus2,westeurope,eastasia'. Note: will default to westeurope in TF (resource is seen as 'global' anyway)
 MGMT_RESOURCE_GROUP_NAME=__CHANGE_ME__
 MGMT_STORAGE_ACCOUNT_NAME=__CHANGE_ME__
 TERRAFORM_STATE_CONTAINER_NAME=tfstate

scripts/aad/aad-app-reg.sh

@@ -558,7 +558,7 @@ JSON
 
   swaggerUIApp=$(jq -c . << JSON
 {
-    "displayName": "${appName} Swagger UI",
+    "displayName": "${appName} Client Apps",
     "signInAudience": "AzureADMyOrg",
     "requiredResourceAccess": ${swaggerRequiredResourceAccess},
     "spa": {
@@ -571,7 +571,7 @@ JSON
 )
 
   # Is the Swagger UI app already registered?
-  existingSwaggerUIApp=$(get_existing_app --name "${appName} Swagger UI")
+  existingSwaggerUIApp=$(get_existing_app --name "${appName} Client Apps")
 
   if [[ -n ${existingSwaggerUIApp} ]]; then
       swaggerUIAppObjectId=$(echo "${existingSwaggerUIApp}" | jq -r '.objectId')

templates/core/.env.sample

@@ -35,6 +35,8 @@ SWAGGER_UI_CLIENT_ID=__CHANGE_ME__
 # address of the deploying machine.
 #PUBLIC_DEPLOYMENT_IP_ADDRESS=__CHANGE_ME__
 
+# Uncomment and set this to true to deploy the UI provided as part of this repo
+# DEPLOY_UI=true
 
 ####################################
 # Useful developer settings

templates/core/terraform/api-webapp.tf

@@ -6,6 +6,13 @@ locals {
   version = replace(replace(replace(data.local_file.api_app_version.content, "__version__ = \"", ""), "\"", ""), "\n", "")
 }
 
+resource "azurerm_static_site" "tre-ui" {
+  count               = var.deploy_ui ? 1 : 0
+  name                = "ui-${var.tre_id}"
+  resource_group_name = azurerm_resource_group.core.name
+  location            = var.ui_location
+}
+
 resource "azurerm_app_service_plan" "core" {
   name                = "plan-${var.tre_id}"
   resource_group_name = azurerm_resource_group.core.name
@@ -77,7 +84,10 @@ resource "azurerm_app_service" "api" {
     websockets_enabled                   = false
 
     cors {
-      allowed_origins     = []
+      allowed_origins = [
+        var.deploy_ui ? "https://${azurerm_static_site.tre-ui[0].default_host_name}" : "",
+        var.enable_local_debugging ? "http://localhost:3000" : ""
+      ]
       support_credentials = false
     }
 

templates/core/terraform/json-to-env.sh

@@ -76,6 +76,14 @@ jq -r '
         {
             "path": "registry_server",
             "env_var": "REGISTRY_SERVER"
+        },
+        {
+            "path": "ui_api_key",
+            "env_var": "UI_API_KEY"
+        },
+        {
+            "path": "ui_host_name",
+            "env_var": "UI_HOST_NAME"
         }
     ]
         as $env_vars_to_extract

templates/core/terraform/main.tf

@@ -113,9 +113,3 @@ module "resource_processor_vmss_porter" {
     azurerm_key_vault_access_policy.deployer
   ]
 }
-
-resource "azurerm_static_site" "tre-ui" {
-  name                = "${var.tre_id}-ui"
-  resource_group_name = azurerm_resource_group.core.name
-  location            = var.location
-}

templates/core/terraform/outputs.tf

@@ -78,5 +78,10 @@ output "registry_server" {
 }
 
 output "ui_api_key" {
-  value = azurerm_static_site.tre-ui.api_key
+  value     = var.deploy_ui ? azurerm_static_site.tre-ui[0].api_key : ""
+  sensitive = true
+}
+
+output "ui_host_name" {
+  value = var.deploy_ui ? azurerm_static_site.tre-ui[0].default_host_name : ""
 }

templates/core/terraform/scripts/build-deploy-ui.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+set -e
+
+# skip if feature flag not set to true
+if [ ! "${DEPLOY_UI}" == "true" ]; then
+  echo "Skipping UI deployment as DEPLOY_UI is not true"
+  exit 0
+fi
+
+pushd ./ui/app
+
+# replace the values in the config file
+jq --arg rootClientId "${SWAGGER_UI_CLIENT_ID}" \
+  --arg rootTenantId "${AAD_TENANT_ID}" \
+  --arg treApiClientId "${API_CLIENT_ID}" \
+  --arg treUrl "https://${FQDN}/api" \
+  '.rootClientId = $rootClientId | .rootTenantId = $rootTenantId | .treApiClientId = $treApiClientId | .treUrl = $treUrl' ./src/config.sample.json > ./src/config.json
+
+# build and deploy the app
+yarn install
+yarn build
+SWA_CLI_DEPLOYMENT_TOKEN="${UI_API_KEY}" swa deploy -a ./build -n "${TRE_ID}"-ui --env ""
+echo "TRE UI deployed. Please add the above URI as a Redirect URI in the AAD 'TRE Client Apps (swagger app)' app. This is currently a manual step."
+
+popd
+

templates/core/terraform/variables.tf

@@ -12,6 +12,18 @@ variable "location" {
   description = "Azure region for deployment of core TRE services"
 }
 
+variable "ui_location" {
+  type        = string
+  description = "Azure region for the UI Static Web App. Options are: 'westus2,centralus,eastus2,westeurope,eastasia'"
+  default     = "westeurope"
+}
+
+variable "deploy_ui" {
+  type        = bool
+  description = "Feature flag to determine whether to deploy the inbuilt TRE UI or not"
+  default     = false
+}
+
 variable "acr_name" {
   type        = string
   description = "Management ACR name"

ui/app/.gitignore

@@ -23,4 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 .eslintcache
 
-!public/index.html
+config.json
+
+!public/index.html

ui/app/src/components/workspaces/WorkspaceLeftNav.tsx

@@ -7,14 +7,16 @@ import { CreateUpdateResource } from '../shared/CreateUpdateResource/CreateUpdat
 import { ResourceType } from '../../models/resourceType';
 import { useBoolean } from '@fluentui/react-hooks';
 import { WorkspaceContext } from '../../contexts/WorkspaceContext';
+import { Resource } from '../../models/resource';
 
 // TODO:
 // - we lose the selected styling when navigating into a user resource. This may not matter as the user resource page might die away.
 // - loading placeholders / error content(?)
 
 interface WorkspaceLeftNavProps {
   workspaceServices: Array<WorkspaceService>,
-  setWorkspaceService: (workspaceService: WorkspaceService) => void
+  setWorkspaceService: (workspaceService: WorkspaceService) => void,
+  addWorkspaceService: (w: WorkspaceService) => void
 }
 
 export const WorkspaceLeftNav: React.FunctionComponent<WorkspaceLeftNavProps> = (props:WorkspaceLeftNavProps) => {
@@ -90,6 +92,7 @@ export const WorkspaceLeftNav: React.FunctionComponent<WorkspaceLeftNavProps> =
         onClose={closeCreatePanel}
         resourceType={ResourceType.WorkspaceService}
         parentResource={workspaceCtx.workspace}
+        onAddResource={(r: Resource) => props.addWorkspaceService(r as WorkspaceService)}
       />
     </>
   );

ui/app/src/components/workspaces/WorkspaceProvider.tsx

@@ -87,7 +87,10 @@ export const WorkspaceProvider: React.FunctionComponent = () => {
           <WorkspaceHeader />
           <Stack horizontal className='tre-body-inner'>
             <Stack.Item className='tre-left-nav'>
-              <WorkspaceLeftNav workspaceServices={workspaceServices} setWorkspaceService={(ws: WorkspaceService) => setSelectedWorkspaceService(ws)} />
+              <WorkspaceLeftNav 
+                workspaceServices={workspaceServices} 
+                setWorkspaceService={(ws: WorkspaceService) => setSelectedWorkspaceService(ws)} 
+                addWorkspaceService={(ws: WorkspaceService) => addWorkspaceService(ws)} />
             </Stack.Item><Stack.Item className='tre-body-content'>
               <Stack>
                 <Stack.Item grow={100}>

ui/app/src/config.sample.json

@@ -0,0 +1,9 @@
+{
+    "rootClientId": "",
+    "rootTenantId": "",
+    "treApiClientId": "",
+    "treUrl": "https://my-tre.northeurope.cloudapp.azure.com/api",
+    "pollingDelayMilliseconds": 10000,
+    "loadAllOpsOnStart": true,
+    "debug": true
+}