Remove graphql_pipeline_analytics ff

This removes the graphql_pipeline_analytics feature
flag, leaving only the GraphQL implementation for
the CI/CD analytics page

app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue

-<script>
-import { GlTabs, GlTab } from '@gitlab/ui';
-import PipelineCharts from './pipeline_charts.vue';
-
-export default {
-  components: {
-    GlTabs,
-    GlTab,
-    PipelineCharts,
-    DeploymentFrequencyCharts: () =>
-      import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
-  },
-  inject: {
-    shouldRenderDeploymentFrequencyCharts: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  props: {
-    counts: {
-      type: Object,
-      required: true,
-    },
-    timesChartData: {
-      type: Object,
-      required: true,
-    },
-    lastWeekChartData: {
-      type: Object,
-      required: true,
-    },
-    lastMonthChartData: {
-      type: Object,
-      required: true,
-    },
-    lastYearChartData: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      // this loading flag gives the echarts library just enough time
-      // to ensure all DOM nodes have been mounted.
-      //
-      // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1131
-      loading: true,
-    };
-  },
-  async mounted() {
-    await this.$nextTick();
-    this.loading = false;
-  },
-};
-</script>
-<template>
-  <gl-tabs v-if="shouldRenderDeploymentFrequencyCharts">
-    <gl-tab :title="__('Pipelines')">
-      <pipeline-charts
-        :counts="counts"
-        :last-week="lastWeekChartData"
-        :last-month="lastMonthChartData"
-        :last-year="lastYearChartData"
-        :times-chart="timesChartData"
-        :loading="loading"
-      />
-    </gl-tab>
-    <gl-tab :title="__('Deployments')">
-      <deployment-frequency-charts />
-    </gl-tab>
-  </gl-tabs>
-  <pipeline-charts
-    v-else
-    :counts="counts"
-    :last-week="lastWeekChartData"
-    :last-month="lastMonthChartData"
-    :last-year="lastYearChartData"
-    :times-chart="timesChartData"
-  />
-</template>

app/assets/javascripts/projects/pipelines/charts/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import ProjectPipelinesChartsLegacy from './components/app_legacy.vue';
 import ProjectPipelinesCharts from './components/app.vue';
 
 Vue.use(VueApollo);
@@ -12,107 +11,24 @@ const apolloProvider = new VueApollo({
 });
 
 const mountPipelineChartsApp = (el) => {
-  // Not all of the values will be defined since some them will be
-  // empty depending on the value of the graphql_pipeline_analytics
-  // feature flag, once the rollout of the feature flag is completed
-  // the undefined values will be deleted
-  const {
-    countsFailed,
-    countsSuccess,
-    countsTotal,
-    countsTotalDuration,
-    successRatio,
-    timesChartLabels,
-    timesChartValues,
-    lastWeekChartLabels,
-    lastWeekChartTotals,
-    lastWeekChartSuccess,
-    lastMonthChartLabels,
-    lastMonthChartTotals,
-    lastMonthChartSuccess,
-    lastYearChartLabels,
-    lastYearChartTotals,
-    lastYearChartSuccess,
-    projectPath,
-  } = el.dataset;
+  const { projectPath } = el.dataset;
 
   const shouldRenderDeploymentFrequencyCharts = parseBoolean(
     el.dataset.shouldRenderDeploymentFrequencyCharts,
   );
 
-  const parseAreaChartData = (labels, totals, success) => {
-    let parsedData = {};
-
-    try {
-      parsedData = {
-        labels: JSON.parse(labels),
-        totals: JSON.parse(totals),
-        success: JSON.parse(success),
-      };
-    } catch {
-      parsedData = {};
-    }
-
-    return parsedData;
-  };
-
-  if (gon?.features?.graphqlPipelineAnalytics) {
-    return new Vue({
-      el,
-      name: 'ProjectPipelinesChartsApp',
-      components: {
-        ProjectPipelinesCharts,
-      },
-      apolloProvider,
-      provide: {
-        projectPath,
-        shouldRenderDeploymentFrequencyCharts,
-      },
-      render: (createElement) => createElement(ProjectPipelinesCharts, {}),
-    });
-  }
-
   return new Vue({
     el,
-    name: 'ProjectPipelinesChartsAppLegacy',
+    name: 'ProjectPipelinesChartsApp',
     components: {
-      ProjectPipelinesChartsLegacy,
+      ProjectPipelinesCharts,
     },
+    apolloProvider,
     provide: {
       projectPath,
       shouldRenderDeploymentFrequencyCharts,
     },
-    render: (createElement) =>
-      createElement(ProjectPipelinesChartsLegacy, {
-        props: {
-          counts: {
-            failed: countsFailed,
-            success: countsSuccess,
-            total: countsTotal,
-            successRatio,
-            totalDuration: countsTotalDuration,
-          },
-          timesChartData: {
-            labels: JSON.parse(timesChartLabels),
-            values: JSON.parse(timesChartValues),
-          },
-          lastWeekChartData: parseAreaChartData(
-            lastWeekChartLabels,
-            lastWeekChartTotals,
-            lastWeekChartSuccess,
-          ),
-          lastMonthChartData: parseAreaChartData(
-            lastMonthChartLabels,
-            lastMonthChartTotals,
-            lastMonthChartSuccess,
-          ),
-          lastYearChartData: parseAreaChartData(
-            lastYearChartLabels,
-            lastYearChartTotals,
-            lastYearChartSuccess,
-          ),
-        },
-      }),
+    render: (createElement) => createElement(ProjectPipelinesCharts, {}),
   });
 };
 

