diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-03 12:07:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-03 12:07:54 +0300 |
commit | 87ef501eacd66d7166183d20d84e33de022f7002 (patch) | |
tree | fa4e0f41e00a4b6aeb035530be4b5473f51b7a3d /app/assets/javascripts/monitoring | |
parent | f321e51f46bcb628c3e96a44b5ebf3bb1c4033ab (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring')
4 files changed, 128 insertions, 21 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/options.js b/app/assets/javascripts/monitoring/components/charts/options.js new file mode 100644 index 00000000000..d9f49bd81f5 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/options.js @@ -0,0 +1,78 @@ +import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format'; +import { s__ } from '~/locale'; + +const yAxisBoundaryGap = [0.1, 0.1]; +/** + * Max string length of formatted axis tick + */ +const maxDataAxisTickLength = 8; + +// Defaults +const defaultFormat = SUPPORTED_FORMATS.number; + +const defaultYAxisFormat = defaultFormat; +const defaultYAxisPrecision = 2; + +const defaultTooltipFormat = defaultFormat; +const defaultTooltipPrecision = 3; + +// Give enough space for y-axis with units and name. +const chartGridLeft = 75; + +// Axis options + +/** + * Converts .yml parameters to echarts axis options for data axis + * @param {Object} param - Dashboard .yml definition options + */ +const getDataAxisOptions = ({ format, precision, name }) => { + const formatter = getFormatter(format); + + return { + name, + nameLocation: 'center', // same as gitlab-ui's default + scale: true, + axisLabel: { + formatter: val => formatter(val, precision, maxDataAxisTickLength), + }, + }; +}; + +/** + * Converts .yml parameters to echarts y-axis options + * @param {Object} param - Dashboard .yml definition options + */ +export const getYAxisOptions = ({ + name = s__('Metrics|Values'), + format = defaultYAxisFormat, + precision = defaultYAxisPrecision, +} = {}) => { + return { + nameGap: 63, // larger gap than gitlab-ui's default to fit with formatted numbers + scale: true, + boundaryGap: yAxisBoundaryGap, + + ...getDataAxisOptions({ + name, + format, + precision, + }), + }; +}; + +// Chart grid + +/** + * Grid with enough room to display chart. + */ +export const getChartGrid = ({ left = chartGridLeft } = {}) => ({ left }); + +// Tooltip options + +export const getTooltipFormatter = ({ + format = defaultTooltipFormat, + precision = defaultTooltipPrecision, +} = {}) => { + const formatter = getFormatter(format); + return num => formatter(num, precision); +}; diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 1c39fb072d9..cba0a6da6a9 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -4,7 +4,6 @@ import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { s__, __ } from '~/locale'; -import { getFormatter } from '~/lib/utils/unit_format'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import Icon from '~/vue_shared/components/icon.vue'; import { @@ -16,6 +15,7 @@ import { dateFormats, chartColorValues, } from '../../constants'; +import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options'; import { makeDataSeries } from '~/helpers/monitor_helper'; import { graphDataValidatorForValues } from '../../utils'; @@ -30,15 +30,13 @@ const deploymentYAxisCoords = { max: 100, }; -const THROTTLED_DATAZOOM_WAIT = 1000; // miliseconds +const THROTTLED_DATAZOOM_WAIT = 1000; // milliseconds const timestampToISODate = timestamp => new Date(timestamp).toISOString(); const events = { datazoom: 'datazoom', }; -const yValFormatter = getFormatter('number'); - export default { components: { GlAreaChart, @@ -167,14 +165,7 @@ export default { const option = omit(this.option, ['series', 'yAxis', 'xAxis']); const dataYAxis = { - name: this.yAxisLabel, - nameGap: 50, // same as gitlab-ui's default - nameLocation: 'center', // same as gitlab-ui's default - boundaryGap: [0.1, 0.1], - scale: true, - axisLabel: { - formatter: num => yValFormatter(num, 3), - }, + ...getYAxisOptions(this.graphData.yAxis), ...yAxis, }; @@ -204,6 +195,7 @@ export default { series: this.chartOptionSeries, xAxis: timeXAxis, yAxis: [dataYAxis, deploymentsYAxis], + grid: getChartGrid(), dataZoom: [this.dataZoomConfig], ...option, }; @@ -282,8 +274,9 @@ export default { }, }; }, - yAxisLabel() { - return `${this.graphData.y_label}`; + tooltipYFormatter() { + // Use same format as y-axis + return getTooltipFormatter({ format: this.graphData.yAxis?.format }); }, }, created() { @@ -315,12 +308,11 @@ export default { this.tooltip.commitUrl = deploy.commitUrl; } else { const { seriesName, color, dataIndex } = dataPoint; - const value = yValFormatter(yVal, 3); this.tooltip.content.push({ name: seriesName, dataIndex, - value, + value: this.tooltipYFormatter(yVal), color, }); } diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index a4073133028..a0bd45bef5e 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -19,7 +19,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue'; import { s__ } from '~/locale'; import createFlash from '~/flash'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility'; +import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility'; import invalidUrl from '~/lib/utils/invalid_url'; import Icon from '~/vue_shared/components/icon.vue'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; @@ -351,6 +351,10 @@ export default { }; redirectTo(mergeUrlParams(params, window.location.href)); }, + + refreshDashboard() { + refreshCurrentPage(); + }, }, addMetric: { title: s__('Metrics|Add metric'), @@ -438,7 +442,7 @@ export default { :label="s__('Metrics|Show last')" label-size="sm" label-for="monitor-time-window-dropdown" - class="col-sm-6 col-md-6 col-lg-4" + class="col-sm-auto col-md-auto col-lg-auto" > <date-time-picker ref="dateTimePicker" @@ -449,6 +453,18 @@ export default { /> </gl-form-group> + <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"> + <gl-button + ref="refreshDashboardBtn" + v-gl-tooltip + variant="default" + :title="s__('Metrics|Reload this page')" + @click="refreshDashboard" + > + <icon name="repeat" /> + </gl-button> + </gl-form-group> + <gl-form-group v-if="hasHeaderButtons" label-for="prometheus-graphs-dropdown-buttons" diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js index 82deaa7ccfd..0e97d50f317 100644 --- a/app/assets/javascripts/monitoring/stores/utils.js +++ b/app/assets/javascripts/monitoring/stores/utils.js @@ -1,5 +1,6 @@ import { slugify } from '~/lib/utils/text_utility'; import createGqClient, { fetchPolicies } from '~/lib/graphql'; +import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; export const gqClient = createGqClient( @@ -75,17 +76,37 @@ const mapToMetricsViewModel = (metrics, defaultLabel) => })); /** + * Maps an axis view model + * + * Defaults to a 2 digit precision and `number` format. It only allows + * formats in the SUPPORTED_FORMATS array. + * + * @param {Object} axis + */ +const mapToAxisViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, precision = 2 }) => { + return { + name, + format: SUPPORTED_FORMATS[format] || SUPPORTED_FORMATS.number, + precision, + }; +}; + +/** * Maps a metrics panel to its view model * * @param {Object} panel - Metrics panel * @returns {Object} */ -const mapToPanelViewModel = ({ title = '', type, y_label, metrics = [] }) => { +const mapToPanelViewModel = ({ title = '', type, y_label, y_axis = {}, metrics = [] }) => { + // Both `y_axis.name` and `y_label` are supported for now + // https://gitlab.com/gitlab-org/gitlab/issues/208385 + const yAxis = mapToAxisViewModel({ name: y_label, ...y_axis }); // eslint-disable-line babel/camelcase return { title, type, - y_label, - metrics: mapToMetricsViewModel(metrics, y_label), + y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198 + yAxis, + metrics: mapToMetricsViewModel(metrics, yAxis.name), }; }; |