From 31f754c86005a2116a0acbfcf5675c9757eb69db Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Wed, 3 May 2023 09:28:22 -0400
Subject: [PATCH 1/2] [Fleet] Fix displaying agent status bar with no agents

---
 .../components/status_bar.test.tsx            | 46 +++++++++++++++++++
 .../agent_list_page/components/status_bar.tsx | 33 +++++++++----
 2 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.test.tsx

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.test.tsx
new file mode 100644
index 0000000000000..4b19e86703f1b
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.test.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { createFleetTestRendererMock } from '../../../../../../mock';
+
+import { AgentStatusBar } from './status_bar';
+
+describe('AgentStatusBar', () => {
+  it('should render the status bar if there is some agent displayed', () => {
+    const renderer = createFleetTestRendererMock();
+    const res = renderer.render(
+      <AgentStatusBar
+        agentStatus={
+          {
+            healthy: 10,
+            inactive: 0,
+            offline: 0,
+          } as any
+        }
+      />
+    );
+    expect(res.queryByTestId('agentStatusBar')).not.toBeNull();
+  });
+
+  it('should not render the status bar if there is no agent displayed', () => {
+    const renderer = createFleetTestRendererMock();
+    const res = renderer.render(
+      <AgentStatusBar
+        agentStatus={
+          {
+            healthy: 0,
+            inactive: 0,
+            offline: 0,
+          } as any
+        }
+      />
+    );
+    expect(res.queryByTestId('agentStatusBar')).toBeNull();
+  });
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
index 728134768b799..d8ee293762e99 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { EuiColorPaletteDisplay } from '@elastic/eui';
+import { EuiColorPaletteDisplay, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { AGENT_STATUSES, getColorForAgentStatus } from '../../services/agent_status';
@@ -35,13 +35,30 @@ export const AgentStatusBar: React.FC<{
       return acc;
     }, [] as Array<{ stop: number; color: string }>);
   }, [agentStatus]);
+
+  // const totalAgents = useMemo(() => {
+  //   return AGENT_STATUSES.reduce((acc, status) => {
+  //     const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
+  //     acc.push({
+  //       stop: previousStop + (agentStatus[status] || 0),
+  //       color: getColorForAgentStatus(status),
+  //     });
+  //     return acc;
+  //   }, 0);
+  // }, [agentStatus]);
+
+  const hasNoAgent = palette[palette.length - 1].stop === 0;
+
+  if (hasNoAgent) {
+    return <EuiSpacer size="s" />;
+  }
+
   return (
-    <>
-      <StyledEuiColorPaletteDisplay
-        className="ingest-agent-status-bar"
-        size="s"
-        palette={palette}
-      />
-    </>
+    <StyledEuiColorPaletteDisplay
+      data-test-subj="agentStatusBar"
+      className="ingest-agent-status-bar"
+      size="s"
+      palette={palette}
+    />
   );
 };

From bbbcd508d76fecae707c9781238183fcfad8b562 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Wed, 3 May 2023 11:06:35 -0400
Subject: [PATCH 2/2] Fix after review

---
 .../agents/agent_list_page/components/status_bar.tsx  | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
index d8ee293762e99..f4fc01204267b 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
@@ -36,17 +36,6 @@ export const AgentStatusBar: React.FC<{
     }, [] as Array<{ stop: number; color: string }>);
   }, [agentStatus]);
 
-  // const totalAgents = useMemo(() => {
-  //   return AGENT_STATUSES.reduce((acc, status) => {
-  //     const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
-  //     acc.push({
-  //       stop: previousStop + (agentStatus[status] || 0),
-  //       color: getColorForAgentStatus(status),
-  //     });
-  //     return acc;
-  //   }, 0);
-  // }, [agentStatus]);
-
   const hasNoAgent = palette[palette.length - 1].stop === 0;
 
   if (hasNoAgent) {