From 771131cd592d1a2a41367679a37cc09a4c208e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Caplette?= <fcaplette@gitlab.com>
Date: Wed, 6 Sep 2023 23:36:38 +0000
Subject: [PATCH] Move pipeline_details/components/* to pipeline_details/*

Restructure this section so that each feature has a
self contained structured.
---
 .../private/job_action_component.vue}         |  2 +-
 .../private/job_links_layer.vue}              |  6 +++---
 .../private}/job_name_component.vue           |  0
 .../retry_mr_failed_job.mutation.graphql      |  0
 .../get_merge_request_pipelines.query.graphql |  0
 .../components}/dag_annotations.vue           |  0
 .../dag => dag/components}/dag_graph.vue      |  8 ++++----
 .../{components => }/dag/constants.js         |  0
 .../{components => }/dag/dag.vue              | 15 +++++++++-----
 .../{components => }/dag/drawing_utils.js     |  0
 .../queries/get_dag_vis_data.query.graphql    |  0
 .../{components => }/dag/interactions.js      |  0
 .../api.js => graph/api_utils.js}             |  2 +-
 .../components}/graph_component.vue           | 12 +++++------
 .../components}/graph_view_selector.vue       |  2 +-
 .../components}/job_group_dropdown.vue        |  4 ++--
 .../graph => graph/components}/job_item.vue   |  8 ++++----
 .../components}/linked_graph_wrapper.vue      |  0
 .../components}/linked_pipeline.vue           |  4 ++--
 .../components}/linked_pipelines_column.vue   |  8 ++++----
 .../components}/links_inner.vue               |  7 ++++---
 .../components/root_graph_layout.vue}         |  0
 .../components}/stage_column_component.vue    | 12 +++++------
 .../{components => }/graph/constants.js       |  0
 .../graph/graph_component_wrapper.vue         | 12 +++++------
 .../dismiss_pipeline_notification.graphql     |  0
 .../{components => }/graph/perf_utils.js      |  2 +-
 .../{components => }/graph/utils.js           |  7 ++++---
 .../get_pipeline_header_data.query.graphql    |  0
 .../pipeline_details_header.vue               |  4 ++--
 .../components}/failed_jobs_table.vue         |  2 +-
 .../{components => }/jobs/failed_jobs_app.vue |  4 ++--
 .../retry_failed_job.mutation.graphql         |  0
 .../queries/get_failed_jobs.query.graphql     |  0
 .../queries/get_pipeline_jobs.query.graphql   |  0
 .../{components => }/jobs/jobs_app.vue        |  2 +-
 .../mixins/stage_column_mixin.js              | 14 -------------
 .../pipeline_details_header.js                |  2 +-
 .../ci/pipeline_details/pipeline_tabs.js      |  5 +++--
 .../ci/pipeline_details/pipelines_index.js    |  2 +-
 .../components}/nav_controls.vue              |  0
 .../components}/pipeline_labels.vue           |  2 +-
 .../components}/pipeline_multi_actions.vue    |  0
 .../components}/pipeline_operations.vue       |  2 +-
 .../components}/pipeline_stop_modal.vue       |  0
 .../components}/pipeline_triggerer.vue        |  0
 .../components}/pipeline_url.vue              |  0
 .../components}/pipelines_artifacts.vue       |  0
 .../components}/pipelines_filtered_search.vue | 10 +++++-----
 .../components}/pipelines_manual_actions.vue  |  2 +-
 .../components}/pipelines_status_badge.vue    |  0
 .../components}/pipelines_table.vue           |  6 +++---
 .../components}/time_ago.vue                  |  0
 .../empty_state/ci_templates.vue              |  0
 .../empty_state/ios_templates.vue             |  0
 .../empty_state/no_ci_empty_state.vue}        |  4 ++--
 .../empty_state/pipelines_ci_templates.vue    |  0
 .../failure_widget/failed_job_details.vue     |  4 ++--
 .../failure_widget/failed_jobs_list.vue       |  4 ++--
 .../pipeline_failed_jobs_widget.vue           |  0
 .../pipelines_list/failure_widget/utils.js    |  0
 .../get_pipeline_actions.query.graphql        |  0
 .../get_pipeline_failed_jobs.query.graphql    |  0
 ...t_pipeline_failed_jobs_count.query.graphql |  0
 .../pipelines_list/pipelines.vue              | 20 +++++++++----------
 .../pipelines_list/tokens/constants.js        |  0
 .../tokens/pipeline_branch_name_token.vue     |  2 +-
 .../tokens/pipeline_source_token.vue          |  2 +-
 .../tokens/pipeline_status_token.vue          |  0
 .../tokens/pipeline_tag_name_token.vue        |  2 +-
 .../tokens/pipeline_trigger_author_token.vue  |  2 +-
 .../javascripts/ci/pipeline_details/routes.js | 10 +++++-----
 .../{components => tabs}/pipeline_tabs.vue    |  0
 .../test_reports/empty_state.vue              |  0
 .../test_reports/test_case_details.vue        |  0
 .../test_reports/test_reports.vue             |  0
 .../test_reports/test_suite_table.vue         |  0
 .../test_reports/test_summary.vue             |  2 +-
 .../test_reports/test_summary_table.vue       |  0
 .../graph_shared => utils}/drawing_utils.js   |  0
 .../{utils.js => utils/index.js}              | 19 +-----------------
 .../{components => utils}/parsing_utils.js    |  4 ++--
 .../{components => utils}/unwrapping_utils.js |  2 +-
 .../components/graph}/job_pill.vue            |  0
 .../components/graph}/pipeline_graph.vue      |  4 ++--
 .../components/graph}/stage_name.vue          |  0
 .../header/pipeline_editor_mini_graph.vue     |  4 ++--
 .../components/header/pipeline_status.vue     |  7 ++-----
 .../components/pipeline_editor_tabs.vue       |  2 +-
 .../pipeline_editor/pipeline_editor_app.vue   |  2 +-
 .../accessors/linked_pipelines_accessors.js   |  0
 .../queries/get_pipeline_stage.query.graphql  |  0
 .../queries/get_pipeline_stages.query.graphql |  0
 .../pipeline_mini_graph/job_item.vue          |  0
 .../pipeline_mini_graph/legacy_job_item.vue   |  8 ++++----
 .../legacy_pipeline_mini_graph.vue            |  0
 .../legacy_pipeline_stage.vue                 |  2 +-
 .../linked_pipelines_mini_list.vue            |  0
 .../pipeline_mini_graph.vue                   |  9 +++------
 .../pipeline_mini_graph/pipeline_stage.vue    |  7 ++-----
 .../pipeline_mini_graph/pipeline_stages.vue   |  0
 app/assets/javascripts/ci/utils.js            | 17 ++++++++++++++++
 .../commit/pipelines/pipelines_table.vue      |  2 +-
 .../pipelines/pipelines_table_wrapper.vue     |  4 ++--
 .../commit_box_pipeline_mini_graph.vue        | 13 +++++-------
 .../components/commit_box_pipeline_status.vue |  5 +----
 .../components/mr_widget_pipeline.vue         |  6 +++---
 .../extensions/test_report/index.vue          |  2 +-
 .../pipelines_list/tokens/constants.js        |  2 +-
 .../{components => tabs}/pipeline_tabs.vue    |  2 +-
 .../components/on_demand_scans.vue            |  5 +----
 .../components/tabs/base_tab.vue              |  5 +----
 .../components/tabs/base_tab_spec.js          |  2 +-
 .../components/pipeline_tabs_spec.js          |  4 ++--
 qa/qa/page/project/pipeline/index.rb          | 10 +++++-----
 qa/qa/page/project/pipeline/show.rb           | 10 +++++-----
 .../consumer/resources/graphql/pipelines.js   |  2 +-
 .../specs/project/pipelines/show.spec.js      |  2 +-
 .../header/pipeline_editor_mini_graph_spec.js |  2 +-
 .../components/header/pipeline_status_spec.js | 13 +++++++++++-
 .../components/pipeline_editor_tabs_spec.js   |  2 +-
 spec/frontend/ci/pipeline_editor/mock_data.js |  2 +-
 .../ci/pipeline_schedules/mock_data.js        |  2 +-
 .../commit_box_pipeline_mini_graph_spec.js    |  6 +++---
 .../pipelines/pipelines_table_wrapper_spec.js |  2 +-
 spec/frontend/fixtures/pipeline_header.rb     |  2 +-
 spec/frontend/fixtures/pipelines.rb           |  2 +-
 .../components/dag/dag_annotations_spec.js    |  2 +-
 .../components/dag/dag_graph_spec.js          | 14 +++++--------
 .../pipelines/components/dag/dag_spec.js      | 12 ++++-------
 .../components/dag/drawing_utils_spec.js      |  4 ++--
 .../components/jobs/failed_jobs_app_spec.js   |  6 +++---
 .../components/jobs/failed_jobs_table_spec.js |  4 ++--
 .../components/jobs/jobs_app_spec.js          |  4 ++--
 .../pipeline_mini_graph/job_item_spec.js      |  2 +-
 .../legacy_pipeline_mini_graph_spec.js        |  4 ++--
 .../legacy_pipeline_stage_spec.js             |  2 +-
 .../linked_pipelines_mini_list_spec.js        |  2 +-
 .../pipeline_mini_graph_spec.js               |  6 +++---
 .../pipeline_stage_spec.js                    |  4 ++--
 .../pipeline_stages_spec.js                   |  4 ++--
 .../components/pipeline_tabs_spec.js          |  2 +-
 .../pipelines_filtered_search_spec.js         |  2 +-
 .../empty_state/ci_templates_spec.js          |  2 +-
 .../empty_state/ios_templates_spec.js         |  4 ++--
 .../pipelines_ci_templates_spec.js            |  4 ++--
 .../failure_widget/failed_job_details_spec.js |  6 +++---
 .../failure_widget/failed_jobs_list_spec.js   |  8 ++++----
 .../pipeline_failed_jobs_widget_spec.js       |  4 ++--
 .../failure_widget/utils_spec.js              |  2 +-
 ...al_spec.js => pipeline_stop_modal_spec.js} |  2 +-
 spec/frontend/pipelines/empty_state_spec.js   |  6 +++---
 .../pipelines/graph/action_component_spec.js  |  2 +-
 .../pipelines/graph/graph_component_spec.js   | 14 ++++++-------
 .../graph/graph_component_wrapper_spec.js     | 18 ++++++++---------
 .../graph/graph_view_selector_spec.js         |  4 ++--
 .../graph/job_group_dropdown_spec.js          |  2 +-
 .../frontend/pipelines/graph/job_item_spec.js |  4 ++--
 .../graph/job_name_component_spec.js          |  2 +-
 .../pipelines/graph/linked_pipeline_spec.js   |  8 ++------
 .../graph/linked_pipelines_column_spec.js     | 10 +++++-----
 spec/frontend/pipelines/graph/mock_data.js    |  8 ++------
 .../graph/stage_column_component_spec.js      |  6 +++---
 .../graph_shared/links_inner_spec.js          |  4 ++--
 .../graph_shared/links_layer_spec.js          |  4 ++--
 spec/frontend/pipelines/nav_controls_spec.js  |  2 +-
 .../pipelines/pipeline_details_header_spec.js |  4 ++--
 .../pipeline_graph/pipeline_graph_spec.js     | 10 +++++-----
 .../pipelines/pipeline_labels_spec.js         |  2 +-
 .../pipelines/pipeline_multi_actions_spec.js  |  2 +-
 .../pipelines/pipeline_operations_spec.js     |  6 +++---
 .../pipelines/pipeline_triggerer_spec.js      |  2 +-
 spec/frontend/pipelines/pipeline_url_spec.js  |  2 +-
 .../pipelines/pipelines_artifacts_spec.js     |  2 +-
 .../pipelines_manual_actions_spec.js          |  4 ++--
 spec/frontend/pipelines/pipelines_spec.js     |  8 ++++----
 .../pipelines/pipelines_table_spec.js         | 14 ++++++-------
 .../test_reports/empty_state_spec.js          |  2 +-
 .../test_reports/test_case_details_spec.js    |  2 +-
 .../test_reports/test_reports_spec.js         |  8 ++++----
 .../test_reports/test_suite_table_spec.js     |  4 +---
 .../test_reports/test_summary_spec.js         |  2 +-
 .../test_reports/test_summary_table_spec.js   |  2 +-
 spec/frontend/pipelines/time_ago_spec.js      |  2 +-
 .../tokens/pipeline_branch_name_token_spec.js |  2 +-
 .../tokens/pipeline_source_token_spec.js      |  4 ++--
 .../tokens/pipeline_status_token_spec.js      |  2 +-
 .../tokens/pipeline_tag_name_token_spec.js    |  2 +-
 .../pipeline_trigger_author_token_spec.js     |  2 +-
 .../pipelines/unwrapping_utils_spec.js        |  2 +-
 spec/frontend/pipelines/utils_spec.js         |  4 ++--
 .../components/mr_widget_pipeline_spec.js     |  2 +-
 .../extensions/test_report/index_spec.js      |  2 +-
 193 files changed, 341 insertions(+), 375 deletions(-)
 rename app/assets/javascripts/ci/{pipeline_details/components/jobs_shared/action_component.vue => common/private/job_action_component.vue} (98%)
 rename app/assets/javascripts/ci/{pipeline_details/components/graph_shared/links_layer.vue => common/private/job_links_layer.vue} (88%)
 rename app/assets/javascripts/ci/{pipeline_details/components/jobs_shared => common/private}/job_name_component.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details => merge_requests}/graphql/mutations/retry_mr_failed_job.mutation.graphql (100%)
 rename app/assets/javascripts/ci/{pipeline_details => merge_requests}/graphql/queries/get_merge_request_pipelines.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/dag => dag/components}/dag_annotations.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/dag => dag/components}/dag_graph.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/dag/constants.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/dag/dag.vue (94%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/dag/drawing_utils.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => dag}/graphql/queries/get_dag_vis_data.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/dag/interactions.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph_shared/api.js => graph/api_utils.js} (86%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/graph_component.vue (96%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/graph_view_selector.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/job_group_dropdown.vue (96%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/job_item.vue (97%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph_shared => graph/components}/linked_graph_wrapper.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/linked_pipeline.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/linked_pipelines_column.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph_shared => graph/components}/links_inner.vue (93%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph_shared/main_graph_wrapper.vue => graph/components/root_graph_layout.vue} (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph => graph/components}/stage_column_component.vue (94%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/graph/constants.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/graph/graph_component_wrapper.vue (95%)
 rename app/assets/javascripts/ci/pipeline_details/{ => graph}/graphql/mutations/dismiss_pipeline_notification.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/graph/perf_utils.js (96%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/graph/utils.js (93%)
 rename app/assets/javascripts/ci/pipeline_details/{ => header}/graphql/queries/get_pipeline_header_data.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => header}/pipeline_details_header.vue (99%)
 rename app/assets/javascripts/ci/pipeline_details/{components/jobs => jobs/components}/failed_jobs_table.vue (97%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/jobs/failed_jobs_app.vue (89%)
 rename app/assets/javascripts/ci/pipeline_details/{ => jobs}/graphql/mutations/retry_failed_job.mutation.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => jobs}/graphql/queries/get_failed_jobs.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => jobs}/graphql/queries/get_pipeline_jobs.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/jobs/jobs_app.vue (97%)
 delete mode 100644 app/assets/javascripts/ci/pipeline_details/mixins/stage_column_mixin.js
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/nav_controls.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_labels.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_multi_actions.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_operations.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_stop_modal.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_triggerer.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipeline_url.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipelines_artifacts.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipelines_filtered_search.vue (89%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipelines_manual_actions.vue (97%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipelines_status_badge.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/pipelines_table.vue (95%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list => pipelines_list/components}/time_ago.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/empty_state/ci_templates.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/empty_state/ios_templates.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/pipelines_list/empty_state.vue => pipelines_list/empty_state/no_ci_empty_state.vue} (89%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/empty_state/pipelines_ci_templates.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/failure_widget/failed_job_details.vue (96%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/failure_widget/failed_jobs_list.vue (95%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/failure_widget/utils.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => pipelines_list}/graphql/queries/get_pipeline_actions.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => pipelines_list}/graphql/queries/get_pipeline_failed_jobs.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{ => pipelines_list}/graphql/queries/get_pipeline_failed_jobs_count.query.graphql (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/pipelines.vue (95%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/constants.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/pipeline_branch_name_token.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/pipeline_source_token.vue (96%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/pipeline_status_token.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/pipeline_tag_name_token.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/pipeline_trigger_author_token.vue (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components => tabs}/pipeline_tabs.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/empty_state.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/test_case_details.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/test_reports.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/test_suite_table.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/test_summary.vue (97%)
 rename app/assets/javascripts/ci/pipeline_details/{components => }/test_reports/test_summary_table.vue (100%)
 rename app/assets/javascripts/ci/pipeline_details/{components/graph_shared => utils}/drawing_utils.js (100%)
 rename app/assets/javascripts/ci/pipeline_details/{utils.js => utils/index.js} (89%)
 rename app/assets/javascripts/ci/pipeline_details/{components => utils}/parsing_utils.js (98%)
 rename app/assets/javascripts/ci/pipeline_details/{components => utils}/unwrapping_utils.js (97%)
 rename app/assets/javascripts/ci/{pipeline_details/components/pipeline_graph => pipeline_editor/components/graph}/job_pill.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components/pipeline_graph => pipeline_editor/components/graph}/pipeline_graph.vue (97%)
 rename app/assets/javascripts/ci/{pipeline_details/components/pipeline_graph => pipeline_editor/components/graph}/stage_name.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/accessors/linked_pipelines_accessors.js (100%)
 rename app/assets/javascripts/ci/{pipeline_details => pipeline_mini_graph}/graphql/queries/get_pipeline_stage.query.graphql (100%)
 rename app/assets/javascripts/ci/{pipeline_details => pipeline_mini_graph}/graphql/queries/get_pipeline_stages.query.graphql (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/job_item.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/legacy_job_item.vue (94%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/legacy_pipeline_mini_graph.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/legacy_pipeline_stage.vue (98%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/linked_pipelines_mini_list.vue (100%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/pipeline_mini_graph.vue (93%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/pipeline_stage.vue (87%)
 rename app/assets/javascripts/ci/{pipeline_details/components => }/pipeline_mini_graph/pipeline_stages.vue (100%)
 create mode 100644 app/assets/javascripts/ci/utils.js
 rename ee/app/assets/javascripts/ci/pipeline_details/{components => }/pipelines_list/tokens/constants.js (89%)
 rename ee/app/assets/javascripts/ci/pipeline_details/{components => tabs}/pipeline_tabs.vue (98%)
 rename spec/frontend/pipelines/components/pipelines_list/{pipieline_stop_modal_spec.js => pipeline_stop_modal_spec.js} (85%)

diff --git a/app/assets/javascripts/ci/pipeline_details/components/jobs_shared/action_component.vue b/app/assets/javascripts/ci/common/private/job_action_component.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/jobs_shared/action_component.vue
rename to app/assets/javascripts/ci/common/private/job_action_component.vue
index ffb6ab71b222c..f649750ce8aba 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/jobs_shared/action_component.vue
+++ b/app/assets/javascripts/ci/common/private/job_action_component.vue
@@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
-import { reportToSentry } from '../../utils';
+import { reportToSentry } from '~/ci/utils';
 
 /**
  * Renders either a cancel, retry or play icon button and handles the post request
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_layer.vue b/app/assets/javascripts/ci/common/private/job_links_layer.vue
similarity index 88%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_layer.vue
rename to app/assets/javascripts/ci/common/private/job_links_layer.vue
index ef24694e494b2..59260ca3f8167 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_layer.vue
+++ b/app/assets/javascripts/ci/common/private/job_links_layer.vue
@@ -1,8 +1,8 @@
 <script>
 import { memoize } from 'lodash';
-import { reportToSentry } from '../../utils';
-import { parseData } from '../parsing_utils';
-import LinksInner from './links_inner.vue';
+import { reportToSentry } from '~/ci/utils';
+import { parseData } from '~/ci/pipeline_details/utils/parsing_utils';
+import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
 
 const parseForLinksBare = (pipeline) => {
   const arrayOfJobs = pipeline.flatMap(({ groups }) => groups);
diff --git a/app/assets/javascripts/ci/pipeline_details/components/jobs_shared/job_name_component.vue b/app/assets/javascripts/ci/common/private/job_name_component.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/jobs_shared/job_name_component.vue
rename to app/assets/javascripts/ci/common/private/job_name_component.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/mutations/retry_mr_failed_job.mutation.graphql b/app/assets/javascripts/ci/merge_requests/graphql/mutations/retry_mr_failed_job.mutation.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/mutations/retry_mr_failed_job.mutation.graphql
rename to app/assets/javascripts/ci/merge_requests/graphql/mutations/retry_mr_failed_job.mutation.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_merge_request_pipelines.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_merge_request_pipelines.query.graphql
rename to app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/dag_annotations.vue b/app/assets/javascripts/ci/pipeline_details/dag/components/dag_annotations.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/dag_annotations.vue
rename to app/assets/javascripts/ci/pipeline_details/dag/components/dag_annotations.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/dag_graph.vue b/app/assets/javascripts/ci/pipeline_details/dag/components/dag_graph.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/dag_graph.vue
rename to app/assets/javascripts/ci/pipeline_details/dag/components/dag_graph.vue
index 7646c11773c9f..67e80145e8360 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/dag/dag_graph.vue
+++ b/app/assets/javascripts/ci/pipeline_details/dag/components/dag_graph.vue
@@ -1,10 +1,10 @@
 <script>
 import * as d3 from 'd3';
 import { uniqueId } from 'lodash';
+import { getMaxNodes, removeOrphanNodes } from '~/ci/pipeline_details/utils/parsing_utils';
 import { PARSE_FAILURE } from '../../constants';
-import { getMaxNodes, removeOrphanNodes } from '../parsing_utils';
-import { LINK_SELECTOR, NODE_SELECTOR, ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from './constants';
-import { calculateClip, createLinkPath, createSankey, labelPosition } from './drawing_utils';
+import { LINK_SELECTOR, NODE_SELECTOR, ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from '../constants';
+import { calculateClip, createLinkPath, createSankey, labelPosition } from '../drawing_utils';
 import {
   currentIsLive,
   getLiveLinksAsDict,
@@ -12,7 +12,7 @@ import {
   restoreLinks,
   toggleLinkHighlight,
   togglePathHighlights,
-} from './interactions';
+} from '../interactions';
 
 export default {
   viewOptions: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/constants.js b/app/assets/javascripts/ci/pipeline_details/dag/constants.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/constants.js
rename to app/assets/javascripts/ci/pipeline_details/dag/constants.js
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/dag.vue b/app/assets/javascripts/ci/pipeline_details/dag/dag.vue
similarity index 94%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/dag.vue
rename to app/assets/javascripts/ci/pipeline_details/dag/dag.vue
index afb5aa0509870..5415340c956c0 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/dag/dag.vue
+++ b/app/assets/javascripts/ci/pipeline_details/dag/dag.vue
@@ -4,12 +4,17 @@ import { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { fetchPolicies } from '~/lib/graphql';
 import { __ } from '~/locale';
-import { DEFAULT, PARSE_FAILURE, LOAD_FAILURE, UNSUPPORTED_DATA } from '../../constants';
-import getDagVisData from '../../graphql/queries/get_dag_vis_data.query.graphql';
-import { parseData } from '../parsing_utils';
+import {
+  DEFAULT,
+  PARSE_FAILURE,
+  LOAD_FAILURE,
+  UNSUPPORTED_DATA,
+} from '~/ci/pipeline_details/constants';
+import { parseData } from '~/ci/pipeline_details/utils/parsing_utils';
+import getDagVisData from './graphql/queries/get_dag_vis_data.query.graphql';
 import { ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from './constants';
-import DagAnnotations from './dag_annotations.vue';
-import DagGraph from './dag_graph.vue';
+import DagAnnotations from './components/dag_annotations.vue';
+import DagGraph from './components/dag_graph.vue';
 
 export default {
   // eslint-disable-next-line @gitlab/require-i18n-strings
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/drawing_utils.js b/app/assets/javascripts/ci/pipeline_details/dag/drawing_utils.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/drawing_utils.js
rename to app/assets/javascripts/ci/pipeline_details/dag/drawing_utils.js
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_dag_vis_data.query.graphql b/app/assets/javascripts/ci/pipeline_details/dag/graphql/queries/get_dag_vis_data.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_dag_vis_data.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/dag/graphql/queries/get_dag_vis_data.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/dag/interactions.js b/app/assets/javascripts/ci/pipeline_details/dag/interactions.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/dag/interactions.js
rename to app/assets/javascripts/ci/pipeline_details/dag/interactions.js
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/api.js b/app/assets/javascripts/ci/pipeline_details/graph/api_utils.js
similarity index 86%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/api.js
rename to app/assets/javascripts/ci/pipeline_details/graph/api_utils.js
index 0fe7d9ffda3dd..f9f47d1ea15a0 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/api.js
+++ b/app/assets/javascripts/ci/pipeline_details/graph/api_utils.js
@@ -1,5 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
-import { reportToSentry } from '../../utils';
+import { reportToSentry } from '~/ci/utils';
 
 export const reportPerformance = (path, stats) => {
   // FIXME: https://gitlab.com/gitlab-org/gitlab/-/issues/330245
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
similarity index 96%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/graph_component.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
index 49df71beeec2c..f098d790736f4 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
@@ -1,15 +1,15 @@
 <script>
-import { reportToSentry } from '../../utils';
-import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
-import LinksLayer from '../graph_shared/links_layer.vue';
+import { reportToSentry } from '~/ci/utils';
 import {
   generateColumnsFromLayersListMemoized,
   keepLatestDownstreamPipelines,
-} from '../parsing_utils';
-import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
+} from '~/ci/pipeline_details/utils/parsing_utils';
+import LinksLayer from '../../../common/private/job_links_layer.vue';
+import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from '../constants';
+import { validateConfigPaths } from '../utils';
+import LinkedGraphWrapper from './linked_graph_wrapper.vue';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
-import { validateConfigPaths } from './utils';
 
 export default {
   name: 'PipelineGraph',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_view_selector.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/graph_view_selector.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
index 73143c981ed8b..fb7dcb300f117 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_view_selector.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
-import { STAGE_VIEW, LAYER_VIEW } from './constants';
+import { STAGE_VIEW, LAYER_VIEW } from '../constants';
 
 export default {
   name: 'GraphViewSelector',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/job_group_dropdown.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue
similarity index 96%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/job_group_dropdown.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue
index d4852224df5be..7538ad87af865 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue
@@ -1,6 +1,6 @@
 <script>
-import { reportToSentry } from '../../utils';
-import { JOB_DROPDOWN, SINGLE_JOB } from './constants';
+import { reportToSentry } from '~/ci/utils';
+import { JOB_DROPDOWN, SINGLE_JOB } from '../constants';
 import JobItem from './job_item.vue';
 
 /**
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/job_item.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/job_item.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
index 22895a310827d..bab05d0c232d6 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/job_item.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
@@ -1,14 +1,14 @@
 <script>
 import { GlBadge, GlForm, GlFormCheckbox, GlLink, GlModal, GlTooltipDirective } from '@gitlab/ui';
+import { reportToSentry } from '~/ci/utils';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { reportToSentry } from '../../utils';
-import ActionComponent from '../jobs_shared/action_component.vue';
-import JobNameComponent from '../jobs_shared/job_name_component.vue';
-import { BRIDGE_KIND, RETRY_ACTION_TITLE, SINGLE_JOB, SKIP_RETRY_MODAL_KEY } from './constants';
+import ActionComponent from '../../../common/private/job_action_component.vue';
+import JobNameComponent from '../../../common/private/job_name_component.vue';
+import { BRIDGE_KIND, RETRY_ACTION_TITLE, SINGLE_JOB, SKIP_RETRY_MODAL_KEY } from '../constants';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/linked_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/linked_graph_wrapper.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipeline.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index 8aa49e037185d..cc52ff57c132d 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -14,8 +14,8 @@ import { __, sprintf } from '~/locale';
 import CancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import RetryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { reportToSentry } from '../../utils';
-import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from './constants';
+import { reportToSentry } from '~/ci/utils';
+import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from '../constants';
 
 export default {
   directives: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipelines_column.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
index 02e426064c947..2de7e43c9b1eb 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
@@ -1,9 +1,8 @@
 <script>
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
+import { reportToSentry } from '~/ci/utils';
 import { LOAD_FAILURE } from '../../constants';
-import { reportToSentry } from '../../utils';
-import { ONE_COL_WIDTH, UPSTREAM, LAYER_VIEW, STAGE_VIEW } from './constants';
-import LinkedPipeline from './linked_pipeline.vue';
+import { ONE_COL_WIDTH, UPSTREAM, LAYER_VIEW, STAGE_VIEW } from '../constants';
 import {
   calculatePipelineLayersInfo,
   getQueryHeaders,
@@ -11,7 +10,8 @@ import {
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
   validateConfigPaths,
-} from './utils';
+} from '../utils';
+import LinkedPipeline from './linked_pipeline.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_inner.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/links_inner.vue
similarity index 93%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_inner.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/links_inner.vue
index 1189c2ebad8be..09285525c3827 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/links_inner.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/links_inner.vue
@@ -1,9 +1,10 @@
 <script>
 import { isEmpty } from 'lodash';
+import { STAGE_VIEW } from '~/ci/pipeline_details/graph/constants';
+import { createJobsHash, generateJobNeedsDict } from '~/ci/pipeline_details/utils';
+import { reportToSentry } from '~/ci/utils';
 import { DRAW_FAILURE } from '../../constants';
-import { createJobsHash, generateJobNeedsDict, reportToSentry } from '../../utils';
-import { STAGE_VIEW } from '../graph/constants';
-import { generateLinksData } from './drawing_utils';
+import { generateLinksData } from '../../utils/drawing_utils';
 
 export default {
   name: 'LinksInner',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/main_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/main_graph_wrapper.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/stage_column_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
similarity index 94%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/stage_column_component.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
index ffd0fec2ca816..1401bdba5ca21 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
@@ -1,9 +1,9 @@
 <script>
 import { escape, isEmpty } from 'lodash';
+import ActionComponent from '~/ci/common/private/job_action_component.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { reportToSentry } from '../../utils';
-import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
-import ActionComponent from '../jobs_shared/action_component.vue';
+import { reportToSentry } from '~/ci/utils';
+import RootGraphLayout from './root_graph_layout.vue';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import JobItem from './job_item.vue';
 
@@ -12,7 +12,7 @@ export default {
     ActionComponent,
     JobGroupDropdown,
     JobItem,
-    MainGraphWrapper,
+    RootGraphLayout,
   },
   mixins: [glFeatureFlagMixin()],
   props: {
@@ -135,7 +135,7 @@ export default {
 };
 </script>
 <template>
-  <main-graph-wrapper :class="columnSpacingClass" data-testid="stage-column">
+  <root-graph-layout :class="columnSpacingClass" data-testid="stage-column">
     <template #stages>
       <div
         data-testid="stage-column-title"
@@ -192,5 +192,5 @@ export default {
         </div>
       </div>
     </template>
-  </main-graph-wrapper>
+  </root-graph-layout>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/constants.js b/app/assets/javascripts/ci/pipeline_details/graph/constants.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/constants.js
rename to app/assets/javascripts/ci/pipeline_details/graph/constants.js
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
similarity index 95%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/graph_component_wrapper.vue
rename to app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
index b2cef7c37b98b..bd7325f792518 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
@@ -4,10 +4,10 @@ import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.qu
 import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql';
 import { __, s__ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
-import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
-import getPipelineQuery from '../../graphql/queries/get_pipeline_header_data.query.graphql';
-import { reportToSentry, reportMessageToSentry } from '../../utils';
+import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '~/ci/pipeline_details/constants';
+import getPipelineQuery from '~/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql';
+import { reportToSentry, reportMessageToSentry } from '~/ci/utils';
+import DismissPipelineGraphCallout from './graphql/mutations/dismiss_pipeline_notification.graphql';
 import {
   ACTION_FAILURE,
   IID_FAILURE,
@@ -16,8 +16,8 @@ import {
   STAGE_VIEW,
   VIEW_TYPE_KEY,
 } from './constants';
-import PipelineGraph from './graph_component.vue';
-import GraphViewSelector from './graph_view_selector.vue';
+import PipelineGraph from './components/graph_component.vue';
+import GraphViewSelector from './components/graph_view_selector.vue';
 import {
   calculatePipelineLayersInfo,
   getQueryHeaders,
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/mutations/dismiss_pipeline_notification.graphql b/app/assets/javascripts/ci/pipeline_details/graph/graphql/mutations/dismiss_pipeline_notification.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/mutations/dismiss_pipeline_notification.graphql
rename to app/assets/javascripts/ci/pipeline_details/graph/graphql/mutations/dismiss_pipeline_notification.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/perf_utils.js b/app/assets/javascripts/ci/pipeline_details/graph/perf_utils.js
similarity index 96%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/perf_utils.js
rename to app/assets/javascripts/ci/pipeline_details/graph/perf_utils.js
index 3737a209f5c5c..511dcbe68899a 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/perf_utils.js
+++ b/app/assets/javascripts/ci/pipeline_details/graph/perf_utils.js
@@ -8,7 +8,7 @@ import {
 } from '~/performance/constants';
 
 import { performanceMarkAndMeasure } from '~/performance/utils';
-import { reportPerformance } from '../graph_shared/api';
+import { reportPerformance } from './api_utils';
 
 export const beginPerfMeasure = () => {
   performanceMarkAndMeasure({ mark: PIPELINES_DETAIL_LINKS_MARK_CALCULATE_START });
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph/utils.js b/app/assets/javascripts/ci/pipeline_details/graph/utils.js
similarity index 93%
rename from app/assets/javascripts/ci/pipeline_details/components/graph/utils.js
rename to app/assets/javascripts/ci/pipeline_details/graph/utils.js
index c888c8a553755..9a8d6440d4df2 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/graph/utils.js
+++ b/app/assets/javascripts/ci/pipeline_details/graph/utils.js
@@ -1,8 +1,9 @@
 import { isEmpty } from 'lodash';
 import { getIdFromGraphQLId, etagQueryHeaders } from '~/graphql_shared/utils';
-import { reportToSentry } from '../../utils';
-import { listByLayers } from '../parsing_utils';
-import { unwrapStagesWithNeedsAndLookup } from '../unwrapping_utils';
+import { reportToSentry } from '~/ci/utils';
+
+import { listByLayers } from '~/ci/pipeline_details/utils/parsing_utils';
+import { unwrapStagesWithNeedsAndLookup } from '~/ci/pipeline_details/utils/unwrapping_utils';
 import { beginPerfMeasure, finishPerfMeasureAndSend } from './perf_utils';
 
 export { toggleQueryPollingByVisibility } from '~/graphql_shared/utils';
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql b/app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_details_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
similarity index 99%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_details_header.vue
rename to app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
index 98798d3b8ad05..4a15f5b581a77 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_details_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
@@ -30,8 +30,8 @@ import {
 import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql';
-import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql';
-import { getQueryHeaders } from './graph/utils';
+import { getQueryHeaders } from '../graph/utils';
+import getPipelineQuery from './graphql/queries/get_pipeline_header_data.query.graphql';
 
 const DELETE_MODAL_ID = 'pipeline-delete-modal';
 const POLL_INTERVAL = 10000;
diff --git a/app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_table.vue b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_table.vue
rename to app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
index f84ae13180d50..98431bd1fcc21 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
@@ -6,7 +6,7 @@ import { createAlert } from '~/alert';
 import Tracking from '~/tracking';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
-import RetryFailedJobMutation from '../../graphql/mutations/retry_failed_job.mutation.graphql';
+import RetryFailedJobMutation from '../graphql/mutations/retry_failed_job.mutation.graphql';
 import { DEFAULT_FIELDS, TRACKING_CATEGORIES } from '../../constants';
 
 export default {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_app.vue b/app/assets/javascripts/ci/pipeline_details/jobs/failed_jobs_app.vue
similarity index 89%
rename from app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_app.vue
rename to app/assets/javascripts/ci/pipeline_details/jobs/failed_jobs_app.vue
index c24862f828b9d..b946a40e59010 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/jobs/failed_jobs_app.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/failed_jobs_app.vue
@@ -2,8 +2,8 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
-import GetFailedJobsQuery from '../../graphql/queries/get_failed_jobs.query.graphql';
-import FailedJobsTable from './failed_jobs_table.vue';
+import GetFailedJobsQuery from './graphql/queries/get_failed_jobs.query.graphql';
+import FailedJobsTable from './components/failed_jobs_table.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/mutations/retry_failed_job.mutation.graphql b/app/assets/javascripts/ci/pipeline_details/jobs/graphql/mutations/retry_failed_job.mutation.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/mutations/retry_failed_job.mutation.graphql
rename to app/assets/javascripts/ci/pipeline_details/jobs/graphql/mutations/retry_failed_job.mutation.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_failed_jobs.query.graphql b/app/assets/javascripts/ci/pipeline_details/jobs/graphql/queries/get_failed_jobs.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_failed_jobs.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/jobs/graphql/queries/get_failed_jobs.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_jobs.query.graphql b/app/assets/javascripts/ci/pipeline_details/jobs/graphql/queries/get_pipeline_jobs.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_jobs.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/jobs/graphql/queries/get_pipeline_jobs.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/jobs/jobs_app.vue b/app/assets/javascripts/ci/pipeline_details/jobs/jobs_app.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/jobs/jobs_app.vue
rename to app/assets/javascripts/ci/pipeline_details/jobs/jobs_app.vue
index 6174886098360..7a09dd27ad8fa 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/jobs/jobs_app.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/jobs_app.vue
@@ -6,7 +6,7 @@ import { __ } from '~/locale';
 import eventHub from '~/jobs/components/table/event_hub';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import { JOBS_TAB_FIELDS } from '~/jobs/components/table/constants';
-import getPipelineJobs from '../../graphql/queries/get_pipeline_jobs.query.graphql';
+import getPipelineJobs from './graphql/queries/get_pipeline_jobs.query.graphql';
 
 export default {
   fields: JOBS_TAB_FIELDS,
diff --git a/app/assets/javascripts/ci/pipeline_details/mixins/stage_column_mixin.js b/app/assets/javascripts/ci/pipeline_details/mixins/stage_column_mixin.js
deleted file mode 100644
index 578ff4983584a..0000000000000
--- a/app/assets/javascripts/ci/pipeline_details/mixins/stage_column_mixin.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
-  props: {
-    hasUpstream: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  methods: {
-    buildConnnectorClass(index) {
-      return index === 0 && (!this.isFirstColumn || this.hasUpstream) ? 'left-connector' : '';
-    },
-  },
-};
diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js b/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js
index c79aaef23e8bd..067ec3f305e49 100644
--- a/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js
+++ b/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import PipelineDetailsHeader from './components/pipeline_details_header.vue';
+import PipelineDetailsHeader from './header/pipeline_details_header.vue';
 
 Vue.use(VueApollo);
 
diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_tabs.js b/app/assets/javascripts/ci/pipeline_details/pipeline_tabs.js
index 8d4c9d1220ad6..0ca9a68e70d51 100644
--- a/app/assets/javascripts/ci/pipeline_details/pipeline_tabs.js
+++ b/app/assets/javascripts/ci/pipeline_details/pipeline_tabs.js
@@ -4,10 +4,11 @@ import VueRouter from 'vue-router';
 import Vuex from 'vuex';
 import VueApollo from 'vue-apollo';
 import { GlToast } from '@gitlab/ui';
-import PipelineTabs from 'ee_else_ce/ci/pipeline_details/components/pipeline_tabs.vue';
+import PipelineTabs from 'ee_else_ce/ci/pipeline_details/tabs/pipeline_tabs.vue';
+import { reportToSentry } from '~/ci/utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import createTestReportsStore from './stores/test_reports';
-import { getPipelineDefaultTab, reportToSentry } from './utils';
+import { getPipelineDefaultTab } from './utils';
 
 Vue.use(GlToast);
 Vue.use(VueApollo);
diff --git a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
index 20fd0915e28ec..86b565d7821fc 100644
--- a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
@@ -10,7 +10,7 @@ import {
 import { doesHashExistInUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import Translate from '~/vue_shared/translate';
-import Pipelines from './components/pipelines_list/pipelines.vue';
+import Pipelines from './pipelines_list/pipelines.vue';
 import PipelinesStore from './stores/pipelines_store';
 
 Vue.use(Translate);
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/nav_controls.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/nav_controls.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/nav_controls.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/nav_controls.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_labels.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_labels.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_labels.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_labels.vue
index f8b4299485e7b..082ede6024427 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_labels.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_labels.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { SCHEDULE_ORIGIN } from '../../constants';
+import { SCHEDULE_ORIGIN } from '~/ci/pipeline_details/constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_multi_actions.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_multi_actions.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_multi_actions.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue
index caeee7edefe7e..8f275bee91f99 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import eventHub from '../../event_hub';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL, TRACKING_CATEGORIES } from '../../constants';
+import eventHub from '../../event_hub';
 import PipelineMultiActions from './pipeline_multi_actions.vue';
 import PipelinesManualActions from './pipelines_manual_actions.vue';
 
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_stop_modal.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_stop_modal.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_stop_modal.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_stop_modal.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_triggerer.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_triggerer.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_triggerer.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_triggerer.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_url.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_url.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_url.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_artifacts.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_artifacts.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_artifacts.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_filtered_search.vue
similarity index 89%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_filtered_search.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_filtered_search.vue
index 7dc1e60610ed7..6aadb6b73c8c1 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_filtered_search.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_filtered_search.vue
@@ -5,11 +5,11 @@ import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
 import { TRACKING_CATEGORIES } from '../../constants';
-import PipelineBranchNameToken from './tokens/pipeline_branch_name_token.vue';
-import PipelineSourceToken from './tokens/pipeline_source_token.vue';
-import PipelineStatusToken from './tokens/pipeline_status_token.vue';
-import PipelineTagNameToken from './tokens/pipeline_tag_name_token.vue';
-import PipelineTriggerAuthorToken from './tokens/pipeline_trigger_author_token.vue';
+import PipelineBranchNameToken from '../tokens/pipeline_branch_name_token.vue';
+import PipelineSourceToken from '../tokens/pipeline_source_token.vue';
+import PipelineStatusToken from '../tokens/pipeline_status_token.vue';
+import PipelineTagNameToken from '../tokens/pipeline_tag_name_token.vue';
+import PipelineTriggerAuthorToken from '../tokens/pipeline_trigger_author_token.vue';
 
 export default {
   userType: 'username',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_manual_actions.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_manual_actions.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_manual_actions.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_manual_actions.vue
index 262e82677a74a..4dacd474bdec6 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_manual_actions.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_manual_actions.vue
@@ -8,7 +8,7 @@ import Tracking from '~/tracking';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../../event_hub';
 import { TRACKING_CATEGORIES } from '../../constants';
-import getPipelineActionsQuery from '../../graphql/queries/get_pipeline_actions.query.graphql';
+import getPipelineActionsQuery from '../graphql/queries/get_pipeline_actions.query.graphql';
 
 export default {
   name: 'PipelinesManualActions',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_status_badge.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_status_badge.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_status_badge.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_status_badge.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_table.vue
similarity index 95%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_table.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_table.vue
index 2dadc78b90473..9784186ac673f 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_table.vue
@@ -4,9 +4,9 @@ import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
 import { s__, __ } from '~/locale';
 import Tracking from '~/tracking';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/components/parsing_utils';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
-import PipelineFailedJobsWidget from '~/ci/pipeline_details/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
+import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineFailedJobsWidget from '~/ci/pipeline_details/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
 import eventHub from '../../event_hub';
 import { TRACKING_CATEGORIES } from '../../constants';
 import PipelineOperations from './pipeline_operations.vue';
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/time_ago.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/components/time_ago.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/time_ago.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/components/time_ago.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/ci_templates.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/ci_templates.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/ci_templates.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/ci_templates.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/ios_templates.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/ios_templates.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/ios_templates.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/ios_templates.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/no_ci_empty_state.vue
similarity index 89%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/no_ci_empty_state.vue
index 3bbdfc73e1bd1..6e7d6908cd9d5 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/no_ci_empty_state.vue
@@ -2,8 +2,8 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
-import PipelinesCiTemplates from './empty_state/pipelines_ci_templates.vue';
-import IosTemplates from './empty_state/ios_templates.vue';
+import PipelinesCiTemplates from './pipelines_ci_templates.vue';
+import IosTemplates from './ios_templates.vue';
 
 export default {
   i18n: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/pipelines_ci_templates.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/pipelines_ci_templates.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/empty_state/pipelines_ci_templates.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/empty_state/pipelines_ci_templates.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_job_details.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_job_details.vue
similarity index 96%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_job_details.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_job_details.vue
index edf397f47978c..82f1d57912a94 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_job_details.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_job_details.vue
@@ -5,8 +5,8 @@ import { __, s__, sprintf } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { BRIDGE_KIND } from '~/ci/pipeline_details/components/graph/constants';
-import RetryMrFailedJobMutation from '../../../graphql/mutations/retry_mr_failed_job.mutation.graphql';
+import { BRIDGE_KIND } from '~/ci/pipeline_details/graph/constants';
+import RetryMrFailedJobMutation from '~/ci/merge_requests/graphql/mutations/retry_mr_failed_job.mutation.graphql';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_jobs_list.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_jobs_list.vue
similarity index 95%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_jobs_list.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_jobs_list.vue
index 343036d2049bd..375f72bb72fbd 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/failed_jobs_list.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/failed_jobs_list.vue
@@ -2,9 +2,9 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { __, s__, sprintf } from '~/locale';
-import { getQueryHeaders } from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders } from '~/ci/pipeline_details/graph/utils';
 import { graphqlEtagPipelinePath } from '~/ci/pipeline_details/utils';
-import getPipelineFailedJobs from '../../../graphql/queries/get_pipeline_failed_jobs.query.graphql';
+import getPipelineFailedJobs from '~/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs.query.graphql';
 import { sortJobsByStatus } from './utils';
 import FailedJobDetails from './failed_job_details.vue';
 
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/utils.js b/app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/utils.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/failure_widget/utils.js
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/failure_widget/utils.js
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_actions.query.graphql b/app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_actions.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_actions.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_actions.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_failed_jobs.query.graphql b/app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_failed_jobs.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_failed_jobs_count.query.graphql b/app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs_count.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_failed_jobs_count.query.graphql
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs_count.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/pipelines.vue
similarity index 95%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/pipelines.vue
index 574d291a767ef..26db10505ef12 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/pipelines.vue
@@ -17,19 +17,19 @@ import {
   FILTER_TAG_IDENTIFIER,
   PipelineKeyOptions,
   TRACKING_CATEGORIES,
-} from '../../constants';
-import PipelinesMixin from '../../mixins/pipelines_mixin';
-import PipelinesService from '../../services/pipelines_service';
-import { validateParams } from '../../utils';
-import EmptyState from './empty_state.vue';
-import NavigationControls from './nav_controls.vue';
-import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
-import PipelinesTableComponent from './pipelines_table.vue';
+} from '../constants';
+import PipelinesMixin from '../mixins/pipelines_mixin';
+import PipelinesService from '../services/pipelines_service';
+import { validateParams } from '../utils';
+import NoCiEmptyState from './empty_state/no_ci_empty_state.vue';
+import NavigationControls from './components/nav_controls.vue';
+import PipelinesFilteredSearch from './components/pipelines_filtered_search.vue';
+import PipelinesTableComponent from './components/pipelines_table.vue';
 
 export default {
   PipelineKeyOptions,
   components: {
-    EmptyState,
+    NoCiEmptyState,
     GlCollapsibleListbox,
     GlEmptyState,
     GlIcon,
@@ -409,7 +409,7 @@ export default {
         class="prepend-top-20"
       />
 
-      <empty-state
+      <no-ci-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyState"
         :empty-state-svg-path="emptyStateSvgPath"
         :can-set-ci="canCreatePipeline"
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/constants.js b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/constants.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/constants.js
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/constants.js
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_branch_name_token.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_branch_name_token.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_branch_name_token.vue
index 81f46d5f2f994..5c2c1aa03d515 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_branch_name_token.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_branch_name_token.vue
@@ -3,7 +3,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from
 import { debounce } from 'lodash';
 import Api from '~/api';
 import { createAlert } from '~/alert';
-import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
+import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_source_token.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_source_token.vue
similarity index 96%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_source_token.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_source_token.vue
index 28c2e28dd9116..03d9e6478acf0 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_source_token.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_source_token.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
-import { PIPELINE_SOURCES } from 'ee_else_ce/ci/pipeline_details/components/pipelines_list/tokens/constants';
+import { PIPELINE_SOURCES } from 'ee_else_ce/ci/pipeline_details/pipelines_list/tokens/constants';
 
 export default {
   PIPELINE_SOURCES,
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_status_token.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_status_token.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_status_token.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_status_token.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_tag_name_token.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_tag_name_token.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_tag_name_token.vue
index b32f5de2d7ef1..ceb6176df3d46 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_tag_name_token.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_tag_name_token.vue
@@ -3,7 +3,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from
 import { debounce } from 'lodash';
 import Api from '~/api';
 import { createAlert } from '~/alert';
-import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
+import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_trigger_author_token.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
rename to app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_trigger_author_token.vue
index a89354c671a6f..8c516cc8cb3f4 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/pipeline_trigger_author_token.vue
@@ -13,7 +13,7 @@ import {
   ANY_TRIGGER_AUTHOR,
   FETCH_AUTHOR_ERROR_MESSAGE,
   FILTER_PIPELINES_SEARCH_DELAY,
-} from '../../../constants';
+} from '../../constants';
 
 export default {
   anyTriggerAuthor: ANY_TRIGGER_AUTHOR,
diff --git a/app/assets/javascripts/ci/pipeline_details/routes.js b/app/assets/javascripts/ci/pipeline_details/routes.js
index 0e1414ec39058..84207f3ab0cba 100644
--- a/app/assets/javascripts/ci/pipeline_details/routes.js
+++ b/app/assets/javascripts/ci/pipeline_details/routes.js
@@ -1,8 +1,8 @@
-import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
-import Dag from './components/dag/dag.vue';
-import FailedJobsApp from './components/jobs/failed_jobs_app.vue';
-import JobsApp from './components/jobs/jobs_app.vue';
-import TestReports from './components/test_reports/test_reports.vue';
+import PipelineGraphWrapper from './graph/graph_component_wrapper.vue';
+import Dag from './dag/dag.vue';
+import FailedJobsApp from './jobs/failed_jobs_app.vue';
+import JobsApp from './jobs/jobs_app.vue';
+import TestReports from './test_reports/test_reports.vue';
 import {
   pipelineTabName,
   needsTabName,
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_tabs.vue b/app/assets/javascripts/ci/pipeline_details/tabs/pipeline_tabs.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_tabs.vue
rename to app/assets/javascripts/ci/pipeline_details/tabs/pipeline_tabs.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/empty_state.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/empty_state.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/empty_state.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/empty_state.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_case_details.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_case_details.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/test_case_details.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/test_case_details.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_reports.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/test_reports.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_suite_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/test_suite_table.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_summary.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/test_summary.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
index 6b723ad548128..f6090678ca4c1 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlProgressBar } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { formattedTime } from '../../stores/test_reports/utils';
+import { formattedTime } from '../stores/test_reports/utils';
 
 export default {
   name: 'TestSummary',
diff --git a/app/assets/javascripts/ci/pipeline_details/components/test_reports/test_summary_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/test_reports/test_summary_table.vue
rename to app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/graph_shared/drawing_utils.js b/app/assets/javascripts/ci/pipeline_details/utils/drawing_utils.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/graph_shared/drawing_utils.js
rename to app/assets/javascripts/ci/pipeline_details/utils/drawing_utils.js
diff --git a/app/assets/javascripts/ci/pipeline_details/utils.js b/app/assets/javascripts/ci/pipeline_details/utils/index.js
similarity index 89%
rename from app/assets/javascripts/ci/pipeline_details/utils.js
rename to app/assets/javascripts/ci/pipeline_details/utils/index.js
index f030ca943fd3c..9109342707e10 100644
--- a/app/assets/javascripts/ci/pipeline_details/utils.js
+++ b/app/assets/javascripts/ci/pipeline_details/utils/index.js
@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/browser';
 import { pickBy } from 'lodash';
 import { parseUrlPathname } from '~/lib/utils/url_utility';
 import {
@@ -6,7 +5,7 @@ import {
   SUPPORTED_FILTER_PARAMETERS,
   validPipelineTabNames,
   pipelineTabName,
-} from './constants';
+} from '../constants';
 /*
     The following functions are the main engine in transforming the data as
     received from the endpoint into the format the d3 graph expects.
@@ -128,22 +127,6 @@ export const generateJobNeedsDict = (jobs = {}) => {
   }, {});
 };
 
-export const reportToSentry = (component, failureType) => {
-  Sentry.withScope((scope) => {
-    scope.setTag('component', component);
-    Sentry.captureException(failureType);
-  });
-};
-
-export const reportMessageToSentry = (component, message, context) => {
-  Sentry.withScope((scope) => {
-    // eslint-disable-next-line @gitlab/require-i18n-strings
-    scope.setContext('Vue data', context);
-    scope.setTag('component', component);
-    Sentry.captureMessage(message);
-  });
-};
-
 export const getPipelineDefaultTab = (url) => {
   const strippedUrl = parseUrlPathname(url);
   const regexp = /\w*$/;
diff --git a/app/assets/javascripts/ci/pipeline_details/components/parsing_utils.js b/app/assets/javascripts/ci/pipeline_details/utils/parsing_utils.js
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/parsing_utils.js
rename to app/assets/javascripts/ci/pipeline_details/utils/parsing_utils.js
index e158f8809b515..cfe488b7d1413 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/parsing_utils.js
+++ b/app/assets/javascripts/ci/pipeline_details/utils/parsing_utils.js
@@ -1,7 +1,7 @@
 import { memoize } from 'lodash';
-import { createNodeDict } from '../utils';
 import { EXPLICIT_NEEDS_PROPERTY, NEEDS_PROPERTY } from '../constants';
-import { createSankey } from './dag/drawing_utils';
+import { createSankey } from '../dag/drawing_utils';
+import { createNodeDict } from './index';
 
 /*
   A peformant alternative to lodash's isEqual. Because findIndex always finds
diff --git a/app/assets/javascripts/ci/pipeline_details/components/unwrapping_utils.js b/app/assets/javascripts/ci/pipeline_details/utils/unwrapping_utils.js
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/unwrapping_utils.js
rename to app/assets/javascripts/ci/pipeline_details/utils/unwrapping_utils.js
index d42a11c3aba1f..7ac813bd527ff 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/unwrapping_utils.js
+++ b/app/assets/javascripts/ci/pipeline_details/utils/unwrapping_utils.js
@@ -1,4 +1,4 @@
-import { reportToSentry } from '../utils';
+import { reportToSentry } from '~/ci/utils';
 import { EXPLICIT_NEEDS_PROPERTY, NEEDS_PROPERTY } from '../constants';
 
 const unwrapGroups = (stages) => {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/job_pill.vue b/app/assets/javascripts/ci/pipeline_editor/components/graph/job_pill.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/job_pill.vue
rename to app/assets/javascripts/ci/pipeline_editor/components/graph/job_pill.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/ci/pipeline_editor/components/graph/pipeline_graph.vue
similarity index 97%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue
rename to app/assets/javascripts/ci/pipeline_editor/components/graph/pipeline_graph.vue
index 64210576b2942..eb906cfc48600 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/graph/pipeline_graph.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { DRAW_FAILURE, DEFAULT } from '../../constants';
-import LinksLayer from '../graph_shared/links_layer.vue';
+import { DRAW_FAILURE, DEFAULT } from '~/ci/pipeline_details/constants';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
 import JobPill from './job_pill.vue';
 import StageName from './stage_name.vue';
 
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/stage_name.vue b/app/assets/javascripts/ci/pipeline_editor/components/graph/stage_name.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_graph/stage_name.vue
rename to app/assets/javascripts/ci/pipeline_editor/components/graph/stage_name.vue
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
index d1c9439e4cd1f..f00098105d376 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
@@ -1,7 +1,7 @@
 <script>
 import { __ } from '~/locale';
-import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/components/parsing_utils';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
 import { PIPELINE_FAILURE } from '../../constants';
 
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index cdc5317572995..5ce3c64514565 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -5,13 +5,10 @@ import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
 import getPipelineQuery from '~/ci/pipeline_editor/graphql/queries/pipeline.query.graphql';
 import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import PipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue';
+import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue';
 
 const POLL_INTERVAL = 10000;
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
index 265ca742275b9..c7c15cdd76e97 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -2,7 +2,7 @@
 import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import CiEditorHeader from 'ee_else_ce/ci/pipeline_editor/components/editor/ci_editor_header.vue';
 import { s__, __ } from '~/locale';
-import PipelineGraph from '~/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue';
+import PipelineGraph from '~/ci/pipeline_editor/components/graph/pipeline_graph.vue';
 import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import {
   CREATE_TAB,
diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue
index 0a1da8bcd11e8..49562b0be28fe 100644
--- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue
@@ -4,7 +4,7 @@ import { fetchPolicies } from '~/lib/graphql';
 import { mergeUrlParams, queryToObject, redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import { __, s__ } from '~/locale';
 
-import { unwrapStagesWithNeeds } from '~/ci/pipeline_details/components/unwrapping_utils';
+import { unwrapStagesWithNeeds } from '~/ci/pipeline_details/utils/unwrapping_utils';
 
 import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes_dialog.vue';
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/accessors/linked_pipelines_accessors.js b/app/assets/javascripts/ci/pipeline_mini_graph/accessors/linked_pipelines_accessors.js
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/accessors/linked_pipelines_accessors.js
rename to app/assets/javascripts/ci/pipeline_mini_graph/accessors/linked_pipelines_accessors.js
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_stage.query.graphql b/app/assets/javascripts/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stage.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_stage.query.graphql
rename to app/assets/javascripts/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stage.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql b/app/assets/javascripts/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stages.query.graphql
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql
rename to app/assets/javascripts/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stages.query.graphql
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/job_item.vue b/app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/job_item.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_job_item.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_job_item.vue
similarity index 94%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_job_item.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/legacy_job_item.vue
index d6e585d093b87..27917d029b3e2 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_job_item.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_job_item.vue
@@ -1,11 +1,11 @@
 <script>
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import ActionComponent from '~/ci/common/private/job_action_component.vue';
+import JobNameComponent from '~/ci/common/private/job_name_component.vue';
+import { ICONS } from '~/ci/pipeline_details/constants';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { s__, sprintf } from '~/locale';
-import { reportToSentry } from '../../utils';
-import ActionComponent from '../jobs_shared/action_component.vue';
-import JobNameComponent from '../jobs_shared/job_name_component.vue';
-import { ICONS } from '../../constants';
+import { reportToSentry } from '../utils';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
similarity index 98%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_stage.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
index 048e42731c733..682393d8901b5 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
@@ -15,9 +15,9 @@
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
+import eventHub from '~/ci/pipeline_details/event_hub';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__, sprintf } from '~/locale';
-import eventHub from '../../event_hub';
 import LegacyJobItem from './legacy_job_item.vue';
 
 export default {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/linked_pipelines_mini_list.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue b/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_mini_graph.vue
similarity index 93%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/pipeline_mini_graph.vue
index a4e6fec1625af..358d3dc826e13 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_mini_graph.vue
@@ -2,14 +2,11 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
-import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/components/parsing_utils';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
+import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import { PIPELINE_MINI_GRAPH_POLL_INTERVAL } from '~/ci/pipeline_details/constants';
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
-import getPipelineStagesQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql';
+import getPipelineStagesQuery from './graphql/queries/get_pipeline_stages.query.graphql';
 import LegacyPipelineMiniGraph from './legacy_pipeline_mini_graph.vue';
 
 export default {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stage.vue
similarity index 87%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stage.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stage.vue
index 44e2849cdac44..747b5d33b1afc 100644
--- a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stage.vue
@@ -2,11 +2,8 @@
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 import { PIPELINE_MINI_GRAPH_POLL_INTERVAL } from '~/ci/pipeline_details/constants';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
-import getPipelineStageQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stage.query.graphql';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
+import getPipelineStageQuery from './graphql/queries/get_pipeline_stage.query.graphql';
 import JobItem from './job_item.vue';
 
 export default {
diff --git a/app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stages.vue b/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stages.vue
similarity index 100%
rename from app/assets/javascripts/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stages.vue
rename to app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stages.vue
diff --git a/app/assets/javascripts/ci/utils.js b/app/assets/javascripts/ci/utils.js
new file mode 100644
index 0000000000000..eb9e9538b7564
--- /dev/null
+++ b/app/assets/javascripts/ci/utils.js
@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+
+export const reportToSentry = (component, failureType) => {
+  Sentry.withScope((scope) => {
+    scope.setTag('component', component);
+    Sentry.captureException(failureType);
+  });
+};
+
+export const reportMessageToSentry = (component, message, context) => {
+  Sentry.withScope((scope) => {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    scope.setContext('Vue data', context);
+    scope.setTag('component', component);
+    Sentry.captureMessage(message);
+  });
+};
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index f398e5e5ac8dc..589acc7692621 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -2,7 +2,7 @@
 import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
-import PipelinesTableComponent from '~/ci/pipeline_details/components/pipelines_list/pipelines_table.vue';
+import PipelinesTableComponent from '~/ci/pipeline_details/pipelines_list/components/pipelines_table.vue';
 import { PipelineKeyOptions } from '~/ci/pipeline_details/constants';
 import eventHub from '~/ci/pipeline_details/event_hub';
 import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/pipelines_table_wrapper.vue
index 2fa8060abb303..f9b95c233adbd 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table_wrapper.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import getMergeRequestPipelines from '~/ci/pipeline_details/graphql/queries/get_merge_request_pipelines.query.graphql';
+import getMergeRequestPipelines from '~/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
-import { getQueryHeaders } from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders } from '~/ci/pipeline_details/graph/utils';
 import { graphqlEtagMergeRequestPipelines } from '~/ci/pipeline_details/utils';
 
 export default {
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
index c4ec8ea40332e..b7355b909a127 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -2,16 +2,13 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
-import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/components/parsing_utils';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
-import PipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
+import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
-import getPipelineStagesQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql';
+import getPipelineStagesQuery from '~/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stages.query.graphql';
 import { formatStages } from '../utils';
 import { COMMIT_BOX_POLL_INTERVAL } from '../constants';
 
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
index b5cc2a320db2a..ccecc914cf178 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -2,10 +2,7 @@
 import { GlLoadingIcon, GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import getLatestPipelineStatusQuery from '../graphql/queries/get_latest_pipeline_status.query.graphql';
 import { COMMIT_BOX_POLL_INTERVAL, PIPELINE_STATUS_FETCH_ERROR } from '../constants';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 6250bedb2ec2e..206b6c7699e50 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -11,9 +11,9 @@ import {
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/components/parsing_utils';
-import PipelineArtifacts from '~/ci/pipeline_details/components/pipelines_list/pipelines_artifacts.vue';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
+import PipelineArtifacts from '~/ci/pipeline_details/pipelines_list/components/pipelines_artifacts.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { MT_MERGE_STRATEGY } from '../constants';
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.vue b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.vue
index a4637c2472693..1b03b9c04e1d3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.vue
@@ -3,7 +3,7 @@ import { uniqueId, uniq } from 'lodash';
 import { __ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_NO_CONTENT } from '~/lib/utils/http_status';
-import TestCaseDetails from '~/ci/pipeline_details/components/test_reports/test_case_details.vue';
+import TestCaseDetails from '~/ci/pipeline_details/test_reports/test_case_details.vue';
 import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
 import MrWidgetRow from '~/vue_merge_request_widget/components/widget/widget_content_row.vue';
 import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
diff --git a/ee/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/constants.js b/ee/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/constants.js
similarity index 89%
rename from ee/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/constants.js
rename to ee/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/constants.js
index c21783ccc4a2c..0055370228f49 100644
--- a/ee/app/assets/javascripts/ci/pipeline_details/components/pipelines_list/tokens/constants.js
+++ b/ee/app/assets/javascripts/ci/pipeline_details/pipelines_list/tokens/constants.js
@@ -1,5 +1,5 @@
 import { s__ } from '~/locale';
-import { PIPELINE_SOURCES as CE_PIPELINE_SOURCES } from '~/ci/pipeline_details/components/pipelines_list/tokens/constants';
+import { PIPELINE_SOURCES as CE_PIPELINE_SOURCES } from '~/ci/pipeline_details/pipelines_list/tokens/constants';
 
 const EE_PIPELINE_SOURCES = [
   {
diff --git a/ee/app/assets/javascripts/ci/pipeline_details/components/pipeline_tabs.vue b/ee/app/assets/javascripts/ci/pipeline_details/tabs/pipeline_tabs.vue
similarity index 98%
rename from ee/app/assets/javascripts/ci/pipeline_details/components/pipeline_tabs.vue
rename to ee/app/assets/javascripts/ci/pipeline_details/tabs/pipeline_tabs.vue
index 290495af788a4..394621b6bf8d7 100644
--- a/ee/app/assets/javascripts/ci/pipeline_details/components/pipeline_tabs.vue
+++ b/ee/app/assets/javascripts/ci/pipeline_details/tabs/pipeline_tabs.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTab, GlBadge } from '@gitlab/ui';
 import Api from '~/api';
-import BasePipelineTabs from '~/ci/pipeline_details/components/pipeline_tabs.vue';
+import BasePipelineTabs from '~/ci/pipeline_details/tabs/pipeline_tabs.vue';
 import {
   codeQualityTabName,
   licensesTabName,
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue b/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
index 881c665163799..3557656b8763c 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue
@@ -3,10 +3,7 @@ import { GlButton, GlLink, GlSprintf, GlScrollableTabs, GlAlert } from '@gitlab/
 import { s__ } from '~/locale';
 import { VARIANT_WARNING } from '~/alert';
 import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import onDemandScanCounts from '../graphql/on_demand_scan_counts.query.graphql';
 import {
   HELP_PAGE_PATH,
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index 69f96dd4f484c..e1f637a46b67b 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -14,10 +14,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { DAST_SHORT_NAME } from '~/security_configuration/components/constants';
 import { __, s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import {
-  getQueryHeaders,
-  toggleQueryPollingByVisibility,
-} from '~/ci/pipeline_details/components/graph/utils';
+import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import handlesErrors from '../../mixins/handles_errors';
 import Actions from '../actions.vue';
 import EmptyState from '../empty_state.vue';
diff --git a/ee/spec/frontend/on_demand_scans/components/tabs/base_tab_spec.js b/ee/spec/frontend/on_demand_scans/components/tabs/base_tab_spec.js
index 686ecf7aca3b0..98347c60e6a76 100644
--- a/ee/spec/frontend/on_demand_scans/components/tabs/base_tab_spec.js
+++ b/ee/spec/frontend/on_demand_scans/components/tabs/base_tab_spec.js
@@ -18,7 +18,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { BASE_TABS_TABLE_FIELDS, PIPELINES_POLL_INTERVAL } from 'ee/on_demand_scans/constants';
 import * as sharedGraphQLUtils from '~/graphql_shared/utils';
-import * as graphQlUtils from '~/ci/pipeline_details/components/graph/utils';
+import * as graphQlUtils from '~/ci/pipeline_details/graph/utils';
 import { PROJECT_ON_DEMAND_SCAN_COUNTS_ETAG_MOCK } from '../../mocks';
 
 jest.mock('~/lib/utils/common_utils');
diff --git a/ee/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/ee/spec/frontend/pipelines/components/pipeline_tabs_spec.js
index e982875ee4c6e..78d17c11c03bd 100644
--- a/ee/spec/frontend/pipelines/components/pipeline_tabs_spec.js
+++ b/ee/spec/frontend/pipelines/components/pipeline_tabs_spec.js
@@ -3,8 +3,8 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import Api from '~/api';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import BasePipelineTabs from '~/ci/pipeline_details/components/pipeline_tabs.vue';
-import PipelineTabs from 'ee/ci/pipeline_details/components/pipeline_tabs.vue';
+import BasePipelineTabs from '~/ci/pipeline_details/tabs/pipeline_tabs.vue';
+import PipelineTabs from 'ee/ci/pipeline_details/tabs/pipeline_tabs.vue';
 import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
 import { SERVICE_PING_PIPELINE_SECURITY_VISIT } from '~/tracking/constants';
 
diff --git a/qa/qa/page/project/pipeline/index.rb b/qa/qa/page/project/pipeline/index.rb
index 8547cc8790882..435d2008d87b4 100644
--- a/qa/qa/page/project/pipeline/index.rb
+++ b/qa/qa/page/project/pipeline/index.rb
@@ -5,23 +5,23 @@ module Page
     module Project
       module Pipeline
         class Index < QA::Page::Base
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_url.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_url.vue' do
             element :pipeline_url_link
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_status_badge.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_status_badge.vue' do
             element :pipeline_commit_status
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue' do
             element :pipeline_retry_button
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipelines_list/nav_controls.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/pipelines_list/components/nav_controls.vue' do
             element :run_pipeline_button
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipelines_list/pipelines_table.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/pipelines_list/components/pipelines_table.vue' do
             element :pipeline_row_container
           end
 
diff --git a/qa/qa/page/project/pipeline/show.rb b/qa/qa/page/project/pipeline/show.rb
index 25b82709511d8..db678ab1285d6 100644
--- a/qa/qa/page/project/pipeline/show.rb
+++ b/qa/qa/page/project/pipeline/show.rb
@@ -7,21 +7,21 @@ module Pipeline
         class Show < QA::Page::Base
           include Component::CiBadgeLink
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/pipeline_details_header.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue' do
             element :pipeline_details_header, required: true
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/graph/graph_component.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue' do
             element :pipeline_graph, /class.*pipeline-graph.*/ # rubocop:disable QA/ElementWithPattern
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/graph/job_item.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue' do
             element :job_item_container, required: true
             element :job_link, required: true
             element :job_action_button
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/graph/linked_pipeline.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue' do
             element :expand_linked_pipeline_button
             element :linked_pipeline_container
             element :downstream_title_content
