feat: enhance Docker and Makefile for Nuxt supervisor management

- Added supervisor management scripts to the Dockerfile for better process control.
- Updated Makefile with new commands for checking Nuxt supervisor status, reloading configuration, and managing Nuxt processes (start, stop, restart).
- Improved logging in the AcGuard to provide detailed user access information.
- Refactored entrypoint script to ensure proper execution of development and production commands.

Author: tacxou

Dockerfile

@@ -58,6 +58,16 @@ RUN ARCH=$(uname -m) && \
 RUN cp /usr/share/zoneinfo/$TZ /etc/localtime \
   && echo $TZ > /etc/timezone
 
+RUN printf '%s\n' \
+  '#!/bin/sh' \
+  'exec /bin/sh /etc/supervisor/supervisor-manager.sh "$@"' \
+  > /usr/local/bin/supervisor-manager \
+  && printf '%s\n' \
+  '#!/bin/sh' \
+  'exec supervisor-manager "$@"' \
+  > /usr/local/bin/nuxt-supervisor \
+  && chmod +x /usr/local/bin/supervisor-manager /usr/local/bin/nuxt-supervisor
+
 RUN yarn install \
   --prefer-offline \
   --pure-lockfile \

Makefile

@@ -177,6 +177,22 @@ dbs: ## Start databases
 stop: ## Stop the container
 	@docker stop $(APP_NAME) || true
 
+nuxt-status: ## Show Nuxt supervisor status
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh status web
+
+supervisor-reload: ## Reload supervisor config in running container
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh reread
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh update
+
+nuxt-restart: ## Restart Nuxt only via supervisor
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh restart web
+
+nuxt-stop: ## Stop Nuxt only via supervisor
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh stop web
+
+nuxt-start: ## Start Nuxt only via supervisor
+	@docker exec -it $(APP_NAME) sh /etc/supervisor/supervisor-manager.sh start web
+
 stop-all: ## Stop all containers
 	@docker stop $(APP_NAME) || true
 	@docker stop $(BASE_NAME)-mongodb || true

apps/api/src/_common/guards/ac.guard.ts

@@ -3,6 +3,9 @@ import { Reflector } from '@nestjs/core';
 import { ACGuard as AcGuardInternal, RolesBuilder } from 'nest-access-control';
 import { META_UNPROTECTED } from '~/_common/decorators/public.decorator';
 import { AC_ADMIN_ROLE, AC_GUEST_ROLE } from '../types/ac-types';
