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

megha-narayanan · 2025-07-02T23:34:30Z

Changes

Implements a functional DevTools UI for the Amplify Sandbox, building upon the foundation established in PR1. Key features include:

Web-based interface for managing sandbox environments
Real-time monitoring of sandbox status and deployment progress
Console log viewer with formatted logs
Resource explorer to view and manage deployed AWS resources
WebSocket-based communication between UI and backend
Enhanced sandbox lifecycle management (start, stop, delete)
Improved error handling and status reporting

The implementation uses Express with Socket.IO for the backend server and React with Cloudscape Design components for the frontend UI.

Validation

Unit tests have been included, though some files will only be further tested in later PRs

Checklist

If this PR includes a functional change to the runtime behavior of the code, I have added or updated automated test coverage for this change.
If this PR requires a change to the Project Architecture README, I have included that update in this PR.
If this PR requires a docs update, I have linked to that docs PR above.
If this PR modifies E2E tests, makes changes to resource provisioning, or makes SDK calls, I have run the PR checks with the run-e2e label set.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

…mand

changeset-bot · 2025-07-02T23:34:34Z

🦋 Changeset detected

Latest commit: 4861a0d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@aws-amplify/deployed-backend-client	Patch
@aws-amplify/platform-core	Patch
@aws-amplify/cli-core	Patch
@aws-amplify/sandbox	Minor
@aws-amplify/backend-cli	Minor
@aws-amplify/backend-deployer	Patch
@aws-amplify/ai-constructs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Amplifiyer

Since it's quite a big PR, I've reviewed the backend pieces at a high level and left feedback. I'll take a pass at frontend components later.

Amplifiyer · 2025-07-08T17:11:21Z

package.json

+    "@aws-sdk/client-cloudformation": "^3.828.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.835.0",
    "@aws-sdk/client-cognito-identity-provider": "^3.750.0",
    "@aws-sdk/client-dynamodb": "^3.750.0",
-    "@aws-sdk/client-iam": "^3.750.0",
+    "@aws-sdk/client-iam": "^3.835.0",


Do we need aws-sdk upgrade as part of this? If not, we should decouple.

Amplifiyer · 2025-07-08T17:12:00Z

package.json

+  "dependencies": {
+    "@aws-sdk/client-lambda": "^3.835.0",
+    "cookie-signature": "1.0.6",
+    "debounce-promise": "^3.1.2",
+    "esbuild": "0.25.5",
+    "express": "^5.1.0",
+    "express-rate-limit": "^7.5.0",
+    "jszip": "^3.10.1",
+    "ws": "^8.18.2"
+  },


Do we need all these dependencies, and in the root package?

Nope. Removing

Amplifiyer · 2025-07-08T17:15:19Z

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

