49 | {jobs.items.map(job => (
50 |
53 | )
54 | }
55 |
56 | return (
57 |
26 |
29 |
33 | #{job.id}
34 |
35 |
36 |
60 | )
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/fixtures/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": 250833,
3 | "description": "GitLab Runner",
4 | "name": "gitlab-runner",
5 | "name_with_namespace": "GitLab.org / gitlab-runner",
6 | "path": "gitlab-runner",
7 | "path_with_namespace": "gitlab-org/gitlab-runner",
8 | "created_at": "2015-04-27T21:10:25.322Z",
9 | "default_branch": "master",
10 | "tag_list": [],
11 | "ssh_url_to_repo": "git@gitlab.com:gitlab-org/gitlab-runner.git",
12 | "http_url_to_repo": "https://gitlab.com/gitlab-org/gitlab-runner.git",
13 | "web_url": "https://gitlab.com/gitlab-org/gitlab-runner",
14 | "readme_url": "https://gitlab.com/gitlab-org/gitlab-runner/blob/master/README.md",
15 | "avatar_url": "https://assets.gitlab-static.net/uploads/-/system/project/avatar/250833/runner_logo.png",
16 | "star_count": 973,
17 | "forks_count": 762,
18 | "last_activity_at": "2018-07-27T22:14:44.591Z",
19 | "_links": {
20 | "self": "https://gitlab.com/api/v4/projects/250833",
21 | "issues": "https://gitlab.com/api/v4/projects/250833/issues",
22 | "merge_requests": "https://gitlab.com/api/v4/projects/250833/merge_requests",
23 | "repo_branches": "https://gitlab.com/api/v4/projects/250833/repository/branches",
24 | "labels": "https://gitlab.com/api/v4/projects/250833/labels",
25 | "events": "https://gitlab.com/api/v4/projects/250833/events",
26 | "members": "https://gitlab.com/api/v4/projects/250833/members"
27 | },
28 | "archived": false,
29 | "visibility": "public",
30 | "resolve_outdated_diff_discussions": false,
31 | "container_registry_enabled": true,
32 | "issues_enabled": true,
33 | "merge_requests_enabled": true,
34 | "wiki_enabled": false,
35 | "jobs_enabled": true,
36 | "snippets_enabled": false,
37 | "shared_runners_enabled": true,
38 | "lfs_enabled": true,
39 | "creator_id": 12452,
40 | "namespace": {
41 | "id": 9970,
42 | "name": "GitLab.org",
43 | "path": "gitlab-org",
44 | "kind": "group",
45 | "full_path": "gitlab-org",
46 | "parent_id": null
47 | },
48 | "import_status": "finished",
49 | "open_issues_count": 675,
50 | "public_jobs": true,
51 | "ci_config_path": null,
52 | "shared_with_groups": [],
53 | "only_allow_merge_if_pipeline_succeeds": true,
54 | "request_access_enabled": false,
55 | "only_allow_merge_if_all_discussions_are_resolved": false,
56 | "printing_merge_request_link_enabled": true,
57 | "merge_method": "merge",
58 | "permissions": {
59 | "project_access": null,
60 | "group_access": null
61 | },
62 | "approvals_before_merge": 1
63 | }
--------------------------------------------------------------------------------
/src/components/activity/ProjectActivity.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import {
4 | TrapApiError,
5 | Widget,
6 | WidgetHeader,
7 | WidgetBody,
8 | WidgetLoader,
9 | ExternalLink,
10 | ActivityIcon,
11 | } from '@mozaik/ui'
12 | import ProjectActivityItem from './ProjectActivityItem'
13 | import { eventPropType } from './propTypes'
14 |
15 | export default class ProjectActivity extends Component {
16 | static propTypes = {
17 | project: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
18 | title: PropTypes.string,
19 | apiData: PropTypes.shape({
20 | project: PropTypes.shape({
21 | name: PropTypes.string.isRequired,
22 | web_url: PropTypes.string.isRequired,
23 | }).isRequired,
24 | events: PropTypes.shape({
25 | items: PropTypes.arrayOf(PropTypes.shape(eventPropType)).isRequired,
26 | pagination: PropTypes.shape({
27 | total: PropTypes.number.isRequired,
28 | }).isRequired,
29 | }).isRequired,
30 | }),
31 | apiError: PropTypes.object,
32 | }
33 |
34 | static getApiRequest({ project }) {
35 | return {
36 | id: `gitlab.projectEvents.${project}`,
37 | params: { project },
38 | }
39 | }
40 |
41 | render() {
42 | const { title, apiData, apiError } = this.props
43 |
44 | let body =
77 |
84 | {message}
85 |
8 |
170 | `;
171 |
--------------------------------------------------------------------------------
/src/client/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const config = require('./config')
4 | const Gitlab = require('./gitlab').Gitlab
5 |
6 | const aggregatePipelineJobs = jobs => {
7 | let stages = []
8 | jobs.forEach(job => {
9 | let stage = stages.find(s => s.name === job.stage)
10 | if (stage === undefined) {
11 | stage = {
12 | name: job.stage,
13 | jobs: [],
14 | status: 'success',
15 | }
16 | stages.push(stage)
17 | }
18 |
19 | stage.jobs.push(job)
20 | })
21 |
22 | stages = stages.map(stage => {
23 | let status
24 | stage.jobs.forEach(job => {
25 | if (job.status === 'failed') {
26 | status = 'failed'
27 | }
28 | if (status === undefined && job.status === 'success') {
29 | status = 'success'
30 | }
31 | if (status === undefined && job.status === 'manual') {
32 | status = 'skipped'
33 | }
34 | })
35 |
36 | if (status === undefined) {
37 | status = 'pending'
38 | }
39 |
40 | stage.status = status
41 |
42 | return stage
43 | })
44 |
45 | return stages
46 | }
47 |
48 | /**
49 | * @param {Mozaik} mozaik
50 | */
51 | module.exports = mozaik => {
52 | mozaik.loadApiConfig(config)
53 |
54 | const gitlab = new Gitlab(
55 | config.get('gitlab.baseUrl'),
56 | config.get('gitlab.token'),
57 | mozaik.request,
58 | mozaik.logger
59 | )
60 |
61 | return {
62 | project({ project }) {
63 | return gitlab.getProject(project)
64 | },
65 | projectMembers({ project }) {
66 | return Promise.all([
67 | gitlab.getProject(project),
68 | gitlab.getProjectMembers(project),
69 | ]).then(([project, members]) => ({
70 | project,
71 | members,
72 | }))
73 | },
74 | projectContributors({ project }) {
75 | return Promise.all([
76 | gitlab.getProject(project),
77 | gitlab.getProjectContributors(project),
78 | ]).then(([project, contributors]) => ({
79 | project,
80 | contributors,
81 | }))
82 | },
83 | projectJobs({ project }) {
84 | return Promise.all([gitlab.getProject(project), gitlab.getProjectJobs(project)]).then(
85 | ([project, jobs]) => ({
86 | project,
87 | jobs,
88 | })
89 | )
90 | },
91 | projectBranches({ project }) {
92 | return Promise.all([
93 | gitlab.getProject(project),
94 | gitlab.getProjectBranches(project),
95 | ]).then(([project, branches]) => ({
96 | project,
97 | branches,
98 | }))
99 | },
100 | projectMergeRequests({ project, query = {} }) {
101 | return gitlab.getProjectMergeRequests(project, query)
102 | },
103 | projectLabels({ project }) {
104 | return Promise.all([gitlab.getProject(project), gitlab.getProjectLabels(project)]).then(
105 | ([project, labels]) => ({
106 | project,
107 | labels,
108 | })
109 | )
110 | },
111 | projectMilestones({ project }) {
112 | return Promise.all([
113 | gitlab.getProject(project),
114 | gitlab.getProjectMilestones(project),
115 | ]).then(([project, milestones]) => ({
116 | project,
117 | milestones,
118 | }))
119 | },
120 | projectEvents({ project }) {
121 | return Promise.all([gitlab.getProject(project), gitlab.getProjectEvents(project)]).then(
122 | ([project, events]) => ({
123 | project,
124 | events,
125 | })
126 | )
127 | },
128 | latestProjectPipeline({ project, ref }) {
129 | return gitlab.getProjectPipelines(project, { ref, per_page: 1 }).then(({ items }) => {
130 | if (items.length === 0) return null
131 |
132 | return Promise.all([
133 | gitlab.getProject(project),
134 | gitlab.getProjectPipeline(project, items[0].id),
135 | gitlab.getProjectPipelineJobs(project, items[0].id, { per_page: 100 }),
136 | ]).then(([project, pipeline, jobs]) => {
137 | let commit
138 | if (jobs.items.length > 0) {
139 | commit = jobs.items[0].commit
140 | }
141 |
142 | return {
143 | ...pipeline,
144 | project,
145 | commit,
146 | stages: aggregatePipelineJobs(jobs.items),
147 | }
148 | })
149 | })
150 | },
151 | }
152 | }
153 |
--------------------------------------------------------------------------------
/src/components/Project.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import styled from 'styled-components'
4 | import {
5 | TrapApiError,
6 | Widget,
7 | WidgetBody,
8 | WidgetLoader,
9 | WidgetLabel,
10 | ExternalLink,
11 | LockIcon,
12 | UnlockIcon,
13 | StarIcon,
14 | GitBranchIcon,
15 | typography,
16 | WidgetAvatar,
17 | } from '@mozaik/ui'
18 |
19 | const AVATAR_SIZE = '12vmin'
20 | const ICON_SIZE = '1.8vmin'
21 |
22 | const Container = styled.div`
23 | display: flex;
24 | flex-direction: column;
25 | height: 100%;
26 | `
27 |
28 | const Header = styled.div`
29 | flex: 1;
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | `
34 |
35 | const AvatarPlaceholder = styled.span`
36 | width: ${AVATAR_SIZE};
37 | height: ${AVATAR_SIZE};
38 | display: flex;
39 | align-items: center;
40 | justify-content: center;
41 | text-transform: uppercase;
42 | color: ${props => props.theme.colors.textHighlight};
43 | background: ${props => props.theme.colors.unknown};
44 | ${props => typography(props.theme, 'display')} font-size: 6vmin;
45 | `
46 |
47 | const Name = styled.div`
48 | display: flex;
49 | align-items: center;
50 | justify-content: center;
51 | white-space: pre;
52 | color: ${props => props.theme.colors.textHighlight};
53 | margin: 1vmin 0 3vmin;
54 | ${props => typography(props.theme, 'default', 'strong')};
55 | `
56 |
57 | const Grid = styled.div`
58 | display: grid;
59 | grid-template-columns: 1fr 1fr;
60 | grid-column-gap: 2vmin;
61 | grid-row-gap: 2vmin;
62 | `
63 |
64 | const Count = styled.span`
65 | color: ${props => props.theme.colors.textHighlight};
66 | ${props => typography(props.theme, 'default', 'strong')};
67 | `
68 |
69 | export default class Project extends Component {
70 | static propTypes = {
71 | project: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
72 | apiData: PropTypes.shape({
73 | name: PropTypes.string.isRequired,
74 | name_with_namespace: PropTypes.string.isRequired,
75 | visibility: PropTypes.string.isRequired,
76 | avatar_url: PropTypes.string,
77 | star_count: PropTypes.number.isRequired,
78 | forks_count: PropTypes.number.isRequired,
79 | }),
80 | apiError: PropTypes.object,
81 | theme: PropTypes.object.isRequired,
82 | }
83 |
84 | static getApiRequest({ project }) {
85 | return {
86 | id: `gitlab.project.${project}`,
87 | params: { project },
88 | }
89 | }
90 |
91 | render() {
92 | const { apiData: project, apiError, theme } = this.props
93 |
94 | let body =
11 |
15 |
16 |
60 |
169 |
19 |
24 | ploucifier
25 |
26 |
27 | Labels by open issues
28 |
31 | 3
32 |
33 |
34 |
37 |
58 |
59 |
64 |
168 |
72 |
166 |
167 |
8 |
196 | `;
197 |
--------------------------------------------------------------------------------
/src/client/gitlab.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const chalk = require('chalk')
4 |
5 | /**
6 | * @typedef {Object} Pagination
7 | * @property {number} total
8 | * @property {number} page
9 | * @property {number} pages
10 | * @property {number} perPage
11 | * @property {number} previousPage
12 | * @property {number} nextPage
13 | */
14 |
15 | /**
16 | * @typedef {Object} PaginationOptions
17 | * @property {number} [per_page]
18 | * @property {number} [page]
19 | */
20 |
21 | /**
22 | * @typedef {Object} PipelineOptions
23 | * @property {number} [per_page]
24 | * @property {number} [page]
25 | * @property {'running'|'pending'|'finished'|'branches'|'tags'} [scope] - The scope of pipelines, one of: running, pending, finished, branches, tags
26 | * @property {'running'|'pending'|'success'|'failed'|'canceled'|'skipped'} [status] - The status of pipelines, one of: running, pending, success, failed, canceled, skipped
27 | * @property {string} [ref] - The ref of pipelines
28 | * @property {string} [sha] - The sha or pipelines
29 | * @property {boolean} [yaml_errors] - Returns pipelines with invalid configurations
30 | * @property {string} [name] - The name of the user who triggered pipelines
31 | * @property {string} [username] - The username of the user who triggered pipelines
32 | * @property {'id'|'status'|'ref'|'user_id'} [order_by] - Order pipelines by id, status, ref, or user_id (default: id)
33 | * @property {'asc'|'desc'} [sort] - Sort pipelines in asc or desc order (default: desc)
34 | */
35 |
36 | /**
37 | * @param {object} headers
38 | * @return {Pagination}
39 | */
40 | exports.paginationFromHeaders = headers => ({
41 | total: Number(headers['x-total']),
42 | page: Number(headers['x-page']),
43 | pages: Number(headers['x-total-pages']),
44 | perPage: Number(headers['x-per-page']),
45 | previousPage: Number(headers['x-prev-page']),
46 | nextPage: Number(headers['x-next-page']),
47 | })
48 |
49 | class GitLab {
50 | constructor(baseUrl, token, request, logger) {
51 | this.baseUrl = baseUrl
52 | this.token = token
53 | this.request = request
54 | this.logger = logger
55 | }
56 |
57 | makeRequest(path, qs) {
58 | const uri = `${this.baseUrl}${path}`
59 |
60 | const options = {
61 | uri,
62 | qs,
63 | json: true,
64 | resolveWithFullResponse: true,
65 | headers: {
66 | 'PRIVATE-TOKEN': this.token,
67 | },
68 | }
69 |
70 | const paramsDebug = qs ? ` ${JSON.stringify(qs)}` : ''
71 | this.logger.info(chalk.yellow(`[gitlab] calling ${uri}${paramsDebug}`))
72 |
73 | return this.request(options)
74 | }
75 |
76 | getProject(projectId) {
77 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}`).then(res => res.body)
78 | }
79 |
80 | getProjectMembers(projectId) {
81 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}/members`).then(res => ({
82 | items: res.body,
83 | pagination: exports.paginationFromHeaders(res.headers),
84 | }))
85 | }
86 |
87 | getProjectContributors(projectId) {
88 | return this.makeRequest(
89 | `/projects/${encodeURIComponent(projectId)}/repository/contributors`
90 | ).then(res => ({
91 | items: res.body,
92 | pagination: exports.paginationFromHeaders(res.headers),
93 | }))
94 | }
95 |
96 | getProjectJobs(projectId) {
97 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}/jobs`, {
98 | per_page: 40,
99 | }).then(res => ({
100 | items: res.body,
101 | pagination: exports.paginationFromHeaders(res.headers),
102 | }))
103 | }
104 |
105 | getProjectBranches(projectId) {
106 | return this.makeRequest(
107 | `/projects/${encodeURIComponent(projectId)}/repository/branches`
108 | ).then(res => ({
109 | items: res.body,
110 | pagination: exports.paginationFromHeaders(res.headers),
111 | }))
112 | }
113 |
114 | getProjectMergeRequests(projectId, query = {}) {
115 | return this.makeRequest(
116 | `/projects/${encodeURIComponent(projectId)}/merge_requests`,
117 | query
118 | ).then(res => ({
119 | items: res.body,
120 | pagination: exports.paginationFromHeaders(res.headers),
121 | }))
122 | }
123 |
124 | getProjectLabels(projectId) {
125 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}/labels`).then(res => ({
126 | items: res.body,
127 | pagination: exports.paginationFromHeaders(res.headers),
128 | }))
129 | }
130 |
131 | getProjectMilestones(projectId) {
132 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}/milestones`).then(
133 | res => ({
134 | items: res.body,
135 | pagination: exports.paginationFromHeaders(res.headers),
136 | })
137 | )
138 | }
139 |
140 | getProjectEvents(projectId) {
141 | return this.makeRequest(`/projects/${encodeURIComponent(projectId)}/events`).then(res => ({
142 | items: res.body,
143 | pagination: exports.paginationFromHeaders(res.headers),
144 | }))
145 | }
146 |
147 | /**
148 | * @param {string|number} projectId
149 | * @param {PipelineOptions} options
150 | *
151 | * @return {Promise
11 |
15 |
16 |
60 |
195 |
19 |
24 | ploucifier
25 |
26 |
27 | Labels by open issues
28 |
31 | 3
32 |
33 |
34 |
37 |
58 |
59 |
64 |
194 |
72 |
193 |
79 |
191 |
192 |