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

Resolve "Monitoring graph date formatting is wrong"

Closes #37104

See merge request !13865

app/assets/javascripts/monitoring/components/monitoring_column.vue

@@ -7,6 +7,7 @@
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
   import { formatRelevantDigits } from '../../lib/utils/number_utils';
+  import { timeScaleFormat } from '../utils/date_time_formatters';
   import bp from '../../breakpoints';
 
   const bisectDate = d3.bisector(d => d.time).left;
@@ -159,6 +160,7 @@
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
           .ticks(measurements.xTicks)
+          .tickFormat(timeScaleFormat)
           .orient('bottom');
 
         const yAxis = d3.svg.axis()

app/assets/javascripts/monitoring/components/monitoring_deployment.vue

 <script>
-  import {
-      dateFormat,
-      timeFormat,
-    } from '../constants';
+  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
 
   export default {
     props: {

app/assets/javascripts/monitoring/components/monitoring_flag.vue

 <script>
-  import {
-      dateFormat,
-      timeFormat,
-    } from '../constants';
+  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
 
   export default {
     props: {

app/assets/javascripts/monitoring/constants.js

-import d3 from 'd3';
-
-export const dateFormat = d3.time.format('%b %d, %Y');
-export const timeFormat = d3.time.format('%H:%M%p');

app/assets/javascripts/monitoring/utils/date_time_formatters.js

+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],
+]);

changelogs/unreleased/37104-fix-graph-date-format.yml

+---
+title: Fix incorrect date/time formatting on prometheus graphs
+merge_request: 13865
+author:
+type: fixed