github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/EntityStateStatItem.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, { useEffect, useState } from "react";
    18  import { Loader, Box } from "mds";
    19  import { useSelector } from "react-redux";
    20  import { widgetDetailsToPanel } from "../utils";
    21  import { ErrorResponseHandler } from "../../../../../common/types";
    22  import { IDashboardPanel } from "../types";
    23  import { setErrorSnackMessage } from "../../../../../systemSlice";
    24  import { AppState, useAppDispatch } from "../../../../../store";
    25  import api from "../../../../../common/api";
    26  
    27  const EntityStateStatItem = ({
    28    panelItem,
    29    timeStart,
    30    timeEnd,
    31    apiPrefix,
    32    statLabel,
    33  }: {
    34    panelItem: IDashboardPanel;
    35    timeStart: any;
    36    timeEnd: any;
    37    apiPrefix: string;
    38    statLabel: any;
    39  }) => {
    40    const dispatch = useAppDispatch();
    41    const [loading, setLoading] = useState<boolean>(false);
    42    const [data, setData] = useState<string>("");
    43    const widgetVersion = useSelector(
    44      (state: AppState) => state.dashboard.widgetLoadVersion,
    45    );
    46  
    47    useEffect(() => {
    48      setLoading(true);
    49    }, [widgetVersion]);
    50  
    51    useEffect(() => {
    52      if (loading) {
    53        let stepCalc = 0;
    54        if (timeStart !== null && timeEnd !== null) {
    55          const secondsInPeriod =
    56            timeEnd.toUnixInteger() - timeStart.toUnixInteger();
    57          const periods = Math.floor(secondsInPeriod / 60);
    58  
    59          stepCalc = periods < 1 ? 15 : periods;
    60        }
    61  
    62        api
    63          .invoke(
    64            "GET",
    65            `/api/v1/${apiPrefix}/info/widgets/${
    66              panelItem.id
    67            }/?step=${stepCalc}&${
    68              timeStart !== null ? `&start=${timeStart.toUnixInteger()}` : ""
    69            }${timeStart !== null && timeEnd !== null ? "&" : ""}${
    70              timeEnd !== null ? `end=${timeEnd.toUnixInteger()}` : ""
    71            }`,
    72          )
    73          .then((res: any) => {
    74            const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
    75            setData(widgetsWithValue.data);
    76            setLoading(false);
    77          })
    78          .catch((err: ErrorResponseHandler) => {
    79            dispatch(setErrorSnackMessage(err));
    80            setLoading(false);
    81          });
    82      }
    83    }, [loading, panelItem, timeEnd, timeStart, dispatch, apiPrefix]);
    84  
    85    let toRender = loading ? (
    86      <Box
    87        sx={{
    88          width: "100%",
    89          paddingTop: "5px",
    90          textAlign: "center",
    91          margin: "auto",
    92        }}
    93      >
    94        <Loader style={{ width: 12, height: 12 }} />
    95      </Box>
    96    ) : (
    97      <Box>
    98        <Box className="stat-value">{data}</Box>
    99        {statLabel}
   100      </Box>
   101    );
   102  
   103    return toRender;
   104  };
   105  
   106  export default EntityStateStatItem;