github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.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 { connect, useSelector } from "react-redux";
    19  import { IDashboardPanel } from "../types";
    20  import { widgetDetailsToPanel } from "../utils";
    21  import { ErrorResponseHandler } from "../../../../../common/types";
    22  import { representationNumber } from "../../../../../common/utils";
    23  import api from "../../../../../common/api";
    24  import DashboardItemBox from "../../DashboardItemBox";
    25  import BucketsCountItem from "./BucketsCountItem";
    26  import ObjectsCountItem from "./ObjectsCountItem";
    27  import { setErrorSnackMessage } from "../../../../../systemSlice";
    28  import { AppState, useAppDispatch } from "../../../../../store";
    29  
    30  interface ISingleRepWidget {
    31    title: string;
    32    panelItem: IDashboardPanel;
    33    timeStart: any;
    34    timeEnd: any;
    35    propLoading: boolean;
    36  
    37    color?: string;
    38    fillColor?: string;
    39    apiPrefix: string;
    40  }
    41  
    42  const SingleRepWidget = ({
    43    title,
    44    panelItem,
    45    timeStart,
    46    timeEnd,
    47    propLoading,
    48  
    49    apiPrefix,
    50  }: ISingleRepWidget) => {
    51    const dispatch = useAppDispatch();
    52    const [loading, setLoading] = useState<boolean>(false);
    53    const [result, setResult] = useState<IDashboardPanel | null>(null);
    54    const widgetVersion = useSelector(
    55      (state: AppState) => state.dashboard.widgetLoadVersion,
    56    );
    57  
    58    useEffect(() => {
    59      setLoading(true);
    60    }, [widgetVersion]);
    61  
    62    useEffect(() => {
    63      if (loading) {
    64        let stepCalc = 0;
    65        if (timeStart !== null && timeEnd !== null) {
    66          const secondsInPeriod =
    67            timeEnd.toUnixInteger() - timeStart.toUnixInteger();
    68          const periods = Math.floor(secondsInPeriod / 60);
    69  
    70          stepCalc = periods < 1 ? 15 : periods;
    71        }
    72  
    73        api
    74          .invoke(
    75            "GET",
    76            `/api/v1/${apiPrefix}/info/widgets/${
    77              panelItem.id
    78            }/?step=${stepCalc}&${
    79              timeStart !== null ? `&start=${timeStart.toUnixInteger()}` : ""
    80            }${timeStart !== null && timeEnd !== null ? "&" : ""}${
    81              timeEnd !== null ? `end=${timeEnd.toUnixInteger()}` : ""
    82            }`,
    83          )
    84          .then((res: any) => {
    85            const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
    86            setResult(widgetsWithValue);
    87            setLoading(false);
    88          })
    89          .catch((err: ErrorResponseHandler) => {
    90            dispatch(setErrorSnackMessage(err));
    91            setLoading(false);
    92          });
    93      }
    94    }, [loading, panelItem, timeEnd, timeStart, dispatch, apiPrefix]);
    95  
    96    let repNumber = "";
    97  
    98    if (result) {
    99      const resultRep = parseInt(result.innerLabel || "0");
   100  
   101      if (!isNaN(resultRep)) {
   102        repNumber = representationNumber(resultRep);
   103      } else {
   104        repNumber = "0";
   105      }
   106    }
   107  
   108    const renderById = (id: number) => {
   109      if (id === 66) {
   110        return (
   111          <DashboardItemBox>
   112            <BucketsCountItem
   113              loading={loading}
   114              title={title}
   115              value={result ? repNumber : ""}
   116            />
   117          </DashboardItemBox>
   118        );
   119      }
   120      if (id === 44) {
   121        return (
   122          <DashboardItemBox>
   123            <ObjectsCountItem
   124              loading={loading}
   125              title={title}
   126              value={result ? repNumber : ""}
   127            />
   128          </DashboardItemBox>
   129        );
   130      }
   131  
   132      return null;
   133    };
   134  
   135    return renderById(panelItem.id);
   136  };
   137  
   138  const connector = connect(null, {
   139    setErrorSnackMessage: setErrorSnackMessage,
   140  });
   141  
   142  export default connector(SingleRepWidget);