2018-05-09 12:01:36 +05:30
|
|
|
<script>
|
2020-01-01 13:55:28 +05:30
|
|
|
import { GlSparklineChart } from '@gitlab/ui/dist/charts';
|
|
|
|
import { formatDate, secondsToMilliseconds } from '~/lib/utils/datetime_utility';
|
2018-03-17 18:26:18 +05:30
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
export default {
|
|
|
|
name: 'MemoryGraph',
|
2020-01-01 13:55:28 +05:30
|
|
|
components: {
|
|
|
|
GlSparklineChart,
|
|
|
|
},
|
2017-08-17 22:00:37 +05:30
|
|
|
props: {
|
|
|
|
metrics: { type: Array, required: true },
|
2020-01-01 13:55:28 +05:30
|
|
|
width: { type: Number, required: true },
|
|
|
|
height: { type: Number, required: true },
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
|
|
|
computed: {
|
2020-01-01 13:55:28 +05:30
|
|
|
chartData() {
|
|
|
|
return this.metrics.map(([x, y]) => [
|
|
|
|
this.getFormattedDeploymentTime(x),
|
|
|
|
this.getMemoryUsage(y),
|
|
|
|
]);
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2020-01-01 13:55:28 +05:30
|
|
|
getFormattedDeploymentTime(timestamp) {
|
|
|
|
return formatDate(new Date(secondsToMilliseconds(timestamp)), 'mmm dd yyyy HH:MM:s');
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
2020-01-01 13:55:28 +05:30
|
|
|
getMemoryUsage(MBs) {
|
|
|
|
return Number(MBs).toFixed(2);
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2018-05-09 12:01:36 +05:30
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-01-01 13:55:28 +05:30
|
|
|
<div class="memory-graph-container p-1" :style="{ width: `${width}px` }">
|
|
|
|
<gl-sparkline-chart
|
2018-05-09 12:01:36 +05:30
|
|
|
:height="height"
|
2020-01-01 13:55:28 +05:30
|
|
|
:tooltip-label="__('MB')"
|
|
|
|
:show-last-y-value="false"
|
|
|
|
:data="chartData"
|
|
|
|
/>
|
2018-05-09 12:01:36 +05:30
|
|
|
</div>
|
|
|
|
</template>
|