Skip to content

Commit 2542744

Browse files
bert-ebert-e
committed
Merge branch 'improvement/replace-global-health-bar' into tmp/octopus/w/132.0/improvement/replace-global-health-bar
2 parents 6d59991 + 45d849d commit 2542744

File tree

10 files changed

+1952
-3489
lines changed

10 files changed

+1952
-3489
lines changed

‎shell-ui/jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
transformIgnorePatterns: [
3-
'/node_modules/(?!vega-lite|@scality|pretty-bytes)',
3+
'/node_modules/(?!vega-lite|@scality|pretty-bytes|uuid)',
44
],
55
setupFilesAfterEnv: ['./src/setupTests.ts'],
66
clearMocks: true,

‎shell-ui/package-lock.json‎

Lines changed: 1780 additions & 3286 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shell-ui/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"ts-node": "^10.9.2"
4646
},
4747
"dependencies": {
48-
"@scality/core-ui": "0.171.0",
48+
"@scality/core-ui": "0.177.0",
4949
"@scality/module-federation": "^1.4.1",
5050
"downshift": "^8.0.0",
5151
"history": "^5.3.0",
@@ -62,5 +62,8 @@
6262
"styled-components": "^5.3.11",
6363
"typescript": "^5.6.3",
6464
"zod": "^4.0.17"
65+
},
66+
"optionalDependencies": {
67+
"@rspack/binding-linux-x64-musl": "^1.5.8"
6568
}
6669
}

‎ui/package-lock.json‎

Lines changed: 45 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@hookform/resolvers": "^3.1.0",
88
"@js-temporal/polyfill": "^0.4.4",
99
"@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721",
10-
"@scality/core-ui": "0.171.0",
10+
"@scality/core-ui": "0.177.0",
1111
"@scality/module-federation": "^1.4.1",
1212
"axios": "^0.21.1",
1313
"formik": "2.2.5",

‎ui/src/components/DashboardGlobalHealth.tsx‎

Lines changed: 46 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ import {
55
EmphaseText,
66
LargerText,
77
SmallerText,
8-
Tooltip,
98
StatusWrapper,
109
Loader,
1110
AppContainer,
1211
spacing,
1312
Stack,
14-
Icon,
13+
IconHelp,
1514
} from '@scality/core-ui';
16-
import { GlobalHealthBar } from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBar.component';
17-
15+
import {
16+
Alert,
17+
GlobalHealthBar as GlobalHealthBarRecharts,
18+
} from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBarRecharts.component';
1819
import {
1920
highestAlertToStatus,
2021
useAlertLibrary,
@@ -38,12 +39,16 @@ const PlatformStatusIcon = styled.div`
3839
font-size: 2rem;
3940
`;
4041

42+
const StyledEmphaseText = styled(EmphaseText)`
43+
letter-spacing: ${spacing.r2};
44+
`;
45+
4146
const DashboardGlobalHealth = () => {
4247
const intl = useIntl();
4348
const { startingTimeISO, currentTimeISO } = useStartingTimeStamp();
4449
const alertsLibrary = useAlertLibrary();
4550
const { duration } = useMetricsTimeSpan();
46-
const { data: alertSegments, status: historyAlertStatus } = useQuery(
51+
const { data: alerts, status: historyAlertStatus } = useQuery(
4752
getClusterAlertSegmentQuery(duration),
4853
);
4954
const platformHighestSeverityAlert = useHighestSeverityAlerts(
@@ -68,87 +73,63 @@ const DashboardGlobalHealth = () => {
6873
</Box>
6974
<Box flex="2">
7075
<HealthBarContainer>
71-
<div
76+
<Stack
7277
style={{
7378
display: 'flex',
7479
alignItems: 'center',
7580
}}
81+
gap="r20"
7682
>
77-
<Box
78-
style={{
79-
display: 'flex',
80-
alignItems: 'center',
81-
}}
82-
mr={20}
83-
>
84-
<Box
85-
mr={8}
86-
style={{
87-
letterSpacing: spacing.r2,
88-
}}
89-
>
90-
<EmphaseText>Global Health</EmphaseText>
91-
</Box>
83+
<StyledEmphaseText>Global Health</StyledEmphaseText>
9284

93-
<Tooltip
94-
placement="bottom"
95-
overlay={
96-
<SmallerText>
97-
{intl
98-
.formatMessage({
99-
id: 'global_health_explanation',
100-
})
101-
.split('\n')
102-
.map((line, key) => (
103-
<Box key={`globalheathexplanation-${key}`} mb={8}>
104-
{line}
105-
</Box>
106-
))}
107-
</SmallerText>
108-
}
109-
overlayStyle={{
110-
minWidth: '30rem',
111-
display: 'block',
112-
}}
113-
>
114-
<Icon name="Info" color="buttonSecondary" />
115-
</Tooltip>
85+
<IconHelp
86+
placement="bottom"
87+
tooltipMessage={
88+
<Stack direction="vertical" gap="r4">
89+
{intl
90+
.formatMessage({
91+
id: 'global_health_explanation',
92+
})
93+
.split('\n')
94+
.map((line, key) => (
95+
<SmallerText key={`globalheathexplanation-${key}`}>
96+
{line}
97+
</SmallerText>
98+
))}
99+
</Stack>
100+
}
101+
/>
102+
<CircleStatus status={platformStatus} />
103+
</Stack>
104+
105+
{historyAlertStatus === 'loading' ? (
106+
<Box ml={8} height={50}>
107+
<Loader size={'larger'} />
116108
</Box>
117-
<EmphaseText>
118-
<CircleStatus status={platformStatus} />
119-
</EmphaseText>
120-
{historyAlertStatus === 'loading' && (
121-
<Box ml={8}>
122-
<Loader size={'larger'} />
123-
</Box>
124-
)}
125-
</div>
126-
<Box mr={20}>
127-
<GlobalHealthBar
109+
) : (
110+
<GlobalHealthBarRecharts
128111
id={'platform_globalhealth'}
129112
alerts={
130113
historyAlertStatus === 'error'
131-
? [
114+
? ([
132115
{
133116
startsAt: startingTimeISO,
134117
endsAt: currentTimeISO,
135118
severity: 'unavailable',
136119
description:
137120
'Failed to load alert history for the selected period',
138121
},
139-
]
140-
: alertSegments || []
122+
] as Alert[])
123+
: alerts || []
141124
}
142-
start={startingTimeISO}
143-
end={currentTimeISO}
125+
start={new Date(startingTimeISO)}
126+
end={new Date(currentTimeISO)}
144127
/>
145-
</Box>
128+
)}
146129
</HealthBarContainer>
147130
</Box>
148-
<Box flex="2">
149-
<Box ml={24}>
150-
<DashboardAlerts />
151-
</Box>
131+
<Box flex="2" ml={24}>
132+
<DashboardAlerts />
152133
</Box>
153134
</Stack>
154135
</AppContainer.OverallSummary>

0 commit comments

Comments
 (0)