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( + + ); + 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( + + ); + 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..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 @@ -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,19 @@ export const AgentStatusBar: React.FC<{ return acc; }, [] as Array<{ stop: number; color: string }>); }, [agentStatus]); + + const hasNoAgent = palette[palette.length - 1].stop === 0; + + if (hasNoAgent) { + return ; + } + return ( - <> - - + ); };