debian-mirror-gitlab/app/assets/javascripts/registry/components/app.vue

166 lines
4.8 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-12-13 13:39:08 +05:30
import { mapGetters, mapActions } from 'vuex';
2019-12-04 20:38:33 +05:30
import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import store from '../stores';
2019-09-30 21:07:59 +05:30
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
2019-02-15 15:39:39 +05:30
import CollapsibleContainer from './collapsible_container.vue';
2019-09-30 21:07:59 +05:30
import { s__, sprintf } from '../../locale';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
export default {
name: 'RegistryListApp',
components: {
2019-09-30 21:07:59 +05:30
clipboardButton,
2019-02-15 15:39:39 +05:30
CollapsibleContainer,
2019-12-04 20:38:33 +05:30
GlEmptyState,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
},
props: {
endpoint: {
type: String,
required: true,
2018-03-17 18:26:18 +05:30
},
2019-09-30 21:07:59 +05:30
characterError: {
type: Boolean,
required: false,
default: false,
},
helpPagePath: {
type: String,
required: true,
},
noContainersImage: {
type: String,
required: true,
},
containersErrorImage: {
type: String,
required: true,
},
repositoryUrl: {
type: String,
required: true,
},
2018-12-13 13:39:08 +05:30
},
store,
computed: {
...mapGetters(['isLoading', 'repos']),
2019-09-30 21:07:59 +05:30
dockerConnectionErrorText() {
return sprintf(
s__(`ContainerRegistry|We are having trouble connecting to Docker, which could be due to an
issue with your project name or path.
%{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
introText() {
return sprintf(
s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every
project can have its own space to store its Docker images.
%{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
noContainerImagesText() {
return sprintf(
s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
dockerBuildCommand() {
2019-10-12 21:52:04 +05:30
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
2019-09-30 21:07:59 +05:30
return `docker build -t ${this.repositoryUrl} .`;
},
dockerPushCommand() {
2019-10-12 21:52:04 +05:30
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
2019-09-30 21:07:59 +05:30
return `docker push ${this.repositoryUrl}`;
},
2018-12-13 13:39:08 +05:30
},
created() {
this.setMainEndpoint(this.endpoint);
},
mounted() {
2019-12-04 20:38:33 +05:30
if (!this.characterError) {
this.fetchRepos();
}
2018-12-13 13:39:08 +05:30
},
methods: {
...mapActions(['setMainEndpoint', 'fetchRepos']),
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<div>
2019-12-04 20:38:33 +05:30
<gl-empty-state
v-if="characterError"
:title="s__('ContainerRegistry|Docker connection error')"
:svg-path="containersErrorImage"
>
<template #description>
<p v-html="dockerConnectionErrorText"></p>
</template>
</gl-empty-state>
2019-09-30 21:07:59 +05:30
2019-12-04 20:38:33 +05:30
<gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
2019-09-30 21:07:59 +05:30
2019-12-04 20:38:33 +05:30
<div v-else-if="!isLoading && repos.length">
2019-09-30 21:07:59 +05:30
<h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
<p v-html="introText"></p>
<collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
</div>
2019-12-04 20:38:33 +05:30
<gl-empty-state
v-else
:title="s__('ContainerRegistry|There are no container images stored for this project')"
2019-09-30 21:07:59 +05:30
:svg-path="noContainersImage"
2019-12-04 20:38:33 +05:30
class="container-message"
2019-09-30 21:07:59 +05:30
>
2019-12-04 20:38:33 +05:30
<template #description>
<p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
<h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
<p>
{{
s__(
'ContainerRegistry|You can add an image to this registry with the following commands:',
)
}}
</p>
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
<div class="input-group append-bottom-10">
<input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<clipboard-button
:text="dockerBuildCommand"
:title="s__('ContainerRegistry|Copy build command to clipboard')"
class="input-group-text"
/>
</span>
</div>
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
<div class="input-group">
<input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<clipboard-button
:text="dockerPushCommand"
:title="s__('ContainerRegistry|Copy push command to clipboard')"
class="input-group-text"
/>
</span>
</div>
</template>
</gl-empty-state>
2018-03-17 18:26:18 +05:30
</div>
</template>