Added virtualized list to pod logs in operator console (#1517)

Also removed some execution time errors
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx

@@ -257,11 +257,11 @@ const TenantSummary = ({
       <StorageSummary tenant={tenant} classes={classes} />
 
       <Grid container>
-        <Grid xs={12} sm={12} md={8} container>
-          <Grid xs={12}>
+        <Grid item xs={12} sm={12} md={8}>
+          <Grid item xs={12}>
             <LabelValuePair label={"State:"} value={tenant?.currentState} />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label="MinIO:"
               value={
@@ -281,7 +281,7 @@ const TenantSummary = ({
               }
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Endpoint:"}
               value={
@@ -296,7 +296,7 @@ const TenantSummary = ({
               }
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Console:"}
               value={
@@ -312,11 +312,11 @@ const TenantSummary = ({
             />
           </Grid>
         </Grid>
-        <Grid xs={12} sm={12} md={4} container>
-          <Grid xs={12}>
+        <Grid item xs={12} sm={12} md={4}>
+          <Grid item xs={12}>
             <LabelValuePair label={"Instances:"} value={instances} />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Clusters:"}
               value={poolCount}
@@ -327,7 +327,7 @@ const TenantSummary = ({
               }}
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label="Total Drives:"
               value={volumes}
@@ -338,15 +338,15 @@ const TenantSummary = ({
               }}
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Write Quorum:"}
               value={
                 tenant?.status?.write_quorum ? tenant?.status?.write_quorum : 0
               }
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Drives Online:"}
               value={
@@ -361,7 +361,7 @@ const TenantSummary = ({
               }}
             />
           </Grid>
-          <Grid xs={12}>
+          <Grid item xs={12}>
             <LabelValuePair
               label={"Drives Offline:"}
               value={

portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx

@@ -17,13 +17,15 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
+import { CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { TextField } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import InputAdornment from "@mui/material/InputAdornment";
 import api from "../../../../../common/api";
+import SearchIcon from "../../../../../icons/SearchIcon";
 import {
   actionsTray,
   buttonsStyles,
@@ -33,7 +35,7 @@ import {
 import { setErrorSnackMessage } from "../../../../../actions";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import { AppState } from "../../../../../store";
-import SearchIcon from "../../../../../icons/SearchIcon";
+import { AutoSizer } from "react-virtualized";
 
 interface IPodLogsProps {
   classes: any;
@@ -69,6 +71,7 @@ const styles = (theme: Theme) =>
     },
     ansidefault: {
       color: "#000",
+      lineHeight: "16px",
     },
     highlight: {
       "& span": {
@@ -91,6 +94,11 @@ const PodLogs = ({
   const [logLines, setLogLines] = useState<string[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const cache = new CellMeasurerCache({
+    minWidth: 5,
+    fixedHeight: false,
+  });
+
   useEffect(() => {
     if (propLoading) {
       setLoading(true);
@@ -104,6 +112,9 @@ const PodLogs = ({
   }, [loadingTenant]);
 
   const renderLog = (logMessage: string, index: number) => {
+    if (!logMessage) {
+      return null;
+    }
     // remove any non ascii characters, exclude any control codes
     logMessage = logMessage.replace(/([^\x20-\x7F])/g, "");
 
@@ -144,10 +155,6 @@ const PodLogs = ({
     }
   };
 
-  const renderLines = logLines.map((m, i) => {
-    return renderLog(m, i);
-  });
-
   useEffect(() => {
     if (loading) {
       api
@@ -166,6 +173,26 @@ const PodLogs = ({
     }
   }, [loading, podName, namespace, tenant, setErrorSnackMessage]);
 
+  function cellRenderer({ columnIndex, key, parent, index, style }: any) {
+    return (
+      <CellMeasurer
+        cache={cache}
+        columnIndex={columnIndex}
+        key={key}
+        parent={parent}
+        rowIndex={index}
+      >
+        <div
+          style={{
+            ...style,
+          }}
+        >
+          {renderLog(logLines[index], index)}
+        </div>
+      </CellMeasurer>
+    );
+  }
+
   return (
     <React.Fragment>
       <Grid item xs={12} className={classes.actionsTray}>
@@ -193,7 +220,22 @@ const PodLogs = ({
       </Grid>
       <Grid item xs={12}>
         <Paper>
-          <div className={classes.logList}>{renderLines}</div>
+          <div className={classes.logList}>
+            {logLines.length >= 1 && (
+              <AutoSizer>
+                {({ width, height }) => (
+                  <List
+                    rowHeight={(item) => cache.rowHeight(item)}
+                    overscanRowCount={15}
+                    rowCount={logLines.length}
+                    rowRenderer={cellRenderer}
+                    width={width}
+                    height={height}
+                  />
+                )}
+              </AutoSizer>
+            )}
+          </div>
         </Paper>
       </Grid>
     </React.Fragment>