debian-mirror-gitlab/app/assets/javascripts/registry/explorer/pages/details.vue

291 lines
8.6 KiB
Vue
Raw Normal View History

2020-03-13 15:44:24 +05:30
<script>
2021-02-22 17:27:13 +05:30
import { GlKeysetPagination, GlResizeObserverDirective } from '@gitlab/ui';
2020-03-13 15:44:24 +05:30
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
2021-02-22 17:27:13 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import axios from '~/lib/utils/axios_utils';
2021-02-22 17:27:13 +05:30
import { joinPaths } from '~/lib/utils/url_utility';
2021-03-11 19:13:27 +05:30
import Tracking from '~/tracking';
import DeleteImage from '../components/delete_image.vue';
2020-06-23 00:09:42 +05:30
import DeleteAlert from '../components/details_page/delete_alert.vue';
import DeleteModal from '../components/details_page/delete_modal.vue';
import DetailsHeader from '../components/details_page/details_header.vue';
2021-03-11 19:13:27 +05:30
import EmptyState from '../components/details_page/empty_state.vue';
import PartialCleanupAlert from '../components/details_page/partial_cleanup_alert.vue';
import StatusAlert from '../components/details_page/status_alert.vue';
2020-07-28 23:09:34 +05:30
import TagsList from '../components/details_page/tags_list.vue';
2020-06-23 00:09:42 +05:30
import TagsLoader from '../components/details_page/tags_loader.vue';
2021-02-22 17:27:13 +05:30
2020-03-13 15:44:24 +05:30
import {
2020-06-23 00:09:42 +05:30
ALERT_SUCCESS_TAG,
ALERT_DANGER_TAG,
ALERT_SUCCESS_TAGS,
ALERT_DANGER_TAGS,
2021-03-11 19:13:27 +05:30
ALERT_DANGER_IMAGE,
2021-02-22 17:27:13 +05:30
GRAPHQL_PAGE_SIZE,
FETCH_IMAGES_LIST_ERROR_MESSAGE,
2021-03-08 18:12:59 +05:30
UNFINISHED_STATUS,
2021-04-17 20:07:23 +05:30
MISSING_OR_DELETED_IMAGE_BREADCRUMB,
ROOT_IMAGE_TEXT,
2020-06-23 00:09:42 +05:30
} from '../constants/index';
2021-03-11 19:13:27 +05:30
import deleteContainerRepositoryTagsMutation from '../graphql/mutations/delete_container_repository_tags.mutation.graphql';
import getContainerRepositoryDetailsQuery from '../graphql/queries/get_container_repository_details.query.graphql';
2020-03-13 15:44:24 +05:30
export default {
2021-03-08 18:12:59 +05:30
name: 'RegistryDetailsPage',
2020-03-13 15:44:24 +05:30
components: {
2020-06-23 00:09:42 +05:30
DeleteAlert,
2021-01-03 14:25:43 +05:30
PartialCleanupAlert,
2020-06-23 00:09:42 +05:30
DetailsHeader,
2021-02-22 17:27:13 +05:30
GlKeysetPagination,
2020-06-23 00:09:42 +05:30
DeleteModal,
2020-07-28 23:09:34 +05:30
TagsList,
2020-06-23 00:09:42 +05:30
TagsLoader,
2021-03-11 19:13:27 +05:30
EmptyState,
StatusAlert,
DeleteImage,
2020-03-13 15:44:24 +05:30
},
directives: {
GlResizeObserver: GlResizeObserverDirective,
},
2020-06-23 00:09:42 +05:30
mixins: [Tracking.mixin()],
2021-03-08 18:12:59 +05:30
inject: ['breadCrumbState', 'config'],
2021-02-22 17:27:13 +05:30
apollo: {
image: {
query: getContainerRepositoryDetailsQuery,
variables() {
return this.queryVariables;
},
update(data) {
return data.containerRepository;
},
result({ data }) {
this.tagsPageInfo = data.containerRepository?.tags?.pageInfo;
2021-03-11 19:13:27 +05:30
this.updateBreadcrumb();
2021-02-22 17:27:13 +05:30
},
error() {
createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
},
},
},
2020-03-13 15:44:24 +05:30
data() {
return {
2021-02-22 17:27:13 +05:30
image: {},
tagsPageInfo: {},
2020-03-13 15:44:24 +05:30
itemsToBeDeleted: [],
2021-01-29 00:20:46 +05:30
isMobile: false,
2021-02-22 17:27:13 +05:30
mutationLoading: false,
2020-06-23 00:09:42 +05:30
deleteAlertType: null,
2021-03-11 19:13:27 +05:30
hidePartialCleanupWarning: false,
deleteImageAlert: false,
2020-03-13 15:44:24 +05:30
};
},
computed: {
2021-02-22 17:27:13 +05:30
queryVariables() {
return {
id: joinPaths(this.config.gidPrefix, `${this.$route.params.id}`),
first: GRAPHQL_PAGE_SIZE,
};
},
isLoading() {
return this.$apollo.queries.image.loading || this.mutationLoading;
},
tags() {
return this.image?.tags?.nodes || [];
},
2021-01-03 14:25:43 +05:30
showPartialCleanupWarning() {
2021-03-08 18:12:59 +05:30
return (
2021-03-11 19:13:27 +05:30
this.config.showUnfinishedTagCleanupCallout &&
2021-03-08 18:12:59 +05:30
this.image?.expirationPolicyCleanupStatus === UNFINISHED_STATUS &&
2021-03-11 19:13:27 +05:30
!this.hidePartialCleanupWarning
2021-03-08 18:12:59 +05:30
);
2020-03-13 15:44:24 +05:30
},
tracking() {
return {
2020-06-23 00:09:42 +05:30
label:
this.itemsToBeDeleted?.length > 1 ? 'bulk_registry_tag_delete' : 'registry_tag_delete',
2020-03-13 15:44:24 +05:30
};
},
2021-02-22 17:27:13 +05:30
showPagination() {
return this.tagsPageInfo.hasPreviousPage || this.tagsPageInfo.hasNextPage;
2020-03-13 15:44:24 +05:30
},
2021-03-11 19:13:27 +05:30
hasNoTags() {
return this.tags.length === 0;
},
pageActionsAreDisabled() {
return Boolean(this.image?.status);
},
2020-05-24 23:13:21 +05:30
},
2020-03-13 15:44:24 +05:30
methods: {
2021-03-11 19:13:27 +05:30
updateBreadcrumb() {
2021-04-17 20:07:23 +05:30
const name = this.image?.id
? this.image?.name || ROOT_IMAGE_TEXT
: MISSING_OR_DELETED_IMAGE_BREADCRUMB;
2021-03-11 19:13:27 +05:30
this.breadCrumbState.updateName(name);
},
2020-07-28 23:09:34 +05:30
deleteTags(toBeDeleted) {
2021-03-11 19:13:27 +05:30
this.deleteImageAlert = false;
2021-03-08 18:12:59 +05:30
this.itemsToBeDeleted = this.tags.filter((tag) => toBeDeleted[tag.name]);
2020-03-13 15:44:24 +05:30
this.track('click_button');
this.$refs.deleteModal.show();
},
2021-03-11 19:13:27 +05:30
confirmDelete() {
if (this.deleteImageAlert) {
this.$refs.deleteImage.doDelete();
} else {
this.handleDeleteTag();
}
},
async handleDeleteTag() {
2021-02-22 17:27:13 +05:30
this.track('confirm_delete');
2020-03-13 15:44:24 +05:30
const { itemsToBeDeleted } = this;
this.itemsToBeDeleted = [];
2021-02-22 17:27:13 +05:30
this.mutationLoading = true;
try {
const { data } = await this.$apollo.mutate({
mutation: deleteContainerRepositoryTagsMutation,
variables: {
id: this.queryVariables.id,
2021-03-08 18:12:59 +05:30
tagNames: itemsToBeDeleted.map((i) => i.name),
2021-02-22 17:27:13 +05:30
},
awaitRefetchQueries: true,
refetchQueries: [
{
query: getContainerRepositoryDetailsQuery,
variables: this.queryVariables,
},
],
2020-05-24 23:13:21 +05:30
});
2021-02-22 17:27:13 +05:30
if (data?.destroyContainerRepositoryTags?.errors[0]) {
throw new Error();
}
this.deleteAlertType =
itemsToBeDeleted.length === 0 ? ALERT_SUCCESS_TAG : ALERT_SUCCESS_TAGS;
} catch (e) {
this.deleteAlertType = itemsToBeDeleted.length === 0 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS;
2020-03-13 15:44:24 +05:30
}
2021-02-22 17:27:13 +05:30
this.mutationLoading = false;
2020-03-13 15:44:24 +05:30
},
handleResize() {
2021-01-29 00:20:46 +05:30
this.isMobile = GlBreakpointInstance.getBreakpointSize() === 'xs';
2020-03-13 15:44:24 +05:30
},
2021-02-22 17:27:13 +05:30
fetchNextPage() {
if (this.tagsPageInfo?.hasNextPage) {
this.$apollo.queries.image.fetchMore({
variables: {
after: this.tagsPageInfo?.endCursor,
first: GRAPHQL_PAGE_SIZE,
},
updateQuery(previousResult, { fetchMoreResult }) {
return fetchMoreResult;
},
});
}
},
fetchPreviousPage() {
if (this.tagsPageInfo?.hasPreviousPage) {
this.$apollo.queries.image.fetchMore({
variables: {
first: null,
before: this.tagsPageInfo?.startCursor,
last: GRAPHQL_PAGE_SIZE,
},
updateQuery(previousResult, { fetchMoreResult }) {
return fetchMoreResult;
},
});
}
},
2021-03-11 19:13:27 +05:30
dismissPartialCleanupWarning() {
this.hidePartialCleanupWarning = true;
axios.post(this.config.userCalloutsPath, {
feature_name: this.config.userCalloutId,
});
},
deleteImage() {
this.deleteImageAlert = true;
this.itemsToBeDeleted = [{ path: this.image.path }];
this.$refs.deleteModal.show();
},
deleteImageError() {
this.deleteAlertType = ALERT_DANGER_IMAGE;
},
deleteImageIniit() {
this.itemsToBeDeleted = [];
this.mutationLoading = true;
},
2020-03-13 15:44:24 +05:30
},
};
</script>
<template>
2020-10-24 23:57:45 +05:30
<div v-gl-resize-observer="handleResize" class="gl-my-3">
2021-03-11 19:13:27 +05:30
<template v-if="image">
<delete-alert
v-model="deleteAlertType"
:garbage-collection-help-page-path="config.garbageCollectionHelpPagePath"
:is-admin="config.isAdmin"
class="gl-my-2"
/>
<partial-cleanup-alert
v-if="showPartialCleanupWarning"
:run-cleanup-policies-help-page-path="config.runCleanupPoliciesHelpPagePath"
:cleanup-policies-help-page-path="config.cleanupPoliciesHelpPagePath"
@dismiss="dismissPartialCleanupWarning"
/>
2020-04-08 14:13:33 +05:30
2021-03-11 19:13:27 +05:30
<status-alert v-if="image.status" :status="image.status" />
2021-01-03 14:25:43 +05:30
2021-03-11 19:13:27 +05:30
<details-header
:image="image"
:metadata-loading="isLoading"
:disabled="pageActionsAreDisabled"
@delete="deleteImage"
/>
2020-04-08 14:13:33 +05:30
2021-03-11 19:13:27 +05:30
<tags-loader v-if="isLoading" />
2021-02-22 17:27:13 +05:30
<template v-else>
2021-03-11 19:13:27 +05:30
<empty-state v-if="hasNoTags" :no-containers-image="config.noContainersImage" />
<template v-else>
<tags-list
:tags="tags"
:is-mobile="isMobile"
:disabled="pageActionsAreDisabled"
@delete="deleteTags"
2021-02-22 17:27:13 +05:30
/>
2021-03-11 19:13:27 +05:30
<div class="gl-display-flex gl-justify-content-center">
<gl-keyset-pagination
v-if="showPagination"
:has-next-page="tagsPageInfo.hasNextPage"
:has-previous-page="tagsPageInfo.hasPreviousPage"
class="gl-mt-3"
@prev="fetchPreviousPage"
@next="fetchNextPage"
/>
</div>
</template>
2021-02-22 17:27:13 +05:30
</template>
2020-04-08 14:13:33 +05:30
2021-03-11 19:13:27 +05:30
<delete-image
:id="image.id"
ref="deleteImage"
use-update-fn
@start="deleteImageIniit"
@error="deleteImageError"
@end="mutationLoading = false"
/>
<delete-modal
ref="deleteModal"
:items-to-be-deleted="itemsToBeDeleted"
:delete-image="deleteImageAlert"
@confirmDelete="confirmDelete"
@cancel="track('cancel_delete')"
/>
</template>
<empty-state v-else is-empty-image :no-containers-image="config.noContainersImage" />
2020-03-13 15:44:24 +05:30
</div>
</template>