Commit 20fc1535 authored by Miguel Rincon's avatar Miguel Rincon

Use backend to deinfe advanced features

Logs endpoint communicates to the frontend when advanced query features
can be enabled, this commit removes the feature flag in the component
to await backend settings.

Additionally, advanced query components are disabled and not hidden
when advanced features are disabled.
parent 0de20bd4
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
.mh-50vh { max-height: 50vh; } .mh-50vh { max-height: 50vh; }
.gl-w-64 { width: px-to-rem($grid-size * 8); } .gl-w-64 { width: px-to-rem($grid-size * 8); }
.gl-h-32 { height: px-to-rem($grid-size * 4); }
.gl-h-64 { height: px-to-rem($grid-size * 8); } .gl-h-64 { height: px-to-rem($grid-size * 8); }
.gl-text-purple { color: $purple; } .gl-text-purple { color: $purple; }
...@@ -59,4 +60,3 @@ ...@@ -59,4 +60,3 @@
.gl-text-red-700 { @include gl-text-red-700; } .gl-text-red-700 { @include gl-text-red-700; }
.gl-text-orange-700 { @include gl-text-orange-700; } .gl-text-orange-700 { @include gl-text-orange-700; }
.gl-text-green-700 { @include gl-text-green-700; } .gl-text-green-700 { @include gl-text-green-700; }
...@@ -56,17 +56,15 @@ export default { ...@@ -56,17 +56,15 @@ export default {
showLoader() { showLoader() {
return this.logs.isLoading || !this.logs.isComplete; return this.logs.isLoading || !this.logs.isComplete;
}, },
featureElasticEnabled() { advancedControlsDisabled() {
return gon.features && gon.features.enableClusterApplicationElasticStack; return this.environments.isLoading || !this.enableAdvancedQuerying;
},
advancedFeaturesEnabled() {
return this.featureElasticEnabled && this.enableAdvancedQuerying;
}, },
shouldShowElasticStackCallout() { shouldShowElasticStackCallout() {
return ( return (
!this.isElasticStackCalloutDismissed && !this.isElasticStackCalloutDismissed &&
!this.environments.isLoading && !this.environments.isLoading &&
!this.advancedFeaturesEnabled !this.logs.isLoading &&
!this.enableAdvancedQuerying
); );
}, },
}, },
...@@ -120,19 +118,19 @@ export default { ...@@ -120,19 +118,19 @@ export default {
</a> </a>
</gl-alert> </gl-alert>
<div class="top-bar js-top-bar d-flex"> <div class="top-bar js-top-bar d-flex">
<div class="row"> <div class="row mx-n1">
<gl-form-group <gl-form-group
id="environments-dropdown-fg" id="environments-dropdown-fg"
:label="s__('Environments|Environment')" :label="s__('Environments|Environment')"
label-size="sm" label-size="sm"
label-for="environments-dropdown" label-for="environments-dropdown"
:class="featureElasticEnabled ? 'col-3' : 'col-6'" class="col-3 px-1"
> >
<gl-dropdown <gl-dropdown
id="environments-dropdown" id="environments-dropdown"
:text="environments.current" :text="environments.current"
:disabled="environments.isLoading" :disabled="environments.isLoading"
class="d-flex js-environments-dropdown" class="d-flex gl-h-32 js-environments-dropdown"
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
> >
<gl-dropdown-item <gl-dropdown-item
...@@ -149,13 +147,13 @@ export default { ...@@ -149,13 +147,13 @@ export default {
:label="s__('Environments|Pod logs from')" :label="s__('Environments|Pod logs from')"
label-size="sm" label-size="sm"
label-for="pods-dropdown" label-for="pods-dropdown"
:class="featureElasticEnabled ? 'col-3' : 'col-6'" class="col-3 px-1"
> >
<gl-dropdown <gl-dropdown
id="pods-dropdown" id="pods-dropdown"
:text="pods.current || s__('Environments|No pods to display')" :text="pods.current || s__('Environments|No pods to display')"
:disabled="logs.isLoading" :disabled="logs.isLoading"
class="d-flex js-pods-dropdown" class="d-flex gl-h-32 js-pods-dropdown"
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
> >
<gl-dropdown-item <gl-dropdown-item
...@@ -168,37 +166,18 @@ export default { ...@@ -168,37 +166,18 @@ export default {
</gl-dropdown> </gl-dropdown>
</gl-form-group> </gl-form-group>
<gl-form-group <gl-form-group
v-if="featureElasticEnabled"
id="search-fg"
:label="s__('Environments|Search')"
label-size="sm"
label-for="search"
class="col-3"
>
<gl-search-box-by-click
v-model.trim="searchQuery"
:disabled="environments.isLoading || !advancedFeaturesEnabled"
:placeholder="s__('Environments|Search')"
class="js-logs-search"
type="search"
autofocus
@submit="setSearch(searchQuery)"
/>
</gl-form-group>
<gl-form-group
v-if="featureElasticEnabled"
id="dates-fg" id="dates-fg"
:label="s__('Environments|Show last')" :label="s__('Environments|Show last')"
label-size="sm" label-size="sm"
label-for="time-window-dropdown" label-for="time-window-dropdown"
class="col-3" class="col-3 px-1"
> >
<gl-dropdown <gl-dropdown
id="time-window-dropdown" id="time-window-dropdown"
ref="time-window-dropdown" ref="time-window-dropdown"
:disabled="environments.isLoading" :disabled="advancedControlsDisabled"
:text="timeWindow.options[timeWindow.current].label" :text="timeWindow.options[timeWindow.current].label"
class="d-flex" class="d-flex gl-h-32"
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
> >
<gl-dropdown-item <gl-dropdown-item
...@@ -210,11 +189,28 @@ export default { ...@@ -210,11 +189,28 @@ export default {
</gl-dropdown-item> </gl-dropdown-item>
</gl-dropdown> </gl-dropdown>
</gl-form-group> </gl-form-group>
<gl-form-group
id="search-fg"
:label="s__('Environments|Search')"
label-size="sm"
label-for="search"
class="col-3 px-1"
>
<gl-search-box-by-click
v-model.trim="searchQuery"
:disabled="advancedControlsDisabled"
:placeholder="s__('Environments|Search')"
class="js-logs-search"
type="search"
autofocus
@submit="!advancedControlsDisabled && setSearch(searchQuery)"
/>
</gl-form-group>
</div> </div>
<log-control-buttons <log-control-buttons
ref="scrollButtons" ref="scrollButtons"
class="controllers align-self-end" class="controllers align-self-end mb-1"
@refresh="showPodLogs(pods.current)" @refresh="showPodLogs(pods.current)"
/> />
</div> </div>
......
import Vue from 'vue'; import Vue from 'vue';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import EnvironmentLogs from 'ee/logs/components/environment_logs.vue'; import EnvironmentLogs from 'ee/logs/components/environment_logs.vue';
...@@ -89,12 +89,16 @@ describe('EnvironmentLogs', () => { ...@@ -89,12 +89,16 @@ describe('EnvironmentLogs', () => {
expect(wrapper.isVueInstance()).toBe(true); expect(wrapper.isVueInstance()).toBe(true);
expect(wrapper.isEmpty()).toBe(false); expect(wrapper.isEmpty()).toBe(false);
expect(findLogTrace().isEmpty()).toBe(false);
// top bar
expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true); expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
expect(findPodsDropdown().is(GlDropdown)).toBe(true); expect(findPodsDropdown().is(GlDropdown)).toBe(true);
expect(findSearchBar().is(GlSearchBoxByClick)).toBe(true);
expect(findTimeWindowDropdown().is(GlDropdown)).toBe(true);
expect(findLogControlButtons().exists()).toBe(true); expect(findLogControlButtons().exists()).toBe(true);
// log trace
expect(findLogTrace().isEmpty()).toBe(false);
}); });
it('mounted inits data', () => { it('mounted inits data', () => {
...@@ -121,9 +125,6 @@ describe('EnvironmentLogs', () => { ...@@ -121,9 +125,6 @@ describe('EnvironmentLogs', () => {
state.environments.options = []; state.environments.options = [];
state.environments.isLoading = true; state.environments.isLoading = true;
gon.features = gon.features || {};
gon.features.enableClusterApplicationElasticStack = true;
initWrapper(); initWrapper();
}); });
...@@ -160,24 +161,7 @@ describe('EnvironmentLogs', () => { ...@@ -160,24 +161,7 @@ describe('EnvironmentLogs', () => {
}); });
}); });
describe('elastic stack disabled', () => { describe('when advanced querying is disabled', () => {
beforeEach(() => {
gon.features = gon.features || {};
gon.features.enableClusterApplicationElasticStack = false;
initWrapper();
});
it("doesn't display the search bar or time windows dropdown", () => {
expect(findSearchBar().exists()).toEqual(false);
expect(findTimeWindowDropdown().exists()).toEqual(false);
expect(wrapper.find('#environments-dropdown-fg').attributes('class')).toEqual('col-6');
expect(wrapper.find('#pods-dropdown-fg').attributes('class')).toEqual('col-6');
});
});
describe('ES enabled and legacy environment', () => {
beforeEach(() => { beforeEach(() => {
state.pods.options = []; state.pods.options = [];
...@@ -189,15 +173,12 @@ describe('EnvironmentLogs', () => { ...@@ -189,15 +173,12 @@ describe('EnvironmentLogs', () => {
state.enableAdvancedQuerying = false; state.enableAdvancedQuerying = false;
gon.features = gon.features || {};
gon.features.enableClusterApplicationElasticStack = true;
initWrapper(); initWrapper();
}); });
it('displays a disabled search bar', () => { it('search bar and time window dropdown are disabled', () => {
expect(findSearchBar().exists()).toEqual(true);
expect(findSearchBar().attributes('disabled')).toEqual('true'); expect(findSearchBar().attributes('disabled')).toEqual('true');
expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
}); });
}); });
...@@ -223,9 +204,6 @@ describe('EnvironmentLogs', () => { ...@@ -223,9 +204,6 @@ describe('EnvironmentLogs', () => {
state.environments.options = mockEnvironments; state.environments.options = mockEnvironments;
}); });
gon.features = gon.features || {};
gon.features.enableClusterApplicationElasticStack = true;
initWrapper(); initWrapper();
}); });
...@@ -246,7 +224,6 @@ describe('EnvironmentLogs', () => { ...@@ -246,7 +224,6 @@ describe('EnvironmentLogs', () => {
const item = items.at(i); const item = items.at(i);
expect(item.text()).toBe(env.name); expect(item.text()).toBe(env.name);
}); });
expect(wrapper.find('#environments-dropdown-fg').attributes('class')).toEqual('col-3');
}); });
it('populates pods dropdown', () => { it('populates pods dropdown', () => {
...@@ -258,7 +235,6 @@ describe('EnvironmentLogs', () => { ...@@ -258,7 +235,6 @@ describe('EnvironmentLogs', () => {
const item = items.at(i); const item = items.at(i);
expect(item.text()).toBe(pod); expect(item.text()).toBe(pod);
}); });
expect(wrapper.find('#pods-dropdown-fg').attributes('class')).toEqual('col-3');
}); });
it('populates logs trace', () => { it('populates logs trace', () => {
...@@ -268,14 +244,11 @@ describe('EnvironmentLogs', () => { ...@@ -268,14 +244,11 @@ describe('EnvironmentLogs', () => {
}); });
it('displays an enabled search bar', () => { it('displays an enabled search bar', () => {
expect(findSearchBar().exists()).toEqual(true); expect(findSearchBar().attributes('disabled')).toBeFalsy();
expect(findSearchBar().attributes('disabled')).toEqual(undefined);
expect(wrapper.find('#search-fg').attributes('class')).toEqual('col-3');
}); });
it('displays and enables the time window dropdown', () => { it('displays an enabled time window dropdown', () => {
expect(findTimeWindowDropdown().exists()).toEqual(true); expect(findTimeWindowDropdown().attributes('disabled')).toBeFalsy();
expect(findTimeWindowDropdown().attributes('disabled')).toEqual(undefined);
}); });
it('update control buttons state', () => { it('update control buttons state', () => {
......
...@@ -193,6 +193,7 @@ describe('Logs Store actions', () => { ...@@ -193,6 +193,7 @@ describe('Logs Store actions', () => {
.reply(200, { .reply(200, {
pod_name: mockPodName, pod_name: mockPodName,
pods: mockPods, pods: mockPods,
enable_advanced_querying: true,
logs: mockLogsResult, logs: mockLogsResult,
}); });
...@@ -203,6 +204,7 @@ describe('Logs Store actions', () => { ...@@ -203,6 +204,7 @@ describe('Logs Store actions', () => {
[ [
{ type: types.REQUEST_PODS_DATA }, { type: types.REQUEST_PODS_DATA },
{ type: types.REQUEST_LOGS_DATA }, { type: types.REQUEST_LOGS_DATA },
{ type: types.ENABLE_ADVANCED_QUERYING, payload: true },
{ type: types.SET_CURRENT_POD_NAME, payload: mockPodName }, { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
{ type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods }, { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
{ type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult }, { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },
......
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