gitlab-org--gitlab-foss/app/views/projects/cycle_analytics/show.html.haml

- @no_container = true
- page_title "Cycle Analytics"
= render "projects/pipelines/head"

#cycle-analytics{class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) }}

  .bordered-box.landing.content-block{"v-if" => "!isHelpDismissed"}
    = icon('times', class: 'dismiss-icon', "@click" => "dismissLanding()")
    .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 analytics.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

    .bordered-box
      %ul.content-list
        %li{"v-for" => "item in analytics.stats"}
          .container-fluid
            .row
              .col-xs-8.title-col
                %p.title
                  {{item.title}}
                %p.text
                  {{item.description}}
              .col-xs-4.value-col
                %span
                  {{item.value}}