Merge pull request #7915 from CroffZ/kuzhong/aca-debug-console

Support debug console for Azure Container Apps
Azure · Nov 22, 2024 · ffb83ef · ffb83ef
2 parents 215991d + c0c31a0
commit ffb83ef
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/client-react/src/pages/container-app/console/ConsoleDataLoader.tsx b/client-react/src/pages/container-app/console/ConsoleDataLoader.tsx
@@ -14,14 +14,19 @@ import { KeyBoard } from '../../../utils/CommonConstants';
 import { containerAppStyles } from '../ContainerApp.styles';
 import { getTerminalDimensions } from '../xtermHelper';
 import { consoleStyles, dialogFooterStyles, dialogTitleStyles } from './ConsoleDataLoader.styles';
+import { Text } from '@fluentui/react/lib/Text';
 
 export interface ConsoleDataLoaderProps {
   resourceId: string;
-  execEndpoint?: string;
+  execEndpoint?: string; // To be deprecated
+  mode?: 'exec' | 'debug';
+  endpoint?: string;
 }
 
 const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
   const portalCommunicator = useContext(PortalContext);
+  const endpoint = !!props.mode ? props.endpoint : props.execEndpoint;
+  const isDebug = props.mode === 'debug';
 
   const { width, height } = useWindowSize();
   const { t } = useTranslation();
@@ -67,10 +72,10 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
       resizeHandler(width, height);
     }
 
-    toggleHideDialog(!props.execEndpoint);
+    toggleHideDialog(!endpoint);
     setSelectedKey(options[0]);
     setCustomTextField('');
-  }, [props.execEndpoint]);
+  }, [endpoint]);
 
   useEffect(() => {
     return () => debouncedResizeHandler.cancel();
@@ -80,8 +85,13 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
     debouncedResizeHandler(width, height);
   }, [width, height]);
 
-  const getServerEndpoint = (execEndpoint: string, token: string, startUpCommand: string) => {
-    return `${execEndpoint}?token=${token}&command=${startUpCommand}`;
+  const getWsUrl = (endpoint: string, token: string, startUpCommand?: string) => {
+    const url = new URL(endpoint);
+    url.searchParams.append('token', token);
+    if (startUpCommand) {
+      url.searchParams.append('command', startUpCommand);
+    }
+    return url.toString();
   };
 
   const processMessageBlob = async (data: Blob) => {
@@ -157,7 +167,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
 
   const dialogContentProps: IDialogContentProps = {
     type: DialogType.normal,
-    title: t('containerApp_console_chooseStartUpCommand'),
+    title: isDebug ? t('containerApp_console_connectToDebugConsole') : t('containerApp_console_chooseStartUpCommand'),
     styles: dialogTitleStyles(),
     showCloseButton: false,
   };
@@ -173,12 +183,17 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
     }
 
     toggleHideDialog();
+    if (isDebug) {
+      // Not using i18n because this is a console message
+      updateConsoleText('Connecting to debug console...\r\n');
+    }
 
-    const execEndpointBefore = props.execEndpoint;
+    const endpointBefore = endpoint;
     ContainerAppService.getAuthToken(props.resourceId).then(authTokenResponse => {
-      if (execEndpointBefore === props.execEndpoint) {
-        const serverEndpoint = getServerEndpoint(props.execEndpoint || '', authTokenResponse.data.properties.token, command);
-        ws.current = new WebSocket(serverEndpoint);
+      if (endpointBefore === endpoint) {
+        const token = authTokenResponse.data.properties.token;
+        const wsUrl = isDebug ? getWsUrl(endpoint || '', token) : getWsUrl(endpoint || '', token, command);
+        ws.current = new WebSocket(wsUrl);
 
         ws.current.onmessage = async (event: MessageEvent) => {
           if (event.data instanceof Blob) {
@@ -254,7 +269,11 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
     <div className={containerAppStyles.divContainer}>
       <XTerm ref={terminalRef} onData={onData} onKey={onKey} />
       <Dialog hidden={hideDialog} dialogContentProps={dialogContentProps} modalProps={modalProps} forceFocusInsideTrap={false}>
-        <ChoiceGroup selectedKey={selectedKey.key} onChange={(_, option) => setSelectedKey(option!)} options={options} />
+        {isDebug ? (
+          <Text>{t('containerApp_console_debugConsoleDescription')}</Text>
+        ) : (
+          <ChoiceGroup selectedKey={selectedKey.key} onChange={(_, option) => setSelectedKey(option!)} options={options} />
+        )}
         <DialogFooter styles={dialogFooterStyles()}>
           <PrimaryButton
             onClick={onConnectClick}

diff --git a/client/src/app/shared/models/portal-resources.ts b/client/src/app/shared/models/portal-resources.ts
@@ -2537,6 +2537,8 @@ export class PortalResources {
   public static connectedAndFilteredMessage = 'connectedAndFilteredMessage';
   public static containerApp_console_chooseStartUpCommand = 'containerApp_console_chooseStartUpCommand';
   public static containerApp_console_failedToConnect = 'containerApp_console_failedToConnect';
+  public static containerApp_console_connectToDebugConsole = 'containerApp_console_connectToDebugConsole';
+  public static containerApp_console_debugConsoleDescription = 'containerApp_console_debugConsoleDescription';
   public static containerApp_console_connect = 'containerApp_console_connect';
   public static containerApp_console_custom = 'containerApp_console_custom';
   public static new_parenthesized = 'new_parenthesized';

diff --git a/server/Resources/Resources.resx b/server/Resources/Resources.resx
@@ -7774,6 +7774,13 @@ Set to "External URL" to use an API definition that is hosted elsewhere.</value>
     <data name="containerApp_console_failedToConnect" xml:space="preserve">
         <value>Failed to connect to replica.</value>
     </data>
+    <data name="containerApp_console_connectToDebugConsole" xml:space="preserve">
+        <value>Connect to debug console</value>
+    </data>
+    <data name="containerApp_console_debugConsoleDescription" xml:space="preserve">
+        <value>In this console, enter 'exit' to terminate the debug session.</value>
+        <comment>'exit' is a command that should not be translated to other languages</comment>
+    </data>
     <data name="containerApp_console_connect" xml:space="preserve">
         <value>Connect</value>
     </data>