github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/TestWrapper/TestWrapper.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment, useEffect, useState } from "react";
    18  import { DrivesIcon, Loader, SectionTitle, VersionIcon, Grid } from "mds";
    19  import { api } from "api";
    20  import { ServerProperties } from "api/consoleApi";
    21  
    22  interface ITestWrapper {
    23    title: any;
    24    children: any;
    25  }
    26  
    27  const TestWrapper = ({ title, children }: ITestWrapper) => {
    28    const [version, setVersion] = useState<string>("N/A");
    29    const [totalNodes, setTotalNodes] = useState<number>(0);
    30    const [totalDrives, setTotalDrives] = useState<number>(0);
    31    const [loading, setLoading] = useState<boolean>(true);
    32  
    33    useEffect(() => {
    34      if (loading) {
    35        api.admin
    36          .adminInfo({
    37            defaultOnly: true,
    38          })
    39          .then((res) => {
    40            const totalServers = res.data.servers?.length;
    41            setTotalNodes(totalServers || 0);
    42  
    43            if (res.data.servers && res.data.servers.length > 0) {
    44              setVersion(res.data.servers[0].version || "N/A");
    45  
    46              const totalServers = res.data.servers.reduce(
    47                (prevTotal: number, currentElement: ServerProperties) => {
    48                  let c = currentElement.drives
    49                    ? currentElement.drives.length
    50                    : 0;
    51                  return prevTotal + c;
    52                },
    53                0,
    54              );
    55              setTotalDrives(totalServers);
    56            }
    57  
    58            setLoading(false);
    59          })
    60          .catch(() => {
    61            setLoading(false);
    62          });
    63      }
    64    }, [loading]);
    65  
    66    return (
    67      <Grid item xs={12}>
    68        <SectionTitle separator>{title}</SectionTitle>
    69        <Grid item xs={12}>
    70          <Grid
    71            item
    72            xs={12}
    73            sx={{
    74              padding: 0,
    75              marginBottom: 25,
    76            }}
    77          >
    78            <Grid
    79              container
    80              sx={{
    81                padding: 25,
    82              }}
    83            >
    84              {!loading ? (
    85                <Fragment>
    86                  <Grid
    87                    item
    88                    xs={12}
    89                    md={4}
    90                    sx={{
    91                      fontSize: 18,
    92                      display: "flex",
    93                      alignItems: "center",
    94                      "& svg": {
    95                        marginRight: 10,
    96                      },
    97                    }}
    98                  >
    99                    <DrivesIcon /> <strong>{totalNodes}</strong>
   100                    &nbsp;nodes,&nbsp;
   101                    <strong>{totalDrives}</strong>&nbsp; drives
   102                  </Grid>
   103                  <Grid
   104                    item
   105                    xs={12}
   106                    md={4}
   107                    sx={{
   108                      fontSize: 12,
   109                      justifyContent: "center",
   110                      alignSelf: "center",
   111                      alignItems: "center",
   112                      display: "flex",
   113                    }}
   114                  >
   115                    <span
   116                      style={{
   117                        marginRight: 20,
   118                      }}
   119                    >
   120                      <VersionIcon />
   121                    </span>{" "}
   122                    MinIO VERSION&nbsp;<strong>{version}</strong>
   123                  </Grid>
   124                </Fragment>
   125              ) : (
   126                <Fragment>
   127                  <Grid item xs={12} sx={{ textAlign: "center" }}>
   128                    <Loader style={{ width: 25, height: 25 }} />
   129                  </Grid>
   130                </Fragment>
   131              )}
   132            </Grid>
   133          </Grid>
   134          {children}
   135        </Grid>
   136      </Grid>
   137    );
   138  };
   139  
   140  export default TestWrapper;