debian-mirror-gitlab/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
2023-01-12 18:35:48 +00:00

337 lines
9.3 KiB
Vue

<script>
import {
GlLoadingIcon,
GlTable,
GlLink,
GlButtonGroup,
GlButton,
GlBadge,
GlIcon,
GlPagination,
} from '@gitlab/ui';
import { createAlert } from '~/flash';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import getJobArtifactsQuery from '../graphql/queries/get_job_artifacts.query.graphql';
import { totalArtifactsSizeForJob, mapArchivesToJobNodes, mapBooleansToJobNodes } from '../utils';
import {
STATUS_BADGE_VARIANTS,
I18N_DOWNLOAD,
I18N_BROWSE,
I18N_DELETE,
I18N_EXPIRED,
I18N_DESTROY_ERROR,
I18N_FETCH_ERROR,
I18N_ARTIFACTS,
I18N_JOB,
I18N_SIZE,
I18N_CREATED,
I18N_ARTIFACTS_COUNT,
INITIAL_CURRENT_PAGE,
INITIAL_PREVIOUS_PAGE_CURSOR,
INITIAL_NEXT_PAGE_CURSOR,
JOBS_PER_PAGE,
INITIAL_LAST_PAGE_SIZE,
} from '../constants';
import ArtifactsTableRowDetails from './artifacts_table_row_details.vue';
const INITIAL_PAGINATION_STATE = {
currentPage: INITIAL_CURRENT_PAGE,
prevPageCursor: INITIAL_PREVIOUS_PAGE_CURSOR,
nextPageCursor: INITIAL_NEXT_PAGE_CURSOR,
firstPageSize: JOBS_PER_PAGE,
lastPageSize: INITIAL_LAST_PAGE_SIZE,
};
export default {
name: 'JobArtifactsTable',
components: {
GlLoadingIcon,
GlTable,
GlLink,
GlButtonGroup,
GlButton,
GlBadge,
GlIcon,
GlPagination,
CiIcon,
TimeAgo,
ArtifactsTableRowDetails,
},
inject: ['projectPath'],
apollo: {
jobArtifacts: {
query: getJobArtifactsQuery,
variables() {
return this.queryVariables;
},
update({ project: { jobs: { nodes = [], pageInfo = {}, count = 0 } = {} } }) {
this.pageInfo = pageInfo;
this.count = count;
return nodes
.map(mapArchivesToJobNodes)
.map(mapBooleansToJobNodes)
.map((jobNode) => {
return {
...jobNode,
// GlTable uses an item's _showDetails attribute to determine whether
// it should show the <template #row-details /> for its table row
_showDetails: this.expandedJobs.includes(jobNode.id),
};
});
},
error() {
createAlert({
message: I18N_FETCH_ERROR,
});
},
},
},
data() {
return {
jobArtifacts: [],
count: 0,
pageInfo: {},
expandedJobs: [],
pagination: INITIAL_PAGINATION_STATE,
};
},
computed: {
queryVariables() {
return {
projectPath: this.projectPath,
firstPageSize: this.pagination.firstPageSize,
lastPageSize: this.pagination.lastPageSize,
prevPageCursor: this.pagination.prevPageCursor,
nextPageCursor: this.pagination.nextPageCursor,
};
},
showPagination() {
return this.count > JOBS_PER_PAGE;
},
prevPage() {
return Number(this.pageInfo.hasPreviousPage);
},
nextPage() {
return Number(this.pageInfo.hasNextPage);
},
},
methods: {
refetchArtifacts() {
this.$apollo.queries.jobArtifacts.refetch();
},
artifactsSize(item) {
return totalArtifactsSizeForJob(item);
},
pipelineId(item) {
const id = getIdFromGraphQLId(item.pipeline.id);
return `#${id}`;
},
handlePageChange(page) {
const { startCursor, endCursor } = this.pageInfo;
if (page > this.pagination.currentPage) {
this.pagination = {
...INITIAL_PAGINATION_STATE,
nextPageCursor: endCursor,
currentPage: page,
};
} else {
this.pagination = {
lastPageSize: JOBS_PER_PAGE,
firstPageSize: null,
prevPageCursor: startCursor,
currentPage: page,
};
}
},
handleRowToggle(toggleDetails, hasArtifacts, id, detailsShowing) {
if (!hasArtifacts) return;
toggleDetails();
if (!detailsShowing) {
this.expandedJobs.push(id);
} else {
this.expandedJobs.splice(this.expandedJobs.indexOf(id), 1);
}
},
downloadPath(job) {
return job.archive?.downloadPath;
},
downloadButtonDisabled(job) {
return !job.archive?.downloadPath;
},
browseButtonDisabled(job) {
return !job.browseArtifactsPath;
},
},
fields: [
{
key: 'artifacts',
label: I18N_ARTIFACTS,
thClass: 'gl-w-quarter',
},
{
key: 'job',
label: I18N_JOB,
thClass: 'gl-w-35p',
},
{
key: 'size',
label: I18N_SIZE,
thClass: 'gl-w-15p gl-text-right',
tdClass: 'gl-text-right',
},
{
key: 'created',
label: I18N_CREATED,
thClass: 'gl-w-eighth gl-text-center',
tdClass: 'gl-text-center',
},
{
key: 'actions',
label: '',
thClass: 'gl-w-eighth',
tdClass: 'gl-text-right',
},
],
STATUS_BADGE_VARIANTS,
i18n: {
download: I18N_DOWNLOAD,
browse: I18N_BROWSE,
delete: I18N_DELETE,
expired: I18N_EXPIRED,
destroyArtifactError: I18N_DESTROY_ERROR,
fetchArtifactsError: I18N_FETCH_ERROR,
artifactsLabel: I18N_ARTIFACTS,
jobLabel: I18N_JOB,
sizeLabel: I18N_SIZE,
createdLabel: I18N_CREATED,
artifactsCount: I18N_ARTIFACTS_COUNT,
},
};
</script>
<template>
<div>
<gl-table
:items="jobArtifacts"
:fields="$options.fields"
:busy="$apollo.queries.jobArtifacts.loading"
stacked="sm"
details-td-class="gl-bg-gray-10! gl-p-0! gl-overflow-auto"
>
<template #table-busy>
<gl-loading-icon size="lg" />
</template>
<template
#cell(artifacts)="{ item: { id, artifacts, hasArtifacts }, toggleDetails, detailsShowing }"
>
<span
:class="{ 'gl-cursor-pointer': hasArtifacts }"
data-testid="job-artifacts-count"
@click="handleRowToggle(toggleDetails, hasArtifacts, id, detailsShowing)"
>
<gl-icon
v-if="hasArtifacts"
:name="detailsShowing ? 'chevron-down' : 'chevron-right'"
class="gl-mr-2"
/>
<strong>
{{ $options.i18n.artifactsCount(artifacts.nodes.length) }}
</strong>
</span>
</template>
<template #cell(job)="{ item }">
<span class="gl-display-inline-flex gl-align-items-center gl-w-full gl-mb-4">
<span data-testid="job-artifacts-job-status">
<ci-icon v-if="item.succeeded" :status="item.detailedStatus" class="gl-mr-3" />
<gl-badge
v-else
:icon="item.detailedStatus.icon"
:variant="$options.STATUS_BADGE_VARIANTS[item.detailedStatus.group]"
class="gl-mr-3"
>
{{ item.detailedStatus.label }}
</gl-badge>
</span>
<gl-link :href="item.webPath" class="gl-font-weight-bold">
{{ item.name }}
</gl-link>
</span>
<span class="gl-display-inline-flex">
<gl-icon name="pipeline" class="gl-mr-2" />
<gl-link
:href="item.pipeline.path"
class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
>
{{ pipelineId(item) }}
</gl-link>
<gl-icon name="branch" class="gl-mr-2" />
<gl-link
:href="item.refPath"
class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
>
{{ item.refName }}
</gl-link>
<gl-icon name="commit" class="gl-mr-2" />
<gl-link
:href="item.commitPath"
class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
>
{{ item.shortSha }}
</gl-link>
</span>
</template>
<template #cell(size)="{ item }">
<span data-testid="job-artifacts-size">{{ artifactsSize(item) }}</span>
</template>
<template #cell(created)="{ item }">
<time-ago data-testid="job-artifacts-created" :time="item.finishedAt" />
</template>
<template #cell(actions)="{ item }">
<gl-button-group>
<gl-button
icon="download"
:disabled="downloadButtonDisabled(item)"
:href="downloadPath(item)"
:title="$options.i18n.download"
:aria-label="$options.i18n.download"
data-testid="job-artifacts-download-button"
/>
<gl-button
icon="folder-open"
:disabled="browseButtonDisabled(item)"
:href="item.browseArtifactsPath"
:title="$options.i18n.browse"
:aria-label="$options.i18n.browse"
data-testid="job-artifacts-browse-button"
/>
<gl-button
icon="remove"
:title="$options.i18n.delete"
:aria-label="$options.i18n.delete"
data-testid="job-artifacts-delete-button"
disabled
/>
</gl-button-group>
</template>
<template #row-details="{ item: { artifacts } }">
<artifacts-table-row-details
:artifacts="artifacts"
:query-variables="queryVariables"
@refetch="refetchArtifacts"
/>
</template>
</gl-table>
<gl-pagination
v-if="showPagination"
:value="pagination.currentPage"
:prev-page="prevPage"
:next-page="nextPage"
align="center"
class="gl-mt-3"
@input="handlePageChange"
/>
</div>
</template>