summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-04-02 21:07:51 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-04-02 21:07:51 +0000
commitd74fcc9b69746c4d9582299c370a95aafe2ac3ac (patch)
tree8230bdf94ff004521422c9986062278dd3bc5b3f /app/assets
parent8a7efa45c38ed3200d173d2c3207a8154e583c16 (diff)
downloadgitlab-ce-d74fcc9b69746c4d9582299c370a95aafe2ac3ac.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue93
-rw-r--r--app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue17
-rw-r--r--app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue1
-rw-r--r--app/assets/javascripts/ci_variable_list/constants.js2
-rw-r--r--app/assets/javascripts/ci_variable_list/store/actions.js19
-rw-r--r--app/assets/javascripts/ci_variable_list/store/getters.js9
-rw-r--r--app/assets/javascripts/ci_variable_list/store/index.js2
-rw-r--r--app/assets/javascripts/ci_variable_list/store/mutation_types.js4
-rw-r--r--app/assets/javascripts/ci_variable_list/store/mutations.js21
-rw-r--r--app/assets/javascripts/ci_variable_list/store/state.js1
-rw-r--r--app/assets/javascripts/droplab/utils.js2
-rw-r--r--app/assets/javascripts/monitoring/components/panel_type.vue5
-rw-r--r--app/assets/javascripts/monitoring/constants.js5
-rw-r--r--app/assets/javascripts/monitoring/stores/actions.js2
-rw-r--r--app/assets/javascripts/monitoring/stores/getters.js25
-rw-r--r--app/assets/javascripts/monitoring/stores/utils.js10
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