github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][Endpoint] Adjust the colors for entered console commands to the UX mocks (#136580)

Browse source 
* adjust all command execution history entries to set command input `isValid`
* Color the user's command input property to the console output area
This commit is contained in:
Paul Tavares 2022-07-19 10:42:48 -04:00 • committed by GitHub
parent 6ba8013da3
commit 3d3e33c388
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/security_solution/public/management/components/console/components/command_execution_output.tsx
View file

@ -28,7 +28,7 @@ export interface CommandExecutionOutputProps {
item: CommandHistoryItem;
}
export const CommandExecutionOutput = memo<CommandExecutionOutputProps>(
({ item: { command, state, id, enteredAt } }) => {
({ item: { command, state, id, enteredAt, isValid } }) => {
const dispatch = useConsoleStateDispatch();
const RenderComponent = command.commandDefinition.RenderComponent;
const [isLongRunningCommand, setIsLongRunningCommand] = useState(false);
@ -92,7 +92,7 @@ export const CommandExecutionOutput = memo<CommandExecutionOutputProps>(
return (
<CommandOutputContainer>
<div>
<UserCommandInput input={command.input} />
<UserCommandInput input={command.input} isValid={isValid} />
</div>
<div>
{/* UX desire for 12px (current theme): achieved with EuiSpace sizes - s (8px) + xs (4px) */}

59
x-pack/plugins/security_solution/public/management/components/console/components/console_state/state_update_handlers/handle_execute_command.tsx
View file

@ -115,10 +115,12 @@ const cloneCommandDefinitionWithNewRenderComponent = (
const createCommandHistoryEntry = (
command: CommandHistoryItem['command'],
state: CommandHistoryItem['state'] = createCommandExecutionState()
state: CommandHistoryItem['state'] = createCommandExecutionState(),
isValid: CommandHistoryItem['isValid'] = true
): CommandHistoryItem => {
return {
id: uuidV4(),
isValid,
enteredAt: new Date().toISOString(),
command,
state,
@ -143,14 +145,18 @@ export const handleExecuteCommand: ConsoleStoreReducer<
if (!commandDefinition) {
return updateStateWithNewCommandHistoryItem(
state,
createCommandHistoryEntry({
input: parsedInput.input,
args: parsedInput,
commandDefinition: {
...UnknownCommandDefinition,
RenderComponent: UnknownCommand,
createCommandHistoryEntry(
{
input: parsedInput.input,
args: parsedInput,
commandDefinition: {
...UnknownCommandDefinition,
RenderComponent: UnknownCommand,
},
},
})
undefined,
false
)
);
}
@ -185,7 +191,9 @@ export const handleExecuteCommand: ConsoleStoreReducer<
return updateStateWithNewCommandHistoryItem(
state,
createCommandHistoryEntry(
cloneCommandDefinitionWithNewRenderComponent(command, HelpCommandArgument)
cloneCommandDefinitionWithNewRenderComponent(command, HelpCommandArgument),
undefined,
false
)
);
}
@ -203,7 +211,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
defaultMessage: 'Command does not support any arguments',
}
),
})
}),
false
)
);
}
@ -238,7 +247,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
/>
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -265,7 +275,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
)}
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -280,7 +291,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
cloneCommandDefinitionWithNewRenderComponent(command, BadArgument),
createCommandExecutionState({
errorMessage: exclusiveOrErrorMessage,
})
}),
false
)
);
}
@ -309,7 +321,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
)}
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -332,7 +345,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
)}
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -357,7 +371,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
)}
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -381,7 +396,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
})}
</ConsoleCodeBlock>
),
})
}),
false
)
);
} else if (exclusiveOrArgs.length > 0) {
@ -391,7 +407,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
cloneCommandDefinitionWithNewRenderComponent(command, BadArgument),
createCommandExecutionState({
errorMessage: exclusiveOrErrorMessage,
})
}),
false
)
);
} else if (commandDefinition.mustHaveArgs) {
@ -407,7 +424,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
})}
</ConsoleCodeBlock>
),
})
}),
false
)
);
}
@ -423,7 +441,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
cloneCommandDefinitionWithNewRenderComponent(command, BadArgument),
createCommandExecutionState({
errorMessage: validationResult,
})
}),
false
)
);
}

1
x-pack/plugins/security_solution/public/management/components/console/components/console_state/types.ts
View file

@ -79,6 +79,7 @@ export interface InputHistoryItem {
export interface CommandHistoryItem {
id: string;
enteredAt: string;
isValid: boolean;
command: Command;
state: CommandExecutionState;
}

19
x-pack/plugins/security_solution/public/management/components/console/components/user_command_input.tsx
View file

@ -5,8 +5,8 @@
* 2.0.
*/
import React, { memo } from 'react';
import { EuiCode } from '@elastic/eui';
import React, { memo, useMemo } from 'react';
import { EuiCode, EuiTextColor } from '@elastic/eui';
import styled from 'styled-components';
import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
import { useDataTestSubj } from '../hooks/state_selectors/use_data_test_subj';
@ -17,18 +17,19 @@ const StyledEuiCode = styled(EuiCode)`
export interface UserCommandInputProps {
input: string;
isValid?: boolean;
}
export const UserCommandInput = memo<UserCommandInputProps>(({ input }) => {
export const UserCommandInput = memo<UserCommandInputProps>(({ input, isValid = true }) => {
const getTestId = useTestIdGenerator(useDataTestSubj());
const displayInputValue = useMemo(() => {
return isValid ? input : <EuiTextColor>{input}</EuiTextColor>;
}, [input, isValid]);
return (
<StyledEuiCode
language="shell"
transparentBackground={true}
data-test-subj={getTestId('userCommandText')}
>
{input}
<StyledEuiCode transparentBackground={true} data-test-subj={getTestId('userCommandText')}>
{displayInputValue}
</StyledEuiCode>
);
});