1 files changed, 21 insertions, 6 deletions
diff --git a/app/assets/javascripts/ml/model_registry/routes/models/index/components/ml_models_index.vue b/app/assets/javascripts/ml/model_registry/routes/models/index/components/ml_models_index.vue
index 37e5877ec52..3770b4ec3ac 100644
--- a/app/assets/javascripts/ml/model_registry/routes/models/index/components/ml_models_index.vue
+++ b/app/assets/javascripts/ml/model_registry/routes/models/index/components/ml_models_index.vue
@@ -1,17 +1,29 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import * as translations from '~/ml/model_registry/routes/models/index/translations';
+import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import ModelRow from './model_row.vue';
 
 export default {
-  name: 'MlExperimentsIndexApp',
+  name: 'MlModelRegistryApp',
   components: {
-    GlLink,
+    Pagination,
+    ModelRow,
   },
   props: {
     models: {
       type: Array,
       required: true,
     },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    hasModels() {
+      return !isEmpty(this.models);
+    },
   },
   i18n: translations,
 };
@@ -27,8 +39,11 @@ export default {
       </div>
     </div>
 
-    <div v-for="model in models" :key="model.name">
-      <gl-link :href="model.path"> {{ model.name }} / {{ model.version }} </gl-link>
-    </div>
+    <template v-if="hasModels">
+      <model-row v-for="model in models" :key="model.name" :model="model" />
+      <pagination v-bind="pageInfo" />
+    </template>
+
+    <p v-else class="gl-text-secondary">{{ $options.i18n.NO_MODELS_LABEL }}</p>
   </div>
 </template>