diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-02 21:07:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-02 21:07:51 +0000 |
commit | d74fcc9b69746c4d9582299c370a95aafe2ac3ac (patch) | |
tree | 8230bdf94ff004521422c9986062278dd3bc5b3f /app/assets/javascripts | |
parent | 8a7efa45c38ed3200d173d2c3207a8154e583c16 (diff) | |
download | gitlab-ce-d74fcc9b69746c4d9582299c370a95aafe2ac3ac.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
16 files changed, 208 insertions, 10 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue new file mode 100644 index 00000000000..175e89a454b --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue @@ -0,0 +1,93 @@ +<script> +import { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlIcon, +} from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import { mapGetters } from 'vuex'; + +export default { + name: 'CiEnvironmentsDropdown', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlIcon, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + searchTerm: this.value || '', + }; + }, + computed: { + ...mapGetters(['joinedEnvironments']), + composedCreateButtonLabel() { + return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm }); + }, + shouldRenderCreateButton() { + return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm); + }, + filteredResults() { + const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); + return this.joinedEnvironments.filter(resultString => + resultString.toLowerCase().includes(lowerCasedSearchTerm), + ); + }, + }, + watch: { + value(newVal) { + this.searchTerm = newVal; + }, + }, + methods: { + selectEnvironment(selected) { + this.$emit('selectEnvironment', selected); + this.searchTerm = ''; + }, + createClicked() { + this.$emit('createClicked', this.searchTerm); + this.searchTerm = ''; + }, + isSelected(env) { + return this.value === env; + }, + }, +}; +</script> +<template> + <gl-dropdown :text="value"> + <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" /> + <gl-dropdown-item + v-for="environment in filteredResults" + :key="environment" + @click="selectEnvironment(environment)" + > + <gl-icon + :class="{ invisible: !isSelected(environment) }" + name="mobile-issue-close" + class="vertical-align-middle" + /> + {{ environment }} + </gl-dropdown-item> + <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + __('No matching results') + }}</gl-dropdown-item> + <template v-if="shouldRenderCreateButton"> + <gl-dropdown-divider /> + <gl-dropdown-item @click="createClicked"> + {{ composedCreateButtonLabel }} + </gl-dropdown-item> + </template> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue index 0ccc58ec2da..0460181558b 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue @@ -2,6 +2,7 @@ import { __ } from '~/locale'; import { mapActions, mapState } from 'vuex'; import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; +import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; import { GlButton, GlModal, @@ -17,6 +18,7 @@ import { export default { modalId: ADD_CI_VARIABLE_MODAL_ID, components: { + CiEnvironmentsDropdown, GlButton, GlModal, GlFormSelect, @@ -36,6 +38,7 @@ export default { 'variableBeingEdited', 'isGroup', 'maskableRegex', + 'selectedEnvironment', ]), canSubmit() { if (this.variableData.masked && this.maskedState === false) { @@ -80,6 +83,10 @@ export default { 'displayInputValue', 'clearModal', 'deleteVariable', + 'setEnvironmentScope', + 'addWildCardScope', + 'resetSelectedEnvironment', + 'setSelectedEnvironment', ]), updateOrAddVariable() { if (this.variableBeingEdited) { @@ -95,6 +102,7 @@ export default { } else { this.clearModal(); } + this.resetSelectedEnvironment(); }, hideModal() { this.$refs.modal.hide(); @@ -158,10 +166,11 @@ export default { label-for="ci-variable-env" class="w-50" > - <gl-form-select - id="ci-variable-env" - v-model="variableData.environment_scope" - :options="environments" + <ci-environments-dropdown + class="w-100" + :value="variableData.environment_scope" + @selectEnvironment="setEnvironmentScope" + @createClicked="addWildCardScope" /> </gl-form-group> </div> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue index 3f2f89ada6f..806fa3e1191 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue @@ -92,6 +92,7 @@ export default { sort-by="key" sort-direction="asc" stacked="lg" + table-class="text-secondary" fixed show-empty sort-icon-left diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js index b2fa980c546..d22138db102 100644 --- a/app/assets/javascripts/ci_variable_list/constants.js +++ b/app/assets/javascripts/ci_variable_list/constants.js @@ -6,7 +6,7 @@ export const ADD_CI_VARIABLE_MODAL_ID = 'add-ci-variable'; export const displayText = { variableText: __('Var'), fileText: __('File'), - allEnvironmentsText: __('All'), + allEnvironmentsText: __('All (default)'), }; export const types = { diff --git a/app/assets/javascripts/ci_variable_list/store/actions.js b/app/assets/javascripts/ci_variable_list/store/actions.js index f3a629b84ee..a22fa03e16d 100644 --- a/app/assets/javascripts/ci_variable_list/store/actions.js +++ b/app/assets/javascripts/ci_variable_list/store/actions.js @@ -153,3 +153,22 @@ export const fetchEnvironments = ({ dispatch, state }) => { createFlash(__('There was an error fetching the environments information.')); }); }; + +export const setEnvironmentScope = ({ commit, dispatch }, environment) => { + commit(types.SET_ENVIRONMENT_SCOPE, environment); + dispatch('setSelectedEnvironment', environment); +}; + +export const addWildCardScope = ({ commit, dispatch }, environment) => { + commit(types.ADD_WILD_CARD_SCOPE, environment); + commit(types.SET_ENVIRONMENT_SCOPE, environment); + dispatch('setSelectedEnvironment', environment); +}; + +export const resetSelectedEnvironment = ({ commit }) => { + commit(types.RESET_SELECTED_ENVIRONMENT); +}; + +export const setSelectedEnvironment = ({ commit }, environment) => { + commit(types.SET_SELECTED_ENVIRONMENT, environment); +}; diff --git a/app/assets/javascripts/ci_variable_list/store/getters.js b/app/assets/javascripts/ci_variable_list/store/getters.js new file mode 100644 index 00000000000..14b728302f9 --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/store/getters.js @@ -0,0 +1,9 @@ +/* eslint-disable import/prefer-default-export */ +// Disabling import/prefer-default-export can be +// removed once a second getter is added to this file +import { uniq } from 'lodash'; + +export const joinedEnvironments = state => { + const scopesFromVariables = (state.variables || []).map(variable => variable.environment_scope); + return uniq(state.environments.concat(scopesFromVariables)).sort(); +}; diff --git a/app/assets/javascripts/ci_variable_list/store/index.js b/app/assets/javascripts/ci_variable_list/store/index.js index db4ba95b3c2..83802f6a36f 100644 --- a/app/assets/javascripts/ci_variable_list/store/index.js +++ b/app/assets/javascripts/ci_variable_list/store/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions'; +import * as getters from './getters'; import mutations from './mutations'; import state from './state'; @@ -10,6 +11,7 @@ export default (initialState = {}) => new Vuex.Store({ actions, mutations, + getters, state: { ...state(), ...initialState, diff --git a/app/assets/javascripts/ci_variable_list/store/mutation_types.js b/app/assets/javascripts/ci_variable_list/store/mutation_types.js index 240066d0f22..0b41c20bce7 100644 --- a/app/assets/javascripts/ci_variable_list/store/mutation_types.js +++ b/app/assets/javascripts/ci_variable_list/store/mutation_types.js @@ -20,3 +20,7 @@ export const RECEIVE_UPDATE_VARIABLE_ERROR = 'RECEIVE_UPDATE_VARIABLE_ERROR'; export const REQUEST_ENVIRONMENTS = 'REQUEST_ENVIRONMENTS'; export const RECEIVE_ENVIRONMENTS_SUCCESS = 'RECEIVE_ENVIRONMENTS_SUCCESS'; +export const SET_ENVIRONMENT_SCOPE = 'SET_ENVIRONMENT_SCOPE'; +export const ADD_WILD_CARD_SCOPE = 'ADD_WILD_CARD_SCOPE'; +export const RESET_SELECTED_ENVIRONMENT = 'RESET_SELECTED_ENVIRONMENT'; +export const SET_SELECTED_ENVIRONMENT = 'SET_SELECTED_ENVIRONMENT'; diff --git a/app/assets/javascripts/ci_variable_list/store/mutations.js b/app/assets/javascripts/ci_variable_list/store/mutations.js index c75eb4a91fd..7ee7d7bdc26 100644 --- a/app/assets/javascripts/ci_variable_list/store/mutations.js +++ b/app/assets/javascripts/ci_variable_list/store/mutations.js @@ -83,4 +83,25 @@ export default { state.variableBeingEdited = null; state.showInputValue = false; }, + + [types.SET_ENVIRONMENT_SCOPE](state, environment) { + if (state.variableBeingEdited) { + state.variableBeingEdited.environment_scope = environment; + } else { + state.variable.environment_scope = environment; + } + }, + + [types.ADD_WILD_CARD_SCOPE](state, environment) { + state.environments.push(environment); + state.environments.sort(); + }, + + [types.RESET_SELECTED_ENVIRONMENT](state) { + state.selectedEnvironment = ''; + }, + + [types.SET_SELECTED_ENVIRONMENT](state, environment) { + state.selectedEnvironment = environment; + }, }; diff --git a/app/assets/javascripts/ci_variable_list/store/state.js b/app/assets/javascripts/ci_variable_list/store/state.js index 5166321d6a7..8c0b9c6966f 100644 --- a/app/assets/javascripts/ci_variable_list/store/state.js +++ b/app/assets/javascripts/ci_variable_list/store/state.js @@ -21,4 +21,5 @@ export default () => ({ environments: [], typeOptions: [displayText.variableText, displayText.fileText], variableBeingEdited: null, + selectedEnvironment: '', }); diff --git a/app/assets/javascripts/droplab/utils.js b/app/assets/javascripts/droplab/utils.js index 5272778ce2d..df3c5c2132a 100644 --- a/app/assets/javascripts/droplab/utils.js +++ b/app/assets/javascripts/droplab/utils.js @@ -1,6 +1,6 @@ /* eslint-disable */ -import { template as _template } from 'underscore'; +import { template as _template } from 'lodash'; import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants'; const utils = { diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 77ba17b6e68..44e38089da8 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -101,7 +101,8 @@ export default { return this.graphData.title || ''; }, alertWidgetAvailable() { - return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint && this.graphData; + // This method is extended by ee functionality + return false; }, graphDataHasMetrics() { return ( @@ -209,7 +210,7 @@ export default { > <div class="d-flex align-items-center"> <alert-widget - v-if="alertWidgetAvailable && graphData" + v-if="alertWidgetAvailable" :modal-id="`alert-modal-${index}`" :alerts-endpoint="alertsEndpoint" :relevant-queries="graphData.metrics" diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index 3990a8d1f61..6609946e02e 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -104,3 +104,8 @@ export const endpointKeys = [ * as Vue props. */ export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName']; + +/** + * Constant to indicate if a metric exists in the database + */ +export const NOT_IN_DB_PREFIX = 'NO_DB'; diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index 86f416240c8..2e4987b7349 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -144,7 +144,7 @@ export const fetchPrometheusMetric = ({ commit }, { metric, params }) => { const minStep = 60; const queryDataPoints = 600; - const step = Math.max(minStep, Math.ceil(timeDiff / queryDataPoints)); + const step = metric.step ? metric.step : Math.max(minStep, Math.ceil(timeDiff / queryDataPoints)); const queryParams = { start_time, diff --git a/app/assets/javascripts/monitoring/stores/getters.js b/app/assets/javascripts/monitoring/stores/getters.js index 1affc6f0a76..a6d80c5063e 100644 --- a/app/assets/javascripts/monitoring/stores/getters.js +++ b/app/assets/javascripts/monitoring/stores/getters.js @@ -1,3 +1,5 @@ +import { NOT_IN_DB_PREFIX } from '../constants'; + const metricsIdsInPanel = panel => panel.metrics.filter(metric => metric.metricId && metric.result).map(metric => metric.metricId); @@ -59,6 +61,29 @@ export const metricsWithData = state => groupKey => { }; /** + * Metrics loaded from project-defined dashboards do not have a metric_id. + * This getter checks which metrics are stored in the db (have a metric id) + * This is hopefully a temporary solution until BE processes metrics before passing to FE + * + * Related: + * https://gitlab.com/gitlab-org/gitlab/-/issues/28241 + * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27447 + */ +export const metricsSavedToDb = state => { + const metricIds = []; + state.dashboard.panelGroups.forEach(({ panels }) => { + panels.forEach(({ metrics }) => { + const metricIdsInDb = metrics + .filter(({ metricId }) => !metricId.startsWith(NOT_IN_DB_PREFIX)) + .map(({ metricId }) => metricId); + + metricIds.push(...metricIdsInDb); + }); + }); + return metricIds; +}; + +/** * Filter environments by names. * * This is used in the environments dropdown with searchable input. diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js index b5938fb1205..5e620d6c2f5 100644 --- a/app/assets/javascripts/monitoring/stores/utils.js +++ b/app/assets/javascripts/monitoring/stores/utils.js @@ -2,6 +2,7 @@ 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'; +import { NOT_IN_DB_PREFIX } from '../constants'; export const gqClient = createGqClient( {}, @@ -14,11 +15,18 @@ export const gqClient = createGqClient( * Metrics loaded from project-defined dashboards do not have a metric_id. * This method creates a unique ID combining metric_id and id, if either is present. * This is hopefully a temporary solution until BE processes metrics before passing to FE + * + * Related: + * https://gitlab.com/gitlab-org/gitlab/-/issues/28241 + * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27447 + * * @param {Object} metric - metric + * @param {Number} metric.metric_id - Database metric id + * @param {String} metric.id - User-defined identifier * @returns {Object} - normalized metric with a uniqueID */ // eslint-disable-next-line babel/camelcase -export const uniqMetricsId = ({ metric_id, id }) => `${metric_id}_${id}`; +export const uniqMetricsId = ({ metric_id, id }) => `${metric_id || NOT_IN_DB_PREFIX}_${id}`; /** * Project path has a leading slash that doesn't work well |