vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/Clusters.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  import { orderBy } from 'lodash-es';
    17  import React from 'react';
    18  
    19  import { useClusters } from '../../hooks/api';
    20  import { useDocumentTitle } from '../../hooks/useDocumentTitle';
    21  import { DataTable } from '../dataTable/DataTable';
    22  import { vtadmin as pb } from '../../proto/vtadmin';
    23  import { ContentContainer } from '../layout/ContentContainer';
    24  import { WorkspaceHeader } from '../layout/WorkspaceHeader';
    25  import { WorkspaceTitle } from '../layout/WorkspaceTitle';
    26  import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
    27  import ClusterRow from './clusters/ClusterRow';
    28  export const Clusters = () => {
    29      useDocumentTitle('Clusters');
    30      const clustersQuery = useClusters();
    31  
    32      const rows = React.useMemo(() => {
    33          return orderBy(clustersQuery.data, ['name']);
    34      }, [clustersQuery.data]);
    35  
    36      const renderRows = (rows: pb.Cluster[]) =>
    37          rows.map((cluster, idx) => <ClusterRow cluster={cluster} key={`cluster_${idx}`} />);
    38  
    39      return (
    40          <div>
    41              <WorkspaceHeader>
    42                  <WorkspaceTitle>Clusters</WorkspaceTitle>
    43              </WorkspaceHeader>
    44  
    45              <ContentContainer>
    46                  <div className="max-w-screen-sm">
    47                      <DataTable columns={['Name', 'Id', 'Validate']} data={rows} renderRows={renderRows} />
    48                      <QueryLoadingPlaceholder query={clustersQuery} />
    49                  </div>
    50              </ContentContainer>
    51          </div>
    52      );
    53  };