BigW Consortium Gitlab
Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gitlab-ce
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Forest Godfrey
gitlab-ce
Commits
b524b9eb
Commit
b524b9eb
authored
Sep 26, 2017
by
Filipa Lacerda
Committed by
Phil Hughes
Sep 26, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Moves cycle analytics components into vue files
parent
ba4f7413
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
369 additions
and
402 deletions
+369
-402
limit_warning_component.vue
...ts/cycle_analytics/components/limit_warning_component.vue
+25
-16
stage_code_component.vue
...ripts/cycle_analytics/components/stage_code_component.vue
+45
-49
stage_component.vue
...avascripts/cycle_analytics/components/stage_component.vue
+51
-50
stage_plan_component.vue
...ripts/cycle_analytics/components/stage_plan_component.vue
+44
-41
stage_production_component.js
.../cycle_analytics/components/stage_production_component.js
+0
-52
stage_review_component.vue
...pts/cycle_analytics/components/stage_review_component.vue
+59
-59
stage_staging_component.vue
...ts/cycle_analytics/components/stage_staging_component.vue
+53
-51
stage_test_component.vue
...ripts/cycle_analytics/components/stage_test_component.vue
+45
-40
total_time_component.js
...cripts/cycle_analytics/components/total_time_component.js
+0
-25
total_time_component.vue
...ripts/cycle_analytics/components/total_time_component.vue
+29
-0
cycle_analytics_bundle.js
...ets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+17
-18
limit_warning_component_spec.js
...vascripts/cycle_analytics/limit_warning_component_spec.js
+1
-1
No files found.
app/assets/javascripts/cycle_analytics/components/limit_warning_component.
js
→
app/assets/javascripts/cycle_analytics/components/limit_warning_component.
vue
View file @
b524b9eb
export
default
{
props
:
{
count
:
{
type
:
Number
,
required
:
true
,
<
script
>
import
tooltip
from
'../../vue_shared/directives/tooltip'
;
export
default
{
props
:
{
count
:
{
type
:
Number
,
required
:
true
,
},
},
},
template
:
`
<span v-if="count === 50" class="events-info pull-right">
<i class="fa fa-warning has-tooltip"
aria-hidden="true"
:title="n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)"
data-placement="top"></i>
{{ n__('Showing %d event', 'Showing %d events', 50) }}
</span>
`
,
};
directives
:
{
tooltip
,
},
};
</
script
>
<
template
>
<span
v-if=
"count === 50"
class=
"events-info pull-right"
>
<i
class=
"fa fa-warning"
v-tooltip
aria-hidden=
"true"
:title=
"n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)"
data-placement=
"top"
></i>
{{
n__
(
'Showing %d event'
,
'Showing %d events'
,
50
)
}}
</span>
</
template
>
app/assets/javascripts/cycle_analytics/components/stage_code_component.
js
→
app/assets/javascripts/cycle_analytics/components/stage_code_component.
vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
<
script
>
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
import
Vue
from
'vue'
;
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageCodeComponent
=
Vue
.
extend
({
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="mergeRequest in items" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-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>
{{ s__('OpenedNDaysAgo|Opened') }}
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
</span>
<span>
{{ s__('ByAuthor|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>
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
`
,
});
<ul
class=
"stage-event-list"
>
<li
v-for=
"mergeRequest in items"
class=
"stage-event-item"
>
<div
class=
"item-details"
>
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image
:img-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>
{{
s__
(
'OpenedNDaysAgo|Opened'
)
}}
<a
:href=
"mergeRequest.url"
class=
"issue-date"
>
{{
mergeRequest
.
createdAt
}}
</a>
</span>
<span>
{{
s__
(
'ByAuthor|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>
</
template
>
app/assets/javascripts/cycle_analytics/components/stage_
issue_component.js
→
app/assets/javascripts/cycle_analytics/components/stage_
component.vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
<
script
>
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageIssueComponent
=
Vue
.
extend
({
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="issue in items" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-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>
{{ s__('OpenedNDaysAgo|Opened') }}
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
{{ s__('ByAuthor|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>
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
`
,
});
<ul
class=
"stage-event-list"
>
<li
v-for=
"(issue, i) in items"
:key=
"i"
class=
"stage-event-item"
>
<div
class=
"item-details"
>
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image
:img-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>
{{
s__
(
'OpenedNDaysAgo|Opened'
)
}}
<a
:href=
"issue.url"
class=
"issue-date"
>
{{
issue
.
createdAt
}}
</a>
</span>
<span>
{{
s__
(
'ByAuthor|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"
/>
</div>
</li>
</ul>
</div>
</
template
>
app/assets/javascripts/cycle_analytics/components/stage_plan_component.
js
→
app/assets/javascripts/cycle_analytics/components/stage_plan_component.
vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
<
script
>
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
import
iconCommit
from
'../svg/icon_commit.svg'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StagePlanComponent
=
Vue
.
extend
({
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
...
...
@@ -14,40 +10,47 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
components
:
{
userAvatarImage
,
},
data
()
{
return
{
iconCommit
};
computed
:
{
iconCommit
()
{
return
iconCommit
;
},
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="commit in items" class="stage-event-item">
<div class="item-details item-conmmit-component">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="commit.author.avatarUrl"/>
<h5 class="item-title commit-title">
<a :href="commit.commitUrl">
{{ commit.title }}
</a>
</h5>
<span>
{{ s__('FirstPushedBy|First') }}
<span class="commit-icon">
${
iconCommit
}
</span>
<a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
{{ s__('FirstPushedBy|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>
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
`
,
});
<ul
class=
"stage-event-list"
>
<li
v-for=
"(commit, i) in items"
:key=
"i"
class=
"stage-event-item"
>
<div
class=
"item-details item-conmmit-component"
>
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image
:img-src=
"commit.author.avatarUrl"
/>
<h5
class=
"item-title commit-title"
>
<a
:href=
"commit.commitUrl"
>
{{
commit
.
title
}}
</a>
</h5>
<span>
{{
s__
(
'FirstPushedBy|First'
)
}}
<span
class=
"commit-icon"
v-html=
"iconCommit"
></span>
<a
:href=
"commit.commitUrl"
class=
"commit-hash-link commit-sha"
>
{{
commit
.
shortSha
}}
</a>
{{
s__
(
'FirstPushedBy|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"
/>
</div>
</li>
</ul>
</div>
</
template
>
app/assets/javascripts/cycle_analytics/components/stage_production_component.js
deleted
100644 → 0
View file @
ba4f7413
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageProductionComponent
=
Vue
.
extend
({
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="issue in items" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-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>
{{ s__('OpenedNDaysAgo|Opened') }}
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
{{ s__('ByAuthor|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
→
app/assets/javascripts/cycle_analytics/components/stage_review_component.
vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
<
script
>
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageReviewComponent
=
Vue
.
extend
({
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="mergeRequest in items" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-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>
{{ s__('OpenedNDaysAgo|Opened') }}
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
<ul
class=
"stage-event-list"
>
<li
v-for=
"(mergeRequest, i) in items"
:key=
"i"
class=
"stage-event-item"
>
<div
class=
"item-details"
>
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image
:img-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>
{{
s__
(
'OpenedNDaysAgo|Opened'
)
}}
<a
:href=
"mergeRequest.url"
class=
"issue-date"
>
{{
mergeRequest
.
createdAt
}}
</a>
</span>
<span>
{{
s__
(
'ByAuthor|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>
<span>
{{ s__('ByAuthor|by') }}
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
</
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 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>
`
,
});
</
template
>
</div>
<div
class=
"item-time"
>
<total-time
:time=
"mergeRequest.totalTime"
/>
</div>
</li>
</ul>
</div>
</template>
app/assets/javascripts/cycle_analytics/components/stage_staging_component.
js
→
app/assets/javascripts/cycle_analytics/components/stage_staging_component.
vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
import
iconBranch
from
'../svg/icon_branch.svg'
;
<
script
>
import
userAvatarImage
from
'../../vue_shared/components/user_avatar/user_avatar_image.vue'
;
import
iconBranch
from
'../svg/icon_branch.svg'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageStagingComponent
=
Vue
.
extend
({
props
:
{
items
:
Array
,
stage
:
Object
,
},
data
()
{
return
{
iconBranch
};
},
components
:
{
userAvatarImage
,
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="build in items" class="stage-event-item item-build-component">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="build.author.avatarUrl"/>
<h5 class="item-title">
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
<span class="icon-branch">
${
iconBranch
}
</span>
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
</h5>
<span>
<a :href="build.url" class="build-date">{{ build.date }}</a>
{{ s__('ByAuthor|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>
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
},
components
:
{
userAvatarImage
,
},
computed
:
{
iconBranch
()
{
return
iconBranch
;
},
},
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
`
,
});
<ul
class=
"stage-event-list"
>
<li
v-for=
"(build, i) in items"
class=
"stage-event-item item-build-component"
:key=
"i"
>
<div
class=
"item-details"
>
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image
:img-src=
"build.author.avatarUrl"
/>
<h5
class=
"item-title"
>
<a
:href=
"build.url"
class=
"pipeline-id"
>
#
{{
build
.
id
}}
</a>
<i
class=
"fa fa-code-fork"
></i>
<a
:href=
"build.branch.url"
class=
"ref-name"
>
{{
build
.
branch
.
name
}}
</a>
<span
class=
"icon-branch"
v-html=
"iconBranch"
></span>
<a
:href=
"build.commitUrl"
class=
"commit-sha"
>
{{
build
.
shortSha
}}
</a>
</h5>
<span>
<a
:href=
"build.url"
class=
"build-date"
>
{{
build
.
date
}}
</a>
{{
s__
(
'ByAuthor|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"
/>
</div>
</li>
</ul>
</div>
</
template
>
app/assets/javascripts/cycle_analytics/components/stage_test_component.
js
→
app/assets/javascripts/cycle_analytics/components/stage_test_component.
vue
View file @
b524b9eb
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
<
script
>
import
iconBuildStatus
from
'../svg/icon_build_status.svg'
;
import
iconBranch
from
'../svg/icon_branch.svg'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
StageTestComponent
=
Vue
.
extend
({
export
default
{
props
:
{
items
:
Array
,
stage
:
Object
,
},
data
()
{
return
{
iconBuildStatus
,
iconBranch
};
computed
:
{
iconBuildStatus
()
{
return
iconBuildStatus
;
},
iconBranch
()
{
return
iconBranch
;
},
},
template
:
`
<div>
<div class="events-description">
{{ stage.description }}
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<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">
${
iconBuildStatus
}
</span>
<a :href="build.url" class="item-build-name">{{ build.name }}</a>
·
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
<span class="icon-branch">
${
iconBranch
}
</span>
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</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>
};
</
script
>
<
template
>
<div>
<div
class=
"events-description"
>
{{
stage
.
description
}}
<limit-warning
:count=
"items.length"
/>
</div>
`
,
});
<ul
class=
"stage-event-list"
>
<li
v-for=
"(build, i) in items"
:key=
"i"
class=
"stage-event-item item-build-component"
>
<div
class=
"item-details"
>
<h5
class=
"item-title"
>
<span
class=
"icon-build-status"
v-html=
"iconBuildStatus"
></span>
<a
:href=
"build.url"
class=
"item-build-name"
>
{{
build
.
name
}}
</a>
·
<a
:href=
"build.url"
class=
"pipeline-id"
>
#
{{
build
.
id
}}
</a>
<i
class=
"fa fa-code-fork"
></i>
<a
:href=
"build.branch.url"
class=
"ref-name"
>
{{
build
.
branch
.
name
}}
</a>
<span
class=
"icon-branch"
v-html=
"iconBranch"
></span>
<a
:href=
"build.commitUrl"
class=
"commit-sha"
>
{{
build
.
shortSha
}}
</a>
</h5>
<span>
<a
:href=
"build.url"
class=
"issue-date"
>
{{
build
.
date
}}
</a>
</span>
</div>
<div
class=
"item-time"
>
<total-time
:time=
"build.totalTime"
/>
</div>
</li>
</ul>
</div>
</
template
>
app/assets/javascripts/cycle_analytics/components/total_time_component.js
deleted
100644 → 0
View file @
ba4f7413
/* eslint-disable no-param-reassign */
import
Vue
from
'vue'
;
const
global
=
window
.
gl
||
(
window
.
gl
=
{});
global
.
cycleAnalytics
=
global
.
cycleAnalytics
||
{};
global
.
cycleAnalytics
.
TotalTimeComponent
=
Vue
.
extend
({
props
:
{
time
:
Object
,
},
template
:
`
<span class="total-time">
<template v-if="Object.keys(time).length">
<template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
<template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template>
<template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template>
<template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
</template>
<template v-else>
--
</template>
</span>
`
,
});
app/assets/javascripts/cycle_analytics/components/total_time_component.vue
0 → 100644
View file @
b524b9eb
<
script
>
export
default
{
props
:
{
time
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
},
computed
:
{
hasData
()
{
return
Object
.
keys
(
this
.
time
).
length
;
},
},
};
</
script
>
<
template
>
<span
class=
"total-time"
>
<template
v-if=
"hasData"
>
<template
v-if=
"time.days"
>
{{
time
.
days
}}
<span>
{{
n__
(
'day'
,
'days'
,
time
.
days
)
}}
</span></
template
>
<
template
v-if=
"time.hours"
>
{{
time
.
hours
}}
<span>
{{
n__
(
'Time|hr'
,
'Time|hrs'
,
time
.
hours
)
}}
</span></
template
>
<
template
v-if=
"time.mins && !time.days"
>
{{
time
.
mins
}}
<span>
{{
n__
(
'Time|min'
,
'Time|mins'
,
time
.
mins
)
}}
</span></
template
>
<
template
v-if=
"time.seconds && hasDa === 1 || time.seconds === 0"
>
{{
time
.
seconds
}}
<span>
{{
s__
(
'Time|s'
)
}}
</span></
template
>
</template>
<
template
v-else
>
--
</
template
>
</span>
</template>
app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
View file @
b524b9eb
...
...
@@ -3,15 +3,14 @@
import
Vue
from
'vue'
;
import
Cookies
from
'js-cookie'
;
import
Translate
from
'../vue_shared/translate'
;
import
LimitWarningComponent
from
'./components/limit_warning_component'
;
import
'./components/stage_code_component'
;
import
'./components/stage_issue_component'
;
import
'./components/stage_plan_component'
;
import
'./components/stage_production_component'
;
import
'./components/stage_review_component'
;
import
'./components/stage_staging_component'
;
import
'./components/stage_test_component'
;
import
'./components/total_time_component'
;
import
limitWarningComponent
from
'./components/limit_warning_component.vue'
;
import
stageCodeComponent
from
'./components/stage_code_component.vue'
;
import
stagePlanComponent
from
'./components/stage_plan_component.vue'
;
import
stageComponent
from
'./components/stage_component.vue'
;
import
stageReviewComponent
from
'./components/stage_review_component.vue'
;
import
stageStagingComponent
from
'./components/stage_staging_component.vue'
;
import
stageTestComponent
from
'./components/stage_test_component.vue'
;
import
totalTime
from
'./components/total_time_component.vue'
;
import
CycleAnalyticsService
from
'./cycle_analytics_service'
;
import
CycleAnalyticsStore
from
'./cycle_analytics_store'
;
...
...
@@ -47,13 +46,13 @@ $(() => {
},
},
components
:
{
'stage-issue-component'
:
gl
.
cycleAnalytics
.
StageIssu
eComponent
,
'stage-plan-component'
:
gl
.
cycleAnalytics
.
S
tagePlanComponent
,
'stage-code-component'
:
gl
.
cycleAnalytics
.
S
tageCodeComponent
,
'stage-test-component'
:
gl
.
cycleAnalytics
.
S
tageTestComponent
,
'stage-review-component'
:
gl
.
cycleAnalytics
.
S
tageReviewComponent
,
'stage-staging-component'
:
gl
.
cycleAnalytics
.
S
tageStagingComponent
,
'stage-production-component'
:
gl
.
cycleAnalytics
.
StageProduction
Component
,
'stage-issue-component'
:
stag
eComponent
,
'stage-plan-component'
:
s
tagePlanComponent
,
'stage-code-component'
:
s
tageCodeComponent
,
'stage-test-component'
:
s
tageTestComponent
,
'stage-review-component'
:
s
tageReviewComponent
,
'stage-staging-component'
:
s
tageStagingComponent
,
'stage-production-component'
:
stage
Component
,
},
created
()
{
this
.
fetchCycleAnalyticsData
();
...
...
@@ -136,6 +135,6 @@ $(() => {
});
// Register global components
Vue
.
component
(
'limit-warning'
,
L
imitWarningComponent
);
Vue
.
component
(
'total-time'
,
gl
.
cycleAnalytics
.
TotalTimeComponent
);
Vue
.
component
(
'limit-warning'
,
l
imitWarningComponent
);
Vue
.
component
(
'total-time'
,
totalTime
);
});
spec/javascripts/cycle_analytics/limit_warning_component_spec.js
View file @
b524b9eb
import
Vue
from
'vue'
;
import
Translate
from
'~/vue_shared/translate'
;
import
limitWarningComp
from
'~/cycle_analytics/components/limit_warning_component'
;
import
limitWarningComp
from
'~/cycle_analytics/components/limit_warning_component
.vue
'
;
Vue
.
use
(
Translate
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment