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

[upgrade assistant] Borealis updates (#205345)

Browse source 
## Summary
Broken out from https://github.com/elastic/kibana/issues/203664

Changes affect rendering of reindexing UI, specifically the progress
indicators.

Before - 

failed
<img width="312" alt="failed"
src="https://github.com/user-attachments/assets/b2444ac9-e2de-4103-9a44-b18877f5f609"
/>
canceled
<img width="303" alt="canceled"
src="https://github.com/user-attachments/assets/c1358f1e-14c1-4b1d-8870-f32d264e833f"
/>
paused
<img width="307" alt="paused"
src="https://github.com/user-attachments/assets/9731a466-fc79-41d1-94e1-da0500dbb1c4"
/>
completed
<img width="312" alt="completed"
src="https://github.com/user-attachments/assets/8d9c7037-dc33-4761-aac3-4b69d31fb72e"
/>

After 

failed
<img width="307" alt="Screenshot 2025-01-01 at 9 42 57 PM"
src="https://github.com/user-attachments/assets/54ad6a52-ffa4-4cc4-b19f-8620ff4754d1"
/>
canceled
<img width="300" alt="Screenshot 2025-01-01 at 9 39 14 PM"
src="https://github.com/user-attachments/assets/2dabb927-aed7-4e82-9a4c-3973ea6f8c36"
/>
paused
<img width="299" alt="Screenshot 2025-01-01 at 9 38 22 PM"
src="https://github.com/user-attachments/assets/4f359c42-ee1f-4708-a66b-d9eda7271a15"
/>
complete
<img width="306" alt="Screenshot 2025-01-01 at 9 37 17 PM"
src="https://github.com/user-attachments/assets/c330ee41-d401-4076-afa0-8ffb95d3a775"
/>
This commit is contained in:
Matthew Kime 2025-01-05 23:02:53 -06:00 • committed by GitHub
parent 211d4a6889
commit 3003d5cc43
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/platform/plugins/private/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss
View file

@ -11,25 +11,10 @@
margin-right: $euiSizeM;
}
$stepStatusToCallOutColor: (
failed: $euiColorDanger,
complete: $euiColorSuccess,
paused: $euiColorWarning,
cancelled: $euiColorWarning,
);
.upgStepProgress__status--circle {
text-align: center;
border-radius: $euiSizeM;
line-height: $euiSize - 2px;
@each $status, $callOutColor in $stepStatusToCallOutColor {
&-#{$status} {
$statusBg: tintOrShade($callOutColor, 90%, 70%);
color: shadeOrTint(makeHighContrastColor($callOutColor, $statusBg), 0, 20%);
background-color: $statusBg;
}
}
}
.upgStepProgress__title {

36
x-pack/platform/plugins/private/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/step_progress.tsx
View file

@ -8,38 +8,64 @@
import classNames from 'classnames';
import React, { Fragment, ReactNode } from 'react';
import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
import { EuiIcon, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import './_step_progress.scss';
type STATUS = 'incomplete' | 'inProgress' | 'complete' | 'failed' | 'paused' | 'cancelled';
const StepStatus: React.FunctionComponent<{ status: STATUS; idx: number }> = ({ status, idx }) => {
const { euiTheme } = useEuiTheme();
if (status === 'incomplete') {
return <span className="upgStepProgress__status">{idx + 1}.</span>;
} else if (status === 'inProgress') {
return <EuiLoadingSpinner size="m" className="upgStepProgress__status" />;
} else if (status === 'complete') {
return (
<span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-complete">
<span
className="upgStepProgress__status upgStepProgress__status--circle"
css={css`
color: ${euiTheme.colors.textSuccess};
background-color: ${euiTheme.colors.backgroundBaseSuccess};
`}
>
<EuiIcon type="check" size="s" />
</span>
);
} else if (status === 'paused') {
return (
<span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-paused">
<span
className="upgStepProgress__status upgStepProgress__status--circle"
css={css`
color: ${euiTheme.colors.textWarning};
background-color: ${euiTheme.colors.backgroundBaseWarning};
`}
>
<EuiIcon type="pause" size="s" />
</span>
);
} else if (status === 'cancelled') {
return (
<span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-cancelled">
<span
className="upgStepProgress__status upgStepProgress__status--circle"
css={css`
color: ${euiTheme.colors.textWarning};
background-color: ${euiTheme.colors.backgroundBaseWarning};
`}
>
<EuiIcon type="cross" size="s" />
</span>
);
} else if (status === 'failed') {
return (
<span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-failed">
<span
className="upgStepProgress__status upgStepProgress__status--circle"
css={css`
color: ${euiTheme.colors.textDanger};
background-color: ${euiTheme.colors.backgroundBaseDanger};
`}
>
<EuiIcon type="cross" size="s" />
</span>
);