diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-14 15:09:44 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-14 15:09:44 +0000 |
commit | 874ead9c3a50de4c4ca4551eaf5b7eb976d26b50 (patch) | |
tree | 637ee9f2da5e251bc08ebf3e972209d51966bf7c /app/assets/javascripts | |
parent | 2e4c4055181eec9186458dd5dd3219c937032ec7 (diff) | |
download | gitlab-ce-874ead9c3a50de4c4ca4551eaf5b7eb976d26b50.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
38 files changed, 204 insertions, 101 deletions
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue index d2767dd6c64..04c2d4a7493 100644 --- a/app/assets/javascripts/badges/components/badge_list.vue +++ b/app/assets/javascripts/badges/components/badge_list.vue @@ -28,7 +28,7 @@ export default { {{ s__('Badges|Your badges') }} <span v-show="!isLoading" class="badge badge-pill">{{ badges.length }}</span> </div> - <gl-loading-icon v-show="isLoading" :size="2" class="card-body" /> + <gl-loading-icon v-show="isLoading" size="lg" class="card-body" /> <div v-if="hasNoBadges" class="card-body"> <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span> <span v-else>{{ s__('Badges|This project has no badges') }}</span> diff --git a/app/assets/javascripts/contributors/components/contributors.vue b/app/assets/javascripts/contributors/components/contributors.vue index 19516a13d15..3de1b2f0707 100644 --- a/app/assets/javascripts/contributors/components/contributors.vue +++ b/app/assets/javascripts/contributors/components/contributors.vue @@ -197,7 +197,7 @@ export default { <template> <div> <div v-if="loading" class="contributors-loader text-center"> - <gl-loading-icon :inline="true" :size="4" /> + <gl-loading-icon :inline="true" size="xl" /> </div> <div v-else-if="showChart" class="contributors-charts"> diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index 048f3a2485c..5505704f430 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -119,7 +119,7 @@ export default { <gl-loading-icon v-if="isLoading && !hasKeys" :label="s__('DeployKeys|Loading deploy keys')" - :size="2" + size="lg" /> <template v-else-if="hasKeys"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 305d860a692..335c668474e 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -58,12 +58,6 @@ export default { required: true, }, - shouldShowAutoStopDate: { - type: Boolean, - required: false, - default: false, - }, - tableData: { type: Object, required: true, @@ -638,12 +632,7 @@ export default { </span> </div> - <div - v-if="!isFolder && shouldShowAutoStopDate" - class="table-section" - :class="tableData.autoStop.spacing" - role="gridcell" - > + <div v-if="!isFolder" class="table-section" :class="tableData.autoStop.spacing" role="gridcell"> <div role="rowheader" class="table-mobile-header">{{ tableData.autoStop.title }}</div> <span v-if="canShowAutoStopDate" @@ -662,10 +651,7 @@ export default { role="gridcell" > <div class="btn-group table-action-buttons" role="group"> - <pin-component - v-if="canShowAutoStopDate && shouldShowAutoStopDate" - :auto-stop-url="autoStopUrl" - /> + <pin-component v-if="canShowAutoStopDate" :auto-stop-url="autoStopUrl" /> <external-url-component v-if="externalURL && canReadEnvironment" diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 01a00e03814..89e40faa23e 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -6,7 +6,6 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { flow, reverse, sortBy } from 'lodash/fp'; import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin'; import { s__ } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import EnvironmentItem from './environment_item.vue'; export default { @@ -17,7 +16,7 @@ export default { CanaryDeploymentCallout: () => import('ee_component/environments/components/canary_deployment_callout.vue'), }, - mixins: [environmentTableMixin, glFeatureFlagsMixin()], + mixins: [environmentTableMixin], props: { environments: { type: Array, @@ -43,9 +42,6 @@ export default { : env, ); }, - shouldShowAutoStopDate() { - return this.glFeatures.autoStopEnvironments; - }, tableData() { return { // percent spacing for cols, should add up to 100 @@ -74,7 +70,7 @@ export default { spacing: 'section-5', }, actions: { - spacing: this.shouldShowAutoStopDate ? 'section-25' : 'section-30', + spacing: 'section-25', }, }; }, @@ -131,12 +127,7 @@ export default { <div class="table-section" :class="tableData.date.spacing" role="columnheader"> {{ tableData.date.title }} </div> - <div - v-if="shouldShowAutoStopDate" - class="table-section" - :class="tableData.autoStop.spacing" - role="columnheader" - > + <div class="table-section" :class="tableData.autoStop.spacing" role="columnheader"> {{ tableData.autoStop.title }} </div> </div> @@ -146,7 +137,6 @@ export default { :key="`environment-item-${i}`" :model="model" :can-read-environment="canReadEnvironment" - :should-show-auto-stop-date="shouldShowAutoStopDate" :table-data="tableData" /> diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index a8103c80da0..148edfe3a51 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -225,7 +225,7 @@ export default { <template> <div> <div v-if="errorLoading" class="py-3"> - <gl-loading-icon :size="3" /> + <gl-loading-icon size="lg" /> </div> <div v-else-if="error" class="error-details"> <gl-alert v-if="isAlertVisible" @dismiss="isAlertVisible = false"> @@ -405,7 +405,7 @@ export default { </ul> <div v-if="loadingStacktrace" class="py-3"> - <gl-loading-icon :size="3" /> + <gl-loading-icon size="lg" /> </div> <template v-else-if="showStacktrace"> diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue index 2ffecce0a56..1f1776a5487 100644 --- a/app/assets/javascripts/frequent_items/components/app.vue +++ b/app/assets/javascripts/frequent_items/components/app.vue @@ -107,7 +107,7 @@ export default { <gl-loading-icon v-if="isLoadingItems" :label="translations.loadingMessage" - :size="2" + size="lg" class="loading-animation prepend-top-20" /> <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header"> diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue index 76821bcd986..dd2d726d525 100644 --- a/app/assets/javascripts/ide/components/branches/search_list.vue +++ b/app/assets/javascripts/ide/components/branches/search_list.vue @@ -72,7 +72,7 @@ export default { <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <gl-loading-icon v-if="isLoading" - :size="2" + size="lg" class="mt-3 mb-3 align-self-center ml-auto mr-auto" /> <ul v-else class="mb-0 w-100"> diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue index 35e5f9bcf69..d80662f6ae1 100644 --- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue +++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue @@ -88,7 +88,7 @@ export default { <i aria-hidden="true" class="fa fa-search dropdown-input-search"></i> </div> <div class="dropdown-content"> - <gl-loading-icon v-if="showLoading" :size="2" /> + <gl-loading-icon v-if="showLoading" size="lg" /> <ul v-else> <li v-for="(item, index) in outputData" :key="index"> <button type="button" @click="clickItem(item)">{{ item.name }}</button> diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue index 2cb5050c3f0..b97b7289886 100644 --- a/app/assets/javascripts/ide/components/jobs/list.vue +++ b/app/assets/javascripts/ide/components/jobs/list.vue @@ -26,7 +26,7 @@ export default { <template> <div> - <gl-loading-icon v-if="loading && !stages.length" :size="2" class="prepend-top-default" /> + <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" /> <template v-else> <stage v-for="stage in stages" diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index 15c08988977..bf2a33be653 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -90,7 +90,7 @@ export default { <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <gl-loading-icon v-if="isLoading" - :size="2" + size="lg" class="mt-3 mb-3 align-self-center ml-auto mr-auto" /> <template v-else> diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 343b0b6e90c..d3e5add2e83 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -56,7 +56,7 @@ export default { <template> <div class="ide-pipeline"> - <gl-loading-icon v-if="showLoadingIcon" :size="2" class="prepend-top-default" /> + <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" /> <template v-else-if="hasLoadedPipeline"> <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header"> <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" /> diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue index 86a773499bc..3852f2fdfa4 100644 --- a/app/assets/javascripts/ide/components/preview/clientside.vue +++ b/app/assets/javascripts/ide/components/preview/clientside.vue @@ -176,6 +176,6 @@ export default { {{ s__('IDE|Get started with Live Preview') }} </a> </div> - <gl-loading-icon v-else :size="2" class="align-self-center mt-auto mb-auto" /> + <gl-loading-icon v-else size="lg" class="align-self-center mt-auto mb-auto" /> </div> </template> diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 9b0ee40a30a..4a48852159a 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -910,3 +910,18 @@ export const setCookie = (name, value) => Cookies.set(name, value, { expires: 36 export const getCookie = name => Cookies.get(name); export const removeCookie = name => Cookies.remove(name); + +/** + * Returns the status of a feature flag. + * Currently, there is no way to access feature + * flags in Vuex other than directly tapping into + * window.gon. + * + * This should only be used on Vuex. If feature flags + * need to be accessed in Vue components consider + * using the Vue feature flag mixin. + * + * @param {String} flag Feature flag + * @returns {Boolean} on/off + */ +export const isFeatureFlagEnabled = flag => window.gon.features?.[flag]; diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 24aa8480ce4..9041b01088c 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -55,6 +55,11 @@ export default { required: false, default: () => [], }, + annotations: { + type: Array, + required: false, + default: () => [], + }, projectPath: { type: String, required: false, @@ -143,6 +148,7 @@ export default { return (this.option.series || []).concat( generateAnnotationsSeries({ deployments: this.recentDeployments, + annotations: this.annotations, }), ); }, diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 15b17f01daf..4586ce70ad6 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -213,7 +213,6 @@ export default { 'dashboard', 'emptyState', 'showEmptyState', - 'deploymentData', 'useDashboardEndpoint', 'allDashboards', 'additionalPanelTypesEnabled', diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index d1394bca447..676fc0cca64 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -89,6 +89,9 @@ export default { deploymentData(state) { return state[this.namespace].deploymentData; }, + annotations(state) { + return state[this.namespace].annotations; + }, projectPath(state) { return state[this.namespace].projectPath; }, @@ -310,6 +313,7 @@ export default { ref="timeChart" :graph-data="graphData" :deployment-data="deploymentData" + :annotations="annotations" :project-path="projectPath" :thresholds="getGraphAlertValues(graphData.metrics)" :group-id="groupId" diff --git a/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql b/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql new file mode 100644 index 00000000000..e2edaa707b2 --- /dev/null +++ b/app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql @@ -0,0 +1,13 @@ +query getAnnotations($projectPath: ID!) { + environment(name: $environmentName) { + metricDashboard(id: $dashboardId) { + annotations: nodes { + id + description + from + to + panelId + } + } + } +} diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index 06b99f572e7..5b2bd1f1493 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -6,8 +6,13 @@ import { convertToFixedRange } from '~/lib/utils/datetime_range'; import { gqClient, parseEnvironmentsResponse, removeLeadingSlash } from './utils'; import trackDashboardLoad from '../monitoring_tracking_helper'; import getEnvironments from '../queries/getEnvironments.query.graphql'; +import getAnnotations from '../queries/getAnnotations.query.graphql'; import statusCodes from '../../lib/utils/http_status'; -import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils'; +import { + backOff, + convertObjectPropsToCamelCase, + isFeatureFlagEnabled, +} from '../../lib/utils/common_utils'; import { s__, sprintf } from '../../locale'; import { PROMETHEUS_TIMEOUT, ENVIRONMENT_AVAILABLE_STATE } from '../constants'; @@ -80,6 +85,14 @@ export const setShowErrorBanner = ({ commit }, enabled) => { export const fetchData = ({ dispatch }) => { dispatch('fetchEnvironmentsData'); dispatch('fetchDashboard'); + /** + * Annotations data is not yet fetched. This will be + * ready after the BE piece is implemented. + * https://gitlab.com/gitlab-org/gitlab/-/issues/211330 + */ + if (isFeatureFlagEnabled('metrics_dashboard_annotations')) { + dispatch('fetchAnnotations'); + } }; // Metrics dashboard @@ -269,6 +282,40 @@ export const receiveEnvironmentsDataFailure = ({ commit }) => { commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE); }; +export const fetchAnnotations = ({ state, dispatch }) => { + dispatch('requestAnnotations'); + + return gqClient + .mutate({ + mutation: getAnnotations, + variables: { + projectPath: removeLeadingSlash(state.projectPath), + dashboardId: state.currentDashboard, + environmentName: state.currentEnvironmentName, + }, + }) + .then(resp => resp.data?.project?.environment?.metricDashboard?.annotations) + .then(annotations => { + if (!annotations) { + createFlash(s__('Metrics|There was an error fetching annotations. Please try again.')); + } + + dispatch('receiveAnnotationsSuccess', annotations); + }) + .catch(err => { + Sentry.captureException(err); + dispatch('receiveAnnotationsFailure'); + createFlash(s__('Metrics|There was an error getting annotations information.')); + }); +}; + +// While this commit does not update the state it will +// eventually be useful to show a loading state +export const requestAnnotations = ({ commit }) => commit(types.REQUEST_ANNOTATIONS); +export const receiveAnnotationsSuccess = ({ commit }, data) => + commit(types.RECEIVE_ANNOTATIONS_SUCCESS, data); +export const receiveAnnotationsFailure = ({ commit }) => commit(types.RECEIVE_ANNOTATIONS_FAILURE); + // Dashboard manipulation /** diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js index 9a3489d53d7..2f9955da1b1 100644 --- a/app/assets/javascripts/monitoring/stores/mutation_types.js +++ b/app/assets/javascripts/monitoring/stores/mutation_types.js @@ -3,6 +3,11 @@ export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD'; export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS'; export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE'; +// Annotations +export const REQUEST_ANNOTATIONS = 'REQUEST_ANNOTATIONS'; +export const RECEIVE_ANNOTATIONS_SUCCESS = 'RECEIVE_ANNOTATIONS_SUCCESS'; +export const RECEIVE_ANNOTATIONS_FAILURE = 'RECEIVE_ANNOTATIONS_FAILURE'; + // Git project deployments export const REQUEST_DEPLOYMENTS_DATA = 'REQUEST_DEPLOYMENTS_DATA'; export const RECEIVE_DEPLOYMENTS_DATA_SUCCESS = 'RECEIVE_DEPLOYMENTS_DATA_SUCCESS'; diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js index 38c1524d904..aa31b6642d7 100644 --- a/app/assets/javascripts/monitoring/stores/mutations.js +++ b/app/assets/javascripts/monitoring/stores/mutations.js @@ -93,6 +93,16 @@ export default { }, /** + * Annotations + */ + [types.RECEIVE_ANNOTATIONS_SUCCESS](state, annotations) { + state.annotations = annotations; + }, + [types.RECEIVE_ANNOTATIONS_FAILURE](state) { + state.annotations = []; + }, + + /** * Individual panel/metric results */ [types.REQUEST_METRIC_RESULT](state, { metricId }) { diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js index 2b1907e8df7..e60510e747b 100644 --- a/app/assets/javascripts/monitoring/stores/state.js +++ b/app/assets/javascripts/monitoring/stores/state.js @@ -20,6 +20,7 @@ export default () => ({ allDashboards: [], // Other project data + annotations: [], deploymentData: [], environments: [], environmentsSearchTerm: '', diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index ef3f4d0e3f6..1ff5b662d18 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -135,7 +135,7 @@ export default { paddingRight: `${graphRightPadding}px`, }" > - <gl-loading-icon v-if="isLoading" class="m-auto" :size="3" /> + <gl-loading-icon v-if="isLoading" class="m-auto" size="lg" /> <pipeline-graph v-if="pipelineTypeUpstream" diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index 2a3d022c5cd..e7777d0d3af 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -108,7 +108,7 @@ export default { /> </ci-header> - <gl-loading-icon v-if="isLoading" :size="2" class="prepend-top-default append-bottom-default" /> + <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default append-bottom-default" /> <gl-modal :modal-id="$options.DELETE_MODAL_ID" diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index accd6bf71f4..d4f23697e09 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -271,7 +271,7 @@ export default { <gl-loading-icon v-if="stateToRender === $options.stateMap.loading" :label="s__('Pipelines|Loading Pipelines')" - :size="3" + size="lg" class="prepend-top-20" /> diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue index f1106dc6ae9..571d305a50c 100644 --- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue +++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue @@ -94,7 +94,7 @@ export default { </script> <template> <div class="ci-status-link"> - <gl-loading-icon v-if="isLoading" :size="3" label="Loading pipeline status" /> + <gl-loading-icon v-if="isLoading" size="lg" label="Loading pipeline status" /> <a v-else :href="ciStatus.details_path"> <ci-icon v-tooltip diff --git a/app/assets/javascripts/sentry_error_stack_trace/components/sentry_error_stack_trace.vue b/app/assets/javascripts/sentry_error_stack_trace/components/sentry_error_stack_trace.vue index c90478db620..807f10bd9c6 100644 --- a/app/assets/javascripts/sentry_error_stack_trace/components/sentry_error_stack_trace.vue +++ b/app/assets/javascripts/sentry_error_stack_trace/components/sentry_error_stack_trace.vue @@ -36,7 +36,7 @@ export default { </div> </div> <div v-if="loadingStacktrace" class="card"> - <gl-loading-icon class="py-2" label="Fetching stack trace" :size="1" /> + <gl-loading-icon class="py-2" label="Fetching stack trace" size="sm" /> </div> <stacktrace v-else :entries="stacktrace" /> </div> diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue index e06149f2bcb..2b1291ac70f 100644 --- a/app/assets/javascripts/serverless/components/functions.vue +++ b/app/assets/javascripts/serverless/components/functions.vue @@ -77,7 +77,7 @@ export default { <section id="serverless-functions" class="flex-grow"> <gl-loading-icon v-if="checkingInstalled" - :size="2" + size="lg" class="prepend-top-default append-bottom-default" /> @@ -97,7 +97,7 @@ export default { </template> <gl-loading-icon v-if="isLoading" - :size="2" + size="lg" class="prepend-top-default append-bottom-default js-functions-loader" /> </div> diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js index 8ca590123ae..0e52d2d8010 100644 --- a/app/assets/javascripts/smart_interval.js +++ b/app/assets/javascripts/smart_interval.js @@ -33,7 +33,7 @@ export default class SmartInterval { this.state = { intervalId: null, currentInterval: this.cfg.startingInterval, - pageVisibility: 'visible', + pagevisibile: true, }; this.initInterval(); @@ -91,8 +91,10 @@ export default class SmartInterval { } destroy() { + document.removeEventListener('visibilitychange', this.onVisibilityChange); + window.removeEventListener('blur', this.onWindowVisibilityChange); + window.removeEventListener('focus', this.onWindowVisibilityChange); this.cancel(); - document.removeEventListener('visibilitychange', this.handleVisibilityChange); $(document) .off('visibilitychange') .off('beforeunload'); @@ -124,9 +126,21 @@ export default class SmartInterval { }); } + onWindowVisibilityChange(e) { + this.state.pagevisibile = e.type === 'focus'; + this.handleVisibilityChange(); + } + + onVisibilityChange(e) { + this.state.pagevisibile = e.target.visibilityState === 'visible'; + this.handleVisibilityChange(); + } + initVisibilityChangeHandling() { - // cancel interval when tab no longer shown (prevents cached pages from polling) - document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this)); + // cancel interval when tab or window is no longer shown (prevents cached pages from polling) + document.addEventListener('visibilitychange', this.onVisibilityChange.bind(this)); + window.addEventListener('blur', this.onWindowVisibilityChange.bind(this)); + window.addEventListener('focus', this.onWindowVisibilityChange.bind(this)); } initPageUnloadHandling() { @@ -135,8 +149,7 @@ export default class SmartInterval { $(document).on('beforeunload', () => this.cancel()); } - handleVisibilityChange(e) { - this.state.pageVisibility = e.target.visibilityState; + handleVisibilityChange() { const intervalAction = this.isPageVisible() ? this.onVisibilityVisible : this.onVisibilityHidden; @@ -166,7 +179,7 @@ export default class SmartInterval { } isPageVisible() { - return this.state.pageVisibility === 'visible'; + return this.state.pagevisibile; } stopTimer() { diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue index e98f56d87f5..bc0034d397e 100644 --- a/app/assets/javascripts/snippets/components/show.vue +++ b/app/assets/javascripts/snippets/components/show.vue @@ -1,10 +1,11 @@ <script> -import GetSnippetQuery from '../queries/snippet.query.graphql'; import SnippetHeader from './snippet_header.vue'; import SnippetTitle from './snippet_title.vue'; import SnippetBlob from './snippet_blob_view.vue'; import { GlLoadingIcon } from '@gitlab/ui'; +import { getSnippetMixin } from '../mixins/snippets'; + export default { components: { SnippetHeader, @@ -12,33 +13,7 @@ export default { GlLoadingIcon, SnippetBlob, }, - apollo: { - snippet: { - query: GetSnippetQuery, - variables() { - return { - ids: this.snippetGid, - }; - }, - update: data => data.snippets.edges[0].node, - }, - }, - props: { - snippetGid: { - type: String, - required: true, - }, - }, - data() { - return { - snippet: {}, - }; - }, - computed: { - isLoading() { - return this.$apollo.queries.snippet.loading; - }, - }, + mixins: [getSnippetMixin], }; </script> <template> @@ -46,7 +21,7 @@ export default { <gl-loading-icon v-if="isLoading" :label="__('Loading snippet')" - :size="2" + size="lg" class="loading-animation prepend-top-20 append-bottom-20" /> <template v-else> diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue index ae6f451df18..44b4607e5a9 100644 --- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue +++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue @@ -37,7 +37,7 @@ export default { <gl-loading-icon v-if="isLoading" :label="__('Loading snippet')" - :size="2" + size="lg" class="loading-animation prepend-top-20 append-bottom-20" /> <blob-content-edit diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js new file mode 100644 index 00000000000..837c41cdf6b --- /dev/null +++ b/app/assets/javascripts/snippets/mixins/snippets.js @@ -0,0 +1,39 @@ +import GetSnippetQuery from '../queries/snippet.query.graphql'; + +export const getSnippetMixin = { + apollo: { + snippet: { + query: GetSnippetQuery, + variables() { + return { + ids: this.snippetGid, + }; + }, + update: data => data.snippets.edges[0]?.node, + result(res) { + if (this.onSnippetFetch) { + this.onSnippetFetch(res); + } + }, + }, + }, + props: { + snippetGid: { + type: String, + required: true, + }, + }, + data() { + return { + snippet: {}, + newSnippet: false, + }; + }, + computed: { + isLoading() { + return this.$apollo.queries.snippet.loading; + }, + }, +}; + +export default () => {}; diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue index e711510ba44..8deae2f2c8a 100644 --- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue +++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue @@ -12,8 +12,8 @@ export default { Toolbar, }, computed: { - ...mapState(['content', 'isLoadingContent', 'isSavingChanges']), - ...mapGetters(['isContentLoaded', 'contentChanged']), + ...mapState(['content', 'isLoadingContent', 'isSavingChanges', 'isContentLoaded']), + ...mapGetters(['contentChanged']), }, mounted() { this.loadContent(); diff --git a/app/assets/javascripts/static_site_editor/store/getters.js b/app/assets/javascripts/static_site_editor/store/getters.js index 41256201c26..ebc68f8e9e6 100644 --- a/app/assets/javascripts/static_site_editor/store/getters.js +++ b/app/assets/javascripts/static_site_editor/store/getters.js @@ -1,2 +1,2 @@ -export const isContentLoaded = ({ originalContent }) => Boolean(originalContent); +// eslint-disable-next-line import/prefer-default-export export const contentChanged = ({ originalContent, content }) => originalContent !== content; diff --git a/app/assets/javascripts/static_site_editor/store/mutations.js b/app/assets/javascripts/static_site_editor/store/mutations.js index f98177bbc18..4727d04439c 100644 --- a/app/assets/javascripts/static_site_editor/store/mutations.js +++ b/app/assets/javascripts/static_site_editor/store/mutations.js @@ -6,6 +6,7 @@ export default { }, [types.RECEIVE_CONTENT_SUCCESS](state, { title, content }) { state.isLoadingContent = false; + state.isContentLoaded = true; state.title = title; state.content = content; state.originalContent = content; diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js index 477ec540e02..d48cc8ed1a4 100644 --- a/app/assets/javascripts/static_site_editor/store/state.js +++ b/app/assets/javascripts/static_site_editor/store/state.js @@ -6,6 +6,8 @@ const createState = (initialState = {}) => ({ isLoadingContent: false, isSavingChanges: false, + isContentLoaded: false, + originalContent: '', content: '', title: '', diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 1bc28b15f74..05f73c4cdaf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -214,8 +214,6 @@ export default { return new MRWidgetService(this.getServiceEndpoints(store)); }, checkStatus(cb, isRebased) { - if (document.visibilityState !== 'visible') return Promise.resolve(); - return this.service .checkStatus() .then(({ data }) => { @@ -238,10 +236,10 @@ export default { initPolling() { this.pollingInterval = new SmartInterval({ callback: this.checkStatus, - startingInterval: 10000, - maxInterval: 30000, - hiddenInterval: 120000, - incrementByFactorOf: 5000, + startingInterval: 10 * 1000, + maxInterval: 240 * 1000, + hiddenInterval: window.gon?.features?.widgetVisibilityPolling && 360 * 1000, + incrementByFactorOf: 2, }); }, initDeploymentsPolling() { @@ -253,10 +251,9 @@ export default { deploymentsPoll(callback) { return new SmartInterval({ callback, - startingInterval: 30000, - maxInterval: 120000, - hiddenInterval: 240000, - incrementByFactorOf: 15000, + startingInterval: 30 * 1000, + maxInterval: 240 * 1000, + incrementByFactorOf: 4, immediateExecution: true, }); }, diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue index 30a9633b6dc..fd45ac52647 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue @@ -80,7 +80,7 @@ export default { @input="onInput" /> <div class="d-flex flex-column"> - <gl-loading-icon v-if="showLoadingIndicator" :size="1" class="py-2 px-4" /> + <gl-loading-icon v-if="showLoadingIndicator" size="sm" class="py-2 px-4" /> <gl-infinite-scroll :max-list-height="402" :fetched-items="projectSearchResults.length" |