[dagster-azure]: Frontend

js_modules/dagster-ui/packages/ui-core/src/runs/CapturedLogPanel.tsx

@@ -1,4 +1,4 @@
-import {Box, Colors, Icon} from '@dagster-io/ui-components';
+import {Box, Icon, Mono, Table, Tooltip, UnstyledButton} from '@dagster-io/ui-components';
 import * as React from 'react';
 
 import {RawLogContent} from './RawLogContent';
@@ -14,7 +14,9 @@ import {
   CapturedLogsSubscriptionVariables,
 } from './types/CapturedLogPanel.types';
 import {AppContext} from '../app/AppContext';
+import {showSharedToaster} from '../app/DomUtils';
 import {WebSocketContext} from '../app/WebSocketProvider';
+import {useCopyToClipboard} from '../app/browser';
 
 interface CapturedLogProps {
   logKey: string[];
@@ -28,34 +30,98 @@ interface CapturedOrExternalLogPanelProps extends CapturedLogProps {
 
 export const CapturedOrExternalLogPanel = React.memo(
   ({logCaptureInfo, ...props}: CapturedOrExternalLogPanelProps) => {
+    const getShellCmd = (ioType: string, logCaptureInfo: ILogCaptureInfo | undefined) => {
+      if (logCaptureInfo?.logManagerMetadata) {
+        const path =
+          ioType === 'stdout' ? logCaptureInfo.stdoutUriOrPath : logCaptureInfo.stderrUriOrPath;
+
+        try {
+          const metadata = JSON.parse(logCaptureInfo.logManagerMetadata);
+          switch (metadata.type) {
+            case 'AzureBlobComputeLogManager':
+              if (metadata.storage_account && metadata.container) {
+                return `az storage blob download --account-name ${metadata.storage_account} --container-name ${metadata.container} --name ${path}`;
+              }
+          }
+        } catch {
+          return undefined;
+        }
+      }
+      return undefined;
+    };
+
     const externalUrl =
       logCaptureInfo &&
       (props.visibleIOType === 'stdout'
         ? logCaptureInfo.externalStdoutUrl
         : logCaptureInfo.externalStderrUrl);
-    if (externalUrl) {
+    const uriOrPath =
+      logCaptureInfo &&
+      (props.visibleIOType === 'stdout'
+        ? logCaptureInfo.stdoutUriOrPath
+        : logCaptureInfo.stderrUriOrPath);
+    const shellCmd = getShellCmd(props.visibleIOType, logCaptureInfo);
+
+    const copy = useCopyToClipboard();
+    const onClickFn = async (key: string, value: string | undefined) => {
+      if (!value) {
+        return;
+      }
+      copy(value);
+      await showSharedToaster({
+        intent: 'success',
+        icon: 'done',
+        message: `${key} copied!`,
+      });
+    };
+    const onClickExternalUri = async () => onClickFn('Log artifact URI', uriOrPath);
+    const onClickShellCmd = async () => onClickFn('Shell command', shellCmd);
+
+    if (externalUrl || uriOrPath || shellCmd) {
       return (
-        <Box
-          flex={{direction: 'row', alignItems: 'center', justifyContent: 'center', gap: 1}}
-          background={Colors.tooltipBackground()}
-          style={{color: Colors.tooltipText(), flex: 1, minHeight: 0}}
-        >
-          View logs at
-          <a
-            href={externalUrl}
-            target="_blank"
-            rel="noreferrer"
-            style={{
-              color: Colors.tooltipText(),
-              textDecoration: 'underline',
-              marginLeft: 4,
-              marginRight: 4,
-            }}
-          >
-            {externalUrl}
-          </a>
-          <Icon name="open_in_new" color={Colors.tooltipText()} size={20} style={{marginTop: 2}} />
-        </Box>
+        <Table>
+          <tbody>
+            {externalUrl ? (
+              <tr>
+                <td>View logs</td>
+                <td>
+                  <Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
+                    <a href={externalUrl} target="_blank" rel="noreferrer">
+                      {externalUrl}
+                      <Icon name="open_in_new" />
+                    </a>
+                  </Box>
+                </td>
+              </tr>
+            ) : undefined}
+
+            {uriOrPath ? (
+              <tr>
+                <td>URI or Path</td>
+                <td>
+                  <Tooltip content="Click to copy log artifact URI or path" placement="top">
+                    <UnstyledButton onClick={onClickExternalUri}>
+                      <Mono>{uriOrPath}</Mono>
+                    </UnstyledButton>
+                  </Tooltip>
+                </td>
+              </tr>
+            ) : undefined}
+
+            {shellCmd ? (
+              <tr>
+                <td>Shell command</td>
+                <td>
+                  <Tooltip content="Click to copy this shell command" placement="top">
+                    <UnstyledButton onClick={onClickShellCmd}>
+                      <Mono>{shellCmd}</Mono>
+                    </UnstyledButton>
+                  </Tooltip>
+                </td>
+              </tr>
+            ) : undefined}
+          </tbody>
+        </Table>
       );
     }
     return props.logKey.length ? <CapturedLogPanel {...props} /> : null;

js_modules/dagster-ui/packages/ui-core/src/runs/LogsRow.tsx

@@ -197,6 +197,9 @@ export const LOGS_ROW_STRUCTURED_FRAGMENT = gql`
       externalUrl
       externalStdoutUrl
       externalStderrUrl
+      logManagerMetadata
+      stdoutUriOrPath
+      stderrUriOrPath
     }
     ... on AssetCheckEvaluationEvent {
       evaluation {

js_modules/dagster-ui/packages/ui-core/src/runs/RunMetadataProvider.tsx

@@ -73,6 +73,9 @@ export interface ILogCaptureInfo {
   pid?: string;
   externalStdoutUrl?: string;
   externalStderrUrl?: string;
+  logManagerMetadata?: string;
+  stdoutUriOrPath?: string;
+  stderrUriOrPath?: string;
 }
 
 export interface IRunMetadataDict {
@@ -277,6 +280,9 @@ export function extractMetadataFromLogs(
         pid: String(log.pid),
         externalStdoutUrl: log.externalStdoutUrl || undefined,
         externalStderrUrl: log.externalStderrUrl || undefined,
+        logManagerMetadata: log.logManagerMetadata || undefined,
+        stdoutUriOrPath: log.stdoutUriOrPath || undefined,
+        stderrUriOrPath: log.stderrUriOrPath || undefined,
       };
     }
 
@@ -454,6 +460,9 @@ export const RUN_METADATA_PROVIDER_MESSAGE_FRAGMENT = gql`
       pid
       externalStdoutUrl
       externalStderrUrl
+      logManagerMetadata
+      stdoutUriOrPath
+      stderrUriOrPath
     }
   }