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

package.json

@@ -59,8 +59,8 @@
     "@actions/github": "^6.0.0",
     "@aws-amplify/eslint-plugin-amplify-backend-rules": "^0.0.2",
     "@aws-sdk/client-amplify": "^3.750.0",
-    "@aws-sdk/client-cloudformation": "^3.828.0",
-    "@aws-sdk/client-cloudwatch-logs": "^3.835.0",
+    "@aws-sdk/client-cloudformation": "^3.750.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.750.0",
     "@aws-sdk/client-cognito-identity-provider": "^3.750.0",
     "@aws-sdk/client-dynamodb": "^3.750.0",
     "@aws-sdk/client-iam": "^3.750.0",

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

@@ -60,12 +60,6 @@ export class CfnDeploymentProgressLogger {
   private resourceNameIndentation = 0;
   private readonly getBlockWidth: () => number;
 
-  /**
-   * Extract nested stack names
-   * @deprecated Use the shared normalizeCDKConstructPath function from formatters/cdk_path_formatter.js instead
-   */
-  private normalizeCDKConstructPath = normalizeCDKConstructPath;
-
   /**
    * Instantiate the CFN deployment progress builder
    */
@@ -110,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

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

@@ -301,40 +301,35 @@ function AppContent() {
 
   // Effect to periodically check sandbox status if unknown
   useEffect(() => {
-    if (!connected) return;
+    if (!connected || sandboxStatus !== 'unknown') 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();
+    // Periodic status check
+    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]);
+      // 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
 
-  // 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
+    // Force a status check after a short timeout
+    const forceStatusCheck = setTimeout(() => {
+      console.log('Forcing sandbox status check after timeout');
+      sandboxClientService.getSandboxStatus();
+    }, 2000); // Force a check after 2 seconds
 
-      return () => clearTimeout(forceStatusCheck);
-    }
+    return () => {
+      clearInterval(statusCheckInterval);
+      clearTimeout(forceStatusCheck);
+    };
   }, [sandboxStatus, connected, sandboxClientService]);
 
   // Reset loading state when sandbox status changes

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  Modal,
+  Box,
+  SpaceBetween,
+  Button,
+  Header,
+} from '@cloudscape-design/components';
+
+interface ConfirmationModalProps {
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  visible,
+  title,
+  message,
+  confirmButtonText = 'Confirm',
+  cancelButtonText = 'Cancel',
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      onDismiss={onCancel}
+      header={<Header>{title}</Header>}
+      footer={
+        <Box float="right">
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="link" onClick={onCancel}>
+              {cancelButtonText}
+            </Button>
+            <Button variant="primary" onClick={onConfirm}>
+              {confirmButtonText}
+            </Button>
+          </SpaceBetween>
+        </Box>
+      }
+    >
+      {message}
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;

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

@@ -29,22 +29,15 @@ interface ConsoleViewerProps {
 const ConsoleViewer = ({ logs }: ConsoleViewerProps) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [selectedLogLevels, setSelectedLogLevels] = useState<string[]>([]);
-  const [availableLogLevels, setAvailableLogLevels] = useState<
-    { label: string; value: string }[]
-  >([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [autoScroll, setAutoScroll] = useState<boolean>(true);
 
   // Extract unique log levels from logs
-  useEffect(() => {
-    const uniqueLevels = [...new Set(logs.map((log) => log.level))];
-    setAvailableLogLevels(
-      uniqueLevels.map((level) => ({
-        label: level,
-        value: level,
-      })),
-    );
-  }, [logs]);
+  const uniqueLevels = [...new Set(logs.map((log) => log.level))];
+  const availableLogLevels = uniqueLevels.map((level) => ({
+    label: level,
+    value: level,
+  }));
 
   const filteredLogs = logs.filter((log) => {
     const matchesLevel =