2 files changed, 41 insertions, 6 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index dbc778310f3..eede04a06cd 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -10,7 +10,7 @@
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
-  import { bisectDate } from '../utils/date_time_formatters';
+  import { bisectDate, timeScaleFormat } from '../utils/date_time_formatters';
   import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
@@ -171,7 +171,8 @@
         axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
 
         const xAxis = d3.axisBottom()
-          .scale(axisXScale);
+          .scale(axisXScale)
+          .tickFormat(timeScaleFormat);
 
         const yAxis = d3.axisLeft()
           .scale(axisYScale)
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index 53d0e2916a0..de4c6404a6d 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -1,7 +1,41 @@
 import { timeFormat as time } from 'd3-time-format';
+import { timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeYear } from 'd3-time';
 import { bisector } from 'd3-array';
 
-export const dateFormat = time('%b %-d, %Y');
-export const timeFormat = time('%-I:%M%p');
-export const dateFormatWithName = time('%a, %b %-d');
-export const bisectDate = bisector(d => d.time).left;
+const d3 = { time, bisector, timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeYear };
+
+export const dateFormat = d3.time('%b %-d, %Y');
+export const timeFormat = d3.time('%-I:%M%p');
+export const dateFormatWithName = d3.time('%a, %b %-d');
+export const bisectDate = d3.bisector(d => d.time).left;
+
+const formatMillisecond = d3.time('.%L');
+const formatSecond = d3.time(':%S');
+const formatMinute = d3.time('%-I:%M');
+const formatHour = d3.time('%-I %p');
+const formatDay = d3.time('%a %d');
+const formatWeek = d3.time('%b %d');
+const formatMonth = d3.time('%B');
+const formatYear = d3.time('%Y');
+
+export function timeScaleFormat(date) {
+  let formatFunction;
+  if (d3.timeSecond(date) < date) {
+    formatFunction = formatMillisecond;
+  } else if (d3.timeMinute(date) < date) {
+    formatFunction = formatSecond;
+  } else if (d3.timeHour(date) < date) {
+    formatFunction = formatMinute;
+  } else if (d3.timeDay(date) < date) {
+    formatFunction = formatHour;
+  } else if (d3.timeWeek(date) < date) {
+    formatFunction = formatDay;
+  } else if (d3.timeMonth(date) < date) {
+    formatFunction = formatWeek;
+  } else if (d3.timeYear(date) < date) {
+    formatFunction = formatMonth;
+  } else {
+    formatFunction = formatYear;
+  }
+  return formatFunction(date);
+}