Skip to content

Commit

Permalink
[Fleet] Agent activity bugfixes (#141587)
Browse files Browse the repository at this point in the history 
* fixed activity tour not showing up, changed the order of buttons, made search bar text visible

* fallback for unknown action types
  • Loading branch information
@juliaElastic
juliaElastic authored Sep 23, 2022
1 parent 9da1e79 commit 1114d09
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 94 deletions.
10 changes: 8 additions & 2 deletions x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { useState, useEffect, useMemo } from 'react';

import styled from 'styled-components';
import { fromKueryExpression } from '@kbn/es-query';

import type { FieldSpec } from '@kbn/data-plugin/common';
Expand All @@ -20,6 +20,12 @@ import { INDEX_NAME, AGENTS_PREFIX } from '../constants';

const HIDDEN_FIELDS = [`${AGENTS_PREFIX}.actions`, '_id', '_index'];

const NoWrapQueryStringInput = styled(QueryStringInput)`
.kbnQueryBar__textarea {
white-space: nowrap;
}
`;

interface Props {
value: string;
fieldPrefix?: string;
Expand Down Expand Up @@ -88,7 +94,7 @@ export const SearchBar: React.FunctionComponent<Props> = ({
}, [data.dataViews, fieldPrefix, indexPattern]);

return (
<QueryStringInput
<NoWrapQueryStringInput
iconType="search"
disableLanguageSwitcher={true}
indexPatterns={
Expand Down
79 changes: 38 additions & 41 deletions ...c/applications/fleet/sections/agents/agent_list_page/components/agent_activity_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,55 +27,52 @@ export const AgentActivityButton: React.FC<{
setAgentActivityTourState(showAgentActivityTour);
}, [showAgentActivityTour, setAgentActivityTourState]);

const button = (
<EuiButtonEmpty
onClick={() => {
onClickAgentActivity();
setAgentActivityTourState({ isOpen: false });
}}
data-test-subj="agentActivityButton"
iconType="clock"
>
<FormattedMessage
id="xpack.fleet.agentList.agentActivityButton"
defaultMessage="Agent activity"
/>
</EuiButtonEmpty>
);

const onFinish = () => {
setAgentActivityTourState({ isOpen: false });
setTourAsHidden();
};

return isTourHidden ? (
button
) : (
<EuiTourStep
content={
<EuiText>
return (
<>
<EuiTourStep
content={
<EuiText>
<FormattedMessage
id="xpack.fleet.agentActivityButton.tourContent"
defaultMessage="Review in progress, completed, and scheduled agent action activity history here anytime."
/>
</EuiText>
}
isStepOpen={!isTourHidden && agentActivityTourState.isOpen}
onFinish={onFinish}
minWidth={360}
maxWidth={360}
step={1}
stepsTotal={1}
title={
<FormattedMessage
id="xpack.fleet.agentActivityButton.tourContent"
defaultMessage="Review in progress, completed, and scheduled agent action activity history here anytime."
id="xpack.fleet.agentActivityButton.tourTitle"
defaultMessage="Agent activity history"
/>
</EuiText>
}
isStepOpen={agentActivityTourState.isOpen}
onFinish={onFinish}
minWidth={360}
maxWidth={360}
step={1}
stepsTotal={1}
title={
}
anchorPosition="upCenter"
footerAction={<EuiButtonEmpty onClick={onFinish}>OK</EuiButtonEmpty>}
anchor="#agentActivityButton"
/>
<EuiButtonEmpty
onClick={() => {
onClickAgentActivity();
setAgentActivityTourState({ isOpen: false });
}}
data-test-subj="agentActivityButton"
iconType="clock"
id="agentActivityButton"
>
<FormattedMessage
id="xpack.fleet.agentActivityButton.tourTitle"
defaultMessage="Agent activity history"
id="xpack.fleet.agentList.agentActivityButton"
defaultMessage="Agent activity"
/>
}
anchorPosition="upCenter"
footerAction={<EuiButtonEmpty onClick={onFinish}>OK</EuiButtonEmpty>}
>
{button}
</EuiTourStep>
</EuiButtonEmpty>
</>
);
};
10 changes: 6 additions & 4 deletions ...c/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,8 @@ const actionNames: {
ACTION: { inProgressText: 'Actioning', completedText: 'actioned', cancelledText: 'action' },
};

const getAction = (type?: string) => actionNames[type ?? 'ACTION'] ?? actionNames.ACTION;

const inProgressTitleColor = '#0077CC';

const formattedTime = (time?: string) => {
Expand All @@ -276,7 +278,7 @@ const inProgressTitle = (action: ActionStatus) => (
? action.nbAgentsActioned
: action.nbAgentsActioned - action.nbAgentsAck + ' of ' + action.nbAgentsActioned,
agents: action.nbAgentsActioned === 1 ? 'agent' : 'agents',
inProgressText: actionNames[action.type ?? 'ACTION'].inProgressText,
inProgressText: getAction(action.type).inProgressText,
reassignText:
action.type === 'POLICY_REASSIGN' && action.newPolicyId ? `to ${action.newPolicyId}` : '',
upgradeText: action.type === 'UPGRADE' ? `to version ${action.version}` : '',
Expand Down Expand Up @@ -306,7 +308,7 @@ const ActivityItem: React.FunctionComponent<{ action: ActionStatus }> = ({ actio
? action.nbAgentsAck
: action.nbAgentsAck + ' of ' + action.nbAgentsActioned,
agents: action.nbAgentsActioned === 1 ? 'agent' : 'agents',
completedText: actionNames[action.type ?? 'ACTION'].completedText,
completedText: getAction(action.type).completedText,
}}
/>
</EuiText>
Expand Down Expand Up @@ -384,7 +386,7 @@ const ActivityItem: React.FunctionComponent<{ action: ActionStatus }> = ({ actio
id="xpack.fleet.agentActivityFlyout.cancelledTitle"
defaultMessage="Agent {cancelledText} cancelled"
values={{
cancelledText: actionNames[action.type ?? 'ACTION'].cancelledText,
cancelledText: getAction(action.type).cancelledText,
}}
/>
</EuiText>
Expand All @@ -410,7 +412,7 @@ const ActivityItem: React.FunctionComponent<{ action: ActionStatus }> = ({ actio
id="xpack.fleet.agentActivityFlyout.expiredTitle"
defaultMessage="Agent {expiredText} expired"
values={{
expiredText: actionNames[action.type ?? 'ACTION'].cancelledText,
expiredText: getAction(action.type).cancelledText,
}}
/>
</EuiText>
Expand Down
75 changes: 36 additions & 39 deletions ...c/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,52 +328,49 @@ export const SearchAndFilterBar: React.FunctionComponent<{
</EuiFilterButton>
</EuiFilterGroup>
</EuiFlexItem>
{selectedAgents.length === 0 && (
<EuiFlexItem>
<EuiToolTip
content={
<FormattedMessage
id="xpack.fleet.agentList.addFleetServerButton.tooltip"
defaultMessage="Fleet Server is a component of the Elastic Stack used to centrally manage Elastic Agents"
/>
}
>
<EuiButton onClick={onClickAddFleetServer} data-test-subj="addFleetServerButton">
<FormattedMessage
id="xpack.fleet.agentList.addFleetServerButton"
defaultMessage="Add Fleet Server"
/>
</EuiButton>
</EuiToolTip>
</EuiFlexItem>
)}
<EuiFlexItem>
<AgentActivityButton
onClickAgentActivity={onClickAgentActivity}
showAgentActivityTour={showAgentActivityTour}
/>
</EuiFlexItem>
{selectedAgents.length === 0 && (
<>
<EuiFlexItem>
<EuiToolTip
content={
<FormattedMessage
id="xpack.fleet.agentList.addFleetServerButton.tooltip"
defaultMessage="Fleet Server is a component of the Elastic Stack used to centrally manage Elastic Agents"
/>
}
>
<EuiButton
onClick={onClickAddFleetServer}
data-test-subj="addFleetServerButton"
>
<FormattedMessage
id="xpack.fleet.agentList.addFleetServerButton"
defaultMessage="Add Fleet Server"
/>
</EuiButton>
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem>
<EuiToolTip
content={
<FormattedMessage
id="xpack.fleet.agentList.addAgentButton.tooltip"
defaultMessage="Add Elastic Agents to your hosts to collect data and send it to the Elastic Stack"
/>
}
>
<EuiButton fill onClick={onClickAddAgent} data-test-subj="addAgentButton">
<FormattedMessage
id="xpack.fleet.agentList.addButton"
defaultMessage="Add agent"
/>
</EuiButton>
</EuiToolTip>
</EuiFlexItem>
</>
<EuiFlexItem>
<EuiToolTip
content={
<FormattedMessage
id="xpack.fleet.agentList.addAgentButton.tooltip"
defaultMessage="Add Elastic Agents to your hosts to collect data and send it to the Elastic Stack"
/>
}
>
<EuiButton fill onClick={onClickAddAgent} data-test-subj="addAgentButton">
<FormattedMessage
id="xpack.fleet.agentList.addButton"
defaultMessage="Add agent"
/>
</EuiButton>
</EuiToolTip>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<AgentBulkActions
Expand Down
18 changes: 10 additions & 8 deletions x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,11 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
},
];

const refreshAgents = ({ refreshTags = false }: { refreshTags?: boolean } = {}) => {
fetchData({ refreshTags });
setShowAgentActivityTour({ isOpen: true });
};

return (
<>
{isAgentActivityFlyoutOpen ? (
Expand Down Expand Up @@ -576,7 +581,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
agents={[agentToReassign]}
onClose={() => {
setAgentToReassign(undefined);
fetchData();
refreshAgents();
}}
/>
</EuiPortal>
Expand All @@ -588,7 +593,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
agentCount={1}
onClose={() => {
setAgentToUnenroll(undefined);
fetchData({ refreshTags: true });
refreshAgents({ refreshTags: true });
}}
useForceUnenroll={agentToUnenroll.status === 'unenrolling'}
hasFleetServer={agentToUnenrollHasFleetServer}
Expand All @@ -602,7 +607,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
agentCount={1}
onClose={() => {
setAgentToUpgrade(undefined);
fetchData();
refreshAgents();
}}
/>
</EuiPortal>
Expand All @@ -614,7 +619,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
selectedTags={agentToAddRemoveTags?.tags ?? []}
button={tagsPopoverButton!}
onTagsUpdated={() => {
fetchData();
refreshAgents();
}}
onClosePopover={() => {
setShowTagsAddRemove(false);
Expand Down Expand Up @@ -651,10 +656,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
selectionMode={selectionMode}
currentQuery={kuery}
selectedAgents={selectedAgents}
refreshAgents={({ refreshTags = false }: { refreshTags?: boolean } = {}) => {
Promise.all([fetchData({ refreshTags })]);
setShowAgentActivityTour({ isOpen: true });
}}
refreshAgents={refreshAgents}
onClickAddAgent={() => setEnrollmentFlyoutState({ isOpen: true })}
onClickAddFleetServer={onClickAddFleetServer}
visibleAgents={agents}
Expand Down

0 comments on commit 1114d09

Please sign in to comment.