Skip to content

Improvement/replace global health bar #4658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: development/131.0
Choose a base branch
from
Open

Improvement/replace global health bar #4658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
58b9981
try new chart
JeanMarcMilletScality Sep 10, 2025
ed0ccda
core-ui branch for gloabl helathbar
JeanMarcMilletScality Sep 10, 2025
20095bb
Update Icon help and change text
JeanMarcMilletScality Sep 22, 2025
df7b501
Update core ui to latest version 0.173.0
JeanMarcMilletScality Oct 2, 2025
9a6b5f1
fix test error. Avoid uuid transform by jest
JeanMarcMilletScality Oct 6, 2025
af9951b
Remove unused ts directive
JeanMarcMilletScality Oct 6, 2025
381cf06
Update utility functions to handle potential null values for at-risk …
JeanMarcMilletScality Oct 6, 2025
a8e90f6
better typing and remove unused ts directives
JeanMarcMilletScality Oct 9, 2025
3b445d8
Refactor getSegments logic : use watch point to create the segments i…
JeanMarcMilletScality Oct 9, 2025
4a63c06
fix package-lock
JeanMarcMilletScality Oct 9, 2025
96a64af
fix shell-ui package lock
JeanMarcMilletScality Oct 9, 2025
d374048
install rspack depencdency
JeanMarcMilletScality Oct 9, 2025
620125f
fix test
JeanMarcMilletScality Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion shell-ui/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
transformIgnorePatterns: [
'/node_modules/(?!vega-lite|@scality|pretty-bytes)',
'/node_modules/(?!vega-lite|@scality|pretty-bytes|uuid)',
],
setupFilesAfterEnv: ['./src/setupTests.ts'],
clearMocks: true,
Expand Down
6,028 changes: 2,673 additions & 3,355 deletions shell-ui/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion shell-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"ts-node": "^10.9.2"
},
"dependencies": {
"@scality/core-ui": "0.171.0",
"@rspack/binding-linux-x64-musl": "^1.5.8",
"@scality/core-ui": "0.173.0",
"@scality/module-federation": "^1.4.1",
"downshift": "^8.0.0",
"history": "^5.3.0",
Expand Down
88 changes: 45 additions & 43 deletions ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"@hookform/resolvers": "^3.1.0",
"@js-temporal/polyfill": "^0.4.4",
"@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721",
"@scality/core-ui": "0.171.0",
"@scality/core-ui": "0.173.0",
"@scality/module-federation": "^1.4.1",
"axios": "^0.21.1",
"formik": "2.2.5",
Expand Down
111 changes: 46 additions & 65 deletions ui/src/components/DashboardGlobalHealth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ import {
EmphaseText,
LargerText,
SmallerText,
Tooltip,
StatusWrapper,
Loader,
AppContainer,
spacing,
Stack,
Icon,
IconHelp,
} from '@scality/core-ui';
import { GlobalHealthBar } from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBar.component';

import {
Alert,
GlobalHealthBar as GlobalHealthBarRecharts,
} from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBarRecharts.component';
import {
highestAlertToStatus,
useAlertLibrary,
Expand All @@ -38,12 +39,16 @@ const PlatformStatusIcon = styled.div`
font-size: 2rem;
`;

const StyledEmphaseText = styled(EmphaseText)`
letter-spacing: ${spacing.r2};
`;

const DashboardGlobalHealth = () => {
const intl = useIntl();
const { startingTimeISO, currentTimeISO } = useStartingTimeStamp();
const alertsLibrary = useAlertLibrary();
const { duration } = useMetricsTimeSpan();
const { data: alertSegments, status: historyAlertStatus } = useQuery(
const { data: alerts, status: historyAlertStatus } = useQuery(
getClusterAlertSegmentQuery(duration),
);
const platformHighestSeverityAlert = useHighestSeverityAlerts(
Expand All @@ -68,87 +73,63 @@ const DashboardGlobalHealth = () => {
</Box>
<Box flex="2">
<HealthBarContainer>
<div
<Stack
style={{
display: 'flex',
alignItems: 'center',
}}
gap="r20"
>
<Box
style={{
display: 'flex',
alignItems: 'center',
}}
mr={20}
>
<Box
mr={8}
style={{
letterSpacing: spacing.r2,
}}
>
<EmphaseText>Global Health</EmphaseText>
</Box>
<StyledEmphaseText>Global Health</StyledEmphaseText>

<Tooltip
placement="bottom"
overlay={
<SmallerText>
{intl
.formatMessage({
id: 'global_health_explanation',
})
.split('\n')
.map((line, key) => (
<Box key={`globalheathexplanation-${key}`} mb={8}>
{line}
</Box>
))}
</SmallerText>
}
overlayStyle={{
minWidth: '30rem',
display: 'block',
}}
>
<Icon name="Info" color="buttonSecondary" />
</Tooltip>
<IconHelp
placement="bottom"
tooltipMessage={
<Stack direction="vertical" gap="r4">
{intl
.formatMessage({
id: 'global_health_explanation',
})
.split('\n')
.map((line, key) => (
<SmallerText key={`globalheathexplanation-${key}`}>
{line}
</SmallerText>
))}
</Stack>
}
/>
<CircleStatus status={platformStatus} />
</Stack>

{historyAlertStatus === 'loading' ? (
<Box ml={8} height={50}>
<Loader size={'larger'} />
</Box>
<EmphaseText>
<CircleStatus status={platformStatus} />
</EmphaseText>
{historyAlertStatus === 'loading' && (
<Box ml={8}>
<Loader size={'larger'} />
</Box>
)}
</div>
<Box mr={20}>
<GlobalHealthBar
) : (
<GlobalHealthBarRecharts
id={'platform_globalhealth'}
alerts={
historyAlertStatus === 'error'
? [
? ([
{
startsAt: startingTimeISO,
endsAt: currentTimeISO,
severity: 'unavailable',
description:
'Failed to load alert history for the selected period',
},
]
: alertSegments || []
] as Alert[])
: alerts || []
}
start={startingTimeISO}
end={currentTimeISO}
start={new Date(startingTimeISO)}
end={new Date(currentTimeISO)}
/>
</Box>
)}
</HealthBarContainer>
</Box>
<Box flex="2">
<Box ml={24}>
<DashboardAlerts />
</Box>
<Box flex="2" ml={24}>
<DashboardAlerts />
</Box>
</Stack>
</AppContainer.OverallSummary>
Expand Down
Loading
Loading