Commit 6dc5b686 authored by Dhiraj Bodicherla's avatar Dhiraj Bodicherla

Update data fetch strategy when variable updates

Currently, the variables section component fetches
data. This MR updates it so that when variable values
update action is called, data is fetched via vuex actions
parent 64705d75
...@@ -13,20 +13,18 @@ export default { ...@@ -13,20 +13,18 @@ export default {
...mapState('monitoringDashboard', ['variables']), ...mapState('monitoringDashboard', ['variables']),
}, },
methods: { methods: {
...mapActions('monitoringDashboard', ['fetchDashboardData', 'updateVariableValues']), ...mapActions('monitoringDashboard', ['updateVariablesAndFetchData']),
refreshDashboard(variable, value) { refreshDashboard(variable, value) {
if (this.variables[variable].value !== value) { if (this.variables[variable].value !== value) {
const changedVariable = { key: variable, value }; const changedVariable = { key: variable, value };
// update the Vuex store // update the Vuex store
this.updateVariableValues(changedVariable); this.updateVariablesAndFetchData(changedVariable);
// the below calls can ideally be moved out of the // the below calls can ideally be moved out of the
// component and into the actions and let the // component and into the actions and let the
// mutation respond directly. // mutation respond directly.
// This can be further investigate in // This can be further investigate in
// https://gitlab.com/gitlab-org/gitlab/-/issues/217713 // https://gitlab.com/gitlab-org/gitlab/-/issues/217713
setCustomVariablesFromUrl(this.variables); setCustomVariablesFromUrl(this.variables);
// fetch data
this.fetchDashboardData();
} }
}, },
variableComponent(type) { variableComponent(type) {
......
...@@ -415,8 +415,10 @@ export const duplicateSystemDashboard = ({ state }, payload) => { ...@@ -415,8 +415,10 @@ export const duplicateSystemDashboard = ({ state }, payload) => {
// Variables manipulation // Variables manipulation
export const updateVariableValues = ({ commit }, updatedVariable) => { export const updateVariablesAndFetchData = ({ commit, dispatch }, updatedVariable) => {
commit(types.UPDATE_VARIABLE_VALUES, updatedVariable); commit(types.UPDATE_VARIABLES, updatedVariable);
return dispatch('fetchDashboardData');
}; };
// prevent babel-plugin-rewire from generating an invalid default during karma tests // prevent babel-plugin-rewire from generating an invalid default during karma tests
......
...@@ -3,7 +3,7 @@ export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD'; ...@@ -3,7 +3,7 @@ export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD';
export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS'; export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS';
export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE'; export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE';
export const SET_VARIABLES = 'SET_VARIABLES'; export const SET_VARIABLES = 'SET_VARIABLES';
export const UPDATE_VARIABLE_VALUES = 'UPDATE_VARIABLE_VALUES'; export const UPDATE_VARIABLES = 'UPDATE_VARIABLES';
export const REQUEST_DASHBOARD_STARRING = 'REQUEST_DASHBOARD_STARRING'; export const REQUEST_DASHBOARD_STARRING = 'REQUEST_DASHBOARD_STARRING';
export const RECEIVE_DASHBOARD_STARRING_SUCCESS = 'RECEIVE_DASHBOARD_STARRING_SUCCESS'; export const RECEIVE_DASHBOARD_STARRING_SUCCESS = 'RECEIVE_DASHBOARD_STARRING_SUCCESS';
......
...@@ -191,7 +191,7 @@ export default { ...@@ -191,7 +191,7 @@ export default {
[types.SET_VARIABLES](state, variables) { [types.SET_VARIABLES](state, variables) {
state.variables = variables; state.variables = variables;
}, },
[types.UPDATE_VARIABLE_VALUES](state, updatedVariable) { [types.UPDATE_VARIABLES](state, updatedVariable) {
Object.assign(state.variables[updatedVariable.key], { Object.assign(state.variables[updatedVariable.key], {
...state.variables[updatedVariable.key], ...state.variables[updatedVariable.key],
value: updatedVariable.value, value: updatedVariable.value,
......
...@@ -57,8 +57,7 @@ describe('Metrics dashboard/variables section component', () => { ...@@ -57,8 +57,7 @@ describe('Metrics dashboard/variables section component', () => {
}); });
describe('when changing the variable inputs', () => { describe('when changing the variable inputs', () => {
const fetchDashboardData = jest.fn(); const updateVariablesAndFetchData = jest.fn();
const updateVariableValues = jest.fn();
beforeEach(() => { beforeEach(() => {
store = new Vuex.Store({ store = new Vuex.Store({
...@@ -70,8 +69,7 @@ describe('Metrics dashboard/variables section component', () => { ...@@ -70,8 +69,7 @@ describe('Metrics dashboard/variables section component', () => {
variables: sampleVariables, variables: sampleVariables,
}, },
actions: { actions: {
fetchDashboardData, updateVariablesAndFetchData,
updateVariableValues,
}, },
}, },
}, },
...@@ -86,13 +84,12 @@ describe('Metrics dashboard/variables section component', () => { ...@@ -86,13 +84,12 @@ describe('Metrics dashboard/variables section component', () => {
firstInput.vm.$emit('onUpdate', 'label1', 'test'); firstInput.vm.$emit('onUpdate', 'label1', 'test');
return wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick(() => {
expect(updateVariableValues).toHaveBeenCalled(); expect(updateVariablesAndFetchData).toHaveBeenCalled();
expect(mergeUrlParams).toHaveBeenCalledWith( expect(mergeUrlParams).toHaveBeenCalledWith(
convertVariablesForURL(sampleVariables), convertVariablesForURL(sampleVariables),
window.location.href, window.location.href,
); );
expect(updateHistory).toHaveBeenCalled(); expect(updateHistory).toHaveBeenCalled();
expect(fetchDashboardData).toHaveBeenCalled();
}); });
}); });
...@@ -102,13 +99,12 @@ describe('Metrics dashboard/variables section component', () => { ...@@ -102,13 +99,12 @@ describe('Metrics dashboard/variables section component', () => {
firstInput.vm.$emit('onUpdate', 'label1', 'test'); firstInput.vm.$emit('onUpdate', 'label1', 'test');
return wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick(() => {
expect(updateVariableValues).toHaveBeenCalled(); expect(updateVariablesAndFetchData).toHaveBeenCalled();
expect(mergeUrlParams).toHaveBeenCalledWith( expect(mergeUrlParams).toHaveBeenCalledWith(
convertVariablesForURL(sampleVariables), convertVariablesForURL(sampleVariables),
window.location.href, window.location.href,
); );
expect(updateHistory).toHaveBeenCalled(); expect(updateHistory).toHaveBeenCalled();
expect(fetchDashboardData).toHaveBeenCalled();
}); });
}); });
...@@ -117,10 +113,9 @@ describe('Metrics dashboard/variables section component', () => { ...@@ -117,10 +113,9 @@ describe('Metrics dashboard/variables section component', () => {
firstInput.vm.$emit('onUpdate', 'label1', 'Simple text'); firstInput.vm.$emit('onUpdate', 'label1', 'Simple text');
expect(updateVariableValues).not.toHaveBeenCalled(); expect(updateVariablesAndFetchData).not.toHaveBeenCalled();
expect(mergeUrlParams).not.toHaveBeenCalled(); expect(mergeUrlParams).not.toHaveBeenCalled();
expect(updateHistory).not.toHaveBeenCalled(); expect(updateHistory).not.toHaveBeenCalled();
expect(fetchDashboardData).not.toHaveBeenCalled();
}); });
}); });
}); });
...@@ -26,7 +26,7 @@ import { ...@@ -26,7 +26,7 @@ import {
clearExpandedPanel, clearExpandedPanel,
setGettingStartedEmptyState, setGettingStartedEmptyState,
duplicateSystemDashboard, duplicateSystemDashboard,
updateVariableValues, updateVariablesAndFetchData,
} from '~/monitoring/stores/actions'; } from '~/monitoring/stores/actions';
import { import {
gqClient, gqClient,
...@@ -417,19 +417,23 @@ describe('Monitoring store actions', () => { ...@@ -417,19 +417,23 @@ describe('Monitoring store actions', () => {
}); });
}); });
describe('updateVariableValues', () => { describe('updateVariablesAndFetchData', () => {
it('should commit UPDATE_VARIABLE_VALUES mutation', done => { it('should commit UPDATE_VARIABLES mutation and fetch data', done => {
testAction( testAction(
updateVariableValues, updateVariablesAndFetchData,
{ pod: 'POD' }, { pod: 'POD' },
state, state,
[ [
{ {
type: types.UPDATE_VARIABLE_VALUES, type: types.UPDATE_VARIABLES,
payload: { pod: 'POD' }, payload: { pod: 'POD' },
}, },
], ],
[], [
{
type: 'fetchDashboardData',
},
],
done, done,
); );
}); });
......
...@@ -418,14 +418,14 @@ describe('Monitoring mutations', () => { ...@@ -418,14 +418,14 @@ describe('Monitoring mutations', () => {
}); });
}); });
describe('UPDATE_VARIABLE_VALUES', () => { describe('UPDATE_VARIABLES', () => {
afterEach(() => { afterEach(() => {
mutations[types.SET_VARIABLES](stateCopy, {}); mutations[types.SET_VARIABLES](stateCopy, {});
}); });
it('updates only the value of the variable in variables', () => { it('updates only the value of the variable in variables', () => {
mutations[types.SET_VARIABLES](stateCopy, { environment: { value: 'prod', type: 'text' } }); mutations[types.SET_VARIABLES](stateCopy, { environment: { value: 'prod', type: 'text' } });
mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { key: 'environment', value: 'new prod' }); mutations[types.UPDATE_VARIABLES](stateCopy, { key: 'environment', value: 'new prod' });
expect(stateCopy.variables).toEqual({ environment: { value: 'new prod', type: 'text' } }); expect(stateCopy.variables).toEqual({ environment: { value: 'new prod', type: 'text' } });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment