go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/web/rpcexplorer/src/layout.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 { Link as RouterLink, Outlet, useParams } from 'react-router-dom';
    16  
    17  import AppBar from '@mui/material/AppBar';
    18  import Breadcrumbs from '@mui/material/Breadcrumbs';
    19  import Container from '@mui/material/Container';
    20  import Divider from '@mui/material/Divider';
    21  import Link from '@mui/material/Link';
    22  import Toolbar from '@mui/material/Toolbar';
    23  
    24  import NavigateNextIcon from '@mui/icons-material/NavigateNext';
    25  
    26  import { GlobalsWaiter } from './context/globals';
    27  import { LoginState } from './components/login_state';
    28  
    29  
    30  const Layout = () => {
    31    const { serviceName, methodName } = useParams();
    32  
    33    const breadcrumbs: { to: string; title: string }[] = [];
    34    const addCrumb = (to: string, title: string) => {
    35      breadcrumbs.push({
    36        to: to,
    37        title: title,
    38      });
    39    };
    40    addCrumb('/services/', 'All Services');
    41    if (serviceName) {
    42      addCrumb(`/services/${serviceName}`, serviceName);
    43      if (methodName) {
    44        addCrumb(`/services/${serviceName}/${methodName}`, methodName);
    45      }
    46    }
    47  
    48    return (
    49      <>
    50        <AppBar component='nav' position='static'>
    51          <Toolbar>
    52            <Link
    53              variant='h6'
    54              component={RouterLink}
    55              to='/services/'
    56              underline='none'
    57              color='#ffffff'
    58              noWrap
    59            >
    60              RPC Explorer
    61            </Link>
    62            <Divider
    63              orientation='vertical'
    64              variant='middle'
    65              flexItem
    66              sx={{ pl: 2, borderColor: '#ffffff40' }}
    67            />
    68            <Breadcrumbs
    69              separator={<NavigateNextIcon fontSize='small' />}
    70              aria-label='breadcrumb'
    71              sx={{ pl: 2, color: 'white', flexGrow: 1 }}
    72            >
    73              {breadcrumbs.map((crumb) => (
    74                <Link
    75                  underline='hover'
    76                  component={RouterLink}
    77                  color='inherit'
    78                  key={crumb.to}
    79                  to={crumb.to}
    80                >
    81                  {crumb.title}
    82                </Link>
    83              ))}
    84            </Breadcrumbs>
    85            <GlobalsWaiter silent>
    86              <LoginState />
    87            </GlobalsWaiter>
    88          </Toolbar>
    89        </AppBar>
    90        <GlobalsWaiter>
    91          <Container maxWidth='md'>
    92            <Outlet />
    93          </Container>
    94        </GlobalsWaiter>
    95      </>
    96    );
    97  };
    98  
    99  
   100  export default Layout;