1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
new file mode 100644
index 00000000000..5a55d5669a8
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
@@ -0,0 +1,61 @@
+<script>
+import { isEmpty } from 'lodash';
+import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import * as i18n from '../translations';
+import { BASE_SORT_FIELDS } from '../constants';
+import SearchBar from '../components/search_bar.vue';
+import ModelRow from '../components/model_row.vue';
+
+export default {
+  name: 'IndexMlModels',
+  components: {
+    Pagination,
+    ModelRow,
+    SearchBar,
+    MetadataItem,
+    TitleArea,
+  },
+  props: {
+    models: {
+      type: Array,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+    modelCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  computed: {
+    hasModels() {
+      return !isEmpty(this.models);
+    },
+  },
+  i18n,
+  sortableFields: BASE_SORT_FIELDS,
+};
+</script>
+
+<template>
+  <div>
+    <title-area :title="$options.i18n.TITLE_LABEL">
+      <template #metadata-models-count>
+        <metadata-item icon="machine-learning" :text="$options.i18n.modelsCountLabel(modelCount)" />
+      </template>
+    </title-area>
+
+    <template v-if="hasModels">
+      <search-bar :sortable-fields="$options.sortableFields" />
+      <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>