3 files changed, 28 insertions, 27 deletions
diff --git a/app/assets/javascripts/pages/projects/ml/candidates/show/index.js b/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
index c1acef5ac13..fee6258eddc 100644
--- a/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
+++ b/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
@@ -1,27 +1,4 @@
-import Vue from 'vue';
+import { initSimpleApp } from '~/helpers/init_simple_app_helper';
 import MlCandidate from '~/ml/experiment_tracking/components/ml_candidate.vue';
 
-const initShowCandidate = () => {
-  const element = document.querySelector('#js-show-ml-candidate');
-  if (!element) {
-    return;
-  }
-
-  const container = document.createElement('div');
-  element.appendChild(container);
-
-  const candidate = JSON.parse(element.dataset.candidate);
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: container,
-    provide: {
-      candidate,
-    },
-    render(h) {
-      return h(MlCandidate);
-    },
-  });
-};
-
-initShowCandidate();
+initSimpleApp('#js-show-ml-candidate', MlCandidate);
diff --git a/app/assets/javascripts/pages/projects/ml/experiments/index/index.js b/app/assets/javascripts/pages/projects/ml/experiments/index/index.js
new file mode 100644
index 00000000000..e9ffd4b528b
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/ml/experiments/index/index.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import MlExperimentsIndex from '~/ml/experiment_tracking/routes/experiments/index';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+const initIndexMlExperiments = () => {
+  const element = document.querySelector('#js-project-ml-experiments-index');
+  if (!element) {
+    return undefined;
+  }
+
+  const props = {
+    experiments: JSON.parse(element.dataset.experiments),
+    pageInfo: convertObjectPropsToCamelCase(JSON.parse(element.dataset.pageInfo)),
+  };
+
+  return new Vue({
+    el: element,
+    render(h) {
+      return h(MlExperimentsIndex, { props });
+    },
+  });
+};
+
+initIndexMlExperiments();
diff --git a/app/assets/javascripts/pages/projects/ml/experiments/show/index.js b/app/assets/javascripts/pages/projects/ml/experiments/show/index.js
index 6947b15dcbe..0e64d8c17db 100644
--- a/app/assets/javascripts/pages/projects/ml/experiments/show/index.js
+++ b/app/assets/javascripts/pages/projects/ml/experiments/show/index.js
@@ -14,7 +14,7 @@ const initShowExperiment = () => {
   const candidates = JSON.parse(element.dataset.candidates);
   const metricNames = JSON.parse(element.dataset.metrics);
   const paramNames = JSON.parse(element.dataset.params);
-  const pagination = convertObjectPropsToCamelCase(JSON.parse(element.dataset.pagination));
+  const pageInfo = convertObjectPropsToCamelCase(JSON.parse(element.dataset.pageInfo));
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -23,7 +23,7 @@ const initShowExperiment = () => {
       candidates,
       metricNames,
       paramNames,
-      pagination,
+      pageInfo,
     },
     render(h) {
       return h(MlExperiment);