|
|
|
<script>
|
|
|
|
import { mapGetters, mapActions } from 'vuex';
|
|
|
|
import { GlLoadingIcon } from '@gitlab/ui';
|
|
|
|
import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
|
|
|
|
import store from '../stores';
|
|
|
|
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
|
|
|
|
import CollapsibleContainer from './collapsible_container.vue';
|
|
|
|
import SvgMessage from './svg_message.vue';
|
|
|
|
import { s__, sprintf } from '../../locale';
|
|
|
|
|
|
|
|
export default {
|
| ... | ... | @@ -12,8 +11,8 @@ export default { |
|
|
|
components: {
|
|
|
|
clipboardButton,
|
|
|
|
CollapsibleContainer,
|
|
|
|
GlEmptyState,
|
|
|
|
GlLoadingIcon,
|
|
|
|
SvgMessage,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
endpoint: {
|
| ... | ... | @@ -93,7 +92,9 @@ export default { |
|
|
|
this.setMainEndpoint(this.endpoint);
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.fetchRepos();
|
|
|
|
if (!this.characterError) {
|
|
|
|
this.fetchRepos();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['setMainEndpoint', 'fetchRepos']),
|
| ... | ... | @@ -102,61 +103,63 @@ export default { |
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<svg-message v-if="characterError" id="invalid-characters" :svg-path="containersErrorImage">
|
|
|
|
<h4>
|
|
|
|
{{ s__('ContainerRegistry|Docker connection error') }}
|
|
|
|
</h4>
|
|
|
|
<p v-html="dockerConnectionErrorText"></p>
|
|
|
|
</svg-message>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<gl-loading-icon v-else-if="isLoading && !characterError" size="md" class="prepend-top-16" />
|
|
|
|
<gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
|
|
|
|
|
|
|
|
<div v-else-if="!isLoading && !characterError && repos.length">
|
|
|
|
<div v-else-if="!isLoading && repos.length">
|
|
|
|
<h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
|
|
|
|
<p v-html="introText"></p>
|
|
|
|
<collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<svg-message
|
|
|
|
v-else-if="!isLoading && !characterError && !repos.length"
|
|
|
|
id="no-container-images"
|
|
|
|
<gl-empty-state
|
|
|
|
v-else
|
|
|
|
:title="s__('ContainerRegistry|There are no container images stored for this project')"
|
|
|
|
:svg-path="noContainersImage"
|
|
|
|
class="container-message"
|
|
|
|
>
|
|
|
|
<h4>
|
|
|
|
{{ s__('ContainerRegistry|There are no container images stored for this project') }}
|
|
|
|
</h4>
|
|
|
|
<p 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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
</svg-message>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</template> |