diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-06 21:09:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-06 21:09:03 +0300 |
commit | 2b6716fbb2c0ec50bd019b3e08aff2c3b95f11fa (patch) | |
tree | 11974f309192a11e73ac883af5b9dfba4d595867 /app/assets/javascripts/packages_and_registries | |
parent | 67fa8362ae35ab6134454aa74ad536eb405dff29 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/packages_and_registries')
9 files changed, 77 insertions, 28 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue index 1f52e319ad0..a720ad75570 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue @@ -1,7 +1,9 @@ <script> -import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlIcon, GlPopover, GlLink, GlSprintf } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { timeTilRun } from '../../utils'; import { - CLEANUP_TIMED_OUT_ERROR_MESSAGE, + PARTIAL_CLEANUP_CONTINUE_MESSAGE, CLEANUP_STATUS_SCHEDULED, CLEANUP_STATUS_ONGOING, CLEANUP_STATUS_UNFINISHED, @@ -15,9 +17,9 @@ export default { name: 'CleanupStatus', components: { GlIcon, - }, - directives: { - GlTooltip: GlTooltipDirective, + GlPopover, + GlLink, + GlSprintf, }, props: { status: { @@ -29,12 +31,17 @@ export default { ); }, }, + expirationPolicyNextRunAt: { + type: String, + required: false, + default: () => '', + }, }, i18n: { CLEANUP_STATUS_SCHEDULED, CLEANUP_STATUS_ONGOING, CLEANUP_STATUS_UNFINISHED, - CLEANUP_TIMED_OUT_ERROR_MESSAGE, + PARTIAL_CLEANUP_CONTINUE_MESSAGE, }, computed: { showStatus() { @@ -46,26 +53,57 @@ export default { statusText() { return this.$options.i18n[`CLEANUP_STATUS_${this.status}`]; }, - expireIconClass() { - return this.failedDelete ? 'gl-text-orange-500' : ''; + calculatedTimeTilNextRun() { + return timeTilRun(this.expirationPolicyNextRunAt?.next_run); }, }, + statusPopoverOptions: { + triggers: 'hover', + placement: 'top', + }, + cleanupPolicyHelpPage: helpPagePath( + 'user/packages/container_registry/reduce_container_registry_storage.html', + { anchor: 'how-the-cleanup-policy-works' }, + ), }; </script> <template> - <div v-if="showStatus" class="gl-display-inline-flex gl-align-items-center"> - <gl-icon name="expire" data-testid="main-icon" :class="expireIconClass" /> + <div + v-if="showStatus" + id="status-popover-container" + class="gl-display-inline-flex gl-align-items-center" + > + <div class="gl-display-inline-flex gl-align-items-center"> + <gl-icon name="expire" data-testid="main-icon" /> + </div> <span class="gl-mx-2"> {{ statusText }} </span> <gl-icon v-if="failedDelete" - v-gl-tooltip="{ title: $options.i18n.CLEANUP_TIMED_OUT_ERROR_MESSAGE }" + id="status-info" :size="14" - class="gl-text-black-normal" + class="gl-text-gray-500" data-testid="extra-info" - name="information" + name="information-o" /> + <gl-popover + target="status-info" + container="status-popover-container" + v-bind="$options.statusPopoverOptions" + > + <template #title> + {{ $options.i18n.CLEANUP_STATUS_UNFINISHED }} + </template> + <gl-sprintf :message="$options.i18n.PARTIAL_CLEANUP_CONTINUE_MESSAGE"> + <template #time>{{ calculatedTimeTilNextRun }}</template + ><template #link="{ content }" + ><gl-link :href="$options.cleanupPolicyHelpPage" class="gl-font-sm" target="_blank">{{ + content + }}</gl-link></template + > + </gl-sprintf> + </gl-popover> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue index 5bd13322ebb..6f1f67e251f 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue @@ -22,6 +22,11 @@ export default { type: Object, required: true, }, + expirationPolicy: { + type: Object, + default: () => ({}), + required: false, + }, }, computed: { showPagination() { @@ -38,6 +43,7 @@ export default { :key="index" :item="listItem" :metadata-loading="metadataLoading" + :expiration-policy="expirationPolicy" @delete="$emit('delete', $event)" /> <div class="gl-display-flex gl-justify-content-center"> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue index 484903354e8..12263c6fc5a 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue @@ -6,12 +6,10 @@ import { n__ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { - ASYNC_DELETE_IMAGE_ERROR_MESSAGE, LIST_DELETE_BUTTON_DISABLED, LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION, REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, - CLEANUP_TIMED_OUT_ERROR_MESSAGE, IMAGE_DELETE_SCHEDULED_STATUS, IMAGE_FAILED_DELETED_STATUS, IMAGE_MIGRATING_STATE, @@ -45,6 +43,11 @@ export default { default: false, required: false, }, + expirationPolicy: { + type: Object, + default: () => ({}), + required: false, + }, }, i18n: { REMOVE_REPOSITORY_LABEL, @@ -73,15 +76,6 @@ export default { this.item.tagsCount, ); }, - warningIconText() { - if (this.failedDelete) { - return ASYNC_DELETE_IMAGE_ERROR_MESSAGE; - } - if (this.item.expirationPolicyStartedAt) { - return CLEANUP_TIMED_OUT_ERROR_MESSAGE; - } - return null; - }, imageName() { return this.item.name ? this.item.path : `${this.item.path}/ ${ROOT_IMAGE_TEXT}`; }, @@ -140,6 +134,7 @@ export default { v-if="item.expirationPolicyCleanupStatus" class="ml-2" :status="item.expirationPolicyCleanupStatus" + :expiration-policy-next-run-at="expirationPolicy.next_run_at" /> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js index 3c7f7ca9aa8..2a58933cd64 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js @@ -87,7 +87,7 @@ export const CLEANUP_DISABLED_TOOLTIP = s__( export const CLEANUP_STATUS_SCHEDULED = s__('ContainerRegistry|Cleanup will run soon'); export const CLEANUP_STATUS_ONGOING = s__('ContainerRegistry|Cleanup is ongoing'); -export const CLEANUP_STATUS_UNFINISHED = s__('ContainerRegistry|Cleanup timed out'); +export const CLEANUP_STATUS_UNFINISHED = s__('ContainerRegistry|Partial cleanup complete'); export const DETAILS_DELETE_IMAGE_ERROR_MESSAGE = s__( 'ContainerRegistry|Something went wrong while scheduling the image for deletion.', diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js index e584da23edb..9d0ecfd2dcb 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js @@ -10,7 +10,7 @@ export const DELETE_ALERT_TITLE = s__('ContainerRegistry|Some tags were not dele export const DELETE_ALERT_LINK_TEXT = s__( 'ContainerRegistry|The cleanup policy timed out before it could delete all tags. An administrator can %{adminLinkStart}manually run cleanup now%{adminLinkEnd} or you can wait for the cleanup policy to automatically run again. %{docLinkStart}More information%{docLinkEnd}', ); -export const CLEANUP_TIMED_OUT_ERROR_MESSAGE = s__( - 'ContainerRegistry|Cleanup timed out before it could delete all tags', +export const PARTIAL_CLEANUP_CONTINUE_MESSAGE = s__( + 'ContainerRegistry|The cleanup will continue within %{time}. %{linkStart}Learn more%{linkEnd}', ); export const SET_UP_CLEANUP = s__('ContainerRegistry|Set up cleanup'); diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index bb116d5f842..c1bd71de646 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -336,6 +336,7 @@ export default { :images="images" :metadata-loading="$apollo.queries.additionalDetails.loading" :page-info="pageInfo" + :expiration-policy="config.expirationPolicy" @delete="deleteImage" @prev-page="fetchPreviousPage" @next-page="fetchNextPage" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js new file mode 100644 index 00000000000..ffdaf9f2f17 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js @@ -0,0 +1,8 @@ +import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility'; + +export const timeTilRun = (time) => { + if (!time) return ''; + + const difference = calculateRemainingMilliseconds(time); + return approximateDuration(difference / 1000); +}; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue index 09988f4e1d9..04faff1a75b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue @@ -159,7 +159,7 @@ export default { </span> </template> - <template #right-action> + <template v-if="packageEntity.canDestroy" #right-action> <gl-dropdown data-testid="delete-dropdown" icon="ellipsis_v" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql index 66315fda9e9..b5695a01376 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql @@ -5,6 +5,7 @@ fragment PackageData on Package { packageType createdAt status + canDestroy tags { nodes { id |