[DevTools] PR2: Backend Services, Console Viewer, and Resources

.changeset/dull-towns-attack.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/deployed-backend-client': patch
+'@aws-amplify/platform-core': patch
+---
+
+made regionfetcher public, added metadata to deployedbackendresource

.changeset/loose-wings-stop.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/cli-core': patch
+---
+
+pulled out normalizeCDKconstructPath

.changeset/thin-paths-drum.md

@@ -0,0 +1,8 @@
+---
+'@aws-amplify/sandbox': minor
+'@aws-amplify/backend-cli': minor
+'@aws-amplify/backend-deployer': patch
+'@aws-amplify/ai-constructs': patch
+---
+
+Devtools PR2

.eslintignore

@@ -19,3 +19,4 @@ packages/integration-tests/src/e2e-tests
 
 # Frontend code
 packages/cli/src/commands/sandbox/sandbox-devtools/react-app/**
+!packages/cli/src/commands/sandbox/sandbox-devtools/react-app/package.json

package.json

@@ -66,6 +66,8 @@
     "@aws-sdk/client-iam": "^3.750.0",
     "@aws-sdk/client-s3": "^3.750.0",
     "@aws-sdk/client-ssm": "^3.750.0",
+    "@aws-sdk/eventstream-handler-node": "^3.821.0",
+    "@aws-sdk/middleware-eventstream": "^3.821.0",
     "@changesets/cli": "^2.26.1",
     "@changesets/get-release-plan": "^4.0.0",
     "@changesets/types": "^6.0.0",
@@ -97,6 +99,7 @@
     "glob": "^11.0.2",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
+    "npm-force-resolutions": "^0.0.10",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "semver": "^7.5.4",

packages/cli-core/API.md

@@ -90,6 +90,9 @@ export enum LogLevel {
 // @public (undocumented)
 export const minimumLogLevel: LogLevel;
 
+// @public
+export const normalizeCDKConstructPath: (constructPath: string) => string;
+
 // @public (undocumented)
 export type Notice = z.infer<typeof noticeSchema>;
 

packages/cli-core/src/formatters/cdk_path_formatter.ts

@@ -0,0 +1,22 @@
+/**
+ * Utilities for formatting CDK paths and constructs
+ */
+
+/**
+ * Normalizes a CDK construct path to create a more readable friendly name
+ * @param constructPath The CDK construct path
+ * @returns A normalized construct path
+ */
+export const normalizeCDKConstructPath = (constructPath: string): string => {
+  // Don't process very long paths to avoid performance issues
+  if (constructPath.length > 1000) return constructPath;
+
+  // Handle nested stack paths
+  const nestedStackRegex =
+    /(?<nestedStack>[a-zA-Z0-9_]+)\.NestedStack\/\1\.NestedStackResource$/;
+
+  return constructPath
+    .replace(nestedStackRegex, '$<nestedStack>')
+    .replace('/amplifyAuth/', '/')
+    .replace('/amplifyData/', '/');
+};

packages/cli-core/src/index.ts

@@ -6,3 +6,4 @@ export * from './package-manager-controller/package_manager_controller_factory.j
 export * from './loggers/amplify_io_events_bridge_singleton_factory.js';
 export * from './notices/notices.js';
 export * from './notices/notices_manifest_validator.js';
+export { normalizeCDKConstructPath } from './formatters/cdk_path_formatter.js';

packages/cli-core/src/loggers/cfn-deployment-progress/cfn_deployment_progress_logger.ts

@@ -3,6 +3,7 @@ import { StackEvent } from '@aws-sdk/client-cloudformation';
 import { RewritableBlock } from './rewritable_block.js';
 import { ColorName, format } from '../../format/format.js';
 import { EOL } from 'os';
