BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 50afa5fd by Alfredo Sumaran
Options

Combine components for better legibility

parent f78935ea
Showing with 220 additions and 207 deletions
app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 deleted 100644 → 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>
&middot;
<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 = {})));
app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 deleted 100644 → 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>
&middot;
<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 = {}));
app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6 deleted 100644 → 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>
&middot;
<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 = {})));
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>
&middot;
<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>
......
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>
&middot;
<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>
......
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>
......
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>
&middot;
<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>
......
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>
&middot;
<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>
......
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>
......
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>
&middot;
<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>
......
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;
......
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment