88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
|
<script>
|
||
|
|
import { GlButtonGroup, GlButton, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
|
||
|
|
import { numberToHumanSize } from '~/lib/utils/number_utils';
|
||
|
|
import { I18N_EXPIRED, I18N_DOWNLOAD, I18N_DELETE } from '../constants';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ArtifactRow',
|
||
|
|
components: {
|
||
|
|
GlButtonGroup,
|
||
|
|
GlButton,
|
||
|
|
GlBadge,
|
||
|
|
GlFriendlyWrap,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
artifact: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
isLastRow: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isExpired() {
|
||
|
|
if (!this.artifact.expireAt) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return Date.now() > new Date(this.artifact.expireAt).getTime();
|
||
|
|
},
|
||
|
|
artifactSize() {
|
||
|
|
return numberToHumanSize(this.artifact.size);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
i18n: {
|
||
|
|
expired: I18N_EXPIRED,
|
||
|
|
download: I18N_DOWNLOAD,
|
||
|
|
delete: I18N_DELETE,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="gl-py-4"
|
||
|
|
:class="{ 'gl-border-b-solid gl-border-b-1 gl-border-gray-100': !isLastRow }"
|
||
|
|
>
|
||
|
|
<div class="gl-display-inline-flex gl-align-items-center gl-w-full">
|
||
|
|
<span
|
||
|
|
class="gl-w-half gl-pl-8 gl-display-flex gl-align-items-center"
|
||
|
|
data-testid="job-artifact-row-name"
|
||
|
|
>
|
||
|
|
<gl-friendly-wrap :text="artifact.name" />
|
||
|
|
<gl-badge size="sm" variant="neutral" class="gl-ml-2">
|
||
|
|
{{ artifact.fileType.toLowerCase() }}
|
||
|
|
</gl-badge>
|
||
|
|
<gl-badge v-if="isExpired" size="sm" variant="warning" icon="expire" class="gl-ml-2">
|
||
|
|
{{ $options.i18n.expired }}
|
||
|
|
</gl-badge>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="gl-w-quarter gl-text-right gl-pr-5" data-testid="job-artifact-row-size">
|
||
|
|
{{ artifactSize }}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="gl-w-quarter gl-text-right gl-pr-5">
|
||
|
|
<gl-button-group>
|
||
|
|
<gl-button
|
||
|
|
category="tertiary"
|
||
|
|
icon="download"
|
||
|
|
:title="$options.i18n.download"
|
||
|
|
:aria-label="$options.i18n.download"
|
||
|
|
:href="artifact.downloadPath"
|
||
|
|
data-testid="job-artifact-row-download-button"
|
||
|
|
/>
|
||
|
|
<gl-button
|
||
|
|
category="tertiary"
|
||
|
|
icon="remove"
|
||
|
|
:title="$options.i18n.delete"
|
||
|
|
:aria-label="$options.i18n.delete"
|
||
|
|
data-testid="job-artifact-row-delete-button"
|
||
|
|
@click="$emit('delete')"
|
||
|
|
/>
|
||
|
|
</gl-button-group>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|