summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorJose Ivan Vargas <jvargas@gitlab.com>2017-11-30 12:01:49 -0600
committerJose Ivan Vargas <jvargas@gitlab.com>2017-12-18 16:15:18 -0600
commit51a9797daa868976f6821273f61939a13a8d233a (patch)
treec10c1b4790d7da04d399a219b71fcdf020606f01 /app
parent4e0e2fd9d297319f323b987944b58bfd3a14ba58 (diff)
downloadgitlab-ce-51a9797daa868976f6821273f61939a13a8d233a.tar.gz
Restored the timeScaleFormat for the prometheus dashboard
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/monitoring/components/graph.vue5
-rw-r--r--app/assets/javascripts/monitoring/utils/date_time_formatters.js42
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);
+}