2017-09-25 13:00:39 -04:00
|
|
|
<script>
|
2018-10-10 02:49:24 -04:00
|
|
|
import { mapActions } from 'vuex';
|
|
|
|
import { n__ } from '../../locale';
|
|
|
|
import Flash from '../../flash';
|
|
|
|
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
|
|
|
|
import tablePagination from '../../vue_shared/components/table_pagination.vue';
|
|
|
|
import tooltip from '../../vue_shared/directives/tooltip';
|
|
|
|
import timeagoMixin from '../../vue_shared/mixins/timeago';
|
|
|
|
import { errorMessages, errorMessagesTypes } from '../constants';
|
|
|
|
import { numberToHumanSize } from '../../lib/utils/number_utils';
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
clipboardButton,
|
|
|
|
tablePagination,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
tooltip,
|
|
|
|
},
|
|
|
|
mixins: [timeagoMixin],
|
|
|
|
props: {
|
|
|
|
repo: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
2017-09-25 13:00:39 -04:00
|
|
|
},
|
2018-10-10 02:49:24 -04:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
shouldRenderPagination() {
|
|
|
|
return this.repo.pagination.total > this.repo.pagination.perPage;
|
2018-01-04 19:18:35 -05:00
|
|
|
},
|
2018-10-10 02:49:24 -04:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchList', 'deleteRegistry']),
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
layers(item) {
|
|
|
|
return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
|
|
|
|
},
|
2017-09-26 07:02:03 -04:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
formatSize(size) {
|
|
|
|
return numberToHumanSize(size);
|
|
|
|
},
|
2017-11-13 14:51:14 -05:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
handleDeleteRegistry(registry) {
|
|
|
|
this.deleteRegistry(registry)
|
|
|
|
.then(() => this.fetchList({ repo: this.repo }))
|
|
|
|
.catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
|
|
|
|
},
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
onPageChange(pageNumber) {
|
|
|
|
this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
|
|
|
|
this.showError(errorMessagesTypes.FETCH_REGISTRY),
|
|
|
|
);
|
|
|
|
},
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-10-10 02:49:24 -04:00
|
|
|
showError(message) {
|
|
|
|
Flash(errorMessages[message]);
|
2017-09-25 13:00:39 -04:00
|
|
|
},
|
2018-10-10 02:49:24 -04:00
|
|
|
},
|
|
|
|
};
|
2017-09-25 13:00:39 -04:00
|
|
|
</script>
|
|
|
|
<template>
|
2018-01-04 19:18:35 -05:00
|
|
|
<div>
|
|
|
|
<table class="table tags">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>{{ s__('ContainerRegistry|Tag') }}</th>
|
|
|
|
<th>{{ s__('ContainerRegistry|Tag ID') }}</th>
|
2018-11-16 15:07:38 -05:00
|
|
|
<th>{{ s__('ContainerRegistry|Size') }}</th>
|
|
|
|
<th>{{ s__('ContainerRegistry|Created') }}</th>
|
2018-01-04 19:18:35 -05:00
|
|
|
<th></th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2018-11-16 15:07:38 -05:00
|
|
|
<tr v-for="(item, i) in repo.list" :key="i">
|
2018-01-04 19:18:35 -05:00
|
|
|
<td>
|
|
|
|
{{ item.tag }}
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-01-04 19:18:35 -05:00
|
|
|
<clipboard-button
|
|
|
|
v-if="item.location"
|
|
|
|
:title="item.location"
|
2018-05-16 06:19:41 -04:00
|
|
|
:text="item.location"
|
2018-05-10 15:22:56 -04:00
|
|
|
css-class="btn-default btn-transparent btn-clipboard"
|
2017-09-25 13:00:39 -04:00
|
|
|
/>
|
2018-01-04 19:18:35 -05:00
|
|
|
</td>
|
|
|
|
<td>
|
2018-11-16 15:07:38 -05:00
|
|
|
<span v-tooltip :title="item.revision" data-placement="bottom">
|
2018-01-04 19:18:35 -05:00
|
|
|
{{ item.shortRevision }}
|
2017-09-25 13:00:39 -04:00
|
|
|
</span>
|
2018-01-04 19:18:35 -05:00
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
{{ formatSize(item.size) }}
|
|
|
|
<template v-if="item.size && item.layers">
|
|
|
|
·
|
|
|
|
</template>
|
|
|
|
{{ layers(item) }}
|
|
|
|
</td>
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-01-04 19:18:35 -05:00
|
|
|
<td>
|
2018-11-16 15:07:38 -05:00
|
|
|
<span v-tooltip :title="tooltipTitle(item.createdAt)" data-placement="bottom">
|
2018-05-06 09:44:58 -04:00
|
|
|
{{ timeFormated(item.createdAt) }}
|
|
|
|
</span>
|
2018-01-04 19:18:35 -05:00
|
|
|
</td>
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-01-04 19:18:35 -05:00
|
|
|
<td class="content">
|
|
|
|
<button
|
|
|
|
v-if="item.canDelete"
|
2018-09-20 02:13:50 -04:00
|
|
|
v-tooltip
|
2018-01-04 19:18:35 -05:00
|
|
|
:title="s__('ContainerRegistry|Remove tag')"
|
|
|
|
:aria-label="s__('ContainerRegistry|Remove tag')"
|
2018-06-11 05:49:47 -04:00
|
|
|
type="button"
|
|
|
|
class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
|
2018-01-04 19:18:35 -05:00
|
|
|
data-container="body"
|
2018-11-16 15:07:38 -05:00
|
|
|
@click="handleDeleteRegistry(item);"
|
2018-01-04 19:18:35 -05:00
|
|
|
>
|
2018-11-16 15:07:38 -05:00
|
|
|
<i class="fa fa-trash" aria-hidden="true"> </i>
|
2018-01-04 19:18:35 -05:00
|
|
|
</button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2017-09-25 13:00:39 -04:00
|
|
|
|
2018-01-04 19:18:35 -05:00
|
|
|
<table-pagination
|
|
|
|
v-if="shouldRenderPagination"
|
|
|
|
:change="onPageChange"
|
|
|
|
:page-info="repo.pagination"
|
2017-09-25 13:00:39 -04:00
|
|
|
/>
|
2018-01-04 19:18:35 -05:00
|
|
|
</div>
|
2017-09-25 13:00:39 -04:00
|
|
|
</template>
|