go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/analysis/frontend/ui/src/components/clusters_table/clusters_table.tsx (about)

     1  // Copyright 2022 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { useEffect } from 'react';
    16  
    17  import Grid from '@mui/material/Grid';
    18  
    19  import LoadErrorAlert from '@/components/load_error_alert/load_error_alert';
    20  import useFetchMetrics from '@/hooks/use_fetch_metrics';
    21  
    22  import CentralizedProgress from '../centralized_progress/centralized_progress';
    23  import ClustersTableContent from './clusters_table_content/clusters_table_content';
    24  import { ClusterTableContextWrapper } from './clusters_table_context';
    25  import ClustersTableForm from './clusters_table_form/clusters_table_form';
    26  import { TIME_INTERVAL_OPTIONS } from './clusters_table_form/clusters_table_interval_selection/clusters_table_interval_selection';
    27  import {
    28    useIntervalParam,
    29    useSelectedMetricsParam,
    30  } from './hooks';
    31  
    32  interface Props {
    33    project: string;
    34  }
    35  
    36  const ClustersTable = ({
    37    project,
    38  }: Props) => {
    39    const {
    40      isLoading,
    41      isSuccess,
    42      data: metrics,
    43      error,
    44    } = useFetchMetrics(project);
    45  
    46    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    47    const [selectedMetrics, updateSelectedMetricsParam] = useSelectedMetricsParam(metrics || []);
    48  
    49    // Set the default order by and the selected metrics
    50    // if there are none in the URL already.
    51    useEffect(() => {
    52      if (!selectedMetrics.length && metrics) {
    53        const defaultMetrics = metrics?.filter((m) => m.isDefault);
    54        updateSelectedMetricsParam(defaultMetrics, true);
    55      }
    56    }, [metrics, selectedMetrics, updateSelectedMetricsParam]);
    57  
    58    const [selectedInterval, updateIntervalParam] = useIntervalParam(TIME_INTERVAL_OPTIONS);
    59  
    60    // Set the default selected interval to be the first interval option
    61    // if there are none in the URL already.
    62    useEffect(() => {
    63      if (!selectedInterval) {
    64        updateIntervalParam(TIME_INTERVAL_OPTIONS[0], true);
    65      }
    66    }, [selectedInterval, updateIntervalParam]);
    67  
    68    return (
    69      <ClusterTableContextWrapper metrics={metrics}>
    70        <Grid container columnGap={2} rowGap={2}>
    71          <ClustersTableForm />
    72          {
    73            error && (
    74              <LoadErrorAlert
    75                entityName="metrics"
    76                error={error}
    77              />
    78            )
    79          }
    80          {
    81            isLoading && (
    82              <CentralizedProgress />
    83            )
    84          }
    85          {
    86            isSuccess && metrics !== undefined && (
    87              <ClustersTableContent
    88                project={project}
    89              />
    90            )
    91          }
    92        </Grid>
    93      </ClusterTableContextWrapper>
    94    );
    95  };
    96  
    97  export default ClustersTable;