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

Resolve "Monitoring graph date formatting is wrong"

Closes #37104

See merge request !13865

6 files changed, 27 insertions, 15 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index 407af51cb7a..c0abb436e43 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/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()
diff --git a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue
index e6432ba3191..dadbcd1aaa6 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue
@@ -1,8 +1,5 @@
 <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">
diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/monitoring_flag.vue
index 5a0e50fcab3..61cbeeebb17 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_flag.vue
@@ -1,8 +1,5 @@
 <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">
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
deleted file mode 100644
index c3a8da52404..00000000000
--- a/app/assets/javascripts/monitoring/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import d3 from 'd3';
-
-export const dateFormat = d3.time.format('%b %d, %Y');
-export const timeFormat = d3.time.format('%H:%M%p');
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
new file mode 100644
index 00000000000..26bcaa02511
--- /dev/null
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -0,0 +1,15 @@
+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],
+]);
diff --git a/changelogs/unreleased/37104-fix-graph-date-format.yml b/changelogs/unreleased/37104-fix-graph-date-format.yml
new file mode 100644
index 00000000000..f7d39fe8283
--- /dev/null
+++ b/changelogs/unreleased/37104-fix-graph-date-format.yml
@@ -0,0 +1,5 @@
+---
+title: Fix incorrect date/time formatting on prometheus graphs
+merge_request: 13865
+author:
+type: fixed