[Fleet] Fix displaying agent status bar with no agents (#156541)

This commit is contained in:
Nicolas Chaulet 2023-05-03 12:14:55 -04:00 committed by GitHub
parent 8f0103cf16
commit 4301d80d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 8 deletions

View file

@ -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();
});
});

View file

@ -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 <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}
/>
);
};