go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/monitoring/components/alerts/bug_group.tsx (about)

     1  // Copyright 2024 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 BugReportIcon from '@mui/icons-material/BugReport';
    16  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
    17  import {
    18    Accordion,
    19    AccordionDetails,
    20    AccordionSummary,
    21    Chip,
    22    IconButton,
    23    Tooltip,
    24    Typography,
    25  } from '@mui/material';
    26  
    27  import { AlertJson, TreeJson, BugId, Bug } from '@/monitoring/util/server_json';
    28  
    29  import { AlertTable } from '../../components/alert_table';
    30  
    31  interface BugGroupProps {
    32    bug: Bug;
    33    alerts: AlertJson[];
    34    tree: TreeJson;
    35    bugs: Bug[];
    36    alertBugs: { [alertKey: string]: BugId[] };
    37  }
    38  // A collapsible group of failures that are associated with a bug.
    39  // Similar to AlertGroup, but displays bug information as well.
    40  export const BugGroup = ({
    41    bug,
    42    alerts,
    43    tree,
    44    bugs,
    45    alertBugs,
    46  }: BugGroupProps) => {
    47    return (
    48      <>
    49        <Accordion defaultExpanded={false}>
    50          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    51            <div
    52              style={{
    53                display: 'flex',
    54                justifyContent: 'space-between',
    55                alignItems: 'center',
    56                width: '100%',
    57              }}
    58            >
    59              <Tooltip
    60                title={`There are ${
    61                  alerts ? alerts.length : 0
    62                } alerts linked to this bug`}
    63              >
    64                <Chip
    65                  sx={{ marginRight: '8px' }}
    66                  label={alerts ? alerts.length : 0}
    67                  variant="outlined"
    68                  color={alerts && alerts.length > 0 ? 'primary' : undefined}
    69                />
    70              </Tooltip>
    71              <Typography sx={{ flexShrink: '1', flexGrow: '1' }}>
    72                {/* TODO: copy button because can't highlight the text here. */}{' '}
    73                <a
    74                  href={bug.link}
    75                  style={{ textDecoration: 'none' }}
    76                  target="_blank"
    77                  rel="noreferrer"
    78                >
    79                  b/{bug.number}
    80                </a>{' '}
    81                {bug.summary !== undefined ? (
    82                  bug.summary
    83                ) : (
    84                  <span style={{ opacity: '50%' }}>
    85                    Unable to read bug information, please add the &quot;
    86                    {tree.bug_queue_label}&quot; label to the bug.
    87                  </span>
    88                )}{' '}
    89                {bug.labels.map((l) => (
    90                  <small key={l} style={{ opacity: '50%' }}>
    91                    {' '}
    92                    {l}{' '}
    93                  </small>
    94                ))}
    95              </Typography>
    96              <div style={{ flexShrink: '0' }}>
    97                {bug.status !== undefined ? (
    98                  <Chip label={<small>{bug.status}</small>} variant="outlined" />
    99                ) : null}
   100                {bug.priority !== undefined ? (
   101                  <Chip
   102                    sx={{ marginLeft: '8px' }}
   103                    label={`P${bug.priority}`}
   104                    variant={bug.priority === 0 ? 'filled' : 'outlined'}
   105                    color={bug.priority < 2 ? 'primary' : undefined}
   106                  />
   107                ) : null}
   108              </div>
   109            </div>
   110          </AccordionSummary>
   111          <AccordionDetails>
   112            {alerts && alerts.length ? (
   113              <AlertTable
   114                alertBugs={alertBugs}
   115                alerts={alerts}
   116                tree={tree}
   117                bugs={bugs}
   118              />
   119            ) : (
   120              <>
   121                <Typography sx={{ opacity: '50%' }}>
   122                  No alerts are currently linked to this bug.
   123                </Typography>
   124                <Typography sx={{ opacity: '50%' }}>
   125                  To link an alert, click the
   126                  <IconButton onClick={(e) => e.stopPropagation()}>
   127                    <BugReportIcon />
   128                  </IconButton>
   129                  icon on the right of the alert.
   130                </Typography>
   131              </>
   132            )}
   133          </AccordionDetails>
   134        </Accordion>
   135      </>
   136    );
   137  };