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 | |
parent | f321e51f46bcb628c3e96a44b5ebf3bb1c4033ab (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
12 files changed, 166 insertions, 46 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 89d32efec6d..093d993c3ad 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -15,7 +15,6 @@ import { GlDropdownDivider, } from '@gitlab/ui'; import { __, sprintf, n__ } from '~/locale'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import Stacktrace from './stacktrace.vue'; @@ -28,7 +27,6 @@ import query from '../queries/details.query.graphql'; export default { components: { - LoadingButton, GlButton, GlFormInput, GlLink, @@ -234,19 +232,21 @@ export default { </div> <div class="error-details-actions"> <div class="d-inline-flex bv-d-sm-down-none"> - <loading-button - :label="ignoreBtnLabel" + <gl-button :loading="updatingIgnoreStatus" data-qa-selector="update_ignore_status_button" @click="onIgnoreStatusUpdate" - /> - <loading-button + > + {{ ignoreBtnLabel }} + </gl-button> + <gl-button class="btn-outline-info ml-2" - :label="resolveBtnLabel" :loading="updatingResolveStatus" data-qa-selector="update_resolve_status_button" @click="onResolveStatusUpdate" - /> + > + {{ resolveBtnLabel }} + </gl-button> <gl-button v-if="error.gitlabIssuePath" class="ml-2" @@ -270,14 +270,15 @@ export default { name="issue[sentry_issue_attributes][sentry_issue_identifier]" /> <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" /> - <loading-button + <gl-button v-if="!error.gitlabIssuePath" class="btn-success" - :label="__('Create issue')" :loading="issueCreationInProgress" data-qa-selector="create_issue_button" @click="createIssue" - /> + > + {{ __('Create issue') }} + </gl-button> </form> </div> <gl-dropdown diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue index 70f257180c6..552e8cac3a7 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -236,6 +236,7 @@ export default { </gl-dropdown> <div class="filtered-search-input-container flex-fill"> <gl-form-input + v-model="errorSearchQuery" class="pl-2 filtered-search" :disabled="loading" :placeholder="__('Search or filter results…')" 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), }; }; diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js index 9c7c10d9864..f4e546e4d4e 100644 --- a/app/assets/javascripts/terminal/terminal.js +++ b/app/assets/javascripts/terminal/terminal.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { throttle } from 'lodash'; import $ from 'jquery'; import { Terminal } from 'xterm'; import * as fit from 'xterm/lib/addons/fit/fit'; @@ -85,7 +85,7 @@ export default class GLTerminal { addScrollListener(onScrollLimit) { const viewport = this.container.querySelector('.xterm-viewport'); - const listener = _.throttle(() => { + const listener = throttle(() => { onScrollLimit({ canScrollUp: canScrollUp(viewport, SCROLL_MARGIN), canScrollDown: canScrollDown(viewport, SCROLL_MARGIN), diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js index abfc81e681e..6244df1180e 100644 --- a/app/assets/javascripts/u2f/authenticate.js +++ b/app/assets/javascripts/u2f/authenticate.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import _ from 'underscore'; +import { template as lodashTemplate, omit } from 'lodash'; import importU2FLibrary from './util'; import U2FError from './error'; @@ -37,7 +37,7 @@ export default class U2FAuthenticate { // Note: The server library fixes this behaviour in (unreleased) version 1.0.0. // This can be removed once we upgrade. // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4 - this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge')); + this.signRequests = u2fParams.sign_requests.map(request => omit(request, 'challenge')); this.templates = { setup: '#js-authenticate-u2f-setup', @@ -74,7 +74,7 @@ export default class U2FAuthenticate { renderTemplate(name, params) { const templateString = $(this.templates[name]).html(); - const template = _.template(templateString); + const template = lodashTemplate(templateString); return this.container.html(template(params)); } diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js index 43c814c8070..f5a422727ad 100644 --- a/app/assets/javascripts/u2f/register.js +++ b/app/assets/javascripts/u2f/register.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import _ from 'underscore'; +import { template as lodashTemplate } from 'lodash'; import importU2FLibrary from './util'; import U2FError from './error'; @@ -59,7 +59,7 @@ export default class U2FRegister { renderTemplate(name, params) { const templateString = $(this.templates[name]).html(); - const template = _.template(templateString); + const template = lodashTemplate(templateString); return this.container.html(template(params)); } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue index 8e8e67228ed..ad80a51c5f9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue @@ -53,6 +53,7 @@ export default { .then(res => res.data) .then(data => { eventHub.$emit('UpdateWidgetData', data); + eventHub.$emit('MRWidgetUpdateRequested'); }) .catch(() => { this.isCancellingAutoMerge = false; diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index ea83c61e275..91ac23f427d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -123,13 +123,15 @@ export default class MergeRequestStore { const currentUser = data.current_user; - this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path; - this.revertInForkPath = currentUser.revert_in_fork_path; - - this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false; - this.canCreateIssue = currentUser.can_create_issue || false; - this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false; - this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false; + if (currentUser) { + this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path; + this.revertInForkPath = currentUser.revert_in_fork_path; + + this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false; + this.canCreateIssue = currentUser.can_create_issue || false; + this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false; + this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false; + } this.setState(data); } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 3892d9dbd07..1c9bfe962f6 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -98,6 +98,14 @@ } } +.refresh-dashboard-button { + margin-top: 22px; + + @media(max-width: map-get($grid-breakpoints, sm)) { + margin-top: 0; + } +} + .metric-area { opacity: 0.25; } |