somandal commented on code in PR #15331:
URL: https://github.com/apache/pinot/pull/15331#discussion_r2012441309


##########
pinot-controller/src/main/resources/app/components/Homepage/Operations/RebalanceServer/RebalanceServerResponses/RebalanceServerPreChecksResponse.tsx:
##########
@@ -0,0 +1,43 @@
+import {Grid, Typography} from "@material-ui/core";
+import {RebalanceServerSection} from "../RebalanceServerSection";
+import Alert from "@material-ui/lab/Alert";
+import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
+import {Cancel, CheckCircle} from "@material-ui/icons";
+import React from "react";
+import {RebalanceServerResponseLabelValue} from 
"./RebalanceServerResponseLabelValue";
+import {RebalanceServerResponseCard} from "./RebalanceServerResponseCard";
+
+export const RebalanceServerPreChecksResponse = ({ response }) => {
+    const numberOfPreChecksPassing = Object.keys(response.preChecksResult ?? 
{})
+        .filter(result => response.preChecksResult[result].preCheckStatus === 
'PASS').length;
+    const totalNumberOfPreChecks = Object.keys(response.preChecksResult ?? 
{}).length;
+    return (
+        <Grid item xs={12}>
+            <RebalanceServerResponseCard>
+                <RebalanceServerSection
+                    canHideSection
+                    sectionTitle={"Pre Checks Result"}
+                    additionalSectionTitle={
+                        <Typography variant='body2' style={{ color: 
numberOfPreChecksPassing === totalNumberOfPreChecks ? 'green' : 'red' }}>
+                            {numberOfPreChecksPassing} / 
{totalNumberOfPreChecks}
+                        </Typography>
+                    }>
+                    <Alert style={{ marginBottom: 20 }} color='info' 
icon={<InfoOutlinedIcon fontSize='small' />}>
+                        <Typography variant='caption'>
+                            These are non-blocking checks.
+                            Rebalance can be run even if these fail. Please be 
sure to fix the issues before proceeding with actual rebalance!
+                        </Typography>
+                    </Alert>
+                    <Grid container spacing={2}>
+                        { 
Object.keys(response.preChecksResult).map((preCheckResult, index) => (
+                            <Grid item xs={12} style={{ display: 'flex', 
alignItems: 'flex-start' }} spacing={2}>
+                                
{response.preChecksResult[preCheckResult].preCheckStatus === "PASS" ? 
<CheckCircle style={{ marginRight: 10, marginTop: 5 }} fontSize='small' 
htmlColor='green' /> : <Cancel style={{ marginRight: 10, marginTop: 5 }} 
fontSize='small' color='error' />}

Review Comment:
   will this handle the 3 different types of status?
   - PASS
   - WARN
   - ERROR
   (we should show WARN and ERROR differently - different colors etc)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org

Reply via email to