diff options
Diffstat (limited to 'app/assets/javascripts')
11 files changed, 154 insertions, 20 deletions
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue index eb720f5380b..54d1ee18545 100644 --- a/app/assets/javascripts/badges/components/badge.vue +++ b/app/assets/javascripts/badges/components/badge.vue @@ -14,6 +14,11 @@ export default { GlTooltip: GlTooltipDirective, }, props: { + name: { + type: String, + required: false, + default: '', + }, imageUrl: { type: String, required: true, diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue index df74eb2c2f7..2212bfec116 100644 --- a/app/assets/javascripts/badges/components/badge_form.vue +++ b/app/assets/javascripts/badges/components/badge_form.vue @@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex'; import createFlash from '~/flash'; import { s__, sprintf } from '~/locale'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui'; import createEmptyBadge from '../empty_badge'; import Badge from './badge.vue'; @@ -16,6 +16,8 @@ export default { Badge, LoadingButton, GlLoadingIcon, + GlFormInput, + GlFormGroup, }, props: { isEditing: { @@ -64,6 +66,18 @@ export default { renderedLinkUrl() { return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : ''; }, + name: { + get() { + return this.badge ? this.badge.name : ''; + }, + set(name) { + const badge = this.badge || createEmptyBadge(); + this.updateBadgeInForm({ + ...badge, + name, + }); + }, + }, imageUrl: { get() { return this.badge ? this.badge.imageUrl : ''; @@ -154,6 +168,10 @@ export default { novalidate @submit.prevent.stop="onSubmit" > + <gl-form-group :label="s__('Badges|Name')" label-for="badge-name"> + <gl-form-input id="badge-name" v-model="name" /> + </gl-form-group> + <div class="form-group"> <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label> <p v-html="helpText"></p> diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue index cad5611c8c5..35d735a2cfd 100644 --- a/app/assets/javascripts/badges/components/badge_list_row.vue +++ b/app/assets/javascripts/badges/components/badge_list_row.vue @@ -43,13 +43,14 @@ export default { <badge :image-url="badge.renderedImageUrl" :link-url="badge.renderedLinkUrl" - class="table-section section-40" + class="table-section section-30" /> - <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span> - <div class="table-section section-15"> + <div class="table-section section-30"> + <label class="label-bold str-truncated mb-0">{{ badge.name }}</label> <span class="badge badge-pill">{{ badgeKindText }}</span> </div> - <div class="table-section section-15 table-button-footer"> + <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span> + <div class="table-section section-10 table-button-footer"> <div v-if="canEditBadge" class="table-action-buttons"> <button :disabled="badge.isDeleting" diff --git a/app/assets/javascripts/badges/empty_badge.js b/app/assets/javascripts/badges/empty_badge.js index 49a9b5e1be8..527f233bb33 100644 --- a/app/assets/javascripts/badges/empty_badge.js +++ b/app/assets/javascripts/badges/empty_badge.js @@ -1,4 +1,5 @@ export default () => ({ + name: '', imageUrl: '', isDeleting: false, linkUrl: '', diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js index 5542278b3e0..806c2423e7e 100644 --- a/app/assets/javascripts/badges/store/actions.js +++ b/app/assets/javascripts/badges/store/actions.js @@ -1,13 +1,9 @@ import axios from '~/lib/utils/axios_utils'; import types from './mutation_types'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; export const transformBackendBadge = badge => ({ - id: badge.id, - imageUrl: badge.image_url, - kind: badge.kind, - linkUrl: badge.link_url, - renderedImageUrl: badge.rendered_image_url, - renderedLinkUrl: badge.rendered_link_url, + ...convertObjectPropsToCamelCase(badge, true), isDeleting: false, }); @@ -27,6 +23,7 @@ export default { dispatch('requestNewBadge'); return axios .post(endpoint, { + name: newBadge.name, image_url: newBadge.imageUrl, link_url: newBadge.linkUrl, }) @@ -141,6 +138,7 @@ export default { dispatch('requestUpdatedBadge'); return axios .put(endpoint, { + name: badge.name, image_url: badge.imageUrl, link_url: badge.linkUrl, }) diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index 0c194d67bce..6bbf118d7d1 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -72,7 +72,7 @@ export const truncate = (string, maxLength) => `${string.substr(0, maxLength - 3 * @param {String} sha * @returns {String} */ -export const truncateSha = sha => sha.substr(0, 8); +export const truncateSha = sha => sha.substring(0, 8); const ELLIPSIS_CHAR = '…'; export const truncatePathMiddleToLength = (text, maxWidth) => { diff --git a/app/assets/javascripts/monitoring/monitoring_tracking_helper.js b/app/assets/javascripts/monitoring/monitoring_tracking_helper.js new file mode 100644 index 00000000000..5ae1eca10de --- /dev/null +++ b/app/assets/javascripts/monitoring/monitoring_tracking_helper.js @@ -0,0 +1,10 @@ +import Tracking from '~/tracking'; + +const trackDashboardLoad = ({ label, value }) => + Tracking.event(document.body.dataset.page, 'dashboard_fetch', { + label, + property: 'count', + value, + }); + +export default trackDashboardLoad; diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index 6a8e3cc82f5..4db720db6e3 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -1,6 +1,7 @@ import * as types from './mutation_types'; import axios from '~/lib/utils/axios_utils'; import createFlash from '~/flash'; +import trackDashboardLoad from '../monitoring_tracking_helper'; import statusCodes from '../../lib/utils/http_status'; import { backOff } from '../../lib/utils/common_utils'; import { s__, __ } from '../../locale'; @@ -45,7 +46,7 @@ export const requestMetricsDashboard = ({ commit }) => { export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => { commit(types.SET_ALL_DASHBOARDS, response.all_dashboards); commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups); - dispatch('fetchPrometheusMetrics', params); + return dispatch('fetchPrometheusMetrics', params); }; export const receiveMetricsDashboardFailure = ({ commit }, error) => { commit(types.RECEIVE_METRICS_DATA_FAILURE, error); @@ -83,10 +84,12 @@ export const fetchDashboard = ({ state, dispatch }, params) => { return backOffRequest(() => axios.get(state.dashboardEndpoint, { params })) .then(resp => resp.data) - .then(response => { - dispatch('receiveMetricsDashboardSuccess', { - response, - params, + .then(response => dispatch('receiveMetricsDashboardSuccess', { response, params })) + .then(() => { + const dashboardType = state.currentDashboard === '' ? 'default' : 'custom'; + return trackDashboardLoad({ + label: `${dashboardType}_metrics_dashboard`, + value: state.metricsWithData.length, }); }) .catch(error => { diff --git a/app/assets/javascripts/releases/list/components/evidence_block.vue b/app/assets/javascripts/releases/list/components/evidence_block.vue new file mode 100644 index 00000000000..1638a52e73e --- /dev/null +++ b/app/assets/javascripts/releases/list/components/evidence_block.vue @@ -0,0 +1,76 @@ +<script> +import { __, sprintf } from '~/locale'; +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; +import { truncateSha } from '~/lib/utils/text_utility'; +import Icon from '~/vue_shared/components/icon.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import ExpandButton from '~/vue_shared/components/expand_button.vue'; + +export default { + name: 'EvidenceBlock', + components: { + ClipboardButton, + ExpandButton, + GlLink, + Icon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + release: { + type: Object, + required: true, + }, + }, + computed: { + evidenceTitle() { + return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tag_name }); + }, + evidenceUrl() { + return this.release.assets && this.release.assets.evidence_file_path; + }, + shortSha() { + return truncateSha(this.sha); + }, + sha() { + return this.release.evidence_sha; + }, + }, +}; +</script> + +<template> + <div> + <div class="card-text prepend-top-default"> + <b> + {{ __('Evidence collection') }} + </b> + </div> + <div class="d-flex align-items-baseline"> + <gl-link + v-gl-tooltip + class="monospace" + :title="__('Download evidence JSON')" + :download="evidenceTitle" + :href="evidenceUrl" + > + <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span> + </gl-link> + + <expand-button> + <template slot="short"> + <span class="js-short monospace">{{ shortSha }}</span> + </template> + <template slot="expanded"> + <span class="js-expanded monospace gl-pl-1">{{ sha }}</span> + </template> + </expand-button> + <clipboard-button + :title="__('Copy commit SHA')" + :text="sha" + css-class="btn-default btn-transparent btn-clipboard" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/releases/list/components/release_block.vue b/app/assets/javascripts/releases/list/components/release_block.vue index 2b6aa6aeff9..a09ee41ac67 100644 --- a/app/assets/javascripts/releases/list/components/release_block.vue +++ b/app/assets/javascripts/releases/list/components/release_block.vue @@ -11,10 +11,12 @@ import { getLocationHash } from '~/lib/utils/url_utility'; import { scrollToElement } from '~/lib/utils/common_utils'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ReleaseBlockFooter from './release_block_footer.vue'; +import EvidenceBlock from './evidence_block.vue'; export default { name: 'ReleaseBlock', components: { + EvidenceBlock, GlLink, GlBadge, GlButton, @@ -70,6 +72,9 @@ export default { hasAuthor() { return !_.isEmpty(this.author); }, + hasEvidence() { + return Boolean(this.release.evidence_sha); + }, shouldRenderMilestones() { return !_.isEmpty(this.release.milestones); }, @@ -81,6 +86,9 @@ export default { this.glFeatures.releaseEditPage && this.release._links && this.release._links.edit_url, ); }, + shouldShowEvidence() { + return this.glFeatures.releaseEvidenceCollection; + }, shouldShowFooter() { return this.glFeatures.releaseIssueSummary; }, @@ -217,6 +225,8 @@ export default { </div> </div> + <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" /> + <div class="card-text prepend-top-default"> <div v-html="release.description_html"></div> </div> diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index d64ab774431..e2a6e92081f 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -1,4 +1,5 @@ <script> +import { GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; @@ -15,6 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ExpandButton', components: { + GlButton, Icon, }, data() { @@ -39,15 +41,25 @@ export default { </script> <template> <span> - <button + <gl-button v-show="isCollapsed" :aria-label="ariaLabel" type="button" - class="text-expander btn-blank" + class="js-text-expander-prepend text-expander btn-blank" @click="onClick" > <icon :size="12" name="ellipsis_h" /> - </button> + </gl-button> + <span v-if="isCollapsed"> <slot name="short"></slot> </span> <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span> + <gl-button + v-show="!isCollapsed" + :aria-label="ariaLabel" + type="button" + class="js-text-expander-append text-expander btn-blank" + @click="onClick" + > + <icon :size="12" name="ellipsis_h" /> + </gl-button> </span> </template> |