[feat] Show logged artifacts in Aim UI (#3114)

* [feat] Add artifacts info in Run's info web API response * [feat] Add ability to specify the icon in CopyToClipboard component * [feat] Add artifacts card component * [feat] Add artifacts card in Run detail page overview tab * [doc] Update changelog
aimhubio · Mar 13, 2024 · f83fe1b · f83fe1b
1 parent 285dec9
commit f83fe1b
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements:
 - Replace grpc with http/ws as transport for aim tracking server (mihran113)
 - Remove `aim storage upgrade 2to3` command (mihran113)
+- Support artifacts logging and storage in AWS S3 (alberttorosyan)
 
 ### Fixes
 - Allow the web UI to serve assets symlinked into the static files directory (martenlienen)

diff --git a/aim/web/api/runs/pydantic_models.py b/aim/web/api/runs/pydantic_models.py
@@ -75,10 +75,17 @@ class MetricSearchRunView(BaseModel):
     props: PropsView
 
 
+class ArtifactInfo(BaseModel):
+    name: str
+    path: str
+    uri: str
+
+
 class RunInfoOut(BaseModel):
     params: dict
     traces: Dict[str, List[TraceOverview]]
     props: PropsView
+    artifacts: List[ArtifactInfo]
 
 
 RunMetricSearchApiOut = Dict[str, MetricSearchRunView]

diff --git a/aim/web/api/runs/utils.py b/aim/web/api/runs/utils.py
@@ -101,6 +101,17 @@ def get_run_props(run: Run):
     }
 
 
