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: {
@@ -58,7 +55,7 @@
     class="deploy-info"
     v-if="showDeployInfo">
     <g
-      v-for="(deployment, index) in deploymentData" 
+      v-for="(deployment, index) in deploymentData"
       :key="index"
       :class="nameDeploymentClass(deployment)"
       :transform="transformDeploymentGroup(deployment)">
@@ -92,7 +89,7 @@
           width="90"
           height="58">
         </rect>
-        <g 
+        <g
           transform="translate(5, 2)">
           <text
             class="deploy-info-text text-metric-bold">

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: {
@@ -72,7 +69,7 @@
       r="5"
       transform="translate(-5, 20)">
     </circle>
-    <svg 
+    <svg
       class="rect-text-metric"
       :x="currentFlagPosition"
       y="0">

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