diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 index e5a30109ca6..788bd14028c 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 @@ -28,7 +28,7 @@ startDate, } = options; - return $.get(`http://localhost:8000/${stage.name.toLowerCase()}.json`, { + return $.get(`http://localhost:8000/${stage.title.toLowerCase()}.json`, { cycle_analytics: { start_date: options.startDate } 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 50e079c034a..bef741c879a 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 @@ -7,57 +7,7 @@ stats: '', analytics: '', items: [], - stages:[ - { - name:'Issue', - active: false, - component: 'stage-issue-component', - legendTitle: 'Related Issues', - shortDescription: 'Time before an issue get scheduled', - }, - { - name:'Plan', - active: false, - component: 'stage-plan-component', - legendTitle: 'Related Commits', - shortDescription: 'Time before an issue starts implementation', - }, - { - name:'Code', - active: false, - component: 'stage-code-component', - legendTitle: 'Related Merge Requests', - shortDescription: 'Time spent coding', - }, - { - name:'Test', - active: false, - component: 'stage-test-component', - legendTitle: 'Relative Builds Trigger by Commits', - shortDescription: 'The time taken to build and test the application', - }, - { - name:'Review', - active: false, - component: 'stage-review-component', - legendTitle: 'Relative Merged Requests', - shortDescription: 'The time taken to review the code', - }, - { - name:'Staging', - active: false, - component: 'stage-staging-component', - legendTitle: 'Relative Deployed Builds', - shortDescription: 'The time taken in staging', - }, - { - name:'Production', - active: false, - component: 'stage-production-component', - legendTitle: 'Related Issues', - shortDescription: 'The total time taken from idea to production', - } - ], + stages:[], }, setCycleAnalyticsData(data) { this.state = Object.assign(this.state, this.decorateData(data)); @@ -65,18 +15,20 @@ decorateData(data) { let newData = {}; - newData.stats = data.stats || []; + newData.stages = data.stats || []; newData.summary = data.summary || []; newData.summary.forEach((item) => { item.value = item.value || '-'; }); - newData.stats.forEach((item) => { + newData.stages.forEach((item) => { item.value = item.value || '- - -'; + item.active = false; + item.component = `stage-${item.title.toLowerCase()}-component`; }); - newData.analytics = data; + newData.analytics = data; return newData; }, diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 04bca466eed..a862deb4251 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -22,7 +22,7 @@ } .stage-header { - width: 16%; + width: 28%; padding-left: $gl-padding; } @@ -30,10 +30,6 @@ width: 12%; } - .delta-header { - width: 12%; - } - .event-header { width: 45%; padding-left: $gl-padding; @@ -239,21 +235,12 @@ float: left; &.stage-name { - width: 40%; + width: 70%; } &.stage-median { width: 30%; } - - &.stage-delta { - width: 30%; - - .stage-direction { - float: right; - padding-right: $gl-padding; - } - } } .stage-name { diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 195b10e0779..1984499b8d5 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -31,7 +31,7 @@ .content-block .container-fluid .row - .col-sm-3.col-xs-12.column{"v-for" => "item in state.analytics.summary"} + .col-sm-3.col-xs-12.column{"v-for" => "item in state.summary"} %h3.header {{item.value}} %p.text {{item.title}} .col-sm-3.col-xs-12.column @@ -58,10 +58,6 @@ %span.stage-name Median %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" } - %li.delta-header - %span.stage-name - = render "shared/icons/delta.svg" - %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The difference between the previous and last measure, expressed as positive or negative values. E.g., if the previous value was 5 and the new value is 7, the delta is +2.", "aria-hidden" => "true" } %li.event-header %span.stage-name {{ currentStage ? currentStage.legendTitle : 'Related Issues' }} @@ -79,13 +75,9 @@ ":on-stage-click" => "selectStage" } %li.stage-nav-item{ ":class" => "classObject", "@click" => "onClick(stage)" } .stage-name - {{stage.name}} + {{ stage.title }} .stage-median - 20 hrs 21 mins - .stage-delta - + 20 days - %span.stage-direction - = render "shared/icons/down_arrow.svg" + {{ stage.value }} .section.stage-events %template{ "v-if" => "isLoadingStage" } = icon("spinner spin", "v-show" => "isLoadingStage") diff --git a/app/views/shared/icons/_down_arrow.svg b/app/views/shared/icons/_down_arrow.svg deleted file mode 100644 index 123116f4ca9..00000000000 --- a/app/views/shared/icons/_down_arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file