app/assets/javascripts/ci/inherited_ci_variables/components/inherited_ci_variables_app.vue

@@ -51,7 +51,7 @@ export default {
           this.loadingCounter += 1;
         } else {
           createAlert({ message: this.$options.i18n.tooManyCallsError });
-          reportMessageToSentry(this.$options.name, this.$options.i18n.tooManyCallsError, {});
+          reportMessageToSentry(this.$options.name, this.$options.i18n.tooManyCallsError);
         }
       },
       error() {

app/assets/javascripts/ci/inherited_ci_variables/graphql/queries/inherited_ci_variables.query.graphql

@@ -8,7 +8,6 @@ query getInheritedCiVariables($after: String, $first: Int, $fullPath: ID!) {
         ...PageInfo
       }
       nodes {
-        __typename
         id
         key
         variableType

app/assets/javascripts/ci/job_details/components/manual_variables_form.vue

@@ -57,7 +57,7 @@ export default {
       },
       error(error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobQueryErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       },
     },
   },
@@ -141,7 +141,7 @@ export default {
         }
       } catch (error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobMutationErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       }
     },
     async retryJob() {
@@ -157,7 +157,7 @@ export default {
         }
       } catch (error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobMutationErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       }
     },
     addEmptyVariable() {

app/assets/javascripts/ci/job_details/components/stuck_block.vue

@@ -78,7 +78,7 @@ export default {
         </template>
       </gl-sprintf>
       <template v-if="stuckData.showTags">
-        <gl-badge v-for="tag in tags" :key="tag" variant="info">
+        <gl-badge v-for="tag in tags" :key="tag" size="sm" variant="info">
           {{ tag }}
         </gl-badge>
       </template>

app/assets/javascripts/ci/job_details/graphql/fragments/ci_job.fragment.graphql

@@ -7,5 +7,4 @@ fragment BaseCiJob on CiJob {
       ...ManualCiVariable
     }
   }
-  __typename
 }

app/assets/javascripts/ci/job_details/graphql/fragments/ci_variable.fragment.graphql

 fragment ManualCiVariable on CiVariable {
-  __typename
   id
   key
   value

app/assets/javascripts/ci/jobs_page/components/job_cells/actions_cell.vue

@@ -133,7 +133,7 @@ export default {
           variables: { id: this.job.id },
         });
         if (errors.length > 0) {
-          reportMessageToSentry(this.$options.name, errors.join(', '), {});
+          reportMessageToSentry(this.$options.name, errors.join(', '));
           this.showToastMessage();
         } else if (redirect) {
           // Retry and Play actions redirect to job detail view
@@ -143,7 +143,7 @@ export default {
           eventHub.$emit('jobActionPerformed');
         }
       } catch (failure) {
-        reportMessageToSentry(this.$options.name, failure, {});
+        reportMessageToSentry(this.$options.name, failure);
         this.showToastMessage();
       }
     },

app/assets/javascripts/ci/pipeline_details/constants.js

@@ -23,8 +23,6 @@ export const PARSE_FAILURE = 'parse_failure';
 export const POST_FAILURE = 'post_failure';
 export const UNSUPPORTED_DATA = 'unsupported_data';
 
-export const CHILD_VIEW = 'child';
-
 // Pipeline tabs
 
 export const pipelineTabName = 'graph';

app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue

