diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/empty_chart.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/empty_chart.vue | 7 |
1 files changed, 6 insertions, 1 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue index 4b54cffe231..ae079da0b0b 100644 --- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue +++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue @@ -1,8 +1,12 @@ <script> import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg'; +import { GlSafeHtmlDirective } from '@gitlab/ui'; import { chartHeight } from '../../constants'; export default { + directives: { + SafeHtml: GlSafeHtmlDirective, + }, data() { return { height: chartHeight, @@ -18,14 +22,15 @@ export default { created() { this.chartEmptyStateIllustration = chartEmptyStateIllustration; }, + safeHtmlConfig: { ADD_TAGS: ['use'] }, }; </script> <template> <div class="d-flex flex-column justify-content-center"> <div + v-safe-html:[$options.safeHtmlConfig]="chartEmptyStateIllustration" class="gl-mt-3 svg-w-100 d-flex align-items-center" :style="svgContainerStyle" - v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */" ></div> <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5> </div> |