diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page')
7 files changed, 605 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue new file mode 100644 index 00000000000..1f52e319ad0 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue @@ -0,0 +1,71 @@ +<script> +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { + CLEANUP_TIMED_OUT_ERROR_MESSAGE, + CLEANUP_STATUS_SCHEDULED, + CLEANUP_STATUS_ONGOING, + CLEANUP_STATUS_UNFINISHED, + UNFINISHED_STATUS, + UNSCHEDULED_STATUS, + SCHEDULED_STATUS, + ONGOING_STATUS, +} from '../../constants/index'; + +export default { + name: 'CleanupStatus', + components: { + GlIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + status: { + type: String, + required: true, + validator(value) { + return [UNFINISHED_STATUS, UNSCHEDULED_STATUS, SCHEDULED_STATUS, ONGOING_STATUS].includes( + value, + ); + }, + }, + }, + i18n: { + CLEANUP_STATUS_SCHEDULED, + CLEANUP_STATUS_ONGOING, + CLEANUP_STATUS_UNFINISHED, + CLEANUP_TIMED_OUT_ERROR_MESSAGE, + }, + computed: { + showStatus() { + return this.status !== UNSCHEDULED_STATUS; + }, + failedDelete() { + return this.status === UNFINISHED_STATUS; + }, + statusText() { + return this.$options.i18n[`CLEANUP_STATUS_${this.status}`]; + }, + expireIconClass() { + return this.failedDelete ? 'gl-text-orange-500' : ''; + }, + }, +}; +</script> + +<template> + <div v-if="showStatus" class="gl-display-inline-flex gl-align-items-center"> + <gl-icon name="expire" data-testid="main-icon" :class="expireIconClass" /> + <span class="gl-mx-2"> + {{ statusText }} + </span> + <gl-icon + v-if="failedDelete" + v-gl-tooltip="{ title: $options.i18n.CLEANUP_TIMED_OUT_ERROR_MESSAGE }" + :size="14" + class="gl-text-black-normal" + data-testid="extra-info" + name="information" + /> + </div> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue new file mode 100644 index 00000000000..07ee3c6083b --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue @@ -0,0 +1,71 @@ +<script> +import { GlDropdown } from '@gitlab/ui'; +import Tracking from '~/tracking'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import { + QUICK_START, + LOGIN_COMMAND_LABEL, + COPY_LOGIN_TITLE, + BUILD_COMMAND_LABEL, + COPY_BUILD_TITLE, + PUSH_COMMAND_LABEL, + COPY_PUSH_TITLE, +} from '../../constants/index'; + +const trackingLabel = 'quickstart_dropdown'; + +export default { + components: { + GlDropdown, + CodeInstruction, + }, + mixins: [Tracking.mixin({ label: trackingLabel })], + inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'], + trackingLabel, + i18n: { + QUICK_START, + LOGIN_COMMAND_LABEL, + COPY_LOGIN_TITLE, + BUILD_COMMAND_LABEL, + COPY_BUILD_TITLE, + PUSH_COMMAND_LABEL, + COPY_PUSH_TITLE, + }, +}; +</script> +<template> + <gl-dropdown + :text="$options.i18n.QUICK_START" + variant="info" + right + @shown="track('click_dropdown')" + > + <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form --> + <li role="presentation" class="px-2 py-1"> + <code-instruction + :label="$options.i18n.LOGIN_COMMAND_LABEL" + :instruction="dockerLoginCommand" + :copy-text="$options.i18n.COPY_LOGIN_TITLE" + tracking-action="click_copy_login" + :tracking-label="$options.trackingLabel" + /> + + <code-instruction + :label="$options.i18n.BUILD_COMMAND_LABEL" + :instruction="dockerBuildCommand" + :copy-text="$options.i18n.COPY_BUILD_TITLE" + tracking-action="click_copy_build" + :tracking-label="$options.trackingLabel" + /> + + <code-instruction + class="mb-0" + :label="$options.i18n.PUSH_COMMAND_LABEL" + :instruction="dockerPushCommand" + :copy-text="$options.i18n.COPY_PUSH_TITLE" + tracking-action="click_copy_push" + :tracking-label="$options.trackingLabel" + /> + </li> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue new file mode 100644 index 00000000000..a68c4de5aa6 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue @@ -0,0 +1,35 @@ +<script> +import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; + +export default { + name: 'GroupEmptyState', + components: { + GlEmptyState, + GlSprintf, + GlLink, + }, + inject: ['config'], +}; +</script> +<template> + <gl-empty-state + :title="s__('ContainerRegistry|There are no container images available in this group')" + :svg-path="config.noContainersImage" + > + <template #description> + <p> + <gl-sprintf + :message=" + s__( + `ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. %{docLinkStart}More Information%{docLinkEnd}`, + ) + " + > + <template #docLink="{ content }"> + <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </template> + </gl-empty-state> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue new file mode 100644 index 00000000000..5bd13322ebb --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue @@ -0,0 +1,54 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import ImageListRow from './image_list_row.vue'; + +export default { + name: 'ImageList', + components: { + GlKeysetPagination, + ImageListRow, + }, + props: { + images: { + type: Array, + required: true, + }, + metadataLoading: { + type: Boolean, + default: false, + required: false, + }, + pageInfo: { + type: Object, + required: true, + }, + }, + computed: { + showPagination() { + return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage; + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-flex-direction-column"> + <image-list-row + v-for="(listItem, index) in images" + :key="index" + :item="listItem" + :metadata-loading="metadataLoading" + @delete="$emit('delete', $event)" + /> + <div class="gl-display-flex gl-justify-content-center"> + <gl-keyset-pagination + v-if="showPagination" + :has-next-page="pageInfo.hasNextPage" + :has-previous-page="pageInfo.hasPreviousPage" + class="gl-mt-3" + @prev="$emit('prev-page')" + @next="$emit('next-page')" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue new file mode 100644 index 00000000000..c1ec523574a --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue @@ -0,0 +1,153 @@ +<script> +import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { n__ } from '~/locale'; + +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import ListItem from '~/vue_shared/components/registry/list_item.vue'; +import { + ASYNC_DELETE_IMAGE_ERROR_MESSAGE, + LIST_DELETE_BUTTON_DISABLED, + REMOVE_REPOSITORY_LABEL, + ROW_SCHEDULED_FOR_DELETION, + CLEANUP_TIMED_OUT_ERROR_MESSAGE, + IMAGE_DELETE_SCHEDULED_STATUS, + IMAGE_FAILED_DELETED_STATUS, + ROOT_IMAGE_TEXT, +} from '../../constants/index'; +import DeleteButton from '../delete_button.vue'; +import CleanupStatus from './cleanup_status.vue'; + +export default { + name: 'ImageListRow', + components: { + ClipboardButton, + DeleteButton, + GlSprintf, + GlIcon, + ListItem, + GlSkeletonLoader, + CleanupStatus, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + item: { + type: Object, + required: true, + }, + metadataLoading: { + type: Boolean, + default: false, + required: false, + }, + }, + i18n: { + LIST_DELETE_BUTTON_DISABLED, + REMOVE_REPOSITORY_LABEL, + ROW_SCHEDULED_FOR_DELETION, + }, + computed: { + disabledDelete() { + return !this.item.canDelete || this.deleting; + }, + id() { + return getIdFromGraphQLId(this.item.id); + }, + deleting() { + return this.item.status === IMAGE_DELETE_SCHEDULED_STATUS; + }, + failedDelete() { + return this.item.status === IMAGE_FAILED_DELETED_STATUS; + }, + tagsCountText() { + return n__( + 'ContainerRegistry|%{count} Tag', + 'ContainerRegistry|%{count} Tags', + this.item.tagsCount, + ); + }, + warningIconText() { + if (this.failedDelete) { + return ASYNC_DELETE_IMAGE_ERROR_MESSAGE; + } + if (this.item.expirationPolicyStartedAt) { + return CLEANUP_TIMED_OUT_ERROR_MESSAGE; + } + return null; + }, + imageName() { + return this.item.name ? this.item.path : `${this.item.path}/ ${ROOT_IMAGE_TEXT}`; + }, + routerLinkEvent() { + return this.deleting ? '' : 'click'; + }, + }, +}; +</script> + +<template> + <list-item + v-gl-tooltip="{ + placement: 'left', + disabled: !deleting, + title: $options.i18n.ROW_SCHEDULED_FOR_DELETION, + }" + v-bind="$attrs" + :disabled="deleting" + > + <template #left-primary> + <router-link + class="gl-text-body gl-font-weight-bold" + data-testid="details-link" + data-qa-selector="registry_image_content" + :event="routerLinkEvent" + :to="{ name: 'details', params: { id } }" + > + {{ imageName }} + </router-link> + <clipboard-button + v-if="item.location" + :disabled="deleting" + :text="item.location" + :title="item.location" + category="tertiary" + /> + </template> + <template #left-secondary> + <template v-if="!metadataLoading"> + <span class="gl-display-flex gl-align-items-center" data-testid="tags-count"> + <gl-icon name="tag" class="gl-mr-2" /> + <gl-sprintf :message="tagsCountText"> + <template #count> + {{ item.tagsCount }} + </template> + </gl-sprintf> + </span> + + <cleanup-status + v-if="item.expirationPolicyCleanupStatus" + class="ml-2" + :status="item.expirationPolicyCleanupStatus" + /> + </template> + + <div v-else class="gl-w-full"> + <gl-skeleton-loader :width="900" :height="16" preserve-aspect-ratio="xMinYMax meet"> + <circle cx="6" cy="8" r="6" /> + <rect x="16" y="4" width="100" height="8" rx="4" /> + </gl-skeleton-loader> + </div> + </template> + <template #right-action> + <delete-button + :title="$options.i18n.REMOVE_REPOSITORY_LABEL" + :disabled="disabledDelete" + :tooltip-disabled="item.canDelete" + :tooltip-title="$options.i18n.LIST_DELETE_BUTTON_DISABLED" + @delete="$emit('delete', item)" + /> + </template> + </list-item> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue new file mode 100644 index 00000000000..5aa04419ca0 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue @@ -0,0 +1,111 @@ +<script> +import { GlEmptyState, GlSprintf, GlLink, GlFormInputGroup, GlFormInput } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { + COPY_LOGIN_TITLE, + COPY_BUILD_TITLE, + COPY_PUSH_TITLE, + QUICK_START, +} from '../../constants/index'; + +export default { + name: 'ProjectEmptyState', + components: { + ClipboardButton, + GlEmptyState, + GlSprintf, + GlLink, + GlFormInputGroup, + GlFormInput, + }, + inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'], + i18n: { + quickStart: QUICK_START, + copyLoginTitle: COPY_LOGIN_TITLE, + copyBuildTitle: COPY_BUILD_TITLE, + copyPushTitle: COPY_PUSH_TITLE, + introText: s__( + `ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`, + ), + notLoggedInMessage: s__( + `ContainerRegistry|If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have %{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a %{personalAccessTokensDocLinkStart}Personal Access Token%{personalAccessTokensDocLinkEnd} instead of a password.`, + ), + addImageText: s__( + 'ContainerRegistry|You can add an image to this registry with the following commands:', + ), + }, +}; +</script> +<template> + <gl-empty-state + :title="s__('ContainerRegistry|There are no container images stored for this project')" + :svg-path="config.noContainersImage" + > + <template #description> + <p> + <gl-sprintf :message="$options.i18n.introText"> + <template #docLink="{ content }"> + <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <h5>{{ $options.i18n.quickStart }}</h5> + <p> + <gl-sprintf :message="$options.i18n.notLoggedInMessage"> + <template #twofaDocLink="{ content }"> + <gl-link :href="config.twoFactorAuthHelpLink" target="_blank">{{ content }}</gl-link> + </template> + <template #personalAccessTokensDocLink="{ content }"> + <gl-link :href="config.personalAccessTokensHelpLink" target="_blank">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </p> + <gl-form-input-group class="gl-mb-4"> + <gl-form-input + :value="dockerLoginCommand" + readonly + type="text" + class="gl-font-monospace!" + /> + <template #append> + <clipboard-button + :text="dockerLoginCommand" + :title="$options.i18n.copyLoginTitle" + class="gl-m-0!" + /> + </template> + </gl-form-input-group> + <p class="gl-mb-4"> + {{ $options.i18n.addImageText }} + </p> + <gl-form-input-group class="gl-mb-4"> + <gl-form-input + :value="dockerBuildCommand" + readonly + type="text" + class="gl-font-monospace!" + /> + <template #append> + <clipboard-button + :text="dockerBuildCommand" + :title="$options.i18n.copyBuildTitle" + class="gl-m-0!" + /> + </template> + </gl-form-input-group> + <gl-form-input-group> + <gl-form-input :value="dockerPushCommand" readonly type="text" class="gl-font-monospace!" /> + <template #append> + <clipboard-button + :text="dockerPushCommand" + :title="$options.i18n.copyPushTitle" + class="gl-m-0!" + /> + </template> + </gl-form-input-group> + </template> + </gl-empty-state> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue new file mode 100644 index 00000000000..6d2ff9ea7b6 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue @@ -0,0 +1,110 @@ +<script> +import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility'; +import { n__, sprintf } from '~/locale'; +import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; + +import { + CONTAINER_REGISTRY_TITLE, + LIST_INTRO_TEXT, + EXPIRATION_POLICY_WILL_RUN_IN, + EXPIRATION_POLICY_DISABLED_TEXT, +} from '../../constants/index'; + +export default { + name: 'ListHeader', + components: { + TitleArea, + MetadataItem, + }, + props: { + expirationPolicy: { + type: Object, + default: () => ({}), + required: false, + }, + imagesCount: { + type: Number, + default: 0, + required: false, + }, + helpPagePath: { + type: String, + default: '', + required: false, + }, + hideExpirationPolicyData: { + type: Boolean, + required: false, + default: false, + }, + metadataLoading: { + type: Boolean, + required: false, + default: false, + }, + }, + loader: { + repeat: 10, + width: 1000, + height: 40, + }, + i18n: { + CONTAINER_REGISTRY_TITLE, + }, + computed: { + imagesCountText() { + const pluralisedString = n__( + 'ContainerRegistry|%{count} Image repository', + 'ContainerRegistry|%{count} Image repositories', + this.imagesCount, + ); + return sprintf(pluralisedString, { count: this.imagesCount }); + }, + timeTillRun() { + const difference = calculateRemainingMilliseconds(this.expirationPolicy?.next_run_at); + return approximateDuration(difference / 1000); + }, + expirationPolicyEnabled() { + return this.expirationPolicy?.enabled; + }, + expirationPolicyText() { + return this.expirationPolicyEnabled + ? sprintf(EXPIRATION_POLICY_WILL_RUN_IN, { time: this.timeTillRun }) + : EXPIRATION_POLICY_DISABLED_TEXT; + }, + infoMessages() { + return [{ text: LIST_INTRO_TEXT, link: this.helpPagePath }]; + }, + }, +}; +</script> + +<template> + <title-area + :title="$options.i18n.CONTAINER_REGISTRY_TITLE" + :info-messages="infoMessages" + :metadata-loading="metadataLoading" + > + <template #right-actions> + <slot name="commands"></slot> + </template> + <template #metadata-count> + <metadata-item + v-if="imagesCount" + data-testid="images-count" + icon="container-image" + :text="imagesCountText" + /> + </template> + <template #metadata-exp-policies> + <metadata-item + v-if="!hideExpirationPolicyData" + data-testid="expiration-policy" + icon="expire" + :text="expirationPolicyText" + size="xl" + /> + </template> + </title-area> +</template> |