diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
commit | 0c872e02b2c822e3397515ec324051ff540f0cd5 (patch) | |
tree | ce2fb6ce7030e4dad0f4118d21ab6453e5938cdd /app/assets/javascripts/cycle_analytics/components/path_navigation.vue | |
parent | f7e05a6853b12f02911494c4b3fe53d9540d74fc (diff) |
Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/cycle_analytics/components/path_navigation.vue')
-rw-r--r-- | app/assets/javascripts/cycle_analytics/components/path_navigation.vue | 113 |
1 files changed, 0 insertions, 113 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue deleted file mode 100644 index 72a7659aac0..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue +++ /dev/null @@ -1,113 +0,0 @@ -<script> -import { GlPath, GlPopover, GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import Tracking from '~/tracking'; -import { OVERVIEW_STAGE_ID } from '../constants'; -import FormattedStageCount from './formatted_stage_count.vue'; - -export default { - name: 'PathNavigation', - components: { - GlPath, - GlSkeletonLoader, - GlPopover, - FormattedStageCount, - }, - directives: { - SafeHtml, - }, - mixins: [Tracking.mixin()], - props: { - loading: { - type: Boolean, - required: false, - default: false, - }, - stages: { - type: Array, - required: true, - }, - selectedStage: { - type: Object, - required: false, - default: () => ({}), - }, - }, - methods: { - showPopover({ id }) { - return id && id !== OVERVIEW_STAGE_ID; - }, - onSelectStage($event) { - this.$emit('selected', $event); - this.track('click_path_navigation', { - extra: { - stage_id: $event.id, - }, - }); - }, - }, - popoverOptions: { - triggers: 'hover', - placement: 'bottom', - }, -}; -</script> -<template> - <gl-skeleton-loader v-if="loading" :width="235" :lines="2" /> - <gl-path v-else :key="selectedStage.id" :items="stages" @selected="onSelectStage"> - <template #default="{ pathItem, pathId }"> - <gl-popover - v-if="showPopover(pathItem)" - v-bind="$options.popoverOptions" - :target="pathId" - :css-classes="['stage-item-popover']" - data-testid="stage-item-popover" - > - <template #title>{{ pathItem.title }}</template> - <div class="gl-px-4"> - <div class="gl-display-flex gl-justify-content-space-between"> - <div class="gl-pr-4 gl-pb-4"> - {{ s__('ValueStreamEvent|Stage time (median)') }} - </div> - <div class="gl-pb-4 gl-font-weight-bold">{{ pathItem.metric }}</div> - </div> - </div> - <div class="gl-px-4"> - <div class="gl-display-flex gl-justify-content-space-between"> - <div class="gl-pr-4 gl-pb-4"> - {{ s__('ValueStreamEvent|Items in stage') }} - </div> - <div class="gl-pb-4 gl-font-weight-bold"> - <formatted-stage-count :stage-count="pathItem.stageCount" /> - </div> - </div> - </div> - <div class="gl-px-4 gl-pt-4 gl-border-t-1 gl-border-t-solid gl-border-gray-50"> - <div - v-if="pathItem.startEventHtmlDescription" - class="gl-display-flex gl-flex-direction-row" - > - <div class="gl-display-flex gl-flex-direction-column gl-pr-4 gl-pb-4 metric-label"> - {{ s__('ValueStreamEvent|Start') }} - </div> - <div - v-safe-html="pathItem.startEventHtmlDescription" - class="gl-display-flex gl-flex-direction-column gl-pb-4 stage-event-description" - ></div> - </div> - <div - v-if="pathItem.endEventHtmlDescription" - class="gl-display-flex gl-flex-direction-row" - > - <div class="gl-display-flex gl-flex-direction-column gl-pr-4 metric-label"> - {{ s__('ValueStreamEvent|Stop') }} - </div> - <div - v-safe-html="pathItem.endEventHtmlDescription" - class="gl-display-flex gl-flex-direction-column stage-event-description" - ></div> - </div> - </div> - </gl-popover> - </template> - </gl-path> -</template> |