vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/topology/Topology.tsx (about)

     1  /**
     2   * Copyright 2022 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 * as 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 { DataCell } from '../../dataTable/DataCell';
    24  import { ContentContainer } from '../../layout/ContentContainer';
    25  import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
    26  import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
    27  import { Link } from 'react-router-dom';
    28  
    29  const TopologyLink: React.FC<{ clusterID: string }> = ({ clusterID, children }) => {
    30      const to = {
    31          pathname: `/topology/${clusterID}`,
    32      };
    33  
    34      return (
    35          <Link className="font-bold" to={to}>
    36              {children}
    37          </Link>
    38      );
    39  };
    40  export const Topology = () => {
    41      useDocumentTitle('Topology');
    42      const { data } = useClusters();
    43  
    44      const rows = React.useMemo(() => {
    45          return orderBy(data, ['name']);
    46      }, [data]);
    47  
    48      const renderRows = (rows: pb.Cluster[]) =>
    49          rows.map((cluster, idx) => (
    50              <tr key={idx}>
    51                  <DataCell>{cluster.name}</DataCell>
    52                  <DataCell>{cluster.id}</DataCell>
    53                  <DataCell>
    54                      <TopologyLink clusterID={cluster.id}>View Topology</TopologyLink>
    55                  </DataCell>
    56              </tr>
    57          ));
    58  
    59      return (
    60          <div>
    61              <WorkspaceHeader>
    62                  <WorkspaceTitle>Topology</WorkspaceTitle>
    63              </WorkspaceHeader>
    64  
    65              <ContentContainer>
    66                  <div className="max-w-screen-sm">
    67                      <div className="text-xl font-bold">Clusters</div>
    68                      <DataTable columns={['Name', 'Id', 'Topology']} data={rows} renderRows={renderRows} />
    69                  </div>
    70              </ContentContainer>
    71          </div>
    72      );
    73  };