Add latest changes from gitlab-org/gitlab@master

6 files changed, 3 insertions, 259 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index 14872c34afb..f822e2c0874 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -281,7 +281,6 @@ export default {
         :type="graphViewType"
         :show-links="showLinks"
         :tip-previously-dismissed="hoverTipPreviouslyDismissed"
-        :is-pipeline-complete="pipeline.complete"
         @dismissHoverTip="handleTipDismissal"
         @updateViewType="updateViewType"
         @updateShowLinksState="updateShowLinksState"
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
index a8c5d85f4ed..6d8c35f4482 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
@@ -1,33 +1,19 @@
 <script>
-import {
-  GlAlert,
-  GlButton,
-  GlButtonGroup,
-  GlLoadingIcon,
-  GlToggle,
-  GlModalDirective,
-} from '@gitlab/ui';
+import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
-import Tracking from '~/tracking';
-import PerformanceInsightsModal from '../performance_insights_modal.vue';
-import { performanceModalId } from '../../constants';
 import { STAGE_VIEW, LAYER_VIEW } from './constants';
 
 export default {
   name: 'GraphViewSelector',
-  performanceModalId,
+
   components: {
     GlAlert,
     GlButton,
     GlButtonGroup,
     GlLoadingIcon,
     GlToggle,
-    PerformanceInsightsModal,
-  },
-  directives: {
-    GlModal: GlModalDirective,
   },
-  mixins: [Tracking.mixin()],
+
   props: {
     showLinks: {
       type: Boolean,
@@ -41,10 +27,6 @@ export default {
       type: String,
       required: true,
     },
-    isPipelineComplete: {
-      type: Boolean,
-      required: true,
-    },
   },
   data() {
     return {
@@ -59,7 +41,6 @@ export default {
     hoverTipText: __('Tip: Hover over a job to see the jobs it depends on to run.'),
     linksLabelText: s__('GraphViewType|Show dependencies'),
     viewLabelText: __('Group jobs by'),
-    performanceBtnText: __('Performance insights'),
   },
   views: {
     [STAGE_VIEW]: {
@@ -150,9 +131,6 @@ export default {
         this.$emit('updateShowLinksState', val);
       });
     },
-    trackInsightsClick() {
-      this.track('click_insights_button', { label: 'performance_insights' });
-    },
   },
 };
 </script>
@@ -178,15 +156,6 @@ export default {
         </gl-button>
       </gl-button-group>
 
-      <gl-button
-        v-if="isPipelineComplete"
-        v-gl-modal="$options.performanceModalId"
-        data-testid="pipeline-insights-btn"
-        @click="trackInsightsClick"
-      >
-        {{ $options.i18n.performanceBtnText }}
-      </gl-button>
-
       <div v-if="showLinksToggle" class="gl-display-flex gl-align-items-center">
         <gl-toggle
           v-model="showLinksActive"
@@ -202,7 +171,5 @@ export default {
     <gl-alert v-if="showTip" class="gl-my-5" variant="tip" @dismiss="dismissTip">
       {{ $options.i18n.hoverTipText }}
     </gl-alert>
-
-    <performance-insights-modal />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/performance_insights_modal.vue b/app/assets/javascripts/pipelines/components/performance_insights_modal.vue
deleted file mode 100644
index fdbf0ca19bc..00000000000
--- a/app/assets/javascripts/pipelines/components/performance_insights_modal.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-import { GlAlert, GlCard, GlLink, GlLoadingIcon, GlModal } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
-import { humanizeTimeInterval } from '~/lib/utils/datetime_utility';
-import HelpPopover from '~/vue_shared/components/help_popover.vue';
-import getPerformanceInsightsQuery from '../graphql/queries/get_performance_insights.query.graphql';
-import { performanceModalId } from '../constants';
-import { calculateJobStats, calculateSlowestFiveJobs } from '../utils';
-
-export default {
-  name: 'PerformanceInsightsModal',
-  i18n: {
-    queuedCardHeader: s__('Pipeline|Longest queued job'),
-    queuedCardHelp: s__(
-      'Pipeline|The longest queued job is the job that spent the longest time in the pending state, waiting to be picked up by a Runner',
-    ),
-    executedCardHeader: s__('Pipeline|Last executed job'),
-    executedCardHelp: s__(
-      'Pipeline|The last executed job is the last job to start in the pipeline.',
-    ),
-    viewDependency: s__('Pipeline|View dependency'),
-    slowJobsTitle: s__('Pipeline|Five slowest jobs'),
-    feeback: __('Feedback issue'),
-    insightsLimit: s__('Pipeline|Only able to show first 100 results'),
-  },
-  modal: {
-    title: s__('Pipeline|Performance insights'),
-    actionCancel: {
-      text: __('Close'),
-      attributes: {
-        variant: 'confirm',
-      },
-    },
-  },
-  performanceModalId,
-  components: {
-    GlAlert,
-    GlCard,
-    GlLink,
-    GlModal,
-    GlLoadingIcon,
-    HelpPopover,
-  },
-  inject: {
-    pipelineIid: {
-      default: '',
-    },
-    pipelineProjectPath: {
-      default: '',
-    },
-  },
-  apollo: {
-    jobs: {
-      query: getPerformanceInsightsQuery,
-      variables() {
-        return {
-          fullPath: this.pipelineProjectPath,
-          iid: this.pipelineIid,
-        };
-      },
-      update(data) {
-        return data.project?.pipeline?.jobs;
-      },
-    },
-  },
-  data() {
-    return {
-      jobs: null,
-    };
-  },
-  computed: {
-    longestQueuedJob() {
-      return calculateJobStats(this.jobs, 'queuedDuration');
-    },
-    lastExecutedJob() {
-      return calculateJobStats(this.jobs, 'startedAt');
-    },
-    slowestFiveJobs() {
-      return calculateSlowestFiveJobs(this.jobs);
-    },
-    queuedDurationDisplay() {
-      return humanizeTimeInterval(this.longestQueuedJob.queuedDuration);
-    },
-    showLimitMessage() {
-      return this.jobs.pageInfo.hasNextPage;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-modal
-    :modal-id="$options.performanceModalId"
-    :title="$options.modal.title"
-    :action-cancel="$options.modal.actionCancel"
-  >
-    <gl-loading-icon v-if="$apollo.queries.jobs.loading" size="lg" />
-
-    <template v-else>
-      <gl-alert class="gl-mb-4" :dismissible="false">
-        <p v-if="showLimitMessage" data-testid="limit-alert-text">
-          {{ $options.i18n.insightsLimit }}
-        </p>
-        <gl-link href="https://gitlab.com/gitlab-org/gitlab/-/issues/365902" class="gl-mt-5">
-          {{ $options.i18n.feeback }}
-        </gl-link>
-      </gl-alert>
-
-      <div class="gl-display-flex gl-justify-content-space-between gl-mt-2 gl-mb-7">
-        <gl-card class="gl-w-half gl-mr-7 gl-text-center">
-          <template #header>
-            <span class="gl-font-weight-bold">{{ $options.i18n.queuedCardHeader }}</span>
-            <help-popover>
-              {{ $options.i18n.queuedCardHelp }}
-            </help-popover>
-          </template>
-          <div class="gl-display-flex gl-flex-direction-column">
-            <span
-              class="gl-font-weight-bold gl-font-size-h2 gl-mb-2"
-              data-testid="insights-queued-card-data"
-            >
-              {{ queuedDurationDisplay }}
-            </span>
-            <gl-link
-              :href="longestQueuedJob.detailedStatus.detailsPath"
-              data-testid="insights-queued-card-link"
-            >
-              {{ longestQueuedJob.name }}
-            </gl-link>
-          </div>
-        </gl-card>
-        <gl-card class="gl-w-half gl-text-center" data-testid="insights-executed-card">
-          <template #header>
-            <span class="gl-font-weight-bold">{{ $options.i18n.executedCardHeader }}</span>
-            <help-popover>
-              {{ $options.i18n.executedCardHelp }}
-            </help-popover>
-          </template>
-          <div class="gl-display-flex gl-flex-direction-column">
-            <span
-              class="gl-font-weight-bold gl-font-size-h2 gl-mb-2"
-              data-testid="insights-executed-card-data"
-            >
-              {{ lastExecutedJob.name }}
-            </span>
-            <gl-link
-              :href="lastExecutedJob.detailedStatus.detailsPath"
-              data-testid="insights-executed-card-link"
-            >
-              {{ $options.i18n.viewDependency }}
-            </gl-link>
-          </div>
-        </gl-card>
-      </div>
-
-      <div class="gl-mt-7">
-        <span class="gl-font-weight-bold">{{ $options.i18n.slowJobsTitle }}</span>
-        <div
-          v-for="job in slowestFiveJobs"
-          :key="job.name"
-          class="gl-display-flex gl-justify-content-space-between gl-mb-3 gl-mt-3 gl-p-4 gl-border-t-1 gl-border-t-solid gl-border-b-0 gl-border-b-solid gl-border-gray-100"
-        >
-          <span data-testid="insights-slow-job-stage">{{ job.stage.name }}</span>
-          <gl-link :href="job.detailedStatus.detailsPath" data-testid="insights-slow-job-link">{{
-            job.name
-          }}</gl-link>
-        </div>
-      </div>
-    </template>
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index 7b38f870cb6..0619ecaabbf 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -109,5 +109,3 @@ export const DEFAULT_FIELDS = [
     columnClass: 'gl-w-20p',
   },
 ];
-
-export const performanceModalId = 'performanceInsightsModal';
diff --git a/app/assets/javascripts/pipelines/graphql/queries/get_performance_insights.query.graphql b/app/assets/javascripts/pipelines/graphql/queries/get_performance_insights.query.graphql
deleted file mode 100644
index 25e990c8934..00000000000
--- a/app/assets/javascripts/pipelines/graphql/queries/get_performance_insights.query.graphql
+++ /dev/null
@@ -1,28 +0,0 @@
-query getPerformanceInsightsData($fullPath: ID!, $iid: ID!) {
-  project(fullPath: $fullPath) {
-    id
-    pipeline(iid: $iid) {
-      id
-      jobs {
-        pageInfo {
-          hasNextPage
-        }
-        nodes {
-          id
-          duration
-          detailedStatus {
-            id
-            detailsPath
-          }
-          name
-          stage {
-            id
-            name
-          }
-          startedAt
-          queuedDuration
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 83e00b80426..588d15495ab 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -153,24 +153,3 @@ export const getPipelineDefaultTab = (url) => {
 
   return null;
 };
-
-export const calculateJobStats = (jobs, sortField) => {
-  const jobNodes = [...jobs.nodes];
-
-  const sorted = jobNodes.sort((a, b) => {
-    return b[sortField] - a[sortField];
-  });
-
-  return sorted[0];
-};
-
-export const calculateSlowestFiveJobs = (jobs) => {
-  const jobNodes = [...jobs.nodes];
-  const limit = 5;
-
-  return jobNodes
-    .sort((a, b) => {
-      return b.duration - a.duration;
-    })
-    .slice(0, limit);
-};