go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/pages/builder_page/views_section.tsx (about)

     1  // Copyright 2023 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 { CircularProgress, Link } from '@mui/material';
    16  import { useQuery } from '@tanstack/react-query';
    17  
    18  import { useMiloInternalClient } from '@/common/hooks/prpc_clients';
    19  import { extractProject } from '@/common/tools/utils';
    20  import { BuilderID } from '@/proto/go.chromium.org/luci/buildbucket/proto/builder_common.pb';
    21  import { QueryConsolesRequest } from '@/proto/go.chromium.org/luci/milo/proto/v1/rpc.pb';
    22  
    23  const PAGE_SIZE = 100;
    24  
    25  export interface ViewsSectionProps {
    26    readonly builderId: BuilderID;
    27  }
    28  
    29  export function ViewsSection({ builderId }: ViewsSectionProps) {
    30    const client = useMiloInternalClient();
    31    const { data, error, isError, isLoading } = useQuery(
    32      client.QueryConsoles.query(
    33        QueryConsolesRequest.fromPartial({
    34          predicate: {
    35            builder: builderId,
    36          },
    37          pageSize: PAGE_SIZE,
    38        }),
    39      ),
    40    );
    41  
    42    if (isError) {
    43      throw error;
    44    }
    45  
    46    return (
    47      <>
    48        <h3>Views</h3>
    49        {isLoading ? (
    50          <CircularProgress />
    51        ) : (
    52          <>
    53            <ul>
    54              {data.consoles?.map((c) => {
    55                const project = extractProject(c.realm);
    56                const consoleLabel =
    57                  project === builderId.project ? c.id : `${project}/${c.id}`;
    58                return (
    59                  <li key={consoleLabel}>
    60                    <Link href={`/p/${project}/g/${c.id}`}>{consoleLabel}</Link>
    61                  </li>
    62                );
    63              })}
    64            </ul>
    65          </>
    66        )}
    67      </>
    68    );
    69  }