Add overview view for Cycle Analytics

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;
+    }
+  }
+}

app/views/projects/cycle_analytics/_empty_cycle_analytics.html.haml

+%p There is nothing happened
+= icon("times", class: "dismiss-icon", "@click" => "dismissEmptyDialog()")

app/views/projects/cycle_analytics/_overview.html.haml

+.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')

app/views/projects/cycle_analytics/show.html.haml

 - @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()")
-
-  .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.
+- 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.
 
-        = 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" }