diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index ba85e13fc5e..3db005d717e 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -425,3 +425,25 @@ } } } + +.cycle-analytics-overview { + padding-top: 100px; + + .overview-details { + display: flex; + align-items: center; + } + + .overview-text { + } + + .overview-image { + text-align: right; + } + .overview-icon { + svg { + width: 365px; + height: 227px; + } + } +} diff --git a/app/views/projects/cycle_analytics/_empty_cycle_analytics.html.haml b/app/views/projects/cycle_analytics/_empty_cycle_analytics.html.haml new file mode 100644 index 00000000000..2a0352a3e19 --- /dev/null +++ b/app/views/projects/cycle_analytics/_empty_cycle_analytics.html.haml @@ -0,0 +1,2 @@ +%p There is nothing happened += icon("times", class: "dismiss-icon", "@click" => "dismissEmptyDialog()") diff --git a/app/views/projects/cycle_analytics/_overview.html.haml b/app/views/projects/cycle_analytics/_overview.html.haml new file mode 100644 index 00000000000..c8f0b547f80 --- /dev/null +++ b/app/views/projects/cycle_analytics/_overview.html.haml @@ -0,0 +1,15 @@ +.cycle-analytics-overview + .container + .row + .col-md-10.col-md-offset-1 + .row.overview-details + .col-md-6.overview-text + %h4 Introducing Cycle Analytics + %p + Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. + To set up CA, you must first define a production environment by setting up your CI and then deploy to production. + %p + %a.btn{ href: help_page_path('user/project/cycle_analytics'), target: "_blank" } Read more + .col-md-6.overview-image + %span.overview-icon + = custom_icon ('icon_cycle_analytics_overview') diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 521ae085f61..b9676794f44 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -1,87 +1,88 @@ - @no_container = true +- @cycle_analytics_not_set_up = false - page_title "Cycle Analytics" -- content_for :page_specific_javascripts do - = page_specific_javascript_tag("cycle_analytics/cycle_analytics_bundle.js") - = render "projects/pipelines/head" -#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } } - .empty-dialog-message{ "v-if" => "!isEmptyDialogDismissed" } - %p There is nothing happened - = icon("times", class: "dismiss-icon", "@click" => "dismissEmptyDialog()") +- if @cycle_analytics_not_set_up + = render partial: "overview" +- else + - content_for :page_specific_javascripts do + = page_specific_javascript_tag("cycle_analytics/cycle_analytics_bundle.js") + #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } } + .empty-dialog-message{ "v-if" => "!isEmptyDialogDismissed" } + = render partial: "empty_cycle_analytics" + .bordered-box.landing.content-block{"v-if" => "!isOverviewDialogDismissed"} + = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()") + .row + .col-sm-3.col-xs-12.svg-container + = custom_icon('icon_cycle_analytics_splash') + .col-sm-8.col-xs-12.inner-content + %h4 + Introducing Cycle Analytics + %p + Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. - .bordered-box.landing.content-block{"v-if" => "!isOverviewDialogDismissed"} - = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()") - .row - .col-sm-3.col-xs-12.svg-container - = custom_icon('icon_cycle_analytics_splash') - .col-sm-8.col-xs-12.inner-content - %h4 - Introducing Cycle Analytics - %p - Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. - - = link_to "Read more", help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn' - = icon("spinner spin", "v-show" => "isLoading") - .wrapper{"v-show" => "!isLoading && !hasError"} - .panel.panel-default - .panel-heading - Pipeline Health - .content-block - .container-fluid - .row - .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 - .dropdown.inline.js-ca-dropdown - %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"} - %span.dropdown-label Last 30 days - %i.fa.fa-chevron-down - %ul.dropdown-menu.dropdown-menu-align-right - %li - %a{ "href" => "#", "data-value" => "30" } - Last 30 days - %li - %a{ "href" => "#", "data-value" => "90" } - Last 90 days - .panel.panel-default.stage-panel - .panel-heading - %nav.col-headers - %ul - %li.stage-header - %span.stage-name - Stage - %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" } - %li.median-header - %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.event-header - %span.stage-name - {{ currentStage ? currentStage.legend : 'Related Issues' }} - %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" } - %li.total-time-header - %span.stage-name - Total Time - %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" } - .stage-panel-body - %nav.stage-nav - %ul - %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" } - .stage-name - {{ stage.title }} - .stage-median - %template{ "v-if" => "stage.value" } - {{ stage.value }} - %template{ "v-else" => true } - %span.stage-empty - No enough data - .section.stage-events - %template{ "v-if" => "isLoadingStage" } - = icon("spinner spin", "v-show" => "isLoadingStage") - %template{ "v-if" => "isEmptyStage && !isLoadingStage" } - = render partial: "empty_stage" - %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" } - %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" } + = link_to "Read more", help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn' + = icon("spinner spin", "v-show" => "isLoading") + .wrapper{"v-show" => "!isLoading && !hasError"} + .panel.panel-default + .panel-heading + Pipeline Health + .content-block + .container-fluid + .row + .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 + .dropdown.inline.js-ca-dropdown + %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"} + %span.dropdown-label Last 30 days + %i.fa.fa-chevron-down + %ul.dropdown-menu.dropdown-menu-align-right + %li + %a{ "href" => "#", "data-value" => "30" } + Last 30 days + %li + %a{ "href" => "#", "data-value" => "90" } + Last 90 days + .panel.panel-default.stage-panel + .panel-heading + %nav.col-headers + %ul + %li.stage-header + %span.stage-name + Stage + %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" } + %li.median-header + %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.event-header + %span.stage-name + {{ currentStage ? currentStage.legend : 'Related Issues' }} + %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" } + %li.total-time-header + %span.stage-name + Total Time + %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" } + .stage-panel-body + %nav.stage-nav + %ul + %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" } + .stage-name + {{ stage.title }} + .stage-median + %template{ "v-if" => "stage.value" } + {{ stage.value }} + %template{ "v-else" => true } + %span.stage-empty + No enough data + .section.stage-events + %template{ "v-if" => "isLoadingStage" } + = icon("spinner spin", "v-show" => "isLoadingStage") + %template{ "v-if" => "isEmptyStage && !isLoadingStage" } + = render partial: "empty_stage" + %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" } + %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" } diff --git a/app/views/shared/icons/_icon_cycle_analytics_overview.svg b/app/views/shared/icons/_icon_cycle_analytics_overview.svg new file mode 100644 index 00000000000..eea9c975c35 --- /dev/null +++ b/app/views/shared/icons/_icon_cycle_analytics_overview.svg @@ -0,0 +1,81 @@ + + + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +