Add latest changes from gitlab-org/gitlab@master

4 files changed, 255 insertions, 159 deletions

diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue
index 92d4be81c75..70b3af8dc75 100644
--- a/app/assets/javascripts/logs/components/environment_logs.vue
+++ b/app/assets/javascripts/logs/components/environment_logs.vue
@@ -7,17 +7,15 @@ import {
   GlAlert,
   GlDropdown,
   GlDropdownHeader,
-  GlDropdownDivider,
   GlDropdownItem,
-  GlFormGroup,
-  GlSearchBoxByClick,
   GlInfiniteScroll,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+
+import LogSimpleFilters from './log_simple_filters.vue';
+import LogAdvancedFilters from './log_advanced_filters.vue';
 import LogControlButtons from './log_control_buttons.vue';
 
-import { timeRanges, defaultTimeRange } from '~/vue_shared/constants';
+import { defaultTimeRange } from '~/vue_shared/constants';
 import { timeRangeFromUrl } from '~/monitoring/utils';
 import { formatDate } from '../utils';
 
@@ -28,12 +26,10 @@ export default {
     GlAlert,
     GlDropdown,
     GlDropdownHeader,
-    GlDropdownDivider,
     GlDropdownItem,
-    GlFormGroup,
-    GlSearchBoxByClick,
     GlInfiniteScroll,
-    DateTimePicker,
+    LogSimpleFilters,
+    LogAdvancedFilters,
     LogControlButtons,
   },
   filters: {
@@ -63,49 +59,22 @@ export default {
   traceHeight: 600,
   data() {
     return {
-      searchQuery: '',
-      timeRanges,
       isElasticStackCalloutDismissed: false,
       scrollDownButtonDisabled: true,
     };
   },
   computed: {
     ...mapState('environmentLogs', ['environments', 'timeRange', 'logs', 'pods']),
-    ...mapGetters('environmentLogs', ['trace']),
-
-    timeRangeModel: {
-      get() {
-        return this.timeRange.selected;
-      },
-      set(val) {
-        this.setTimeRange(val);
-      },
-    },
+    ...mapGetters('environmentLogs', ['trace', 'showAdvancedFilters']),
 
     showLoader() {
       return this.logs.isLoading;
     },
-    advancedFeaturesEnabled() {
-      const environment = this.environments.options.find(
-        ({ name }) => name === this.environments.current,
-      );
-      return environment && environment.enable_advanced_logs_querying;
-    },
-    disableAdvancedControls() {
-      return this.environments.isLoading || !this.advancedFeaturesEnabled;
-    },
     shouldShowElasticStackCallout() {
-      return !this.isElasticStackCalloutDismissed && this.disableAdvancedControls;
-    },
-
-    podDropdownText() {
-      if (this.pods.current) {
-        return this.pods.current;
-      } else if (this.advancedFeaturesEnabled) {
-        // "All pods" is a valid option when advanced querying is available
-        return s__('Environments|All pods');
-      }
-      return s__('Environments|No pod selected');
+      return (
+        !this.isElasticStackCalloutDismissed &&
+        (this.environments.isLoading || !this.showAdvancedFilters)
+      );
     },
   },
   mounted() {
@@ -121,7 +90,6 @@ export default {
     ...mapActions('environmentLogs', [
       'setInitData',
       'setSearch',
-      'setTimeRange',
       'showPodLogs',
       'showEnvironment',
       'fetchEnvironments',
@@ -131,9 +99,6 @@ export default {
     isCurrentEnvironment(envName) {
       return envName === this.environments.current;
     },
-    isCurrentPod(podName) {
-      return podName === this.pods.current;
-    },
     topReached() {
       if (!this.logs.isLoading) {
         this.fetchMoreLogsPrepend();
@@ -167,123 +132,49 @@ export default {
         </strong>
       </a>
     </gl-alert>
-    <div class="top-bar js-top-bar d-flex">
-      <div class="row mx-n1">
-        <gl-form-group
-          id="environments-dropdown-fg"
-          label-size="sm"
-          label-for="environments-dropdown"
-          class="col-3 px-1"
+    <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
+      <div class="flex-grow-0">
+        <gl-dropdown
+          id="environments-dropdown"
+          :text="environments.current"
+          :disabled="environments.isLoading"
+          class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
         >
-          <gl-dropdown
-            id="environments-dropdown"
-            :text="environments.current"
-            :disabled="environments.isLoading"
-            class="d-flex gl-h-32 js-environments-dropdown"
-            toggle-class="dropdown-menu-toggle"
+          <gl-dropdown-header class="text-center">
+            {{ s__('Environments|Select environment') }}
+          </gl-dropdown-header>
+          <gl-dropdown-item
+            v-for="env in environments.options"
+            :key="env.id"
+            @click="showEnvironment(env.name)"
           >
-            <gl-dropdown-header class="text-center">
-              {{ s__('Environments|Select environment') }}
-            </gl-dropdown-header>
-            <gl-dropdown-item
-              v-for="env in environments.options"
-              :key="env.id"
-              @click="showEnvironment(env.name)"
-            >
-              <div class="d-flex">
-                <gl-icon
-                  :class="{ invisible: !isCurrentEnvironment(env.name) }"
-                  name="status_success_borderless"
-                />
-                <div class="flex-grow-1">{{ env.name }}</div>
-              </div>
-            </gl-dropdown-item>
-          </gl-dropdown>
-        </gl-form-group>
-
-        <gl-form-group
-          id="pods-dropdown-fg"
-          label-size="sm"
-          label-for="pods-dropdown"
-          class="col-3 px-1"
-        >
-          <gl-dropdown
-            id="pods-dropdown"
-            :text="podDropdownText"
-            :disabled="environments.isLoading"
-            class="d-flex gl-h-32 js-pods-dropdown"
-            toggle-class="dropdown-menu-toggle"
-          >
-            <gl-dropdown-header class="text-center">
-              {{ s__('Environments|Filter by pod') }}
-            </gl-dropdown-header>
-
-            <template v-if="advancedFeaturesEnabled">
-              <gl-dropdown-item key="all-pods" @click="showPodLogs(null)">
-                <div class="d-flex">
-                  <gl-icon
-                    :class="{ invisible: !isCurrentPod(null) }"
-                    name="status_success_borderless"
-                  />
-                  <div class="flex-grow-1">{{ s__('Environments|All pods') }}</div>
-                </div>
-              </gl-dropdown-item>
-              <gl-dropdown-divider />
-            </template>
-
-            <gl-dropdown-item v-if="!pods.options.length" :disabled="true">
-              <span class="text-muted">
-                {{ s__('Environments|No pods to display') }}
-              </span>
-            </gl-dropdown-item>
-            <gl-dropdown-item
-              v-for="podName in pods.options"
-              :key="podName"
-              class="text-nowrap"
-              @click="showPodLogs(podName)"
-            >
-              <div class="d-flex">
-                <gl-icon
-                  :class="{ invisible: !isCurrentPod(podName) }"
-                  name="status_success_borderless"
-                />
-                <div class="flex-grow-1">{{ podName }}</div>
-              </div>
-            </gl-dropdown-item>
-          </gl-dropdown>
-        </gl-form-group>
-        <gl-form-group id="search-fg" label-size="sm" label-for="search" class="col-3 px-1">
-          <gl-search-box-by-click
-            v-model.trim="searchQuery"
-            :disabled="disableAdvancedControls"
-            :placeholder="s__('Environments|Search')"
-            class="js-logs-search"
-            type="search"
-            autofocus
-            @submit="setSearch(searchQuery)"
-          />
-        </gl-form-group>
-
-        <gl-form-group
-          id="dates-fg"
-          label-size="sm"
-          label-for="time-window-dropdown"
-          class="col-3 px-1"
-        >
-          <date-time-picker
-            ref="dateTimePicker"
-            v-model="timeRangeModel"
-            class="w-100 gl-h-32"
-            right
-            :disabled="disableAdvancedControls"
-            :options="timeRanges"
-          />
-        </gl-form-group>
+            <div class="d-flex">
+              <gl-icon
+                :class="{ invisible: !isCurrentEnvironment(env.name) }"
+                name="status_success_borderless"
+              />
+              <div class="flex-grow-1">{{ env.name }}</div>
+            </div>
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
 
+      <log-advanced-filters
+        v-if="showAdvancedFilters"
+        ref="log-advanced-filters"
+        class="d-md-flex flex-grow-1"
+        :disabled="environments.isLoading"
+      />
+      <log-simple-filters
+        v-else
+        ref="log-simple-filters"
+        class="d-md-flex flex-grow-1"
+        :disabled="environments.isLoading"
+      />
+
       <log-control-buttons
         ref="scrollButtons"
-        class="controllers"
+        class="flex-grow-0 pr-2 mb-2 controllers"
         :scroll-down-button-disabled="scrollDownButtonDisabled"
         @refresh="showPodLogs(pods.current)"
         @scrollDown="scrollDown"
diff --git a/app/assets/javascripts/logs/components/log_advanced_filters.vue b/app/assets/javascripts/logs/components/log_advanced_filters.vue
new file mode 100644
index 00000000000..dfbd858bf18
--- /dev/null
+++ b/app/assets/javascripts/logs/components/log_advanced_filters.vue
@@ -0,0 +1,128 @@
+<script>
+import { s__ } from '~/locale';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+import { mapActions, mapState } from 'vuex';
+import {
+  GlIcon,
+  GlDropdown,
+  GlDropdownHeader,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlSearchBoxByClick,
+} from '@gitlab/ui';
+import { timeRanges } from '~/vue_shared/constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlDropdown,
+    GlDropdownHeader,
+    GlDropdownDivider,
+    GlDropdownItem,
+    GlSearchBoxByClick,
+    DateTimePicker,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      timeRanges,
+      searchQuery: '',
+    };
+  },
+  computed: {
+    ...mapState('environmentLogs', ['timeRange', 'pods']),
+
+    timeRangeModel: {
+      get() {
+        return this.timeRange.selected;
+      },
+      set(val) {
+        this.setTimeRange(val);
+      },
+    },
+
+    podDropdownText() {
+      return this.pods.current || s__('Environments|All pods');
+    },
+  },
+  methods: {
+    ...mapActions('environmentLogs', ['setSearch', 'showPodLogs', 'setTimeRange']),
+    isCurrentPod(podName) {
+      return podName === this.pods.current;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-dropdown
+      ref="podsDropdown"
+      :text="podDropdownText"
+      :disabled="disabled"
+      class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
+    >
+      <gl-dropdown-header class="text-center">
+        {{ s__('Environments|Filter by pod') }}
+      </gl-dropdown-header>
+
+      <gl-dropdown-item v-if="!pods.options.length" disabled>
+        <span ref="noPodsMsg" class="text-muted">
+          {{ s__('Environments|No pods to display') }}
+        </span>
+      </gl-dropdown-item>
+
+      <template v-else>
+        <gl-dropdown-item ref="allPodsOption" key="all-pods" @click="showPodLogs(null)">
+          <div class="d-flex">
+            <gl-icon
+              :class="{ invisible: pods.current !== null }"
+              name="status_success_borderless"
+            />
+            <div class="flex-grow-1">{{ s__('Environments|All pods') }}</div>
+          </div>
+        </gl-dropdown-item>
+        <gl-dropdown-divider />
+        <gl-dropdown-item
+          v-for="podName in pods.options"
+          :key="podName"
+          class="text-nowrap"
+          @click="showPodLogs(podName)"
+        >
+          <div class="d-flex">
+            <gl-icon
+              :class="{ invisible: !isCurrentPod(podName) }"
+              name="status_success_borderless"
+            />
+            <div class="flex-grow-1">{{ podName }}</div>
+          </div>
+        </gl-dropdown-item>
+      </template>
+    </gl-dropdown>
+
+    <gl-search-box-by-click
+      ref="searchBox"
+      v-model.trim="searchQuery"
+      :disabled="disabled"
+      :placeholder="s__('Environments|Search')"
+      class="mb-2 pr-2 flex-grow-1"
+      type="search"
+      autofocus
+      @submit="setSearch(searchQuery)"
+    />
+
+    <date-time-picker
+      ref="dateTimePicker"
+      v-model="timeRangeModel"
+      :disabled="disabled"
+      :options="timeRanges"
+      class="mb-2 gl-h-32 pr-2 d-block date-time-picker-wrapper"
+      right
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/logs/components/log_simple_filters.vue b/app/assets/javascripts/logs/components/log_simple_filters.vue
new file mode 100644
index 00000000000..21fe1695624
--- /dev/null
+++ b/app/assets/javascripts/logs/components/log_simple_filters.vue
@@ -0,0 +1,73 @@
+<script>
+import { s__ } from '~/locale';
+import { mapActions, mapState } from 'vuex';
+import { GlIcon, GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+    GlDropdown,
+    GlDropdownHeader,
+    GlDropdownItem,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  computed: {
+    ...mapState('environmentLogs', ['pods']),
+
+    podDropdownText() {
+      return this.pods.current || s__('Environments|No pod selected');
+    },
+  },
+  methods: {
+    ...mapActions('environmentLogs', ['showPodLogs']),
+    isCurrentPod(podName) {
+      return podName === this.pods.current;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-dropdown
+      ref="podsDropdown"
+      :text="podDropdownText"
+      :disabled="disabled"
+      class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
+    >
+      <gl-dropdown-header class="text-center">
+        {{ s__('Environments|Select pod') }}
+      </gl-dropdown-header>
+
+      <gl-dropdown-item v-if="!pods.options.length" disabled>
+        <span ref="noPodsMsg" class="text-muted">
+          {{ s__('Environments|No pods to display') }}
+        </span>
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-for="podName in pods.options"
+        :key="podName"
+        class="text-nowrap"
+        @click="showPodLogs(podName)"
+      >
+        <div class="d-flex">
+          <gl-icon
+            :class="{ invisible: !isCurrentPod(podName) }"
+            name="status_success_borderless"
+          />
+          <div class="flex-grow-1">{{ podName }}</div>
+        </div>
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/logs/stores/getters.js b/app/assets/javascripts/logs/stores/getters.js
index 8770306fdd6..d92969c5389 100644
--- a/app/assets/javascripts/logs/stores/getters.js
+++ b/app/assets/javascripts/logs/stores/getters.js
@@ -5,5 +5,9 @@ const mapTrace = ({ timestamp = null, pod = '', message = '' }) =>
 
 export const trace = state => state.logs.lines.map(mapTrace).join('\n');
 
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
+export const showAdvancedFilters = state => {
+  const environment = state.environments.options.find(
+    ({ name }) => name === state.environments.current,
+  );
+  return Boolean(environment?.enable_advanced_logs_querying);
+};