1 files changed, 16 insertions, 26 deletions
diff --git a/app/assets/javascripts/logs/components/log_simple_filters.vue b/app/assets/javascripts/logs/components/log_simple_filters.vue
index 2e1270b5428..ba30d4628c9 100644
--- a/app/assets/javascripts/logs/components/log_simple_filters.vue
+++ b/app/assets/javascripts/logs/components/log_simple_filters.vue
@@ -1,19 +1,13 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import {
-  GlIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    GlIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
   },
   props: {
     disabled: {
@@ -44,35 +38,31 @@ export default {
 </script>
 <template>
   <div>
-    <gl-deprecated-dropdown
+    <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"
+      class="gl-mr-3 gl-mb-3 gl-display-flex gl-display-md-block qa-pods-dropdown"
     >
-      <gl-deprecated-dropdown-header class="text-center">
+      <gl-dropdown-section-header>
         {{ s__('Environments|Select pod') }}
-      </gl-deprecated-dropdown-header>
+      </gl-dropdown-section-header>
 
-      <gl-deprecated-dropdown-item v-if="!pods.options.length" disabled>
+      <gl-dropdown-item v-if="!pods.options.length" disabled>
         <span ref="noPodsMsg" class="text-muted">
           {{ s__('Environments|No pods to display') }}
         </span>
-      </gl-deprecated-dropdown-item>
-      <gl-deprecated-dropdown-item
+      </gl-dropdown-item>
+      <gl-dropdown-item
         v-for="podName in pods.options"
         :key="podName"
+        :is-check-item="true"
+        :is-checked="isCurrentPod(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-deprecated-dropdown-item>
-    </gl-deprecated-dropdown>
+        {{ podName }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>