diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-17 20:55:55 -0500 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-21 13:57:10 -0500 |
commit | 50afa5fd3b4083e8e04c140f22ed95a34159dce6 (patch) | |
tree | 56acd5294457596b1963acc6e71b311b85b864fe /app | |
parent | f78935ead7ca9773d8146c054da67759ec578fc0 (diff) | |
download | gitlab-ce-50afa5fd3b4083e8e04c140f22ed95a34159dce6.tar.gz |
Combine components for better legibility
Diffstat (limited to 'app')
12 files changed, 220 insertions, 207 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 deleted file mode 100644 index d56ab58670a..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 +++ /dev/null @@ -1,62 +0,0 @@ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - - /* - `build` prop should have - - - Build name/title - - Build ID - - Build URL - - Build branch - - Build branch URL - - Build short SHA - - Build commit URL - - Build date - - Total time - */ - - global.cycleAnalytics.ItemBuildComponent = Vue.extend({ - props: { - build: Object, - }, - template: ` - <div class="item-build-component"> - <div class="item-details"> - <h5 class="item-title"> - <span class="icon-build-status"> - <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> - <g fill="#31AF64" fill-rule="evenodd"> - <path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/> - <path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/> - </g> - </svg> - </span> - <a :href="build.url" class="item-build-name"> - {{ build.name }} - </a> - · - <a href="#" class="pipeline-id"> - #{{ build.id }} - </a> - <i class="fa fa-code-fork"></i> - <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a> - <span class="icon-branch"> - <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> - <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/> - </svg> - </span> - <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a> - </h5> - <span> - <a :href="build.url" class="issue-date"> - {{ build.date }} - </a> - </span> - </div> - <div class="item-time"> - <total-time :time="build.totalTime"></total-time> - </div> - </div> - `, - }); -}(window.gl || (window.gl = {}))); diff --git a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 deleted file mode 100644 index 17a77cf4369..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 +++ /dev/null @@ -1,53 +0,0 @@ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - - /* - `issue` prop should have - - - Issue title - - Issue URL - - Issue ID - - Issue date created - - Issue author - - Issue author profile URL - - Issue author avatar URL - - Total time - */ - - global.cycleAnalytics.ItemIssueComponent = Vue.extend({ - props: { - issue: Object, - }, - template: ` - <div> - <div class="item-details"> - <img class="avatar" :src="issue.author.avatarUrl"> - <h5 class="item-title issue-title"> - <a class="issue-title" :href="issue.url"> - {{ issue.title }} - </a> - </h5> - <a :href="issue.url" class="issue-link"> - #{{ issue.iid }} - </a> - · - <span> - Opened - <a :href="issue.url" class="issue-date"> - {{ issue.createdAt }} - </a> - </span> - <span> - by - <a :href="issue.author.webUrl" class="issue-author-link"> - {{ issue.author.name }} - </a> - </span> - </div> - <div class="item-time"> - <total-time :time="issue.totalTime"></total-time> - </div> - </div> - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6 deleted file mode 100644 index 36da613cccf..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6 +++ /dev/null @@ -1,53 +0,0 @@ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - - /* - `mergeRequest` prop should have - - - MR title - - MR URL - - MR ID - - MR date opened - - MR author - - MR author profile URL - - MR author avatar URL - - Total time - */ - - global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({ - props: { - mergeRequest: Object, - }, - template: ` - <div> - <div class="item-details"> - <img class="avatar" :src="mergeRequest.author.avatarUrl"> - <h5 class="item-title merge-merquest-title"> - <a :href="mergeRequest.url"> - {{ mergeRequest.title }} - </a> - </h5> - <a :href="mergeRequest.url" class="issue-link"> - !{{ mergeRequest.iid }} - </a> - · - <span> - Opened - <a :href="mergeRequest.url" class="issue-date"> - {{ mergeRequest.createdAt }} - </a> - </span> - <span> - by - <a :href="mergeRequest.author.webUrl" class="issue-author-link"> - {{ mergeRequest.author.name }} - </a> - </span> - </div> - <div class="item-time"> - <total-time :time="mergeRequest.totalTime"></total-time> - </div> - </div> - `, - }); -}(window.gl || (window.gl = {}))); diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6 index b070d22af8a..4949743c797 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageCodeComponent = Vue.extend({ - components: { - 'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent, - }, props: { items: Array, stage: Object, @@ -16,8 +13,30 @@ {{ stage.description }} </div> <ul class="stage-event-list"> - <li class="stage-event-item" v-for="mergeRequest in items"> - <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component> + <li v-for="mergeRequest in items" class="stage-event-item"> + <div class="item-details"> + <img class="avatar" :src="mergeRequest.author.avatarUrl"> + <h5 class="item-title merge-merquest-title"> + <a :href="mergeRequest.url"> + {{ mergeRequest.title }} + </a> + </h5> + <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> + · + <span> + Opened + <a :href="mergeRequest.url" class="issue-date"> + {{ mergeRequest.createdAt }} + </a> + </span> + <span> + by + <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a> + </span> + </div> + <div class="item-time"> + <total-time :time="mergeRequest.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6 index 204f4d1b806..4552eddb1f6 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageIssueComponent = Vue.extend({ - components: { - 'item-issue-component': gl.cycleAnalytics.ItemIssueComponent, - }, props: { items: Array, stage: Object, @@ -16,8 +13,34 @@ {{ stage.description }} </div> <ul class="stage-event-list"> - <li class="stage-event-item" v-for="issue in items"> - <item-issue-component :issue="issue"></item-issue-component> + <li v-for="issue in items" class="stage-event-item"> + <div class="item-details"> + <img class="avatar" :src="issue.author.avatarUrl"> + <h5 class="item-title issue-title"> + <a class="issue-title" :href="issue.url"> + {{ issue.title }} + </a> + </h5> + <a :href="issue.url" class="issue-link"> + #{{ issue.iid }} + </a> + · + <span> + Opened + <a :href="issue.url" class="issue-date"> + {{ issue.createdAt }} + </a> + </span> + <span> + by + <a :href="issue.author.webUrl" class="issue-author-link"> + {{ issue.author.name }} + </a> + </span> + </div> + <div class="item-time"> + <total-time :time="issue.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 index 637f3877a2e..d6fa1244ef8 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StagePlanComponent = Vue.extend({ - components: { - 'item-commit-component': gl.cycleAnalytics.ItemCommitComponent, - }, props: { items: Array, stage: Object, @@ -16,8 +13,31 @@ {{ stage.description }} </div> <ul class="stage-event-list"> - <li class="stage-event-item" v-for="commit in items"> - <item-commit-component :commit="commit"></item-commit-component> + <li v-for="commit in items" class="stage-event-item"> + <div class="item-details item-conmmit-component"> + <img class="avatar" :src="commit.author.avatarUrl"> + <h5 class="item-title commit-title"> + <a :href="commit.commitUrl"> + {{ commit.title }} + </a> + </h5> + <span> + First + <span class="commit-icon"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 40 40"> + <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/> + </svg> + </span> + <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a> + pushed by + <a :href="commit.author.webUrl" class="commit-author-link"> + {{ commit.author.name }} + </a> + </span> + </div> + <div class="item-time"> + <total-time :time="commit.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6 index 8616316d69b..ee8b96a088a 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageProductionComponent = Vue.extend({ - components: { - 'item-issue-component': gl.cycleAnalytics.ItemIssueComponent, - }, props: { items: Array, stage: Object, @@ -15,9 +12,35 @@ <div class="events-description"> {{ stage.description }} </div> - <ul> - <li v-for="issue in items"> - <item-issue-component :issue="issue"></item-issue-component> + <ul class="stage-event-list"> + <li v-for="issue in items" class="stage-event-item"> + <div class="item-details"> + <img class="avatar" :src="issue.author.avatarUrl"> + <h5 class="item-title issue-title"> + <a class="issue-title" :href="issue.url"> + {{ issue.title }} + </a> + </h5> + <a :href="issue.url" class="issue-link"> + #{{ issue.iid }} + </a> + · + <span> + Opened + <a :href="issue.url" class="issue-date"> + {{ issue.createdAt }} + </a> + </span> + <span> + by + <a :href="issue.author.webUrl" class="issue-author-link"> + {{ issue.author.name }} + </a> + </span> + </div> + <div class="item-time"> + <total-time :time="issue.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6 index 516c259722c..e6e387e2c6b 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageReviewComponent = Vue.extend({ - components: { - 'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent, - }, props: { items: Array, stage: Object, @@ -16,8 +13,42 @@ {{ stage.description }} </div> <ul class="stage-event-list"> - <li class="stage-event-item" v-for="mergeRequest in items"> - <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component> + <li v-for="mergeRequest in items" class="stage-event-item"> + <div class="item-details"> + <img class="avatar" :src="mergeRequest.author.avatarUrl"> + <h5 class="item-title merge-merquest-title"> + <a :href="mergeRequest.url"> + {{ mergeRequest.title }} + </a> + </h5> + <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> + · + <span> + Opened + <a :href="mergeRequest.url" class="issue-date"> + {{ mergeRequest.createdAt }} + </a> + </span> + <span> + by + <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a> + </span> + <template v-if="mergeRequest.state === 'closed'"> + <span class="merge-request-state"> + <i class="fa fa-ban"></i> + {{ mergeRequest.state.toUpperCase() }} + </span> + </template> + <template v-else> + <span class="merge-request-branch" v-if="mergeRequest.branch"> + <i class= "fa fa-code-fork"></i> + <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a> + </span> + </template> + </div> + <div class="item-time"> + <total-time :time="mergeRequest.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 index 1f983ecbab9..f621cfc940b 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 @@ -3,10 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageStagingComponent = Vue.extend({ - template: '#stage-staging-component', - components: { - 'item-build-component': gl.cycleAnalytics.ItemBuildComponent, - }, props: { items: Array, stage: Object, @@ -16,9 +12,36 @@ <div class="events-description"> {{ stage.description }} </div> - <ul> - <li v-for="build in items"> - <item-build-component :build="build"></item-build-component> + <ul class="stage-event-list"> + <li v-for="build in items" class="stage-event-item item-build-component"> + <div class="item-details"> + <img class="avatar" :src="build.author.avatarUrl"> + <h5 class="item-title"> + <a :href="build.url" class="pipeline-id"> + #{{ build.iid }} + </a> + <i class="fa fa-code-fork"></i> + <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a> + <span class="icon-branch"> + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> + <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/> + </svg> + </span> + <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a> + </h5> + <span> + <a :href="build.url" class="issue-date"> + {{ build.createdAt }} + </a> + by + <a :href="build.author.webUrl" class="issue-author-link"> + {{ build.author.name }} + </a> + </span> + </div> + <div class="item-time"> + <total-time :time="build.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 index ecb730e7b7c..53cb980d9f2 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 @@ -3,9 +3,6 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageTestComponent = Vue.extend({ - components: { - 'item-build-component': gl.cycleAnalytics.ItemBuildComponent, - }, props: { items: Array, stage: Object, @@ -16,8 +13,42 @@ {{ stage.description }} </div> <ul class="stage-event-list"> - <li class="stage-event-item" v-for="build in items"> - <item-build-component :build="build"></item-build-component> + <li v-for="build in items" class="stage-event-item item-build-component"> + <div class="item-details"> + <h5 class="item-title"> + <span class="icon-build-status"> + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> + <g fill="#31AF64" fill-rule="evenodd"> + <path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/> + <path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/> + </g> + </svg> + </span> + <a :href="build.url" class="item-build-name"> + {{ build.name }} + </a> + · + <a href="#" class="pipeline-id"> + #{{ build.id }} + </a> + <i class="fa fa-code-fork"></i> + <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a> + <span class="icon-branch"> + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> + <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/> + </svg> + </span> + <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a> + </h5> + <span> + <a :href="build.url" class="issue-date"> + {{ build.date }} + </a> + </span> + </div> + <div class="item-time"> + <total-time :time="build.totalTime"></total-time> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 index 3329ea6a161..7f3e8bfa6e6 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 @@ -55,10 +55,10 @@ newEvents.forEach((item) => { item.totalTime = item.total_time; - item.createdAt = item.created_at; item.author.webUrl = item.author.web_url; item.author.avatarUrl = item.author.avatar_url; + if (item.created_at) item.createdAt = item.created_at; if (item.short_sha) item.shortSha = item.short_sha; if (item.commit_url) item.commitUrl = item.commit_url; diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index b29f3f5be23..72c0f00b37e 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -344,6 +344,17 @@ } } } + + .merge-request-branch { + a { + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + } + } } // Custom Styles for stage items |