diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue | 66 |
1 files changed, 28 insertions, 38 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue index fe41a15979e..9b2cd41092e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue @@ -1,5 +1,6 @@ <script> -import { sprintf, s__ } from '~/locale'; +import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; import statusCodes from '~/lib/utils/http_status'; import { bytesToMiB } from '~/lib/utils/number_utils'; import { backOff } from '~/lib/utils/common_utils'; @@ -10,6 +11,9 @@ export default { name: 'MemoryUsage', components: { MemoryGraph, + GlLoadingIcon, + GlSprintf, + GlLink, }, props: { metricsUrl: { @@ -47,45 +51,22 @@ export default { return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed; }, memoryChangeMessage() { - const messageProps = { - memoryFrom: this.memoryFrom, - memoryTo: this.memoryTo, - metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`, - metricsLinkEnd: '</a>', - emphasisStart: '<b>', - emphasisEnd: '</b>', - }; const memoryTo = Number(this.memoryTo); const memoryFrom = Number(this.memoryFrom); - let memoryUsageMsg = ''; if (memoryTo > memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } else if (memoryTo < memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, - ); - } else { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } - return memoryUsageMsg; + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', + ); }, }, mounted() { @@ -155,14 +136,23 @@ export default { <template> <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading"> - <i class="fa fa-spinner fa-spin usage-info-load-spinner" aria-hidden="true"> </i - >{{ s__('mrWidget|Loading deployment statistics') }} + <gl-loading-icon class="usage-info-load-spinner" />{{ + s__('mrWidget|Loading deployment statistics') + }} + </p> + <p v-if="shouldShowMemoryGraph" class="usage-info js-usage-info"> + <gl-sprintf :message="memoryChangeMessage"> + <template #metricsLink="{ content }"> + <gl-link :href="metricsMonitoringUrl">{{ content }}</gl-link> + </template> + <template #emphasis="{content}"> + <strong>{{ content }}</strong> + </template> + <template #memoryFrom>{{ memoryFrom }}</template> + <template #memoryTo>{{ memoryTo }}</template> + </gl-sprintf> </p> - <p - v-if="shouldShowMemoryGraph" - class="usage-info js-usage-info" - v-html="memoryChangeMessage" - ></p> + <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed"> {{ s__('mrWidget|Failed to load deployment statistics') }} </p> |