Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

5 files changed, 126 insertions, 56 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/components/candidate_detail_row.vue b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/components/candidate_detail_row.vue
index 747e92b9e85..8c7460940a0 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/components/candidate_detail_row.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/components/candidate_detail_row.vue
@@ -6,18 +6,12 @@ export default {
       type: String,
       required: true,
     },
-    sectionLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
 };
 </script>
 
 <template>
   <tr>
-    <td class="gl-text-secondary gl-font-weight-bold">{{ sectionLabel }}</td>
     <td class="gl-font-weight-bold">{{ label }}</td>
     <td>
       <slot></slot>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
index a68fb7d340a..43d28e3d699 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
@@ -1,7 +1,9 @@
 <script>
-import { GlAvatarLabeled, GlLink } from '@gitlab/ui';
+import { GlAvatarLabeled, GlLink, GlTableLite } from '@gitlab/ui';
+import { isEmpty, maxBy, range } from 'lodash';
 import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
 import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+import { __, sprintf } from '~/locale';
 import DetailRow from './components/candidate_detail_row.vue';
 
 import {
@@ -22,6 +24,11 @@ import {
   JOB_LABEL,
   CI_USER_LABEL,
   CI_MR_LABEL,
+  PERFORMANCE_LABEL,
+  NO_PARAMETERS_MESSAGE,
+  NO_METRICS_MESSAGE,
+  NO_METADATA_MESSAGE,
+  NO_CI_MESSAGE,
 } from './translations';
 
 export default {
@@ -32,6 +39,7 @@ export default {
     DetailRow,
     GlAvatarLabeled,
     GlLink,
+    GlTableLite,
   },
   props: {
     candidate: {
@@ -54,6 +62,14 @@ export default {
     JOB_LABEL,
     CI_USER_LABEL,
     CI_MR_LABEL,
+    PARAMETERS_LABEL,
+    METRICS_LABEL,
+    METADATA_LABEL,
+    PERFORMANCE_LABEL,
+    NO_PARAMETERS_MESSAGE,
+    NO_METRICS_MESSAGE,
+    NO_METADATA_MESSAGE,
+    NO_CI_MESSAGE,
   },
   computed: {
     info() {
@@ -62,21 +78,38 @@ export default {
     ciJob() {
       return Object.freeze(this.info.ci_job);
     },
-    sections() {
-      return [
-        {
-          sectionName: PARAMETERS_LABEL,
-          sectionValues: this.candidate.params,
-        },
-        {
-          sectionName: METRICS_LABEL,
-          sectionValues: this.candidate.metrics,
-        },
-        {
-          sectionName: METADATA_LABEL,
-          sectionValues: this.candidate.metadata,
-        },
-      ];
+    hasMetadata() {
+      return !isEmpty(this.candidate.metadata);
+    },
+    hasParameters() {
+      return !isEmpty(this.candidate.params);
+    },
+    hasMetrics() {
+      return !isEmpty(this.candidate.metrics);
+    },
+    metricsTableFields() {
+      const maxStep = maxBy(this.candidate.metrics, 'step').step;
+      const rowClass = 'gl-p-3!';
+
+      const cssClasses = { thClass: rowClass, tdClass: rowClass };
+
+      const fields = range(maxStep + 1).map((step) => ({
+        key: step.toString(),
+        label: sprintf(__('Step %{step}'), { step }),
+        ...cssClasses,
+      }));
+
+      return [{ key: 'name', label: __('Metric'), ...cssClasses }, ...fields];
+    },
+    metricsTableItems() {
+      const items = {};
+      this.candidate.metrics.forEach((metric) => {
+        const metricRow = items[metric.name] || { name: metric.name };
+        metricRow[metric.step] = metric.value;
+        items[metric.name] = metricRow;
+      });
+
+      return Object.values(items);
     },
   },
 };
@@ -93,33 +126,37 @@ export default {
       />
     </model-experiments-header>
 
-    <table class="candidate-details gl-w-full">
-      <tbody>
-        <tr class="divider"></tr>
-
-        <detail-row :label="$options.i18n.ID_LABEL" :section-label="$options.i18n.INFO_LABEL">
-          {{ info.iid }}
-        </detail-row>
+    <section class="gl-mb-6">
+      <table class="candidate-details">
+        <tbody>
+          <detail-row :label="$options.i18n.ID_LABEL">
+            {{ info.iid }}
+          </detail-row>
 
-        <detail-row :label="$options.i18n.MLFLOW_ID_LABEL">{{ info.eid }}</detail-row>
+          <detail-row :label="$options.i18n.MLFLOW_ID_LABEL">{{ info.eid }}</detail-row>
 
-        <detail-row :label="$options.i18n.STATUS_LABEL">{{ info.status }}</detail-row>
+          <detail-row :label="$options.i18n.STATUS_LABEL">{{ info.status }}</detail-row>
 
-        <detail-row :label="$options.i18n.EXPERIMENT_LABEL">
-          <gl-link :href="info.path_to_experiment">
-            {{ info.experiment_name }}
-          </gl-link>
-        </detail-row>
+          <detail-row :label="$options.i18n.EXPERIMENT_LABEL">
+            <gl-link :href="info.path_to_experiment">
+              {{ info.experiment_name }}
+            </gl-link>
+          </detail-row>
 
-        <detail-row v-if="info.path_to_artifact" :label="$options.i18n.ARTIFACTS_LABEL">
-          <gl-link :href="info.path_to_artifact">
-            {{ $options.i18n.ARTIFACTS_LABEL }}
-          </gl-link>
-        </detail-row>
+          <detail-row v-if="info.path_to_artifact" :label="$options.i18n.ARTIFACTS_LABEL">
+            <gl-link :href="info.path_to_artifact">
+              {{ $options.i18n.ARTIFACTS_LABEL }}
+            </gl-link>
+          </detail-row>
+        </tbody>
+      </table>
+    </section>
 
-        <template v-if="ciJob">
-          <tr class="divider"></tr>
+    <section class="gl-mb-6">
+      <h4>{{ $options.i18n.CI_SECTION_LABEL }}</h4>
 
+      <table v-if="ciJob" class="candidate-details">
+        <tbody>
           <detail-row
             :label="$options.i18n.JOB_LABEL"
             :section-label="$options.i18n.CI_SECTION_LABEL"
@@ -142,21 +179,53 @@ export default {
               !{{ ciJob.merge_request.iid }} {{ ciJob.merge_request.title }}
             </gl-link>
           </detail-row>
-        </template>
+        </tbody>
+      </table>
 
-        <template v-for="{ sectionName, sectionValues } in sections">
-          <tr v-if="sectionValues" :key="sectionName" class="divider"></tr>
+      <div v-else class="gl-text-secondary">{{ $options.i18n.NO_CI_MESSAGE }}</div>
+    </section>
 
-          <detail-row
-            v-for="(item, index) in sectionValues"
-            :key="item.name"
-            :label="item.name"
-            :section-label="index === 0 ? sectionName : ''"
-          >
+    <section class="gl-mb-6">
+      <h4>{{ $options.i18n.PARAMETERS_LABEL }}</h4>
+
+      <table v-if="hasParameters" class="candidate-details">
+        <tbody>
+          <detail-row v-for="item in candidate.params" :key="item.name" :label="item.name">
             {{ item.value }}
           </detail-row>
-        </template>
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+
+      <div v-else class="gl-text-secondary">{{ $options.i18n.NO_PARAMETERS_MESSAGE }}</div>
+    </section>
+
+    <section class="gl-mb-6">
+      <h4>{{ $options.i18n.METADATA_LABEL }}</h4>
+
+      <table v-if="hasMetadata" class="candidate-details">
+        <tbody>
+          <detail-row v-for="item in candidate.metadata" :key="item.name" :label="item.name">
+            {{ item.value }}
+          </detail-row>
+        </tbody>
+      </table>
+
+      <div v-else class="gl-text-secondary">{{ $options.i18n.NO_METADATA_MESSAGE }}</div>
+    </section>
+
+    <section class="gl-mb-6">
+      <h4>{{ $options.i18n.PERFORMANCE_LABEL }}</h4>
+
+      <div v-if="hasMetrics" class="gl-overflow-x-auto">
+        <gl-table-lite
+          :items="metricsTableItems"
+          :fields="metricsTableFields"
+          class="gl-w-auto"
+          hover
+        />
+      </div>
+
+      <div v-else class="gl-text-secondary">{{ $options.i18n.NO_METRICS_MESSAGE }}</div>
+    </section>
   </div>
 </template>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/translations.js b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/translations.js
index fa9518f3e27..98988e1db35 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/translations.js
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/translations.js
@@ -9,13 +9,18 @@ export const EXPERIMENT_LABEL = s__('MlExperimentTracking|Experiment');
 export const ARTIFACTS_LABEL = s__('MlExperimentTracking|Artifacts');
 export const PARAMETERS_LABEL = s__('MlExperimentTracking|Parameters');
 export const METRICS_LABEL = s__('MlExperimentTracking|Metrics');
+export const PERFORMANCE_LABEL = s__('MlExperimentTracking|Model performance');
 export const METADATA_LABEL = s__('MlExperimentTracking|Metadata');
+export const NO_PARAMETERS_MESSAGE = s__('MlExperimentTracking|No logged parameters');
+export const NO_METRICS_MESSAGE = s__('MlExperimentTracking|No logged metrics');
+export const NO_METADATA_MESSAGE = s__('MlExperimentTracking|No logged metadata');
+export const NO_CI_MESSAGE = s__('MlExperimentTracking|Candidate not linked to a CI build');
 export const DELETE_CANDIDATE_CONFIRMATION_MESSAGE = s__(
   'MlExperimentTracking|Deleting this candidate will delete the associated parameters, metrics, and metadata.',
 );
 export const DELETE_CANDIDATE_PRIMARY_ACTION_LABEL = s__('MlExperimentTracking|Delete candidate');
 export const DELETE_CANDIDATE_MODAL_TITLE = s__('MLExperimentTracking|Delete candidate?');
-export const CI_SECTION_LABEL = __('CI');
+export const CI_SECTION_LABEL = s__('MLExperimentTracking|CI Info');
 export const JOB_LABEL = __('Job');
 export const CI_USER_LABEL = s__('MlExperimentTracking|Triggered by');
 export const CI_MR_LABEL = __('Merge request');
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index.vue
index b543169d501..4710735f76e 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index.vue
@@ -72,6 +72,7 @@ export default {
       :primary-button-text="$options.i18n.CREATE_NEW_LABEL"
       :primary-button-link="$options.constants.CREATE_EXPERIMENT_HELP_PATH"
       :svg-path="emptyStateSvgPath"
+      :svg-height="null"
       :description="$options.i18n.EMPTY_STATE_DESCRIPTION_LABEL"
       class="gl-py-8"
     />
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
index 25c06aa2f7f..28a27059b17 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
@@ -245,6 +245,7 @@ export default {
       :primary-button-text="$options.i18n.CREATE_NEW_LABEL"
       :primary-button-link="$options.constants.CREATE_CANDIDATE_HELP_PATH"
       :svg-path="emptyStateSvgPath"
+      :svg-height="null"
       :description="$options.i18n.EMPTY_STATE_DESCRIPTION_LABEL"
       class="gl-py-8"
     />