diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/dependency_proxy/components')
2 files changed, 101 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue new file mode 100644 index 00000000000..78880b6e3f4 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue @@ -0,0 +1,49 @@ +<script> +import { GlSprintf } from '@gitlab/ui'; +import ListItem from '~/vue_shared/components/registry/list_item.vue'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import { s__ } from '~/locale'; + +export default { + name: 'ManifestRow', + components: { + GlSprintf, + ListItem, + TimeagoTooltip, + }, + props: { + manifest: { + type: Object, + required: true, + }, + }, + computed: { + name() { + return this.manifest?.imageName.split(':')[0]; + }, + version() { + return this.manifest?.imageName.split(':')[1]; + }, + }, + i18n: { + cachedAgoMessage: s__('DependencyProxy|Cached %{time}'), + }, +}; +</script> + +<template> + <list-item> + <template #left-primary> {{ name }} </template> + <template #left-secondary> {{ version }} </template> + <template #right-primary> </template> + <template #right-secondary> + <timeago-tooltip :time="manifest.createdAt" data-testid="cached-message"> + <template #default="{ timeAgo }"> + <gl-sprintf :message="$options.i18n.cachedAgoMessage"> + <template #time>{{ timeAgo }}</template> + </gl-sprintf> + </template> + </timeago-tooltip> + </template> + </list-item> +</template> diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue new file mode 100644 index 00000000000..005c8feea3a --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue @@ -0,0 +1,52 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import ManifestRow from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue'; + +export default { + name: 'ManifestsLists', + components: { + ManifestRow, + GlKeysetPagination, + }, + props: { + manifests: { + type: Array, + required: false, + default: () => [], + }, + pagination: { + type: Object, + required: true, + }, + }, + i18n: { + listTitle: s__('DependencyProxy|Image list'), + }, + computed: { + showPagination() { + return this.pagination.hasNextPage || this.pagination.hasPreviousPage; + }, + }, +}; +</script> + +<template> + <div class="gl-mt-6"> + <h3 class="gl-font-base">{{ $options.i18n.listTitle }}</h3> + <div + class="gl-border-t-1 gl-border-gray-100 gl-border-t-solid gl-display-flex gl-flex-direction-column" + > + <manifest-row v-for="(manifest, index) in manifests" :key="index" :manifest="manifest" /> + </div> + <div class="gl-display-flex gl-justify-content-center"> + <gl-keyset-pagination + v-if="showPagination" + v-bind="pagination" + class="gl-mt-3" + @prev="$emit('prev-page')" + @next="$emit('next-page')" + /> + </div> + </div> +</template> |