+def get_run_artifacts(run: Run):
+    artifacts_info = []
+    for artifact in run.artifacts.values():
+        artifacts_info.append({
+            'name': artifact.name,
+            'path': artifact.path,
+            'uri': artifact.uri,
+        })
+    return artifacts_info
+
+
 def numpy_to_encodable(array: np.ndarray) -> Optional[dict]:
     encoded_numpy = {
         'type': 'numpy',

diff --git a/aim/web/api/runs/views.py b/aim/web/api/runs/views.py
@@ -22,6 +22,7 @@
     get_run_or_404,
     get_run_params,
     get_run_props,
+    get_run_artifacts,
     metric_search_result_streamer,
     run_active_result_streamer,
     run_search_result_streamer,
@@ -151,7 +152,8 @@ async def run_params_api(run_id: str,
     response = {
         'params': get_run_params(run, skip_system=skip_system),
         'traces': run.collect_sequence_info(sequence, skip_last_value=True),
-        'props': get_run_props(run)
+        'props': get_run_props(run),
+        'artifacts': get_run_artifacts(run),
     }
     # Convert NaN and Inf to strings
     response = convert_nan_and_inf_to_str(response)

diff --git a/aim/web/ui/src/components/CopyToClipBoard/CopyToClipBoard.tsx b/aim/web/ui/src/components/CopyToClipBoard/CopyToClipBoard.tsx
@@ -15,6 +15,7 @@ function CopyToClipboard({
   className = '',
   copyContent = null,
   iconSize = 'medium',
+  isURL = false,
 }: ICopyToClipBoardProps): React.FunctionComponentElement<ICopyToClipBoardProps> {
   const { onCopy, copied, setCopied } = useCopy(copyContent ?? contentRef);
 
@@ -27,12 +28,13 @@ function CopyToClipboard({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [copied]);
 
+  const iconName = isURL ? 'link' : 'copy';
   return (
     <ErrorBoundary>
       <Tooltip title={copied ? 'Copied!' : 'Copy to clipboard'}>
         <span className={className} onClick={onCopy}>
           <Button withOnlyIcon color='secondary' size={iconSize}>
-            {copied ? <Icon name='check' /> : <Icon name='copy' />}
+            {copied ? <Icon name='check' /> : <Icon name={iconName} />}
           </Button>
         </span>
       </Tooltip>

diff --git a/aim/web/ui/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx b/aim/web/ui/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx
@@ -12,6 +12,7 @@ import useRunMetricsBatch from '../hooks/useRunMetricsBatch';
 
 import GitInfoCard from './components/GitInfoCard';
 import RunOverviewTabMetricsCard from './components/MetricsCard/RunOverviewTabMetricsCard';
+import RunOverviewTabArtifactsCard from './components/ArtifactsCard/RunOverviewTabArtifactsCard';
 import RunOverviewTabPackagesCard from './components/Packages/RunOverviewTabPackagesCard';
 import RunOverviewTabParamsCard from './components/ParamsCard/RunOverviewTabParamsCard';
 import RunOverviewSidebar from './components/RunOverviewSidebar/RunOverviewSidebar';
@@ -50,6 +51,9 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) {
     if (!_.isEmpty(runData?.runSystemBatch)) {
       data.runSystemBatch = runData.runSystemBatch;
     }
+    if (!_.isEmpty(runData?.runArtifacts)) {
+      data.artifacts = runData.runArtifacts;
+    }
     if (systemParams) {
       if (!_.isEmpty(systemParams.arguments)) {
         data.cliArguments = systemParams.arguments;
@@ -114,6 +118,14 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) {
                   />
                 </ErrorBoundary>
               )}
+              {_.isEmpty(cardsData.artifacts) ? null : (
+                <ErrorBoundary>
+                  <RunOverviewTabArtifactsCard
+                    artifacts={cardsData.artifacts}
+                    isRunInfoLoading={runData?.isRunInfoLoading}
+                  />
+                </ErrorBoundary>
+              )}
               {_.isEmpty(cardsData.cliArguments) ? null : (
                 <ErrorBoundary>
                   <RunOverviewTabCLIArgumentsCard

diff --git a/.../pages/RunDetail/RunOverviewTab/components/ArtifactsCard/RunOverviewTabArtifactsCard.d.ts b/.../pages/RunDetail/RunOverviewTab/components/ArtifactsCard/RunOverviewTabArtifactsCard.d.ts
@@ -0,0 +1,4 @@
+export interface IRunOverviewTabArtifactsCardProps {
+  artifacts: { [key: string]: string };
+  isRunInfoLoading: boolean;
+}
diff --git a/...c/pages/RunDetail/RunOverviewTab/components/ArtifactsCard/RunOverviewTabArtifactsCard.tsx b/...c/pages/RunDetail/RunOverviewTab/components/ArtifactsCard/RunOverviewTabArtifactsCard.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { IconEye } from '@tabler/icons-react';
+
+import { Card, Text } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+import BusyLoaderWrapper from 'components/BusyLoaderWrapper/BusyLoaderWrapper';
+import { ICardProps } from 'components/kit/Card/Card.d';
+import CopyToClipBoard from 'components/CopyToClipBoard/CopyToClipBoard';
+
+import { formatValue } from 'utils/formatValue';
+
+import { IRunOverviewTabArtifactsCardProps } from './RunOverviewTabArtifactsCard.d';
+
+function RunOverviewTabArtifactsCard({
+  artifacts,
+  isRunInfoLoading,
+}: IRunOverviewTabArtifactsCardProps) {
+  const tableData = React.useMemo(() => artifacts, [artifacts]);
+
+  const dataListProps = React.useMemo(
+    (): ICardProps['dataListProps'] => ({
+      calcTableHeight: true,
+      tableColumns: [
+        {
+          dataKey: 'name',
+          key: 'name',
+          width: '20%',
+          title: (
+            <Text weight={600} size={14} tint={100}>
+              Name
+              <Text
+                weight={600}
+                size={14}
+                tint={50}
+                className='RunOverviewTab__cardBox__tableTitleCount'
+              >
+                ({tableData.length})
+              </Text>
+            </Text>
+          ),
+          cellRenderer: ({ cellData }: any) => (
+            <p title={cellData}>{cellData}</p>
+          ),
+        },
+        {
+          dataKey: 'path',
+          key: 'path',
+          width: '40%',
+          title: 'Path',
+          cellRenderer: ({ cellData }: any) => (
+            <p title={cellData}>{cellData}</p>
+          ),
+        },
+        {
+          dataKey: 'uri',
+          key: 'uri',
+          width: '40%',
+          title: 'URI',
+          cellRenderer: ({ cellData }: any) => (
+            <div>
+              <Text size={14}>{cellData}</Text>
+              <CopyToClipBoard
+                iconSize='xSmall'
+                isURL='true'
+                copyContent={cellData}
+              />
+            </div>
+          ),
+        },
+      ],
+      tableData,
+      illustrationConfig: {
+        size: 'large',
+        title: 'No Results',
+      },
+    }),
+    [tableData],
+  );
+  return (
+    <ErrorBoundary>
+      <BusyLoaderWrapper isLoading={isRunInfoLoading} height='100%'>
+        <Card
+          title='Run Artifacts'
+          className='RunOverviewTab__cardBox'
+          dataListProps={dataListProps}
+        />
+      </BusyLoaderWrapper>
+    </ErrorBoundary>
+  );
+}
+
+RunOverviewTabArtifactsCard.displayName = 'RunOverviewTabArtifactsCard';
+
+export default React.memo<IRunOverviewTabArtifactsCardProps>(
+  RunOverviewTabArtifactsCard,
+);
diff --git a/aim/web/ui/src/services/models/runs/runDetailAppModel.ts b/aim/web/ui/src/services/models/runs/runDetailAppModel.ts
@@ -78,6 +78,7 @@ function getRunInfo(runHash: string): IApiRequest<void> {
         runParams: data.params,
         runTraces: data.traces,
         runInfo: data.props,
+        runArtifacts: data.artifacts,
         experimentId: data.props.experiment.id,
         isRunInfoLoading: false,
       });

diff --git a/aim/web/ui/src/types/components/CopyToClipBoard/CopyToClipBoard.d.ts b/aim/web/ui/src/types/components/CopyToClipBoard/CopyToClipBoard.d.ts
@@ -8,4 +8,5 @@ export interface ICopyToClipBoardProps {
   className?: string;
   copyContent?: string | null;
   iconSize?: IButtonProps['size'];
+  isURL?: bool | null;
 }