@@ -35,7 +35,7 @@ class Show < QA::Page::Base
             element :status_icon, 'ci-status-icon-${status}' # rubocop:disable QA/ElementWithPattern
           end
 
-          view 'app/assets/javascripts/ci/pipeline_details/components/graph/job_group_dropdown.vue' do
+          view 'app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue' do
             element :job_dropdown_container
             element :jobs_dropdown_menu
           end
diff --git a/spec/contracts/consumer/resources/graphql/pipelines.js b/spec/contracts/consumer/resources/graphql/pipelines.js
index 2675597e10ac0..201045e011fb2 100644
--- a/spec/contracts/consumer/resources/graphql/pipelines.js
+++ b/spec/contracts/consumer/resources/graphql/pipelines.js
@@ -5,7 +5,7 @@ import { extractGraphQLQuery } from '../../helpers/graphql_query_extractor';
 export async function getPipelineHeaderDataRequest(endpoint) {
   const { url } = endpoint;
   const query = await extractGraphQLQuery(
-    'app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql',
+    'app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql',
   );
   const graphqlQuery = {
     query,
diff --git a/spec/contracts/consumer/specs/project/pipelines/show.spec.js b/spec/contracts/consumer/specs/project/pipelines/show.spec.js
index 423d85f21eb1b..d2743b1037fef 100644
--- a/spec/contracts/consumer/specs/project/pipelines/show.spec.js
+++ b/spec/contracts/consumer/specs/project/pipelines/show.spec.js
@@ -27,7 +27,7 @@ pactWith(
     describe(GET_PIPELINE_HEADER_DATA_PROVIDER_NAME, () => {
       beforeEach(async () => {
         const query = await extractGraphQLQuery(
-          'app/assets/javascripts/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql',
+          'app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql',
         );
         const graphqlQuery = new GraphQLInteraction()
           .given(PipelineHeaderData.scenario.state)
diff --git a/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js b/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js
index 57220dfbd74b2..4ec1dd4b605d7 100644
--- a/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PipelineEditorMiniGraph from '~/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
 import { PIPELINE_FAILURE } from '~/ci/pipeline_editor/constants';
 import { mockLinkedPipelines, mockProjectFullPath, mockProjectPipeline } from '../../mock_data';
diff --git a/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
index 5423e7d4e409d..1a2ed60a6f4b2 100644
--- a/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
@@ -6,8 +6,9 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PipelineStatus, { i18n } from '~/ci/pipeline_editor/components/header/pipeline_status.vue';
 import getPipelineQuery from '~/ci/pipeline_editor/graphql/queries/pipeline.query.graphql';
-import PipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue';
+import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import PipelineEditorMiniGraph from '~/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
+import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql';
 import { mockCommitSha, mockProjectPipeline, mockProjectFullPath } from '../../mock_data';
 
 Vue.use(VueApollo);
@@ -21,6 +22,16 @@ describe('Pipeline Status', () => {
     const handlers = [[getPipelineQuery, mockPipelineQuery]];
     mockApollo = createMockApollo(handlers);
 
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: getPipelineEtag,
+      data: {
+        etags: {
+          __typename: 'EtagValues',
+          pipeline: 'pipelines/1',
+        },
+      },
+    });
+
     wrapper = shallowMount(PipelineStatus, {
       apolloProvider: mockApollo,
       propsData: {
diff --git a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
index 914fdfbcc3751..69e91f1130975 100644
--- a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -19,7 +19,7 @@ import {
   VALIDATE_TAB,
   VALIDATE_TAB_BADGE_DISMISSED_KEY,
 } from '~/ci/pipeline_editor/constants';
-import PipelineGraph from '~/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue';
+import PipelineGraph from '~/ci/pipeline_editor/components/graph/pipeline_graph.vue';
 import getBlobContent from '~/ci/pipeline_editor/graphql/queries/blob_content.query.graphql';
 import {
   mockBlobContentQueryResponse,
diff --git a/spec/frontend/ci/pipeline_editor/mock_data.js b/spec/frontend/ci/pipeline_editor/mock_data.js
index 245cdfa70435d..e08c35f1555ca 100644
--- a/spec/frontend/ci/pipeline_editor/mock_data.js
+++ b/spec/frontend/ci/pipeline_editor/mock_data.js
@@ -1,5 +1,5 @@
 import { CI_CONFIG_STATUS_INVALID, CI_CONFIG_STATUS_VALID } from '~/ci/pipeline_editor/constants';
-import { unwrapStagesWithNeeds } from '~/ci/pipeline_details/components/unwrapping_utils';
+import { unwrapStagesWithNeeds } from '~/ci/pipeline_details/utils/unwrapping_utils';
 import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 
 export const commonOptions = {
diff --git a/spec/frontend/ci/pipeline_schedules/mock_data.js b/spec/frontend/ci/pipeline_schedules/mock_data.js
index 8d4e0f1bea660..711b120c61e8d 100644
--- a/spec/frontend/ci/pipeline_schedules/mock_data.js
+++ b/spec/frontend/ci/pipeline_schedules/mock_data.js
@@ -1,8 +1,8 @@
 // Fixture located at spec/frontend/fixtures/pipeline_schedules.rb
+import mockGetSinglePipelineScheduleGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.single.json';
 import mockGetPipelineSchedulesGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.json';
 import mockGetPipelineSchedulesAsGuestGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.as_guest.json';
 import mockGetPipelineSchedulesTakeOwnershipGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.take_ownership.json';
-import mockGetSinglePipelineScheduleGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.single.json';
 
 const {
   data: {
diff --git a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
index 6b0286bbbf36a..891cd0a6b8312 100644
--- a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
+++ b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
@@ -7,11 +7,11 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import CommitBoxPipelineMiniGraph from '~/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue';
-import PipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import { COMMIT_BOX_POLL_INTERVAL } from '~/projects/commit_box/info/constants';
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
-import getPipelineStagesQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql';
+import getPipelineStagesQuery from '~/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stages.query.graphql';
 import * as sharedGraphQlUtils from '~/graphql_shared/utils';
 import {
   mockDownstreamQueryResponse,
diff --git a/spec/frontend/commit/pipelines/pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/pipelines_table_wrapper_spec.js
index f639c5f86a0ad..78e303bd6aa73 100644
--- a/spec/frontend/commit/pipelines/pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/pipelines_table_wrapper_spec.js
@@ -8,7 +8,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 
 import { createAlert } from '~/alert';
 import PipelinesTableWrapper from '~/commit/pipelines/pipelines_table_wrapper.vue';
-import getMergeRequestsPipelines from '~/ci/pipeline_details/graphql/queries/get_merge_request_pipelines.query.graphql';
+import getMergeRequestsPipelines from '~/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql';
 
 import { mergeRequestPipelinesResponse } from '../mock_data';
 
diff --git a/spec/frontend/fixtures/pipeline_header.rb b/spec/frontend/fixtures/pipeline_header.rb
index 25abfe47dc714..744df18a4035f 100644
--- a/spec/frontend/fixtures/pipeline_header.rb
+++ b/spec/frontend/fixtures/pipeline_header.rb
@@ -12,7 +12,7 @@
   let_it_be(:user) { project.first_owner }
   let_it_be(:commit) { create(:commit, project: project) }
 
-  let(:query_path) { 'ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql' }
+  let(:query_path) { 'ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql' }
 
   context 'with successful pipeline' do
     let_it_be(:pipeline) do
diff --git a/spec/frontend/fixtures/pipelines.rb b/spec/frontend/fixtures/pipelines.rb
index 44911e93dd10f..61433363ce7df 100644
--- a/spec/frontend/fixtures/pipelines.rb
+++ b/spec/frontend/fixtures/pipelines.rb
@@ -71,7 +71,7 @@
     end
 
     let_it_be(:query) do
-      get_graphql_query_as_string("ci/pipeline_details/graphql/queries/#{get_pipeline_actions_query}")
+      get_graphql_query_as_string("ci/pipeline_details/pipelines_list/graphql/queries/#{get_pipeline_actions_query}")
     end
 
     it "#{fixtures_path}#{get_pipeline_actions_query}.json" do
diff --git a/spec/frontend/pipelines/components/dag/dag_annotations_spec.js b/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
index 03e4b79ca4a08..be9d7a8b714d8 100644
--- a/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
@@ -1,7 +1,7 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import DagAnnotations from '~/ci/pipeline_details/components/dag/dag_annotations.vue';
+import DagAnnotations from '~/ci/pipeline_details/dag/components/dag_annotations.vue';
 import { singleNote, multiNote } from './mock_data';
 
 describe('The DAG annotations', () => {
diff --git a/spec/frontend/pipelines/components/dag/dag_graph_spec.js b/spec/frontend/pipelines/components/dag/dag_graph_spec.js
index e7d632bdeebc4..23f62ab9d934b 100644
--- a/spec/frontend/pipelines/components/dag/dag_graph_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_graph_spec.js
@@ -1,13 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
-import {
-  IS_HIGHLIGHTED,
-  LINK_SELECTOR,
-  NODE_SELECTOR,
-} from '~/ci/pipeline_details/components/dag/constants';
-import DagGraph from '~/ci/pipeline_details/components/dag/dag_graph.vue';
-import { createSankey } from '~/ci/pipeline_details/components/dag/drawing_utils';
-import { highlightIn, highlightOut } from '~/ci/pipeline_details/components/dag/interactions';
-import { removeOrphanNodes } from '~/ci/pipeline_details/components/parsing_utils';
+import { IS_HIGHLIGHTED, LINK_SELECTOR, NODE_SELECTOR } from '~/ci/pipeline_details/dag/constants';
+import DagGraph from '~/ci/pipeline_details/dag/components/dag_graph.vue';
+import { createSankey } from '~/ci/pipeline_details/dag/drawing_utils';
+import { highlightIn, highlightOut } from '~/ci/pipeline_details/dag/interactions';
+import { removeOrphanNodes } from '~/ci/pipeline_details/utils/parsing_utils';
 import { parsedData } from './mock_data';
 
 describe('The DAG graph', () => {
diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js
index 2cc1e9cd48f74..de9490be6073b 100644
--- a/spec/frontend/pipelines/components/dag/dag_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_spec.js
@@ -1,14 +1,10 @@
 import { GlAlert, GlEmptyState } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import {
-  ADD_NOTE,
-  REMOVE_NOTE,
-  REPLACE_NOTES,
-} from '~/ci/pipeline_details/components/dag/constants';
-import Dag from '~/ci/pipeline_details/components/dag/dag.vue';
-import DagAnnotations from '~/ci/pipeline_details/components/dag/dag_annotations.vue';
-import DagGraph from '~/ci/pipeline_details/components/dag/dag_graph.vue';
+import { ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from '~/ci/pipeline_details/dag/constants';
+import Dag from '~/ci/pipeline_details/dag/dag.vue';
+import DagAnnotations from '~/ci/pipeline_details/dag/components/dag_annotations.vue';
+import DagGraph from '~/ci/pipeline_details/dag/components/dag_graph.vue';
 
 import { PARSE_FAILURE, UNSUPPORTED_DATA } from '~/ci/pipeline_details/constants';
 import {
diff --git a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
index 41daf7065d5b3..6f3fd05ae4bef 100644
--- a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
+++ b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
@@ -1,5 +1,5 @@
-import { createSankey } from '~/ci/pipeline_details/components/dag/drawing_utils';
-import { parseData } from '~/ci/pipeline_details/components/parsing_utils';
+import { createSankey } from '~/ci/pipeline_details/dag/drawing_utils';
+import { parseData } from '~/ci/pipeline_details/utils/parsing_utils';
 import { mockParsedGraphQLNodes } from './mock_data';
 
 describe('DAG visualization drawing utilities', () => {
diff --git a/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
index c58b09871b98e..b2d443c18ca8a 100644
--- a/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
@@ -5,9 +5,9 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
-import FailedJobsApp from '~/ci/pipeline_details/components/jobs/failed_jobs_app.vue';
-import FailedJobsTable from '~/ci/pipeline_details/components/jobs/failed_jobs_table.vue';
-import GetFailedJobsQuery from '~/ci/pipeline_details/graphql/queries/get_failed_jobs.query.graphql';
+import FailedJobsApp from '~/ci/pipeline_details/jobs/failed_jobs_app.vue';
+import FailedJobsTable from '~/ci/pipeline_details/jobs/components/failed_jobs_table.vue';
+import GetFailedJobsQuery from '~/ci/pipeline_details/jobs/graphql/queries/get_failed_jobs.query.graphql';
 import { mockFailedJobsQueryResponse } from '../../mock_data';
 
 Vue.use(VueApollo);
diff --git a/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js b/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
index 16f8cd1ea1936..cb2d8ad85d564 100644
--- a/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
+++ b/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
@@ -7,8 +7,8 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { createAlert } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
-import FailedJobsTable from '~/ci/pipeline_details/components/jobs/failed_jobs_table.vue';
-import RetryFailedJobMutation from '~/ci/pipeline_details/graphql/mutations/retry_failed_job.mutation.graphql';
+import FailedJobsTable from '~/ci/pipeline_details/jobs/components/failed_jobs_table.vue';
+import RetryFailedJobMutation from '~/ci/pipeline_details/jobs/graphql/mutations/retry_failed_job.mutation.graphql';
 import { TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 import {
   successRetryMutationResponse,
diff --git a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
index 4e48d20d7e2d2..bdbbec15e1e18 100644
--- a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
@@ -5,9 +5,9 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
-import JobsApp from '~/ci/pipeline_details/components/jobs/jobs_app.vue';
+import JobsApp from '~/ci/pipeline_details/jobs/jobs_app.vue';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
-import getPipelineJobsQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_jobs.query.graphql';
+import getPipelineJobsQuery from '~/ci/pipeline_details/jobs/graphql/queries/get_pipeline_jobs.query.graphql';
 import { mockPipelineJobsQueryResponse } from '../../mock_data';
 
 Vue.use(VueApollo);
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/job_item_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/job_item_spec.js
index e7607325602b5..9c14e75caa487 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/job_item_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/job_item_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import JobItem from '~/ci/pipeline_details/components/pipeline_mini_graph/job_item.vue';
+import JobItem from '~/ci/pipeline_mini_graph/job_item.vue';
 
 describe('JobItem', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph_spec.js
index fa2fd1d648f04..916f3053153af 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { pipelines } from 'test_fixtures/pipelines/pipelines.json';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
-import PipelineStages from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stages.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineStages from '~/ci/pipeline_mini_graph/pipeline_stages.vue';
 import mockLinkedPipelines from './linked_pipelines_mock_data';
 
 const mockStages = pipelines[0].details.stages;
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_stage_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_stage_spec.js
index b6ab8fa1ebebb..6573aaf39fafc 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_stage_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/legacy_pipeline_stage_spec.js
@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import LegacyPipelineStage from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_stage.vue';
+import LegacyPipelineStage from '~/ci/pipeline_mini_graph/legacy_pipeline_stage.vue';
 import eventHub from '~/ci/pipeline_details/event_hub';
 import waitForPromises from 'helpers/wait_for_promises';
 import { stageReply } from '../../mock_data';
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
index 513acab1874aa..0396029cdafa0 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import LinkedPipelinesMiniList from '~/ci/pipeline_details/components/pipeline_mini_graph/linked_pipelines_mini_list.vue';
+import LinkedPipelinesMiniList from '~/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue';
 import mockData from './linked_pipelines_mock_data';
 
 describe('Linked pipeline mini list', () => {
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
index 98b19535a8662..6833726a29793 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
@@ -8,9 +8,9 @@ import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 
 import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql';
-import getPipelineStagesQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stages.query.graphql';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
-import PipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_mini_graph.vue';
+import getPipelineStagesQuery from '~/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stages.query.graphql';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import * as sharedGraphQlUtils from '~/graphql_shared/utils';
 
 import {
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
index ec1f3fb61c9d8..96966bcbb84f4 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
@@ -4,8 +4,8 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 
-import getPipelineStageQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_stage.query.graphql';
-import PipelineStage from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stage.vue';
+import getPipelineStageQuery from '~/ci/pipeline_mini_graph/graphql/queries/get_pipeline_stage.query.graphql';
+import PipelineStage from '~/ci/pipeline_mini_graph/pipeline_stage.vue';
 
 Vue.use(VueApollo);
 
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
index 717e66b2e3156..bbd39c6fcd929 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { pipelines } from 'test_fixtures/pipelines/pipelines.json';
-import LegacyPipelineStage from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_stage.vue';
-import PipelineStages from '~/ci/pipeline_details/components/pipeline_mini_graph/pipeline_stages.vue';
+import LegacyPipelineStage from '~/ci/pipeline_mini_graph/legacy_pipeline_stage.vue';
+import PipelineStages from '~/ci/pipeline_mini_graph/pipeline_stages.vue';
 
 const mockStages = pipelines[0].details.stages;
 
diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
index 2974f4fb916fd..700d51930dd93 100644
--- a/spec/frontend/pipelines/components/pipeline_tabs_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
@@ -1,7 +1,7 @@
 import { GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import PipelineTabs from '~/ci/pipeline_details/components/pipeline_tabs.vue';
+import PipelineTabs from '~/ci/pipeline_details/tabs/pipeline_tabs.vue';
 import { TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 
 describe('The Pipeline Tabs', () => {
diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index c2afeb2ccb97a..431f32ce24fff 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -5,7 +5,7 @@ import { nextTick } from 'vue';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
-import PipelinesFilteredSearch from '~/ci/pipeline_details/components/pipelines_list/pipelines_filtered_search.vue';
+import PipelinesFilteredSearch from '~/ci/pipeline_details/pipelines_list/components/pipelines_filtered_search.vue';
 import {
   FILTERED_SEARCH_TERM,
   OPERATORS_IS,
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
index d83d536017e33..558063ecba5ef 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
@@ -1,6 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import CiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/ci_templates.vue';
+import CiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/ci_templates.vue';
 
 const pipelineEditorPath = '/-/ci/editor';
 const suggestedCiTemplates = [
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
index ffb3cf2a294d0..cdd3053d66a30 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
@@ -3,8 +3,8 @@ import { nextTick } from 'vue';
 import { GlPopover, GlButton } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
-import IosTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/ios_templates.vue';
-import CiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/ci_templates.vue';
+import IosTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/ios_templates.vue';
+import CiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/ci_templates.vue';
 
 const pipelineEditorPath = '/-/ci/editor';
 const registrationToken = 'SECRET_TOKEN';
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
index fc4020c7f6ad3..76b4cc163b281 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
@@ -1,8 +1,8 @@
 import '~/commons';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import PipelinesCiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
-import CiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/ci_templates.vue';
+import PipelinesCiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/pipelines_ci_templates.vue';
+import CiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/ci_templates.vue';
 
 const pipelineEditorPath = '/-/ci/editor';
 
diff --git a/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_job_details_spec.js b/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_job_details_spec.js
index 2e76da7ed66a9..cc68af4f7f36e 100644
--- a/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_job_details_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_job_details_spec.js
@@ -6,9 +6,9 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import FailedJobDetails from '~/ci/pipeline_details/components/pipelines_list/failure_widget/failed_job_details.vue';
-import RetryMrFailedJobMutation from '~/ci/pipeline_details/graphql/mutations/retry_mr_failed_job.mutation.graphql';
-import { BRIDGE_KIND } from '~/ci/pipeline_details/components/graph/constants';
+import FailedJobDetails from '~/ci/pipeline_details/pipelines_list/failure_widget/failed_job_details.vue';
+import RetryMrFailedJobMutation from '~/ci/merge_requests/graphql/mutations/retry_mr_failed_job.mutation.graphql';
+import { BRIDGE_KIND } from '~/ci/pipeline_details/graph/constants';
 import { job } from './mock';
 
 Vue.use(VueApollo);
diff --git a/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_jobs_list_spec.js b/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_jobs_list_spec.js
index 6865b63d0551e..6c1c5f9c223b1 100644
--- a/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_jobs_list_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/failure_widget/failed_jobs_list_spec.js
@@ -6,10 +6,10 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
-import FailedJobsList from '~/ci/pipeline_details/components/pipelines_list/failure_widget/failed_jobs_list.vue';
-import FailedJobDetails from '~/ci/pipeline_details/components/pipelines_list/failure_widget/failed_job_details.vue';
-import * as utils from '~/ci/pipeline_details/components/pipelines_list/failure_widget/utils';
-import getPipelineFailedJobs from '~/ci/pipeline_details/graphql/queries/get_pipeline_failed_jobs.query.graphql';
+import FailedJobsList from '~/ci/pipeline_details/pipelines_list/failure_widget/failed_jobs_list.vue';
+import FailedJobDetails from '~/ci/pipeline_details/pipelines_list/failure_widget/failed_job_details.vue';
+import * as utils from '~/ci/pipeline_details/pipelines_list/failure_widget/utils';
+import getPipelineFailedJobs from '~/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_failed_jobs.query.graphql';
 import { failedJobsMock, failedJobsMock2, failedJobsMockEmpty, activeFailedJobsMock } from './mock';
 
 Vue.use(VueApollo);
diff --git a/spec/frontend/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget_spec.js b/spec/frontend/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget_spec.js
index 7bcde4d57d8ca..5135bf57b2259 100644
--- a/spec/frontend/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget_spec.js
@@ -1,7 +1,7 @@
 import { GlButton, GlCard, GlIcon, GlPopover } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import PipelineFailedJobsWidget from '~/ci/pipeline_details/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
-import FailedJobsList from '~/ci/pipeline_details/components/pipelines_list/failure_widget/failed_jobs_list.vue';
+import PipelineFailedJobsWidget from '~/ci/pipeline_details/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
+import FailedJobsList from '~/ci/pipeline_details/pipelines_list/failure_widget/failed_jobs_list.vue';
 
 jest.mock('~/alert');
 
diff --git a/spec/frontend/pipelines/components/pipelines_list/failure_widget/utils_spec.js b/spec/frontend/pipelines/components/pipelines_list/failure_widget/utils_spec.js
index 7311509145659..16a0da4e0548c 100644
--- a/spec/frontend/pipelines/components/pipelines_list/failure_widget/utils_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/failure_widget/utils_spec.js
@@ -1,7 +1,7 @@
 import {
   isFailedJob,
   sortJobsByStatus,
-} from '~/ci/pipeline_details/components/pipelines_list/failure_widget/utils';
+} from '~/ci/pipeline_details/pipelines_list/failure_widget/utils';
 
 describe('isFailedJob', () => {
   describe('when the job argument is undefined', () => {
diff --git a/spec/frontend/pipelines/components/pipelines_list/pipieline_stop_modal_spec.js b/spec/frontend/pipelines/components/pipelines_list/pipeline_stop_modal_spec.js
similarity index 85%
rename from spec/frontend/pipelines/components/pipelines_list/pipieline_stop_modal_spec.js
rename to spec/frontend/pipelines/components/pipelines_list/pipeline_stop_modal_spec.js
index 9314522282f44..15a202424d01f 100644
--- a/spec/frontend/pipelines/components/pipelines_list/pipieline_stop_modal_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/pipeline_stop_modal_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
-import PipelineStopModal from '~/ci/pipeline_details/components/pipelines_list/pipeline_stop_modal.vue';
+import PipelineStopModal from '~/ci/pipeline_details/pipelines_list/components/pipeline_stop_modal.vue';
 import { mockPipelineHeader } from '../../mock_data';
 
 describe('PipelineStopModal', () => {
diff --git a/spec/frontend/pipelines/empty_state_spec.js b/spec/frontend/pipelines/empty_state_spec.js
index f264b21f6a3be..6ef37f59f666b 100644
--- a/spec/frontend/pipelines/empty_state_spec.js
+++ b/spec/frontend/pipelines/empty_state_spec.js
@@ -2,10 +2,10 @@ import '~/commons';
 import { shallowMount } from '@vue/test-utils';
 import { GlEmptyState } from '@gitlab/ui';
 import { stubExperiments } from 'helpers/experimentation_helper';
-import EmptyState from '~/ci/pipeline_details/components/pipelines_list/empty_state.vue';
+import EmptyState from '~/ci/pipeline_details/pipelines_list/empty_state/no_ci_empty_state.vue';
 import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
-import PipelinesCiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
-import IosTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/ios_templates.vue';
+import PipelinesCiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/pipelines_ci_templates.vue';
+import IosTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/ios_templates.vue';
 
 describe('Pipelines Empty State', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js
index c0774f2def2e5..9e177156d0e53 100644
--- a/spec/frontend/pipelines/graph/action_component_spec.js
+++ b/spec/frontend/pipelines/graph/action_component_spec.js
@@ -5,7 +5,7 @@ import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import ActionComponent from '~/ci/pipeline_details/components/jobs_shared/action_component.vue';
+import ActionComponent from '~/ci/common/private/job_action_component.vue';
 
 describe('pipeline graph action component', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 8ff54b063349c..e468adada0fa4 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -1,13 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
 import mockPipelineResponse from 'test_fixtures/pipelines/pipeline_details.json';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { LAYER_VIEW, STAGE_VIEW } from '~/ci/pipeline_details/components/graph/constants';
-import PipelineGraph from '~/ci/pipeline_details/components/graph/graph_component.vue';
-import JobItem from '~/ci/pipeline_details/components/graph/job_item.vue';
-import LinkedPipelinesColumn from '~/ci/pipeline_details/components/graph/linked_pipelines_column.vue';
-import StageColumnComponent from '~/ci/pipeline_details/components/graph/stage_column_component.vue';
-import { calculatePipelineLayersInfo } from '~/ci/pipeline_details/components/graph/utils';
-import LinksLayer from '~/ci/pipeline_details/components/graph_shared/links_layer.vue';
+import { LAYER_VIEW, STAGE_VIEW } from '~/ci/pipeline_details/graph/constants';
+import PipelineGraph from '~/ci/pipeline_details/graph/components/graph_component.vue';
+import JobItem from '~/ci/pipeline_details/graph/components/job_item.vue';
+import LinkedPipelinesColumn from '~/ci/pipeline_details/graph/components/linked_pipelines_column.vue';
+import StageColumnComponent from '~/ci/pipeline_details/graph/components/stage_column_component.vue';
+import { calculatePipelineLayersInfo } from '~/ci/pipeline_details/graph/utils';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
 
 import { generateResponse, pipelineWithUpstreamDownstream } from './mock_data';
 
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 8a7ee82b2ef78..372ed2a4e1cc9 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -23,15 +23,15 @@ import {
   LAYER_VIEW,
   STAGE_VIEW,
   VIEW_TYPE_KEY,
-} from '~/ci/pipeline_details/components/graph/constants';
-import PipelineGraph from '~/ci/pipeline_details/components/graph/graph_component.vue';
-import PipelineGraphWrapper from '~/ci/pipeline_details/components/graph/graph_component_wrapper.vue';
-import GraphViewSelector from '~/ci/pipeline_details/components/graph/graph_view_selector.vue';
-import * as Api from '~/ci/pipeline_details/components/graph_shared/api';
-import LinksLayer from '~/ci/pipeline_details/components/graph_shared/links_layer.vue';
-import * as parsingUtils from '~/ci/pipeline_details/components/parsing_utils';
-import getPipelineHeaderData from '~/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql';
-import * as sentryUtils from '~/ci/pipeline_details/utils';
+} from '~/ci/pipeline_details/graph/constants';
+import PipelineGraph from '~/ci/pipeline_details/graph/components/graph_component.vue';
+import PipelineGraphWrapper from '~/ci/pipeline_details/graph/graph_component_wrapper.vue';
+import GraphViewSelector from '~/ci/pipeline_details/graph/components/graph_view_selector.vue';
+import * as Api from '~/ci/pipeline_details/graph/api_utils';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
+import * as parsingUtils from '~/ci/pipeline_details/utils/parsing_utils';
+import getPipelineHeaderData from '~/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql';
+import * as sentryUtils from '~/ci/utils';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { mockRunningPipelineHeaderData } from '../mock_data';
 import {
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index e42e8271fa003..bf98995de9c82 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,7 +1,7 @@
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import { LAYER_VIEW, STAGE_VIEW } from '~/ci/pipeline_details/components/graph/constants';
-import GraphViewSelector from '~/ci/pipeline_details/components/graph/graph_view_selector.vue';
+import { LAYER_VIEW, STAGE_VIEW } from '~/ci/pipeline_details/graph/constants';
+import GraphViewSelector from '~/ci/pipeline_details/graph/components/graph_view_selector.vue';
 
 describe('the graph view selector component', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
index 6f19f9fa2ae92..d5a1cfffe68d2 100644
--- a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
+++ b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import JobGroupDropdown from '~/ci/pipeline_details/components/graph/job_group_dropdown.vue';
+import JobGroupDropdown from '~/ci/pipeline_details/graph/components/job_group_dropdown.vue';
 
 describe('job group dropdown component', () => {
   const group = {
diff --git a/spec/frontend/pipelines/graph/job_item_spec.js b/spec/frontend/pipelines/graph/job_item_spec.js
index b1f55f278c32c..fd45dc7193f04 100644
--- a/spec/frontend/pipelines/graph/job_item_spec.js
+++ b/spec/frontend/pipelines/graph/job_item_spec.js
@@ -1,10 +1,10 @@
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import { GlBadge, GlModal, GlToast } from '@gitlab/ui';
-import JobItem from '~/ci/pipeline_details/components/graph/job_item.vue';
+import JobItem from '~/ci/pipeline_details/graph/components/job_item.vue';
 import axios from '~/lib/utils/axios_utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-import ActionComponent from '~/ci/pipeline_details/components/jobs_shared/action_component.vue';
+import ActionComponent from '~/ci/common/private/job_action_component.vue';
 
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
diff --git a/spec/frontend/pipelines/graph/job_name_component_spec.js b/spec/frontend/pipelines/graph/job_name_component_spec.js
index 3d2f54c9f10c3..ca201aee648df 100644
--- a/spec/frontend/pipelines/graph/job_name_component_spec.js
+++ b/spec/frontend/pipelines/graph/job_name_component_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import jobNameComponent from '~/ci/pipeline_details/components/jobs_shared/job_name_component.vue';
+import jobNameComponent from '~/ci/common/private/job_name_component.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('job name component', () => {
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index 14aacf1066568..5541b0db54ade 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -6,12 +6,8 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
-import {
-  ACTION_FAILURE,
-  UPSTREAM,
-  DOWNSTREAM,
-} from '~/ci/pipeline_details/components/graph/constants';
-import LinkedPipelineComponent from '~/ci/pipeline_details/components/graph/linked_pipeline.vue';
+import { ACTION_FAILURE, UPSTREAM, DOWNSTREAM } from '~/ci/pipeline_details/graph/constants';
+import LinkedPipelineComponent from '~/ci/pipeline_details/graph/components/linked_pipeline.vue';
 import CancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import RetryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 4bc757ee42a9a..cc4e4172657b4 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
@@ -10,11 +10,11 @@ import {
   UPSTREAM,
   LAYER_VIEW,
   STAGE_VIEW,
-} from '~/ci/pipeline_details/components/graph/constants';
-import PipelineGraph from '~/ci/pipeline_details/components/graph/graph_component.vue';
-import LinkedPipeline from '~/ci/pipeline_details/components/graph/linked_pipeline.vue';
-import LinkedPipelinesColumn from '~/ci/pipeline_details/components/graph/linked_pipelines_column.vue';
-import * as parsingUtils from '~/ci/pipeline_details/components/parsing_utils';
+} from '~/ci/pipeline_details/graph/constants';
+import PipelineGraph from '~/ci/pipeline_details/graph/components/graph_component.vue';
+import LinkedPipeline from '~/ci/pipeline_details/graph/components/linked_pipeline.vue';
+import LinkedPipelinesColumn from '~/ci/pipeline_details/graph/components/linked_pipelines_column.vue';
+import * as parsingUtils from '~/ci/pipeline_details/utils/parsing_utils';
 import { LOAD_FAILURE } from '~/ci/pipeline_details/constants';
 
 import { pipelineWithUpstreamDownstream, wrappedPipelineReturn } from './mock_data';
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index c3ab2c756f034..a880a9cf4b0a2 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -1,10 +1,6 @@
 import mockPipelineResponse from 'test_fixtures/pipelines/pipeline_details.json';
-import { unwrapPipelineData } from '~/ci/pipeline_details/components/graph/utils';
-import {
-  BUILD_KIND,
-  BRIDGE_KIND,
-  RETRY_ACTION_TITLE,
-} from '~/ci/pipeline_details/components/graph/constants';
+import { unwrapPipelineData } from '~/ci/pipeline_details/graph/utils';
+import { BUILD_KIND, BRIDGE_KIND, RETRY_ACTION_TITLE } from '~/ci/pipeline_details/graph/constants';
 
 // We mock this instead of using fixtures for performance reason.
 const mockPipelineResponseCopy = JSON.parse(JSON.stringify(mockPipelineResponse));
diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js
index 7b19ac439b366..cc79205ec4116 100644
--- a/spec/frontend/pipelines/graph/stage_column_component_spec.js
+++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js
@@ -1,7 +1,7 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import JobItem from '~/ci/pipeline_details/components/graph/job_item.vue';
-import StageColumnComponent from '~/ci/pipeline_details/components/graph/stage_column_component.vue';
-import ActionComponent from '~/ci/pipeline_details/components/jobs_shared/action_component.vue';
+import JobItem from '~/ci/pipeline_details/graph/components/job_item.vue';
+import StageColumnComponent from '~/ci/pipeline_details/graph/components/stage_column_component.vue';
+import ActionComponent from '~/ci/common/private/job_action_component.vue';
 
 const mockJob = {
   id: 4250,
diff --git a/spec/frontend/pipelines/graph_shared/links_inner_spec.js b/spec/frontend/pipelines/graph_shared/links_inner_spec.js
index 5c79ca00702d8..8d1964726e4e3 100644
--- a/spec/frontend/pipelines/graph_shared/links_inner_spec.js
+++ b/spec/frontend/pipelines/graph_shared/links_inner_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import LinksInner from '~/ci/pipeline_details/components/graph_shared/links_inner.vue';
-import { parseData } from '~/ci/pipeline_details/components/parsing_utils';
+import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
+import { parseData } from '~/ci/pipeline_details/utils/parsing_utils';
 import { createJobsHash } from '~/ci/pipeline_details/utils';
 import {
   jobRect,
diff --git a/spec/frontend/pipelines/graph_shared/links_layer_spec.js b/spec/frontend/pipelines/graph_shared/links_layer_spec.js
index 16dfb103cf012..ccda2b8078d6a 100644
--- a/spec/frontend/pipelines/graph_shared/links_layer_spec.js
+++ b/spec/frontend/pipelines/graph_shared/links_layer_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import mockPipelineResponse from 'test_fixtures/pipelines/pipeline_details.json';
-import LinksInner from '~/ci/pipeline_details/components/graph_shared/links_inner.vue';
-import LinksLayer from '~/ci/pipeline_details/components/graph_shared/links_layer.vue';
+import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
 
 import { generateResponse } from '../graph/mock_data';
 
diff --git a/spec/frontend/pipelines/nav_controls_spec.js b/spec/frontend/pipelines/nav_controls_spec.js
index a4567734c34c0..cefe0c9f0a3a7 100644
--- a/spec/frontend/pipelines/nav_controls_spec.js
+++ b/spec/frontend/pipelines/nav_controls_spec.js
@@ -1,5 +1,5 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import NavControls from '~/ci/pipeline_details/components/pipelines_list/nav_controls.vue';
+import NavControls from '~/ci/pipeline_details/pipelines_list/components/nav_controls.vue';
 
 describe('Pipelines Nav Controls', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/pipeline_details_header_spec.js b/spec/frontend/pipelines/pipeline_details_header_spec.js
index 6ea5d603111a6..81a8914f0130b 100644
--- a/spec/frontend/pipelines/pipeline_details_header_spec.js
+++ b/spec/frontend/pipelines/pipeline_details_header_spec.js
@@ -5,13 +5,13 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import PipelineDetailsHeader from '~/ci/pipeline_details/components/pipeline_details_header.vue';
+import PipelineDetailsHeader from '~/ci/pipeline_details/header/pipeline_details_header.vue';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/pipeline_details/constants';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import cancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/ci/pipeline_details/graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
-import getPipelineDetailsQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_header_data.query.graphql';
+import getPipelineDetailsQuery from '~/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql';
 import {
   pipelineHeaderSuccess,
   pipelineHeaderRunning,
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
index ed49aeeb1a00f..95edfb01cf094 100644
--- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
+++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
@@ -2,11 +2,11 @@ import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { CI_CONFIG_STATUS_VALID } from '~/ci/pipeline_editor/constants';
-import LinksInner from '~/ci/pipeline_details/components/graph_shared/links_inner.vue';
-import LinksLayer from '~/ci/pipeline_details/components/graph_shared/links_layer.vue';
-import JobPill from '~/ci/pipeline_details/components/pipeline_graph/job_pill.vue';
-import PipelineGraph from '~/ci/pipeline_details/components/pipeline_graph/pipeline_graph.vue';
-import StageName from '~/ci/pipeline_details/components/pipeline_graph/stage_name.vue';
+import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
+import JobPill from '~/ci/pipeline_editor/components/graph/job_pill.vue';
+import PipelineGraph from '~/ci/pipeline_editor/components/graph/pipeline_graph.vue';
+import StageName from '~/ci/pipeline_editor/components/graph/stage_name.vue';
 import { pipelineData, singleStageData } from './mock_data';
 
 describe('pipeline graph component', () => {
diff --git a/spec/frontend/pipelines/pipeline_labels_spec.js b/spec/frontend/pipelines/pipeline_labels_spec.js
index 9a65cad4cba96..b90f7d035e0c6 100644
--- a/spec/frontend/pipelines/pipeline_labels_spec.js
+++ b/spec/frontend/pipelines/pipeline_labels_spec.js
@@ -1,6 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
-import PipelineLabelsComponent from '~/ci/pipeline_details/components/pipelines_list/pipeline_labels.vue';
+import PipelineLabelsComponent from '~/ci/pipeline_details/pipelines_list/components/pipeline_labels.vue';
 import { mockPipeline } from './mock_data';
 
 const projectPath = 'test/test';
diff --git a/spec/frontend/pipelines/pipeline_multi_actions_spec.js b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
index b35ffaff4dc06..6827aea7b1c32 100644
--- a/spec/frontend/pipelines/pipeline_multi_actions_spec.js
+++ b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
@@ -10,7 +10,7 @@ import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import PipelineMultiActions, {
   i18n,
-} from '~/ci/pipeline_details/components/pipelines_list/pipeline_multi_actions.vue';
+} from '~/ci/pipeline_details/pipelines_list/components/pipeline_multi_actions.vue';
 import { TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 
 describe('Pipeline Multi Actions Dropdown', () => {
diff --git a/spec/frontend/pipelines/pipeline_operations_spec.js b/spec/frontend/pipelines/pipeline_operations_spec.js
index 1952d704b9ce0..3e2005236bb6e 100644
--- a/spec/frontend/pipelines/pipeline_operations_spec.js
+++ b/spec/frontend/pipelines/pipeline_operations_spec.js
@@ -1,7 +1,7 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import PipelinesManualActions from '~/ci/pipeline_details/components/pipelines_list/pipelines_manual_actions.vue';
-import PipelineMultiActions from '~/ci/pipeline_details/components/pipelines_list/pipeline_multi_actions.vue';
-import PipelineOperations from '~/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue';
+import PipelinesManualActions from '~/ci/pipeline_details/pipelines_list/components/pipelines_manual_actions.vue';
+import PipelineMultiActions from '~/ci/pipeline_details/pipelines_list/components/pipeline_multi_actions.vue';
+import PipelineOperations from '~/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue';
 import eventHub from '~/ci/pipeline_details/event_hub';
 
 describe('Pipeline operations', () => {
diff --git a/spec/frontend/pipelines/pipeline_triggerer_spec.js b/spec/frontend/pipelines/pipeline_triggerer_spec.js
index 5e2a7df6fe957..4c8a43598ad1c 100644
--- a/spec/frontend/pipelines/pipeline_triggerer_spec.js
+++ b/spec/frontend/pipelines/pipeline_triggerer_spec.js
@@ -1,6 +1,6 @@
 import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import pipelineTriggerer from '~/ci/pipeline_details/components/pipelines_list/pipeline_triggerer.vue';
+import pipelineTriggerer from '~/ci/pipeline_details/pipelines_list/components/pipeline_triggerer.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 describe('Pipelines Triggerer', () => {
diff --git a/spec/frontend/pipelines/pipeline_url_spec.js b/spec/frontend/pipelines/pipeline_url_spec.js
index be24ae809500d..c1be2b096f664 100644
--- a/spec/frontend/pipelines/pipeline_url_spec.js
+++ b/spec/frontend/pipelines/pipeline_url_spec.js
@@ -1,7 +1,7 @@
 import { merge } from 'lodash';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import PipelineUrlComponent from '~/ci/pipeline_details/components/pipelines_list/pipeline_url.vue';
+import PipelineUrlComponent from '~/ci/pipeline_details/pipelines_list/components/pipeline_url.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 import { mockPipeline, mockPipelineBranch, mockPipelineTag } from './mock_data';
diff --git a/spec/frontend/pipelines/pipelines_artifacts_spec.js b/spec/frontend/pipelines/pipelines_artifacts_spec.js
index 9b092a70965c7..7ef3513cbceba 100644
--- a/spec/frontend/pipelines/pipelines_artifacts_spec.js
+++ b/spec/frontend/pipelines/pipelines_artifacts_spec.js
@@ -5,7 +5,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import PipelineArtifacts from '~/ci/pipeline_details/components/pipelines_list/pipelines_artifacts.vue';
+import PipelineArtifacts from '~/ci/pipeline_details/pipelines_list/components/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/pipelines_manual_actions_spec.js b/spec/frontend/pipelines/pipelines_manual_actions_spec.js
index 15cdceed85029..c0ea0fda4df14 100644
--- a/spec/frontend/pipelines/pipelines_manual_actions_spec.js
+++ b/spec/frontend/pipelines/pipelines_manual_actions_spec.js
@@ -11,8 +11,8 @@ import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
-import PipelinesManualActions from '~/ci/pipeline_details/components/pipelines_list/pipelines_manual_actions.vue';
-import getPipelineActionsQuery from '~/ci/pipeline_details/graphql/queries/get_pipeline_actions.query.graphql';
+import PipelinesManualActions from '~/ci/pipeline_details/pipelines_list/components/pipelines_manual_actions.vue';
+import getPipelineActionsQuery from '~/ci/pipeline_details/pipelines_list/graphql/queries/get_pipeline_actions.query.graphql';
 import { TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index 62e2e28f31169..dd12286f71cbe 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -24,10 +24,10 @@ import { createAlert, VARIANT_WARNING } from '~/alert';
 import setSortPreferenceMutation from '~/issues/list/queries/set_sort_preference.mutation.graphql';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import NavigationControls from '~/ci/pipeline_details/components/pipelines_list/nav_controls.vue';
-import PipelinesComponent from '~/ci/pipeline_details/components/pipelines_list/pipelines.vue';
-import PipelinesCiTemplates from '~/ci/pipeline_details/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
-import PipelinesTableComponent from '~/ci/pipeline_details/components/pipelines_list/pipelines_table.vue';
+import NavigationControls from '~/ci/pipeline_details/pipelines_list/components/nav_controls.vue';
+import PipelinesComponent from '~/ci/pipeline_details/pipelines_list/pipelines.vue';
+import PipelinesCiTemplates from '~/ci/pipeline_details/pipelines_list/empty_state/pipelines_ci_templates.vue';
+import PipelinesTableComponent from '~/ci/pipeline_details/pipelines_list/components/pipelines_table.vue';
 import { RAW_TEXT_WARNING, TRACKING_CATEGORIES } from '~/ci/pipeline_details/constants';
 import Store from '~/ci/pipeline_details/stores/pipelines_store';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
diff --git a/spec/frontend/pipelines/pipelines_table_spec.js b/spec/frontend/pipelines/pipelines_table_spec.js
index 508e1eb833f5f..2ae8475f38d7e 100644
--- a/spec/frontend/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/pipelines/pipelines_table_spec.js
@@ -4,13 +4,13 @@ import { mount } from '@vue/test-utils';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
-import PipelineFailedJobsWidget from '~/ci/pipeline_details/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
-import PipelineOperations from '~/ci/pipeline_details/components/pipelines_list/pipeline_operations.vue';
-import PipelineTriggerer from '~/ci/pipeline_details/components/pipelines_list/pipeline_triggerer.vue';
-import PipelineUrl from '~/ci/pipeline_details/components/pipelines_list/pipeline_url.vue';
-import PipelinesTable from '~/ci/pipeline_details/components/pipelines_list/pipelines_table.vue';
-import PipelinesTimeago from '~/ci/pipeline_details/components/pipelines_list/time_ago.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineFailedJobsWidget from '~/ci/pipeline_details/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
+import PipelineOperations from '~/ci/pipeline_details/pipelines_list/components/pipeline_operations.vue';
+import PipelineTriggerer from '~/ci/pipeline_details/pipelines_list/components/pipeline_triggerer.vue';
+import PipelineUrl from '~/ci/pipeline_details/pipelines_list/components/pipeline_url.vue';
+import PipelinesTable from '~/ci/pipeline_details/pipelines_list/components/pipelines_table.vue';
+import PipelinesTimeago from '~/ci/pipeline_details/pipelines_list/components/time_ago.vue';
 import {
   PipelineKeyOptions,
   BUTTON_TOOLTIP_RETRY,
diff --git a/spec/frontend/pipelines/test_reports/empty_state_spec.js b/spec/frontend/pipelines/test_reports/empty_state_spec.js
index c5879bbf0c007..ed1d6bc7d3753 100644
--- a/spec/frontend/pipelines/test_reports/empty_state_spec.js
+++ b/spec/frontend/pipelines/test_reports/empty_state_spec.js
@@ -1,6 +1,6 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import EmptyState, { i18n } from '~/ci/pipeline_details/components/test_reports/empty_state.vue';
+import EmptyState, { i18n } from '~/ci/pipeline_details/test_reports/empty_state.vue';
 
 describe('Test report empty state', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/test_reports/test_case_details_spec.js b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
index e4058e6b1dcf0..0f651b9d4567b 100644
--- a/spec/frontend/pipelines/test_reports/test_case_details_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
@@ -1,7 +1,7 @@
 import { GlModal, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import TestCaseDetails from '~/ci/pipeline_details/components/test_reports/test_case_details.vue';
+import TestCaseDetails from '~/ci/pipeline_details/test_reports/test_case_details.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
diff --git a/spec/frontend/pipelines/test_reports/test_reports_spec.js b/spec/frontend/pipelines/test_reports/test_reports_spec.js
index 73c07e660d494..8ff060026da1d 100644
--- a/spec/frontend/pipelines/test_reports/test_reports_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_reports_spec.js
@@ -5,10 +5,10 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import testReports from 'test_fixtures/pipelines/test_report.json';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import EmptyState from '~/ci/pipeline_details/components/test_reports/empty_state.vue';
-import TestReports from '~/ci/pipeline_details/components/test_reports/test_reports.vue';
-import TestSummary from '~/ci/pipeline_details/components/test_reports/test_summary.vue';
-import TestSummaryTable from '~/ci/pipeline_details/components/test_reports/test_summary_table.vue';
+import EmptyState from '~/ci/pipeline_details/test_reports/empty_state.vue';
+import TestReports from '~/ci/pipeline_details/test_reports/test_reports.vue';
+import TestSummary from '~/ci/pipeline_details/test_reports/test_summary.vue';
+import TestSummaryTable from '~/ci/pipeline_details/test_reports/test_summary_table.vue';
 import * as getters from '~/ci/pipeline_details/stores/test_reports/getters';
 
 Vue.use(Vuex);
diff --git a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
index bb29be5343a23..5bdea6bbcbf07 100644
--- a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
@@ -4,9 +4,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import testReports from 'test_fixtures/pipelines/test_report.json';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import SuiteTable, {
-  i18n,
-} from '~/ci/pipeline_details/components/test_reports/test_suite_table.vue';
+import SuiteTable, { i18n } from '~/ci/pipeline_details/test_reports/test_suite_table.vue';
 import { TestStatus } from '~/ci/pipeline_details/constants';
 import * as getters from '~/ci/pipeline_details/stores/test_reports/getters';
 import { formatFilePath } from '~/ci/pipeline_details/stores/test_reports/utils';
diff --git a/spec/frontend/pipelines/test_reports/test_summary_spec.js b/spec/frontend/pipelines/test_reports/test_summary_spec.js
index ecb81838627a8..f9182d52c8a8e 100644
--- a/spec/frontend/pipelines/test_reports/test_summary_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_summary_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import testReports from 'test_fixtures/pipelines/test_report.json';
-import Summary from '~/ci/pipeline_details/components/test_reports/test_summary.vue';
+import Summary from '~/ci/pipeline_details/test_reports/test_summary.vue';
 import { formattedTime } from '~/ci/pipeline_details/stores/test_reports/utils';
 
 describe('Test reports summary', () => {
diff --git a/spec/frontend/pipelines/test_reports/test_summary_table_spec.js b/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
index 55cb0a7566abe..bb62fbcb32cbe 100644
--- a/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import testReports from 'test_fixtures/pipelines/test_report.json';
-import SummaryTable from '~/ci/pipeline_details/components/test_reports/test_summary_table.vue';
+import SummaryTable from '~/ci/pipeline_details/test_reports/test_summary_table.vue';
 import * as getters from '~/ci/pipeline_details/stores/test_reports/getters';
 
 Vue.use(Vuex);
diff --git a/spec/frontend/pipelines/time_ago_spec.js b/spec/frontend/pipelines/time_ago_spec.js
index 68597a1f59b05..e651427fb78cc 100644
--- a/spec/frontend/pipelines/time_ago_spec.js
+++ b/spec/frontend/pipelines/time_ago_spec.js
@@ -1,7 +1,7 @@
 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import TimeAgo from '~/ci/pipeline_details/components/pipelines_list/time_ago.vue';
+import TimeAgo from '~/ci/pipeline_details/pipelines_list/components/time_ago.vue';
 
 describe('Timeago component', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
index 2b97130a264d2..bf58e337a7991 100644
--- a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
-import PipelineBranchNameToken from '~/ci/pipeline_details/components/pipelines_list/tokens/pipeline_branch_name_token.vue';
+import PipelineBranchNameToken from '~/ci/pipeline_details/pipelines_list/tokens/pipeline_branch_name_token.vue';
 import { branches, mockBranchesAfterMap } from '../mock_data';
 
 describe('Pipeline Branch Name Token', () => {
diff --git a/spec/frontend/pipelines/tokens/pipeline_source_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_source_token_spec.js
index 096174d8c3621..180fdee8353cf 100644
--- a/spec/frontend/pipelines/tokens/pipeline_source_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_source_token_spec.js
@@ -1,8 +1,8 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { PIPELINE_SOURCES } from 'ee_else_ce/ci/pipeline_details/components/pipelines_list/tokens/constants';
+import { PIPELINE_SOURCES } from 'ee_else_ce/ci/pipeline_details/pipelines_list/tokens/constants';
 import { stubComponent } from 'helpers/stub_component';
-import PipelineSourceToken from '~/ci/pipeline_details/components/pipelines_list/tokens/pipeline_source_token.vue';
+import PipelineSourceToken from '~/ci/pipeline_details/pipelines_list/tokens/pipeline_source_token.vue';
 
 describe('Pipeline Source Token', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
index 17c038a1e5833..4b9d4fb7a943f 100644
--- a/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
@@ -1,7 +1,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
-import PipelineStatusToken from '~/ci/pipeline_details/components/pipelines_list/tokens/pipeline_status_token.vue';
+import PipelineStatusToken from '~/ci/pipeline_details/pipelines_list/tokens/pipeline_status_token.vue';
 import {
   TOKEN_TITLE_STATUS,
   TOKEN_TYPE_STATUS,
diff --git a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
index fbd5d6dd9a35d..a40c6f5c8f883 100644
--- a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
@@ -1,7 +1,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Api from '~/api';
-import PipelineTagNameToken from '~/ci/pipeline_details/components/pipelines_list/tokens/pipeline_tag_name_token.vue';
+import PipelineTagNameToken from '~/ci/pipeline_details/pipelines_list/tokens/pipeline_tag_name_token.vue';
 import { tags, mockTagsAfterMap } from '../mock_data';
 
 describe('Pipeline Branch Name Token', () => {
diff --git a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
index dcb7d51e1aebb..cc1303f4abc95 100644
--- a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
@@ -2,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from
 import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import Api from '~/api';
-import PipelineTriggerAuthorToken from '~/ci/pipeline_details/components/pipelines_list/tokens/pipeline_trigger_author_token.vue';
+import PipelineTriggerAuthorToken from '~/ci/pipeline_details/pipelines_list/tokens/pipeline_trigger_author_token.vue';
 import { users } from '../mock_data';
 
 describe('Pipeline Trigger Author Token', () => {
diff --git a/spec/frontend/pipelines/unwrapping_utils_spec.js b/spec/frontend/pipelines/unwrapping_utils_spec.js
index 3f7abe3f024e6..99ee2eff1e4cf 100644
--- a/spec/frontend/pipelines/unwrapping_utils_spec.js
+++ b/spec/frontend/pipelines/unwrapping_utils_spec.js
@@ -2,7 +2,7 @@ import {
   unwrapGroups,
   unwrapNodesWithName,
   unwrapStagesWithNeeds,
-} from '~/ci/pipeline_details/components/unwrapping_utils';
+} from '~/ci/pipeline_details/utils/unwrapping_utils';
 
 const groupsArray = [
   {
diff --git a/spec/frontend/pipelines/utils_spec.js b/spec/frontend/pipelines/utils_spec.js
index 1853d6ea703a8..b52a646cefcf0 100644
--- a/spec/frontend/pipelines/utils_spec.js
+++ b/spec/frontend/pipelines/utils_spec.js
@@ -1,5 +1,5 @@
 import mockPipelineResponse from 'test_fixtures/pipelines/pipeline_details.json';
-import { createSankey } from '~/ci/pipeline_details/components/dag/drawing_utils';
+import { createSankey } from '~/ci/pipeline_details/dag/drawing_utils';
 import {
   makeLinksFromNodes,
   filterByAncestors,
@@ -9,7 +9,7 @@ import {
   parseData,
   removeOrphanNodes,
   getMaxNodes,
-} from '~/ci/pipeline_details/components/parsing_utils';
+} from '~/ci/pipeline_details/utils/parsing_utils';
 import { createNodeDict } from '~/ci/pipeline_details/utils';
 
 import { mockDownstreamPipelinesRest } from '../vue_merge_request_widget/mock_data';
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
index dd2537448c024..35b4e222e01f3 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
@@ -6,7 +6,7 @@ import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import MRWidgetPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
-import LegacyPipelineMiniGraph from '~/ci/pipeline_details/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import { SUCCESS } from '~/vue_merge_request_widget/constants';
 import mockData from '../mock_data';
 
diff --git a/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js b/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
index 1c5a4e508bba0..88c348629cb40 100644
--- a/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
+++ b/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
@@ -11,7 +11,7 @@ import {
   HTTP_STATUS_NO_CONTENT,
   HTTP_STATUS_OK,
 } from '~/lib/utils/http_status';
-import TestCaseDetails from '~/ci/pipeline_details/components/test_reports/test_case_details.vue';
+import TestCaseDetails from '~/ci/pipeline_details/test_reports/test_case_details.vue';
 
 import { failedReport } from 'jest/ci/reports/mock_data/mock_data';
 import mixedResultsTestReports from 'jest/ci/reports/mock_data/new_and_fixed_failures_report.json';
-- 
GitLab