@platformatic/watt-admin 0.5.0 → 0.6.0-alpha.2

package/README.md

@@ -14,6 +14,8 @@ After installing the project dependencies, you can run the tool directly:
 
 To run the CLI on a custom port, you can just pass it as an argument with `./cli.js --port 4321`.
 
+To record a flamegraph session, and choose to profile either the `cpu` or the `heap`, you can run the CLI with `./cli.js --record --profile heap`. Once you will stop the process, an HTML one-file bundle will be auto-generated, and you will be able to navigate (even offline) the `watt-admin` app, looking at the flamegraph and at the metrics stored for the whole time you have run the CLI.
+
 The tool is also available as a binary when installed globally or linked:
 
 ```bash

package/cli.js

@@ -2,9 +2,10 @@
 
 'use strict'
 
-const { RuntimeApiClient } = require('@platformatic/control')
-const { select } = require('@inquirer/prompts')
-const { start } = require('./lib/start')
+import esmain from 'es-main'
+import { RuntimeApiClient } from '@platformatic/control'
+import { select } from '@inquirer/prompts'
+import { start } from './lib/start.js'
 
 async function getLocationDetails (client, runtime) {
   try {
@@ -39,99 +40,95 @@ async function getLocationDetails (client, runtime) {
   }
 }
 
-async function main () {
+let client
+export default async function main () {
   try {
     // Get available runtimes
-    const client = new RuntimeApiClient()
-
-    try {
-      const runtimes = await client.getRuntimes()
-
-      if (runtimes.length === 0) {
-        console.log('No runtimes available. Please start a Platformatic runtime first.')
-        return null
-      } else if (runtimes.length === 1) {
-        // Only one runtime, no need to prompt
-        const runtime = runtimes[0]
-        const locationDetails = await getLocationDetails(client, runtime)
-        // Display information about the runtime
-        console.log(`Name: ${runtime.packageName || 'unnamed'}`)
-        console.log(`PID: ${runtime.pid}`)
-        console.log(`Working directory: ${locationDetails.cwd}`)
-
-        if (locationDetails.configPath !== 'Unknown' &&
-            locationDetails.configPath !== 'Unknown (config not available)') {
-          console.log(`Configuration path: ${locationDetails.configPath}`)
-        }
+    client = new RuntimeApiClient()
+
+    const runtimes = await client.getRuntimes()
+
+    if (runtimes.length === 0) {
+      console.log('No runtimes available. Please start a Platformatic runtime first.')
+      return null
+    } else if (runtimes.length === 1) {
+      // Only one runtime, no need to prompt
+      const runtime = runtimes[0]
+      const locationDetails = await getLocationDetails(client, runtime)
+      // Display information about the runtime
+      console.log(`Name: ${runtime.packageName || 'unnamed'}`)
+      console.log(`PID: ${runtime.pid}`)
+      console.log(`Working directory: ${locationDetails.cwd}`)
+
+      if (locationDetails.configPath !== 'Unknown' &&
+          locationDetails.configPath !== 'Unknown (config not available)') {
+        console.log(`Configuration path: ${locationDetails.configPath}`)
+      }
 
-        // If we have any command line arguments, display them
-        if (runtime.argv && runtime.argv.length > 0) {
-          console.log(`Command: ${runtime.argv.join(' ')}`)
-        }
+      // If we have any command line arguments, display them
+      if (runtime.argv && runtime.argv.length > 0) {
+        console.log(`Command: ${runtime.argv.join(' ')}`)
+      }
+
+      // If we have a start time, display it
+      if (runtime.startTime) {
+        console.log(`Started at: ${new Date(runtime.startTime).toLocaleString()}`)
+      }
+      return runtime
+    } else {
+      // Multiple runtimes, prompt user to select one
+
+      // Prepare the runtime choices with async map
+      const choicesPromises = runtimes.map(async (runtime) => {
+        // Create a concise description that helps identify this runtime
+        const description = []
 
-        // If we have a start time, display it
+        // Show working directory as it's usually the most useful identifier
+        description.push(`Dir: ${runtime.cwd || 'Unknown'}`)
+
+        // Add the start time if available
         if (runtime.startTime) {
-          console.log(`Started at: ${new Date(runtime.startTime).toLocaleString()}`)
-        }
-        return runtime
-      } else {
-        // Multiple runtimes, prompt user to select one
-
-        // Prepare the runtime choices with async map
-        const choicesPromises = runtimes.map(async runtime => {
-          // Create a concise description that helps identify this runtime
-          const description = []
-
-          // Show working directory as it's usually the most useful identifier
-          description.push(`Dir: ${runtime.cwd || 'Unknown'}`)
-
-          // Add the start time if available
-          if (runtime.startTime) {
-            description.push(`Started: ${new Date(runtime.startTime).toLocaleString()}`)
-          }
-
-          return {
-            name: `${runtime.packageName || 'unnamed'} (PID: ${runtime.pid})`,
-            value: runtime,
-            description: description.join(', ')
-          }
-        })
-
-        // Wait for all async operations to complete
-        const choices = await Promise.all(choicesPromises)
-
-        // Prompt the user to select a runtime
-        const selectedRuntime = await select({
-          message: 'Select a runtime:',
-          choices
-        })
-
-        const locationDetails = await getLocationDetails(client, selectedRuntime)
-        // Display information about the selected runtime
-        console.log('\nRuntime Details:')
-        console.log(`Name: ${selectedRuntime.packageName || 'unnamed'}`)
-        console.log(`PID: ${selectedRuntime.pid}`)
-        console.log(`Working directory: ${locationDetails.cwd}`)
-
-        if (locationDetails.configPath !== 'Unknown' &&
-            locationDetails.configPath !== 'Unknown (config not available)') {
-          console.log(`Configuration path: ${locationDetails.configPath}`)
+          description.push(`Started: ${new Date(runtime.startTime).toLocaleString()}`)
         }
 
-        // If we have any command line arguments, display them
-        if (selectedRuntime.argv && selectedRuntime.argv.length > 0) {
-          console.log(`Command: ${selectedRuntime.argv.join(' ')}`)
+        return {
+          name: `${runtime.packageName || 'unnamed'} (PID: ${runtime.pid})`,
+          value: runtime,
+          description: description.join(', ')
         }
+      })
+
+      // Wait for all async operations to complete
+      const choices = await Promise.all(choicesPromises)
+
+      // Prompt the user to select a runtime
+      const selectedRuntime = await select({
+        message: 'Select a runtime:',
+        choices
+      })
+
+      const locationDetails = await getLocationDetails(client, selectedRuntime)
+      // Display information about the selected runtime
+      console.log('\nRuntime Details:')
+      console.log(`Name: ${selectedRuntime.packageName || 'unnamed'}`)
+      console.log(`PID: ${selectedRuntime.pid}`)
+      console.log(`Working directory: ${locationDetails.cwd}`)
+
+      if (locationDetails.configPath !== 'Unknown' &&
+          locationDetails.configPath !== 'Unknown (config not available)') {
+        console.log(`Configuration path: ${locationDetails.configPath}`)
+      }
 
-        // If we have a start time, display it
-        if (selectedRuntime.startTime) {
-          console.log(`Started at: ${new Date(selectedRuntime.startTime).toLocaleString()}`)
-        }
-        return selectedRuntime
+      // If we have any command line arguments, display them
+      if (selectedRuntime.argv && selectedRuntime.argv.length > 0) {
+        console.log(`Command: ${selectedRuntime.argv.join(' ')}`)
+      }
+
+      // If we have a start time, display it
+      if (selectedRuntime.startTime) {
+        console.log(`Started at: ${new Date(selectedRuntime.startTime).toLocaleString()}`)
       }
-    } finally {
-      // Always clean up the client
-      await client.close()
+      return selectedRuntime
     }
   } catch (error) {
     console.error('Error:', error.message)
@@ -140,19 +137,16 @@ async function main () {
 }
 
 // Execute the main function if this script is run directly
-if (require.main === module) {
+if (esmain(import.meta)) {
   main().then((selectedRuntime) => {
     if (!selectedRuntime) {
       return
     }
     console.log('Starting Watt admin...')
     console.log('--------')
-    return start(selectedRuntime.pid)
+    return start(client, selectedRuntime.pid)
   }).catch(error => {
     console.error('Fatal error:', error)
     process.exit(1)
   })
-} else {
-  // Export for use as a module
-  module.exports = main
 }

package/lib/start.js

@@ -1,20 +1,80 @@
 'use strict'
 
-const { buildRuntime, loadConfig } = require('@platformatic/runtime')
-const { join } = require('path')
-const { parseArgs } = require('util')
+import { create } from '@platformatic/runtime'
+import { join } from 'path'
+import { parseArgs, promisify } from 'util'
+import { request } from 'undici'
+import { exec } from 'child_process'
+import closeWithGrace from 'close-with-grace'
 
-async function start (selectedRuntime) {
+const __dirname = import.meta.dirname
+
+const execAsync = promisify(exec)
+
+const msOneMinute = 1000 * 60
+let recordTimeout
+let entrypointUrl
+
+export async function start (client, selectedRuntime) {
   process.env.SELECTED_RUNTIME = selectedRuntime
-  const { values: { port } } = parseArgs({ options: { port: { type: 'string' } } })
+  const { values: { port, record, profile } } = parseArgs({
+    options: {
+      port: { type: 'string' },
+      profile: { type: 'string' },
+      record: { type: 'boolean' },
+    }
+  })
+
   process.env.PORT = port || 4042
 
+  const requestRecord = async (mode) => {
+    return await request(`${entrypointUrl}/api/record/${selectedRuntime}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ mode, profile: profile ?? 'cpu' })
+    })
+  }
+
+  const recordMetrics = async () => {
+    try {
+      const { statusCode, body } = await requestRecord('stop')
+      if (statusCode === 200) {
+        await body.dump()
+        const bundlePath = join(__dirname, '..', 'web', 'frontend', 'dist', 'index.html')
+        await execAsync(`${process.platform === 'win32' ? 'start' : 'open'} ${bundlePath}`)
+      } else {
+        console.error(`Failure triggering the stop command: ${await body.text()}`)
+      }
+    } catch (error) {
+      console.error('Error on record metrics', { error, entrypointUrl })
+      clearTimeout(recordTimeout)
+    }
+  }
+
   const configFile = join(__dirname, '..', 'watt.json')
