2020-05-28 09:08:05 +00:00
|
|
|
<script>
|
2021-01-05 15:10:02 +00:00
|
|
|
import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
|
2020-05-28 09:08:05 +00:00
|
|
|
import { n__ } from '~/locale';
|
2020-12-03 21:09:35 +00:00
|
|
|
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
|
|
|
|
|
2020-05-28 09:08:05 +00:00
|
|
|
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
2020-09-02 12:10:35 +00:00
|
|
|
import ListItem from '~/vue_shared/components/registry/list_item.vue';
|
2020-06-22 18:08:47 +00:00
|
|
|
import DeleteButton from '../delete_button.vue';
|
2020-05-28 09:08:05 +00:00
|
|
|
|
|
|
|
import {
|
|
|
|
ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
|
|
|
|
LIST_DELETE_BUTTON_DISABLED,
|
|
|
|
REMOVE_REPOSITORY_LABEL,
|
|
|
|
ROW_SCHEDULED_FOR_DELETION,
|
2020-10-07 06:09:03 +00:00
|
|
|
CLEANUP_TIMED_OUT_ERROR_MESSAGE,
|
2020-12-03 21:09:35 +00:00
|
|
|
IMAGE_DELETE_SCHEDULED_STATUS,
|
|
|
|
IMAGE_FAILED_DELETED_STATUS,
|
2020-06-04 12:08:21 +00:00
|
|
|
} from '../../constants/index';
|
2020-05-28 09:08:05 +00:00
|
|
|
|
|
|
|
export default {
|
2020-12-24 00:10:25 +00:00
|
|
|
name: 'ImageListRow',
|
2020-05-28 09:08:05 +00:00
|
|
|
components: {
|
|
|
|
ClipboardButton,
|
2020-06-22 18:08:47 +00:00
|
|
|
DeleteButton,
|
2020-05-28 09:08:05 +00:00
|
|
|
GlSprintf,
|
|
|
|
GlIcon,
|
2020-06-22 18:08:47 +00:00
|
|
|
ListItem,
|
2021-01-05 15:10:02 +00:00
|
|
|
GlSkeletonLoader,
|
2020-05-28 09:08:05 +00:00
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
item: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-01-05 15:10:02 +00:00
|
|
|
metadataLoading: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
required: false,
|
|
|
|
},
|
2020-05-28 09:08:05 +00:00
|
|
|
},
|
|
|
|
i18n: {
|
|
|
|
LIST_DELETE_BUTTON_DISABLED,
|
|
|
|
REMOVE_REPOSITORY_LABEL,
|
|
|
|
ROW_SCHEDULED_FOR_DELETION,
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
disabledDelete() {
|
2020-12-03 21:09:35 +00:00
|
|
|
return !this.item.canDelete || this.deleting;
|
|
|
|
},
|
|
|
|
id() {
|
|
|
|
return getIdFromGraphQLId(this.item.id);
|
|
|
|
},
|
|
|
|
deleting() {
|
|
|
|
return this.item.status === IMAGE_DELETE_SCHEDULED_STATUS;
|
|
|
|
},
|
|
|
|
failedDelete() {
|
|
|
|
return this.item.status === IMAGE_FAILED_DELETED_STATUS;
|
2020-05-28 09:08:05 +00:00
|
|
|
},
|
|
|
|
tagsCountText() {
|
|
|
|
return n__(
|
|
|
|
'ContainerRegistry|%{count} Tag',
|
|
|
|
'ContainerRegistry|%{count} Tags',
|
2020-12-03 21:09:35 +00:00
|
|
|
this.item.tagsCount,
|
2020-05-28 09:08:05 +00:00
|
|
|
);
|
|
|
|
},
|
2020-10-07 06:09:03 +00:00
|
|
|
warningIconText() {
|
2020-12-03 21:09:35 +00:00
|
|
|
if (this.failedDelete) {
|
2020-10-07 06:09:03 +00:00
|
|
|
return ASYNC_DELETE_IMAGE_ERROR_MESSAGE;
|
2020-12-03 21:09:35 +00:00
|
|
|
}
|
|
|
|
if (this.item.expirationPolicyStartedAt) {
|
2020-10-07 06:09:03 +00:00
|
|
|
return CLEANUP_TIMED_OUT_ERROR_MESSAGE;
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
2020-05-28 09:08:05 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-06-22 18:08:47 +00:00
|
|
|
<list-item
|
2020-05-28 09:08:05 +00:00
|
|
|
v-gl-tooltip="{
|
|
|
|
placement: 'left',
|
2020-12-03 21:09:35 +00:00
|
|
|
disabled: !deleting,
|
2020-05-28 09:08:05 +00:00
|
|
|
title: $options.i18n.ROW_SCHEDULED_FOR_DELETION,
|
|
|
|
}"
|
2020-07-03 18:08:58 +00:00
|
|
|
v-bind="$attrs"
|
2020-12-03 21:09:35 +00:00
|
|
|
:disabled="deleting"
|
2020-05-28 09:08:05 +00:00
|
|
|
>
|
2020-06-22 18:08:47 +00:00
|
|
|
<template #left-primary>
|
|
|
|
<router-link
|
2020-07-28 12:09:49 +00:00
|
|
|
class="gl-text-body gl-font-weight-bold"
|
2020-11-12 15:09:09 +00:00
|
|
|
data-testid="details-link"
|
2020-12-03 21:09:35 +00:00
|
|
|
:to="{ name: 'details', params: { id } }"
|
2020-05-28 09:08:05 +00:00
|
|
|
>
|
2020-06-22 18:08:47 +00:00
|
|
|
{{ item.path }}
|
|
|
|
</router-link>
|
|
|
|
<clipboard-button
|
|
|
|
v-if="item.location"
|
2020-12-03 21:09:35 +00:00
|
|
|
:disabled="deleting"
|
2020-06-22 18:08:47 +00:00
|
|
|
:text="item.location"
|
|
|
|
:title="item.location"
|
2020-10-03 00:08:46 +00:00
|
|
|
category="tertiary"
|
2020-06-22 18:08:47 +00:00
|
|
|
/>
|
|
|
|
<gl-icon
|
2020-10-07 06:09:03 +00:00
|
|
|
v-if="warningIconText"
|
|
|
|
v-gl-tooltip="{ title: warningIconText }"
|
|
|
|
data-testid="warning-icon"
|
2020-06-22 18:08:47 +00:00
|
|
|
name="warning"
|
2020-07-10 09:09:01 +00:00
|
|
|
class="gl-text-orange-500"
|
2020-06-22 18:08:47 +00:00
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<template #left-secondary>
|
2021-01-05 15:10:02 +00:00
|
|
|
<span
|
|
|
|
v-if="!metadataLoading"
|
|
|
|
class="gl-display-flex gl-align-items-center"
|
|
|
|
data-testid="tags-count"
|
|
|
|
>
|
2020-06-22 18:08:47 +00:00
|
|
|
<gl-icon name="tag" class="gl-mr-2" />
|
|
|
|
<gl-sprintf :message="tagsCountText">
|
|
|
|
<template #count>
|
2020-12-03 21:09:35 +00:00
|
|
|
{{ item.tagsCount }}
|
2020-06-22 18:08:47 +00:00
|
|
|
</template>
|
|
|
|
</gl-sprintf>
|
|
|
|
</span>
|
2021-01-05 15:10:02 +00:00
|
|
|
|
|
|
|
<div v-else class="gl-w-full">
|
|
|
|
<gl-skeleton-loader :width="900" :height="16" preserve-aspect-ratio="xMinYMax meet">
|
|
|
|
<circle cx="6" cy="8" r="6" />
|
|
|
|
<rect x="16" y="4" width="100" height="8" rx="4" />
|
|
|
|
</gl-skeleton-loader>
|
|
|
|
</div>
|
2020-06-22 18:08:47 +00:00
|
|
|
</template>
|
2020-06-26 09:08:59 +00:00
|
|
|
<template #right-action>
|
2020-06-22 18:08:47 +00:00
|
|
|
<delete-button
|
|
|
|
:title="$options.i18n.REMOVE_REPOSITORY_LABEL"
|
|
|
|
:disabled="disabledDelete"
|
2020-12-03 21:09:35 +00:00
|
|
|
:tooltip-disabled="item.canDelete"
|
2020-06-22 18:08:47 +00:00
|
|
|
:tooltip-title="$options.i18n.LIST_DELETE_BUTTON_DISABLED"
|
|
|
|
@delete="$emit('delete', item)"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</list-item>
|
2020-05-28 09:08:05 +00:00
|
|
|
</template>
|