BigW Consortium Gitlab

show.html.haml 4.5 KB
Newer Older
1 2
- @no_container = true
- page_title "Cycle Analytics"
3
- content_for :page_specific_javascripts do
4
  = page_specific_javascript_bundle_tag('cycle_analytics')
5

6
= render "projects/pipelines/head"
7

8
#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
9
  - if @cycle_analytics_no_data
10
    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
11 12 13 14 15 16 17 18 19
      = 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.
20

21
          = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
22
  = icon("spinner spin", "v-show" => "isLoading")
23
  .wrapper{ "v-show" => "!isLoading && !hasError" }
24 25 26 27 28 29
    .panel.panel-default
      .panel-heading
        Pipeline Health
      .content-block
        .container-fluid
          .row
Alfredo Sumaran committed
30
            .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" }
31 32
              %h3.header {{ item.value }}
              %p.text {{ item.title }}
33 34
            .col-sm-3.col-xs-12.column
              .dropdown.inline.js-ca-dropdown
35
                %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
36 37 38 39 40 41 42 43 44
                  %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
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
    .stage-panel-container
      .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-nav-item-cell.stage-name
                  {{ stage.title }}
                .stage-nav-item-cell.stage-median
                  %template{ "v-if" => "stage.isUserAllowed" }
                    %span{ "v-if" => "stage.value" }
                      {{ stage.value }}
                    %span.stage-empty{ "v-else" => true }
                      Not enough data
                  %template{ "v-else" => true }
                    %span.not-available
                      Not available
          .section.stage-events
            %template{ "v-if" => "isLoadingStage" }
              = icon("spinner spin")
            %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
              = render partial: "no_access"
            %template{ "v-else" => true }
              %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" }