From 8eb37442f3c2b03ae3608902ebc30bc29083b2b3 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Mon, 23 Nov 2020 14:15:09 -0500
Subject: [PATCH] Update copy and use fixed values for log level filter in
 agent logs

---
 .../agent_logs/filter_log_level.tsx           | 36 ++++---------------
 .../agent_logs/select_log_level.tsx           | 15 ++++----
 .../agents/components/agent_health.tsx        | 11 +++---
 3 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx
index b034168dc8a15..2c6c6bbefd953 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx
@@ -3,41 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState } from 'react';
 import { EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useStartServices } from '../../../../../hooks';
-import { AGENT_LOG_INDEX_PATTERN, LOG_LEVEL_FIELD } from './constants';
+import { AGENT_LOG_LEVELS } from './constants';
+
+const LEVEL_VALUES = Object.values(AGENT_LOG_LEVELS);
 
 export const LogLevelFilter: React.FunctionComponent<{
   selectedLevels: string[];
   onToggleLevel: (level: string) => void;
 }> = memo(({ selectedLevels, onToggleLevel }) => {
-  const { data } = useStartServices();
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [levelValues, setLevelValues] = useState<string[]>([]);
-
-  useEffect(() => {
-    const fetchValues = async () => {
-      setIsLoading(true);
-      try {
-        const values = await data.autocomplete.getValueSuggestions({
-          indexPattern: {
-            title: AGENT_LOG_INDEX_PATTERN,
-            fields: [LOG_LEVEL_FIELD],
-          },
-          field: LOG_LEVEL_FIELD,
-          query: '',
-        });
-        setLevelValues(values.sort());
-      } catch (e) {
-        setLevelValues([]);
-      }
-      setIsLoading(false);
-    };
-    fetchValues();
-  }, [data.autocomplete]);
 
   return (
     <EuiPopover
@@ -46,8 +23,7 @@ export const LogLevelFilter: React.FunctionComponent<{
           iconType="arrowDown"
           onClick={() => setIsOpen(true)}
           isSelected={isOpen}
-          isLoading={isLoading}
-          numFilters={levelValues.length}
+          numFilters={LEVEL_VALUES.length}
           hasActiveFilters={selectedLevels.length > 0}
           numActiveFilters={selectedLevels.length}
         >
@@ -60,7 +36,7 @@ export const LogLevelFilter: React.FunctionComponent<{
       closePopover={() => setIsOpen(false)}
       panelPaddingSize="none"
     >
-      {levelValues.map((level) => (
+      {LEVEL_VALUES.map((level) => (
         <EuiFilterSelectItem
           checked={selectedLevels.includes(level) ? 'on' : undefined}
           key={level}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
index 5e368ef23bbaf..7879c969d644a 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/select_log_level.tsx
@@ -12,6 +12,8 @@ import { Agent } from '../../../../../types';
 import { sendPostAgentAction, useStartServices } from '../../../../../hooks';
 import { AGENT_LOG_LEVELS, DEFAULT_LOG_LEVEL } from './constants';
 
+const LEVEL_VALUES = Object.values(AGENT_LOG_LEVELS);
+
 export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
   const { notifications } = useStartServices();
   const [isLoading, setIsLoading] = useState(false);
@@ -38,7 +40,7 @@ export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
         setAgentLogLevel(selectedLogLevel);
         notifications.toasts.addSuccess(
           i18n.translate('xpack.fleet.agentLogs.selectLogLevel.successText', {
-            defaultMessage: 'Changed agent logging level to "{logLevel}".',
+            defaultMessage: `Changed agent logging level to '{logLevel}'.`,
             values: {
               logLevel: selectedLogLevel,
             },
@@ -46,7 +48,9 @@ export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
         );
       } catch (error) {
         notifications.toasts.addError(error, {
-          title: 'Error',
+          title: i18n.translate('xpack.fleet.agentLogs.selectLogLevel.errorTitleText', {
+            defaultMessage: 'Error updating agent logging level',
+          }),
         });
       }
       setIsLoading(false);
@@ -74,12 +78,7 @@ export const SelectLogLevel: React.FC<{ agent: Agent }> = memo(({ agent }) => {
           onChange={(event) => {
             setSelectedLogLevel(event.target.value);
           }}
-          options={[
-            { text: AGENT_LOG_LEVELS.ERROR, value: AGENT_LOG_LEVELS.ERROR },
-            { text: AGENT_LOG_LEVELS.WARNING, value: AGENT_LOG_LEVELS.WARNING },
-            { text: AGENT_LOG_LEVELS.INFO, value: AGENT_LOG_LEVELS.INFO },
-            { text: AGENT_LOG_LEVELS.DEBUG, value: AGENT_LOG_LEVELS.DEBUG },
-          ]}
+          options={LEVEL_VALUES.map((level) => ({ text: level, value: level }))}
         />
       </EuiFlexItem>
       {agentLogLevel !== selectedLogLevel && (
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
index 45017ac8532da..1a556581c9ec3 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
-import { EuiHealth, EuiToolTip } from '@elastic/eui';
+import { EuiHealth, EuiBadge, EuiToolTip } from '@elastic/eui';
 import { Agent } from '../../../types';
 
 interface Props {
@@ -14,9 +14,9 @@ interface Props {
 
 const Status = {
   Online: (
-    <EuiHealth color="success">
-      <FormattedMessage id="xpack.fleet.agentHealth.onlineStatusText" defaultMessage="Online" />
-    </EuiHealth>
+    <EuiBadge color="secondary">
+      <FormattedMessage id="xpack.fleet.agentHealth.healthyStatusText" defaultMessage="Healthy" />
+    </EuiBadge>
   ),
   Offline: (
     <EuiHealth color="subdued">
@@ -89,10 +89,9 @@ function getStatusComponent(agent: Agent): React.ReactElement {
   }
 }
 
-export const AgentHealth: React.FunctionComponent<Props> = ({ agent }) => {
+export const AgentHealth: React.FunctionComponent<Props> = ({ agent, ...props }) => {
   const { last_checkin: lastCheckIn } = agent;
   const msLastCheckIn = new Date(lastCheckIn || 0).getTime();
-
   return (
     <EuiToolTip
       position="top"