diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer')
3 files changed, 93 insertions, 19 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/registry/explorer/components/list_page/cleanup_status.vue new file mode 100644 index 00000000000..8d9e221af4c --- /dev/null +++ b/app/assets/javascripts/registry/explorer/components/list_page/cleanup_status.vue @@ -0,0 +1,71 @@ +<script> +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { + ASYNC_DELETE_IMAGE_ERROR_MESSAGE, + CLEANUP_STATUS_SCHEDULED, + CLEANUP_STATUS_ONGOING, + CLEANUP_STATUS_UNFINISHED, + UNFINISHED_STATUS, + UNSCHEDULED_STATUS, + SCHEDULED_STATUS, + ONGOING_STATUS, +} from '../../constants/index'; + +export default { + name: 'CleanupStatus', + components: { + GlIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + status: { + type: String, + required: true, + validator(value) { + return [UNFINISHED_STATUS, UNSCHEDULED_STATUS, SCHEDULED_STATUS, ONGOING_STATUS].includes( + value, + ); + }, + }, + }, + i18n: { + CLEANUP_STATUS_SCHEDULED, + CLEANUP_STATUS_ONGOING, + CLEANUP_STATUS_UNFINISHED, + ASYNC_DELETE_IMAGE_ERROR_MESSAGE, + }, + computed: { + showStatus() { + return this.status !== UNSCHEDULED_STATUS; + }, + failedDelete() { + return this.status === UNFINISHED_STATUS; + }, + statusText() { + return this.$options.i18n[`CLEANUP_STATUS_${this.status}`]; + }, + expireIconClass() { + return this.failedDelete ? 'gl-text-orange-500' : ''; + }, + }, +}; +</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" /> + <span class="gl-mx-2"> + {{ statusText }} + </span> + <gl-icon + v-if="failedDelete" + v-gl-tooltip="{ title: $options.i18n.ASYNC_DELETE_IMAGE_ERROR_MESSAGE }" + :size="14" + class="gl-text-black-normal" + data-testid="extra-info" + name="information" + /> + </div> +</template> diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue index 930ad01c758..c1ec523574a 100644 --- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue +++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue @@ -16,6 +16,7 @@ import { ROOT_IMAGE_TEXT, } from '../../constants/index'; import DeleteButton from '../delete_button.vue'; +import CleanupStatus from './cleanup_status.vue'; export default { name: 'ImageListRow', @@ -26,6 +27,7 @@ export default { GlIcon, ListItem, GlSkeletonLoader, + CleanupStatus, }, directives: { GlTooltip: GlTooltipDirective, @@ -112,27 +114,24 @@ export default { :title="item.location" category="tertiary" /> - <gl-icon - v-if="warningIconText" - v-gl-tooltip="{ title: warningIconText }" - data-testid="warning-icon" - name="warning" - class="gl-text-orange-500" - /> </template> <template #left-secondary> - <span - v-if="!metadataLoading" - class="gl-display-flex gl-align-items-center" - data-testid="tags-count" - > - <gl-icon name="tag" class="gl-mr-2" /> - <gl-sprintf :message="tagsCountText"> - <template #count> - {{ item.tagsCount }} - </template> - </gl-sprintf> - </span> + <template v-if="!metadataLoading"> + <span class="gl-display-flex gl-align-items-center" data-testid="tags-count"> + <gl-icon name="tag" class="gl-mr-2" /> + <gl-sprintf :message="tagsCountText"> + <template #count> + {{ item.tagsCount }} + </template> + </gl-sprintf> + </span> + + <cleanup-status + v-if="item.expirationPolicyCleanupStatus" + class="ml-2" + :status="item.expirationPolicyCleanupStatus" + /> + </template> <div v-else class="gl-w-full"> <gl-skeleton-loader :width="900" :height="16" preserve-aspect-ratio="xMinYMax meet"> diff --git a/app/assets/javascripts/registry/explorer/constants/details.js b/app/assets/javascripts/registry/explorer/constants/details.js index 5dcc042a9c4..9b4c06349e2 100644 --- a/app/assets/javascripts/registry/explorer/constants/details.js +++ b/app/assets/javascripts/registry/explorer/constants/details.js @@ -89,6 +89,10 @@ export const CLEANUP_DISABLED_TOOLTIP = s__( 'ContainerRegistry|Cleanup is disabled for this project', ); +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 DETAILS_DELETE_IMAGE_ERROR_MESSAGE = s__( 'ContainerRegistry|Something went wrong while scheduling the image for deletion.', ); |