BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 5ae54ca3 by Filipa Lacerda
Options

Moves table component into a separate one

Adds better support for i18n
parent 9c7807b3
Showing with 163 additions and 127 deletions
app/assets/javascripts/registry/components/collapsible_container.vue
......@@ -3,9 +3,8 @@
import { n__, s__ } from '../../locale';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.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 tableRegistry from './table_registry.vue';
import { errorMessages, errorMessagesTypes } from '../constants';
export default {
......@@ -19,11 +18,8 @@
components: {
clipboardButton,
loadingIcon,
tablePagination,
tableRegistry,
},
mixins: [
timeagoMixin,
],
directives: {
tooltip,
},
......@@ -32,24 +28,13 @@
isOpen: false,
};
},
computed: {
shouldRenderPagination() {
return this.repo.pagination.total > this.repo.pagination.perPage;
},
},
methods: {
...mapActions([
'fetchRepos',
'fetchList',
'deleteRepo',
'deleteRegistry',
'toggleLoading',
]),
layers(item) {
const pluralize = n__('layer', 'layers', item.layers);
return `${item.layers} ${pluralize}`;
},
toggleRepo() {
this.isOpen = !this.isOpen;
if (this.isOpen) {
......@@ -64,17 +49,6 @@
.catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
},
handleDeleteRegistry(registry) {
this.deleteRegistry(registry)
.then(() => this.fetchRegistry(this.repo))
.catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
},
onPageChange(pageNumber) {
this.fetchList({ repo: this.repo, page })
.catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
},
clipboardText(text) {
return `docker pull ${text}`;
},
......@@ -137,89 +111,11 @@
v-else-if="!repo.isLoading && isOpen"
class="container-image-tags">
<template v-if="repo.list.length">
<table class="table tags">
<thead>
<tr>
<th>{{s__('ContainerRegistry|Tag')}}</th>
<th>{{s__('ContainerRegistry|Tag ID')}}</th>
<th>{{s__("ContainerRegistry|Size")}}</th>
<th>{{s__("ContainerRegistry|Created")}}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, i) in repo.list"
:key="i">
<td>
{{item.tag}}
<clipboard-button
v-if="item.location"
:title="item.location"
:text="clipboardText(item.location)"
/>
</td>
<td>
<span
v-tooltip
:title="item.revision"
data-placement="bottom">
{{item.shortRevision}}
</span>
</td>
<td>
<template v-if="item.size">
{{item.size}}
&middot;
{{layers(item)}}
</template>
<div
v-else
class="light">
\-
</div>
</td>
<td>
<template v-if="item.createdAt">
{{timeFormated(item.createdAt)}}
</template>
<div
v-else
class="light">
\-
</div>
</td>
<td class="content">
<button
v-if="item.canDelete"
type="button"
class="js-delete-registry btn btn-danger hidden-xs pull-right"
:title="s__('ContainerRegistry|Remove tag')"
:aria-label="s__('ContainerRegistry|Remove tag')"
data-container="body"
v-tooltip
@click="handleDeleteRegistry(item)">
<i
class="fa fa-trash"
aria-hidden="true">
</i>
</button>
</td>
</tr>
</tbody>
</table>
<table-registry
v-if="repo.list.length"
:repo="repo"
/>
<table-pagination
v-if="shouldRenderPagination"
:change="onPageChange"
:page-info="repo.pagination"
/>
</template>
<div
v-else
class="nothing-here-block">
......
app/assets/javascripts/registry/components/table_registry.vue 0 → 100644
<script>
import { mapActions } from 'vuex';
import { n__, s__ } from '../../locale';
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';
export default {
props: {
repo: {
type: Object,
required: true,
},
},
components: {
clipboardButton,
tablePagination,
},
mixins: [
timeagoMixin,
],
directives: {
tooltip,
},
computed: {
shouldRenderPagination() {
return this.repo.pagination.total > this.repo.pagination.perPage;
},
},
methods: {
...mapActions([
'fetchList',
'deleteRegistry',
]),
layers(item) {
const pluralize = n__('layer', 'layers', item.layers);
return `${item.layers} ${pluralize}`;
},
handleDeleteRegistry(registry) {
this.deleteRegistry(registry)
.then(() => this.fetchList({ repo: this.repo }))
.catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
},
onPageChange(pageNumber) {
this.fetchList({ repo: this.repo, page })
.catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
},
clipboardText(text) {
return `docker pull ${text}`;
},
showError(message) {
Flash((errorMessages[message]));
},
},
};
</script>
<template>
<div>
<table class="table tags">
<thead>
<tr>
<th>{{s__('ContainerRegistry|Tag')}}</th>
<th>{{s__('ContainerRegistry|Tag ID')}}</th>
<th>{{s__("ContainerRegistry|Size")}}</th>
<th>{{s__("ContainerRegistry|Created")}}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, i) in repo.list"
:key="i">
<td>
{{item.tag}}
<clipboard-button
v-if="item.location"
:title="item.location"
:text="clipboardText(item.location)"
/>
</td>
<td>
<span
v-tooltip
:title="item.revision"
data-placement="bottom">
{{item.shortRevision}}
</span>
</td>
<td>
<template v-if="item.size">
{{item.size}}
&middot;
{{layers(item)}}
</template>
<div
v-else
class="light">
\-
</div>
</td>
<td>
<template v-if="item.createdAt">
{{timeFormated(item.createdAt)}}
</template>
<div
v-else
class="light">
\-
</div>
</td>
<td class="content">
<button
v-if="item.canDelete"
type="button"
class="js-delete-registry btn btn-danger hidden-xs pull-right"
:title="s__('ContainerRegistry|Remove tag')"
:aria-label="s__('ContainerRegistry|Remove tag')"
data-container="body"
v-tooltip
@click="handleDeleteRegistry(item)">
<i
class="fa fa-trash"
aria-hidden="true">
</i>
</button>
</td>
</tr>
</tbody>
</table>
<table-pagination
v-if="shouldRenderPagination"
:change="onPageChange"
:page-info="repo.pagination"
/>
</div>
</template>
app/assets/javascripts/registry/constants.js
......@@ -9,7 +9,7 @@ export const errorMessagesTypes = {
export const errorMessages = {
[errorMessagesTypes.FETCH_REGISTRY]: __('Something went wrong while fetching the registry list.'),
[errorMessagesTypes.FETCH_REPOS]: __('Something went wrong while fetching the repositories.'),
[errorMessagesTypes.DELETE_REPO]: __('Something went wrong while deleting the repository.'),
[errorMessagesTypes.DELETE_REGISTRY]: __('Something went wrong while deleting registry.'),
[errorMessagesTypes.FETCH_REPOS]: __('Something went wrong while fetching the projects.'),
[errorMessagesTypes.DELETE_REPO]: __('Something went wrong on our end.'),
[errorMessagesTypes.DELETE_REGISTRY]: __('Something went wrong on our end.'),
};
app/views/projects/registry/repositories/index.html.haml
......@@ -25,30 +25,23 @@
= s_('ContainerRegistry|How to use the Container Registry')
.panel-body
%p
= _('First log in to GitLab&rsquo;s Container Registry using your GitLab username and password. If you have').html_safe
= link_to _('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank'
= _('you need to use a')
= succeed ':' do
= link_to _('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank'
- link_token = link_to(_('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank')
- link_2fa = link_to(_('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank')
= s_('ContainerRegistry|First log in to GitLab&rsquo;s Container Registry using your GitLab username and password. If you have %{link_2fa} you need to use a %{link_token}:').html_safe % { link_2fa: link_2fa, link_token: link_token }
%pre
docker login #{Gitlab.config.registry.host_port}
%br
%p
= _('Once you log in, you&rsquo;re free to create and upload a container image using the common').html_safe
%code
= _('build')
= _('and')
%code push
= _('commands:')
= s_('ContainerRegistry|Once you log in, you&rsquo;re free to create and upload a container image using the common %{build} and %{push} commands').html_safe % { build: "<code>build</code>".html_safe, push: "<code>push</code>".html_safe }
%pre
:plain
docker build -t #{escape_once(@project.container_registry_url)} .
docker push #{escape_once(@project.container_registry_url)}
%hr
%h5.prepend-top-default
= _('Use different image names')
= s_('ContainerRegistry|Use different image names')
%p.light
= _('GitLab supports up to 3 levels of image names. The following examples of images are valid for your project:')
= s_('ContainerRegistry|GitLab supports up to 3 levels of image names. The following examples of images are valid for your project:')
%pre
:plain
#{escape_once(@project.container_registry_url)}:tag
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment