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

[SecuritySolutions] Fix delay when enabling risk engine (#166846)

Browse source 
## Summary

Fix delay when enabling risk engine
* Show the loading spinner while the status is fetching. 
* Extract a component from the main render due to high cyclomatic
complexity


**BEFORE** The toggle is off when the loader disappears and some moments
later it toggles on.
![enable risk score
delay](411eec39-a928-4ffb-a66e-f45f87e07bc3)


AFTER The toggle is on when the loader disappears.
![enable risk score delay
fixed](763727f2-34d1-4fdf-ba96-05afe8532c5a)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Pablo Machado 2023-10-03 11:09:04 +02:00 • committed by GitHub
parent d655a918b8
commit 62f17db60c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 77 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

136
x-pack/plugins/security_solution/public/entity_analytics/components/risk_score_enable_section.tsx
View file

@ -82,9 +82,77 @@ const RiskScoreErrorPanel = ({ errors }: { errors: string[] }) => (
</>
);
interface RiskScoreUpdateModalParams {
isLoading: boolean;
isVisible: boolean;
closeModal: () => void;
onConfirm: () => void;
}
const RiskScoreUpdateModal = ({
closeModal,
isLoading,
onConfirm,
isVisible,
}: RiskScoreUpdateModalParams) => {
if (!isVisible) return null;
return (
<EuiModal onClose={closeModal}>
{isLoading ? (
<EuiModalHeader>
<EuiFlexGroup gutterSize="m" alignItems="center">
<EuiLoadingSpinner size="m" />
<EuiModalHeaderTitle>{i18n.UPDATING_RISK_ENGINE}</EuiModalHeaderTitle>
</EuiFlexGroup>
</EuiModalHeader>
) : (
<>
<EuiModalHeader>
<EuiModalHeaderTitle>{i18n.UPDATE_RISK_ENGINE_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<b>{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_USER_HOST_1}</b>
{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_USER_HOST_2}
</p>
<EuiSpacer size="s" />
<p>
<b>{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_DATA_1}</b>
{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_DATA_2}
</p>
</EuiText>
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
color="primary"
data-test-subj="risk-score-update-cancel"
onClick={closeModal}
>
{i18n.UPDATE_RISK_ENGINE_MODAL_BUTTON_NO}
</EuiButtonEmpty>
<EuiButton
color="primary"
data-test-subj="risk-score-update-confirm"
onClick={onConfirm}
fill
>
{i18n.UPDATE_RISK_ENGINE_MODAL_BUTTON_YES}
</EuiButton>
</EuiModalFooter>
</>
)}
</EuiModal>
);
};
export const RiskScoreEnableSection = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const { data: riskEngineStatus } = useRiskEngineStatus();
const { data: riskEngineStatus, isFetching: isStatusLoading } = useRiskEngineStatus();
const initRiskEngineMutation = useInitRiskEngineMutation({
onSettled: () => {
setIsModalVisible(false);
@ -102,7 +170,8 @@ export const RiskScoreEnableSection = () => {
const isLoading =
initRiskEngineMutation.isLoading ||
enableRiskEngineMutation.isLoading ||
disableRiskEngineMutation.isLoading;
disableRiskEngineMutation.isLoading ||
isStatusLoading;
const isUpdateAvailable = riskEngineStatus?.isUpdateAvailable;
const btnIsDisabled = !currentRiskEngineStatus || isLoading;
@ -121,62 +190,6 @@ export const RiskScoreEnableSection = () => {
}
};
let modal;
if (isModalVisible) {
modal = (
<EuiModal onClose={closeModal}>
{initRiskEngineMutation.isLoading ? (
<EuiModalHeader>
<EuiFlexGroup gutterSize="m" alignItems="center">
<EuiLoadingSpinner size="m" />
<EuiModalHeaderTitle>{i18n.UPDATING_RISK_ENGINE}</EuiModalHeaderTitle>
</EuiFlexGroup>
</EuiModalHeader>
) : (
<>
<EuiModalHeader>
<EuiModalHeaderTitle>{i18n.UPDATE_RISK_ENGINE_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<b>{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_USER_HOST_1}</b>
{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_USER_HOST_2}
</p>
<EuiSpacer size="s" />
<p>
<b>{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_DATA_1}</b>
{i18n.UPDATE_RISK_ENGINE_MODAL_EXISTING_DATA_2}
</p>
</EuiText>
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
color="primary"
data-test-subj="risk-score-update-cancel"
onClick={closeModal}
>
{i18n.UPDATE_RISK_ENGINE_MODAL_BUTTON_NO}
</EuiButtonEmpty>
<EuiButton
color="primary"
data-test-subj="risk-score-update-confirm"
onClick={() => initRiskEngineMutation.mutate()}
fill
>
{i18n.UPDATE_RISK_ENGINE_MODAL_BUTTON_YES}
</EuiButton>
</EuiModalFooter>
</>
)}
</EuiModal>
);
}
let initRiskEngineErrors: string[] = [];
if (initRiskEngineMutation.isError) {
@ -219,7 +232,12 @@ export const RiskScoreEnableSection = () => {
<EuiSpacer size="m" />
<EuiFlexItem grow={0}>
{modal}
<RiskScoreUpdateModal
isVisible={isModalVisible}
onConfirm={() => initRiskEngineMutation.mutate()}
isLoading={initRiskEngineMutation.isLoading}
closeModal={closeModal}
/>
<EuiHorizontalRule margin="s" />
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">