+import { ApiSession } from '../data/api-session';
+import { ConsoleSession } from '../data/console-session';
+import { Request } from 'express';
 
 export function AcGuard(): Type<CanActivate> {
   @Injectable()
@@ -24,18 +27,20 @@ export function AcGuard(): Type<CanActivate> {
     }
 
     public async canActivate(context: ExecutionContext): Promise<boolean> {
+      const request = context.switchToHttp().getRequest<Request & { user: Express.User & (ApiSession | ConsoleSession) }>();
       const roleOrRoles = await this.getUserRoles(context)
       const roles = Array.isArray(roleOrRoles) ? roleOrRoles : [roleOrRoles]
-      //console.log('canActivate', roles)
+
       if (roles.includes(AC_ADMIN_ROLE)) {
+        this.logger.verbose(`User <${request.user._id}, ${request.user.username}> wants to access <${request.method}::${request.route.path}>. Roles: [${roles.join(', ')}] -> [is allowed]`);
         return true;
       }
 
       const result = this.isUnProtected(context) || await super.canActivate(context);
 
-      const path = context.switchToHttp().getRequest().route.path;
-      const method = context.switchToHttp().getRequest().method;
-      this.logger.verbose(`User wants to access <${method}::${path}>. Roles: [${roles.join(', ')}] -> [${result ? 'is allowed' : 'is not allowed'}]`);
+      if (request.user) {
+        this.logger.verbose(`User <${request.user._id}, ${request.user.username}> wants to access <${request.method}::${request.route.path}>. Roles: [${roles.join(', ')}] -> [${result ? 'is allowed' : 'is not allowed'}]`);
+      }
 
       return result;
     }

apps/web/entrypoint.sh

@@ -2,8 +2,8 @@
 
 ./scripts/checkinstall.sh
 if [ "$DEV" = "1" ];then
-  yarn dev
+  exec yarn dev
 else
-  yarn run start:prod
+  exec yarn run start:prod
 fi
 

apps/web/nuxt.config.ts

@@ -80,7 +80,6 @@ export default defineNuxtConfig({
   modules: [
     '@sentry/nuxt/module',
     '@nuxt-alt/auth',
-    '@nuxt-alt/proxy',
     '@nuxt-alt/http',
     '@pinia/nuxt',
     'nuxt-quasar-ui',
@@ -141,28 +140,6 @@ export default defineNuxtConfig({
       },
     },
   },
-  proxy: {
-    https: false,
-    proxies: {
-      '/api': {
-        rewrite: (path: string) => path.replace(/^\/api/, ''),
-        target: SESAME_APP_API_URL,
-        secure: false,
-        changeOrigin: true,
-        xfwd: true,
-        configure: (proxy, options) => {
-          proxy.on('proxyReq', (proxyReq, req, res) => {
-            // Disable timeout for SSE endpoints
-            if (req.url?.includes('/backends/sse')) {
-              proxyReq.setTimeout(0);
-              res.setTimeout(0);
-            }
-          });
-        },
-      }
-    },
-    cors: false,
-  },
   http: {
     debug: /true|on|yes|1/i.test(`${process.env.DEBUG}`),
     browserBaseURL: '/api',
@@ -176,7 +153,7 @@ export default defineNuxtConfig({
   },
   quasar: {
     iconSet: 'mdi-v7',
-    plugins: ['Notify', 'Dialog'],
+    plugins: ['Notify', 'Dialog', 'LoadingBar'],
     config: {
       dark: SESAME_APP_DARK_MODE,
       brand: {
@@ -195,6 +172,11 @@ export default defineNuxtConfig({
         position: 'top-right',
         actions: [{ icon: 'mdi-close', color: 'white' }],
       },
+      loadingBar: {
+        color: 'primary',
+        size: '3px',
+        position: 'top',
+      },
     },
     extras: {
       animations: IS_DEV ? 'all' : [],
@@ -212,6 +194,31 @@ export default defineNuxtConfig({
     server: {
       allowedHosts: ['localhost', ...SESAME_ALLOWED_HOSTS],
     },
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: (id: string) => {
+            if (!id.includes('node_modules')) return
+
+            if (id.includes('monaco-editor') || id.includes('nuxt-monaco-editor')) {
+              return 'vendor-monaco'
+            }
+
+            if (id.includes('@jsonforms/') || id.includes('@tacxou/jsonforms_builder')) {
+              return 'vendor-jsonforms'
+            }
+
+            if (id.includes('quasar') || id.includes('@quasar/')) {
+              return 'vendor-quasar'
+            }
+
+            if (id.includes('@sentry/')) {
+              return 'vendor-sentry'
+            }
+          },
+        },
+      },
+    },
     define: {
       'process.env.DEBUG': process.env.NODE_ENV === 'development',
     },
@@ -241,7 +248,11 @@ export default defineNuxtConfig({
       websocket: false,
     },
     routeRules: {
+      '/api/**': {
+        proxy: `${SESAME_APP_API_URL}/**`,
+      },
       '/api/core/backends/sse': {
+        proxy: `${SESAME_APP_API_URL}/core/backends/sse`,
         // Disable compression and caching for SSE
         headers: {
           'Cache-Control': 'no-cache, no-transform',

apps/web/src/components/core/jsonforms-renderer.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { JsonForms } from '@jsonforms/vue'
-import { quasarRenderers } from '~/jsonforms'
+import { quasarRenderers } from '~/jsonforms/renderers'
 import { createAjv } from '~/jsonforms/utils/validator'
 import type { ErrorObject } from 'ajv'
 // import localize from 'ajv-i18n/localize'

apps/web/src/jsonforms/advanced/media-picker.vue

@@ -185,7 +185,7 @@ import { determineClearValue } from '../utils'
 import { useMediaPickerControl } from '../composables'
 import { QInput, QAvatar, QIcon, QBtn, QCard, QImg, QSpinner, QPopupProxy, QSeparator, QSpace, QChip, QBar } from 'quasar'
 import { fileTypeFromBuffer } from 'file-type'
-import mime from 'mime'
+import { getMimeTypeFromExtension } from '~/utils/mime'
 
 const controlRenderer = defineComponent({
   name: 'MediaPickerControl',
@@ -242,7 +242,7 @@ const controlRenderer = defineComponent({
       const ext = getFileExtension(src)
       if (!ext) return ''
 
-      return mime.getType(ext) || ''
+      return getMimeTypeFromExtension(ext)
     }
 
     const getMimeIcon = (item: any) => {

apps/web/src/jsonforms/common/file-preview.vue

@@ -59,7 +59,7 @@ q-dialog(
 <script lang="ts">
 import { defineComponent, computed, ref, watch, type PropType } from 'vue'
 import { QDialog, QBar, QBtn, QImg, QIcon } from 'quasar'
-import mime from 'mime'
+import { getMimeTypeFromExtension } from '~/utils/mime'
 
 export default defineComponent({
   name: 'FilePreview',
@@ -115,7 +115,7 @@ export default defineComponent({
       const src = item?.thumbnail || item?.value || ''
       const ext = getFileExtension(typeof src === 'string' ? src : '')
       if (!ext) return ''
-      return mime.getType(ext) || ''
+      return getMimeTypeFromExtension(ext)
     }
 
     const isDataUrl = (v: unknown): v is string => typeof v === 'string' && v.startsWith('data:')

apps/web/src/jsonforms/controls/file-upload.vue

@@ -90,7 +90,7 @@ import { determineClearValue } from '../utils'
 import { useMediaPickerControl } from '../composables'
 import { QField, QAvatar, QIcon, QBtn, QChip } from 'quasar'
 import { fileTypeFromBuffer } from 'file-type'
-import mime from 'mime'
+import { getMimeTypeFromExtension } from '~/utils/mime'
 
 const controlRenderer = defineComponent({
   name: 'FileUploadControl',
@@ -222,7 +222,7 @@ const controlRenderer = defineComponent({
       const src = item?.thumbnail || item?.value || ''
       const ext = getFileExtension(typeof src === 'string' ? src : '')
       if (!ext) return ''
-      return mime.getType(ext) || ''
+      return getMimeTypeFromExtension(ext)
     }
 
     const getMimeIcon = (item: any) => {

apps/web/src/jsonforms/renderers.ts

@@ -1,17 +1,14 @@
 import { additionalsRenderers } from './additional'
 import { controlsRenderers } from './controls'
 import { layoutsRenderers } from './layouts'
-import { advancedRenderers } from './advanced'
-
-export { advancedRenderers }
 
 export const quasarRenderers = [
   ...controlsRenderers,
   ...layoutsRenderers,
   ...additionalsRenderers,
 ]
 
-export const allRenderers = [
-  ...quasarRenderers,
-  ...advancedRenderers,
-]
+export const loadAdvancedRenderers = async () => {
+  const module = await import('./advanced')
+  return module.advancedRenderers
+}