diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-22 12:08:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-22 12:08:22 +0300 |
commit | 8e0dafbb6665d431f7f1b635c0f7c4a5c61bc325 (patch) | |
tree | ced227349b308ed395473defd10309a682e8bf07 /app/assets/javascripts/cycle_analytics | |
parent | 6eb3540d3debf5a2c6882b0dedf6569d52ddf570 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/cycle_analytics')
9 files changed, 5 insertions, 480 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue deleted file mode 100644 index 6b757c6972a..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue +++ /dev/null @@ -1,56 +0,0 @@ -<script> -import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; -import limitWarning from './limit_warning_component.vue'; -import totalTime from './total_time_component.vue'; - -export default { - components: { - userAvatarImage, - limitWarning, - totalTime, - }, - props: { - items: { - type: Array, - default: () => [], - required: false, - }, - stage: { - type: Object, - default: () => ({}), - required: false, - }, - }, -}; -</script> -<template> - <div> - <div class="events-description"> - {{ stage.description }} - <limit-warning :count="items.length" /> - </div> - <ul class="stage-event-list"> - <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item"> - <div class="item-details"> - <!-- FIXME: Pass an alt attribute here for accessibility --> - <user-avatar-image :img-src="mergeRequest.author.avatarUrl" /> - <h5 class="item-title merge-request-title"> - <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a> - </h5> - <a :href="mergeRequest.url" class="issue-link"> !{{ mergeRequest.iid }} </a> · - <span> - {{ s__('OpenedNDaysAgo|Opened') }} - <a :href="mergeRequest.url" class="issue-date"> {{ mergeRequest.createdAt }} </a> - </span> - <span> - {{ s__('ByAuthor|by') }} - <a :href="mergeRequest.author.webUrl" class="issue-author-link"> - {{ mergeRequest.author.name }} - </a> - </span> - </div> - <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue deleted file mode 100644 index cc7ae74dd3a..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue +++ /dev/null @@ -1,54 +0,0 @@ -<script> -import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; -import limitWarning from './limit_warning_component.vue'; -import totalTime from './total_time_component.vue'; - -export default { - components: { - userAvatarImage, - limitWarning, - totalTime, - }, - props: { - items: { - type: Array, - default: () => [], - required: false, - }, - stage: { - type: Object, - default: () => ({}), - required: false, - }, - }, -}; -</script> -<template> - <div> - <div class="events-description"> - {{ stage.description }} - <limit-warning :count="items.length" /> - </div> - <ul class="stage-event-list"> - <li v-for="(issue, i) in items" :key="i" class="stage-event-item"> - <div class="item-details"> - <!-- FIXME: Pass an alt attribute here for accessibility --> - <user-avatar-image :img-src="issue.author.avatarUrl" /> - <h5 class="item-title issue-title"> - <a :href="issue.url" class="issue-title"> {{ issue.title }} </a> - </h5> - <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> · - <span> - {{ s__('OpenedNDaysAgo|Opened') }} - <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a> - </span> - <span> - {{ s__('ByAuthor|by') }} - <a :href="issue.author.webUrl" class="issue-author-link"> {{ issue.author.name }} </a> - </span> - </div> - <div class="item-time"><total-time :time="issue.totalTime" /></div> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue deleted file mode 100644 index 4b15bd55cbd..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue +++ /dev/null @@ -1,60 +0,0 @@ -<script> -export default { - name: 'StageNavItem', - props: { - isDefaultStage: { - type: Boolean, - default: false, - required: false, - }, - isActive: { - type: Boolean, - default: false, - required: false, - }, - isUserAllowed: { - type: Boolean, - required: true, - }, - title: { - type: String, - required: true, - }, - value: { - type: String, - default: '', - required: false, - }, - }, - computed: { - hasValue() { - return this.value && this.value.length > 0; - }, - }, -}; -</script> - -<template> - <li @click="$emit('select')"> - <div - :class="{ active: isActive }" - class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-color-default border-style-solid border-width-1px" - > - <div - class="stage-nav-item-cell stage-name w-50 pr-2" - :class="{ 'font-weight-bold': isActive }" - > - {{ title }} - </div> - <div class="stage-nav-item-cell stage-median w-50"> - <template v-if="isUserAllowed"> - <span v-if="hasValue">{{ value }}</span> - <span v-else class="stage-empty">{{ __('Not enough data') }}</span> - </template> - <template v-else> - <span class="not-available">{{ __('Not available') }}</span> - </template> - </div> - </div> - </li> -</template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue deleted file mode 100644 index 33b4e649ab0..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue +++ /dev/null @@ -1,70 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; -import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; -import limitWarning from './limit_warning_component.vue'; -import totalTime from './total_time_component.vue'; - -export default { - components: { - userAvatarImage, - totalTime, - limitWarning, - GlIcon, - }, - props: { - items: { - type: Array, - default: () => [], - required: false, - }, - stage: { - type: Object, - default: () => ({}), - required: false, - }, - }, -}; -</script> -<template> - <div> - <div class="events-description"> - {{ stage.description }} - <limit-warning :count="items.length" /> - </div> - <ul class="stage-event-list"> - <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item"> - <div class="item-details"> - <!-- FIXME: Pass an alt attribute here for accessibility --> - <user-avatar-image :img-src="mergeRequest.author.avatarUrl" /> - <h5 class="item-title merge-request-title"> - <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a> - </h5> - <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> · - <span> - {{ s__('OpenedNDaysAgo|Opened') }} - <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a> - </span> - <span> - {{ s__('ByAuthor|by') }} - <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ - mergeRequest.author.name - }}</a> - </span> - <template v-if="mergeRequest.state === 'closed'"> - <span class="merge-request-state"> - <gl-icon name="cancel" class="gl-vertical-align-text-bottom" /> - {{ __('CLOSED') }} - </span> - </template> - <template v-else> - <span v-if="mergeRequest.branch" class="merge-request-branch"> - <gl-icon :size="16" name="fork" /> - <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a> - </span> - </template> - </div> - <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue deleted file mode 100644 index 6d8f711c13b..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue +++ /dev/null @@ -1,60 +0,0 @@ -<script> -import { GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; -import limitWarning from './limit_warning_component.vue'; -import totalTime from './total_time_component.vue'; - -export default { - components: { - userAvatarImage, - totalTime, - limitWarning, - GlIcon, - }, - directives: { - SafeHtml, - }, - props: { - items: { - type: Array, - default: () => [], - required: false, - }, - stage: { - type: Object, - default: () => ({}), - required: false, - }, - }, -}; -</script> -<template> - <div> - <div class="events-description"> - {{ stage.description }} - <limit-warning :count="items.length" /> - </div> - <ul class="stage-event-list"> - <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component"> - <div class="item-details"> - <!-- FIXME: Pass an alt attribute here for accessibility --> - <user-avatar-image :img-src="build.author.avatarUrl" /> - <h5 class="item-title"> - <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a> - <gl-icon :size="16" name="fork" /> - <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a> - <span class="icon-branch gl-text-gray-400"> - <gl-icon name="commit" :size="14" /> - </span> - <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a> - </h5> - <span> - <a :href="build.url" class="build-date"> {{ build.date }} </a> {{ s__('ByAuthor|by') }} - <a :href="build.author.webUrl" class="issue-author-link"> {{ build.author.name }} </a> - </span> - </div> - <div class="item-time"><total-time :time="build.totalTime" /></div> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue deleted file mode 100644 index c165c8cee78..00000000000 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue +++ /dev/null @@ -1,56 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; -import limitWarning from './limit_warning_component.vue'; -import totalTime from './total_time_component.vue'; - -export default { - components: { - totalTime, - limitWarning, - GlIcon, - }, - props: { - items: { - type: Array, - default: () => [], - required: false, - }, - stage: { - type: Object, - default: () => ({}), - required: false, - }, - }, -}; -</script> -<template> - <div> - <div class="events-description"> - {{ stage.description }} - <limit-warning :count="items.length" /> - </div> - <ul class="stage-event-list"> - <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component"> - <div class="item-details"> - <h5 class="item-title"> - <span class="icon-build-status gl-text-green-500"> - <gl-icon name="status_success" :size="14" /> - </span> - <a :href="build.url" class="item-build-name"> {{ build.name }} </a> · - <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a> - <gl-icon :size="16" name="fork" /> - <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a> - <span class="icon-branch gl-text-gray-400"> - <gl-icon name="commit" :size="14" /> - </span> - <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a> - </h5> - <span> - <a :href="build.url" class="issue-date"> {{ build.date }} </a> - </span> - </div> - <div class="item-time"><total-time :time="build.totalTime" /></div> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js b/app/assets/javascripts/cycle_analytics/default_event_objects.js deleted file mode 100644 index 57f9019d2f8..00000000000 --- a/app/assets/javascripts/cycle_analytics/default_event_objects.js +++ /dev/null @@ -1,98 +0,0 @@ -export default { - issue: { - created_at: '', - url: '', - iid: '', - title: '', - total_time: {}, - author: { - avatar_url: '', - id: '', - name: '', - web_url: '', - }, - }, - plan: { - title: '', - commit_url: '', - short_sha: '', - total_time: {}, - author: { - name: '', - id: '', - avatar_url: '', - web_url: '', - }, - }, - code: { - title: '', - iid: '', - created_at: '', - url: '', - total_time: {}, - author: { - name: '', - id: '', - avatar_url: '', - web_url: '', - }, - }, - test: { - name: '', - id: '', - date: '', - url: '', - short_sha: '', - commit_url: '', - total_time: {}, - branch: { - name: '', - url: '', - }, - }, - review: { - title: '', - iid: '', - created_at: '', - url: '', - state: '', - total_time: {}, - author: { - name: '', - id: '', - avatar_url: '', - web_url: '', - }, - }, - staging: { - id: '', - short_sha: '', - date: '', - url: '', - commit_url: '', - total_time: {}, - author: { - name: '', - id: '', - avatar_url: '', - web_url: '', - }, - branch: { - name: '', - url: '', - }, - }, - production: { - title: '', - created_at: '', - url: '', - iid: '', - total_time: {}, - author: { - name: '', - id: '', - avatar_url: '', - web_url: '', - }, - }, -}; diff --git a/app/assets/javascripts/cycle_analytics/store/mutations.js b/app/assets/javascripts/cycle_analytics/store/mutations.js index 118d5174fd0..50157cc3618 100644 --- a/app/assets/javascripts/cycle_analytics/store/mutations.js +++ b/app/assets/javascripts/cycle_analytics/store/mutations.js @@ -1,11 +1,6 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { DEFAULT_DAYS_TO_DISPLAY } from '../constants'; -import { - decorateData, - decorateEvents, - formatMedianValues, - calculateFormattedDayInPast, -} from '../utils'; +import { decorateData, formatMedianValues, calculateFormattedDayInPast } from '../utils'; import * as types from './mutation_types'; export default { @@ -82,10 +77,11 @@ export default { state.hasError = false; }, [types.RECEIVE_STAGE_DATA_SUCCESS](state, { events = [] }) { - const { selectedStage } = state; state.isLoadingStage = false; state.isEmptyStage = !events.length; - state.selectedStageEvents = decorateEvents(events, selectedStage); + state.selectedStageEvents = events.map((ev) => + convertObjectPropsToCamelCase(ev, { deep: true }), + ); state.hasError = false; }, [types.RECEIVE_STAGE_DATA_ERROR](state, error) { diff --git a/app/assets/javascripts/cycle_analytics/utils.js b/app/assets/javascripts/cycle_analytics/utils.js index a1690dd1513..1f72291e97b 100644 --- a/app/assets/javascripts/cycle_analytics/utils.js +++ b/app/assets/javascripts/cycle_analytics/utils.js @@ -2,27 +2,10 @@ import dateFormat from 'dateformat'; import { unescape } from 'lodash'; import { dateFormats } from '~/analytics/shared/constants'; import { sanitize } from '~/lib/dompurify'; -import { roundToNearestHalf, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { roundToNearestHalf } from '~/lib/utils/common_utils'; import { getDateInPast } from '~/lib/utils/datetime/date_calculation_utility'; import { parseSeconds } from '~/lib/utils/datetime_utility'; import { s__, sprintf } from '../locale'; -import DEFAULT_EVENT_OBJECTS from './default_event_objects'; - -/** - * These `decorate` methods will be removed when me migrate to the - * new table layout https://gitlab.com/gitlab-org/gitlab/-/issues/326704 - */ -const mapToEvent = (event, stage) => { - return convertObjectPropsToCamelCase( - { - ...DEFAULT_EVENT_OBJECTS[stage.slug], - ...event, - }, - { deep: true }, - ); -}; - -export const decorateEvents = (events, stage) => events.map((event) => mapToEvent(event, stage)); const mapToSummary = ({ value, ...rest }) => ({ ...rest, value: value || '-' }); const mapToMedians = ({ name: id, value }) => ({ id, value }); |