From 596fe67a0370f985ee08b3c8ef01fee6e4aaf045 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mgreiling@gitlab.com>
Date: Tue, 29 Aug 2017 08:29:11 +0000
Subject: [PATCH] Resolve "Monitoring graph date formatting is wrong"

---
 .../monitoring/components/monitoring_column.vue   |  2 ++
 .../components/monitoring_deployment.vue          |  9 +++------
 .../monitoring/components/monitoring_flag.vue     |  7 ++-----
 app/assets/javascripts/monitoring/constants.js    |  4 ----
 .../monitoring/utils/date_time_formatters.js      | 15 +++++++++++++++
 .../unreleased/37104-fix-graph-date-format.yml    |  5 +++++
 6 files changed, 27 insertions(+), 15 deletions(-)
 delete mode 100644 app/assets/javascripts/monitoring/constants.js
 create mode 100644 app/assets/javascripts/monitoring/utils/date_time_formatters.js
 create mode 100644 changelogs/unreleased/37104-fix-graph-date-format.yml

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