@@ -159,13 +159,6 @@ export default {
         reportMessageToSentry(
           this.$options.name,
           `| type: ${LOAD_FAILURE} , info: ${JSON.stringify(err)}`,
-          {
-            graphViewType: this.graphViewType,
-            graphqlResourceEtag: this.graphqlResourceEtag,
-            metricsPath: this.metricsPath,
-            projectPath: this.pipelineProjectPath,
-            pipelineIid: this.pipelineIid,
-          },
         );
       },
       result({ data, error }) {

app/assets/javascripts/ci/pipeline_details/pipelines_index.js

@@ -31,10 +31,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     endpoint,
     artifactsEndpoint,
     artifactsEndpointPlaceholder,
-    pipelineScheduleUrl,
-    emptyStateSvgPath,
-    errorStateSvgPath,
-    noPipelinesSvgPath,
+    pipelineSchedulesPath,
     newPipelinePath,
     pipelineEditorPath,
     suggestedCiTemplates,
@@ -55,13 +52,14 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     el,
     apolloProvider,
     provide: {
-      pipelineEditorPath,
       artifactsEndpoint,
       artifactsEndpointPlaceholder,
-      suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
-      iosRunnersAvailable: parseBoolean(iosRunnersAvailable),
       fullPath,
+      iosRunnersAvailable: parseBoolean(iosRunnersAvailable),
       manualActionsLimit: 50,
+      pipelineEditorPath,
+      pipelineSchedulesPath,
+      suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
     },
     data() {
       return {
@@ -77,22 +75,18 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     render(createElement) {
       return createElement(Pipelines, {
         props: {
-          store: this.store,
-          endpoint,
-          pipelineScheduleUrl,
-          emptyStateSvgPath,
-          errorStateSvgPath,
-          noPipelinesSvgPath,
-          newPipelinePath,
           canCreatePipeline: parseBoolean(canCreatePipeline),
-          hasGitlabCi: parseBoolean(hasGitlabCi),
           ciLintPath,
-          resetCachePath,
-          projectId,
           defaultBranchName,
+          defaultVisibilityPipelineIdType: visibilityPipelineIdType,
+          endpoint,
+          hasGitlabCi: parseBoolean(hasGitlabCi),
+          newPipelinePath,
           params: JSON.parse(params),
+          projectId,
           registrationToken,
-          defaultVisibilityPipelineIdType: visibilityPipelineIdType,
+          resetCachePath,
+          store: this.store,
         },
       });
     },

app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue

@@ -17,16 +17,15 @@ export default {
     targetProjectFullPath: {
       default: '',
     },
+    pipelineSchedulesPath: {
+      default: '',
+    },
   },
   props: {
     pipeline: {
       type: Object,
       required: true,
     },
-    pipelineScheduleUrl: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     isScheduled() {
@@ -52,7 +51,7 @@ export default {
     <gl-badge
       v-if="isScheduled"
       v-gl-tooltip
-      :href="pipelineScheduleUrl"
+      :href="pipelineSchedulesPath"
       target="__blank"
       :title="__('This pipeline was created by a schedule.')"
       variant="info"

app/assets/javascripts/ci/pipelines_page/components/pipelines_status_badge.vue → app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue

 <script>
 import { TRACKING_CATEGORIES } from '~/ci/constants';
-import { CHILD_VIEW } from '~/ci/pipeline_details/constants';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
@@ -16,18 +15,11 @@ export default {
       type: Object,
       required: true,
     },
-    viewType: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     pipelineStatus() {
       return this.pipeline?.details?.status ?? {};
     },
-    isChildView() {
-      return this.viewType === CHILD_VIEW;
-    },
   },
   methods: {
     trackClick() {
@@ -39,12 +31,7 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link
-      class="gl-mb-3"
-      :status="pipelineStatus"
-      :show-text="!isChildView"
-      @ciStatusBadgeClick="trackClick"
-    />
+    <ci-badge-link class="gl-mb-3" :status="pipelineStatus" @ciStatusBadgeClick="trackClick" />
     <pipelines-timeago :pipeline="pipeline" />
   </div>
 </template>

app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue

@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import { ICONS, TRACKING_CATEGORIES } from '~/ci/constants';
+import { ICONS, PIPELINE_ID_KEY, PIPELINE_IID_KEY, TRACKING_CATEGORIES } from '~/ci/constants';
 import PipelineLabels from './pipeline_labels.vue';
 
 export default {
@@ -24,13 +24,13 @@ export default {
       type: Object,
       required: true,
     },
-    pipelineScheduleUrl: {
+    pipelineIdType: {
       type: String,
-      required: true,
-    },
-    pipelineKey: {
-      type: String,
-      required: true,
+      required: false,
+      default: PIPELINE_ID_KEY,
+      validator(value) {
+        return value === PIPELINE_IID_KEY || value === PIPELINE_ID_KEY;
+      },
     },
     refClass: {
       type: String,
@@ -174,7 +174,7 @@ export default {
         class="gl-mr-1 gl-text-blue-500!"
         data-testid="pipeline-url-link"
         @click="trackClick('click_pipeline_id')"
-        >#{{ pipeline[pipelineKey] }}</gl-link
+        >#{{ pipeline[pipelineIdType] }}</gl-link
       >
       <!--Commit row-->
       <div class="gl-display-inline-flex gl-rounded-base gl-px-2 gl-bg-gray-50 gl-text-gray-700">
@@ -236,6 +236,6 @@ export default {
       />
       <!--End of commit row-->
     </div>
-    <pipeline-labels :pipeline-schedule-url="pipelineScheduleUrl" :pipeline="pipeline" />
+    <pipeline-labels :pipeline="pipeline" />
   </div>
 </template>

app/assets/javascripts/ci/pipelines_page/pipelines.vue

 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import NO_PIPELINES_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-pipeline-md.svg?url';
+import ERROR_STATE_SVG from '@gitlab/svgs/dist/illustrations/pipelines_failed.svg?url';
 import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import * as Sentry from '@sentry/browser';
@@ -9,7 +11,8 @@ import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import {
   FILTER_TAG_IDENTIFIER,
-  PipelineKeyOptions,
+  PIPELINE_ID_KEY,
+  PIPELINE_IID_KEY,
   RAW_TEXT_WARNING,
   TRACKING_CATEGORIES,
 } from '~/ci/constants';
@@ -27,7 +30,6 @@ import NavigationControls from './components/nav_controls.vue';
 import PipelinesFilteredSearch from './components/pipelines_filtered_search.vue';
 
 export default {
-  PipelineKeyOptions,
   components: {
     NoCiEmptyState,
     GlCollapsibleListbox,
@@ -46,36 +48,10 @@ export default {
       type: Object,
       required: true,
     },
-    // Can be rendered in 3 different places, with some visual differences
-    // Accepts root | child
-    // `root` -> main view
-    // `child` -> rendered inside MR or Commit View
-    viewType: {
-      type: String,
-      required: false,
-      default: 'root',
-    },
     endpoint: {
       type: String,
       required: true,
     },
-    pipelineScheduleUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    errorStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    noPipelinesSvgPath: {
-      type: String,
-      required: true,
-    },
     hasGitlabCi: {
       type: Boolean,
       required: true,
@@ -243,8 +219,9 @@ export default {
     },
     selectedPipelineKeyOption() {
       return (
-        this.$options.PipelineKeyOptions.find((e) => this.visibilityPipelineIdType === e.value) ||
-        this.$options.PipelineKeyOptions[0]
+        this.$options.pipelineKeyOptions.find(
+          (option) => this.visibilityPipelineIdType === option.value,
+        ) || this.$options.pipelineKeyOptions[0]
       );
     },
   },
@@ -334,11 +311,12 @@ export default {
     },
     changeVisibilityPipelineIDType(idType) {
       this.visibilityPipelineIdType = idType;
-      this.saveVisibilityPipelineIDType(idType);
+
+      if (isLoggedIn()) {
+        this.saveVisibilityPipelineIDType(idType);
+      }
     },
     saveVisibilityPipelineIDType(idType) {
-      if (!isLoggedIn()) return;
-
       this.$apollo
         .mutate({
           mutation: setSortPreferenceMutation,
@@ -354,6 +332,20 @@ export default {
         });
     },
   },
+  errorStateSvgPath: ERROR_STATE_SVG,
+  noPipelinesSvgPath: NO_PIPELINES_SVG,
+  pipelineKeyOptions: [
+    {
+      text: __('Show Pipeline ID'),
+      label: __('Pipeline ID'),
+      value: PIPELINE_ID_KEY,
+    },
+    {
+      text: __('Show Pipeline IID'),
+      label: __('Pipeline IID'),
+      value: PIPELINE_IID_KEY,
+    },
+  ],
 };
 </script>
 <template>
@@ -393,9 +385,8 @@ export default {
         />
         <gl-collapsible-listbox
           v-model="visibilityPipelineIdType"
-          data-testid="pipeline-key-collapsible-box"
           :toggle-text="selectedPipelineKeyOption.text"
-          :items="$options.PipelineKeyOptions"
+          :items="$options.pipelineKeyOptions"
           @select="changeVisibilityPipelineIDType"
         />
       </div>
@@ -411,14 +402,14 @@ export default {
 
       <no-ci-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyState"
-        :empty-state-svg-path="emptyStateSvgPath"
+        :empty-state-svg-path="$options.noPipelinesSvgPath"
         :can-set-ci="canCreatePipeline"
         :registration-token="registrationToken"
       />
 
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.error"
-        :svg-path="errorStateSvgPath"
+        :svg-path="$options.errorStateSvgPath"
         :svg-height="null"
         :title="s__('Pipelines|There was an error fetching the pipelines.')"
         :description="s__('Pipelines|Try again in a few moments or contact your support team.')"
@@ -426,7 +417,7 @@ export default {
 
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyTab"
-        :svg-path="noPipelinesSvgPath"
+        :svg-path="$options.noPipelinesSvgPath"
         :svg-height="150"
         :title="emptyTabMessage"
       />
@@ -434,10 +425,8 @@ export default {
       <div v-else-if="stateToRender === $options.stateMap.tableList">
         <pipelines-table
           :pipelines="state.pipelines"
-          :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
-          :view-type="viewType"
-          :pipeline-key-option="selectedPipelineKeyOption"
+          :pipeline-id-type="selectedPipelineKeyOption.value"
           @cancel-pipeline="onCancelPipeline"
           @refresh-pipelines-table="onRefreshPipelinesTable"
           @retry-pipeline="onRetryPipeline"

app/assets/javascripts/ci/runner/components/registration/utils.js

@@ -3,8 +3,8 @@ import {
   LINUX_PLATFORM,
   MACOS_PLATFORM,
   WINDOWS_PLATFORM,
-  DOWNLOAD_LOCATIONS,
-} from '../../constants';
+  RUNNER_PACKAGE_HOST,
+} from 'jh_else_ce/ci/runner/constants';
 import linuxInstall from './scripts/linux/install.sh?raw';
 import osxInstall from './scripts/osx/install.sh?raw';
 import windowsInstall from './scripts/windows/install.ps1?raw';
@@ -27,6 +27,47 @@ const OS = {
   },
 };
 
+export const DOWNLOAD_LOCATIONS = {
+  [LINUX_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-amd64`,
+    },
+    {
+      arch: '386',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-386`,
+    },
+    {
+      arch: 'arm',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-arm`,
+    },
+    {
+      arch: 'arm64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-arm64`,
+    },
+  ],
+  [MACOS_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-darwin-amd64`,
+    },
+    {
+      arch: 'arm64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-darwin-arm64`,
+    },
+  ],
+  [WINDOWS_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-windows-amd64.exe`,
+    },
+    {
+      arch: '386',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-windows-386.exe`,
+    },
+  ],
+};
+
 export const commandPrompt = ({ platform }) => {
   return (OS[platform] || OS[DEFAULT_PLATFORM]).commandPrompt;
 };

app/assets/javascripts/ci/runner/components/runner_details.vue

@@ -29,8 +29,6 @@ export default {
       import('ee_component/ci/runner/components/runner_maintenance_note_detail.vue'),
     RunnerGroups,
     RunnerProjects,
-    RunnerUpgradeStatusBadge: () =>
-      import('ee_component/ci/runner/components/runner_upgrade_status_badge.vue'),
     RunnerTags,
     RunnerManagersDetail,
     TimeAgo,
@@ -101,12 +99,6 @@ export default {
             <time-ago :time="runner.contactedAt" />
           </template>
         </runner-detail>
-        <runner-detail :label="s__('Runners|Version')">
-          <template v-if="runner.version" #value>
-            {{ runner.version }}
-            <runner-upgrade-status-badge size="sm" :runner="runner" />
-          </template>
-        </runner-detail>
         <runner-detail :label="s__('Runners|Configuration')">
           <template v-if="configTextProtected || configTextUntagged" #value>
             <gl-intersperse>

app/assets/javascripts/ci/runner/components/runner_header.vue

@@ -13,6 +13,8 @@ export default {
     TimeAgo,
     RunnerTypeBadge,
     RunnerStatusBadge,
+    RunnerUpgradeStatusBadge: () =>
+      import('ee_component/ci/runner/components/runner_upgrade_status_badge.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -40,6 +42,7 @@ export default {
     <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-flex-wrap gl-mt-3">
       <runner-status-badge :contacted-at="runner.contactedAt" :status="runner.status" />
       <runner-type-badge :type="runner.runnerType" />
+      <runner-upgrade-status-badge :runner="runner" />
       <span v-if="runner.createdAt">
         <gl-sprintf :message="__('%{locked} created %{timeago}')">
           <template #locked>

app/assets/javascripts/ci/runner/constants.js

@@ -216,54 +216,8 @@ export const LINUX_PLATFORM = 'linux';
 export const MACOS_PLATFORM = 'osx';
 export const WINDOWS_PLATFORM = 'windows';
 
-export const DOWNLOAD_LOCATIONS = {
-  [LINUX_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64',
-    },
-    {
-      arch: '386',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386',
-    },
-    {
-      arch: 'arm',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm',
-    },
-    {
-      arch: 'arm64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64',
-    },
-  ],
-  [MACOS_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64',
-    },
-    {
-      arch: 'arm64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-arm64',
-    },
-  ],
-  [WINDOWS_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-amd64.exe',
-    },
-    {
-      arch: '386',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-386.exe',
-    },
-  ],
-};
+// About Gitlab Runner Package host
+export const RUNNER_PACKAGE_HOST = 'gitlab-runner-downloads.s3.amazonaws.com';
 
 export const DEFAULT_PLATFORM = LINUX_PLATFORM;
 

app/assets/javascripts/ci/runner/sentry_utils.js

@@ -11,10 +11,11 @@ const COMPONENT_TAG = 'vue_component';
  * @param {String} options.component - Component name in CamelCase format
  */
 export const captureException = ({ error, component }) => {
-  Sentry.withScope((scope) => {
-    if (component) {
-      scope.setTag(COMPONENT_TAG, component);
-    }
+  if (component) {
+    Sentry.captureException(error, {
+      tags: { [COMPONENT_TAG]: component },
+    });
+  } else {
     Sentry.captureException(error);
-  });
+  }
 };

app/assets/javascripts/ci/utils.js

 import * as Sentry from '@sentry/browser';
 
 export const reportToSentry = (component, failureType) => {
-  Sentry.withScope((scope) => {
-    scope.setTag('component', component);
-    Sentry.captureException(failureType);
+  Sentry.captureException(failureType, {
+    tags: {
+      component,
+    },
   });
 };
 
-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 reportMessageToSentry = (component, message) => {
+  Sentry.captureMessage(message, {
+    tags: {
+      component,
+    },
   });
 };