+import { normalizeCDKConstructPath } from '../../formatters/cdk_path_formatter.js';
 
 /**
  * Collects events from CDK Toolkit about cfn deployment and structures them
@@ -103,7 +104,7 @@ export class CfnDeploymentProgressLogger {
     if (metadata && metadata.constructPath) {
       if (!(event.LogicalResourceId in this.resourceNameCache)) {
         this.resourceNameCache[event.LogicalResourceId] =
-          this.normalizeCDKConstructPath(metadata.constructPath);
+          normalizeCDKConstructPath(metadata.constructPath);
       }
     }
     // Hydrate friendly name resource cache
@@ -231,21 +232,6 @@ export class CfnDeploymentProgressLogger {
     await this.block.displayLines(lines);
   }
 
-  /**
-   * Extract nested stack names
-   */
-  private normalizeCDKConstructPath = (constructPath: string): string => {
-    // Don't run regex on long strings, they are most likely not valid and could cause DOS attach. See CodeQL's js/polynomial-redos
-    if (constructPath.length > 1000) return constructPath;
-    const nestedStackRegex =
-      /(?<nestedStack>[a-zA-Z0-9_]+)\.NestedStack\/\1\.NestedStackResource$/;
-
-    return constructPath
-      .replace(nestedStackRegex, '$<nestedStack>')
-      .replace('/amplifyAuth/', '/')
-      .replace('/amplifyData/', '/');
-  };
-
   /**
    * Extract the failure reason from stack events
    */

packages/cli/package.json

@@ -72,6 +72,7 @@
     "semver": "^7.6.3",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
+    "strip-ansi": "^7.1.0",
     "typescript": "^5.8.3",
     "ws": "^8.18.2",
     "yargs": "^17.7.2",

packages/cli/src/commands/sandbox/port_checker.ts

