[Fleet] Fix for agent logs dropdowns not showing (#112833) (#112945)

Co-authored-by: Cristina Amico <[email protected]>
elastic · Sep 23, 2021 · 2626b58 · 2626b58
1 parent d6c01d3
commit 2626b58
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/...cations/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx b/...cations/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx
@@ -37,7 +37,7 @@ export const DatasetFilter: React.FunctionComponent<{
           field: DATASET_FIELD,
           query: '',
         });
-        setDatasetValues(values.sort());
+        if (values.length > 0) setDatasetValues(values.sort());
       } catch (e) {
         setDatasetValues([AGENT_DATASET]);
       }

diff --git a/...tions/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx b/...tions/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useState, useEffect, useCallback } from 'react';
-import { EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
+import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, EuiIcon, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { useStartServices } from '../../../../../hooks';
@@ -57,6 +57,29 @@ export const LogLevelFilter: React.FunctionComponent<{
     fetchValues();
   }, [data.autocomplete]);
 
+  const noLogsFound = (
+    <div className="euiFilterSelect__note">
+      <div className="euiFilterSelect__noteContent">
+        <EuiIcon type="minusInCircle" />
+        <EuiSpacer size="xs" />
+        <p>
+          {i18n.translate('xpack.fleet.agentLogs.logLevelEmpty', {
+            defaultMessage: 'No Logs Found',
+          })}
+        </p>
+      </div>
+    </div>
+  );
+  const filterSelect = levelValues.map((level) => (
+    <EuiFilterSelectItem
+      checked={selectedLevels.includes(level) ? 'on' : undefined}
+      key={level}
+      onClick={() => onToggleLevel(level)}
+    >
+      {level}
+    </EuiFilterSelectItem>
+  ));
+
   return (
     <EuiPopover
       button={
@@ -78,15 +101,7 @@ export const LogLevelFilter: React.FunctionComponent<{
       closePopover={closePopover}
       panelPaddingSize="none"
     >
-      {levelValues.map((level) => (
-        <EuiFilterSelectItem
-          checked={selectedLevels.includes(level) ? 'on' : undefined}
-          key={level}
-          onClick={() => onToggleLevel(level)}
-        >
-          {level}
-        </EuiFilterSelectItem>
-      ))}
+      {levelValues.length === 0 ? noLogsFound : filterSelect}
     </EuiPopover>
   );
 });