peridot/apollo/ui/src/components/Overview.tsx

521 lines
16 KiB
TypeScript
Raw Normal View History

2022-07-07 20:11:50 +00:00
/*
* Copyright (c) All respective contributors to the Peridot Project. All rights reserved.
* Copyright (c) 2021-2022 Rocky Enterprise Software Foundation, Inc. All rights reserved.
* Copyright (c) 2021-2022 Ctrl IQ, Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* 3. Neither the name of the copyright holder nor the names of its contributors
* may be used to endorse or promote products derived from this software without
* specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
import {
AddIcon,
ArrowLeftIcon,
ArrowRightIcon,
MinusIcon,
SearchIcon,
} from '@chakra-ui/icons';
2022-07-07 20:11:50 +00:00
import {
Alert,
AlertDescription,
AlertIcon,
AlertTitle,
Box,
ButtonGroup,
2022-07-07 20:11:50 +00:00
FormControl,
FormLabel,
HStack,
IconButton,
Input,
InputGroup,
InputLeftElement,
2023-01-26 09:34:14 +00:00
Link,
2022-07-07 20:11:50 +00:00
Select,
Spinner,
Stack,
Table,
TableColumnHeaderProps,
TableContainer,
Tbody,
Td,
Text,
Th,
Thead,
Tr,
useColorModeValue,
} from '@chakra-ui/react';
import {
severityToBadge,
severityToText,
typeToText,
} from 'apollo/ui/src/enumToText';
2022-07-07 20:11:50 +00:00
import {
ListAdvisoriesFiltersSeverityEnum,
ListAdvisoriesFiltersTypeEnum,
} from 'bazel-bin/apollo/proto/v1/client_typescript';
import {
2022-10-30 01:59:25 +00:00
V1Advisory,
V1AdvisoryType,
2022-10-30 01:59:25 +00:00
} from 'bazel-bin/apollo/proto/v1/client_typescript/models';
2022-07-07 20:11:50 +00:00
import { reqap } from 'common/ui/reqap';
import React, { useEffect, useState } from 'react';
2023-01-26 09:34:14 +00:00
import { Link as RouterLink } from 'react-router-dom';
import { api } from '../api';
import { COLOR_RESF_GREEN } from '../styles';
2022-07-07 20:11:50 +00:00
export const Overview = () => {
2023-01-26 09:34:14 +00:00
const inputBackground = useColorModeValue('white', undefined);
const tableBg = useColorModeValue('white', 'gray.800');
const pagerButtonScheme = useColorModeValue('blackAlpha', 'gray');
const linkBlue = useColorModeValue('blue.600', 'blue.300');
const linkPurple = useColorModeValue('purple.600', 'purple.300');
const [advisories, setAdvisories] = useState<V1Advisory[]>();
const [lastUpdated, setLastUpdated] = useState<Date>();
const [total, setTotal] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const [isError, setIsError] = useState(false);
// Request State
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [filtersKeyword, setFiltersKeyword] = useState<string>();
const [filterBefore, setFilterBefore] = useState<Date>();
const [filterAfter, setFilterAfter] = useState<Date>();
2023-02-06 23:40:39 +00:00
const [filterProduct, setFilterProduct] = useState<string>('');
const [filtersType, setFiltersType] =
useState<keyof typeof ListAdvisoriesFiltersTypeEnum>();
const [filtersSeverity, setFiltersSeverity] =
useState<keyof typeof ListAdvisoriesFiltersSeverityEnum>();
useEffect(() => {
const fetch = async () => {
setIsLoading(true);
const [err, res] = await reqap(() =>
api.listAdvisories({
page,
limit: pageSize,
filtersKeyword,
filtersBefore: filterBefore,
filtersAfter: filterAfter,
2023-02-06 23:40:39 +00:00
filtersProduct: filterProduct,
filtersSeverity: filtersSeverity
? ListAdvisoriesFiltersSeverityEnum[filtersSeverity]
: undefined,
filtersType: filtersType
? ListAdvisoriesFiltersTypeEnum[filtersType]
: undefined,
})
);
setIsLoading(false);
if (err || !res) {
setIsError(true);
setAdvisories(undefined);
return;
}
setIsError(false);
if (res) {
setAdvisories(res.advisories);
setLastUpdated(res.lastUpdated);
setTotal(parseInt(res.total || '0'));
}
};
const timer = setTimeout(() => fetch(), 500);
return () => clearTimeout(timer);
}, [
pageSize,
page,
filtersKeyword,
filterBefore,
filterAfter,
filtersSeverity,
2023-02-06 23:40:39 +00:00
filterProduct,
filtersType,
]);
// TODO: Figure out why sticky isn't sticking
const stickyProps: TableColumnHeaderProps = {
position: 'sticky',
top: '0px',
zIndex: '10',
scope: 'col',
};
const lastPage = total < pageSize ? 0 : Math.ceil(total / pageSize) - 1;
2022-07-07 20:11:50 +00:00
return (
<Box
w="100%"
h="100%"
display="flex"
flexDirection="column"
p={4}
alignItems="stretch"
>
<Stack
direction={{
sm: 'column',
lg: 'row',
}}
alignItems={{
sm: 'stretch',
lg: 'flex-end',
}}
>
<InputGroup>
<InputLeftElement>
<SearchIcon />
</InputLeftElement>
<Input
type="search"
aria-label="Keyword search"
placeholder="Keyword Search"
flexGrow={1}
width="200px"
variant="filled"
borderRadius="0"
backgroundColor={inputBackground}
onChange={(e) => setFiltersKeyword(e.target.value)}
/>
</InputGroup>
<HStack>
<FormControl width="180px" flexShrink={0} flexGrow={1}>
<FormLabel fontSize="sm">Type</FormLabel>
<Select
aria-label="Type"
placeholder="All"
variant="filled"
background={inputBackground}
borderRadius="0"
value={filtersType}
onChange={(e) => {
if (e.currentTarget.value !== 'Security') {
setFiltersSeverity(undefined);
}
setFiltersType(
e.currentTarget
.value as keyof typeof ListAdvisoriesFiltersTypeEnum
);
}}
>
{Object.keys(ListAdvisoriesFiltersTypeEnum)
.sort((a, b) => a.localeCompare(b))
.filter((a) => a !== 'Unknown')
.map((s) => (
<option key={s} value={s}>
{s}
</option>
))}
</Select>
</FormControl>
{filtersType === 'Security' && (
<FormControl width="180px" flexShrink={0} flexGrow={1}>
<FormLabel fontSize="sm">Severity</FormLabel>
<Select
aria-label="Severity"
placeholder="All"
variant="filled"
background={inputBackground}
borderRadius="0"
value={filtersSeverity}
onChange={(e) =>
setFiltersSeverity(
e.currentTarget
.value as keyof typeof ListAdvisoriesFiltersSeverityEnum
)
}
>
{Object.keys(ListAdvisoriesFiltersSeverityEnum)
.sort((a, b) => a.localeCompare(b))
.filter((a) => a !== 'Unknown')
.map((s) => (
<option key={s} value={s}>
{s}
</option>
))}
</Select>
</FormControl>
)}
2023-02-06 23:40:39 +00:00
<FormControl width="180px" flexShrink={0} flexGrow={1}>
<FormLabel fontSize="sm">Product</FormLabel>
<Select
aria-label="Product"
placeholder="All"
variant="filled"
background={inputBackground}
borderRadius="0"
value={filterProduct}
onChange={(e) => {
setFilterProduct(e.currentTarget.value as string);
}}
>
{['Rocky Linux 8', 'Rocky Linux 9'].map((s) => (
<option key={s} value={s}>{s}</option>
))}
</Select>
</FormControl>
</HStack>
<HStack>
<FormControl width="180px" flexShrink={0} flexGrow={1}>
<FormLabel fontSize="sm">From</FormLabel>
<Input
type="date"
variant="filled"
background={inputBackground}
borderRadius="0"
max={
filterBefore
? filterBefore.toLocaleDateString('en-ca')
: new Date().toLocaleDateString('en-ca')
}
value={filterAfter?.toLocaleDateString('en-ca') || ''}
onChange={(e) => {
const newVal = e.currentTarget.value;
console.log(newVal);
if (!newVal) {
setFilterAfter(undefined);
}
const asDate = new Date(newVal);
if (!(asDate instanceof Date) || isNaN(asDate.getTime())) {
// Check value parses as a date
return;
}
const [year, month, date] = newVal.split('-').map(Number);
setFilterAfter(new Date(year, month - 1, date));
}}
/>
</FormControl>
<FormControl width="180px" flexShrink={0} flexGrow={1}>
<FormLabel fontSize="sm">To</FormLabel>
<Input
type="date"
variant="filled"
background={inputBackground}
borderRadius="0"
min={filterAfter?.toLocaleDateString('en-ca')}
max={new Date().toLocaleDateString('en-ca')}
value={filterBefore?.toLocaleDateString('en-ca') || ''}
onChange={(e) => {
const newVal = e.currentTarget.value;
if (!newVal) {
setFilterBefore(undefined);
}
const asDate = new Date(newVal);
if (!(asDate instanceof Date) || isNaN(asDate.getTime())) {
// Check value parses as a date
return;
}
const [year, month, date] = newVal.split('-').map(Number);
setFilterBefore(
new Date(year, month - 1, date, 23, 59, 59, 59) // Set to 1ms prior to midnight to be inclusive of selected date
);
}}
/>
</FormControl>
</HStack>
</Stack>
<HStack my={4} justifyContent="space-between" flexWrap="wrap">
<Text fontStyle="italic" fontSize="xs">
Last updated {lastUpdated?.toLocaleString() || 'never'}
</Text>
<HStack>
<Text fontSize="xs">
Displaying {(page * pageSize + 1).toLocaleString()}-
{Math.min(total, page * pageSize + pageSize).toLocaleString()} of{' '}
{total.toLocaleString()}
</Text>
<ButtonGroup
size="xs"
isAttached
alignItems="stretch"
2023-01-26 09:34:14 +00:00
colorScheme={pagerButtonScheme}
2022-10-30 01:59:25 +00:00
>
<IconButton
aria-label="First Page"
icon={<ArrowLeftIcon fontSize="8px" />}
disabled={page <= 0}
onClick={() => setPage(0)}
/>
<IconButton
aria-label="Previous Page"
icon={<MinusIcon fontSize="8px" />}
disabled={page <= 0}
onClick={() => setPage((old) => old - 1)}
2022-10-30 01:59:25 +00:00
/>
<Text
fontSize="xs"
// borderTop="1px solid"
// borderBottom="1px solid"
borderColor="gray.200"
2023-01-26 09:34:14 +00:00
backgroundColor={tableBg}
lineHeight="24px"
px={2}
>
{(page + 1).toLocaleString()} / {(lastPage + 1).toLocaleString()}
</Text>
<IconButton
aria-label="Next Page"
icon={<AddIcon fontSize="8px" />}
disabled={page >= lastPage}
onClick={() => setPage((old) => old + 1)}
2022-10-30 01:59:25 +00:00
/>
<IconButton
aria-label="Last Page"
icon={<ArrowRightIcon fontSize="8px" />}
disabled={page >= lastPage}
onClick={() => setPage(lastPage)}
2022-10-30 01:59:25 +00:00
/>
</ButtonGroup>
</HStack>
</HStack>
{isLoading ? (
<Spinner
m="auto"
size="xl"
alignSelf="center"
color={COLOR_RESF_GREEN}
thickness="3px"
/>
) : isError ? (
<Alert
status="error"
m="auto"
flexDirection="column"
width="300px"
borderRadius="md"
>
<AlertIcon mr="0" />
<AlertTitle>Something has gone wrong</AlertTitle>
<AlertDescription>Failed to load errata</AlertDescription>
</Alert>
) : (
2023-01-26 09:34:14 +00:00
<Box backgroundColor={tableBg} boxShadow="base">
<TableContainer>
2023-01-26 09:34:14 +00:00
<Table size="sm" variant="striped">
<Thead>
<Tr>
<Th {...stickyProps} width="36px" />
<Th {...stickyProps}>Advisory</Th>
<Th {...stickyProps}>Synopsis</Th>
<Th {...stickyProps}>Type / Severity</Th>
<Th {...stickyProps}>Products</Th>
<Th {...stickyProps}>Issue Date</Th>
</Tr>
</Thead>
<Tbody>
{!advisories?.length && (
<Tr>
<Td colSpan={6} textAlign="center">
<Text>No rows found</Text>
</Td>
</Tr>
)}
{advisories?.map((a, idx) => (
<Tr key={a.name}>
2023-01-26 09:34:14 +00:00
<Td textAlign="center" pr={0}>
{severityToBadge(a.severity, a.type)}
</Td>
2023-01-26 09:34:14 +00:00
<Td>
<Link
2023-01-26 09:34:14 +00:00
as={RouterLink}
to={`/${a.name}`}
2023-01-26 09:34:14 +00:00
color={linkBlue}
_visited={{ color: linkPurple }}
>
{a.name}
</Link>
</Td>
2023-01-26 09:34:14 +00:00
<Td>
{a.synopsis?.replace(
/^(Critical|Important|Moderate|Low): /,
''
)}
</Td>
2023-01-26 09:34:14 +00:00
<Td>
{typeToText(a.type)}
{a.type === V1AdvisoryType.Security
? ` / ${severityToText(a.severity)}`
: ''}
</Td>
2023-01-26 09:34:14 +00:00
<Td>{a.affectedProducts?.join(', ')}</Td>
<Td>
{Intl.DateTimeFormat(undefined, {
day: '2-digit',
month: 'short',
year: 'numeric',
}).format(a.publishedAt)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
2022-07-07 20:11:50 +00:00
)}
<HStack justifyContent="flex-end" mt={4}>
<Text as="label" htmlFor="row-count" fontSize="sm">
Rows per page:
</Text>
<Select
id="row-count"
name="row-count"
variant="filled"
backgroundColor={inputBackground}
width="100px"
size="sm"
value={pageSize}
onChange={(e) => {
setPage(0);
setPageSize(Number(e.currentTarget.value));
}}
>
{[10, 25, 50, 100].map((count) => (
<option key={count} value={count}>
{count.toLocaleString()}
</option>
))}
</Select>
</HStack>
</Box>
2022-07-07 20:11:50 +00:00
);
};