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) } }
+- 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" }
-    %p There is nothing happened
-    = icon("times", class: "dismiss-icon", "@click" => "dismissEmptyDialog()")
-
+      = render partial: "empty_cycle_analytics"
     .bordered-box.landing.content-block{"v-if" => "!isOverviewDialogDismissed"}
       = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
       .row