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.

app/assets/stylesheets/utilities.scss

@@ -41,6 +41,7 @@
 .mh-50vh { max-height: 50vh; }
 
 .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-text-purple { color: $purple; }
@@ -59,4 +60,3 @@
 .gl-text-red-700 { @include gl-text-red-700; }
 .gl-text-orange-700 { @include gl-text-orange-700; }
 .gl-text-green-700 { @include gl-text-green-700; }
-

ee/app/assets/javascripts/logs/components/environment_logs.vue

@@ -56,17 +56,15 @@ export default {
     showLoader() {
       return this.logs.isLoading || !this.logs.isComplete;
     },
-    featureElasticEnabled() {
-      return gon.features && gon.features.enableClusterApplicationElasticStack;
-    },
-    advancedFeaturesEnabled() {
-      return this.featureElasticEnabled && this.enableAdvancedQuerying;
+    advancedControlsDisabled() {
+      return this.environments.isLoading || !this.enableAdvancedQuerying;
     },
     shouldShowElasticStackCallout() {
       return (
         !this.isElasticStackCalloutDismissed &&
         !this.environments.isLoading &&
-        !this.advancedFeaturesEnabled
+        !this.logs.isLoading &&
+        !this.enableAdvancedQuerying
       );
     },
   },
@@ -120,19 +118,19 @@ export default {
       </a>
     </gl-alert>
     <div class="top-bar js-top-bar d-flex">
-      <div class="row">
+      <div class="row mx-n1">
         <gl-form-group
           id="environments-dropdown-fg"
           :label="s__('Environments|Environment')"
           label-size="sm"
           label-for="environments-dropdown"
-          :class="featureElasticEnabled ? 'col-3' : 'col-6'"
+          class="col-3 px-1"
         >
           <gl-dropdown
             id="environments-dropdown"
             :text="environments.current"
             :disabled="environments.isLoading"
-            class="d-flex js-environments-dropdown"
+            class="d-flex gl-h-32 js-environments-dropdown"
             toggle-class="dropdown-menu-toggle"
           >
             <gl-dropdown-item
@@ -149,13 +147,13 @@ export default {
           :label="s__('Environments|Pod logs from')"
           label-size="sm"
           label-for="pods-dropdown"
-          :class="featureElasticEnabled ? 'col-3' : 'col-6'"
+          class="col-3 px-1"
         >
           <gl-dropdown
             id="pods-dropdown"
             :text="pods.current || s__('Environments|No pods to display')"
             :disabled="logs.isLoading"
-            class="d-flex js-pods-dropdown"
+            class="d-flex gl-h-32 js-pods-dropdown"
             toggle-class="dropdown-menu-toggle"
           >
             <gl-dropdown-item
@@ -168,37 +166,18 @@ export default {
           </gl-dropdown>
         </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"
           :label="s__('Environments|Show last')"
           label-size="sm"
           label-for="time-window-dropdown"
-          class="col-3"
+          class="col-3 px-1"
         >
           <gl-dropdown
             id="time-window-dropdown"
             ref="time-window-dropdown"
-            :disabled="environments.isLoading"
+            :disabled="advancedControlsDisabled"
             :text="timeWindow.options[timeWindow.current].label"
-            class="d-flex"
+            class="d-flex gl-h-32"
             toggle-class="dropdown-menu-toggle"
           >
             <gl-dropdown-item
@@ -210,11 +189,28 @@ export default {
             </gl-dropdown-item>
           </gl-dropdown>
         </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>
 
       <log-control-buttons
         ref="scrollButtons"
-        class="controllers align-self-end"
+        class="controllers align-self-end mb-1"
         @refresh="showPodLogs(pods.current)"
       />
     </div>

ee/spec/frontend/logs/components/environment_logs_spec.js

 import Vue from 'vue';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EnvironmentLogs from 'ee/logs/components/environment_logs.vue';
 
@@ -89,12 +89,16 @@ describe('EnvironmentLogs', () => {
 
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.isEmpty()).toBe(false);
-    expect(findLogTrace().isEmpty()).toBe(false);
 
+    // top bar
     expect(findEnvironmentsDropdown().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);
+
+    // log trace
+    expect(findLogTrace().isEmpty()).toBe(false);
   });
 
   it('mounted inits data', () => {
@@ -121,9 +125,6 @@ describe('EnvironmentLogs', () => {
       state.environments.options = [];
       state.environments.isLoading = true;
 
-      gon.features = gon.features || {};
-      gon.features.enableClusterApplicationElasticStack = true;
-
       initWrapper();
     });
 
@@ -160,24 +161,7 @@ describe('EnvironmentLogs', () => {
     });
   });
 
-  describe('elastic stack 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', () => {
+  describe('when advanced querying is disabled', () => {
     beforeEach(() => {
       state.pods.options = [];
 
@@ -189,15 +173,12 @@ describe('EnvironmentLogs', () => {
 
       state.enableAdvancedQuerying = false;
 
-      gon.features = gon.features || {};
-      gon.features.enableClusterApplicationElasticStack = true;
-
       initWrapper();
     });
 
-    it('displays a disabled search bar', () => {
-      expect(findSearchBar().exists()).toEqual(true);
+    it('search bar and time window dropdown are disabled', () => {
       expect(findSearchBar().attributes('disabled')).toEqual('true');
+      expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
     });
   });
 
@@ -223,9 +204,6 @@ describe('EnvironmentLogs', () => {
         state.environments.options = mockEnvironments;
       });
 
-      gon.features = gon.features || {};
-      gon.features.enableClusterApplicationElasticStack = true;
-
       initWrapper();
     });
 
@@ -246,7 +224,6 @@ describe('EnvironmentLogs', () => {
         const item = items.at(i);
         expect(item.text()).toBe(env.name);
       });
-      expect(wrapper.find('#environments-dropdown-fg').attributes('class')).toEqual('col-3');
     });
 
     it('populates pods dropdown', () => {
@@ -258,7 +235,6 @@ describe('EnvironmentLogs', () => {
         const item = items.at(i);
         expect(item.text()).toBe(pod);
       });
-      expect(wrapper.find('#pods-dropdown-fg').attributes('class')).toEqual('col-3');
     });
 
     it('populates logs trace', () => {
@@ -268,14 +244,11 @@ describe('EnvironmentLogs', () => {
     });
 
     it('displays an enabled search bar', () => {
-      expect(findSearchBar().exists()).toEqual(true);
-      expect(findSearchBar().attributes('disabled')).toEqual(undefined);
-      expect(wrapper.find('#search-fg').attributes('class')).toEqual('col-3');
+      expect(findSearchBar().attributes('disabled')).toBeFalsy();
     });
 
-    it('displays and enables the time window dropdown', () => {
-      expect(findTimeWindowDropdown().exists()).toEqual(true);
-      expect(findTimeWindowDropdown().attributes('disabled')).toEqual(undefined);
+    it('displays an enabled time window dropdown', () => {
+      expect(findTimeWindowDropdown().attributes('disabled')).toBeFalsy();
     });
 
     it('update control buttons state', () => {

ee/spec/frontend/logs/stores/actions_spec.js

@@ -193,6 +193,7 @@ describe('Logs Store actions', () => {
         .reply(200, {
           pod_name: mockPodName,
           pods: mockPods,
+          enable_advanced_querying: true,
           logs: mockLogsResult,
         });
 
@@ -203,6 +204,7 @@ describe('Logs Store actions', () => {
         [
           { type: types.REQUEST_PODS_DATA },
           { type: types.REQUEST_LOGS_DATA },
+          { type: types.ENABLE_ADVANCED_QUERYING, payload: true },
           { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
           { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
           { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },