Update Icon help and change text

Add unavailable status if alerts can't load

Author: JeanMarcMilletScality

ui/src/components/DashboardGlobalHealth.tsx

@@ -5,15 +5,17 @@ import {
   EmphaseText,
   LargerText,
   SmallerText,
-  Tooltip,
   StatusWrapper,
   Loader,
   AppContainer,
   spacing,
   Stack,
-  Icon,
+  IconHelp,
 } from '@scality/core-ui';
-import { GlobalHealthBar as GlobalHealthBarRecharts } from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBarRecharts.component';
+import {
+  Alert,
+  GlobalHealthBar as GlobalHealthBarRecharts,
+} from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBarRecharts.component';
 import {
   highestAlertToStatus,
   useAlertLibrary,
@@ -80,44 +82,51 @@ const DashboardGlobalHealth = () => {
             >
               <StyledEmphaseText>Global Health</StyledEmphaseText>
 
-              <Tooltip
+              <IconHelp
                 placement="bottom"
-                overlay={
-                  <SmallerText>
+                tooltipMessage={
+                  <Stack direction="vertical" gap="r4">
                     {intl
                       .formatMessage({
                         id: 'global_health_explanation',
                       })
                       .split('\n')
                       .map((line, key) => (
-                        <Box key={`globalheathexplanation-${key}`} mb={8}>
+                        <SmallerText key={`globalheathexplanation-${key}`}>
                           {line}
-                        </Box>
+                        </SmallerText>
                       ))}
-                  </SmallerText>
+                  </Stack>
                 }
-                overlayStyle={{
-                  minWidth: '30rem',
-                  display: 'block',
-                }}
-              >
-                <Icon name="Info" color="buttonSecondary" />
-              </Tooltip>
+              />
               <CircleStatus status={platformStatus} />
             </Stack>
 
-            {historyAlertStatus === 'loading' && (
-              <Box ml={8}>
+            {historyAlertStatus === 'loading' ? (
+              <Box ml={8} height={50}>
                 <Loader size={'larger'} />
               </Box>
+            ) : (
+              <GlobalHealthBarRecharts
+                id={'platform_globalhealth'}
+                alerts={
+                  historyAlertStatus === 'error'
+                    ? // @ts-expect-error - FIXME when you are working on it
+                      ([
+                        {
+                          startsAt: startingTimeISO,
+                          endsAt: currentTimeISO,
+                          severity: 'unavailable',
+                          description:
+                            'Failed to load alert history for the selected period',
+                        },
+                      ] as Alert[])
+                    : alerts || []
+                }
+                start={new Date(startingTimeISO)}
+                end={new Date(currentTimeISO)}
+              />
             )}
-
-            <GlobalHealthBarRecharts
-              id={'platform_globalhealth'}
-              alerts={alerts || []}
-              start={new Date(startingTimeISO)}
-              end={new Date(currentTimeISO)}
-            />
           </HealthBarContainer>
         </Box>
         <Box flex="2" ml={24}>

ui/src/translations/en.json

@@ -183,7 +183,7 @@
   "view_details": "View details",
   "start": "Start",
   "no_data_available_for_metrics": "No data available for displaying the Metrics",
-  "global_health_explanation": "The global health is the overall status of the platform over a specific period.\nThe statuses of the volumes and nodes, the network and the services are monitored.\n A green circle means the platform is healthy.\n A yellow circle means the platform is degraded but not at risk.\n A red circle means the platform is degraded and at risk.\nHover or click on an alert segment on the global health bar for more details.",
+  "global_health_explanation": "The global health is the overall status of the platform over a specific period.\nThe statuses of the volumes and nodes, the network and the services are monitored.\n A green circle means the platform is healthy.\n A yellow circle means the platform is degraded but not at risk.\n A red circle means the platform is degraded and at risk.\nHover on an alert segment on the global health bar for more details.",
   "metric_quantile_explanation": "Displays resource usage statistics for large clusters (8+ nodes).\nQ90 (resp. Q5) is the 90th (resp. 5th) quantile, meaning that 90% (resp. 5%) of the nodes consume less resources than this value.\nQuantiles diverging from the median indicate cluster imbalance with respect to resource usage.\nHover over the chart to identify the nodes that are respectively above and below the Q90 and the Q5 thresholds.",
   "network_quantile_explanation": "Displays bandwidth statistics for large clusters (8+ nodes).\nQ90 (resp. Q5) is the 90th (resp. 5th) quantile, meaning that 90% (resp. 5%) of the nodes consume less bandwidth than this value.\nQuantiles diverging from the median indicate cluster imbalance with respect to network usage.\nHover over the chart to identify the nodes that are respectively above and below the Q90 and the Q5 thresholds.",
   "error_occur_outpassing_threshold": "Sorry an error occurred and we failed to retrieve the nodes outpassing this threshold.",