diff options
8 files changed, 89 insertions, 70 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 index d4c488dc3a8..5f8ff683860 100644 --- a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 @@ -16,9 +16,19 @@ */ global.cycleAnalytics.ItemBuildComponent = Vue.extend({ - template: '#item-build-component', props: { build: Object, - } + }, + template: ` + <div> + <p> + <h5> + <a href="build.url"> + {{ build.title }} + </a> + </h5> + </p> + </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 index 488f6f901ff..0fd0767a3d0 100644 --- 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 @@ -15,9 +15,19 @@ */ global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({ - template: '#item-merge-request-component', props: { mergeRequest: Object, - } + }, + template: ` + <div> + <p> + <h5> + <a href="mergeRequest.url"> + {{ mergeRequest.title }} + </a> + </h5> + </p> + </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 bdc9617f463..45bd7c7b9e7 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,13 +3,24 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageCodeComponent = Vue.extend({ - template: '#stage-code-component', components: { 'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent, }, props: { items: Array, - } + }, + template: ` + <div> + <div class="events-description"> + Time spent coding + </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> + </ul> + </div> + `, }); })(window.gl || (window.gl = {})); 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 fea2e1edacb..0a6650d5c10 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,13 +3,24 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageProductionComponent = Vue.extend({ - template: '#stage-production-component', components: { 'item-issue-component': gl.cycleAnalytics.ItemIssueComponent, }, props: { items: Array, - } + }, + template: ` + <div> + <div class="events-description"> + The total time taken from idea to production + </div> + <ul> + <li v-for="issue in items"> + <item-issue-component :issue="issue"></item-issue-component> + </li> + </ul> + </div> + ` }); })(window.gl || (window.gl = {})); 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 292f8ada3f4..b52ecbb21f3 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,13 +3,24 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageReviewComponent = Vue.extend({ - template: '#stage-review-component', components: { 'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent, }, props: { items: Array, - } + }, + template: ` + <div> + <div class="events-description"> + The time taken to review the code + </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> + </ul> + </div> + `, }); })(window.gl || (window.gl = {})); 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 2a4cf97386a..c07f556ed84 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 @@ -9,7 +9,19 @@ }, props: { items: Array, - } + }, + template: ` + <div> + <div class="events-description"> + The time taken in staging + </div> + <ul> + <li v-for="build in items"> + <item-build-component :build="build"></item-build-component> + </li> + </ul> + </div> + `, }); })(window.gl || (window.gl = {})); 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 7e16ae67f66..e3057c6a507 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,13 +3,24 @@ global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics.StageTestComponent = Vue.extend({ - template: '#stage-test-component', components: { 'item-build-component': gl.cycleAnalytics.ItemBuildComponent, }, props: { items: Array, - } + }, + template: ` + <div> + <div class="events-description"> + The time taken to build and test the application + </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> + </ul> + </div> + `, }); })(window.gl || (window.gl = {})); diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index ea3ae13b6d8..a4255aceb2a 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -93,60 +93,3 @@ %p No results %template{ "v-if" => "state.items.length && !isLoadingStage && !isEmptyStage" } %component{ ":is" => "currentStage.component", ":items" => "state.items" } - -%script{ type: 'text/x-template', id: 'stage-code-component' } - %div - .events-description - Time spent coding - %ul - %li{ "v-for" => "mergeRequest in items" } - %item-merge-request-component{ ":merge-request" => "mergeRequest" } - -%script{ type: 'text/x-template', id: 'stage-test-component' } - %div - .events-description - The time taken to build and test the application - %ul - %li{ "v-for" => "build in items" } - %item-build-component{ ":build" => "build" } - - -%script{ type: 'text/x-template', id: 'stage-review-component' } - %div - .events-description - The time taken to review the code - %ul - %li{ "v-for" => "mergeRequest in items" } - %item-merge-request-component{ ":merge-request" => "mergeRequest" } - -%script{ type: 'text/x-template', id: 'stage-staging-component' } - %div - .events-description - The time taken in staging - %ul - %li{ "v-for" => "build in items" } - %item-build-component{ ":build" => "build" } - -%script{ type: 'text/x-template', id: 'stage-production-component' } - %div - .events-description - The total time taken from idea to production - %ul - %li{ "v-for" => "issue in items" } - %item-issue-component{ ":issue" => "issue" } - -%script{ type: 'text/x-template', id: 'item-merge-request-component' } - %div - %p - %h5 - merge request - - %a{:href => "mergeRequest.url"} - {{ mergeRequest.title }} - -%script{ type: 'text/x-template', id: 'item-build-component' } - %div - %p - %h5 - build - - %a{:href => "build.url"} - {{ build.title }} |