diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-21 15:06:40 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-21 15:06:40 +0300 |
commit | 0a6ffb540e569bd7a7c548d59b12bc55d4bf9cf1 (patch) | |
tree | 9ff7dd7b21a3f9642a8fbb45c922f71a433faf02 /app/assets/javascripts/vue_shared/components/memory_graph.vue | |
parent | a048261403ea7e12992ccffe704f0779235712d7 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/memory_graph.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/memory_graph.vue | 129 |
1 files changed, 22 insertions, 107 deletions
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue index 26d7d8e8866..58fe3b2b28e 100644 --- a/app/assets/javascripts/vue_shared/components/memory_graph.vue +++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue @@ -1,128 +1,43 @@ <script> -import { __, sprintf } from '~/locale'; -import { getTimeago } from '../../lib/utils/datetime_utility'; +import { formatDate, secondsToMilliseconds } from '~/lib/utils/datetime_utility'; +import { GlSparklineChart } from '@gitlab/ui/dist/charts'; export default { name: 'MemoryGraph', + components: { + GlSparklineChart, + }, props: { metrics: { type: Array, required: true }, - deploymentTime: { type: Number, required: true }, - width: { type: String, required: true }, - height: { type: String, required: true }, - }, - data() { - return { - pathD: '', - pathViewBox: '', - dotX: '', - dotY: '', - }; + width: { type: Number, required: true }, + height: { type: Number, required: true }, }, computed: { - getFormattedMedian() { - const deployedSince = getTimeago().format(this.deploymentTime * 1000); - return sprintf(__('Deployed %{deployedSince}'), { deployedSince }); + chartData() { + return this.metrics.map(([x, y]) => [ + this.getFormattedDeploymentTime(x), + this.getMemoryUsage(y), + ]); }, }, - mounted() { - this.renderGraph(this.deploymentTime, this.metrics); - }, methods: { - /** - * Returns metric value index in metrics array - * with timestamp closest to matching median - */ - getMedianMetricIndex(median, metrics) { - let matchIndex = 0; - let timestampDiff = 0; - let smallestDiff = 0; - - const metricTimestamps = metrics.map(v => v[0]); - - // Find metric timestamp which is closest to deploymentTime - timestampDiff = Math.abs(metricTimestamps[0] - median); - metricTimestamps.forEach((timestamp, index) => { - if (index === 0) { - // Skip first element - return; - } - - smallestDiff = Math.abs(timestamp - median); - if (smallestDiff < timestampDiff) { - matchIndex = index; - timestampDiff = smallestDiff; - } - }); - - return matchIndex; + getFormattedDeploymentTime(timestamp) { + return formatDate(new Date(secondsToMilliseconds(timestamp)), 'mmm dd yyyy HH:MM:s'); }, - - /** - * Get Graph Plotting values to render Line and Dot - */ - getGraphPlotValues(median, metrics) { - const renderData = metrics.map(v => v[1]); - const medianMetricIndex = this.getMedianMetricIndex(median, metrics); - let cx = 0; - let cy = 0; - - // Find Maximum and Minimum values from `renderData` array - const maxMemory = Math.max.apply(null, renderData); - const minMemory = Math.min.apply(null, renderData); - - // Find difference between extreme ends - const diff = maxMemory - minMemory; - const lineWidth = renderData.length; - - // Iterate over metrics values and perform following - // 1. Find x & y co-ords for deploymentTime's memory value - // 2. Return line path against maxMemory - const linePath = renderData.map((y, x) => { - if (medianMetricIndex === x) { - cx = x; - cy = maxMemory - y; - } - return `${x} ${maxMemory - y}`; - }); - - return { - pathD: linePath, - pathViewBox: { - lineWidth, - diff, - }, - dotX: cx, - dotY: cy, - }; - }, - - /** - * Render Graph based on provided median and metrics values - */ - renderGraph(median, metrics) { - const { pathD, pathViewBox, dotX, dotY } = this.getGraphPlotValues(median, metrics); - - // Set props and update graph on UI. - this.pathD = `M ${pathD}`; - this.pathViewBox = `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`; - this.dotX = dotX; - this.dotY = dotY; + getMemoryUsage(MBs) { + return Number(MBs).toFixed(2); }, }, }; </script> <template> - <div class="memory-graph-container"> - <svg - :title="getFormattedMedian" - :width="width" + <div class="memory-graph-container p-1" :style="{ width: `${width}px` }"> + <gl-sparkline-chart :height="height" - class="has-tooltip" - xmlns="http://www.w3.org/2000/svg" - > - <path :d="pathD" :viewBox="pathViewBox" /> - <circle :cx="dotX" :cy="dotY" r="1.5" transform="translate(0 -1)" /> - </svg> + :tooltip-label="__('MB')" + :show-last-y-value="false" + :data="chartData" + /> </div> </template> |