diff options
Diffstat (limited to 'app/assets/javascripts/repository')
9 files changed, 149 insertions, 7 deletions
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue index 0d4d431855c..67963dc1923 100644 --- a/app/assets/javascripts/repository/components/breadcrumbs.vue +++ b/app/assets/javascripts/repository/components/breadcrumbs.vue @@ -36,7 +36,7 @@ export default { to: `/tree/${this.ref}${path}`, }); }, - [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}` }], + [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}/` }], ); }, }, diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 891e3fe9d16..1e66ccbfa29 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -131,7 +131,9 @@ export default { v-for="entry in val" :id="entry.id" :key="`${entry.flatPath}-${entry.id}`" + :project-path="projectPath" :current-path="path" + :name="entry.name" :path="entry.flatPath" :type="entry.type" :url="entry.webUrl" diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index 4519f82fc93..c31e7fa71a2 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -1,12 +1,30 @@ <script> -import { GlBadge } from '@gitlab/ui'; +import { GlBadge, GlLink, GlSkeletonLoading } from '@gitlab/ui'; import { visitUrl } from '~/lib/utils/url_utility'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import { getIconName } from '../../utils/icon'; import getRefMixin from '../../mixins/get_ref'; +import getCommit from '../../queries/getCommit.query.graphql'; export default { components: { GlBadge, + GlLink, + GlSkeletonLoading, + TimeagoTooltip, + }, + apollo: { + commit: { + query: getCommit, + variables() { + return { + fileName: this.name, + type: this.type, + path: this.currentPath, + projectPath: this.projectPath, + }; + }, + }, }, mixins: [getRefMixin], props: { @@ -14,10 +32,18 @@ export default { type: String, required: true, }, + projectPath: { + type: String, + required: true, + }, currentPath: { type: String, required: true, }, + name: { + type: String, + required: true, + }, path: { type: String, required: true, @@ -37,6 +63,11 @@ export default { default: null, }, }, + data() { + return { + commit: null, + }; + }, computed: { routerLinkTo() { return this.isFolder ? { path: `/tree/${this.ref}/${this.path}` } : null; @@ -73,7 +104,7 @@ export default { </script> <template> - <tr v-once :class="`file_${id}`" class="tree-item" @click="openRow"> + <tr :class="`file_${id}`" class="tree-item" @click="openRow"> <td class="tree-item-file-name"> <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i> <component :is="linkComponent" :to="routerLinkTo" :href="url" class="str-truncated"> @@ -83,10 +114,18 @@ export default { LFS </gl-badge> <template v-if="isSubmodule"> - @ <a href="#" class="commit-sha">{{ shortSha }}</a> + @ <gl-link href="#" class="commit-sha">{{ shortSha }}</gl-link> </template> </td> - <td class="d-none d-sm-table-cell tree-commit"></td> - <td class="tree-time-ago text-right"></td> + <td class="d-none d-sm-table-cell tree-commit"> + <gl-link v-if="commit" :href="commit.commitPath" class="str-truncated-100 tree-commit-link"> + {{ commit.message }} + </gl-link> + <gl-skeleton-loading v-else :lines="1" class="h-auto" /> + </td> + <td class="tree-time-ago text-right"> + <timeago-tooltip v-if="commit" :time="commit.committedDate" tooltip-placement="bottom" /> + <gl-skeleton-loading v-else :lines="1" class="ml-auto h-auto w-50" /> + </td> </tr> </template> diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js index ef147ec15cb..6cb253c8169 100644 --- a/app/assets/javascripts/repository/graphql.js +++ b/app/assets/javascripts/repository/graphql.js @@ -3,6 +3,7 @@ import VueApollo from 'vue-apollo'; import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'; import createDefaultClient from '~/lib/graphql'; import introspectionQueryResultData from './fragmentTypes.json'; +import { fetchLogsTree } from './log_tree'; Vue.use(VueApollo); @@ -13,7 +14,21 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({ }); const defaultClient = createDefaultClient( - {}, + { + Query: { + commit(_, { path, fileName, type }) { + return new Promise(resolve => { + fetchLogsTree(defaultClient, path, '0', { + resolve, + entry: { + name: fileName, + type, + }, + }); + }); + }, + }, + }, { cacheConfig: { fragmentMatcher, diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index d9216e88676..6280977b05b 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -16,6 +16,7 @@ export default function setupVueRepositoryList() { projectPath, projectShortPath, ref, + commits: [], }, }); diff --git a/app/assets/javascripts/repository/log_tree.js b/app/assets/javascripts/repository/log_tree.js new file mode 100644 index 00000000000..2c19aca2397 --- /dev/null +++ b/app/assets/javascripts/repository/log_tree.js @@ -0,0 +1,64 @@ +import axios from '~/lib/utils/axios_utils'; +import getCommits from './queries/getCommits.query.graphql'; +import getProjectPath from './queries/getProjectPath.query.graphql'; +import getRef from './queries/getRef.query.graphql'; + +let fetchpromise; +let resolvers = []; + +export function normalizeData(data) { + return data.map(d => ({ + sha: d.commit.id, + message: d.commit.message, + committedDate: d.commit.committed_date, + commitPath: d.commit_path, + fileName: d.file_name, + type: d.type, + __typename: 'LogTreeCommit', + })); +} + +export function resolveCommit(commits, { resolve, entry }) { + const commit = commits.find(c => c.fileName === entry.name && c.type === entry.type); + + if (commit) { + resolve(commit); + } +} + +export function fetchLogsTree(client, path, offset, resolver = null) { + if (resolver) { + resolvers.push(resolver); + } + + if (fetchpromise) return fetchpromise; + + const { projectPath } = client.readQuery({ query: getProjectPath }); + const { ref } = client.readQuery({ query: getRef }); + + fetchpromise = axios + .get(`${gon.gitlab_url}/${projectPath}/refs/${ref}/logs_tree${path ? `/${path}` : ''}`, { + params: { format: 'json', offset }, + }) + .then(({ data, headers }) => { + const headerLogsOffset = headers['more-logs-offset']; + const { commits } = client.readQuery({ query: getCommits }); + const newCommitData = [...commits, ...normalizeData(data)]; + client.writeQuery({ + query: getCommits, + data: { commits: newCommitData }, + }); + + resolvers.forEach(r => resolveCommit(newCommitData, r)); + + fetchpromise = null; + + if (headerLogsOffset) { + fetchLogsTree(client, path, headerLogsOffset); + } else { + resolvers = []; + } + }); + + return fetchpromise; +} diff --git a/app/assets/javascripts/repository/queries/getCommit.query.graphql b/app/assets/javascripts/repository/queries/getCommit.query.graphql new file mode 100644 index 00000000000..e2a2d831e47 --- /dev/null +++ b/app/assets/javascripts/repository/queries/getCommit.query.graphql @@ -0,0 +1,10 @@ +query getCommit($fileName: String!, $type: String!, $path: String!) { + commit(path: $path, fileName: $fileName, type: $type) @client { + sha + message + committedDate + commitPath + fileName + type + } +} diff --git a/app/assets/javascripts/repository/queries/getCommits.query.graphql b/app/assets/javascripts/repository/queries/getCommits.query.graphql new file mode 100644 index 00000000000..df9e67cc440 --- /dev/null +++ b/app/assets/javascripts/repository/queries/getCommits.query.graphql @@ -0,0 +1,10 @@ +query getCommits { + commits @client { + sha + message + committedDate + commitPath + fileName + type + } +} diff --git a/app/assets/javascripts/repository/queries/getFiles.query.graphql b/app/assets/javascripts/repository/queries/getFiles.query.graphql index ef924fde556..4c24fc4087f 100644 --- a/app/assets/javascripts/repository/queries/getFiles.query.graphql +++ b/app/assets/javascripts/repository/queries/getFiles.query.graphql @@ -1,5 +1,6 @@ fragment TreeEntry on Entry { id + name flatPath type } |