go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/pages/builder_page/builder_id_bar.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 styled from '@emotion/styled';
    16  import Link from '@mui/material/Link';
    17  import { Link as RouterLink } from 'react-router-dom';
    18  
    19  import { BuilderID, HealthStatus } from '@/common/services/buildbucket';
    20  import { getProjectURLPath } from '@/common/tools/url_utils';
    21  
    22  import { BuilderHealthIndicator } from './builder_health_indicator';
    23  
    24  const Divider = styled.div({
    25    borderLeft: '1px solid var(--divider-color)',
    26    width: '1px',
    27    marginLeft: '10px',
    28    marginRight: '10px',
    29  });
    30  
    31  export interface BuilderIdBarProps {
    32    readonly builderId: BuilderID;
    33    readonly healthStatus?: HealthStatus;
    34  }
    35  
    36  export function BuilderIdBar({ builderId, healthStatus }: BuilderIdBarProps) {
    37    return (
    38      <div
    39        css={{
    40          backgroundColor: 'var(--block-background-color)',
    41          padding: '6px 16px',
    42          display: 'flex',
    43        }}
    44      >
    45        <div css={{ flex: '0 auto' }}>
    46          <span css={{ color: 'var(--light-text-color)' }}>Builder </span>
    47          <Link component={RouterLink} to={getProjectURLPath(builderId.project)}>
    48            {builderId.project}
    49          </Link>
    50          <span> / </span>
    51          <span>{builderId.bucket}</span>
    52          <span> / </span>
    53          <span>{builderId.builder}</span>
    54        </div>
    55        {healthStatus && (
    56          <>
    57            <Divider />
    58            <BuilderHealthIndicator healthStatus={healthStatus} />
    59          </>
    60        )}
    61      </div>
    62    );
    63  }