Commit c00a5e86 authored by Phil Hughes's avatar Phil Hughes

Merge branch '37104-fix-graph-date-format' into 'master'

Resolve "Monitoring graph date formatting is wrong"

Closes #37104

See merge request !13865
parents f0d22bb6 596fe67a
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import measurements from '../utils/measurements'; import measurements from '../utils/measurements';
import { formatRelevantDigits } from '../../lib/utils/number_utils'; import { formatRelevantDigits } from '../../lib/utils/number_utils';
import { timeScaleFormat } from '../utils/date_time_formatters';
import bp from '../../breakpoints'; import bp from '../../breakpoints';
const bisectDate = d3.bisector(d => d.time).left; const bisectDate = d3.bisector(d => d.time).left;
...@@ -159,6 +160,7 @@ ...@@ -159,6 +160,7 @@
const xAxis = d3.svg.axis() const xAxis = d3.svg.axis()
.scale(axisXScale) .scale(axisXScale)
.ticks(measurements.xTicks) .ticks(measurements.xTicks)
.tickFormat(timeScaleFormat)
.orient('bottom'); .orient('bottom');
const yAxis = d3.svg.axis() const yAxis = d3.svg.axis()
......
<script> <script>
import { import { dateFormat, timeFormat } from '../utils/date_time_formatters';
dateFormat,
timeFormat,
} from '../constants';
export default { export default {
props: { props: {
...@@ -58,7 +55,7 @@ ...@@ -58,7 +55,7 @@
class="deploy-info" class="deploy-info"
v-if="showDeployInfo"> v-if="showDeployInfo">
<g <g
v-for="(deployment, index) in deploymentData" v-for="(deployment, index) in deploymentData"
:key="index" :key="index"
:class="nameDeploymentClass(deployment)" :class="nameDeploymentClass(deployment)"
:transform="transformDeploymentGroup(deployment)"> :transform="transformDeploymentGroup(deployment)">
...@@ -92,7 +89,7 @@ ...@@ -92,7 +89,7 @@
width="90" width="90"
height="58"> height="58">
</rect> </rect>
<g <g
transform="translate(5, 2)"> transform="translate(5, 2)">
<text <text
class="deploy-info-text text-metric-bold"> class="deploy-info-text text-metric-bold">
......
<script> <script>
import { import { dateFormat, timeFormat } from '../utils/date_time_formatters';
dateFormat,
timeFormat,
} from '../constants';
export default { export default {
props: { props: {
...@@ -72,7 +69,7 @@ ...@@ -72,7 +69,7 @@
r="5" r="5"
transform="translate(-5, 20)"> transform="translate(-5, 20)">
</circle> </circle>
<svg <svg
class="rect-text-metric" class="rect-text-metric"
:x="currentFlagPosition" :x="currentFlagPosition"
y="0"> y="0">
......
import d3 from 'd3';
export const dateFormat = d3.time.format('%b %d, %Y');
export const timeFormat = d3.time.format('%H:%M%p');
import d3 from 'd3';
export const dateFormat = d3.time.format('%b %-d, %Y');
export const timeFormat = d3.time.format('%-I:%M%p');
export const timeScaleFormat = d3.time.format.multi([
['.%L', d => d.getMilliseconds()],
[':%S', d => d.getSeconds()],
['%-I:%M', d => d.getMinutes()],
['%-I %p', d => d.getHours()],
['%a %-d', d => d.getDay() && d.getDate() !== 1],
['%b %-d', d => d.getDate() !== 1],
['%B', d => d.getMonth()],
['%Y', () => true],
]);
---
title: Fix incorrect date/time formatting on prometheus graphs
merge_request: 13865
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment