Merge branch '523666-model-experiments-add-artifacts-list-component-to-runs' into 'master'

Model experiments: Add artifacts list component to runs

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/183678



Merged-by: Alper Akgun <aakgun@gitlab.com>
Approved-by: Chaoyue Zhao <czhao@gitlab.com>
Approved-by: Simon Knox <simon@gitlab.com>
Approved-by: Alper Akgun <aakgun@gitlab.com>
Reviewed-by: Simon Knox <simon@gitlab.com>
Reviewed-by: Fred de Gier <fdegier@gitlab.com>
Reviewed-by: Chaoyue Zhao <czhao@gitlab.com>
Reviewed-by: GitLab Duo <gitlab-duo@gitlab.com>
Co-authored-by: fdegier <fdegier@gitlab.com>

app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue

@@ -10,6 +10,8 @@ import {
 } from '@gitlab/ui';
 import { isEmpty, maxBy, range } from 'lodash';
 import { __, s__, sprintf } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PACKAGES_PACKAGE } from '~/graphql_shared/constants';
 
 export default {
   name: 'CandidateDetail',
@@ -20,6 +22,8 @@ export default {
     GlTab,
     GlTabs,
     GlTableLite,
+    PackageFiles: () =>
+      import('~/packages_and_registries/package_registry/components/details/package_files.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -34,6 +38,19 @@ export default {
     info() {
       return this.candidate.info;
     },
+    projectPath() {
+      return this.candidate.projectPath;
+    },
+    packageType() {
+      return 'ml_model';
+    },
+    packageId() {
+      if (!this.info?.pathToArtifact) return null;
+      return convertToGraphQLId(
+        TYPENAME_PACKAGES_PACKAGE,
+        this.info.pathToArtifact.split('/packages/')[1],
+      );
+    },
     ciJob() {
       return this.info.ciJob;
     },
@@ -179,13 +196,12 @@ export default {
         </section>
       </gl-tab>
       <gl-tab :title="$options.i18n.artifactsLabel" class="gl-pt-3" data-testid="artifacts">
-        <gl-link
+        <package-files
           v-if="info.pathToArtifact"
-          :href="info.pathToArtifact"
-          data-testid="artifacts-link"
-        >
-          {{ $options.i18n.artifactsLabel }}
-        </gl-link>
+          :project-path="projectPath"
+          :package-type="packageType"
+          :package-id="packageId"
+        />
         <div v-else class="gl-text-subtle">{{ $options.i18n.noArtifactsMessage }}</div>
       </gl-tab>
       <gl-tab :title="$options.i18n.performanceLabel" class="gl-pt-3" data-testid="metrics">

app/assets/javascripts/pages/projects/ml/candidates/show/index.js

 import { initSimpleApp } from '~/helpers/init_simple_app_helper';
 import MlCandidateShow from '~/ml/experiment_tracking/routes/candidates/show';
 
-initSimpleApp('#js-show-ml-candidate', MlCandidateShow, { name: 'MlCandidateShow' });
+initSimpleApp('#js-show-ml-candidate', MlCandidateShow, {
+  withApolloProvider: true,
+  name: 'MlCandidateShow',
+});

spec/frontend/ml/experiment_tracking/routes/candidates/show/candidate_detail_spec.js

 import { GlAvatarLabeled, GlButton } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CandidateDetail from '~/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue';
 import { newCandidate } from 'jest/ml/model_registry/mock_data';
+import PackageFiles from '~/packages_and_registries/package_registry/components/details/package_files.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+Vue.use(VueApollo);
 
 describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', () => {
   let wrapper;
@@ -10,8 +16,10 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
     candidate: newCandidate(),
   };
 
-  const createWrapper = (props = {}) => {
-    return mountExtended(CandidateDetail, {
+  const createWrapper = (props = {}, mountFn = mountExtended) => {
+    const apolloProvider = createMockApollo();
+    return mountFn(CandidateDetail, {
+      apolloProvider,
       propsData: {
         ...defaultProps,
         ...props,
@@ -27,7 +35,7 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
   const findMetadata = () => wrapper.findByTestId('metadata');
   const findMlflowRunId = () => wrapper.findByTestId('mlflow-run-id');
   const findCiJobPathLink = () => wrapper.findByTestId('ci-job-path');
-  const findArtifactLink = () => wrapper.findByTestId('artifacts-link');
+  const findPackageFiles = () => wrapper.findComponent(PackageFiles);
   const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled);
   const findParametersSection = () => wrapper.findByTestId('parameters');
   const findParametersTable = () => wrapper.findByTestId('parameters-table');
@@ -169,9 +177,15 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
   });
 
   describe('Artifacts tab', () => {
-    it('renders artifact link when available', () => {
-      wrapper = createWrapper();
-      expect(findArtifactLink().attributes('href')).toBe('path_to_artifact');
+    it('renders files', () => {
+      wrapper = createWrapper({});
+      expect(findPackageFiles().props()).toEqual({
+        packageId: 'gid://gitlab/Packages::Package/12',
+        projectPath: 'some/project',
+        packageType: 'ml_model',
+        canDelete: false,
+        deleteAllFiles: false,
+      });
     });
 
     it('shows no artifacts message when artifact path is missing', () => {

spec/frontend/ml/model_registry/mock_data.js

@@ -18,7 +18,7 @@ export const newCandidate = (withModel = true) => ({
     iid: 'candidate_iid',
     eid: 'abcdefg',
     gid: 'gid://gitlab/Ml::Candidate/1',
-    pathToArtifact: 'path_to_artifact',
+    pathToArtifact: 'path_to_artifact/packages/12',
     experimentName: 'The Experiment',
     pathToExperiment: 'path/to/experiment',
     status: 'SUCCESS',