app/controllers/projects/pipelines_controller.rb

@@ -17,7 +17,6 @@ class Projects::PipelinesController < Projects::ApplicationController
     push_frontend_feature_flag(:new_pipeline_form, project, default_enabled: true)
     push_frontend_feature_flag(:graphql_pipeline_header, project, type: :development, default_enabled: false)
     push_frontend_feature_flag(:graphql_pipeline_details, project, type: :development, default_enabled: false)
-    push_frontend_feature_flag(:graphql_pipeline_analytics, project, type: :development)
     push_frontend_feature_flag(:new_pipeline_form_prefilled_vars, project, type: :development, default_enabled: true)
   end
   before_action :ensure_pipeline, only: [:show]
@@ -189,23 +188,6 @@ class Projects::PipelinesController < Projects::ApplicationController
     end
   end
 
-  def charts
-    @charts = {}
-    @counts = {}
-
-    return if Feature.enabled?(:graphql_pipeline_analytics)
-
-    @charts[:week] = Gitlab::Ci::Charts::WeekChart.new(project)
-    @charts[:month] = Gitlab::Ci::Charts::MonthChart.new(project)
-    @charts[:year] = Gitlab::Ci::Charts::YearChart.new(project)
-    @charts[:pipeline_times] = Gitlab::Ci::Charts::PipelineTime.new(project)
-
-    @counts[:total] = @project.all_pipelines.count(:all)
-    @counts[:success] = @project.all_pipelines.success.count(:all)
-    @counts[:failed] = @project.all_pipelines.failed.count(:all)
-    @counts[:total_duration] = @project.all_pipelines.total_duration
-  end
-
   def test_report
     respond_to do |format|
       format.html do

app/views/projects/pipelines/charts.html.haml

 - page_title _('CI / CD Analytics')
 
-- if Feature.enabled?(:graphql_pipeline_analytics)
-  #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
-    should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }
-- else
-  #js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts),
-    times_chart: { labels: @charts[:pipeline_times].labels, values: @charts[:pipeline_times].pipeline_times },
-    last_week_chart: { labels: @charts[:week].labels, totals: @charts[:week].total, success: @charts[:week].success },
-    last_month_chart: { labels: @charts[:month].labels, totals: @charts[:month].total, success: @charts[:month].success },
-    last_year_chart: { labels: @charts[:year].labels, totals: @charts[:year].total, success: @charts[:year].success },
-    project_path: @project.full_path,
-    should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }
+#js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
+  should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }

changelogs/unreleased/jivanvl-remove-graphql-pipeline-analytics.yml

+---
+title: Update pipeline graphs on CI/CD Analytics page to use GraphQL endpoint
+merge_request: 51504
+author:
+type: changed

config/feature_flags/development/graphql_pipeline_analytics.yml

----
-name: graphql_pipeline_analytics
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48267
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/290153
-milestone: '13.7'
-type: development
-group: group::continuos integration
-default_enabled: false

spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js

-import { shallowMount } from '@vue/test-utils';
-import Component from '~/projects/pipelines/charts/components/app_legacy.vue';
-import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
-import {
-  counts,
-  timesChartData,
-  areaChartData as lastWeekChartData,
-  areaChartData as lastMonthChartData,
-  lastYearChartData,
-} from '../mock_data';
-
-describe('ProjectsPipelinesChartsApp', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallowMount(Component, {
-      propsData: {
-        counts,
-        timesChartData,
-        lastWeekChartData,
-        lastMonthChartData,
-        lastYearChartData,
-      },
-      provide: {
-        projectPath: 'test/project',
-        shouldRenderDeploymentFrequencyCharts: true,
-      },
-      stubs: {
-        DeploymentFrequencyCharts: true,
-      },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('pipelines charts', () => {
-    it('displays the pipeline charts', () => {
-      const chart = wrapper.find(PipelineCharts);
-
-      expect(chart.exists()).toBe(true);
-      expect(chart.props()).toMatchObject({
-        counts,
-        lastWeek: lastWeekChartData,
-        lastMonth: lastMonthChartData,
-        lastYear: lastYearChartData,
-        timesChart: timesChartData,
-      });
-    });
-  });
-});