github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/SimpleWidget.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 styled from "styled-components";
    19  import get from "lodash/get";
    20  import { useSelector } from "react-redux";
    21  import { Loader } from "mds";
    22  import api from "../../../../../common/api";
    23  import { widgetDetailsToPanel } from "../utils";
    24  import { IDashboardPanel } from "../types";
    25  import { ErrorResponseHandler } from "../../../../../common/types";
    26  import { setErrorSnackMessage } from "../../../../../systemSlice";
    27  import { AppState, useAppDispatch } from "../../../../../store";
    28  
    29  interface ISimpleWidget {
    30    iconWidget: any;
    31    title: string;
    32    panelItem: IDashboardPanel;
    33    timeStart: any;
    34    timeEnd: any;
    35    apiPrefix: string;
    36    renderFn?: undefined | null | ((arg: Record<string, any>) => any);
    37  }
    38  
    39  const SimpleWidgetMain = styled.span(({ theme }) => ({
    40    display: "inline-flex",
    41    color: get(theme, "signalColors.main", "#07193E"),
    42    alignItems: "center",
    43    "& .icon": {
    44      color: get(theme, "signalColors.main", "#07193E"),
    45      fill: get(theme, "signalColors.main", "#07193E"),
    46      marginRight: 5,
    47      marginLeft: 12,
    48    },
    49    "& .widgetLabel": {
    50      fontWeight: "bold",
    51      textTransform: "uppercase",
    52      marginRight: 10,
    53    },
    54    "& .widgetValue": {
    55      marginRight: 25,
    56    },
    57  }));
    58  
    59  const SimpleWidget = ({
    60    iconWidget,
    61    title,
    62    panelItem,
    63    timeStart,
    64    timeEnd,
    65    apiPrefix,
    66    renderFn,
    67  }: ISimpleWidget) => {
    68    const dispatch = useAppDispatch();
    69    const [loading, setLoading] = useState<boolean>(false);
    70    const [data, setData] = useState<string>("");
    71    const widgetVersion = useSelector(
    72      (state: AppState) => state.dashboard.widgetLoadVersion,
    73    );
    74  
    75    useEffect(() => {
    76      setLoading(true);
    77    }, [widgetVersion]);
    78  
    79    useEffect(() => {
    80      if (loading) {
    81        let stepCalc = 0;
    82        if (timeStart !== null && timeEnd !== null) {
    83          const secondsInPeriod =
    84            timeEnd.toUnixInteger() - timeStart.toUnixInteger();
    85          const periods = Math.floor(secondsInPeriod / 60);
    86  
    87          stepCalc = periods < 1 ? 15 : periods;
    88        }
    89  
    90        api
    91          .invoke(
    92            "GET",
    93            `/api/v1/${apiPrefix}/info/widgets/${
    94              panelItem.id
    95            }/?step=${stepCalc}&${
    96              timeStart !== null ? `&start=${timeStart.toUnixInteger()}` : ""
    97            }${timeStart !== null && timeEnd !== null ? "&" : ""}${
    98              timeEnd !== null ? `end=${timeEnd.toUnixInteger()}` : ""
    99            }`,
   100          )
   101          .then((res: any) => {
   102            const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
   103            setData(widgetsWithValue.data);
   104            setLoading(false);
   105          })
   106          .catch((err: ErrorResponseHandler) => {
   107            dispatch(setErrorSnackMessage(err));
   108            setLoading(false);
   109          });
   110      }
   111    }, [loading, panelItem, timeEnd, timeStart, dispatch, apiPrefix]);
   112  
   113    if (renderFn) {
   114      return renderFn({
   115        valueToRender: data,
   116        loading,
   117        title,
   118        id: panelItem.id,
   119        iconWidget: iconWidget,
   120      });
   121    }
   122    return (
   123      <Fragment>
   124        {loading && (
   125          <div className={"loadingAlign"}>
   126            <Loader />
   127          </div>
   128        )}
   129        {!loading && (
   130          <SimpleWidgetMain>
   131            <span className={"icon"}>{iconWidget ? iconWidget : null}</span>
   132            <span className={"widgetLabel"}>{title}: </span>
   133            <span className={"widgetValue"}>{data}</span>
   134          </SimpleWidgetMain>
   135        )}
   136      </Fragment>
   137    );
   138  };
   139  
   140  export default SimpleWidget;