diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-05 00:07:37 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-05 00:07:37 +0300 |
commit | 808b8561f4e75b2db7c7e94a6c7651efb546048b (patch) | |
tree | 2cb7546939b56fef3a73a52dd8790de55f0fc0e4 /app/assets | |
parent | cc514c362bcd4b657bf6a6d1d37f5305952df363 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
3 files changed, 117 insertions, 117 deletions
diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_list.vue b/app/assets/javascripts/ml/model_registry/components/candidate_list.vue index fc24a538293..fca4462d7d2 100644 --- a/app/assets/javascripts/ml/model_registry/components/candidate_list.vue +++ b/app/assets/javascripts/ml/model_registry/components/candidate_list.vue @@ -1,22 +1,17 @@ <script> -import { GlAlert } from '@gitlab/ui'; -import { n__ } from '~/locale'; -import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; -import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; import * as Sentry from '~/sentry/sentry_browser_wrapper'; import { convertToGraphQLId } from '~/graphql_shared/utils'; -import CandidateListRow from '~/ml/model_registry/components/candidate_list_row.vue'; import { makeLoadCandidatesErrorMessage, NO_CANDIDATES_LABEL } from '../translations'; import getModelCandidatesQuery from '../graphql/queries/get_model_candidates.query.graphql'; import { GRAPHQL_PAGE_SIZE } from '../constants'; +import SearchableList from './searchable_list.vue'; +import CandidateListRow from './candidate_list_row.vue'; export default { name: 'MlCandidateList', components: { - GlAlert, CandidateListRow, - PackagesListLoader, - RegistryList, + SearchableList, }, props: { modelId: { @@ -26,7 +21,7 @@ export default { }, data() { return { - modelVersions: {}, + candidates: {}, errorMessage: undefined, }; }, @@ -49,18 +44,12 @@ export default { gid() { return convertToGraphQLId('Ml::Model', this.modelId); }, - isListEmpty() { - return this.count === 0; - }, isLoading() { return this.$apollo.queries.candidates.loading; }, pageInfo() { return this.candidates?.pageInfo ?? {}; }, - listTitle() { - return n__('%d candidate', '%d candidates', this.count); - }, queryVariables() { return { id: this.gid, @@ -70,18 +59,12 @@ export default { items() { return this.candidates?.nodes ?? []; }, - count() { - return this.candidates?.count ?? 0; - }, }, methods: { - fetchPage({ first = null, last = null, before = null, after = null } = {}) { + fetchPage(newPageInfo) { const variables = { ...this.queryVariables, - first, - last, - before, - after, + ...newPageInfo, }; this.$apollo.queries.candidates.fetchMore({ @@ -91,18 +74,6 @@ export default { }, }); }, - fetchPreviousCandidatesPage() { - this.fetchPage({ - last: GRAPHQL_PAGE_SIZE, - before: this.pageInfo?.startCursor, - }); - }, - fetchNextCandidatesPage() { - this.fetchPage({ - first: GRAPHQL_PAGE_SIZE, - after: this.pageInfo?.endCursor, - }); - }, }, i18n: { NO_CANDIDATES_LABEL, @@ -111,29 +82,19 @@ export default { </script> <template> <div> - <div v-if="isLoading"> - <packages-list-loader /> - </div> - <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">{{ - errorMessage - }}</gl-alert> - <div v-else-if="isListEmpty" class="gl-text-secondary"> - {{ $options.i18n.NO_CANDIDATES_LABEL }} - </div> - <div v-else> - <registry-list - :hidden-delete="true" - :is-loading="isLoading" - :items="items" - :pagination="pageInfo" - :title="listTitle" - @prev-page="fetchPreviousCandidatesPage" - @next-page="fetchNextCandidatesPage" - > - <template #default="{ item }"> - <candidate-list-row :candidate="item" /> - </template> - </registry-list> - </div> + <searchable-list + :page-info="pageInfo" + :items="items" + :error-message="errorMessage" + @fetch-page="fetchPage" + > + <template #empty-state> + {{ $options.i18n.NO_CANDIDATES_LABEL }} + </template> + + <template #item="{ item }"> + <candidate-list-row :candidate="item" /> + </template> + </searchable-list> </div> </template> diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_list.vue b/app/assets/javascripts/ml/model_registry/components/model_version_list.vue index 6b44cb2f613..5a649a9596a 100644 --- a/app/assets/javascripts/ml/model_registry/components/model_version_list.vue +++ b/app/assets/javascripts/ml/model_registry/components/model_version_list.vue @@ -1,23 +1,18 @@ <script> -import { GlAlert } from '@gitlab/ui'; -import { n__ } from '~/locale'; -import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; -import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; import * as Sentry from '~/sentry/sentry_browser_wrapper'; import { makeLoadVersionsErrorMessage } from '~/ml/model_registry/translations'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import getModelVersionsQuery from '../graphql/queries/get_model_versions.query.graphql'; import { GRAPHQL_PAGE_SIZE, MODEL_ENTITIES } from '../constants'; +import SearchableList from './searchable_list.vue'; import EmptyState from './empty_state.vue'; import ModelVersionRow from './model_version_row.vue'; export default { components: { EmptyState, - GlAlert, ModelVersionRow, - PackagesListLoader, - RegistryList, + SearchableList, }, props: { modelId: { @@ -50,18 +45,12 @@ export default { gid() { return convertToGraphQLId('Ml::Model', this.modelId); }, - isListEmpty() { - return this.count === 0; - }, isLoading() { return this.$apollo.queries.modelVersions.loading; }, pageInfo() { return this.modelVersions?.pageInfo ?? {}; }, - listTitle() { - return n__('%d version', '%d versions', this.versions.length); - }, queryVariables() { return { id: this.gid, @@ -71,31 +60,12 @@ export default { versions() { return this.modelVersions?.nodes ?? []; }, - count() { - return this.modelVersions?.count ?? 0; - }, }, methods: { - fetchPreviousVersionsPage() { + fetchPage(pageInfo) { const variables = { ...this.queryVariables, - first: null, - last: GRAPHQL_PAGE_SIZE, - before: this.pageInfo?.startCursor, - }; - this.$apollo.queries.modelVersions.fetchMore({ - variables, - updateQuery: (previousResult, { fetchMoreResult }) => { - return fetchMoreResult; - }, - }); - }, - fetchNextVersionsPage() { - const variables = { - ...this.queryVariables, - first: GRAPHQL_PAGE_SIZE, - last: null, - after: this.pageInfo?.endCursor, + ...pageInfo, }; this.$apollo.queries.modelVersions.fetchMore({ @@ -110,28 +80,18 @@ export default { }; </script> <template> - <div> - <div v-if="isLoading"> - <packages-list-loader /> - </div> - <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">{{ - errorMessage - }}</gl-alert> - <empty-state v-else-if="isListEmpty" :entity-type="$options.modelVersionEntity" /> - <div v-else> - <registry-list - :hidden-delete="true" - :is-loading="isLoading" - :items="versions" - :pagination="pageInfo" - :title="listTitle" - @prev-page="fetchPreviousVersionsPage" - @next-page="fetchNextVersionsPage" - > - <template #default="{ item }"> - <model-version-row :model-version="item" /> - </template> - </registry-list> - </div> - </div> + <searchable-list + :page-info="pageInfo" + :items="versions" + :error-message="errorMessage" + @fetch-page="fetchPage" + > + <template #empty-state> + <empty-state :entity-type="$options.modelVersionEntity" /> + </template> + + <template #item="{ item }"> + <model-version-row :model-version="item" /> + </template> + </searchable-list> </template> diff --git a/app/assets/javascripts/ml/model_registry/components/searchable_list.vue b/app/assets/javascripts/ml/model_registry/components/searchable_list.vue new file mode 100644 index 00000000000..05062ae6fbf --- /dev/null +++ b/app/assets/javascripts/ml/model_registry/components/searchable_list.vue @@ -0,0 +1,79 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; +import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; +import { GRAPHQL_PAGE_SIZE } from '~/ml/model_registry/constants'; + +export default { + name: 'SearchableList', + components: { PackagesListLoader, RegistryList, GlAlert }, + props: { + items: { + type: Array, + required: true, + }, + pageInfo: { + type: Object, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + errorMessage: { + type: String, + required: false, + default: '', + }, + }, + computed: { + isListEmpty() { + return this.items.length === 0; + }, + }, + methods: { + prevPage() { + const pageInfo = { + first: null, + last: GRAPHQL_PAGE_SIZE, + before: this.pageInfo.startCursor, + }; + + this.$emit('fetch-page', pageInfo); + }, + nextPage() { + const pageInfo = { + first: GRAPHQL_PAGE_SIZE, + last: null, + after: this.pageInfo.endCursor, + }; + + this.$emit('fetch-page', pageInfo); + }, + }, +}; +</script> + +<template> + <div> + <packages-list-loader v-if="isLoading" /> + <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false"> + {{ errorMessage }} + </gl-alert> + <slot v-else-if="isListEmpty" name="empty-state"></slot> + <registry-list + v-else + :hidden-delete="true" + :is-loading="isLoading" + :items="items" + :pagination="pageInfo" + @prev-page="prevPage" + @next-page="nextPage" + > + <template #default="{ item }"> + <slot name="item" :item="item"></slot> + </template> + </registry-list> + </div> +</template> |