diff options
Diffstat (limited to 'app/assets/javascripts/issue_show')
7 files changed, 57 insertions, 26 deletions
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index e1b308c6f57..8a1a8448bb8 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ import $ from 'jquery'; import { GlIcon } from '@gitlab/ui'; import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors'; @@ -62,11 +61,15 @@ export default { data-toggle="dropdown" > <span class="dropdown-toggle-text">{{ __('Choose a template') }}</span> - <i aria-hidden="true" class="fa fa-chevron-down"> </i> + <gl-icon + name="chevron-down" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + aria-hidden="true" + /> </button> <div class="dropdown-menu dropdown-select"> <div class="dropdown-title gl-display-flex gl-justify-content-center"> - <span class="gl-ml-auto">Choose a template</span> + <span class="gl-ml-auto">{{ __('Choose a template') }}</span> <button class="dropdown-title-button dropdown-menu-close gl-ml-auto" :aria-label="__('Close')" @@ -82,7 +85,7 @@ export default { :placeholder="__('Filter')" autocomplete="off" /> - <i aria-hidden="true" class="fa fa-search dropdown-input-search"> </i> + <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" /> <gl-icon name="close" class="dropdown-input-clear js-dropdown-input-clear" diff --git a/app/assets/javascripts/issue_show/components/incidents/graphql/queries/get_alert.graphql b/app/assets/javascripts/issue_show/components/incidents/graphql/queries/get_alert.graphql index 00ddc80432d..bb637dea033 100644 --- a/app/assets/javascripts/issue_show/components/incidents/graphql/queries/get_alert.graphql +++ b/app/assets/javascripts/issue_show/components/incidents/graphql/queries/get_alert.graphql @@ -13,6 +13,7 @@ query getAlert($iid: String!, $fullPath: ID!) { service description endedAt + hosts details } } diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue index a47fe4c84cf..96f187f26dd 100644 --- a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue +++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue @@ -1,42 +1,63 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; import { formatDate } from '~/lib/utils/datetime_utility'; export default { components: { GlLink, + IncidentSla: () => import('ee_component/issue_show/components/incidents/incident_sla.vue'), + }, + directives: { + GlTooltip: GlTooltipDirective, }, props: { alert: { type: Object, - required: true, + required: false, + default: null, }, }, + data() { + return { childHasData: false }; + }, computed: { startTime() { return formatDate(this.alert.startedAt, 'yyyy-mm-dd Z'); }, + showHighlightBar() { + return this.alert || this.childHasData; + }, + }, + methods: { + update(hasData) { + this.childHasData = hasData; + }, }, }; </script> <template> <div - class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between" + v-show="showHighlightBar" + class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between gl-xs-flex-direction-column" > - <div class="text-truncate gl-pr-3"> + <div v-if="alert" class="gl-mr-3"> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span> - <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link> + <gl-link v-gl-tooltip :title="alert.title" :href="alert.detailsUrl"> + #{{ alert.iid }} + </gl-link> </div> - <div class="gl-pr-3 gl-white-space-nowrap"> + <div v-if="alert" class="gl-mr-3"> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span> {{ startTime }} </div> - <div class="gl-white-space-nowrap"> + <div v-if="alert" class="gl-mr-3"> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span> <span>{{ alert.eventCount }}</span> </div> + + <incident-sla @update="update" /> </div> </template> diff --git a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue index 4104ddbf06f..c593fa33973 100644 --- a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue +++ b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue @@ -5,8 +5,10 @@ import HighlightBar from './highlight_bar.vue'; import createFlash from '~/flash'; import { s__ } from '~/locale'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; +import Tracking from '~/tracking'; import getAlert from './graphql/queries/get_alert.graphql'; +import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; export default { components: { @@ -45,12 +47,14 @@ export default { loading() { return this.$apollo.queries.alert.loading; }, - alertTableFields() { - if (this.alert) { - const { detailsUrl, __typename, ...restDetails } = this.alert; - return restDetails; - } - return null; + }, + mounted() { + this.trackPageViews(); + }, + methods: { + trackPageViews() { + const { category, action } = trackIncidentDetailsViewsOptions; + Tracking.event(category, action); }, }, }; @@ -60,11 +64,11 @@ export default { <div> <gl-tabs content-class="gl-reset-line-height" class="gl-mt-n3" data-testid="incident-tabs"> <gl-tab :title="s__('Incident|Summary')"> - <highlight-bar v-if="alert" :alert="alert" /> + <highlight-bar :alert="alert" /> <description-component v-bind="$attrs" /> </gl-tab> <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')"> - <alert-details-table :alert="alertTableFields" :loading="loading" /> + <alert-details-table :alert="alert" :loading="loading" /> </gl-tab> </gl-tabs> </div> diff --git a/app/assets/javascripts/issue_show/incident.js b/app/assets/javascripts/issue_show/incident.js index a34e75ee64a..618fb551f28 100644 --- a/app/assets/javascripts/issue_show/incident.js +++ b/app/assets/javascripts/issue_show/incident.js @@ -3,6 +3,7 @@ import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import issuableApp from './components/app.vue'; import incidentTabs from './components/incidents/incident_tabs.vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; Vue.use(VueApollo); @@ -11,7 +12,7 @@ export default function initIssuableApp(issuableData = {}) { defaultClient: createDefaultClient(), }); - const { projectNamespace, projectPath, iid } = issuableData; + const { iid, projectNamespace, projectPath, slaFeatureAvailable } = issuableData; return new Vue({ el: document.getElementById('js-issuable-app'), @@ -22,6 +23,7 @@ export default function initIssuableApp(issuableData = {}) { provide: { fullPath: `${projectNamespace}/${projectPath}`, iid, + slaFeatureAvailable: parseBoolean(slaFeatureAvailable), }, render(createElement) { return createElement('issuable-app', { diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js index c6f7e892f9b..06bbd406e3a 100644 --- a/app/assets/javascripts/issue_show/stores/index.js +++ b/app/assets/javascripts/issue_show/stores/index.js @@ -1,4 +1,4 @@ -import { sanitize } from 'dompurify'; +import { sanitize } from '~/lib/dompurify'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import updateDescription from '../utils/update_description'; diff --git a/app/assets/javascripts/issue_show/utils/parse_data.js b/app/assets/javascripts/issue_show/utils/parse_data.js index a62a5167961..620974901fb 100644 --- a/app/assets/javascripts/issue_show/utils/parse_data.js +++ b/app/assets/javascripts/issue_show/utils/parse_data.js @@ -1,4 +1,5 @@ -import { sanitize } from 'dompurify'; +import * as Sentry from '~/sentry/wrapper'; +import { sanitize } from '~/lib/dompurify'; // We currently load + parse the data from the issue app and related merge request let cachedParsedData; @@ -7,10 +8,9 @@ export const parseIssuableData = () => { try { if (cachedParsedData) return cachedParsedData; - const initialDataEl = document.getElementById('js-issuable-app-initial-data'); - - const parsedData = JSON.parse(initialDataEl.textContent.replace(/"/g, '"')); + const initialDataEl = document.getElementById('js-issuable-app'); + const parsedData = JSON.parse(initialDataEl.dataset.initial); parsedData.initialTitleHtml = sanitize(parsedData.initialTitleHtml); parsedData.initialDescriptionHtml = sanitize(parsedData.initialDescriptionHtml); @@ -18,7 +18,7 @@ export const parseIssuableData = () => { return parsedData; } catch (e) { - console.error(e); // eslint-disable-line no-console + Sentry.captureException(e); return {}; } |