@@ -1,10 +1,14 @@
 import net from 'net';
 
 /**
- * Port checker class. Provides utilities for checking if ports are in use
- * and if specific services are running.
+ * Port checker class. Provides utilities for checking if ports are in use.
  */
 export class PortChecker {
+  /**
+   * Default DevTools port
+   */
+  private static readonly defaultDevtoolsPort = 3333;
+
   /**
    * Checks if a port is in use
    * @param port The port to check

packages/cli/src/commands/sandbox/sandbox-devtools/logging/cloudformation_format.test.ts

@@ -0,0 +1,116 @@
+/* eslint-disable spellcheck/spell-checker */
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { createFriendlyName } from './cloudformation_format.js';
+
+void describe('createFriendlyName function', () => {
+  void it('handles empty string by returning the original ID', () => {
+    const emptyId = '';
+    assert.strictEqual(createFriendlyName(emptyId), emptyId);
+  });
+
+  void it('uses CDK metadata construct path when available', () => {
+    const logicalId = 'amplifyFunction123ABC45';
+    const metadata = { constructPath: 'MyStack/MyFunction/Resource' };
+    assert.strictEqual(createFriendlyName(logicalId, metadata), 'My Function');
+  });
+
+  void it('removes amplify prefix and formats camel case', () => {
+    const logicalId = 'amplifyDataTable123ABC45';
+    assert.strictEqual(createFriendlyName(logicalId), 'Data Table');
+  });
+
+  void it('removes Amplify prefix (capitalized) and formats camel case', () => {
+    const logicalId = 'AmplifyDataTable123ABC45';
+    assert.strictEqual(createFriendlyName(logicalId), 'Data Table');
+  });
+
+  void it('handles IDs with only numeric characters', () => {
+    const numericId = '12345';
+    assert.strictEqual(createFriendlyName(numericId), numericId);
+  });
+
+  void it('normalizes CDK construct paths', () => {
+    const logicalId = 'amplifyFunction';
+    const metadata = {
+      constructPath: 'MyStack/auth.NestedStack/auth.NestedStackResource',
+    };
+    assert.strictEqual(createFriendlyName(logicalId, metadata), 'auth');
+  });
+
+  void it('skips Resource and Default in construct paths', () => {
+    const logicalId = 'amplifyFunction';
+    const metadata = { constructPath: 'MyStack/Auth/Resource' };
+    assert.strictEqual(createFriendlyName(logicalId, metadata), 'Auth');
+  });
+
+  void it('handles multiple levels of Resource and Default', () => {
+    const logicalId = 'amplifyFunction';
+    const metadata = { constructPath: 'MyStack/Auth/Default/Resource' };
+    assert.strictEqual(createFriendlyName(logicalId, metadata), 'Auth');
+  });
+
+  void it('formats camel case with multiple uppercase letters', () => {
+    const logicalId = 'amplifyGraphQLAPI123ABC45';
+    assert.strictEqual(createFriendlyName(logicalId), 'Graph QLAPI');
+  });
+
+  void it('handles complex CloudFormation resource IDs', () => {
+    const logicalId = 'TodoIAMRole2DA8E66E';
+    assert.strictEqual(createFriendlyName(logicalId), 'Todo IAM Role');
+  });
+
+  void it('handles empty construct path', () => {
+    const logicalId = 'amplifyFunction';
+    const metadata = { constructPath: '' };
+    assert.strictEqual(createFriendlyName(logicalId, metadata), 'Function');
+  });
+
+  // Examples from documentation
+  void it('formats TodoTable correctly', () => {
+    const logicalId = 'TodoTable';
+    assert.strictEqual(createFriendlyName(logicalId), 'Todo Table');
+  });
+
+  void it('formats TodoIAMRole with ID correctly', () => {
+    const logicalId = 'TodoIAMRole2DA8E66E';
+    assert.strictEqual(createFriendlyName(logicalId), 'Todo IAM Role');
+  });
+
+  void it('formats amplifyDataGraphQLAPI with ID correctly', () => {
+    const logicalId = 'amplifyDataGraphQLAPI42A6FA33';
+    assert.strictEqual(createFriendlyName(logicalId), 'Data Graph QLAPI');
+  });
+
+  void it('formats testNameBucketPolicy with ID correctly', () => {
+    const logicalId = 'testNameBucketPolicyA5C458BB';
+    assert.strictEqual(
+      createFriendlyName(logicalId),
+      'test Name Bucket Policy',
+    );
+  });
+
+  void it('handles CDK construct path example', () => {
+    const logicalId = 'somelogicalId';
+    const metadata = {
+      constructPath:
+        'amplify-amplifyvitereacttemplate-meghabit-sandbox-83e297d0db/data/modelIntrospectionSchemaBucket/Resource',
+    };
+    assert.strictEqual(
+      createFriendlyName(logicalId, metadata),
+      'model Introspection Schema Bucket',
+    );
+  });
+
+  void it('handles CDK construct path example', () => {
+    const logicalId = 'someLogicalId';
+    const metadata = {
+      constructPath:
+        'amplify-amplifyvitereacttemplate-meghabit-sandbox-83e297d0db/data/GraphQLAPI/DefaultApiKey',
+    };
+    assert.strictEqual(
+      createFriendlyName(logicalId, metadata),
+      'Default Api Key',
+    );
+  });
+});

packages/cli/src/commands/sandbox/sandbox-devtools/logging/cloudformation_format.ts

@@ -0,0 +1,53 @@
+import { normalizeCDKConstructPath } from '@aws-amplify/cli-core';
+
+/**
+ * Creates a friendly name for a resource, using CDK metadata when available.
+ * @param logicalId The logical ID of the resource
+ * @param metadata Optional CDK metadata that may contain construct path
+ * @param metadata.constructPath Optional construct path from CDK metadata
+ * @returns A user-friendly name for the resource
+ *
+ * Examples of friendly names:
+ *   - "TodoTable" → "Todo Table"
+ *   - "TodoIAMRole2DA8E66E" → "Todo IAM Role"
+ *   - "amplifyDataGraphQLAPI42A6FA33" → "Data GraphQLAPI"
+ *   - "testNameBucketPolicyA5C458BB" → "test Name Bucket Policy"
+ *
+ * For construct paths:
+ * - amplify-amplify-identifier-sandbox-83e297d0db/data/GraphQLAPI/DefaultApiKey → "Default Api Key"
+ * - amplify-amplify-identifier-sandbox-83e297d0db/auth/amplifyAuth/authenticatedUserRole/Resource → "authenticated User Role"
+ */
+export const createFriendlyName = (
+  logicalId: string,
+  metadata?: { constructPath?: string },
+): string => {
+  let name = logicalId;
+  if (metadata?.constructPath) {
+    const normalizedPath = normalizeCDKConstructPath(metadata.constructPath);
+    const parts = normalizedPath.split('/');
+    let resourceName = parts.pop();
+    while (
+      (resourceName === 'Resource' || resourceName === 'Default') &&
+      parts.length > 0
+    ) {
+      resourceName = parts.pop();
+    }
+
+    name = resourceName || logicalId;
+  }
+
+  // Fall back to the basic transformation
+  name = name.replace(/^amplify/, '').replace(/^Amplify/, '');
+
+  name = name.replace(/([a-z])([A-Z])/g, '$1 $2');
+
+  name = name.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+
+  // Remove CloudFormation resource IDs (alphanumeric suffixes)
+  name = name.replace(/[0-9A-F]{6,}$/g, '');
+
+  name = name.replace(/\s+/g, ' ').trim();
+
+  const result = name || logicalId;
+  return result;
+};