+   * Attempts to start the server on the specified port
+   * @param server The HTTP server
+   * @param port The port to use
+   * @returns A promise that resolves with the port when the server starts
+   * @throws Error if the port is already in use
+   */
+  async findAvailablePort(


The method name is not matching the documentation and what it is doing. And why are we starting a server in PortChecker class?

moving the server starting to devtools command -- this is a relic from when we tried multiple ports.

Amplifiyer · 2025-07-08T17:21:36Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/ConsoleViewer.tsx

+const cleanAnsiCodes = (text: string): string => {
+  // This regex handles various ANSI escape sequences including colors, bold, dim, etc.
+  return text.replace(/\u001b\[\d+(;\d+)*m|\[2m|\[22m|\[1m|\[36m|\[39m/g, '');
+};


Look into stripANSI which is already used in this repo.

Have we already discussed keeping the styles offline with something like ansi-to-html?

switched to stripANSI for now-- is there a benefit to taking it offline if stripAnsi already exists in the repo?

Amplifiyer · 2025-07-08T17:23:15Z

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

+ * @param constructPath The CDK construct path
+ * @returns A normalized construct path
+ */
+const normalizeCDKConstructPath = (constructPath: string): string => {


This seems duplicated from here

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

Line 237 in 146f603

private normalizeCDKConstructPath = (constructPath: string): string => {

We should see if we can refactor cfn_deployment_progress_logger.ts such that it can be used for both CLI and DevConsole instead of duplicating the logic

pulled that function out and exported it to get rid of duplication.

Amplifiyer · 2025-07-08T17:51:06Z

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

+      if (sandboxState === 'unknown') {
+        try {
+          // Check AWS stack state
+          const cfnClient = new CloudFormationClient();


All of these clients should be injected at runtime. Will make the unit testing much easier and simpler.

done. this does make unit testing a lot easier! I'll go ahead and make unit tests more robust in a separate commit

Amplifiyer · 2025-07-08T17:52:33Z

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

+            await cfnClient.send(
+              new DescribeStacksCommand({ StackName: stackName }),
+            );


You are not using the response here?

we're just checking if the stack exists. but maybe using exceptions for control flow is not appropriate. Would it be better if I used ListStacksCommand or validateTemplate. Or waitUntilStackExists with a short timeout?

Amplifiyer · 2025-07-08T17:54:45Z

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

+    // Override printer.log to capture the log level
+    printer.log = function (message: string, level?: LogLevel) {
+      currentLogLevel = level ? level : LogLevel.DEBUG;
+      const result = originalLog.call(this, message, currentLogLevel);
+      currentLogLevel = null;
+      return result;
+    };
+
+    // Override printer.print (the lower-level method)
+    printer.print = function (message: string) {
+      // Call the original print method
+      originalPrint.call(this, message);
+      // Avoid double processing if this is called from printer.log
+      if (processingMessage) {
+        return;
+      }


We should avoid doing this. This creates sideeffects in other parts of code that would be very hard to debug/troubleshoot

refactored to pass in my own printer. required taking sandboxfactory out of the injected dependencies -- let me know what you think about the approach I just pushed.

Amplifiyer · 2025-07-08T17:59:41Z

packages/cli/src/commands/sandbox/sandbox-devtools/services/socket_handlers.ts

+      // Get region information
+      const cfnClient = new CloudFormationClient();
+      const regionValue = cfnClient.config.region;
+      let region = null;
+
+      try {
+        if (typeof regionValue === 'function') {
+          if (regionValue.constructor.name === 'AsyncFunction') {
+            region = await regionValue();
+          } else {
+            region = regionValue();
+          }
+        } else if (regionValue) {
+          region = String(regionValue);
+        }
+
+        // Final check to ensure region is a string
+        if (region && typeof region !== 'string') {
+          region = String(region);
+        }
+      } catch (error) {
+        printer.log('Error processing region: ' + error, LogLevel.ERROR);
+        region = null;
+      }


See if we can reuse this

amplify-backend/packages/platform-core/src/telemetry/region_fetcher.ts

Line 6 in 146f603

export class RegionFetcher {

through a DI, so we can reuse the cached results instead of finding the region every time.

yep, this also makes testing easy. Adding it.

Amplifiyer · 2025-07-08T18:00:47Z

packages/cli/src/commands/sandbox/sandbox-devtools/services/socket_handlers.ts

+/**
+ * Service for handling socket events
+ */
+export class SocketHandlerService {


This class also needs required unit test coverage

yep, I hadn't put it in this PR. updated and added.

…nd added to dependencies

svidgen

Can't say I did a full review here — there's a lot here. 🎉 But, I left a handful of comments for you for things that jumped out at me.

My other big concern across the board is testing. Given that this is destined for a feature branch, and given that it's already huge, I could be convinced to see a separate PR focused on e2e testing. Some lower level unit/interaction testing would be good too. But, long term, before I'd put this in front of customers, I'd want to know I "can't" break it. And, I think e2e's are how I gain that confidence.

svidgen · 2025-07-08T18:30:14Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/ConsoleViewer.tsx

+const cleanAnsiCodes = (text: string): string => {
+  // This regex handles various ANSI escape sequences including colors, bold, dim, etc.
+  return text.replace(/\u001b\[\d+(;\d+)*m|\[2m|\[22m|\[1m|\[36m|\[39m/g, '');
+};


Have we already discussed keeping the styles offline with something like ansi-to-html?

svidgen · 2025-07-08T21:35:04Z

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

+/**
+ * Clean ANSI escape codes from text
+ * @param text The text to clean
+ * @returns The cleaned text
+ */
+export const cleanAnsiCodes = (text: string): string => {
+  // Split the regex into parts to avoid control characters
+  const ansiEscapeCodesPattern = new RegExp(
+    [
+      // ESC [ n ; n ; ... m
+      String.fromCharCode(27) + '\\[\\d+(?:;\\d+)*m',
+      // Other common ANSI sequences
+      '\\[2m',
+      '\\[22m',
+      '\\[1m',
+      '\\[36m',
+      '\\[39m',
+    ].join('|'),
+    'g',
+  );
+
+  return text.replace(ansiEscapeCodesPattern, '');
+};


What's functionally different about this cleaner and the one below?

already resolved in commit 87fa132 (duplicate from trimming down PR)

svidgen · 2025-07-08T21:38:11Z

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

+/**
+ * Extracts a friendly name from a nested stack logical ID
+ * @param stackName The stack name to process
+ * @returns A friendly name or undefined if no match
+ */
+const getFriendlyNameFromNestedStackName = (
+  stackName: string,
+): string | undefined => {
+  const parts = stackName.split('-');
+
+  if (parts && parts.length === 7 && parts[3] === 'sandbox') {
+    return parts[5].slice(0, -10) + ' stack';
+  } else if (parts && parts.length === 5 && parts[3] === 'sandbox') {
+    return 'root stack';
+  }
+
+  return undefined;
+};


A good habit when baking arcane splits and magic numbers into a function like this is to show an example or two of the before/after in the docstring. If there is a good name you can give to the magic constants here, give them names. Else, it's helpful to indicate where they come from in the docstring examples.

In this case, the naming patterns might be completely obvious to others in the codebase. But, if someone new (it's always Day 1, right?) jumps in at this point, examples will help.

Leaving this comment on this particularly arcane looking set of manipulations. But, please apply anywhere you feel arcane incantations are being performed.

got it. actually figured out how to actually get non-null metadata which eliminates the need for some of these functions. but examples have been added in the remaining functions where I felt it was needed.

svidgen · 2025-07-08T21:40:22Z

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

+ * @param metadata.constructPath Optional construct path from CDK metadata
+ * @returns A user-friendly name for the resource
+ */
+export const createFriendlyName = (


Borderline arcane incantations herein. Partially cp-ing a comment from below. Examples in docstrings will help future maintainers.

Thank-you! Probably goes without saying, but explicit test coverage would also be ideal. Unless I'm overlooking it, just a small set of examples like you have here in a test loop would be good.

svidgen · 2025-07-08T21:48:30Z

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

+    cleanedMessage.includes('_IN_PROGRESS') ||
+    cleanedMessage.includes('CREATE_') ||
+    cleanedMessage.includes('DELETE_') ||
+    cleanedMessage.includes('UPDATE_') ||
+    cleanedMessage.includes('Deployment in progress') ||
+    cleanedMessage.includes('COMPLETE') ||
+    cleanedMessage.includes('FAILED') ||


Wouldn't mind seeing something like this if it speaks to you:

[ '_IN_PROGRESS', 'CREATE_', 'DELETE_', 'UPDATE_', 'Deployment in progress', 'COMPLETE', 'FAILED' ].some(pattern => cleanedMessage.includes(pattern))

But, with room for opinion here, so adopt only if it really speaks to you.

svidgen · 2025-07-08T22:06:28Z

packages/cli/src/commands/sandbox/sandbox-devtools/services/shutdown_service.ts

+
+    // Exit the process if requested
+    if (exitProcess) {
+      // Short delay to allow messages to be sent


What messages? Why is 500 ms the right amount of time to wait for them to send?

I was sending a shutdown log but I guess that isn't super helpful because the process is, well, shutting down. If we want to log, we can always log on socket disconnect. Getting rid of the log and delay. This delay was also for the server close, which is async but doesn't return a promise. resolving that properly with a promise wrapper to make sure server closing is finished before we end the process.

svidgen · 2025-07-08T22:09:31Z

packages/cli/src/commands/sandbox/sandbox-devtools/services/socket_handlers.ts

+    private sandbox: Sandbox,
+    private getSandboxState: () => Promise<string>,
+    private backendId: { name: string },
+    private shutdownService: import('./shutdown_service.js').ShutdownService,


Why import() ShutdownService as a function here instead of letting it hang out with its other import-ant friends?

Moving it to the top with the other imports!

svidgen · 2025-07-08T22:15:31Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/hooks/useResourceManager.ts

+    socket.on('savedResources', handleSavedResources);
+    socket.on('deployedBackendResources', handleDeployedBackendResources);
+    socket.on('customFriendlyNames', handleCustomFriendlyNames);
+    socket.on('customFriendlyNameUpdated', handleCustomFriendlyNameUpdated);
+    socket.on('customFriendlyNameRemoved', handleCustomFriendlyNameRemoved);
+    socket.on('error', handleError);


Just picking a random spot to leave this comment: Would be really good to have constants imported from a central spot (at least per group) to match on instead of duplicated strings all over. In theory, a typo in one of those strings could be caught by a good suite of tests as well, but caught much sooner if caught statically.

(Bonus points if you include docstrings to indicate what the constants mean.)

Most IDEs can also help track down usage of a variable/constant more definitively than searching for a string literal.

done. put constants in a shared location that frontend and backend can both access.

svidgen · 2025-07-08T22:19:43Z

packages/cli/src/commands/sandbox/sandbox-devtools/services/resource_service.ts

+            if (regionValue.constructor.name === 'AsyncFunction') {
+              region = await regionValue();
+            } else {
+              region = regionValue();
+            }


Q for the team: Do we have lint rules in place that would prevent this from just being await regionValue() either way? If not, there's usually not much reason to check whether a thing is async. If it can be async, just await it. (Right?)

resolved by eliminating this code by using RegionFetcher

svidgen · 2025-07-08T22:23:42Z

packages/cli/src/commands/sandbox/sandbox-devtools/resource_console_functions.ts

+    // case 'AWS::DynamoDB::Table': // COMMENT OUT (UNTESTED)
+    //   // Check if physicalId is an ARN and extract table name if needed
+    //   const dynamoTableName = physicalId.includes(':table/')
+    //     ? physicalId.split(':table/')[1]
+    //     : physicalId;
+    //   return `${baseUrl}/dynamodb/home?region=${region}#/tables/view/${encodeURIComponent(dynamoTableName)}`;


You mean not even manually tested? The others aren't covered by unit or integ tests yet, are they?

yep, I did manual testing now though so I've added these back in.

…eploymentProgressLogger and createFriendlyName. maintains backward compatibility

- Introduced SocketClientService to handle socket connections and events. - Created SandboxClientService and ResourceClientService for sandbox and resource-specific socket communication. - Updated App component to utilize context for socket services. - Refactored useResourceManager hook to use ResourceClientService. - Updated ResourceConsole and Header components to use new service structure.

rtpascual

Looking good and this is a lot to go through, for starters I left a few comments focusing on the frontend parts of the PR

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/ConsoleViewer.tsx

rtpascual · 2025-07-15T20:50:06Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/Header.tsx

+      window.confirm(
+        'Are you sure you want to delete the sandbox? This will remove all resources and cannot be undone.',
+      )


Why window instead of Modal here? Same in handleStopDevTools.

Good question! I've made them a custom Modal now.

rtpascual · 2025-07-15T20:56:12Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/Header.tsx

+      ? `Sandbox ${sandboxStatus === 'nonexistent' ? '' : `(${sandboxIdentifier}) `}`
+      : 'Sandbox ';


Nit: I think it would be easier to read by moving the space after the status text to the StatusIndicator text. This avoids accidentally duplicating the space between words:

<StatusIndicator>{statusText} Deploying</StatusIndicator>

Resulting in <statusText>(two spaces)Deploying

rtpascual · 2025-07-15T21:49:47Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/App.tsx

+  useEffect(() => {
+    if (!connected) return;
+
+    // If status is unknown, request it periodically
+    if (sandboxStatus === 'unknown') {
+      const statusCheckInterval = setInterval(() => {
+        console.log('Requesting sandbox status due to unknown state');
+        sandboxClientService.getSandboxStatus();
+
+        // Add a log entry to show we're still trying
+        setLogs((prev) => [
+          ...prev,
+          {
+            id: Date.now().toString(),
+            timestamp: new Date().toISOString(),
+            level: 'INFO',
+            message: 'Requesting sandbox status...',
+          },
+        ]);
+      }, 5000); // Check every 5 seconds
+
+      return () => clearInterval(statusCheckInterval);
+    }
+  }, [sandboxStatus, connected, sandboxClientService]);
+
+  // Force a status check if we've been in unknown state for too long
+  useEffect(() => {
+    if (sandboxStatus === 'unknown' && connected) {
+      const forceStatusCheck = setTimeout(() => {
+        console.log('Forcing sandbox status check after timeout');
+        sandboxClientService.getSandboxStatus();
+      }, 2000); // Force a check after 2 seconds
+
+      return () => clearTimeout(forceStatusCheck);
+    }
+  }, [sandboxStatus, connected, sandboxClientService]);


Can these useEffects be combined into one since the effect dependencies are identical?

Amplifiyer

Looking really good. Still haven't gone through the entire PR, but wanted to leave this feedback early.

Amplifiyer · 2025-07-15T15:57:07Z

package.json

+    "@aws-sdk/client-cloudformation": "^3.828.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.835.0",
    "@aws-sdk/client-cognito-identity-provider": "^3.750.0",
    "@aws-sdk/client-dynamodb": "^3.750.0",


I still see these upgrades for some aws-sdk clients. We should avoid this

oops. missed that. fixed now!

Amplifiyer · 2025-07-15T16:00:20Z

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

+  /**
+   * Extract nested stack names
+   * @deprecated Use the shared normalizeCDKConstructPath function from formatters/cdk_path_formatter.js instead
+   */
+  private normalizeCDKConstructPath = normalizeCDKConstructPath;
+


Is this necessary?

I just wanted to be super careful about backward compatibility. If you're ok with it, I'll go ahead and remove.

Yup, as long as these are local variables and not exporting something out of package, it's fine to get rid of them

Amplifiyer · 2025-07-15T16:07:55Z

...es/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/socket_client_service.ts

+   * @param data The event data
+   */
+  protected emit<T>(event: string, data?: T): void {
+    if (!this.socket) return;


Should this be a throw instead? Or at least an error?

The socket is only set at the initialization, right? In which scenario would this variable be null?

I thought throwing an error would be too disruptive since the socket.io client has reconnection logic, and so the socket might temporarily be null during reconnection attempts. Plus then we would need try/catch blocks everywhere. But I agree silently failing isn't ideal. I've added a console.error instead. Does this seem like a good solution?

if (!this.socket) { console.error(`Cannot emit ${event}: Socket is not initialized`); return; }

ah, I misunderstood the socket logic. yep, you're right. making it a throw.

Amplifiyer · 2025-07-15T16:09:35Z

...es/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/socket_client_service.ts

+  protected on<T>(event: string, handler: (data: T) => void): () => void {
+    if (!this.socket) return () => {};
+    this.socket.on(event, handler);
+    return () => this.socket?.off(event, handler);


should this be a named method, called unsubscribe or something?

It definitely can be, but I don't see a clear benefit. Is it for visibility in stack traces? This is called by this class and its subclasses, and whenever called, the return value is made a named function, so that seems to mitigate the stack trace issue. I can absolutely change it just for style, just want to make sure I'm understanding this comment properly before acting on it.

It's the DX issue. If I'm understanding it correctly, currently the DX is

const subscription = clientService.on(); // To unsubscribe subscription();

What I'm proposing is

const subscription = clientService.on(); // To unsubscribe subscription.unsubscribe();

got it. I had them like this: const unsubscribeError = resourceClientService.onError(handleError); and then just call unsubscribeError() which matches all the other handlers. I'll go ahead and change them all, but then you have a bunch of calls like this unsubscribeLog.unsubscribe();

Amplifiyer · 2025-07-15T16:13:36Z

...s/cli/src/commands/sandbox/sandbox-devtools/react-app/src/services/sandbox_client_service.ts

+/**
+ * Interface for sandbox options
+ */
+export interface SandboxOptions {
+  identifier?: string;
+  once?: boolean;


this should ideally come from sandbox package to avoid duplication and sandbox being the authority of what options it accepts.

fixed with the temp fix we discussed and added a note about the issue in the comment

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

Amplifiyer · 2025-07-15T22:28:59Z

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

+    const backendClient = new DeployedBackendClientFactory().getInstance(
+      this.awsClientProvider,
+    );
+
+    // Create a custom logger that forwards logs to Socket.IO clients
+    const devToolsLogger = new DevToolsLogger(
+      this.printer,
+      io,
+      minimumLogLevel,
+    );
+    this.printer = devToolsLogger; // Use the custom logger for all CLI output from now on
+
+    // Create a new SandboxSingletonFactory with our custom logger
+    // Our server, and thus logger, are only created at runtime, so we cannot use the
+    // SandboxSingletonFactory as an injected dependency.
+    const localSandboxFactory = new SandboxSingletonFactory(
+      this.sandboxBackendIdResolver.resolve,
+      new SDKProfileResolverProvider().resolve,
+      devToolsLogger,
+      this.format,
+    );


Can we inject these through factory as well?

See the comment. I couldn't figure out a neat way to do it. Any input?

You can create a DevToolsLoggerFactory, inject it through devtools command factory, and use it to instantiate an instance at runtime.

Similarly, sandboxFactory.getInstance() can take an optional instance of logger which is available at runtime

Co-authored-by: Roshane Pascual <rtpascual@users.noreply.github.com>

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/ConsoleViewer.tsx

Co-authored-by: Amplifiyer <51211245+Amplifiyer@users.noreply.github.com>

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts

Amplifiyer · 2025-07-16T15:19:05Z

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

+      resourceConfigChanged: [
+        async () => {
+          try {


I can't find where this event is being emitted by the sandbox

Yep, its extraneous now that it been replaced with successfulDeployment/failedDeployment for better error handling. removed in PR3 but forgot to propogate back to PR2. Doing that now.

Amplifiyer · 2025-07-16T15:21:07Z

packages/sandbox/src/sandbox.ts

+  /**
+   * Gets the current state of the sandbox
+   * @returns The current state: 'running', 'stopped', 'deploying', 'deleting', 'nonexistent', or 'unknown'
+   */
+  getState: () => SandboxStatus;


This state management needs more unit test coverage.

Absolutely. In writing my tests I also discovered a tiny edge case error in my state management -- fixed that and added tests.

Amplifiyer · 2025-07-16T16:06:23Z

packages/deployed-backend-client/src/deployed-backend-client/deployed_resources_enumerator.ts

+        metadata:
+          templateMetadata[stackResourceSummary.LogicalResourceId || ''],


Should this be

Suggested change

metadata:

templateMetadata[stackResourceSummary.LogicalResourceId || ''],

metadata:

templateMetadata[stackResourceSummary.LogicalResourceId] || '',

EDIT: okay, turns out I actually misunderstood this. The reason I had my original code was because in case LogicalResourceId is undefined (which it can be), then we just look for the the metadata of ''. Though I imagine this is not the best way to handle that error. The metadata property should be of type{ constructPath?: string } | undefined, not string. I have now re-updated this to the following line, which is more intentional about handling the undefined case - instead of falling back to an empty string key (which likely doesn't exist in the metadata, but maybe in an error case, COULD), it explicitly returns undefined. It avoids a potential issue where templateMetadata[''] might actually contain something unexpected. stackResourceSummary.LogicalResourceId ? templateMetadata[stackResourceSummary.LogicalResourceId] : undefined,

…eployed_resources_enumerator.ts Co-authored-by: Amplifiyer <51211245+Amplifiyer@users.noreply.github.com>

…r SandboxOptions

…yanan/amplify-backend into pr-2-backend-services Merge remote changes

rtpascual · 2025-07-16T20:04:34Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/components/Header.tsx

    const statusText = sandboxIdentifier
-      ? `Sandbox ${sandboxStatus === 'nonexistent' ? '' : `(${sandboxIdentifier}) `}`
-      : 'Sandbox ';
+      ? `Sandbox${sandboxStatus === 'nonexistent' ? '' : ` (${sandboxIdentifier})`}`
+      : 'Sandbox';


Taking another look at this, we can make this easier to read if we break this out of nested ternaries

const statusText = sandboxIdentifier && sandboxStatus !== 'nonexistent' ? `Sandbox (${sandboxIdentifier})` : 'Sandbox';

Megha Narayanan added 8 commits June 25, 2025 16:32

PR1: Dependencies, Basic React App Facade, and Barebones Devtools Com…

e994339

…mand

made timeout longer AND temporary workaround for license issues

02a7289

PR2: Basic Sandbox Manager and Resource Console PRELIM

776fd8a

Fixing Lint and Tests

7bd6b1b

fixed lint issues and tests

093c130

updating for structure changes, printer

c9d0917

merging with pr-1 as base

ce447ae

update API

8ff3baf

Megha Narayanan added 3 commits July 2, 2025 16:51

updating package_lock (based on pr_1)

3085faf

update default_packages

d9d10c9

added changeset

9955896

megha-narayanan marked this pull request as ready for review July 3, 2025 00:13

megha-narayanan requested review from a team as code owners July 3, 2025 00:13

Megha Narayanan added 2 commits July 2, 2025 17:29

fix lint

1a0849a

reconcile status types

ce3a461

Amplifiyer reviewed Jul 8, 2025

View reviewed changes

Megha Narayanan added 4 commits July 8, 2025 12:44

removed profile from start sandbox modal as it can't do anything

134e83a

fixed loading of start sandbox when modal dismissed

52d92e0

removed aws-sdk upgrade, removed dependencies in root package

77b7f60

got rid of cleanAnsiCodes (and duplicate), added stripAnsi instead, a…

87fa132

…nd added to dependencies

svidgen reviewed Jul 8, 2025

View reviewed changes

Megha Narayanan added 7 commits July 8, 2025 15:40

moved server starting from portchecker to devtools command

740271c

fix lint

68c9ab7

pull out normalizeCDKConstructPath utility and refactor usage in CfnD…

73f32e0

…eploymentProgressLogger and createFriendlyName. maintains backward compatibility

fix api for cli-core (added normalizeCDK constructPath)

dc33887

make AWS console links visible, remove unused log note

11c9684

Update sandbox state management, add initialization error handling

fa14390

megha-narayanan requested a review from Amplifiyer July 14, 2025 22:41

rtpascual reviewed Jul 15, 2025

View reviewed changes

Amplifiyer reviewed Jul 15, 2025

View reviewed changes

Remove useEffect in ConsoleViewer

df5e7b5

Co-authored-by: Roshane Pascual <rtpascual@users.noreply.github.com>

github-advanced-security bot found potential problems Jul 16, 2025

View reviewed changes

Minor output and naming changes in sandbox_devtools command

a47c32d

Co-authored-by: Amplifiyer <51211245+Amplifiyer@users.noreply.github.com>

github-advanced-security bot found potential problems Jul 16, 2025

View reviewed changes

packages/cli/src/commands/sandbox/sandbox-devtools/sandbox_devtools_command.ts Fixed Show fixed Hide fixed

Megha Narayanan added 7 commits July 15, 2025 17:40

finish fixing renaming in sandbox_devtools_command

6c2a488

remove aws-sdk upgrades

9c49385

remove deprecated private method in cfn_deployment_progress_logger

1089978

remove unneeded variable in Console_Viewer

9153373

Made confirmation dialogues a custom modal instead of browser window

417b73e

Fixed potential double space in Header status

24c704c

combined useEffects in App.tsx

76b21a3

Amplifiyer reviewed Jul 16, 2025

View reviewed changes

Megha Narayanan and others added 8 commits July 16, 2025 09:08

remove resourceConfigChanged

64c0c4d

added error for failed emit

109f154

added unit tests for state management

b8fc07b

Update packages/deployed-backend-client/src/deployed-backend-client/d…

c9d2288

…eployed_resources_enumerator.ts Co-authored-by: Amplifiyer <51211245+Amplifiyer@users.noreply.github.com>

get rid of unused fields in StartSandboxModal, fix internal typing fo…

9416275

…r SandboxOptions

Merge branch 'pr-2-backend-services' of https://github.com/megha-nara…

9b8693a

…yanan/amplify-backend into pr-2-backend-services Merge remote changes

expand issue comment

8db171f

fix error in deployed_resources_enumerator

b271bad

rtpascual reviewed Jul 16, 2025

View reviewed changes

Megha Narayanan added 4 commits July 16, 2025 13:26

throw error on null socket

f569654

inject logger factory as dependency

1004c78

header status text fix

5786485

fix lint

4861a0d

		? `Sandbox ${sandboxStatus === 'nonexistent' ? '' : `(${sandboxIdentifier}) `}`
		: 'Sandbox ';

		metadata:
		templateMetadata[stackResourceSummary.LogicalResourceId \|\| ''],

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

megha-narayanan commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Validation

Checklist

Uh oh!

changeset-bot bot commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Amplifiyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

svidgen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

megha-narayanan commented Jul 2, 2025 •

edited

Loading

changeset-bot bot commented Jul 2, 2025 •

edited

Loading

megha-narayanan Jul 9, 2025 •

edited

Loading