diff options
author | George Tsiolis <tsiolis.g@gmail.com> | 2018-03-05 18:50:01 +0200 |
---|---|---|
committer | George Tsiolis <tsiolis.g@gmail.com> | 2018-03-08 19:27:47 +0200 |
commit | 910f513ab2b04bf5607213da0a49ce9c5c73bc32 (patch) | |
tree | 1ed536dd75324de733a30e44f1c320d6c5aec53a | |
parent | 67feb7cd42e439e754d64fce646d8d9fb99a0ad8 (diff) | |
download | gitlab-ce-910f513ab2b04bf5607213da0a49ce9c5c73bc32.tar.gz |
Move MemoryGraph and MemoryUsage vue components
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue (renamed from app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js) | 87 | ||||
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js | 8 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/memory_graph.vue (renamed from app/assets/javascripts/vue_shared/components/memory_graph.js) | 38 | ||||
-rw-r--r-- | changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml | 5 | ||||
-rw-r--r-- | spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js | 18 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/memory_graph_spec.js | 26 |
6 files changed, 89 insertions, 93 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue index 69e70ba1dd6..a16f9055a6d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue @@ -1,11 +1,15 @@ +<script> import statusCodes from '../../lib/utils/http_status'; import { bytesToMiB } from '../../lib/utils/number_utils'; import { backOff } from '../../lib/utils/common_utils'; -import MemoryGraph from '../../vue_shared/components/memory_graph'; +import MemoryGraph from '../../vue_shared/components/memory_graph.vue'; import MRWidgetService from '../services/mr_widget_service'; export default { name: 'MemoryUsage', + components: { + MemoryGraph, + }, props: { metricsUrl: { type: String, @@ -28,9 +32,6 @@ export default { backOffRequestCounter: 0, }; }, - components: { - 'mr-memory-graph': MemoryGraph, - }, computed: { shouldShowLoading() { return this.loadingMetrics && !this.hasMetrics && !this.loadFailed; @@ -57,6 +58,10 @@ export default { return 'unchanged'; }, }, + mounted() { + this.loadingMetrics = true; + this.loadMetrics(); + }, methods: { getMegabytes(bytesString) { const valueInBytes = Number(bytesString).toFixed(2); @@ -114,40 +119,42 @@ export default { }); }, }, - mounted() { - this.loadingMetrics = true; - this.loadMetrics(); - }, - 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" />Loading deployment statistics - </p> - <p - v-if="shouldShowMemoryGraph" - class="usage-info js-usage-info"> - <a :href="metricsMonitoringUrl">Memory</a> usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB - </p> - <p - v-if="shouldShowLoadFailure" - class="usage-info js-usage-info usage-info-failed"> - Failed to load deployment statistics - </p> - <p - v-if="shouldShowMetricsUnavailable" - class="usage-info js-usage-info usage-info-unavailable"> - Deployment statistics are not available currently - </p> - <mr-memory-graph - v-if="shouldShowMemoryGraph" - :metrics="memoryMetrics" - :deploymentTime="deploymentTime" - height="25" - width="100" /> - </div> - `, }; +</script> + +<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>Loading deployment statistics + </p> + <p + v-if="shouldShowMemoryGraph" + class="usage-info js-usage-info"> + <a + :href="metricsMonitoringUrl" + >Memory</a> usage <b>{{ memoryChangeType }}</b> from {{ memoryFrom }}MB to {{ memoryTo }}MB + </p> + <p + v-if="shouldShowLoadFailure" + class="usage-info js-usage-info usage-info-failed"> + Failed to load deployment statistics + </p> + <p + v-if="shouldShowMetricsUnavailable" + class="usage-info js-usage-info usage-info-unavailable"> + Deployment statistics are not available currently + </p> + <memory-graph + v-if="shouldShowMemoryGraph" + :metrics="memoryMetrics" + :deployment-time="deploymentTime" + height="25" + width="100" + /> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js index d174a900f63..c7f992384c8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js @@ -1,7 +1,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility'; import { visitUrl } from '../../lib/utils/url_utility'; import Flash from '../../flash'; -import MemoryUsage from './mr_widget_memory_usage'; +import MemoryUsage from './memory_usage.vue'; import StatusIcon from './mr_widget_status_icon.vue'; import MRWidgetService from '../services/mr_widget_service'; @@ -12,8 +12,8 @@ export default { service: { type: Object, required: true }, }, components: { - 'mr-widget-memory-usage': MemoryUsage, - 'status-icon': StatusIcon, + MemoryUsage, + StatusIcon, }, methods: { formatDate(date) { @@ -100,7 +100,7 @@ export default { class="btn btn-default btn-xs"> Stop environment </button> - <mr-widget-memory-usage + <memory-usage v-if="deployment.metrics_url" :metrics-url="deployment.metrics_url" :metrics-monitoring-url="deployment.metrics_monitoring_url" diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.vue index f37ef1a5ca3..b07f6b07afe 100644 --- a/app/assets/javascripts/vue_shared/components/memory_graph.js +++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue @@ -1,3 +1,4 @@ +<script> import { getTimeago } from '../../lib/utils/datetime_utility'; export default { @@ -22,6 +23,9 @@ export default { return `Deployed ${deployedSince}`; }, }, + mounted() { + this.renderGraph(this.deploymentTime, this.metrics); + }, methods: { /** * Returns metric value index in metrics array @@ -103,15 +107,27 @@ export default { this.dotY = dotY; }, }, - mounted() { - this.renderGraph(this.deploymentTime, this.metrics); - }, - template: ` - <div class="memory-graph-container"> - <svg class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg"> - <path :d="pathD" :viewBox="pathViewBox" /> - <circle r="1.5" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" /> - </svg> - </div> - `, }; +</script> + +<template> + <div class="memory-graph-container"> + <svg + class="has-tooltip" + :title="getFormattedMedian" + :width="width" + :height="height" + xmlns="http://www.w3.org/2000/svg"> + <path + :d="pathD" + :viewBox="pathViewBox" + /> + <circle + r="1.5" + :cx="dotX" + :cy="dotY" + tranform="translate(0 -1)" + /> + </svg> + </div> +</template> diff --git a/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml b/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml new file mode 100644 index 00000000000..96e63343963 --- /dev/null +++ b/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml @@ -0,0 +1,5 @@ +--- +title: Move MemoryGraph and MemoryUsage vue components +merge_request: 17533 +author: George Tsiolis +type: performance diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js index 07ed7f7f532..31710551399 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widget_memory_usage'; +import MemoryUsage from '~/vue_merge_request_widget/components/memory_usage.vue'; import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; const url = '/root/acets-review-apps/environments/15/deployments/1/metrics'; @@ -34,7 +34,7 @@ const metricsMockData = { }; const createComponent = () => { - const Component = Vue.extend(memoryUsageComponent); + const Component = Vue.extend(MemoryUsage); return new Component({ el: document.createElement('div'), @@ -67,21 +67,9 @@ describe('MemoryUsage', () => { el = vm.$el; }); - describe('props', () => { - it('should have props with defaults', () => { - const { metricsUrl } = memoryUsageComponent.props; - const MetricsUrlTypeClass = metricsUrl.type; - - Vue.nextTick(() => { - expect(new MetricsUrlTypeClass() instanceof String).toBeTruthy(); - expect(metricsUrl.required).toBeTruthy(); - }); - }); - }); - describe('data', () => { it('should have default data', () => { - const data = memoryUsageComponent.data(); + const data = MemoryUsage.data(); expect(Array.isArray(data.memoryMetrics)).toBeTruthy(); expect(data.memoryMetrics.length).toBe(0); diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js index d46a3f2328e..73a69df019e 100644 --- a/spec/javascripts/vue_shared/components/memory_graph_spec.js +++ b/spec/javascripts/vue_shared/components/memory_graph_spec.js @@ -1,12 +1,12 @@ import Vue from 'vue'; -import memoryGraphComponent from '~/vue_shared/components/memory_graph'; +import MemoryGraph from '~/vue_shared/components/memory_graph.vue'; import { mockMetrics, mockMedian, mockMedianIndex } from './mock_data'; const defaultHeight = '25'; const defaultWidth = '100'; const createComponent = () => { - const Component = Vue.extend(memoryGraphComponent); + const Component = Vue.extend(MemoryGraph); return new Component({ el: document.createElement('div'), @@ -32,29 +32,9 @@ describe('MemoryGraph', () => { el = vm.$el; }); - describe('props', () => { - it('should have props with defaults', (done) => { - const { metrics, deploymentTime, width, height } = memoryGraphComponent.props; - - Vue.nextTick(() => { - const typeClassMatcher = (propItem, expectedType) => { - const PropItemTypeClass = propItem.type; - expect(new PropItemTypeClass() instanceof expectedType).toBeTruthy(); - expect(propItem.required).toBeTruthy(); - }; - - typeClassMatcher(metrics, Array); - typeClassMatcher(deploymentTime, Number); - typeClassMatcher(width, String); - typeClassMatcher(height, String); - done(); - }); - }); - }); - describe('data', () => { it('should have default data', () => { - const data = memoryGraphComponent.data(); + const data = MemoryGraph.data(); const dataValidator = (dataItem, expectedType, defaultVal) => { expect(typeof dataItem).toBe(expectedType); expect(dataItem).toBe(defaultVal); |