Add latest changes from gitlab-org/gitlab@master

2 files changed, 84 insertions, 0 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue b/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue
new file mode 100644
index 00000000000..73cdfbc44b0
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlTable } from '@gitlab/ui';
+import IncubationAlert from './incubation_alert.vue';
+
+export default {
+  name: 'ShowMlExperiment',
+  components: {
+    GlTable,
+    IncubationAlert,
+  },
+  inject: ['candidates', 'metricNames', 'paramNames'],
+  computed: {
+    fields() {
+      return [...this.paramNames, ...this.metricNames];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-alert />
+
+    <h3>
+      {{ __('Experiment Candidates') }}
+    </h3>
+
+    <gl-table
+      :fields="fields"
+      :items="candidates"
+      :empty-text="__('This Experiment has no logged Candidates')"
+      show-empty
+      class="gl-mt-0!"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue b/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue
new file mode 100644
index 00000000000..51c1e935677
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue
@@ -0,0 +1,48 @@
+<script>
+import { GlAlert, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    titleLabel: __('Machine Learning Experiment Tracking is in Incubating Phase'),
+    contentLabel: __(
+      'GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited',
+    ),
+    learnMoreLabel: __('Learn More'),
+    feedbackLabel: __('Feedback and Updates'),
+  },
+  name: 'MlopsIncubationAlert',
+  components: { GlAlert, GlLink },
+  data() {
+    return {
+      isAlertDismissed: false,
+    };
+  },
+  computed: {
+    shouldShowAlert() {
+      return !this.isAlertDismissed;
+    },
+  },
+  methods: {
+    dismissAlert() {
+      this.isAlertDismissed = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    v-if="shouldShowAlert"
+    :title="$options.i18n.titleLabel"
+    variant="warning"
+    :primary-button-text="$options.i18n.feedbackLabel"
+    primary-button-link="https://gitlab.com/groups/gitlab-org/-/epics/8560"
+    @dismiss="dismissAlert"
+  >
+    {{ $options.i18n.contentLabel }}
+    <gl-link href="https://about.gitlab.com/handbook/engineering/incubation/" target="_blank">{{
+      $options.i18n.learnMoreLabel
+    }}</gl-link>
+  </gl-alert>
+</template>