go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/monitoring/components/alerts/alert_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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
    16  import {
    17    Accordion,
    18    AccordionDetails,
    19    AccordionSummary,
    20    Chip,
    21    Tooltip,
    22    Typography,
    23  } from '@mui/material';
    24  
    25  import { AlertJson, TreeJson, BugId, Bug } from '@/monitoring/util/server_json';
    26  
    27  import { AlertTable } from '../../components/alert_table';
    28  
    29  interface AlertGroupProps {
    30    tree: TreeJson;
    31    alerts: AlertJson[];
    32    groupName: string;
    33    groupDescription: string;
    34    defaultExpanded: boolean;
    35    bugs: Bug[];
    36    alertBugs: { [alertKey: string]: BugId[] };
    37  }
    38  // A collapsible group of alerts like 'consistent failures' or 'new failures'.
    39  // Similar to BugGroup, but is never associated with a bug.
    40  export const AlertGroup = ({
    41    tree,
    42    alerts,
    43    groupName,
    44    groupDescription,
    45    defaultExpanded,
    46    bugs,
    47    alertBugs,
    48  }: AlertGroupProps) => {
    49    return (
    50      <Accordion defaultExpanded={defaultExpanded}>
    51        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    52          <Tooltip
    53            title={`There are ${
    54              alerts ? alerts.length : 0
    55            } ${groupName} not linked to any bugs`}
    56          >
    57            <Chip
    58              sx={{ marginRight: '8px' }}
    59              label={alerts ? alerts.length : 0}
    60              variant="outlined"
    61              color={alerts && alerts.length > 0 ? 'primary' : undefined}
    62            />
    63          </Tooltip>
    64          <Typography>
    65            {` ${groupName} `}
    66            <small style={{ opacity: '50%' }}>{groupDescription}</small>
    67          </Typography>
    68        </AccordionSummary>
    69        <AccordionDetails>
    70          {alerts.length > 1 ? (
    71            <AlertTable
    72              alertBugs={alertBugs}
    73              alerts={alerts}
    74              tree={tree}
    75              bugs={bugs}
    76            />
    77          ) : (
    78            <Typography sx={{ opacity: '50%' }}>
    79              No alerts are currently in the {groupName} group.
    80            </Typography>
    81          )}
    82        </AccordionDetails>
    83      </Accordion>
    84    );
    85  };