-  const { configManager, args } = await loadConfig({
-  }, ['--production', '--config', configFile], { production: true, disableEnvLoad: true })
-  configManager.args = args
-  const server = await buildRuntime(configManager)
-  await server.start()
-}
+  const server = await create(configFile)
+  entrypointUrl = await server.start()
+
+  if (record) {
+    closeWithGrace({ delay: msOneMinute }, async ({ signal }) => {
+      if (signal === 'SIGINT') {
+        clearTimeout(recordTimeout)
+        await recordMetrics(entrypointUrl)
+      }
+
+      // Always clean up the client
+      await client.close()
+    })
 
-module.exports.start = start
+    const { statusCode, body } = await requestRecord('start')
+    if (statusCode === 200) {
+      await body.dump()
+
+      recordTimeout = setTimeout(async () => {
+        await recordMetrics(entrypointUrl)
+      }, msOneMinute * 10)
+    } else {
+      console.log(`Failure triggering the start command: ${await body.text()}`)
+    }
+  }
+}

package/package.json

@@ -1,69 +1,74 @@
 {
+  "type": "module",
   "name": "@platformatic/watt-admin",
-  "version": "0.5.0",
+  "version": "0.6.0-alpha.2",
   "scripts": {
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run clean && npm run build",
     "dev": "wattpm dev",
     "build": "wattpm build",
     "start": "wattpm start",
+    "typecheck": "cd web/backend && tsc && cd ../frontend && tsc",
     "client:openapi": "cd web/backend && node --experimental-strip-types utils/client.openapi.ts",
-    "client:generate": "./node_modules/.bin/plt-client ./web/backend/openapi.json --name backend --folder web/frontend/src/client --language ts --frontend --full --skip-config-update --props-optional",
+    "client:generate": "./node_modules/.bin/massimo ./web/backend/openapi.json --name backend --folder web/frontend/src/client --language ts --frontend --full --skip-config-update --props-optional",
     "test": "npm run test:cli && npm run test:e2e && npm run test:backend && npm run test:frontend",
-    "test:cli": "node --test test/cli.test.js test/start.test.js test/cli-integration.test.js",
-    "test:backend": "cd web/backend && borp --concurrency 1",
+    "test:cli": "node --test --experimental-test-module-mocks --test-timeout 60000 test/*.test.ts",
+    "test:backend": "node --test --experimental-test-module-mocks --test-timeout 60000 --test-concurrency 1 web/backend/**/*.test.ts",
     "test:frontend": "cd web/frontend && vitest run",
     "pretest:e2e": "./node_modules/.bin/playwright install chromium",
     "test:e2e": "cd web/frontend && playwright test",
     "test:e2e:ui": "npm run test:e2e -- --ui",
-    "clean": "rm -rf ./web/*/dist",
+    "clean": "rm -rf ./web/*/dist ./playwright-report ./test-results",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@fastify/websocket": "^11.1.0",
-    "@inquirer/prompts": "^7.3.3",
-    "@platformatic/composer": "^2.72.0",
-    "@platformatic/control": "^2.72.0",
-    "@platformatic/runtime": "^2.72.0",
-    "@platformatic/service": "^2.72.0",
-    "@platformatic/vite": "^2.72.0",
-    "@scalar/api-reference-react": "^0.7.13",
-    "fastify": "^5.0.0",
-    "proxyquire": "^2.1.3",
+    "@fastify/websocket": "^11.2.0",
+    "@inquirer/prompts": "^7.8.6",
+    "@platformatic/control": "^3.11.0",
+    "@platformatic/gateway": "^3.11.0",
+    "@platformatic/runtime": "^3.11.0",
+    "@platformatic/service": "^3.11.0",
+    "@platformatic/ui-components": "^0.19.1",
+    "@platformatic/vite": "^3.11.0",
+    "@platformatic/wattpm-pprof-capture": "^3.13.0",
+    "@scalar/api-reference-react": "^0.7.55",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "close-with-grace": "^2.3.0",
+    "d3": "^7.9.0",
+    "dayjs": "^1.11.18",
+    "es-main": "^1.4.0",
+    "fastify": "^5.6.1",
+    "pprof-format": "^2.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-pprof": "^1.1.0",
+    "react-router-dom": "^7.9.3",
     "react-use-websocket": "^4.13.0",
-    "split2": "4.2.0",
-    "wattpm": "^2.72.0"
+    "split2": "^4.2.0",
+    "tailwindcss": "^3.4.18",
+    "undici": "^7.16.0",
+    "use-error-boundary": "^2.0.6",
+    "vite": "^7.1.9",
+    "vite-plugin-singlefile": "^2.3.0",
+    "wattpm": "^3.11.0",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@fastify/type-provider-json-schema-to-ts": "^5.0.0",
-    "@inquirer/testing": "^2.1.45",
-    "@platformatic/client-cli": "^2.58.0",
-    "@platformatic/ui-components": "^0.15.2",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.56.0",
     "@types/d3": "^7.4.3",
-    "@types/proxyquire": "1.3.31",
-    "@types/react-dom": "^19.0.4",
-    "@types/split2": "4.2.3",
+    "@types/node": "^22",
+    "@types/react-dom": "^19.2.1",
+    "@types/split2": "^4.2.3",
     "@types/ws": "^8.18.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
-    "borp": "^0.19.0",
-    "d3": "~7.9.0",
-    "dayjs": "^1.11.13",
-    "eslint": "^9.22.0",
-    "fastify-tsconfig": "^2.0.0",
-    "neostandard": "^0.12.1",
-    "playwright": "^1.52.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.0",
-    "source-map-support": "^0.5.21",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.5.4",
-    "use-error-boundary": "^2.0.6",
-    "vite": "^5.4.11",
-    "vitest": "^3.0.8",
-    "zustand": "^5.0.2"
+    "eslint": "^9.37.0",
+    "fastify-tsconfig": "^3.0.0",
+    "massimo-cli": "^1.0.1",
+    "neostandard": "^0.12.2",
+    "playwright": "^1.56.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "bin": {
     "watt-admin": "./cli.js"

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "fastify-tsconfig",
+  "compilerOptions": {
+    "sourceMap": true,
+    "pretty": true,
+    "noEmitOnError": true,
+    "incremental": true,
+    "outDir": "dist",
+    "noUnusedParameters": true,
+    "verbatimModuleSyntax": true
+  },
+  "watchOptions": {
+    "watchFile": "fixedPollingInterval",
+    "watchDirectory": "fixedPollingInterval",
+    "fallbackPolling": "dynamicPriority",
+    "synchronousWatchDirectory": true,
+    "excludeDirectories": [
+      "**/node_modules",
+      "dist"
+    ]
+  }
+}

package/watt.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://schemas.platformatic.dev/wattpm/2.72.0.json",
+  "$schema": "https://schemas.platformatic.dev/wattpm/3.11.0.json",
   "server": {
     "hostname": "127.0.0.1",
     "port": "{PORT}"

package/web/backend/platformatic.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://schemas.platformatic.dev/@platformatic/service/2.72.0.json",
+  "$schema": "https://schemas.platformatic.dev/@platformatic/service/3.11.0.json",
   "service": {
     "openapi": true
   },
@@ -11,7 +11,6 @@
         "encapsulate": false
       },
       "./routes"
-    ],
-    "typescript": "{PLT_BACKEND_TYPESCRIPT}"
+    ]
   }
 }

package/web/backend/tsconfig.json

@@ -3,10 +3,13 @@
   "compilerOptions": {
     "sourceMap": true,
     "pretty": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
     "noEmitOnError": true,
     "incremental": true,
     "outDir": "dist",
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "verbatimModuleSyntax": true
   },
   "watchOptions": {
     "watchFile": "fixedPollingInterval",

package/web/composer/platformatic.json

@@ -1,7 +1,7 @@
 {
-  "$schema": "https://schemas.platformatic.dev/@platformatic/composer/2.72.0.json",
-  "composer": {
-    "services": [
+  "$schema": "https://schemas.platformatic.dev/@platformatic/gateway/3.11.0.json",
+  "gateway": {
+    "applications": [
       {
         "id": "backend",
         "openapi": {