vitess.io/vitess@v0.16.2/web/vtadmin/src/components/charts/TabletQPSChart.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import Highcharts from 'highcharts';
    18  import { useMemo } from 'react';
    19  
    20  import { useExperimentalTabletDebugVars } from '../../hooks/api';
    21  import { getQPSTimeseries, QPS_REFETCH_INTERVAL } from '../../util/tabletDebugVars';
    22  import { mergeOptions } from './chartOptions';
    23  import { Timeseries } from './Timeseries';
    24  
    25  interface Props {
    26      alias: string;
    27      clusterID: string;
    28  }
    29  
    30  export const TabletQPSChart = ({ alias, clusterID }: Props) => {
    31      const { data: debugVars, ...query } = useExperimentalTabletDebugVars(
    32          { alias, clusterID },
    33          {
    34              refetchInterval: QPS_REFETCH_INTERVAL,
    35              refetchIntervalInBackground: true,
    36          }
    37      );
    38  
    39      const options = useMemo(() => {
    40          const tsdata = getQPSTimeseries(debugVars?.data, query.dataUpdatedAt);
    41  
    42          const series: Highcharts.SeriesOptionsType[] = Object.entries(tsdata).map(([name, data]) => ({
    43              data,
    44              name,
    45              type: 'line',
    46          }));
    47  
    48          return mergeOptions({ series });
    49      }, [debugVars, query.dataUpdatedAt]);
    50  
    51      return <Timeseries isLoading={query.isLoading} options={options} />;
    52  };